@php
    $scriptSelectedBuilding = old('gedung_id', $list->gedung_id ?? '');
    $scriptSelectedSet = old('parameter_set_id', $list->parameter_set_id ?? '');
    $scriptSelectedLines = $bulkProfile
        ? array_map('strval', (array) old('line_id', []))
        : [(string) old('line_id', $list->line_id ?? '')];
@endphp

@push('js')
    <script>
        $(document).ready(function() {
            const parameterSets = @json($parameter_set_options);
            const buildingOptions = @json($gedungs);
            const lineOptions = @json($lines);
            const initialBuilding = @json((string) $scriptSelectedBuilding);
            const initialSet = @json((string) $scriptSelectedSet);
            const initialLines = @json($scriptSelectedLines);
            const bulkProfile = @json($bulkProfile);

            function initializeParameterSets() {
                const setSelect = $('#parameter_set_id');
                const uniqueSets = new Map();
                parameterSets.forEach(item => uniqueSets.set(String(item.id), item.nama_parameter_set));
                setSelect.empty().append(new Option('Pilih Parameter Set', ''));
                uniqueSets.forEach((name, id) => {
                    setSelect.append(new Option(name, id, false, id === initialSet));
                });
                setSelect.val(initialSet).trigger('change.select2');
            }

            function syncLockedBuilding(isLocked) {
                $('#gedung_id_hidden').remove();
                const buildingSelect = $('#gedung_id');
                buildingSelect.prop('disabled', isLocked);
                if (isLocked && buildingSelect.val()) {
                    $('<input>', {
                        type: 'hidden',
                        id: 'gedung_id_hidden',
                        name: 'gedung_id',
                        value: buildingSelect.val()
                    }).insertAfter(buildingSelect);
                }
            }

            function rebuildBuildings(useInitialValue) {
                const selectedSet = String($('#parameter_set_id').val() || '');
                const allowedIds = [...new Set(parameterSets
                    .filter(item => String(item.id) === selectedSet)
                    .map(item => String(item.gedung_id)))];
                const buildingSelect = $('#gedung_id').empty();

                if (!selectedSet) {
                    buildingSelect.append(new Option('Pilih Parameter Set terlebih dahulu', ''));
                    syncLockedBuilding(true);
                    buildingSelect.trigger('change.select2');
                    rebuildLines(false);
                    return;
                }

                buildingSelect.append(new Option('Pilih Gedung', ''));
                buildingOptions
                    .filter(item => allowedIds.includes(String(item.id)))
                    .forEach(item => buildingSelect.append(new Option(item.nama_gedung, item.id)));

                let selectedBuilding = useInitialValue ? initialBuilding : '';
                if (!allowedIds.includes(String(selectedBuilding))) selectedBuilding = '';
                if (allowedIds.length === 1) selectedBuilding = allowedIds[0];
                buildingSelect.val(selectedBuilding);
                syncLockedBuilding(allowedIds.length === 1);
                buildingSelect.trigger('change.select2');
                rebuildLines(useInitialValue);
            }

            function rebuildLines(useInitialValue) {
                const buildingId = String($('#gedung_id').val() || '');
                const selectedLines = useInitialValue
                    ? initialLines.map(String)
                    : [];

                const lineSelect = $('#line_id');
                lineSelect.empty();
                if (!bulkProfile) {
                    lineSelect.append(new Option('Seluruh Line', ''));
                }
                lineOptions
                    .filter(item => String(item.id_gedung) === buildingId)
                    .forEach(item => {
                        lineSelect.append(new Option(
                            item.nama_line,
                            item.id,
                            false,
                            selectedLines.includes(String(item.id))
                        ));
                    });
                lineSelect.trigger('change.select2');
                updatePreview();
            }

            function updatePreview() {
                if (!bulkProfile) {
                    return;
                }

                const preview = $('#profile-preview').empty();
                const building = $('#gedung_id option:selected').text().trim();
                const setName = $('#parameter_set_id option:selected').text().trim();
                const lines = ($('#line_id').val() || []).map(String);
                const groups = ($('#item_group').val() || []).map(value => String(value).trim()).filter(Boolean);

                if (!$('#gedung_id').val() || !$('#parameter_set_id').val() || groups.length === 0) {
                    preview.append(
                        $('<span>').addClass('text-secondary text-sm')
                            .text('Lengkapi pilihan untuk melihat preview profile.')
                    );
                    return;
                }

                const lineNames = lines.length
                    ? lines.map(id => $('#line_id option[value=' + id + ']').text().trim())
                    : ['Seluruh Line'];

                lineNames.forEach(lineName => {
                    groups.forEach(group => {
                        preview.append(
                            $('<span>').addClass('badge bg-info text-dark px-3 py-2')
                                .text(lineName + ' Item ' + group)
                                .attr('title', building + ' - ' + setName)
                        );
                    });
                });
            }

            $('#parameter_set_id').on('change', function() {
                rebuildBuildings(false);
            });
            $('#gedung_id').on('change', function() {
                rebuildLines(false);
            });
            $('#line_id, #item_group').on('change', updatePreview);

            initializeParameterSets();
            rebuildBuildings(true);
            updatePreview();
        });
    </script>
@endpush