@php
    $subDepartmentSelected = $subDepartmentSelected ?? [];
    if (old('sub_department_ids') !== null) {
        $subDepartmentSelected = array_map('intval', (array) old('sub_department_ids'));
    }
    $subDepartmentDepartmentField = $subDepartmentDepartmentField ?? 'department_ids';
    $subDepartmentWrapId = $subDepartmentWrapId ?? 'user-sub-departments-wrap';
@endphp

<div class="row" id="{{ $subDepartmentWrapId }}">
    <div class="col-md-12">
        <x-form.multi-select
            label="Sub Departments"
            name="sub_department_ids"
            :options="[]"
            :selected="$subDepartmentSelected"
            placeholder="Select department(s) first, then sub departments"
            hint="Optional. Leave empty to include all schemes under the selected department(s)."
            :disabled="$subDepartmentDisabled ?? false"
        />
        <div id="sub-departments-empty-hint" class="text-muted small mb-2" style="display: none;">
            No sub departments are available for the selected department(s).
        </div>
    </div>
</div>

@push('scripts')
<script>
(function () {
    var subDeptConfig = {
        departmentField: @json($subDepartmentDepartmentField),
        subDepartmentsUrl: @json(route('accessible-projects-preview.sub-departments')),
        initialSelected: @json(array_values(array_map('intval', $subDepartmentSelected))),
        pendingInitial: @json($subDepartmentSelected !== []),
    };

    function getParentDepartmentIds() {
        var $field = $('#' + subDeptConfig.departmentField);
        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 initSubDepartmentSelect2() {
        var $sub = $('#sub_department_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 department(s) first, then sub departments',
            allowClear: true,
            closeOnSelect: false
        });
    }

    function rebuildSubDepartments(clearSelection) {
        var $sub = $('#sub_department_ids');
        var $hint = $('#sub-departments-empty-hint');
        if (!$sub.length) {
            return;
        }

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

        $.getJSON(subDeptConfig.subDepartmentsUrl, { department_ids: deptIds })
            .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 (subDeptConfig.pendingInitial && subDeptConfig.initialSelected.length) {
                    previous = subDeptConfig.initialSelected.map(String);
                    subDeptConfig.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);
                }

                initSubDepartmentSelect2();
                $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 departments. Please try again.').show();
            });
    }

    function bindDepartmentChange() {
        var $field = $('#' + subDeptConfig.departmentField);
        if (!$field.length) {
            return;
        }
        $field.on('change select2:select select2:unselect', function () {
            subDeptConfig.pendingInitial = false;
            rebuildSubDepartments(true);
        });
    }

    $(document).ready(function () {
        bindDepartmentChange();
        $('#sub_department_ids').on('change select2:select select2:unselect', function () {
            $(document).trigger('accessible-projects:reload');
        });
        if (getParentDepartmentIds().length > 0) {
            rebuildSubDepartments(false);
        } else {
            initSubDepartmentSelect2();
        }
    });
})();
</script>
@endpush