<table id="PocetKontrolPodlaKategorieVozidlaDataTable" class="table table-hover" style="width:100%;margin:0!important;">
    <thead class="bg-secondary">
    <tr>
        <th class="text-left">Technik</th>
        <th class="text-center">M1</th>
        <th class="text-center">M1G</th>
        <th class="text-center">M2</th>
        <th class="text-center">M2G</th>
        <th class="text-center">M3</th>
        <th class="text-center">M3G</th>
        <th class="text-center">N1</th>
        <th class="text-center">N1G</th>
        <th class="text-center">N2</th>
        <th class="text-center">N2G</th>
        <th class="text-center">N3</th>
        <th class="text-center">N3G</th>
        <th class="text-center">T1a</th>
        <th class="text-center">T1b</th>
        <th class="text-center">T2a</th>
        <th class="text-center">T2b</th>
        <th class="text-center">T3a</th>
        <th class="text-center">T3b</th>
        <th class="text-center">T4a</th>
        <th class="text-center">T4b</th>
        <th class="text-center">T4.1a</th>
        <th class="text-center">T4.1b</th>
        <th class="text-center">T4.2a</th>
        <th class="text-center">T4.2b</th>
        <th class="text-center">T4.3a</th>
        <th class="text-center">T4.3b</th>
        <th class="text-center">Spolu</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th class="text-left">Spolu</th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
        <th class="text-center"></th>
    </tr>
    </tfoot>
</table>

@push('scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            $('#PocetKontrolPodlaKategorieVozidlaDataTable').DataTable({
                dom: '<"wrapper"<"row"<"col"B><"col"f>><"row"<"col"<"card card-sm mt-1 mb-0"<"table-responsive"<t>>>>>>',
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.24/i18n/Slovak.json',
                },
                data: @json($PocetKontrolPodlaKategorieVozidlaDataTable ?? null),
                info: false,
                paging: false,
                ordering: false,
                searching: true,
                buttons: [
                    {
                        extend: 'print',
                        text: 'Tlačiť',
                        title: 'Počet kontrol podľa kategórie vozidla za obdobie od {{ $datumOd }} do {{ $datumDo }}',
                        footer: true,
                    },
                    {
                        extend: 'pdfHtml5',
                        orientation: 'landscape',
                        pageSize: 'A4',
                        title: 'Počet kontrol podľa kategórie vozidla za obdobie od {{ $datumOd }} do {{ $datumDo }}',
                        footer: true,
                        filename: 'pek_pocet_kontrol_podla_kategorie_vozidla_{{ $datumOd }}_{{ $datumDo }}',
                    },
                    {
                        extend: 'excelHtml5',
                        footer: false,
                        filename: 'pek_pocet_kontrol_podla_kategorie_vozidla_{{ $datumOd }}_{{ $datumDo }}',
                        sheetName: 'zoznam',
                    },
                ],
                columns: [
                    {
                        title: 'Technik',
                        data: 'label',
                        class: 'text-left',
                    },
                    {
                        data: 'data.kategoria.M1',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.M1G',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.M2',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.M2G',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.M3',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.M3G',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.N1',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.N1G',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.N2',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.N2G',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.N3',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.N3G',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T1A',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T1B',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T2A',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T2B',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T3A',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T3B',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T4A',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T4B',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T4_2E_1A',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T4_2E_1B',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T4_2E_2A',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T4_2E_2B',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T4_2E_3A',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.kategoria.T4_2E_3B',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                    {
                        data: 'data.spolu',
                        defaultContent: 0,
                        class: 'text-center',
                    },
                ],
                footerCallback: function (row, data, start, end, display) {
                    if (data.length === 0) {
                        $(row).hide()
                        return
                    }

                    const total = [
                        {index: 1, hodnota: getValue(this.api(), 1)},
                        {index: 2, hodnota: getValue(this.api(), 2)},
                        {index: 3, hodnota: getValue(this.api(), 3)},
                        {index: 4, hodnota: getValue(this.api(), 4)},
                        {index: 5, hodnota: getValue(this.api(), 5)},
                        {index: 6, hodnota: getValue(this.api(), 6)},
                        {index: 7, hodnota: getValue(this.api(), 7)},
                        {index: 8, hodnota: getValue(this.api(), 8)},
                        {index: 9, hodnota: getValue(this.api(), 9)},
                        {index: 10, hodnota: getValue(this.api(), 10)},
                        {index: 11, hodnota: getValue(this.api(), 11)},
                        {index: 12, hodnota: getValue(this.api(), 12)},
                        {index: 13, hodnota: getValue(this.api(), 13)},
                        {index: 14, hodnota: getValue(this.api(), 14)},
                        {index: 15, hodnota: getValue(this.api(), 15)},
                        {index: 16, hodnota: getValue(this.api(), 16)},
                        {index: 17, hodnota: getValue(this.api(), 17)},
                        {index: 18, hodnota: getValue(this.api(), 18)},
                        {index: 19, hodnota: getValue(this.api(), 19)},
                        {index: 20, hodnota: getValue(this.api(), 20)},
                        {index: 21, hodnota: getValue(this.api(), 21)},
                        {index: 22, hodnota: getValue(this.api(), 22)},
                        {index: 23, hodnota: getValue(this.api(), 23)},
                        {index: 24, hodnota: getValue(this.api(), 24)},
                        {index: 25, hodnota: getValue(this.api(), 25)},
                        {index: 26, hodnota: getValue(this.api(), 26)},
                        {index: 27, hodnota: getValue(this.api(), 27)},
                    ]

                    setFooter(total, this.api())
                },
            })

            function getValue(api, col) {
                return api.column(col, {page: 'current'}).data().reduce(function (a, b) {
                    return Number(a) + Number(b)
                }, 0)
            }

            function setFooter(cols, api) {
                cols.forEach(function (col) {
                    $(api.column(col.index).footer()).html(col.hodnota)
                })
            }
        })
    </script>
@endpush