@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    <div class="container-fluid py-3">
         {{-- Banner info (card) data missing yang belum dikonfirmasi + status
             pull finger pada rentang filter. TETAP tampil selama masih ada
             masalah; hilang sendiri ketika data sudah bersih. Partial sama
             dipakai report rptovr. --}}
        @include('components.alert_unconfirmed_missing')
        {{-- Filter Card --}}
        <div class="card shadow-sm mb-3">
            <div class="card-body p-3">
                <h6 class="mb-3 text-dark font-weight-bold">Pencarian</h6>
                <hr class="horizontal dark mt-0">

                <form method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                    @csrf
                    <div class="row">
                        {{-- Left Column --}}
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-control-label font-weight-bold">Dari Tanggal</label>
                                <input class="form-control" type="date" name="tanggal_mulai" value="{{ old('tanggal_mulai', $filter['tanggal_mulai'] ?? '') }}">
                                @error('tanggal_mulai')
                                    <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            @unless (($is_spv ?? false))
                                <div class="form-group mb-3">
                                    <label class="form-control-label font-weight-bold">Departemen</label>
                                    <select class="form-select" name="departemen">
                                        <option value="semua" {{ old('departemen', $filter['departemen'] ?? '') == 'semua' || old('departemen', $filter['departemen'] ?? '') == '' ? 'selected' : '' }}>Tampilkan Semua</option>
                                    @foreach ($departemen_options ?? [] as $dept)
                                        @if ($dept->nama != 'TSI')
                                            <option value="{{ $dept->nama }}" {{ old('departemen', $filter['departemen'] ?? '') == $dept->nama ? 'selected' : '' }}>{{ $dept->nama }}</option>
                                        @endif
                                    @endforeach
                                    </select>
                                </div>
                            @else
                                <div class="form-group mb-3">
                                    <label class="form-control-label font-weight-bold">Nama Karyawan</label>
                                    <input type="hidden" name="karyawan" id="nik_hidden" value="{{ old('karyawan', $filter['karyawan'] ?? '') }}">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="karyawan_pick" placeholder="Pilih karyawan" readonly value="{{ old('karyawan', $filter['karyawan'] ?? '') }}">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openKaryawanModal()">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div>
                            @endunless
                        </div>

                        {{-- Right Column --}}
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label class="form-control-label font-weight-bold">Sampai Tanggal</label>
                                <input class="form-control" type="date" name="tanggal_akhir" value="{{ old('tanggal_akhir', $filter['tanggal_akhir'] ?? '') }}">
                                @error('tanggal_akhir')
                                    <p class="text-danger text-xs pt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            @unless (($is_spv ?? false))
                                <div class="form-group mb-3">
                                    <label class="form-control-label font-weight-bold">Nama Karyawan</label>
                                    <input type="hidden" name="karyawan" id="nik_hidden" value="{{ old('karyawan', $filter['karyawan'] ?? '') }}">
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="karyawan_pick" placeholder="Pilih karyawan" readonly value="{{ old('karyawan', $filter['karyawan'] ?? '') }}">
                                        <span class="input-group-text bg-primary text-light" style="cursor:pointer" onclick="openKaryawanModal()">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                </div>
                            @endunless
                        </div>
                    </div>

                    {{-- Submit Button --}}
                    <div class="row mt-3">
                        <div class="col-md-12 text-end">
                            <button type="submit" class="btn btn-primary mb-0">
                                <i class="fas fa-search me-1"></i>
                                Cari
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

       

        {{-- Results Card --}}   
        <div class="card shadow-sm">
            <div class="card-body p-3">
                <h4 class="text-dark font-weight-bold mb-3">Diagram Report Absensi</h4>
                <hr class="horizontal dark mt-0">

                @if (($is_spv ?? false) && !empty($spv_scope['departemen']))
                    <div class="alert alert-info text-white py-2 mb-3" role="alert">
                        <i class="fas fa-info-circle me-1"></i>
                        Data ditampilkan untuk departemen <b>{{ $spv_scope['departemen'] }}</b> - bagian <b>{{ $spv_scope['bagian'] }}</b>.
                    </div>
                @endif

                @php
                    $agg = $agg ?? ['by_kategori' => [], 'by_departemen' => [], 'kehadiran' => [], 'total' => 0];
                @endphp

                {{-- Summary Cards: Total per Kategori --}}
                <div class="row mb-3">
                    @forelse ($agg['by_kategori'] as $kategori => $jumlah)
                        <div class="col-xl-2 col-md-3 col-6 mb-2">
                            <div class="card shadow-sm h-100">
                                <div class="card-body text-center p-3">
                                    <p class="text-sm mb-1 text-uppercase font-weight-bold">{{ $kategori }}</p>
                                    <h3 class="mb-0 font-weight-bold text-primary">{{ $jumlah }}</h3>
                                </div>
                            </div>
                        </div>
                    @empty
                        <div class="col-12">
                            <div class="alert alert-info text-white py-2 mb-0" role="alert">
                                <i class="fas fa-info-circle me-1"></i>
                                Tidak ada data untuk filter yang dipilih.
                            </div>
                        </div>
                    @endforelse
                </div>

                {{-- Charts: row 1 = kategori full width, row berikutnya 2 diagram per row --}}
                <div class="row">
                    <div class="col-12 mb-3">
                        <div class="card shadow-sm h-100">
                            <div class="card-header pb-0">
                                <h6 class="mb-0">Diagram Data Missing per Kategori</h6>
                                <p class="text-sm text-muted mb-0">{{ $filter['tanggal_mulai'] ?? '' }} s/d {{ $filter['tanggal_akhir'] ?? '' }}</p>
                            </div>
                            <div class="card-body d-flex align-items-center justify-content-center" style="min-height: 320px;">
                                <canvas id="chartKategori"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 mb-3">
                        <div class="card shadow-sm h-100">
                            <div class="card-header pb-0">
                                <h6 class="mb-0">Diagram Kehadiran per Departemen</h6>
                                <p class="text-sm text-muted mb-0">{{ $filter['tanggal_mulai'] ?? '' }} s/d {{ $filter['tanggal_akhir'] ?? '' }}</p>
                            </div>
                            <div class="card-body" style="min-height: 320px;">
                                <canvas id="chartDepartemen"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-3">
                        <div class="card shadow-sm h-100">
                            <div class="card-header pb-0">
                                <h6 class="mb-0">Belum Scan In &amp; Scan Out per Departemen</h6>
                                <p class="text-sm text-muted mb-0">{{ $filter['tanggal_mulai'] ?? '' }} s/d {{ $filter['tanggal_akhir'] ?? '' }}</p>
                            </div>
                            <div class="card-body" style="min-height: 320px;">
                                <canvas id="chartNoscanDept"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6 mb-3">
                        <div class="card shadow-sm h-100">
                            <div class="card-header pb-0">
                                <h6 class="mb-0">Mangkir, Pulang Cepat &amp; Terlambat per Departemen</h6>
                                <p class="text-sm text-muted mb-0">{{ $filter['tanggal_mulai'] ?? '' }} s/d {{ $filter['tanggal_akhir'] ?? '' }}</p>
                            </div>
                            <div class="card-body" style="min-height: 320px;">
                                <canvas id="chartMptDept"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 mb-3">
                        <div class="card shadow-sm h-100">
                            <div class="card-header pb-0">
                                <h6 class="mb-0">Insidental, Skorsing, Izin, Cuti &amp; Sakit per Departemen</h6>
                                <p class="text-sm text-muted mb-0">{{ $filter['tanggal_mulai'] ?? '' }} s/d {{ $filter['tanggal_akhir'] ?? '' }}</p>
                            </div>
                            <div class="card-body" style="min-height: 320px;">
                                <canvas id="chartIsisDept"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Rekap Kehadiran --}}
                <div class="mt-3">
                    <h6 class="text-dark font-weight-bold">Rekap Kehadiran</h6>
                    <div id="rekapExportButtons" class="d-flex gap-2 flex-wrap mb-2"></div>
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0" id="rekap_{{ $dmenu }}">
                            <thead class="thead-light" style="background-color: #00b7bd4f;">
                                <tr>
                                    <th>Departemen</th>
                                    <th class="text-center">Scan Normal</th>
                                    <th class="text-center">Terlambat</th>
                                    <th class="text-center">Pulang Cepat</th>
                                    <th class="text-center">Belum Finger In</th>
                                    <th class="text-center">Belum Finger Out</th>
                                    <th class="text-center">Jumlah Kehadiran</th>
                                    <th class="text-center">Jumlah Jadwal Karyawan</th>
                                    <th class="text-center">Persentase Kehadiran</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($agg['kehadiran'] as $departemen => $rekap)
                                    <tr>
                                        <td class="font-weight-bold">{{ $departemen }}</td>
                                        <td class="text-center">{{ $rekap['Scan Normal'] }}</td>
                                        <td class="text-center">{{ $rekap['Terlambat'] }}</td>
                                        <td class="text-center">{{ $rekap['Pulang Cepat'] }}</td>
                                        <td class="text-center">{{ $rekap['Belum Finger In'] }}</td>
                                        <td class="text-center">{{ $rekap['Belum Finger Out'] }}</td>
                                        <td class="text-center">{{ $rekap['total'] }}</td>
                                        <td class="text-center">{{ $rekap['jumlah_jadwal'] ?? 0 }}</td>
                                        <td class="text-center">
                                            @if (isset($rekap['persentase']))
                                                {{ number_format($rekap['persentase'], 2) }}%
                                            @else
                                                -
                                            @endif
                                        </td>
                                    </tr>
                                @empty
                                    {{-- tbody dibiarkan kosong; pesan empty via language.emptyTable
                                        agar kolom tetap 9 dan tidak memicu warning tn/18. --}}
                                @endforelse
                            </tbody>
                            @if (!empty($agg['kehadiran']))
                                <tfoot>
                                    <tr class="font-weight-bold" style="background-color: #f6f9fc;">
                                        <td>Total</td>
                                        @php
                                            $totals = ['Scan Normal' => 0, 'Terlambat' => 0, 'Pulang Cepat' => 0, 'Belum Finger In' => 0, 'Belum Finger Out' => 0, 'total' => 0];
                                            $totalJadwal = 0;
                                            $jumlahHari = \Carbon\Carbon::parse($filter['tanggal_mulai'])->diffInDays(\Carbon\Carbon::parse($filter['tanggal_akhir'])) + 1;
                                            foreach ($agg['kehadiran'] as $rekap) {
                                                foreach ($totals as $kolom => $nilai) {
                                                    $totals[$kolom] += (int) ($rekap[$kolom] ?? 0);
                                                }
                                                $totalJadwal += (int) ($rekap['jumlah_jadwal'] ?? 0);
                                            }
                                            $totalKapasitas = $totalJadwal;
                                        @endphp
                                        <td class="text-center">{{ $totals['Scan Normal'] }}</td>
                                        <td class="text-center">{{ $totals['Terlambat'] }}</td>
                                        <td class="text-center">{{ $totals['Pulang Cepat'] }}</td>
                                        <td class="text-center">{{ $totals['Belum Finger In'] }}</td>
                                        <td class="text-center">{{ $totals['Belum Finger Out'] }}</td>
                                        <td class="text-center">{{ $totals['total'] }}</td>
                                        <td class="text-center">{{ $totalKapasitas }}</td>
                                        <td class="text-center">
                                            @if ($totalKapasitas > 0)
                                                @php $persenTotal = round(min(100, ($totals['total'] / $totalKapasitas) * 100), 2); @endphp
                                                {{ number_format($persenTotal, 2) }}%
                                            @else
                                                -
                                            @endif
                                        </td>
                                    </tr>
                                </tfoot>
                            @endif
                        </table>
                    </div>
                    <div class="text-muted text-sm mt-2 mb-0" style="font-size: 0.85rem;">
                        <i class="fas fa-info-circle me-1"></i>
                        Catatan: Absensi yang Terlambat dan Pulang Cepat dengan durasi kehadiran &ge; 4 jam tetap dihitung sebagai kehadiran.
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('report.rptabs.picker')

    <script src="{{ asset('assets/js/plugins/chartjs.min.js') }}"></script>

    @push('js')
        <script>
            let karyawanPickerTable = null;
            let karyawanPickerData = [];
            let chartKategori = null;
            let chartDepartemen = null;
            let chartNoscanDept = null;
            let chartMptDept = null;
            let chartIsisDept = null;

            const chartColorPalette = [
                '#028284', '#e91e63', '#fbc658', '#f5365c', '#8965e0',
                '#2dce89', '#fb6340', '#11cdef', '#5e72e4', '#adb5bd',
                '#ffb100', '#ec4d3d', '#1e88e5', '#43a047', '#8d6e63', '#607d8b'
            ];

            function openKaryawanModal() {
                document.getElementById('karyawanPickerSearch').value = '';
                loadKaryawanPickerData();
                new bootstrap.Modal(document.getElementById('karyawanPickerModal')).show();
            }

            function loadKaryawanPickerData() {
                $.ajax({
                    url: '{{ url('/rptsp/get-karyawan') }}',
                    method: 'GET',
                    data: { query: '' },
                    success: function (response) {
                        if (response.success) {
                            renderKaryawanPickerRows(response.data || []);
                            initKaryawanPickerTable();
                        }
                    }
                });
            }

            function renderKaryawanPickerRows(data) {
                karyawanPickerData = data;
                const tbody = document.getElementById('karyawanPickerBody');
                if (!data.length) { tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted py-3">Tidak ada data</td></tr>'; return; }
                let html = '';
                data.forEach((k, idx) => {
                    const isActive = String(k.isactive ?? '1') === '1';
                    const rowStyle = isActive ? '' : 'background-color:#ffe9ed;';
                    html += `<tr style="cursor:pointer;${rowStyle}" onclick="selectKaryawanFromModal(${idx})">
                        <td><button type="button" class="btn btn-sm btn-primary" onclick="event.stopPropagation(); selectKaryawanFromModal(${idx})">Pilih</button></td>
                        <td>${escapeHtml(k.nik || '-')}</td>
                        <td>${escapeHtml(k.nama || '-')}</td>
                        <td>${escapeHtml(k.departemen || '-')}</td>
                        <td>${isActive ? 'Active' : 'Non Active'}</td>
                    </tr>`;
                });
                tbody.innerHTML = html;
            }

            function initKaryawanPickerTable() {
                if (karyawanPickerTable) { karyawanPickerTable.destroy(); karyawanPickerTable = null; }
                karyawanPickerTable = $('#karyawanPickerTable').DataTable({
                    language: { zeroRecords: 'Tekan Tombol Cari Dahulu', info: 'Showing _START_ to _END_ of _TOTAL_ entries', infoEmpty: 'Showing 0 to 0 of 0 entries', infoFiltered: '(filtered from _MAX_ total entries)', paginate: { previous: '<i class="fas fa-angle-left"></i>', next: '<i class="fas fa-angle-right"></i>' } },
                    pageLength: 10, lengthChange: false, searching: true, ordering: true, order: [[1, 'asc']], responsive: true, pagingType: 'simple_numbers', dom: 'tip'
                });
            }

            function filterKaryawanPicker() {
                const keyword = document.getElementById('karyawanPickerSearch').value.trim();
                if (karyawanPickerTable) karyawanPickerTable.search(keyword).draw();
            }

            function selectKaryawanFromModal(index) {
                const karyawan = karyawanPickerData[index];
                if (!karyawan) return;
                document.getElementById('nik_hidden').value = karyawan.nik || '';
                document.getElementById('karyawan_pick').value = `${karyawan.nik || ''} - ${karyawan.nama || ''}`;
                bootstrap.Modal.getInstance(document.getElementById('karyawanPickerModal')).hide();
            }

            function escapeHtml(value) {
                return String(value || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
            }

            function renderCharts(agg) {
                if (typeof Chart === 'undefined') return;

                // Chart 1: Doughnut per kategori
                const katLabels = Object.keys(agg.by_kategori || {});
                const katData = katLabels.map(k => agg.by_kategori[k]);
                const katColors = katLabels.map((_, i) => chartColorPalette[i % chartColorPalette.length]);
                const katCtx = document.getElementById('chartKategori');
                if (katCtx) {
                    if (chartKategori) chartKategori.destroy();
                    chartKategori = new Chart(katCtx.getContext('2d'), {
                        type: 'doughnut',
                        data: { labels: katLabels, datasets: [{ data: katData, backgroundColor: katColors, borderWidth: 1 }] },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: {
                                legend: { position: 'bottom', labels: { boxWidth: 12, padding: 10 } },
                                tooltip: { callbacks: { label: (ctx) => ` ${ctx.label}: ${ctx.parsed}` } }
                            }
                        }
                    });
                }

                // Chart 2: Bar kehadiran per departemen
                const deptLabels = Object.keys(agg.by_departemen || {});
                const deptData = deptLabels.map(d => agg.by_departemen[d]);
                const deptCtx = document.getElementById('chartDepartemen');
                if (deptCtx) {
                    if (chartDepartemen) chartDepartemen.destroy();
                    chartDepartemen = new Chart(deptCtx.getContext('2d'), {
                        type: 'bar',
                        data: { labels: deptLabels, datasets: [{ label: 'Jumlah Kehadiran', data: deptData, backgroundColor: '#2dce89', borderRadius: 6, maxBarThickness: 40 }] },
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            plugins: { legend: { display: false } },
                            scales: { y: { beginAtZero: true, ticks: { precision: 0 } }, x: { ticks: { maxRotation: 45, minRotation: 0, autoSkip: false } } }
                        }
                    });
                }

                // Chart 3-5: per departemen terkonfirmasi (pola KRL dashboard).
                const chartDept = agg.chart_dept || {};
                const deptChartLabels = chartDept.labels || [];
                const barDefaults = {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: { legend: { display: true, position: 'top', labels: { boxWidth: 12, padding: 10 } } },
                    scales: { y: { beginAtZero: true, ticks: { precision: 0 } }, x: { ticks: { maxRotation: 45, minRotation: 0, autoSkip: false } } }
                };

                const noscanCtx = document.getElementById('chartNoscanDept');
                if (noscanCtx) {
                    if (chartNoscanDept) chartNoscanDept.destroy();
                    chartNoscanDept = new Chart(noscanCtx.getContext('2d'), {
                        type: 'bar',
                        data: {
                            labels: deptChartLabels,
                            datasets: [
                                { label: 'Belum Scan In', backgroundColor: '#f5365c', data: deptChartLabels.map((_, i) => (chartDept.noscan_in || [])[i] ?? 0), maxBarThickness: 30 },
                                { label: 'Belum Scan Out', backgroundColor: '#8965e0', data: deptChartLabels.map((_, i) => (chartDept.noscan_out || [])[i] ?? 0), maxBarThickness: 30 }
                            ]
                        },
                        options: barDefaults
                    });
                }

                const mptCtx = document.getElementById('chartMptDept');
                if (mptCtx) {
                    if (chartMptDept) chartMptDept.destroy();
                    chartMptDept = new Chart(mptCtx.getContext('2d'), {
                        type: 'bar',
                        data: {
                            labels: deptChartLabels,
                            datasets: [
                                { label: 'Mangkir', backgroundColor: '#fb6340', data: deptChartLabels.map((_, i) => (chartDept.mangkir || [])[i] ?? 0), maxBarThickness: 25 },
                                { label: 'Pulang Cepat', backgroundColor: '#8965e0', data: deptChartLabels.map((_, i) => (chartDept.pulang_cepat || [])[i] ?? 0), maxBarThickness: 25 },
                                { label: 'Terlambat', backgroundColor: '#ffd600', data: deptChartLabels.map((_, i) => (chartDept.terlambat || [])[i] ?? 0), maxBarThickness: 25 }
                            ]
                        },
                        options: barDefaults
                    });
                }

                const isisCtx = document.getElementById('chartIsisDept');
                if (isisCtx) {
                    if (chartIsisDept) chartIsisDept.destroy();
                    chartIsisDept = new Chart(isisCtx.getContext('2d'), {
                        type: 'bar',
                        data: {
                            labels: deptChartLabels,
                            datasets: [
                                { label: 'Insidental', backgroundColor: '#5e72e4', data: deptChartLabels.map((_, i) => (chartDept.insidental || [])[i] ?? 0), maxBarThickness: 20 },
                                { label: 'Skorsing', backgroundColor: '#f5365c', data: deptChartLabels.map((_, i) => (chartDept.skorsing || [])[i] ?? 0), maxBarThickness: 20 },
                                { label: 'Izin', backgroundColor: '#11cdef', data: deptChartLabels.map((_, i) => (chartDept.izin || [])[i] ?? 0), maxBarThickness: 20 },
                                { label: 'Cuti', backgroundColor: '#2dce89', data: deptChartLabels.map((_, i) => (chartDept.cuti || [])[i] ?? 0), maxBarThickness: 20 },
                                { label: 'Sakit', backgroundColor: '#fb8c00', data: deptChartLabels.map((_, i) => (chartDept.sakit || [])[i] ?? 0), maxBarThickness: 20 }
                            ]
                        },
                        options: barDefaults
                    });
                }
            }



            $(document).ready(function () {
                // Rekap table dengan export buttons
                if ($.fn.DataTable.isDataTable('#rekap_{{ $dmenu }}')) {
                    $('#rekap_{{ $dmenu }}').DataTable().destroy();
                }

                let table = $('#rekap_{{ $dmenu }}').DataTable({
                    lengthChange: false,
                    language: {
                        lengthMenu: 'Tampilkan _MENU_ baris',
                        zeroRecords: 'Tidak ada data kehadiran untuk filter yang dipilih',
                        emptyTable: 'Tidak ada data kehadiran untuk filter yang dipilih',
                        info: 'Data _START_ - _END_ dari _TOTAL_',
                        infoEmpty: 'Tidak ada data',
                        infoFiltered: '(pencarian dari _MAX_ data)',
                        paginate: { previous: '<i class="fas fa-angle-left"></i>', next: '<i class="fas fa-angle-right"></i>' }
                    },
                    searching: false,
                    paging: true,
                    pageLength: 10,
                    dom: 'Brtip',
                    buttons: [
                        { extend: 'excelHtml5', text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i><span class="font-weight-bold"> Excel', title: 'Rekap Absensi', exportOptions: { columns: ':visible' } },
                        { extend: 'pdfHtml5', text: '<i class="fas fa-file-pdf me-1 text-lg text-danger"></i><span class="font-weight-bold"> PDF', title: 'Rekap Absensi', orientation: 'landscape', pageSize: 'A4', exportOptions: { columns: ':visible' } },
                        { extend: 'print', text: '<i class="fas fa-print me-1 text-lg text-info"></i><span class="font-weight-bold"> Print', title: 'Rekap Absensi', exportOptions: { columns: ':visible' } }
                    ]
                });

                table.buttons().container().appendTo('#rekapExportButtons');
                $('#rekapExportButtons .dt-button').addClass('btn btn-secondary mb-0 me-1');
                $('#rekapExportButtons .dt-button').removeClass('dt-button');

                renderCharts(@json($agg ?? []));
            });
        </script>
    @endpush
@endsection