@extends('Statistiky::layouts.integrated')

@section('content')
    @parent

    <section class="bg-white space-sm pb-4">
        <div class="container">
            <div class="row justify-content-between align-items-center">
                <div class="col-auto">
                    <h1 class="h2 mb-2">Štatistiky výkonu pracoviska</h1>
                    <span>Východzie údaje pre štatistiky sa spracovávajú spätne, nereflektujú aktuálne údaje v daný moment vytvorenia výstupu</span>
                    @include('flash::message')
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="row">
                <div class="col">
                    @include('Statistiky::frontend.partials.datatable_zaznam_date_filter')
                </div>
            </div>
        </div>

        <hr>

        <div class="container">
            <div class="row my-4">
                <div class="col">
                    <div class="alert alert-primary text-small" role="alert">
                        <i class="icon-info mr-2"></i>
                        <span>Zobrazujú sa údaje za obdobie od <b>{{ $datumOd }}</b> do <b>{{ $datumDo }}</b></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="h3 mb-2">Počet kontrol podľa druhu a hodnotenia</h2>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="card shadow">
                        <div class="card-body">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active bg-transparent" id="pocetKontrolPodlaDruhuEChartTab"
                                            type="button" data-toggle="tab"
                                            data-target="#pocetKontrolPodlaDruhuEChartTab-content"
                                            aria-controls="pocetKontrolPodlaDruhuEChartTab-content" role="tab"
                                            aria-selected="true">
                                        <i class="icon-chart-pie"></i>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link bg-transparent" id="pocetKontrolPodlaHodnoteniaEChartTab"
                                            type="button" data-toggle="tab"
                                            data-target="#pocetKontrolPodlaHodnoteniaEChartTab-content"
                                            aria-controls="pocetKontrolPodlaHodnoteniaEChartTab-content" role="tab"
                                            aria-selected="false">
                                        <i class="icon-chart-bar"></i>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link bg-transparent"
                                            id="pocetKontrolPodlaDruhuAHodnoteniaDataTableTab" type="button"
                                            data-toggle="tab"
                                            data-target="#pocetKontrolPodlaDruhuAHodnoteniaDataTableTab-content"
                                            aria-controls="pocetKontrolPodlaDruhuAHodnoteniaDataTableTab-content"
                                            role="tab" aria-selected="false">
                                        <i class="icon-database"></i>
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content space-sm pb-0">
                                <div class="tab-pane fade show active" id="pocetKontrolPodlaDruhuEChartTab-content"
                                     role="tabpanel" aria-labelledby="pocetKontrolPodlaDruhuEChartTab-content">
                                    <span class="h4">Sumarizácia kontrol podľa druhu kontrol znázornená v grafe</span>
                                    @includeIf('Statistiky::frontend.pages.pracovisko.partials.echarts.pocetKontrolPodlaDruhuEChart')
                                </div>
                                <div class="tab-pane" id="pocetKontrolPodlaHodnoteniaEChartTab-content" role="tabpanel"
                                     aria-labelledby="pocetKontrolPodlaHodnoteniaEChartTab-content">
                                    <span class="h4">Sumarizácia kontrol podľa hodnotenia kontrol znázornená v grafe</span>
                                    @includeIf('Statistiky::frontend.pages.pracovisko.partials.echarts.pocetKontrolPodlaHodnoteniaEChart')
                                </div>
                                <div class="tab-pane" id="pocetKontrolPodlaDruhuAHodnoteniaDataTableTab-content"
                                     role="tabpanel"
                                     aria-labelledby="pocetKontrolPodlaDruhuAHodnoteniaDataTableTab-content">
                                    <span class="h4">Sumarizácia kontrol podľa druhu a hodnotenia kontrol znázornená v tabuľke</span>
                                    @includeIf('Statistiky::frontend.pages.pracovisko.partials.datatables.pocetKontrolPodlaDruhuAHodnoteniaDataTable')
                                </div>
                            </div>
                        </div>
                    </div>
                    @push('scripts')
                        <script type="text/javascript">
                            $(document).ready(function () {
                                const opts = {
                                    animation: {
                                        duration: function (idx) {
                                            return Math.random() * 400;
                                        },
                                        easing: 'elasticOut'
                                    }
                                };

                                $('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
                                    switch (event.target.id) {
                                        case 'pocetKontrolPodlaDruhuEChartTab':
                                            echarts.getInstanceByDom(document.getElementById('EChartPocetKontrolPodlaDruhu')).resize(opts);
                                            break;
                                        case 'pocetKontrolPodlaHodnoteniaEChartTab':
                                            echarts.getInstanceByDom(document.getElementById('EChartPocetKontrolPodlaHodnotenia')).resize(opts);
                                            break;
                                        default:
                                            return;
                                    }
                                })
                            })
                        </script>
                    @endpush
                </div>
            </div>
        </div>

        <hr>

        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="h3 mb-2">Počet kontrol podľa stavu</h2>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="card shadow">
                        <div class="card-body">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active bg-transparent" id="pocetKontrolPodlaStavuEChartTab"
                                            type="button" data-toggle="tab"
                                            data-target="#pocetKontrolPodlaStavuEChartTab-content"
                                            aria-controls="pocetKontrolPodlaStavuEChartTab-content" role="tab"
                                            aria-selected="true">
                                        <i class="icon-chart-bar"></i>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link bg-transparent" id="pocetKontrolPodlaStavuDataTableTab"
                                            type="button" data-toggle="tab"
                                            data-target="#pocetKontrolPodlaStavuDataTableTab-content"
                                            aria-controls="pocetKontrolPodlaStavuDataTableTab-content" role="tab"
                                            aria-selected="false">
                                        <i class="icon-database"></i>
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content space-sm pb-0">
                                <div class="tab-pane fade show active" id="pocetKontrolPodlaStavuEChartTab-content"
                                     role="tabpanel" aria-labelledby="pocetKontrolPodlaStavuEChartTab-content">
                                    <span class="h4">Sumarizácia kontrol podľa stavu kontrol znázornená v grafe</span>
                                    @includeIf('Statistiky::frontend.pages.pracovisko.partials.echarts.pocetKontrolPodlaStavuEChart')
                                </div>
                                <div class="tab-pane" id="pocetKontrolPodlaStavuDataTableTab-content" role="tabpanel"
                                     aria-labelledby="pocetKontrolPodlaStavuDataTableTab-content">
                                    <span class="h4">Sumarizácia kontrol podľa stavu kontrol znázornená v tabuľke</span>
                                    @includeIf('Statistiky::frontend.pages.pracovisko.partials.datatables.pocetKontrolPodlaStavuDataTable')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <hr>

        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="h3 mb-2">Počet kontrol podľa kategórie vozidla</h2>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="card shadow">
                        <div class="card-body">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active bg-transparent"
                                            id="pocetKontrolPodlaKategorieVozidlaEChartTab" type="button"
                                            data-toggle="tab"
                                            data-target="#pocetKontrolPodlaKategorieVozidlaEChartTab-content"
                                            aria-controls="pocetKontrolPodlaKategorieVozidlaEChartTab-content"
                                            role="tab" aria-selected="true">
                                        <i class="icon-chart-pie"></i>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link bg-transparent"
                                            id="pocetKontrolPodlaKategorieVozidlaDataTableTab" type="button"
                                            data-toggle="tab"
                                            data-target="#pocetKontrolPodlaKategorieVozidlaDataTableTab-content"
                                            aria-controls="pocetKontrolPodlaKategorieVozidlaDataTableTab-content"
                                            role="tab" aria-selected="false">
                                        <i class="icon-database"></i>
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content space-sm pb-0">
                                <div class="tab-pane fade show active"
                                     id="pocetKontrolPodlaKategorieVozidlaEChartTab-content" role="tabpanel"
                                     aria-labelledby="pocetKontrolPodlaKategorieVozidlaEChartTab-content">
                                    <span class="h4">Sumarizácia kontrol podľa kategórie vozidla znázornená v grafe</span>
                                    @includeIf('Statistiky::frontend.pages.pracovisko.partials.echarts.pocetKontrolPodlaKategorieVozidlaEChart')
                                </div>
                                <div class="tab-pane" id="pocetKontrolPodlaKategorieVozidlaDataTableTab-content"
                                     role="tabpanel"
                                     aria-labelledby="pocetKontrolPodlaKategorieVozidlaDataTableTab-content">
                                    <span class="h4">Sumarizácia kontrol podľa kategórie vozidla znázornená v tabuľke</span>
                                    @includeIf('Statistiky::frontend.pages.pracovisko.partials.datatables.pocetKontrolPodlaKategorieVozidlaDataTable')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <hr>

        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="h3 mb-2">Počet kontrol podľa emisného systému vozidla</h2>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="card shadow">
                        <div class="card-body">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active bg-transparent"
                                            id="pocetKontrolPodlaEmisnehoSystemuVozidlaEChartTab" type="button"
                                            data-toggle="tab"
                                            data-target="#pocetKontrolPodlaEmisnehoSystemuVozidlaEChartTab-content"
                                            aria-controls="pocetKontrolPodlaEmisnehoSystemuVozidlaEChartTab-content"
                                            role="tab" aria-selected="true">
                                        <i class="icon-chart-pie"></i>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link bg-transparent"
                                            id="pocetKontrolPodlaEmisnehoSystemuVozidlaDataTableTab" type="button"
                                            data-toggle="tab"
                                            data-target="#pocetKontrolPodlaEmisnehoSystemuVozidlaDataTableTab-content"
                                            aria-controls="pocetKontrolPodlaEmisnehoSystemuVozidlaDataTableTab-content"
                                            role="tab" aria-selected="false">
                                        <i class="icon-database"></i>
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content space-sm pb-0">
                                <div class="tab-pane fade show active"
                                     id="pocetKontrolPodlaEmisnehoSystemuVozidlaEChartTab-content" role="tabpanel"
                                     aria-labelledby="pocetKontrolPodlaEmisnehoSystemuVozidlaEChartTab-content">
                                    <span class="h4">Sumarizácia kontrol podľa emisného systému vozidla znázornená v grafe</span>
                                    @includeIf('Statistiky::frontend.pages.pracovisko.partials.echarts.pocetKontrolPodlaEmisnehoSystemuVozidlaEChart')
                                </div>
                                <div class="tab-pane" id="pocetKontrolPodlaEmisnehoSystemuVozidlaDataTableTab-content"
                                     role="tabpanel"
                                     aria-labelledby="pocetKontrolPodlaEmisnehoSystemuVozidlaDataTableTab-content">
                                    <span class="h4">Sumarizácia kontrol podľa emisného systému vozidla znázornená v tabuľke</span>
                                    @includeIf('Statistiky::frontend.pages.pracovisko.partials.datatables.pocetKontrolPodlaDruhuPalivaAEmisnehoSystemuVozidlaDataTable')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <hr>

        <div class="container">
            <div class="row">
                <div class="col">
                    <h2 class="h3 mb-2">Počet kontrol podľa subjektu fakturácie</h2>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="card shadow">
                        <div class="card-body">
                            <ul class="nav nav-tabs" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active bg-transparent"
                                            id="pocetKontrolPodlaSubjektuFakturacieEChartTab" type="button"
                                            data-toggle="tab"
                                            data-target="#pocetKontrolPodlaSubjektuFakturacieEChartTab-content"
                                            aria-controls="pocetKontrolPodlaSubjektuFakturacieEChartTab-content"
                                            role="tab" aria-selected="true">
                                        <i class="icon-chart-bar"></i>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link bg-transparent"
                                            id="vytvorenyObratPodlaSubjektuFakturacieEChartTab" type="button"
                                            data-toggle="tab"
                                            data-target="#vytvorenyObratPodlaSubjektuFakturacieEChartTab-content"
                                            aria-controls="vytvorenyObratPodlaSubjektuFakturacieEChartTab-content"
                                            role="tab" aria-selected="true">
                                        <i class="icon-chart-bar"></i>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link bg-transparent"
                                            id="pocetKontrolAObratuPodlaSubjektuFakturacieDataTableTab" type="button"
                                            data-toggle="tab"
                                            data-target="#pocetKontrolAObratuPodlaSubjektuFakturacieDataTableTab-content"
                                            aria-controls="pocetKontrolAObratuPodlaSubjektuFakturacieDataTableTab-content"
                                            role="tab" aria-selected="false">
                                        <i class="icon-database"></i>
                                    </button>
                                </li>
                            </ul>

                            <div class="tab-content space-sm pb-0">
                                <div class="tab-pane fade show active"
                                     id="pocetKontrolPodlaSubjektuFakturacieEChartTab-content" role="tabpanel"
                                     aria-labelledby="pocetKontrolPodlaSubjektuFakturacieEChartTab-content">
                                    <span class="h4">Sumarizácia počtu kontrol pre subjekt fakturácie znázornená v grafe</span>
                                    @includeIf('Statistiky::frontend.pages.pracovisko.partials.echarts.pocetKontrolPodlaSubjektuFakturacieEChart')
                                </div>
                                <div class="tab-pane" id="vytvorenyObratPodlaSubjektuFakturacieEChartTab-content"
                                     role="tabpanel"
                                     aria-labelledby="vytvorenyObratPodlaSubjektuFakturacieEChartTab-content">
                                    <span class="h4">Sumarizácia vytvoreného obratu pre subjekt fakturácie znázornená v grafe</span>
                                    @includeIf('Statistiky::frontend.pages.pracovisko.partials.echarts.vytvorenyObratPodlaSubjektuFakturacieEChart')
                                </div>
                                <div class="tab-pane"
                                     id="pocetKontrolAObratuPodlaSubjektuFakturacieDataTableTab-content" role="tabpanel"
                                     aria-labelledby="pocetKontrolAObratuPodlaSubjektuFakturacieDataTableTab-content">
                                    <span class="h4">Sumarizácia kontrol podľa subjektu fakturácie znázornená v tabuľke</span>
                                    @includeIf('Statistiky::frontend.pages.pracovisko.partials.datatables.pocetKontrolAObratuPodlaSubjektuFakturacieDataTable')
                                </div>
                            </div>
                        </div>
                    </div>
                    @push('scripts')
                        <script type="text/javascript">
                            $(document).ready(function () {
                                const opts = {
                                    animation: {
                                        duration: function (idx) {
                                            return Math.random() * 400;
                                        },
                                        easing: 'elasticOut'
                                    }
                                };

                                $('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
                                    switch (event.target.id) {
                                        case 'pocetKontrolPodlaSubjektuFakturacieEChartTab':
                                            echarts.getInstanceByDom(document.getElementById('EChartPocetKontrolPodlaSubjektuFakturacie')).resize(opts);
                                            break;
                                        case 'vytvorenyObratPodlaSubjektuFakturacieEChartTab':
                                            echarts.getInstanceByDom(document.getElementById('EChartVytvorenyObratPodlaSubjektuFakturacie')).resize(opts);
                                            break;
                                        default:
                                            return;
                                    }
                                })
                            })
                        </script>
                    @endpush
                </div>
            </div>
        </div>
    </section>

    @include('Statistiky::frontend.pages.partials._datatables')
    @include('Statistiky::frontend.pages.partials._echarts')
@endsection