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

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

    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4 align-items-center">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <a href="{{ URL::to('uplall') }}" class="btn btn-success mb-0 ms-2">
                            <i class="fas fa-upload me-1"></i> Upload All Properties
                        </a>
                    </div>
                </div>
                <div class="col-lg-auto text-end">
                    @if(($is_admin ?? false) && isset($gedungList))
                        <button class="btn btn-sm btn-outline-primary me-2" type="button" data-bs-toggle="modal"
                            data-bs-target="#modalGedung">
                            <i class="fas fa-building me-1"></i> Pilih Gedung
                        </button>

                        <div class="modal fade" id="modalGedung" tabindex="-1" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h6 class="modal-title">Pilih Gedung</h6>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
                                    </div>

                                    <div class="modal-body">
                                        <form method="GET" action="">
                                            {{-- Simpan parameter GET lain agar tidak hilang --}}
                                            @foreach(request()->except('id_gedung') as $k => $v)
                                                @if(is_array($v))
                                                    @foreach($v as $vv)
                                                        <input type="hidden" name="{{ $k }}[]" value="{{ $vv }}">
                                                    @endforeach
                                                @else
                                                    <input type="hidden" name="{{ $k }}" value="{{ $v }}">
                                                @endif
                                            @endforeach

                                            <div class="mb-3">
                                                <select name="id_gedung" id="id_gedung" class="form-select">
                                                    <option value="">Semua Gedung</option>
                                                    @foreach($gedungList as $g)
                                                        <option value="{{ $g->id }}" {{ (int)($selectedGedungId ?? 0) === (int)$g->id ? 'selected' : '' }}>
                                                            {{ $g->nama }} ({{ $g->kode }})
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="text-end">
                                                <button type="submit" class="btn btn-primary btn-sm">
                                                    <i class="fas fa-check me-1"></i> Terapkan
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="modal"
                        data-bs-target="#modalFilter">
                        <i class="fas fa-filter me-1"></i> Filter
                    </button>
                    <button class="btn btn-sm btn-outline-primary" type="button" id="btnBulkDelete" disabled>
                        <i class="fas fa-trash me-1"></i> Hapus Semua
                    </button>
                    <button class="btn btn-sm btn-outline-success" type="button" id="btnExportExcel">
                        <i class="fas fa-file-excel me-1"></i> Export Excel
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        @if (!empty($error))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="fas fa-exclamation-triangle me-2"></i> {{ $error }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="row">
            <div class="col-md-12">
                <div class="card">

                    <div class="card-header pb-0">
                        <h6 class="mb-0">All Properties - Uploaded Batches</h6>
                    </div>

                    <div class="card-body px-2 pt-0 pb-2">
                        @if (($hasData ?? false))
                            <table class="table display nowrap w-100 slim-table" id="dt_all">
                                <thead>
                                    {{-- ================= BARIS 1 : GROUP HEADER ================= --}}
                                    <tr>
                                        <th rowspan="2">
                                            <input type="checkbox" id="selectAllAll" class="form-check-input">
                                        </th>

                                        {{-- DATA BATCH --}}
                                        <th rowspan="2">Shift Date</th>
                                        <th rowspan="2">Shift</th>
                                        <th rowspan="2">Batch</th>
                                        <th rowspan="2">Team Group</th>
                                        <th rowspan="2">Customer</th>
                                        <th rowspan="2">Customer Name</th>
                                        <th rowspan="2">Material</th>
                                        <th rowspan="2">Mesin</th>
                                        <th rowspan="2">Delivery</th>
                                        <th rowspan="2">Width</th>
                                        <th rowspan="2">Length</th>
                                        <th rowspan="2">Unit of Dimension</th>
                                        <th rowspan="2">Weight</th>
                                        <th rowspan="2">Base Unit of Measure</th>
                                        <th rowspan="2">Tested By</th>
                                        <th rowspan="2">Checked By</th>
                                        <th rowspan="2">Supervisor By</th>
                                        <th rowspan="2">Tested At</th>
                                        <th rowspan="2">Checked At</th>
                                        <th rowspan="2">Supervisor At</th>

                                        {{-- GROUP HEADER --}}
                                        @if(!empty($propCols))
                                            <th colspan="{{ count($propCols) }}" class="th-group-properties">
                                                Properties
                                            </th>
                                        @endif

                                        @if(!empty($paramCols))
                                            <th colspan="{{ count($paramCols) }}" class="th-group-params">
                                                Parameter Mesin
                                            </th>
                                        @endif

                                    </tr>

                                    {{-- ================= BARIS 2 : DETAIL HEADER ================= --}}
                                    <tr>
                                                                                {{-- PROPERTIES --}}
                                        @foreach ($propCols ?? [] as $label => $key)
                                            <th class="th-properties">{{ $label }}</th>
                                        @endforeach

                                        {{-- PARAMETER MESIN --}}
                                        @foreach ($paramCols ?? [] as $label => $pair)
                                            <th class="th-params">{{ $label }}</th>
                                        @endforeach

                                    </tr>
                                </thead>


                            <tbody></tbody>
                            </table>
                        @else
                            <div class="text-center py-4">
                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                <h6 class="text-muted">Belum ada batch hasil upload</h6>
                                <a href="{{ URL::to('uplall') }}" class="btn btn-primary btn-sm mt-2">
                                    <i class="fas fa-upload me-1"></i> Upload All Properties
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal filter --}}
    @includeIf('listxx.lstals.partials.modal-filter2')

    {{-- Modal confirmation delete --}}
    <div class="modal fade" id="modalDeleteConfirm" tabindex="-1" aria-labelledby="modalDeleteConfirmLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalDeleteConfirmLabel">Konfirmasi Hapus Data</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Apakah Anda yakin ingin menghapus <span id="selectedCount">0</span> batch data yang dipilih?</p>
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>PERINGATAN:</strong> Tindakan ini akan menghapus data secara permanen dari database termasuk:
                        <ul class="mb-0 mt-2">
                            <li>Data batch utama</li>
                            <li>Data properties terkait</li>
                            <li>Data parameter mesin terkait</li>
                        </ul>
                        <strong>Tindakan ini tidak dapat dibatalkan!</strong>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">
                        <i class="fas fa-trash me-1"></i> Ya, Hapus Data
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.dataTables.min.css">
@endpush

@push('js')
    <script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>

    <style>
        table.slim-table {
            table-layout: auto !important;
            white-space: nowrap;
        }

        table.slim-table thead th {
            background-color: #00b7bd4f !important;
            color: #2b2b2b !important;
            font-weight: 600 !important;
        }

        div.dtfc-left-top-block,
        div.dtfc-left-body-block,
        div.dtfc-left-bottom-block,
        table.dataTable.display thead th.dtfc-fixed-left,
        table.dataTable.display tbody td.dtfc-fixed-left {
            background: #fff !important;
        }

        .dtfc-fixed-left {
            box-shadow: 2px 0 0 rgba(0, 0, 0, .06);
            z-index: 3;
        }

        /* HANYA sembunyikan kolom 2–4 versi asli kalau FixedColumns sudah siap (fc-ready) */
        #dt_batch_wrapper.fc-ready .dataTables_scrollHead th:nth-child(n+2):nth-child(-n+4),
        #dt_batch_wrapper.fc-ready .dataTables_scrollBody td:nth-child(n+2):nth-child(-n+4),
        #dt_props_wrapper.fc-ready .dataTables_scrollHead th:nth-child(n+2):nth-child(-n+4),
        #dt_props_wrapper.fc-ready .dataTables_scrollBody td:nth-child(n+2):nth-child(-n+4),
        #dt_params_wrapper.fc-ready .dataTables_scrollHead th:nth-child(n+2):nth-child(-n+4),
        #dt_params_wrapper.fc-ready .dataTables_scrollBody td:nth-child(n+2):nth-child(-n+4) {
            visibility: hidden !important;
        }

        #dt_batch_wrapper .DTFC_LeftWrapper th,
        #dt_batch_wrapper .DTFC_LeftWrapper td,
        #dt_props_wrapper .DTFC_LeftWrapper th,
        #dt_props_wrapper .DTFC_LeftWrapper td,
        #dt_params_wrapper .DTFC_LeftWrapper th,
        #dt_params_wrapper .DTFC_LeftWrapper td {
            visibility: visible !important;
            white-space: nowrap;
        }

        #dt_batch_wrapper .DTFC_LeftWrapper th,
        #dt_props_wrapper .DTFC_LeftWrapper th,
        #dt_params_wrapper .DTFC_LeftWrapper th {
            min-width: 120px;
        }

        /* Checkbox styling */
        .form-check-input,
        #selectAll,
        .standard-checkbox {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            width: 20px;
            height: 20px;
            border: 2px solid #000;
            border-radius: 4px;
            background-color: #fff;
            cursor: pointer;
            position: relative;
            display: inline-block;
            vertical-align: middle;
        }

        .form-check-input:checked::after,
        #selectAll:checked::after,
        .standard-checkbox:checked::after {
            content: "";
            position: absolute;
            left: 5px;
            top: 1px;
            width: 6px;
            height: 12px;
            border: solid #000;
            border-width: 0 3px 3px 0;
            transform: rotate(45deg);
        }

        .form-check-input:checked,
        #selectAll:checked,
        .standard-checkbox:checked {
            background-color: #fff !important;
            background-image: none !important;
            border-color: #000 !important;
        }

        table .form-check-input:checked,
        .dataTables_wrapper .form-check-input:checked {
            background-color: #fff !important;
            background-image: none !important;
        }

        .form-check-input:focus {
            outline: none;
            box-shadow: none;
        }

        #btnBulkDelete:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        /* Loading AJAX DataTables: ubah warna bulat-bulat saja (tanpa background box) */
        .dataTables_wrapper .dataTables_processing {
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
        }

        .dataTables_wrapper .dataTables_processing>div>div {
            background: #0f8b66 !important;
        }

        .dataTables_wrapper .dataTables_filter {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-bottom: 14px;
        }

        .dataTables_wrapper .dataTables_filter label {
            display: inline-flex !important;
            align-items: center;
            gap: 10px;
            margin-bottom: 0;
            white-space: nowrap;
            color: #1f3f6f;
            font-weight: 700;
            font-size: 16px;
            line-height: 1;
        }

        .dataTables_wrapper .dataTables_filter label input {
            margin-left: 0 !important;
            width: 190px;
            height: 34px;
            padding: 4px 8px;
            border: 1px solid #b9c2cc;
            border-radius: 4px;
        }

        .dataTables_wrapper .dataTables_filter label input[type="search"]::-webkit-search-cancel-button {
            -webkit-appearance: none;
            width: 14px;
            height: 14px;
            cursor: pointer;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline x1='4' y1='4' x2='12' y2='12' stroke='%23dc3545' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='12' y1='4' x2='4' y2='12' stroke='%23dc3545' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;
            background-size: 14px 14px;
        }

        /* Unified pagination control */
        .dataTables_wrapper .dataTables_info {
            color: #60748a !important;
            font-weight: 500;
        }

        .dataTables_wrapper .dataTables_paginate {
            margin-top: 10px;
        }

        .dataTables_wrapper .dataTables_paginate .pagination {
            gap: 6px;
            align-items: center;
        }

        .dataTables_wrapper .dataTables_paginate .page-item .page-link {
            min-width: 34px;
            height: 34px;
            padding: 0 10px;
            border-radius: 999px !important;
            border: 1px solid #d6e1ea;
            background: #ffffff;
            color: #5f7288;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            font-size: 13px;
            font-weight: 500;
            box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
            transition: all 0.15s ease;
        }

        .dataTables_wrapper .dataTables_paginate li.paginate_button {
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            padding: 0 !important;
        }

        .dataTables_wrapper .dataTables_paginate a.paginate_button,
        .dataTables_wrapper .dataTables_paginate .paginate_button a {
            min-width: 34px;
            height: 34px;
            padding: 0 10px !important;
            border-radius: 999px !important;
            border: 1px solid #d6e1ea !important;
            background: #ffffff !important;
            color: #5f7288 !important;
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            line-height: 1;
            font-size: 13px;
            font-weight: 500;
            box-shadow: 0 1px 1px rgba(15, 23, 42, 0.03);
            transition: all 0.15s ease;
        }

        .dataTables_wrapper .dataTables_paginate .page-item .page-link:hover {
            border-color: #0f8b66 !important;
            color: #0f8b66 !important;
            background: #eef8f4 !important;
        }

        .dataTables_wrapper .dataTables_paginate a.paginate_button:hover,
        .dataTables_wrapper .dataTables_paginate .paginate_button:hover a {
            border-color: #0f8b66 !important;
            color: #0f8b66 !important;
            background: #eef8f4 !important;
        }

        .dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
            border-color: #0f8b66 !important;
            background: #0f8b66 !important;
            color: #ffffff !important;
            box-shadow: 0 4px 10px rgba(15, 139, 102, 0.24) !important;
        }

        .dataTables_wrapper .dataTables_paginate a.paginate_button.current,
        .dataTables_wrapper .dataTables_paginate .paginate_button.current a {
            border-color: #0f8b66 !important;
            background: #0f8b66 !important;
            color: #ffffff !important;
            box-shadow: 0 4px 10px rgba(15, 139, 102, 0.24) !important;
        }

        .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
            color: #a0afbf !important;
            background: #f8fbfd !important;
            border-color: #e5edf3 !important;
            box-shadow: none !important;
        }

        .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled a {
            color: #a0afbf !important;
            background: #f8fbfd !important;
            border-color: #e5edf3 !important;
            box-shadow: none !important;
        }
        /* Jarak antara tabel + scrollbar + pagination */
        .dataTables_scroll {
            margin-bottom: 12px;
        }

        .laravel-pagination {
            padding-top: 8px;
        }

        /* Biar pagination tidak mepet bawah card */
        .laravel-pagination .pagination {
            margin-bottom: 0;
        }
        table.slim-table thead th {
            text-align: center;
            vertical-align: middle;
            white-space: nowrap;
        }
        /* ================= GROUP HEADER ================= */
        .th-group-properties {
            background-color: #d1f3ff !important; /* biru muda */
            color: #0b4f6c !important;
            font-weight: 700;
            border-bottom: 2px solid #0bbcd6;
        }

        .th-group-params {
            background-color: #e7ffe7 !important; /* hijau muda */
            color: #1b5e20 !important;
            font-weight: 700;
            border-bottom: 2px solid #4caf50;
        }

        /* ================= DETAIL HEADER ================= */
        .th-properties {
            background-color: #eaf9ff !important;
            color: #0b4f6c !important;
        }

        .th-params {
            background-color: #f0fff0 !important;
            color: #1b5e20 !important;
        }

        /* Rapi */
        table.slim-table thead th {
            text-align: center;
            vertical-align: middle;
            white-space: nowrap;
        }

        /* ================= FORCE HEADER COLOR (DATATABLES + FIXEDCOLUMNS) ================= */

        /* ===== PROPERTIES ===== */
        table.slim-table thead th.th-group-properties,
        table.slim-table thead th.th-properties,
        .dataTables_scrollHead thead th.th-group-properties,
        .dataTables_scrollHead thead th.th-properties,
        .DTFC_LeftWrapper thead th.th-group-properties,
        .DTFC_LeftWrapper thead th.th-properties {
            background-color: #cfefff !important;
            color: #0b4f6c !important;
            font-weight: 700 !important;
        }

        /* ===== PARAMETER MESIN ===== */
        table.slim-table thead th.th-group-params,
        table.slim-table thead th.th-params,
        .dataTables_scrollHead thead th.th-group-params,
        .dataTables_scrollHead thead th.th-params,
        .DTFC_LeftWrapper thead th.th-group-params,
        .DTFC_LeftWrapper thead th.th-params {
            background-color: #dcf7dc !important;
            color: #1b5e20 !important;
            font-weight: 700 !important;
        }

        /* ===== GARIS PEMISAH BIAR JELAS ===== */
        .th-group-properties,
        .th-properties {
            border-right: 3px solid #0bbcd6 !important;
        }

        .th-group-params,
        .th-params {
            border-right: 3px solid #4caf50 !important;
        }

        .search-hit {
            background: #bff4d6;
            color: #0f5b3b;
            font-weight: 700;
            border-radius: 3px;
            padding: 0 2px;
        }

        

    </style>
<script>
$(document).ready(function () {
    const PROP_COLS = @json($propCols ?? []);
    const PARAM_COLS = @json($paramCols ?? []);
    const PROP_NAMES = @json(array_keys($propCols ?? []));
    const PARAM_NAMES = @json(array_keys($paramCols ?? []));

    function escapeRegex(text) {
        // Amankan keyword agar karakter khusus regex tidak dianggap pola.
        return String(text).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    function buildHighlightRegexes(keyword) {
        const term = String(keyword || '').trim();
        if (!term) return [];

        const pattern = escapeRegex(term);
        return [{
            testRegex: new RegExp(pattern, 'i'),
            replaceRegex: new RegExp(`(${pattern})`, 'gi')
        }];
    }

    function highlightTableMatches($table, keyword) {
        // Gunakan keyword global search DataTables.
        const regexList = buildHighlightRegexes(keyword);
        const $wrapper = $table.closest('.dataTables_wrapper');
        const $targetCells = ($wrapper.length ? $wrapper : $table).find('tbody td');

        $targetCells.each(function() {
            const $td = $(this);
            // Jangan sentuh kolom interaktif (checkbox/button/link/select).
            if ($td.find('input, button, a, select').length) return;

            // Simpan teks asli agar bisa dikembalikan saat keyword kosong/berubah.
            const rawText = $td.attr('data-raw-text') ?? $td.text();
            if ($td.attr('data-raw-text') === undefined) {
                $td.attr('data-raw-text', rawText);
            }

            if (!regexList.length) {
                $td.text(rawText);
                return;
            }

            let matched = false;
            for (const item of regexList) {
                if (!item.testRegex.test(rawText)) continue;
                $td.html(rawText.replace(item.replaceRegex, '<span class="search-hit">$1</span>'));
                matched = true;
                break;
            }

            if (!matched) {
                $td.text(rawText);
            }
        });
    }

    function getAjaxUrl() {
        const url = new URL(window.location.href);
        url.pathname = url.pathname.replace(/\/$/, '') + '/ajax';
        return url.toString();
    }

    function buildColumns() {
        const cols = [
            {
                data: 'id',
                name: 'id',
                orderable: false,
                searchable: false,
                render: function(data) {
                    const safeId = data ?? '';
                    return `<input type="checkbox" class="form-check-input all-checkbox" data-batch-id="${safeId}">`;
                }
            },
            { data: 'shift_date', name: 'shift_date' },
            { data: 'shift', name: 'shift' },
            { data: 'batch', name: 'batch' },
            { data: 'teamgroup', name: 'teamgroup' },
            { data: 'customer', name: 'customer' },
            { data: 'customer_name', name: 'customer_name' },
            { data: 'material_name', name: 'material_name' },
            { data: 'mesin_name', name: 'mesin_name' },
            { data: 'delivery', name: 'delivery' },
            { data: 'width', name: 'width' },
            { data: 'length', name: 'length' },
            { data: 'unit_of_dimension', name: 'unit_of_dimension' },
            { data: 'weight', name: 'weight' },
            { data: 'base_unit_measure', name: 'base_unit_measure' },
            { data: 'tested_by', name: 'tested_by' },
            { data: 'checked_by', name: 'checked_by' },
            { data: 'supervisor_by', name: 'supervisor_by' },
            { data: 'tested_at', name: 'tested_at' },
            { data: 'checked_at', name: 'checked_at' },
            { data: 'supervisor_at', name: 'supervisor_at' }
        ];

        Object.entries(PROP_COLS).forEach(([label, key]) => {
            cols.push({ data: key, name: key, defaultContent: '-' });
        });

        Object.entries(PARAM_COLS).forEach(([label, pair]) => {
            const pairArr = Array.isArray(pair) ? pair : [];
            const numKey = pairArr[0] || null;
            const txtKey = pairArr[1] || null;
            const displayKey = numKey ? `${numKey.replace(/_num$/, '')}_display` : null;

            cols.push({
                data: displayKey || numKey || txtKey,
                name: numKey || txtKey || 'param_value',
                defaultContent: '-'
            });
        });

        return cols;
    }

    let selectedBatchIds = new Set();

    function markCurrentPageSelections() {
        $('.all-checkbox').each(function() {
            const id = String($(this).data('batch-id') ?? '');
            $(this).prop('checked', id !== '' && selectedBatchIds.has(id));
        });

        const total = $('.all-checkbox').length;
        const checked = $('.all-checkbox:checked').length;
        $('#selectAllAll').prop('checked', total > 0 && total === checked);
    }

    function updateBulkDeleteButton() {
        $('#btnBulkDelete')
            .prop('disabled', selectedBatchIds.size === 0)
            .html(`<i class="fas fa-trash me-1"></i> Hapus Semua (${selectedBatchIds.size})`);
    }

    const dt = $('#dt_all').DataTable({
        processing: true,
        serverSide: true,
        paging: true,
        pagingType: 'full_numbers',
        ordering: true,
        order: [[1, 'desc']],
        info: true,
        lengthChange: true,
        pageLength: 25,
        lengthMenu: [
            [25, 50, 100, -1],
            [25, 50, 100, 'All']
        ],
        searching: true,
        searchDelay: 350,
        deferRender: true,
        scrollX: true,
        autoWidth: false,
        ajax: {
            // Gunakan POST agar payload DataTables + daftar parameter yang panjang tidak kena 414 (URI Too Large).
            url: getAjaxUrl(),
            type: 'POST',
            data: function(d) {
                // Hindari bentrok dengan query string legacy `search`.
                d.dt_search = (d.search && typeof d.search.value === 'string') ? d.search.value : '';
                // Wajib untuk request POST Laravel (middleware CSRF).
                d._token = '{{ csrf_token() }}';
                d.prop_names = PROP_NAMES;
                d.param_names = PARAM_NAMES;
            }
        },
        columns: buildColumns(),
        language: {
            search: "Cari :",
            zeroRecords: "Maaf - Data tidak ada",
            info: "Data _START_ - _END_ dari _TOTAL_",
            infoEmpty: "Tidak ada data",
            infoFiltered: "(pencarian dari _MAX_ data)",
            lengthMenu: "Tampilkan _MENU_ baris",
            paginate: {
                first: "«",
                last: "»",
                next: "›",
                previous: "‹"
            }
        },
        dom: 'frtip'
    });

    dt.on('draw', function() {
        markCurrentPageSelections();
        highlightTableMatches($('#dt_all'), dt.search());
    });

    setTimeout(() => {
        try {
            new $.fn.dataTable.FixedColumns(dt, {
                leftColumns: 4
            });
        } catch (e) {}
    }, 50);

    $('#modalFilter').on('shown.bs.modal', function() {
        $(this).find('select.select-multiple').each(function() {
            if ($(this).data('select2')) $(this).select2('destroy');
            $(this).select2({
                dropdownParent: $('#modalFilter'),
                width: '100%',
                allowClear: true
            });
        });
    });

    $('#selectAllAll').on('change', function () {
        const checked = this.checked;
        $('.all-checkbox').each(function() {
            const batchId = String($(this).data('batch-id') ?? '');
            if (!batchId) return;

            if (checked) {
                selectedBatchIds.add(batchId);
                $(this).prop('checked', true);
            } else {
                selectedBatchIds.delete(batchId);
                $(this).prop('checked', false);
            }
        });
        updateBulkDeleteButton();
    });

    $(document).on('change', '.all-checkbox', function() {
        const batchId = String($(this).data('batch-id') ?? '');
        if (batchId) {
            if ($(this).is(':checked')) {
                selectedBatchIds.add(batchId);
            } else {
                selectedBatchIds.delete(batchId);
            }
        }
        markCurrentPageSelections();
        updateBulkDeleteButton();
    });

    $('#btnBulkDelete').on('click', function () {
        if (selectedBatchIds.size === 0) return;

        $('#selectedCount').text(selectedBatchIds.size);
        $('#modalDeleteConfirm').modal('show');
    });

    $('#confirmDelete').on('click', function () {
        const btn = $(this);
        btn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Menghapus...');

        $.ajax({
            url: '{{ url()->current() }}/destroy',
            method: 'DELETE',
            data: {
                batch_ids: Array.from(selectedBatchIds),
                _token: '{{ csrf_token() }}'
            },
            success: function (res) {
                if (res.success) {
                    Swal.fire({
                        icon: 'success',
                        title: res.message || 'Berhasil menghapus batch data',
                        showConfirmButton: false,
                        timer: 2000,
                        timerProgressBar: true
                    });

                    setTimeout(() => {
                        location.reload();
                    }, 500);
                }
            },
            error: function () {
                alert('Terjadi kesalahan saat menghapus data');
            }
        });
    });

    $('#btnExportExcel').on('click', function () {
        const url = new URL(window.location.href);
        url.searchParams.set('export', 'excel');
        window.location.href = url.toString();
    });
});
</script>


@endpush