@php
    $prefix = $prefix ?? 'section';
    $formId = $formId ?? ($prefix . 'Form');
    $loadSchemesFn = $loadSchemesFn ?? ($prefix . 'SchemeAssignmentLoadSchemes');
    $assignmentWrapId = $prefix . '-scheme-assignment-wrap';
    $hiddenInputsId = $prefix . 'SchemeAssignmentHiddenInputs';
    $tableBodyId = $prefix . 'SchemeAssignmentTableBody';
    $selectAllId = $prefix . '-scheme-select-all';
    $paginationInfoId = $prefix . 'SchemeAssignmentPaginationInfo';
    $paginationId = $prefix . 'SchemeAssignmentPagination';
    $paginationWrapId = $paginationWrapId ?? ($prefix . 'SchemeAssignmentPaginationWrap');
    $searchInputId = $prefix . 'SchemeSearch';
    $searchBtnId = $prefix . 'SchemeSearchBtn';
    $tableColspan = (int) ($tableColspan ?? 11);
@endphp
<script>
(function() {
    var cfg = {
        optionsUrl: @json($optionsUrl),
        schemesUrl: @json($schemesUrl),
        formId: @json($formId),
        assignmentWrapId: @json($assignmentWrapId),
        hiddenInputsId: @json($hiddenInputsId),
        tableBodyId: @json($tableBodyId),
        selectAllId: @json($selectAllId),
        paginationInfoId: @json($paginationInfoId),
        paginationId: @json($paginationId),
        paginationWrapId: @json($paginationWrapId),
        searchInputId: @json($searchInputId),
        searchBtnId: @json($searchBtnId),
        loadSchemesFn: @json($loadSchemesFn),
        tableColspan: @json($tableColspan),
    };

    var initialAssignedSchemeIds = @json(array_values(array_map('intval', (array) ($assignedSchemeIds ?? []))));
    var selectedSchemeIds = {};
    var subDeptInitialPending = true;
    var coreSubInitialPending = true;
    var initialSubDepartmentIds = @json(array_values(array_map('intval', (array) ($initialSubDepartmentIds ?? []))));
    var initialCoreSubSectorIds = @json(array_values(array_map('intval', (array) ($initialCoreSubSectorIds ?? []))));
    var schemeSearchTerm = '';
    var schemeLoadXhr = null;

    initialAssignedSchemeIds.forEach(function(id) {
        selectedSchemeIds[String(id)] = true;
    });

    function multiSelectValAsArray($el) {
        var raw = $el.val();
        if (raw == null || raw === '') return [];
        return Array.isArray(raw) ? raw : [raw];
    }

    function rebuildSelectOptions($select, options, keepVal, placeholder) {
        if ($select.hasClass('select2-hidden-accessible')) {
            $select.select2('destroy');
        }
        $select.empty();
        (options || []).forEach(function(opt) {
            var id = String(opt.id);
            var $opt = $('<option></option>').attr('value', id).text(opt.name);
            if (keepVal.indexOf(id) !== -1 || keepVal.indexOf(parseInt(id, 10)) !== -1) {
                $opt.prop('selected', true);
            }
            $select.append($opt);
        });
        $select.select2({
            theme: 'bootstrap4',
            width: '100%',
            placeholder: placeholder || $select.data('placeholder') || '-- Select --',
            allowClear: true,
            closeOnSelect: false
        });
    }

    function resolveSubDepartmentIds() {
        var ids = multiSelectValAsArray($('#sub_department_ids'));
        if (ids.length === 0 && subDeptInitialPending && initialSubDepartmentIds.length) {
            return initialSubDepartmentIds.map(String);
        }
        return ids;
    }

    function resolveCoreSubSectorIds() {
        var ids = multiSelectValAsArray($('#core_sub_sector_ids'));
        if (ids.length === 0 && coreSubInitialPending && initialCoreSubSectorIds.length) {
            return initialCoreSubSectorIds.map(String);
        }
        return ids;
    }

    function loadSubDepartments() {
        var deptIds = multiSelectValAsArray($('#department_ids'));
        var $sub = $('#sub_department_ids');
        if (deptIds.length === 0) {
            rebuildSelectOptions($sub, [], [], 'Select department(s) first, then sub departments');
            $sub.prop('disabled', true);
            subDeptInitialPending = false;
            return $.Deferred().resolve().promise();
        }
        $sub.prop('disabled', false);
        var keepVal = resolveSubDepartmentIds();
        return $.getJSON(cfg.optionsUrl, { type: 'sub_departments', 'department_ids': deptIds })
            .done(function(res) {
                var validIds = (res.options || []).map(function(o) { return String(o.id); });
                keepVal = keepVal.filter(function(id) { return validIds.indexOf(String(id)) !== -1; });
                rebuildSelectOptions($sub, res.options || [], keepVal, 'Select one or more sub departments');
                subDeptInitialPending = false;
            });
    }

    function loadCoreSubSectors() {
        var sectorIds = multiSelectValAsArray($('#core_sector_ids'));
        var $sub = $('#core_sub_sector_ids');
        if (sectorIds.length === 0) {
            rebuildSelectOptions($sub, [], [], 'Select sector(s) first, then sub sectors');
            $sub.prop('disabled', true);
            coreSubInitialPending = false;
            return $.Deferred().resolve().promise();
        }
        $sub.prop('disabled', false);
        var keepVal = resolveCoreSubSectorIds();
        return $.getJSON(cfg.optionsUrl, { type: 'sub_sectors', 'core_sector_ids': sectorIds })
            .done(function(res) {
                var validIds = (res.options || []).map(function(o) { return String(o.id); });
                keepVal = keepVal.filter(function(id) { return validIds.indexOf(String(id)) !== -1; });
                rebuildSelectOptions($sub, res.options || [], keepVal, 'Select one or more sub sectors');
                coreSubInitialPending = false;
            });
    }

    function syncHiddenSchemeInputs() {
        var $wrap = $('#' + cfg.hiddenInputsId);
        $wrap.empty();
        Object.keys(selectedSchemeIds).forEach(function(id) {
            if (selectedSchemeIds[id]) {
                $('<input>', { type: 'hidden', name: 'assigned_scheme_ids[]', value: id }).appendTo($wrap);
            }
        });
    }

    function collectFilterParams(page) {
        return {
            page: page || 1,
            search: schemeSearchTerm,
            department_ids: multiSelectValAsArray($('#department_ids')),
            sub_department_ids: resolveSubDepartmentIds(),
            core_sector_ids: multiSelectValAsArray($('#core_sector_ids')),
            core_sub_sector_ids: resolveCoreSubSectorIds(),
            blk_ids: multiSelectValAsArray($('#blk_ids')),
            selected_ids: Object.keys(selectedSchemeIds).filter(function(k) { return selectedSchemeIds[k]; })
        };
    }

    function renderPagination(meta) {
        var $info = $('#' + cfg.paginationInfoId);
        var $nav = $('#' + cfg.paginationId);
        if (!meta || !meta.total) {
            $info.text('No schemes found.');
            $nav.empty();
            return;
        }
        $info.text('Showing ' + (meta.from || 0) + '–' + (meta.to || 0) + ' of ' + meta.total);
        $nav.empty();
        function addPage(label, page, disabled, active) {
            var $li = $('<li class="page-item"></li>');
            if (disabled) $li.addClass('disabled');
            if (active) $li.addClass('active');
            var $a = $('<a class="page-link" href="#"></a>').text(label);
            if (!disabled && !active) {
                $a.on('click', function(e) {
                    e.preventDefault();
                    window[cfg.loadSchemesFn](page);
                });
            }
            $li.append($a);
            $nav.append($li);
        }
        addPage('«', Math.max(1, meta.current_page - 1), meta.current_page <= 1, false);
        for (var p = 1; p <= meta.last_page; p++) {
            if (p === 1 || p === meta.last_page || Math.abs(p - meta.current_page) <= 2) {
                addPage(String(p), p, false, p === meta.current_page);
            } else if (p === 2 && meta.current_page > 4) {
                $nav.append('<li class="page-item disabled"><span class="page-link">…</span></li>');
            } else if (p === meta.last_page - 1 && meta.current_page < meta.last_page - 3) {
                $nav.append('<li class="page-item disabled"><span class="page-link">…</span></li>');
            }
        }
        addPage('»', Math.min(meta.last_page, meta.current_page + 1), meta.current_page >= meta.last_page, false);
    }

    window[cfg.loadSchemesFn] = function(page) {
        if (!$('#' + cfg.assignmentWrapId).is(':visible')) return;
        if (schemeLoadXhr) schemeLoadXhr.abort();
        window._schemeAssignmentCurrentPage = page || 1;
        $('#' + cfg.tableBodyId).html('<tr><td colspan="' + cfg.tableColspan + '" class="text-center text-muted py-4">Loading schemes…</td></tr>');
        schemeLoadXhr = $.getJSON(cfg.schemesUrl, collectFilterParams(page))
            .done(function(res) {
                if (Array.isArray(res.valid_selected_ids)) {
                    selectedSchemeIds = {};
                    res.valid_selected_ids.forEach(function(id) {
                        selectedSchemeIds[String(id)] = true;
                    });
                }
                $('#' + cfg.tableBodyId).html(res.html || '');
                $('#' + cfg.tableBodyId + ' .scheme-assignment-row-checkbox').each(function() {
                    var id = String($(this).val());
                    if (selectedSchemeIds[id]) $(this).prop('checked', true);
                });
                renderPagination(res.pagination || {});
                syncHiddenSchemeInputs();
                $('#' + cfg.selectAllId).prop('checked', false);
            })
            .fail(function() {
                $('#' + cfg.tableBodyId).html('<tr><td colspan="' + cfg.tableColspan + '" class="text-center text-danger py-4">Failed to load schemes.</td></tr>');
            });
    };

    $(document).on('change', '.scheme-assignment-row-checkbox', function() {
        if (!$(this).closest('#' + cfg.tableBodyId).length) return;
        var id = String($(this).val());
        selectedSchemeIds[id] = $(this).is(':checked');
        syncHiddenSchemeInputs();
    });

    $('#' + cfg.selectAllId).on('change', function() {
        var checked = $(this).is(':checked');
        $('#' + cfg.tableBodyId + ' .scheme-assignment-row-checkbox').each(function() {
            $(this).prop('checked', checked).trigger('change');
        });
    });

    $('#department_ids').on('change select2:select select2:unselect', function() {
        loadSubDepartments().always(function() {
            window[cfg.loadSchemesFn](1);
        });
    });

    $('#sub_department_ids, #core_sub_sector_ids, #blk_ids').on('change select2:select select2:unselect', function() {
        window[cfg.loadSchemesFn](1);
    });

    $('#core_sector_ids').on('change select2:select select2:unselect', function() {
        loadCoreSubSectors().always(function() {
            window[cfg.loadSchemesFn](1);
        });
    });

    $('#' + cfg.searchBtnId).on('click', function() {
        schemeSearchTerm = ($('#' + cfg.searchInputId).val() || '').trim();
        window[cfg.loadSchemesFn](1);
    });

    $('#' + cfg.searchInputId).on('keypress', function(e) {
        if (e.which === 13) {
            e.preventDefault();
            $('#' + cfg.searchBtnId).click();
        }
    });

    $('#' + cfg.formId).on('submit', function() {
        // Ensure Select2 multi-selects still post their selected values reliably.
        [
            'department_ids',
            'sub_department_ids',
            'core_sector_ids',
            'core_sub_sector_ids',
            'blk_ids'
        ].forEach(function(name) {
            var $sel = $('#' + name);
            if (!$sel.length || $sel.prop('disabled')) {
                return;
            }
            var vals = $sel.val();
            if (!vals) {
                return;
            }
            if (!Array.isArray(vals)) {
                vals = [vals];
            }
            $sel.find('option').prop('selected', false);
            vals.forEach(function(v) {
                $sel.find('option[value="' + String(v).replace(/"/g, '\\"') + '"]').prop('selected', true);
            });
        });

        $('#' + cfg.tableBodyId + ' .scheme-assignment-row-checkbox').each(function() {
            var id = String($(this).val());
            selectedSchemeIds[id] = $(this).is(':checked');
        });
        syncHiddenSchemeInputs();
    });

    $(document).ready(function() {
        $.when(loadSubDepartments(), loadCoreSubSectors()).always(function() {
            if ($('#' + cfg.assignmentWrapId).is(':visible')) {
                window[cfg.loadSchemesFn](1);
            }
        });
    });
})();
</script>