@section('title', __('radio.stats_tab_now'))

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteconfig.css') }}">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/radiostats.css') }}">
    <link rel="stylesheet" href="/assets/css/statistics-icon.css">
    <link rel="stylesheet" href="/assets/css/openlayers.css">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/radionow.css') }}">
@endsection

@php
    $breadcrumb = [
        ['label' => __('general.header_nav_radio')],
        ['label' => __('radio.menu_item_3')],
    ];

    $abas = [
        'history' => ['fa-chart-line', __('radio.stats_tab_history')],
        'average' => ['fa-clock', __('radio.stats_tab_average')],
        'locations' => ['fa-location-dot', __('radio.stats_tab_locations')],
        'sources' => ['fa-tower-broadcast', __('radio.stats_tab_sources')],
    ];
@endphp

@include('includes/header-novo')

<main class="app-main">

    @include('includes.breadcrumb')

    @include('includes.flash')

    <header class="page-head">
        <div>
            <h1 class="page-title">{{ __('radio.menu_item_3') }}</h1>
        </div>
    </header>

    <div class="now is-loading"
         data-url-info="{{ route('radio.statistics.r.info') }}"
         data-url-kick="{{ route('radio.statistics.r.blacklist') }}"
         data-url-ban="{{ route('radio.blacklist.c.do') }}"
         data-url-blacklist="{{ route('radio.blacklist.json') }}"
         data-url-unban="{{ route('radio.blacklist.d', ['id' => '__id__']) }}"
         data-port="{{ $siteData->stream_port }}"
         data-msg-empty="{{ __('radio.stats_now_empty') }}"
         data-msg-kick-confirm="{{ __('radio.stats_kick_confirm') }}"
         data-msg-kick="{{ __('radio.stats_kick') }}"
         data-msg-ban="{{ __('radio.stats_ban_ip') }}"
         data-msg-ban-confirm="{{ __('radio.stats_ban_confirm') }}"
         data-msg-unban-confirm="{{ __('radio.stats_unban_confirm') }}"
         data-msg-blacklist-empty="{{ __('radio.stats_blacklist_empty') }}"
         data-msg-own-session="{{ __('radio.stats_own_session') }}"
         data-msg-loc-focus="{{ __('radio.stats_loc_focus') }}"
         data-msg-pager="{{ __('general.pager_showing', ['from' => ':from', 'to' => ':to', 'total' => ':total']) }}"
         data-msg-prev="{{ __('general.pager_prev') }}"
         data-msg-next="{{ __('general.pager_next') }}"
         data-msg-auto-pause="{{ __('radio.stats_auto_pause') }}"
         data-msg-auto-resume="{{ __('radio.stats_auto_resume') }}"
         data-msg-error="{{ __('radio.stats_error') }}">

        <nav class="stnav">
            <button class="stnav__item is-on" type="button">
                <i class="fa-solid fa-users"></i> {{ __('radio.stats_tab_now') }}
                <span class="stnav__count" data-total-tab>0</span>
            </button>

            @foreach($abas as $chave => $item)
                <a class="stnav__item" href="{{ route('radio.statistics.r.type', $chave) }}">
                    <i class="fa-solid {{ $item[0] }}"></i> {{ $item[1] }}
                </a>
            @endforeach
        </nav>

        <div class="now__cards">
            <div class="now__card now__card--hero">
                <div>
                    <div class="now__card-val" data-total>0</div>
                    <div class="now__card-lbl">{{ __('radio.stats_now_title') }}</div>
                </div>
                <span class="now__card-ic"><i class="fa-solid fa-users"></i></span>
            </div>

            <div class="now__card">
                <i class="fa-solid fa-earth-americas now__card-si"></i>
                <div class="now__card-val" data-count-countries>0</div>
                <div class="now__card-lbl">{{ __('radio.stats_listeners_by_country') }}</div>
            </div>

            <div class="now__card">
                <i class="fa-solid fa-map now__card-si"></i>
                <div class="now__card-val" data-count-states>0</div>
                <div class="now__card-lbl">{{ __('radio.stats_listeners_by_state') }}</div>
            </div>

            <div class="now__card">
                <i class="fa-solid fa-location-dot now__card-si"></i>
                <div class="now__card-val" data-count-cities>0</div>
                <div class="now__card-lbl">{{ __('radio.stats_listeners_by_city') }}</div>
            </div>
        </div>

        <div class="now__cols">
            <section class="sec now__mapbox">
                <div class="sec__head now__head">
                    <h2 class="sec__title"><i class="fa-solid fa-map-location-dot"></i> {{ __('radio.stats_map_title') }}</h2>
                    <span class="now__tools">
                        <button class="now__refresh tip tip--end" type="button" data-auto aria-pressed="true" data-tip="{{ __('radio.stats_auto_pause') }}">
                            <i class="fa-solid fa-circle-pause"></i>
                        </button>

                        <button class="now__refresh tip tip--end" type="button" data-refresh data-tip="{{ __('radio.stats_refresh') }}">
                            <i class="fa-solid fa-arrows-rotate"></i>
                        </button>
                    </span>
                </div>

                <div class="now__mapwrap">
                    {{-- o mapa so responde depois do clique, para nao roubar a rolagem da pagina --}}
                    <button class="now__lock" type="button" data-map-unlock>
                        <span class="now__lockbtn">
                            <i class="fa-solid fa-hand-pointer"></i> {{ __('radio.stats_map_hint') }}
                        </span>
                    </button>

                    <div class="now__map" data-map></div>
                </div>
            </section>

            <section class="sec">
                <div class="now__loctabs">
                    <button class="now__loctab is-on" type="button" data-loc="countries">{{ __('radio.stats_tab_country') }}</button>
                    <button class="now__loctab" type="button" data-loc="states">{{ __('radio.stats_tab_state') }}</button>
                    <button class="now__loctab" type="button" data-loc="cities">{{ __('radio.stats_tab_city') }}</button>
                </div>

                <div class="sec__body now__locbody">
                    <ul class="now__badges" data-loc-list></ul>
                    <p class="now__none" data-loc-empty hidden>{{ __('radio.stats_now_empty') }}</p>
                </div>
            </section>
        </div>

        <section class="sec">
            <div class="sec__head now__head">
                <h2 class="sec__title"><i class="fa-solid fa-signal"></i> {{ __('radio.stats_active_sessions') }}</h2>
                <button class="btn btn--ghost btn--sm" type="button" data-open-blacklist>
                    <i class="fa-solid fa-users-slash"></i> {{ __('radio.stats_blacklist_link') }}
                </button>
            </div>

            <div class="sec__body">
                <div class="now__scroll">
                    <table class="now__table">
                        <thead>
                            <tr>
                                <th>IP</th>
                                <th>{{ __('radio.stats_table_city_state') }}</th>
                                <th>{{ __('radio.stats_table_os') }}</th>
                                <th>{{ __('radio.stats_table_source') }}</th>
                                <th>{{ __('radio.stats_table_time') }}</th>
                                <th><span class="sr-only">{{ __('radio.stats_table_actions') }}</span></th>
                            </tr>
                        </thead>
                        <tbody data-listeners></tbody>
                    </table>
                </div>

                <p class="now__none" data-empty hidden>{{ __('radio.stats_now_empty') }}</p>

                <nav class="pager" data-pager aria-label="{{ __('general.pager_label') }}" hidden></nav>
            </div>
        </section>

        {{-- o esqueleto repete a forma da tela, para nada pular quando o dado chega --}}
        <div class="now__skel">
            <span class="skel skel--cards"></span>
            <span class="skel skel--map"></span>
            <span class="skel skel--row"></span>
            <span class="skel skel--row"></span>
        </div>
    </div>

    <div class="modal blmodal" hidden>
        <div class="modal__card" role="dialog" aria-modal="true" aria-labelledby="blmodal-title">
            <h2 class="modal__title" id="blmodal-title">{{ __('radio.stats_blacklist_link') }}</h2>

            <div class="blmodal__body" data-blacklist>
                <p class="now__none">{{ __('radio.stats_blacklist_loading') }}</p>
            </div>

            <div class="modal__foot">
                <button class="btn btn--ghost" type="button" data-close>{{ __('general.action_close') }}</button>
            </div>
        </div>
    </div>

</main>

@section('scripts')
    <script src="/assets/js/pages/openlayers.js"></script>
    <script src="{{ assetv('/assets/js/pages/radio-now.js') }}"></script>
@endsection

@include('includes/footer-novo')