@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 technikov</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</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-bar"></i>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link bg-transparent" id="pocetKontrolPodlaDruhuDataTableTab"
                                            type="button" data-toggle="tab"
                                            data-target="#pocetKontrolPodlaDruhuDataTableTab-content"
                                            aria-controls="pocetKontrolPodlaDruhuDataTableTab-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">
                                    @includeIf('Statistiky::frontend.pages.technici.partials.echarts.pocetKontrolPodlaDruhuEChart')
                                </div>
                                <div class="tab-pane" id="pocetKontrolPodlaDruhuDataTableTab-content" role="tabpanel"
                                     aria-labelledby="pocetKontrolPodlaDruhuDataTableTab-content">
                                    @includeIf('Statistiky::frontend.pages.technici.partials.datatables.pocetKontrolPodlaDruhuDataTable')
                                </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 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="pocetKontrolPodlaHodnoteniaEChartTab" type="button" data-toggle="tab"
                                            data-target="#pocetKontrolPodlaHodnoteniaEChartTab-content"
                                            aria-controls="pocetKontrolPodlaHodnoteniaEChartTab-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="pocetKontrolPodlaHodnoteniaDataTableTab"
                                            type="button" data-toggle="tab"
                                            data-target="#pocetKontrolPodlaHodnoteniaDataTableTab-content"
                                            aria-controls="pocetKontrolPodlaHodnoteniaDataTableTab-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="pocetKontrolPodlaHodnoteniaEChartTab-content"
                                     role="tabpanel" aria-labelledby="pocetKontrolPodlaHodnoteniaEChartTab-content">
                                    @includeIf('Statistiky::frontend.pages.technici.partials.echarts.pocetKontrolPodlaHodnoteniaEChart')
                                </div>
                                <div class="tab-pane" id="pocetKontrolPodlaHodnoteniaDataTableTab-content"
                                     role="tabpanel" aria-labelledby="pocetKontrolPodlaStavuDataTableTab-content">
                                    @includeIf('Statistiky::frontend.pages.technici.partials.datatables.pocetKontrolPodlaHodnoteniaDataTable')
                                </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 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">
                                    @includeIf('Statistiky::frontend.pages.technici.partials.echarts.pocetKontrolPodlaStavuEChart')
                                </div>
                                <div class="tab-pane" id="pocetKontrolPodlaStavuDataTableTab-content" role="tabpanel"
                                     aria-labelledby="pocetKontrolPodlaStavuDataTableTab-content">
                                    @includeIf('Statistiky::frontend.pages.technici.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-bar"></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">
                                    @includeIf('Statistiky::frontend.pages.technici.partials.echarts.pocetKontrolPodlaKategorieVozidlaEChart')
                                </div>
                                <div class="tab-pane" id="pocetKontrolPodlaKategorieVozidlaDataTableTab-content"
                                     role="tabpanel"
                                     aria-labelledby="pocetKontrolPodlaKategorieVozidlaDataTableTab-content">
                                    @includeIf('Statistiky::frontend.pages.technici.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 druhu paliva 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-bar"></i>
                                    </button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link bg-transparent"
                                            id="pocetKontrolPodlaDruhuPalivaAEmisnehoSystemuVozidlaDataTableTab"
                                            type="button" data-toggle="tab"
                                            data-target="#pocetKontrolPodlaDruhuPalivaAEmisnehoSystemuVozidlaDataTableTab-content"
                                            aria-controls="pocetKontrolPodlaDruhuPalivaAEmisnehoSystemuVozidlaDataTableTab-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">
                                    @includeIf('Statistiky::frontend.pages.technici.partials.echarts.pocetKontrolPodlaEmisnehoSystemuVozidlaEChart')
                                </div>
                                <div class="tab-pane"
                                     id="pocetKontrolPodlaDruhuPalivaAEmisnehoSystemuVozidlaDataTableTab-content"
                                     role="tabpanel"
                                     aria-labelledby="pocetKontrolPodlaDruhuPalivaAEmisnehoSystemuVozidlaDataTableTab-content">
                                    @includeIf('Statistiky::frontend.pages.technici.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">Obrat vytvorený technikom</h2>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="alert alert-primary text-small" role="alert">
                        <i class="icon-info mr-2"></i>
                        <span>Do obratu vytvoreného technikom sa sumarizujú len uzavreté emisné kontroly, tzn. emisné kontroly v stave archív.</span>
                    </div>
                </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="pocetKontrolPodlaObratuEChartTab"
                                            type="button" data-toggle="tab"
                                            data-target="#pocetKontrolPodlaObratuEChartTab-content"
                                            aria-controls="pocetKontrolPodlaObratuEChartTab-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="pocetKontrolPodlaObratuDataTableTab"
                                            type="button" data-toggle="tab"
                                            data-target="#pocetKontrolPodlaObratuDataTableTab-content"
                                            aria-controls="pocetKontrolPodlaObratuDataTableTab-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="pocetKontrolPodlaObratuEChartTab-content"
                                     role="tabpanel" aria-labelledby="pocetKontrolPodlaObratuEChartTab-content">
                                    @includeIf('Statistiky::frontend.pages.technici.partials.echarts.pocetKontrolPodlaObratuEChart')
                                </div>
                                <div class="tab-pane" id="pocetKontrolPodlaObratuDataTableTab-content" role="tabpanel"
                                     aria-labelledby="pocetKontrolPodlaObratuDataTableTab-content">
                                    @includeIf('Statistiky::frontend.pages.technici.partials.datatables.pocetKontrolPodlaObratuDataTable')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

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