<table id="TekZoznamPoctuKontrolPodlaHodnoteniaDataTable" class="table table-hover" style="width:100%;margin:0!important;">
    <thead class="bg-secondary">
    <tr>
        <th class="text-left">Technik</th>
        @foreach($TekZoznamPoctuKontrolPodlaHodnoteniaDataTableComposer['stlpce'] as $stlpec)
            @if(!$loop->last)
                <th class="text-left"></th>
            @endif
        @endforeach
    </tr>
    </thead>
    <tbody></tbody>
    <tfoot>
    <tr>
        <th class="text-left">Spolu</th>
        @foreach($TekZoznamPoctuKontrolPodlaHodnoteniaDataTableComposer['stlpce'] as $stlpec)
            @if(!$loop->last)
                <th class="text-left"></th>
            @endif
        @endforeach
    </tr>
    </tfoot>
</table>

@push('scripts')
    <script type="text/javascript">
      $(document).ready(function () {
        $('#TekZoznamPoctuKontrolPodlaHodnoteniaDataTable').DataTable({
          dom: '<"wrapper"<"row"<"col"B><"col"f>><"row"<"col"<"card card-sm shadow mt-1"<"table-responsive"<t>>>>>>',
          language: {
            url: 'https://cdn.datatables.net/plug-ins/1.10.24/i18n/Slovak.json',
          },
          columns: @json(empty($TekZoznamPoctuKontrolPodlaHodnoteniaDataTableComposer['stlpce']) ? null : $TekZoznamPoctuKontrolPodlaHodnoteniaDataTableComposer['stlpce']),
          data: @json(empty($TekZoznamPoctuKontrolPodlaHodnoteniaDataTableComposer['udaje']) ? null : $TekZoznamPoctuKontrolPodlaHodnoteniaDataTableComposer['udaje']),
          info: false,
          paging: false,
          searching: true,
          buttons: [
            {
              extend: 'print',
              text: 'Tlačiť',
              title: 'Počet kontrol podľa hodnotenia za obdobie od {{ $datumOd }} do {{ $datumDo }}',
              footer: true,
            },
            {
              extend: 'pdfHtml5',
              orientation: 'landscape',
              pageSize: 'A4',
              title: 'Počet kontrol podľa hodnotenia za obdobie od {{ $datumOd }} do {{ $datumDo }}',
              footer: true,
              filename: 'pek_pocet_kontrol_podla_hodnotenia_{{ $datumOd }}_{{ $datumDo }}',
            },
            {
              extend: 'excelHtml5',
              footer: false,
              filename: 'pek_pocet_kontrol_podla_hodnotenia_{{ $datumOd }}_{{ $datumDo }}',
              sheetName: 'zoznam',
            },
          ],
          footerCallback: function (row, data, start, end, display) {
            const total = [
                @foreach($TekZoznamPoctuKontrolPodlaHodnoteniaDataTableComposer['stlpce'] as $stlpec)
                @if(!$loop->last)
              {index: {{ $loop->index + 1 }}, hodnota: getValue(this.api(), {{ $loop->index + 1 }})},
                @endif
                @endforeach
            ]

            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