<?php $this->layout('main', ['title' => __('Dashboard'), 'manual' => true]); ?>

<?php
/** @var \App\Customization $customization */
/** @var \App\Assets $assets */
$assets
    ->load('vue')
    ->load('radio');

if ($metrics) {
    $assets->load('highcharts')->load('highcharts_theme_'.$customization->getTheme());
}
?>

<div class="block-header">
    <h2><?=__('Dashboard') ?></h2>
</div>

<?php if ($metrics): ?>
<div class="row">
    <div class="col-sm-6">
        <section class="card" role="region">
            <div class="card-header ch-alt">
                <h2><?=__('Listeners Across All Stations') ?></h2>
            </div>
            <div class="card-body card-padding-sm">
                <div id="network_chart" style="height: 250px;"></div>
            </div>
        </section>
    </div>
    <div class="col-sm-6">
        <section class="card" role="region">
            <div class="card-header ch-alt">
                <h2><?=__('Listeners Per Station') ?></h2>
            </div>
            <div class="card-body card-padding-sm">
                <div id="station_chart" style="height: 250px;"></div>
            </div>
        </section>
    </div>
</div>
<?php endif; ?>

<div class="row">
    <div class="col-sm-12">
        <section class="card" role="region">
            <div class="card-header ch-alt">
                <h2><?=__('Station Overview') ?></h2>

                <ul class="actions">
                <?php if ($acl->userAllowed($user, 'administer stations')): ?>
                    <li><a class="" title="<?=sprintf(__('Add %s'), __('Station')) ?>" href="<?=$router->named('admin:stations:add') ?>"><i class="zmdi zmdi-plus"></i></a></li>
                <?php endif; ?>
                </ul>
            </div>
            <div class="table-responsive">
                <table class="table table-striped" id="station_dashboard">
                    <colgroup>
                        <col width="5%">
                        <col width="30%">
                        <col width="10%">
                        <col width="40%">
                        <col width="15%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th>&nbsp;</th>
                            <th><?=__('Station Name') ?></th>
                            <th class="text-center"><?=__('Listeners') ?></th>
                            <th><?=__('Now Playing') ?></th>
                            <th><?=__('Options') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="input" v-bind:id="'station_' + row.station.id" v-for="row in stations" >
                            <td class="text-center">
                                <a class="btn-audio" role="button" title="<?=__('Play/Pause') ?>" href="#" v-bind:data-url="row.stream_url">
                                    <i class="zmdi zmdi-play"></i>
                                </a>
                            </td>
                            <td>
                                <big><a v-bind:href="row.public_url" target="_blank">{{ row.station.name }}</a></big>
                            </td>
                            <td class="text-center">
                                <span class="nowplaying-listeners">{{ row.np.listeners.current }}</span>
                            </td>
                            <td>
                                <strong><span class="nowplaying-title">{{ row.np.now_playing.song.title }}</span></strong><br>
                                <span class="nowplaying-artist">{{ row.np.now_playing.song.artist }}</span>
                            </td>
                            <td>
                                <a class="btn btn-primary" role="button" v-bind:href="row.manage_url"><?=__('Manage') ?></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</div>

<?php if ($metrics): ?>
<script type="text/javascript" nonce="<?=$assets->getCspNonce() ?>">
$(function () {
    Highcharts.setOptions({
        global: {
            timezoneOffset: <?=\App\Timezone::getOffsetMinutes() ?>,
            useUTC: false
        }
    });

    var datetime_axis = {
        type: 'datetime',
        labels: {
            formatter: function () {
                return Highcharts.dateFormat('%a %d %b', this.value);
            },
            dateTimeLabelFormats: {
                minute: '%H:%M',
                hour: '%H:%M',
                day: '%e. %b',
                week: '%e. %b',
                month: '%b \'%y',
                year: '%Y'
            }
        }
    };

    $('#network_chart').highcharts({
        chart: { zoomType: 'x' },
        title: {text: ''},
        xAxis: datetime_axis,
        plotOptions: {
            spline: {
                marker: { enabled: false }
            }
        },
        yAxis: {
            title: {
                text: <?=$this->escapeJs(__('Listeners')) ?>
            },
            min: 0
        },
        tooltip: {
            crosshairs: true,
            shared: true,
            xDateFormat: '%Y-%m-%d'
        },
        colors: [
            '#AEE1FF',
            '#0091E5',
            '#FFA6A6',
            '#8C0000'
        ],

        series: <?=$metrics['network'] ?>
    });

    $('#station_chart').highcharts({
        chart: { zoomType: 'x' },
        title: {text: ''},
        xAxis: datetime_axis,
        plotOptions: {
            spline: {
                lineWidth: 1,
                marker: { enabled: false },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 3
                    }
                },
                threshold: null
            }
        },
        yAxis: {
            title: {
                text: <?=$this->escapeJs(__('Listeners')) ?>
            },
            min: 0
        },
        tooltip: {
            crosshairs: true,
            xDateFormat: '%Y-%m-%d'
        },

        series: <?=$metrics['station'] ?>
    });
});
</script>
<?php endif; ?>

<script type="text/javascript" nonce="<?=$assets->getCspNonce() ?>">
var station_dashboard;

$(function() {
    station_dashboard = new Vue({
        el: '#station_dashboard',
        data: <?=json_encode($stations) ?>
    });

    setTimeout(loadNowPlaying, 15000);
});

function loadNowPlaying() {
    $.getJSON('<?=$router->named('api:nowplaying:index') ?>', function(data) {
        $.each(data, function(k, row) {
            var station_id = row.station.id;
            station_dashboard['stations'][station_id]['np'] = row;
        });

        setTimeout(loadNowPlaying, 15000);
    });
}
</script>
