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

<?php
/** @var \App\Assets $assets */
$assets
    ->load('highcharts')
    ->load('highcharts_theme_'.$customization->getTheme());
?>

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

<div class="row">
    <div class="col-sm-12">
        <section class="card" role="region">
            <div class="card-header ch-alt">
                <h2><?=__('Station Statistics') ?></h2>
            </div>
            <div role="tabpanel">
                <ul class="tab-nav" role="tablist">
                    <li class="p-l-10 active"><a role="tab" data-toggle="tab" aria-expanded="true" aria-controls="listeners-by-day" href="#listeners-by-day"><?=__('Listeners by Day') ?></a></li>
                    <li><a role="tab" data-toggle="tab" aria-controls="listeners-by-hour" href="#listeners-by-hour"><?=__('Listeners by Hour') ?></a></li>
                    <li><a role="tab" data-toggle="tab" aria-controls="listeners-by-day-of-week" href="#listeners-by-day-of-week"><?=__('Listeners by Day of Week') ?></a></li>
                </ul>

                <div class="tab-content">
                    <div class="tab-pane card-body card-padding active" id="listeners-by-day" role="tabpanel">
                        <?=$this->fetch('stations/index/index-dailystats', [
                            'daily_ranges' => $daily_ranges,
                            'hourly_averages' => $hourly_averages,
                            'daily_averages' => $daily_averages
                        ]) ?>
                    </div>
                    <div class="tab-pane card-padding" id="listeners-by-hour" role="tabpanel">
                        <?=$this->fetch('stations/index/index-hourlystats', [
                            'averages_by_hour' => $averages_by_hour,
                        ]) ?>
                    </div>
                    <div class="tab-pane card-padding" id="listeners-by-day-of-week" role="tabpanel">
                        <?=$this->fetch('stations/index/index-dayofweek', [
                            'day_of_week_stats' => $day_of_week_stats,
                        ]) ?>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>

<div class="row">
    <div class="col-sm-6">
        <section class="card" role="region">
            <div class="card-header ch-alt">
                <h2><i class="zmdi zmdi-thumb-up"></i> <?=__('Best Performing Songs') ?> <small><?=__('in the last 48 hours') ?></small></h2>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-condensed table-nopadding">
                    <colgroup>
                        <col width="20%">
                        <col width="80%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th><?=__('Change') ?></th>
                            <th><?=__('Song') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php foreach($best_performing_songs as $song_row): ?>
                        <tr>
                            <td class="text-center text-success">
                                <i class="zmdi zmdi-thumb-up"></i> <?=abs($song_row['stat_delta']) ?><br>
                                <small><?=$song_row['stat_start'] ?> to <?=$song_row['stat_end'] ?>
                            </td>
                            <td>
                                <?php if ($song_row['song']['title']): ?>
                                    <b><?=$song_row['song']['title'] ?></b><br>
                                    <?=$song_row['song']['artist'] ?>
                                <?php else: ?>
                                    <?=$song_row['song']['text'] ?>
                                <?php endif; ?>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
    <div class="col-sm-6">
        <section class="card" role="region">
            <div class="card-header ch-alt">
                <h2><i class="zmdi zmdi-thumb-down"></i> <?=__('Worst Performing Songs') ?> <small><?=__('in the last 48 hours') ?></small></h2>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-condensed table-nopadding">
                    <colgroup>
                        <col width="20%">
                        <col width="80%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th><?=__('Change') ?></th>
                            <th><?=__('Song') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php foreach($worst_performing_songs as $song_row): ?>
                        <tr>
                            <td class="text-center text-danger">
                                <i class="zmdi zmdi-thumb-down"></i> <?=abs($song_row['stat_delta']) ?><br>
                                <small><?=$song_row['stat_start'] ?> to <?=$song_row['stat_end'] ?>
                            </td>
                            <td>
                                <?php if ($song_row['song']['title']): ?>
                                    <b><?=$song_row['song']['title'] ?></b><br>
                                    <?=$song_row['song']['artist'] ?>
                                <?php else: ?>
                                    <?=$song_row['song']['text'] ?>
                                <?php endif; ?>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <section class="card" role="region">
            <div class="card-header ch-alt">
                <h2><?=__('Most Played Songs') ?> <small><?=__('in the last month') ?></small></h2>
            </div>
            <div class="table-responsive">
                <table class="table table-striped table-condensed table-nopadding">
                    <colgroup>
                        <col width="10%">
                        <col width="90%">
                    </colgroup>
                    <thead>
                        <tr>
                            <th><?=__('Plays') ?></th>
                            <th><?=__('Song') ?></th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php foreach($song_totals['played'] as $song_row): ?>
                        <tr>
                            <td class="text-center"><?=$song_row['records'] ?></td>
                            <td>
                            <?php if ($song_row['song']['title']): ?>
                                <b><?=$song_row['song']['title'] ?></b><br>
                                <?=$song_row['song']['artist'] ?>
                            <?php else: ?>
                                <?=$song_row['song']['text'] ?>
                            <?php endif; ?>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</div>
