@extends('layouts.app')
@section('title', $song['title'])

@section('content')

    <div class='controlArea'>
    @if( isset( $back ) )
        <a class='back' href='{{route('song.show', ['song' => $back, 'playlist' => $playlist ?? ''])}}'>
        <b>{{$back->name}}</b>
        </a>
    @endif
    @if( $playlist ?? FALSE)
        <a class='home' href='{{route('playlist.show',['playlist' => $playlist->name])}}'>
            <i>Back to {{$playlist->name}}</i>
        </a>
    @else
        <a class='home' href='{{route('song.list')}}'>
        <i>Go home</i>
        </a>
    @endif
    @if( isset( $next ) )
        <a class='next' href='{{route('song.show', ['song' => $next, 'playlist' => $playlist ?? ''])}}'>
        <b>{{$next->name}}</b>
        </a>
    @endif
    </div>

    <h4>{{$song['title']}} - {{$song->author}}</h4>
    @if($song->audio)
        <audio controls src="{{$song->audio}}"></audio><br/>
    @endif
    @if($song->key)
        Key: {{$song->key}}<br/>
    @endif
    @if($song->verse)
        Scripture: {{$song->verse}}<br/>
    @endif
    @can('update', $song )
        <a href='{{ route( 'song.edit', [
            'song' => $song,
            'playlist' => $playlist ?? '',
            'key' => $key,
            ] ) }}'>edit this song</a>
    @endcan

    <form style="display: inline-block">
    <select name="transp" id="transp"
        value = "<?php echo $transp;?>"
    >
    @if($song->key)
        @foreach(['C','Db','D','E','F','F#','G','G#','A','Bb','B'] as $kay)
            <option {{$kay == ($_GET['transp'] ?? $song->key) ? 'selected' : ''}} value='{{$kay}}'>{{$kay}}</option>
        @endforeach
    @else
        <?php
            for ($i=-6; $i < 12; $i++) {
                if (($transp + 24)%12 == $i) $selected = 'selected';
                else $selected = '';
                $dir = "transpose";
                echo "<option value='$i' $selected>$dir $i semitones</option>";
            }
        ?>
    @endif
    </select>
        <button>Transpose</button>
    </form>
    @foreach (['G','D','C','A'] as $possibleKey)
        @if($possibleKey != ($_GET['transp'] ?? $song->key))
            <form style="display: inline-block;">
                <button>to {{$possibleKey}}</button>
                <input type='hidden' name='transp' value='{{$possibleKey}}'>
            </form>
        @endif
    @endforeach

    <pre>{!! $song['escapedText'] !!}</pre>
    <div id="chordarea">
        <canvas id='guitarregion' width="100" height="100" onclick="cycle(guitarObj);"></canvas>
        <canvas id='ukuleleregion' width="100" height="100" onclick="cycle(ukeObj);"></canvas>
    </div>

    @foreach ($suggestions as $sug)
        <div class='controlArea'>
            <a class='but' href='{{route('song.suggested', ['song' => $sug, 'from' => $song, 'playlist' => $playlist ?? ''])}}'><b>{{$sug->name}}</b></a>
            @if ($key && $sug->key)
            <a class='but' data-words='transposed to ' data-key='{{$key}}' href='{{route('song.suggested', ['song' => $sug, 'from' => $song, 'key' => $key, 'playlist' => $playlist ?? ''])}}'>
                <i>transposed to {{$key}}</i>
            </a>
            @endif
        </div>
    @endforeach

    @if ($addToPlaylist ?? null)
        <form action="/playlist/{{ $addToPlaylist }}/{{ $song->id }}" method="post">
            @csrf
            <button>Add to favorites</button>
        </form>
    @endif

<script src='/js/chordsdata/chords.js'></script>
<script src='/js/chordsdata/ukulelechords.js'></script>
<script src='/js/page.js'></script>
<script src='https://code.jquery.com/jquery-3.5.0.min.js'></script>
<script src='/js/jsonly.js'></script>
<script src='/js/ccharter.js'></script>
<!--<script src="https://api.reftagger.com/v2/RefTagger.js"></script>
<script>
    var refTagger = {
        settings: {
            bibleVersion: "NET",
            socialSharing:[],
            noSearchClassNames:["tabs"],
        }
    };
    (function(d, t) {
        var g = d.createElement(t), s = d.getElementsByTagName(t)[0];
        g.src = "//api.reftagger.com/v2/RefTagger.js";
        s.parentNode.insertBefore(g, s);
    }(document, "script"));
</script>-->

@endsection