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

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

    <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('uplspc') }}" class="btn btn-success mb-0 ms-2">
                            <i class="fas fa-upload me-1"></i> Upload Master Special
                        </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">
                                                    @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-body px-2 pt-0 pb-2">
                        @if (!empty($materialList) && !empty($warnaList) && !empty($propertiesList))
                            <table id="masterStandardTable" class="table display nowrap w-100 slim-table"
                                style="width:100%">
                                <thead>
                                    <tr>
                                        <th rowspan="2">
                                            <input type="checkbox" id="selectAll" class="form-check-input">
                                        </th>
                                        <th rowspan="2">CUSTOMER</th>
                                        <th rowspan="2">MATERIAL</th>
                                        <th rowspan="2">WARNA</th>
                                        @php
                                            // Jika ada filter properties, gunakan yang dipilih tapi tetap urut sesuai $propertiesList
                                            if (!empty($propertiesFilter)) {
                                                $displayProperties = [];
                                                foreach ($propertiesList ?? [] as $property) {
                                                    if (in_array($property, $propertiesFilter)) {
                                                        $displayProperties[] = $property;
                                                    }
                                                }
                                            } else {
                                                $displayProperties = $propertiesList ?? [];
                                            }
                                        @endphp
                                        @foreach ($displayProperties as $property)
                                            <th colspan="4">{{ $property }}</th>
                                        @endforeach
                                    </tr>
                                    <tr>
                                        @foreach ($displayProperties as $property)
                                            <th>min</th>
                                            <th>target</th>
                                            <th>max</th>
                                            <th>allowance</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- Data dimuat via AJAX server-side --}}
                                </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 data master special</h6>
                                <a href="{{ URL::to('uplspc') }}" class="btn btn-primary btn-sm mt-2">
                                    <i class="fas fa-upload me-1"></i> Upload Master Special
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Modal filter --}}
        @includeIf('listxx.lstspc.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 <strong><span id="selectedCount">0</span></strong> data master special properties 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.
                            <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>

        <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;
                text-align: center !important;
                vertical-align: middle !important;
                border: 1px solid #dee2e6 !important;
            }

            table.slim-table tbody td {
                text-align: center !important;
                vertical-align: middle !important;
                border: 1px solid #dee2e6 !important;
            }

            /* Fixed columns styling */
            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;
            }

            /* Hide original columns when fixed columns are ready */
            #masterStandardTable_wrapper.fc-ready .dataTables_scrollHead th:nth-child(-n+3),
            #masterStandardTable_wrapper.fc-ready .dataTables_scrollBody td:nth-child(-n+3) {
                visibility: hidden !important;
            }

            #masterStandardTable_wrapper .DTFC_LeftWrapper th,
            #masterStandardTable_wrapper .DTFC_LeftWrapper td {
                visibility: visible !important;
                white-space: nowrap;
                background-color: #fff !important;
            }

            #masterStandardTable_wrapper .DTFC_LeftWrapper th {
                min-width: 120px;
                background-color: #00b7bd4f !important;
                color: #2b2b2b !important;
                font-weight: 600 !important;
            }

            /* Customer column styling */
            #masterStandardTable_wrapper .DTFC_LeftWrapper th:first-child,
            #masterStandardTable_wrapper .DTFC_LeftWrapper td:first-child {
                min-width: 150px;
            }

            /* 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;
            }

            /* Disable button styling */
            #btnBulkDelete:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }

            .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-top: 10px;
                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>
    </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

@php
    $displayPropMeta = [];
    foreach (($displayProperties ?? []) as $p) {
        $alias = strtolower($p);
        $alias = preg_replace('/\s+/', '_', $alias);
        $alias = str_replace(['(', ')', '/', '%', '@', '.', ','], '', $alias);
        $displayPropMeta[] = ['label' => $p, 'alias' => $alias];
    }
@endphp

@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>
    <script>
        $(document).ready(function() {
            const DISPLAY_PROP_META = @json($displayPropMeta ?? []);

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

            function highlightTableMatches($table, keyword) {
                // Gunakan keyword global search DataTables.
                const term = String(keyword || '').trim();
                // Samakan pola koma/titik supaya 3,5 dan 3.5 sama-sama terdeteksi.
                const pattern = escapeRegex(term).replace(/\\,/g, '[,.]').replace(/\\\./g, '[,.]');
                const regex = term ? new RegExp(`(${pattern})`, 'gi') : null;

                $table.find('tbody td').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 (!regex) {
                        $td.text(rawText);
                        return;
                    }

                    if (!regex.test(rawText)) {
                        $td.text(rawText);
                        return;
                    }

                    // Reset lastIndex karena regex global dipakai berulang pada banyak sel.
                    regex.lastIndex = 0;
                    $td.html(rawText.replace(regex, '<span class="search-hit">$1</span>'));
                });
            }

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

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

            function initMasterStandardTable() {
                const $el = $('#masterStandardTable');
                if (!$el.length) return; // Tidak ada tabel, skip inisialisasi

                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',
                    lengthChange: true,
                    searching: true,
                    searchDelay: 350,
                    deferRender: true,
                    ordering: true,
                    info: true,
                    autoWidth: false,
                    pageLength: 25,
                    lengthMenu: [
                        [25, 50, 100, -1],
                        [25, 50, 100, 'All']
                    ],
                    scrollX: true,
                    scrollCollapse: true,
                    ajax: {
                        // Gunakan POST agar payload DataTables + prop_names yang panjang tidak kena 414 (URI Too Large).
                        url: getAjaxUrl(),
                        type: 'POST',
                        data: function(d) {
                            // Wajib untuk request POST Laravel (middleware CSRF).
                            d._token = '{{ csrf_token() }}';
                            d.prop_names = DISPLAY_PROP_META.map(p => p.label);
                        }
                    },
                    columns: (function() {
                        const cols = [
                            {
                                data: 'standard_ids',
                                name: 'standard_ids',
                                orderable: false,
                                searchable: false,
                                render: function(data) {
                                    const ids = String(data || '');
                                    return `<input type="checkbox" class="form-check-input standard-checkbox" data-standard-ids="${ids}" value="${ids}">`;
                                }
                            },
                            { data: 'customer', name: 'customer', className: 'text-center' },
                            { data: 'material', name: 'material', className: 'text-center' },
                            { data: 'warna', name: 'warna', className: 'text-center' }
                        ];

                        DISPLAY_PROP_META.forEach((p) => {
                            cols.push({ data: `${p.alias}_min`, name: `${p.alias}_min`, className: 'text-center' });
                            cols.push({ data: `${p.alias}_target`, name: `${p.alias}_target`, className: 'text-center' });
                            cols.push({ data: `${p.alias}_max`, name: `${p.alias}_max`, className: 'text-center' });
                            cols.push({ data: `${p.alias}_allowance`, name: `${p.alias}_allowance`, className: 'text-center' });
                        });

                        return cols;
                    })(),
                    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();
                    highlightTableMatches($el, dt.search());
                });

                // Fixed columns setup
                const wrap = $el.closest('.dataTables_wrapper');
                try {
                    if (dt.fixedColumns && dt.fixedColumns().relayout) {
                        // New API
                        dt.fixedColumns().relayout();
                    } else if ($.fn.dataTable.FixedColumns) {
                        // Old API
                        const fc = new $.fn.dataTable.FixedColumns(dt, {
                            leftColumns: 4 // Updated to include checkbox column
                        });
                        $el.data('fc', fc);
                    }
                } catch (e) {
                    /* noop */
                }

                // Mark wrapper as ready for CSS
                if (wrap.find('.DTFC_LeftWrapper').length) wrap.addClass('fc-ready');

                // Adjust columns after render
                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) {}
            }

            // Hanya inisialisasi jika tabel ada
            initMasterStandardTable();

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

            // Cleanup saat modal ditutup
            $('#modalFilter').on('hidden.bs.modal', function() {
                $(this).find('select.select-multiple').each(function() {
                    if ($(this).data('select2')) {
                        $(this).select2('destroy');
                    }
                });
            });

            // ================== CHECKBOX MANAGEMENT ==================
            // Simpan pilihan berdasarkan baris checkbox (bukan jumlah ID detail),
            // agar count sesuai jumlah data yang dicentang user.
            let selectedRows = new Map();

            function parseStandardIds(rawValue) {
                return String(rawValue || '').split(',').map(i => i.trim()).filter(Boolean);
            }

            function rowKeyFromIds(ids) {
                return ids.join(',');
            }

            function getSelectedStandardIds() {
                const idSet = new Set();
                selectedRows.forEach((ids) => ids.forEach((id) => idSet.add(id)));
                return idSet;
            }

            function chunkArray(items, size) {
                const chunks = [];
                for (let i = 0; i < items.length; i += size) {
                    chunks.push(items.slice(i, i + size));
                }
                return chunks;
            }

            function markCurrentPageSelections() {
                $('.standard-checkbox').each(function() {
                    const ids = parseStandardIds($(this).data('standard-ids'));
                    const rowKey = rowKeyFromIds(ids);
                    const checked = rowKey !== '' && selectedRows.has(rowKey);
                    $(this).prop('checked', checked);
                });

                const totalCheckboxes = $('.standard-checkbox').length;
                const checkedCheckboxes = $('.standard-checkbox:checked').length;
                $('#selectAll').prop('checked', totalCheckboxes > 0 && totalCheckboxes === checkedCheckboxes);
            }

            // Function to update bulk delete button state
            function updateBulkDeleteButton() {
                const btn = $('#btnBulkDelete');
                const count = selectedRows.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');
                }
            }

            // Select all functionality
            $('#selectAll').on('change', function() {
                const isChecked = $(this).is(':checked');
                $('.standard-checkbox').each(function() {
                    const ids = parseStandardIds($(this).data('standard-ids'));
                    const rowKey = rowKeyFromIds(ids);
                    if (!rowKey) return;

                    if (isChecked) selectedRows.set(rowKey, ids);
                    else selectedRows.delete(rowKey);

                    $(this).prop('checked', isChecked);
                });
                updateBulkDeleteButton();
            });

            // Individual checkbox change
            $(document).on('change', '.standard-checkbox', function() {
                const ids = parseStandardIds($(this).data('standard-ids'));
                const rowKey = rowKeyFromIds(ids);
                if (!rowKey) return;

                if ($(this).is(':checked')) {
                    selectedRows.set(rowKey, ids);
                } else {
                    selectedRows.delete(rowKey);
                }
                markCurrentPageSelections();

                updateBulkDeleteButton();
            });

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

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

            // Confirm delete
            $('#confirmDelete').on('click', function() {
                const btn = $(this);
                const originalText = btn.html();
                const allIds = Array.from(getSelectedStandardIds());

                if (!allIds.length) {
                    alert('Tidak ada data yang dipilih untuk dihapus.');
                    return;
                }

                const chunks = chunkArray(allIds, 500);
                let deletedTotal = 0;

                btn.prop('disabled', true);
                btn.html('<i class="fas fa-spinner fa-spin me-1"></i> Menghapus...');

                function runDeleteChunk(index) {
                    $.ajax({
                        url: '{{ url()->current() }}/destroy',
                        method: 'DELETE',
                        data: {
                            standard_ids: chunks[index],
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (!response.success) {
                                alert('Error: ' + (response.message || 'Gagal menghapus data.'));
                                return;
                            }

                            deletedTotal += Number(response.deleted_count || chunks[index].length);

                            if (index < chunks.length - 1) {
                                runDeleteChunk(index + 1);
                                return;
                            }

                            const alertHtml = `
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i> Berhasil menghapus ${deletedTotal} data.
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    `;
                            $('.container-fluid').prepend(alertHtml);

                            setTimeout(() => {
                                window.location.reload();
                            }, 1500);
                        },
                        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() {
                            if (index === chunks.length - 1) {
                                btn.prop('disabled', false);
                                btn.html(originalText);
                                $('#modalDeleteConfirm').modal('hide');
                            }
                        }
                    });
                }

                runDeleteChunk(0);
            });
        });
    </script>

    {{-- Include Select2 for multi-select --}}
    <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.dataTables.min.css" />
    <script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>
@endpush