@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))
                            {{-- Tabs --}}
                            <ul class="nav nav-tabs px-3 pt-3" id="propsTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="tab-batch" data-bs-toggle="tab"
                                        data-bs-target="#pane-batch" type="button" role="tab">Data Batch</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="tab-props" data-bs-toggle="tab"
                                        data-bs-target="#pane-props" type="button" role="tab">Data Properties</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="tab-params" data-bs-toggle="tab"
                                        data-bs-target="#pane-params" type="button" role="tab">Data Parameter
                                        Mesin</button>
                                </li>
                            </ul>

                            <div class="tab-content p-3">
                                {{-- ====== TAB 1: BATCH ====== --}}
                                <div class="tab-pane fade show active" id="pane-batch" role="tabpanel"
                                    aria-labelledby="tab-batch">
                                    <table class="table display nowrap w-100 slim-table" id="dt_batch">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <input type="checkbox" id="selectAllBatch" class="form-check-input">
                                                </th>
                                                <th>Shift Date</th>
                                                <th>Shift</th>
                                                <th>Batch</th>
                                                <th>Team Group</th>
                                                <th>Customer</th>
                                                <th>Customer Name</th>
                                                <th>Material</th>
                                                <th>Mesin</th>
                                                <th>Delivery</th>
                                                <th>Width</th>
                                                <th>Length</th>
                                                <th>Unit of Dimension</th>
                                                <th>Weight</th>
                                                <th>Base Unit of Measure</th>
                                                <th>Tested By</th>
                                                <th>Checked By</th>
                                                <th>Supervisor By</th>
                                                <th>Tested At</th>
                                                <th>Checked At</th>
                                                <th>Supervisor At</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>

                                {{-- ====== TAB 2: PROPERTIES ====== --}}
                                <div class="tab-pane fade" id="pane-props" role="tabpanel" aria-labelledby="tab-props">
                                    <table class="table display nowrap w-100 slim-table" id="dt_props">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <input type="checkbox" id="selectAllProps" class="form-check-input">
                                                </th>
                                                <th>Shift Date</th>
                                                <th>Shift</th>
                                                <th>Batch</th>
                                                @foreach ($propCols ?? [] as $label => $key)
                                                    <th>{{ $label }}</th>
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>

                                {{-- ====== TAB 3: PARAMETER MESIN ====== --}}
                                <div class="tab-pane fade" id="pane-params" role="tabpanel" aria-labelledby="tab-params">
                                    <table class="table display nowrap w-100 slim-table" id="dt_params">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <input type="checkbox" id="selectAllParams" class="form-check-input">
                                                </th>
                                                <th>Shift Date</th>
                                                <th>Shift</th>
                                                <th>Batch</th>
                                                @foreach ($paramCols ?? [] as $label => $pair)
                                                    <th>{{ $label }}</th>
                                                @endforeach
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>

                            {{-- Pagination ditangani DataTables (client-side) --}}
                        @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.lstall.partials.modal-filter')

    {{-- 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;
        }

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

    <script>
        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(tableType) {
            const checkboxClass = tableType === 'batch' ? 'batch-checkbox' : (tableType === 'props' ? 'props-checkbox' : 'params-checkbox');

            const cols = [
                {
                    data: 'id',
                    name: 'id',
                    orderable: false,
                    searchable: false,
                    render: function(data) {
                        const safeId = data ?? '';
                        return `<input type="checkbox" class="form-check-input ${checkboxClass}" value="${safeId}" data-batch-id="${safeId}">`;
                    }
                },
                { data: 'shift_date', name: 'shift_date' },
                { data: 'shift', name: 'shift' },
                { data: 'batch', name: 'batch' }
            ];

            if (tableType === 'batch') {
                cols.push(
                    { 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' }
                );
            }

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

            if (tableType === 'params') {
                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;
        }

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

        function updateSelectAllStateForTable(tableId) {
            const checkboxClass = tableId === 'dt_batch' ? 'batch-checkbox' : (tableId === 'dt_props' ? 'props-checkbox' : 'params-checkbox');
            const selectAllId = tableId === 'dt_batch' ? 'selectAllBatch' : (tableId === 'dt_props' ? 'selectAllProps' : 'selectAllParams');

            const $rows = $(`.${checkboxClass}`);
            const total = $rows.length;
            const checked = $rows.filter(':checked').length;
            $(`#${selectAllId}`).prop('checked', total > 0 && total === checked);
        }

        function initDT(selector) {
            const $el = $(selector);
            if (!$el.length) return;
            const tableType = selector === '#dt_batch' ? 'batch' : (selector === '#dt_props' ? 'props' : 'params');

            if ($.fn.dataTable.isDataTable($el)) {
                const dt = $el.DataTable();
                dt.columns.adjust();
                try {
                    dt.fixedColumns && dt.fixedColumns().relayout && dt.fixedColumns().relayout();
                } catch (e) {}
                const wrap = $el.closest('.dataTables_wrapper');
                if (wrap.find('.DTFC_LeftWrapper').length) wrap.addClass('fc-ready');
                return;
            }

            const dt = $el.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,
                scrollCollapse: true,
                autoWidth: false,
                ajax: {
                    // Gunakan POST agar payload DataTables + prop/param names 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.table = tableType;
                        d.prop_names = PROP_NAMES;
                        d.param_names = PARAM_NAMES;
                    }
                },
                columns: buildColumns(tableType),

                // JANGAN andalkan opsi fixedColumns di sini — kita inisialisasi manual di bawah,
                // agar kompatibel untuk versi plugin lama/baru.

                language: {
                    search: "Cari :",
                    lengthMenu: "Tampilkan _MENU_ baris",
                    zeroRecords: "Maaf - Data tidak ada",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    infoEmpty: "Tidak ada data",
                    infoFiltered: "(pencarian dari _MAX_ data)",
                    paginate: {
                        first: "«",
                        last: "»",
                        next: "›",
                        previous: "‹"
                    }
                },
                dom: 'frtip'
            });

            dt.on('draw', function() {
                markCurrentPageSelections();
                updateSelectAllStateForTable($el.attr('id'));
                highlightTableMatches($el, dt.search());
            });

            // --- FixedColumns: dukung 2 gaya API ---
            const wrap = $el.closest('.dataTables_wrapper');
            try {
                if (dt.fixedColumns && dt.fixedColumns().relayout) {
                    // API baru
                    // aktifkan via extension option kalau tersedia, lalu relayout
                    // (di beberapa bundle sudah aktif otomatis)
                    dt.fixedColumns().relayout();
                } else if ($.fn.dataTable.FixedColumns) {
                    // API lama
                    const fc = new $.fn.dataTable.FixedColumns(dt, {
                        leftColumns: 4  // Updated to include checkbox column
                    });
                    // simpan biar bisa dipanggil lagi saat tab show
                    $el.data('fc', fc);
                }
            } catch (e) {
                /* noop */
            }

            // tandai wrapper siap agar CSS penyembunyi kolom aktif
            if (wrap.find('.DTFC_LeftWrapper').length) wrap.addClass('fc-ready');

            // sesuaikan lebar setelah render
            dt.columns.adjust();
            try {
                if ($el.data('fc') && $el.data('fc').fnRedrawLayout) $el.data('fc').fnRedrawLayout(); // API lama
                if (dt.fixedColumns && dt.fixedColumns().relayout) dt.fixedColumns().relayout(); // API baru
            } catch (e) {}
        }

        // Init tab pertama
        document.addEventListener('DOMContentLoaded', () => {
            initDT('#dt_batch');
        });

        // Lazy init tab lain + realign saat tab tampil
        const tabMap = {
            'tab-batch': '#dt_batch',
            'tab-props': '#dt_props',
            'tab-params': '#dt_params'
        };
        document.getElementById('propsTab')?.addEventListener('click', (e) => {
            const btn = e.target.closest('button[data-bs-target]');
            if (!btn) return;
            const sel = tabMap[btn.id];
            if (!sel) return;
            setTimeout(() => initDT(sel), 50);
        });
        document.querySelectorAll('button[data-bs-toggle="tab"]').forEach(btn => {
            btn.addEventListener('shown.bs.tab', function() {
                const sel = tabMap[this.id];
                if (!sel) return;
                const $el = $(sel);
                if (!$.fn.dataTable.isDataTable($el)) return;
                const dt = $el.DataTable();
                dt.columns.adjust();
                try {
                    if ($el.data('fc') && $el.data('fc').fnRedrawLayout) $el.data('fc').fnRedrawLayout();
                    if (dt.fixedColumns && dt.fixedColumns().relayout) dt.fixedColumns().relayout();
                } catch (e) {}
                const wrap = $el.closest('.dataTables_wrapper');
                if (wrap.find('.DTFC_LeftWrapper').length) wrap.addClass('fc-ready');
            });
        });

        // Select2 di modal (tetap)
        $('#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
                });
            });
        });

        // ================== CHECKBOX MANAGEMENT ==================
        let selectedBatchIds = new Set();

        // Function to update bulk delete button state
        function updateBulkDeleteButton() {
            const btn = $('#btnBulkDelete');
            const count = selectedBatchIds.size;
            
            if (count > 0) {
                btn.prop('disabled', false);
                btn.html(`<i class="fas fa-trash me-1"></i> Hapus Semua (${count})`);
            } else {
                btn.prop('disabled', true);
                btn.html('<i class="fas fa-trash me-1"></i> Hapus Semua');
            }
        }

        function syncCheckboxes() {
            markCurrentPageSelections();
            updateBulkDeleteButton();
        }

        // Select all functionality for each table
        function setupSelectAll(selectAllId, checkboxClass) {
            $(`#${selectAllId}`).on('change', function() {
                const isChecked = $(this).is(':checked');
                $(`.${checkboxClass}`).each(function() {
                    const batchId = String($(this).data('batch-id') ?? '');
                    if (!batchId) return;

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

        // Individual checkbox change
        $(document).on('change', '.batch-checkbox, .props-checkbox, .params-checkbox', function() {
            const batchId = String($(this).data('batch-id') ?? '');
            if (batchId) {
                if ($(this).is(':checked')) {
                    selectedBatchIds.add(batchId);
                } else {
                    selectedBatchIds.delete(batchId);
                }
            }
            updateBulkDeleteButton();
            
            // Update select all checkbox state
            const tableId = $(this).closest('table').attr('id');
            updateSelectAllStateForTable(tableId);
        });

        // Setup select all for each table
        setupSelectAll('selectAllBatch', 'batch-checkbox');
        setupSelectAll('selectAllProps', 'props-checkbox');
        setupSelectAll('selectAllParams', 'params-checkbox');

        // Bulk delete functionality
        $('#btnBulkDelete').on('click', function() {
            if (selectedBatchIds.size === 0) {
                alert('Tidak ada data yang dipilih untuk dihapus.');
                return;
            }
            
            $('#selectedCount').text(selectedBatchIds.size);
            $('#modalDeleteConfirm').modal('show');
        });

        // Confirm delete
        $('#confirmDelete').on('click', function() {
            const btn = $(this);
            const originalText = btn.html();
            
            btn.prop('disabled', true);
            btn.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(response) {
                    if (response.success) {
                        // Show success message
                        const alertHtml = `
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="fas fa-check-circle me-2"></i> ${response.message}
                                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                            </div>
                        `;
                        $('.container-fluid').prepend(alertHtml);
                        
                        // Reload page after short delay
                        setTimeout(() => {
                            window.location.reload();
                        }, 1500);
                    } else {
                        alert('Error: ' + response.message);
                    }
                },
                error: function(xhr) {
                    let errorMessage = 'Terjadi kesalahan saat menghapus data.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                    alert('Error: ' + errorMessage);
                },
                complete: function() {
                    btn.prop('disabled', false);
                    btn.html(originalText);
                    $('#modalDeleteConfirm').modal('hide');
                }
            });
        });

        $(document).ready(function() {
            $('#btnExportExcel').on('click', function() {
                const url = new URL(window.location.href);
                url.searchParams.set('export', 'excel');
                window.location.href = url.toString(); // Redirect download Excel
            });
        });

        // Clear selections when switching tabs
        $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function() {
            // Don't clear selections, just sync them
            syncCheckboxes();
        });
    </script>
@endpush