@php
    $filterSectorSelected = $filterSectorSelected ?? [];
    $filterSubSectorSelected = $filterSubSectorSelected ?? [];
    if (old('filter_sector_ids') !== null) {
        $filterSectorSelected = array_map('intval', (array) old('filter_sector_ids'));
    }
    if (old('filter_sub_sector_ids') !== null) {
        $filterSubSectorSelected = array_map('intval', (array) old('filter_sub_sector_ids'));
    }
    $sectorFiltersWrapId = $sectorFiltersWrapId ?? 'user-scheme-sector-filters-wrap';
@endphp

<div class="row" id="{{ $sectorFiltersWrapId }}">
    <div class="col-md-6">
        <x-form.multi-select
            label="Sectors"
            name="filter_sector_ids"
            :options="$schemeSectorOptions ?? []"
            :selected="$filterSectorSelected"
            placeholder="Select one or more sectors"
            hint="Optional. Further narrows the scheme preview."
            :disabled="$sectorFiltersDisabled ?? false"
        />
    </div>
    <div class="col-md-6">
        <x-form.multi-select
            label="Sub Sectors"
            name="filter_sub_sector_ids"
            :options="[]"
            :selected="$filterSubSectorSelected"
            placeholder="Select sector(s) first, then sub sectors"
            hint="Optional. Leave empty to include all schemes under the selected sector(s)."
            :disabled="$sectorFiltersDisabled ?? false"
        />
        <div id="filter-sub-sectors-empty-hint" class="text-muted small mb-2" style="display: none;">
            No sub sectors are available for the selected sector(s).
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var sectorFilterConfig = {
        subSectorsUrl: @json(route('accessible-projects-preview.sub-sectors')),
        initialSubSelected: @json(array_values(array_map('intval', $filterSubSectorSelected))),
        pendingInitial: @json($filterSubSectorSelected !== []),
    };

    function getParentSectorIds() {
        var $field = $('#filter_sector_ids');
        if (!$field.length) {
            return [];
        }
        var val = $field.val();
        if (!val) {
            return [];
        }
        return (Array.isArray(val) ? val : [val]).map(function (id) {
            return parseInt(id, 10);
        }).filter(function (id) {
            return id > 0;
        });
    }

    function initFilterSubSectorSelect2() {
        var $sub = $('#filter_sub_sector_ids');
        if (!$sub.length) {
            return;
        }
        if ($sub.hasClass('select2-hidden-accessible')) {
            $sub.select2('destroy');
        }
        $sub.select2({
            theme: 'bootstrap4',
            width: '100%',
            placeholder: $sub.data('placeholder') || 'Select sector(s) first, then sub sectors',
            allowClear: true,
            closeOnSelect: false
        });
    }

    function initFilterSectorSelect2() {
        var $sector = $('#filter_sector_ids');
        if (!$sector.length) {
            return;
        }
        if ($sector.hasClass('select2-hidden-accessible')) {
            $sector.select2('destroy');
        }
        $sector.select2({
            theme: 'bootstrap4',
            width: '100%',
            placeholder: $sector.data('placeholder') || 'Select one or more sectors',
            allowClear: true,
            closeOnSelect: false
        });
    }

    function rebuildFilterSubSectors(clearSelection) {
        var $sub = $('#filter_sub_sector_ids');
        var $hint = $('#filter-sub-sectors-empty-hint');
        if (!$sub.length) {
            return;
        }

        var sectorIds = getParentSectorIds();
        if (sectorIds.length === 0) {
            $sub.empty();
            initFilterSubSectorSelect2();
            $hint.hide();
            $(document).trigger('accessible-projects:reload');
            return;
        }

        $.getJSON(sectorFilterConfig.subSectorsUrl, { filter_sector_ids: sectorIds })
            .done(function (response) {
                var options = response.data || [];
                var previous = clearSelection ? [] : ($sub.val() || []);
                if (!Array.isArray(previous)) {
                    previous = previous ? [previous] : [];
                }
                previous = previous.map(function (id) { return String(id); });

                if (sectorFilterConfig.pendingInitial && sectorFilterConfig.initialSubSelected.length) {
                    previous = sectorFilterConfig.initialSubSelected.map(String);
                    sectorFilterConfig.pendingInitial = false;
                }

                $sub.empty();
                var optionMap = {};
                options.forEach(function (opt) {
                    var id = String(opt.id);
                    optionMap[id] = true;
                    $sub.append(new Option(opt.label, id, false, false));
                });

                var keep = previous.filter(function (id) {
                    return optionMap.hasOwnProperty(id);
                });
                if (keep.length) {
                    $sub.val(keep);
                }

                initFilterSubSectorSelect2();
                $sub.trigger('change');

                if (options.length === 0) {
                    $hint.show();
                } else {
                    $hint.hide();
                }

                $(document).trigger('accessible-projects:reload');
            })
            .fail(function () {
                $hint.text('Unable to load sub sectors. Please try again.').show();
            });
    }

    $(document).ready(function () {
        initFilterSectorSelect2();
        $('#filter_sector_ids').on('change select2:select select2:unselect', function () {
            sectorFilterConfig.pendingInitial = false;
            rebuildFilterSubSectors(true);
        });
        $('#filter_sub_sector_ids').on('change select2:select select2:unselect', function () {
            $(document).trigger('accessible-projects:reload');
        });
        if (getParentSectorIds().length > 0) {
            rebuildFilterSubSectors(false);
        } else {
            initFilterSubSectorSelect2();
        }
    });
})();
</script>
@endpush