<?php
/** @var \App\Entity\Station $station */

$this->layout('minimal', [
    'page_class' => 'public-page-content station-'.$station->getShortName(),
    'title' => $this->e($station->getName()),
]);

/** @var \App\Assets $assets */
$assets
    ->load('vue')
    ->load('radio')
    ->load('bootgrid')
    ->load('fancybox');
?>

<div class="public-page">
    <div class="public-block">

        <ul class="actions pull-right" id="radio-player-controls">
            <li><a href="javascript:;" class="jp-mute" title="<?=__('Mute') ?>"><i class="zmdi zmdi-volume-up"></i></a></li>
            <li><a href="javascript:;" class="jp-unmute" title="<?=__('Unmute') ?>"><i class="zmdi zmdi-volume-off"></i></a></li>
            <li>
                <div class="progress jp-volume-bar" style="width: 100px; height: 15px;">
                    <div class="jp-volume-bar-value progress-bar" role="progressbar"></div>
                </div>
            </li>
        </ul>
        <h3 class="text-left"><?=$this->e($station->getName()) ?></h3>

        <div class="stations nowplaying">
            <?=$this->fetch('frontend/public/player_component', ['stream_url' => $stream_url, 'autoplay' => $autoplay]) ?>
        </div>

        <div class="buttons">
            <a class="btn btn-default btn-icon-text" data-toggle="modal" data-target="#modal-history">
                <i class="zmdi zmdi-time-restore"></i> <?=__('Song History') ?>
            </a>
        <?php if ($station->getEnableRequests()): ?>
            <a class="btn btn-default btn-icon-text" data-toggle="modal" data-target="#modal-request">
                <i class="zmdi zmdi-help-outline"></i> <?=__('Request Song') ?>
            </a>
        <?php endif; ?>
            <div class="btn-group">
                <button type="button" class="btn btn-default btn-icon-text dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="zmdi zmdi-download"></i> <?=__('Playlist') ?> <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <?php foreach(['pls', 'm3u'] as $format): ?>
                        <li><a href="<?=$router->named('public:playlist', ['station' => $station->getShortName(), 'format' => $format]) ?>"><?=sprintf(__('Download %s'), strtoupper($format)) ?></a></li>
                    <?php endforeach; ?>
                </ul>
            </div>
        </div>

    </div>
</div>

<div class="modal fade" id="modal-history" tabindex="-1" role="dialog" aria-labelledby="modal-history-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modal-history-label"><?=__('Song History') ?></h4>
            </div>
            <div class="modal-body">
                <ol type="1" id="station-history">
                    <li v-for="row in history">
                        <b>{{ row.song.title }}</b><br>
                        {{ row.song.artist }}
                    </li>
                </ol>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-request" tabindex="-1" role="dialog" aria-labelledby="modal-request-label">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="modal-request-label"><?=__('Request a Song') ?></h4>
            </div>
            <div class="modal-body">

                <table class="data-table table table-striped" id="requests-table">
                    <thead>
                    <tr>
                        <th data-column-id="song_id" data-identifier="true" data-visible="false" data-visible-in-selection="false">ID</th>
                        <th data-column-id="song_title"><?=__('Title') ?></th>
                        <th data-column-id="song_artist"><?=__('Artist') ?></th>
                        <th data-column-id="song_album" data-visible="false"><?=__('Album') ?></th>
                        <th data-column-id="commands" data-formatter="commands" data-sortable="false"><?=__('Actions') ?></th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" nonce="<?=$assets->getCspNonce() ?>">
$(function() {
    songHistory = new Vue({
        el: '#station-history',
        data: {
            history: [
                {
                    song: {
                        title: '<?= __('Song Title') ?>',
                        artist: '<?= __('Song Artist') ?>'
                    }
                }
            ]
        }
    });

    function loadNowPlaying() {
        $.getJSON('<?=$router->named('api:nowplaying:index', ['station' => $station->getId()]) ?>', function(row) {
            nowPlaying.np = row;
            songHistory.history = row.song_history;

            if ('mediaSession' in navigator) {
                navigator.mediaSession.metadata = new MediaMetadata({
                    title: row.now_playing.song.title,
                    artist: row.now_playing.song.artist,
                    artwork: [
                        { src: row.now_playing.song.art }
                    ]
                });
            }

            setTimeout(loadNowPlaying, 15000);
        });
    }
    loadNowPlaying();

    $('[data-fancybox]').fancybox({
        buttons: ['close']
    });
});

var request_dialog = $('#modal-request');

request_dialog.on('show.bs.modal', function (event) {

    if (!request_dialog.data('request_loaded'))
    {
        var grid = $("#requests-table").bootgrid({
            ajax: true,
            rowSelect: false,
            caseSensitive: false,
            css: {
                icon: 'zmdi icon',
                iconColumns: 'zmdi-view-module',
                iconDown: 'zmdi-sort-amount-desc',
                iconRefresh: 'zmdi-refresh',
                iconUp: 'zmdi-sort-amount-asc'
            },
            url: "<?=$router->named('api:requests:list', ['station' => $station->getId()]) ?>",
            formatters: {
                "commands": function(column, row) {
                    return '<a class="btn btn-request btn-sm btn-primary" data-url="'+row.request_url+'"><?=__('Request') ?></a>';
                }
            }
        }).on("loaded.rs.jquery.bootgrid", function()
        {
            /* Executes after data is loaded and rendered */
            grid.find(".btn-request").on("click", function(e)
            {
                e.preventDefault();
                request_dialog.modal('hide');

                $.ajax({
                    dataType: "json",
                    url: $(this).data('url')
                }).done(function(data) {
                    notify(data, 'success');
                }).fail(function(jqXhr) {
                    notify('Error: ' + jqXhr.responseJSON, 'danger');
                });

                return false;
            });
        });

        request_dialog.data('request_loaded', true);
    }

});
</script>
