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

$this->layout('main', ['title' => __('Listeners'), 'manual' => true]);

$assets
    ->load('vue')
    ->load('daterangepicker')
    ->load('leaflet')
    ->addInlineJs($this->fetch('stations/reports/listeners.js', ['station' => $station]));
?>

<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="card-header bg-primary-dark">
                <div class="d-flex align-items-center">
                    <h2 class="card-title flex-fill my-0">
                        <?=__('Listeners')?>
                    </h2>
                    <div class="flex-shrink">
                        <a class="btn btn-bg" id="btn-export" href="<?=$router->fromHere(
                            'api:listeners:index',
                            [],
                            ['format' => 'csv']
                        )?>" target="_blank" title="<?=__('Download CSV')?>">
                            <i class="material-icons" aria-hidden="true">file_download</i> <?=__('Download CSV')?>
                        </a>
                        <a class="btn btn-bg dropdown-toggle" id="reportrange" href="#">
                            <i class="material-icons" aria-hidden="true">date_range</i>
                            <span><?=__('Live Listeners')?></span> <i class="caret"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div id="map" style="height: 350px; z-index:0;">
            </div>
            <div id="app-datatable">
                <div class="card-body row">
                    <div class="col-md-4">
                        <h5>
                            <?=__('Unique Listeners')?><br>
                            <small><?=__('for selected period')?></small>
                        </h5>
                        <h3>{{ listeners.length }}</h3>
                    </div>
                    <div class="col-md-4">
                        <h5>
                            <?=__('Total Listener Hours')?><br>
                            <small><?=__('for selected period')?></small>
                        </h5>
                        <h3>{{ total_listener_hours }}</h3>
                    </div>
                </div>
                <table class="data-table table table-responsive table-striped" id="app-datatable">
                    <thead>
                    <tr>
                        <th><?=__('IP')?></th>
                        <th><?=__('Time')?></th>
                        <th><?=__('Time (sec)')?></th>
                        <th><?=__('User Agent')?></th>
                        <th><?=__('Stream')?></th>
                        <th><?=__('Location')?></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="listener in listeners">
                        <td>{{ listener.ip }}</td>
                        <td>{{ formatTime(listener.connected_time) }}</td>
                        <td>{{ listener.connected_time }}</td>
                        <td>
                                <span v-if="listener.is_mobile">
                                    <i class="material-icons" aria-hidden="true">smartphone</i>
                                    <span class="sr-only"><?=__('Mobile Device')?></span>
                                </span>
                            <span v-else>
                                    <i class="material-icons" aria-hidden="true">desktop_windows</i>
                                    <span class="sr-only"><?=__('Desktop Device')?></span>
                                </span>
                            {{ listener.user_agent }} <br>
                            <small>{{ listener.client }}</small>
                        </td>
                        <td>
                            <span v-if="listener.mount_name == ''">
                                <?=__('Unknown')?>
                            </span>
                            <span v-else>
                                {{ listener.mount_name }}<br>
                                <small v-if="listener.mount_is_local">
                                    <?=__('Local')?>
                                </small>
                                <small v-else>
                                    <?=__('Remote')?>
                                </small>
                            </span>
                        </td>
                        <td>
                                <span v-if="listener.location.status == 'success'">
                                    {{ listener.location.region }}, {{ listener.location.country }}
                                </span>
                            <span v-else-if="listener.location.message">
                                    {{ listener.location.message }}
                                </span>
                            <span v-else>
                                    <?=__('Unknown')?>
                                </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-body card-padding-sm text-muted">
                <?=$attribution?>
            </div>
        </div>
    </div>
</div>
