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

@section('head')
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/siteconfig.css') }}">
    <link rel="stylesheet" href="/assets/css/lib/apexmaps.css">
    <link rel="stylesheet" href="{{ assetv('/assets/css/pages/radiostats.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')],
    ];

    $periodos = [
        'today' => __('radio.stats_period_today'),
        'yesterday' => __('radio.stats_period_yesterday'),
        'week' => __('radio.stats_period_week'),
        'month' => __('radio.stats_period_month'),
        'year' => __('radio.stats_period_year'),
    ];
@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="rstat is-loading"
         data-url-data="{{ route('radio.statistics.data') }}"
         data-url-export="{{ route('radio.statistics.export') }}"
         data-type="{{ $type ?? 'history' }}"
         data-period="{{ $period ?? 'yesterday' }}"
         data-range="{{ $range ?? '' }}"
         data-logo="{{ asset('/assets/img/logo-color.svg') }}"
         data-msg-sessions="{{ __('radio.stats_sessions') }}"
         data-msg-minutes="{{ __('radio.stats_minutes') }}"
         data-msg-country="{{ __('radio.stats_listeners_by_country') }}"
         data-msg-state="{{ __('radio.stats_listeners_by_state') }}"
         data-msg-city="{{ __('radio.stats_listeners_by_city') }}"
         data-msg-sources="{{ __('radio.stats_tab_sources') }}"
         data-msg-no-audience="{{ __('radio.stats_no_audience') }}"
         data-msg-missing-one="{{ __('radio.stats_city_missing_one') }}"
         data-msg-missing-many="{{ __('radio.stats_city_missing_many') }}"
         data-msg-average="{{ __('radio.stats_average_label') }}"
         data-msg-pick-range="{{ __('radio.stats_pick_range') }}"
         data-msg-over-time="{{ __('radio.stats_audience_over_time') }}"
         data-msg-period="{{ __('radio.stats_period') }}"
         data-msg-listeners="{{ __('radio.stats_listeners') }}"
         data-msg-avg-min="{{ __('radio.stats_avg_minutes') }}"
         data-msg-total-hours="{{ __('radio.stats_total_hours') }}"
         data-msg-total="{{ __('radio.stats_total') }}"
         data-msg-error="{{ __('radio.stats_error') }}">

        <nav class="stnav">
            <a class="stnav__item" href="{{ route('radio.statistics.r') }}">
                <i class="fa-solid fa-users"></i> {{ __('radio.stats_tab_now') }}
            </a>

            @foreach($abas as $chave => $item)
                <button class="stnav__item {{ ($type ?? 'history') === $chave ? 'is-on' : '' }}" type="button" data-tab="{{ $chave }}">
                    <i class="fa-solid {{ $item[0] }}"></i> {{ $item[1] }}
                </button>
            @endforeach
        </nav>

        <div class="rstat__tools">
            <div class="rstat__periods">
                @foreach($periodos as $chave => $rotulo)
                    <button class="rstat__period {{ ($period ?? 'yesterday') === $chave ? 'is-on' : '' }}" type="button" data-period="{{ $chave }}">
                        {{ $rotulo }}
                    </button>
                @endforeach

                <div class="rstat__custom">
                    <button class="rstat__period {{ in_array(($period ?? ''), ['date', 'custom'], true) ? 'is-on' : '' }}" type="button" data-open-range>
                        <i class="fa-solid fa-calendar-days"></i> {{ __('radio.stats_period_custom') }}
                        <i class="fa-solid fa-chevron-down rstat__caret"></i>
                    </button>

                    <div class="rstat__pop" data-range-box hidden>
                        <span class="rstat__poptitle">{{ __('radio.stats_single_day') }}</span>

                        <div class="rstat__popday">
                            <input class="input" type="date" data-range-day>
                            <button class="btn btn--primary" type="button" data-range-see>{{ __('radio.stats_see') }}</button>
                        </div>

                        <span class="rstat__poptitle">{{ __('radio.stats_date_range') }}</span>

                        <button class="rstat__popfield" type="button" data-cal-open>
                            <span data-range-text>{{ __('radio.stats_pick_range') }}</span>
                            <i class="fa-regular fa-calendar"></i>
                        </button>

                        <div class="rstat__cal" data-calendar hidden>
                            <div class="rstat__calhead">
                                <button class="rstat__calnav" type="button" data-cal-prev aria-label="{{ __('general.pager_prev') }}">
                                    <i class="fa-solid fa-chevron-left"></i>
                                </button>

                                <div class="rstat__calmonths" data-cal-months></div>

                                <button class="rstat__calnav" type="button" data-cal-next aria-label="{{ __('general.pager_next') }}">
                                    <i class="fa-solid fa-chevron-right"></i>
                                </button>
                            </div>

                            <div class="rstat__calgrid" data-cal-grid></div>

                            <div class="rstat__calfoot">
                                <button class="btn btn--ghost btn--sm" type="button" data-cal-cancel>{{ __('radio.stats_cancel') }}</button>
                                <button class="btn btn--primary btn--sm" type="button" data-cal-apply>{{ __('radio.stats_apply') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="rstat__exports">
                <button class="btn btn--ghost btn--sm" type="button" data-export="png">
                    <i class="fa-solid fa-image"></i> {{ __('radio.stats_export_png') }}
                </button>
                <button class="btn btn--ghost btn--sm" type="button" data-export="pdf">
                    <i class="fa-solid fa-file-pdf"></i> {{ __('radio.stats_export_pdf') }}
                </button>
                <button class="btn btn--primary btn--sm" type="button" data-export="csv">
                    <i class="fa-solid fa-file-csv"></i> {{ __('radio.stats_export_csv') }}
                </button>
            </div>
        </div>

        {{-- o esqueleto tem a altura final do grafico, entao nada pula quando o dado chega --}}
        <div class="rstat__skel">
            <div class="rstat__cards">
                @for($i = 0; $i < 4; $i++)
                    <div class="rstat__card"><span class="skel skel--key"></span><span class="skel skel--num"></span></div>
                @endfor
            </div>

            <section class="sec">
                <div class="sec__body">
                    <div class="skel__chart">
                        @foreach([38, 62, 45, 80, 55, 70, 42, 90, 60, 35, 75, 50] as $altura)
                            <span class="skel" style="height: {{ $altura }}%"></span>
                        @endforeach
                    </div>
                </div>
            </section>
        </div>

        <div class="rstat__real">
            <div class="rstat__cards" data-cards>
                <div class="rstat__card">
                    <i class="fa-solid fa-signal rstat__card-ic"></i>
                    <span class="rstat__card-val" data-card-sessions>0</span>
                    <span class="rstat__card-key">{{ __('radio.stats_total_sessions') }}</span>
                </div>

                <div class="rstat__card">
                    <i class="fa-solid fa-user-check rstat__card-ic"></i>
                    <span class="rstat__card-val" data-card-listeners>0</span>
                    <span class="rstat__card-key">{{ __('radio.stats_unique_listeners') }}</span>
                </div>

                <div class="rstat__card">
                    <i class="fa-solid fa-stopwatch rstat__card-ic"></i>
                    <span class="rstat__card-val" data-card-avg>00:00:00</span>
                    <span class="rstat__card-key">{{ __('radio.stats_avg_time') }}</span>
                </div>

                <div class="rstat__card">
                    <i class="fa-solid fa-hourglass-half rstat__card-ic"></i>
                    <span class="rstat__card-val" data-card-total>00:00:00</span>
                    <span class="rstat__card-key">{{ __('radio.stats_total_time') }}</span>
                </div>
            </div>

            <div class="rstat__cards" data-peaks hidden>
                <div class="rstat__card rstat__card--peak" data-peak-day-card>
                    <i class="fa-solid fa-calendar-day rstat__card-ic"></i>
                    <span class="rstat__card-val rstat__card-val--text" data-peak-day>--</span>
                    <span class="rstat__card-key">{{ __('radio.stats_peak_day') }}</span>
                </div>

                <div class="rstat__card rstat__card--peak" data-peak-weekday-card hidden>
                    <i class="fa-solid fa-calendar-week rstat__card-ic"></i>
                    <span class="rstat__card-val rstat__card-val--text" data-peak-weekday>--</span>
                    <span class="rstat__card-key">{{ __('radio.stats_peak_weekday') }}</span>
                </div>

                <div class="rstat__card rstat__card--peak" data-peak-hour-card>
                    <i class="fa-solid fa-clock rstat__card-ic"></i>
                    <span class="rstat__card-val rstat__card-val--text" data-peak-hour>--</span>
                    <span class="rstat__card-key">{{ __('radio.stats_peak_hour') }}</span>
                </div>
            </div>

            <section class="sec" data-chart-box>
                <div class="sec__head rstat__head">
                    <h2 class="sec__title"><i class="fa-solid fa-chart-area"></i> <span data-chart-title></span></h2>

                    <div class="rstat__headright">
                        <label class="rstat__toggle">
                            <input type="checkbox" data-avg checked> {{ __('radio.stats_show_average') }}
                        </label>

                        <span class="rstat__when" data-range-label></span>
                    </div>
                </div>

                <div class="sec__body">
                    <div class="rstat__chart">
                        <span class="rstat__mark"><img src="{{ asset('/assets/img/logo-color.svg') }}" alt=""></span>
                        <div data-chart></div>
                    </div>
                </div>
            </section>

            <div class="rstat__switches" data-switches hidden>
                <div class="rstat__viewsw" data-view-switch>
                    <button class="rstat__view is-on" type="button" data-view="chart">
                        <i class="fa-solid fa-chart-pie"></i> {{ __('radio.stats_view_chart') }}
                    </button>

                    <button class="rstat__view" type="button" data-view="map">
                        <i class="fa-solid fa-map-location-dot"></i> {{ __('radio.stats_view_map') }}
                    </button>
                </div>

                <div class="rstat__viewsw" data-level-switch hidden>
                    <button class="rstat__view" type="button" data-level="country">{{ __('radio.stats_tab_country') }}</button>
                    <button class="rstat__view is-on" type="button" data-level="state">{{ __('radio.stats_tab_state') }}</button>
                    <button class="rstat__view" type="button" data-level="city">{{ __('radio.stats_tab_city') }}</button>
                </div>
            </div>

            <div class="rstat__pies" data-pies hidden></div>

            <section class="sec" data-map-box hidden>
                <div class="rstat__mapgrid">
                    <div class="rstat__map" data-map></div>

                    <div class="rstat__rank">
                        <span class="rstat__ranknote" data-rank-note hidden></span>
                        <span class="rstat__ranktitle">{{ __('radio.stats_rank_hint') }}</span>
                        <ol class="rstat__ranklist" data-rank></ol>
                    </div>
                </div>
            </section>

            <section class="sec" data-table-box>
                <div class="sec__head">
                    <h2 class="sec__title"><i class="fa-solid fa-table-list"></i> {{ __('radio.stats_table_title') }}</h2>
                </div>
                <div class="sec__body">
                    <div class="rstat__scroll">
                        <table class="rstat__table">
                            <thead data-thead></thead>
                            <tbody data-table></tbody>
                        </table>
                    </div>
                </div>
            </section>

            <div class="rstat__empty" data-empty hidden>
                <i class="fa-solid fa-chart-simple"></i>
                <p>{{ __('radio.stats_no_data') }}</p>
            </div>
        </div>
    </div>

</main>

@section('scripts')
    <script src="/assets/js/lib/apexmaps.min.js"></script>
    <script src="/assets/js/lib/apexcharts.min.js"></script>
    <script src="/assets/js/lib/jspdf.umd.min.js"></script>
    <script src="/assets/js/lib/jspdf.plugin.autotable.min.js"></script>
    <script src="{{ assetv('/assets/js/pages/radio-statistics.js') }}"></script>
@endsection

@include('includes/footer-novo')