@include('pages.generate-reports.learning-resource-reports.lr-res-nonprint.lr-res-nonprint-form')
<!--
<script>
    $(document).ready(function() {

        // Fetch and populate Regions dropdown
        $.ajax({
            url: '{{ route("get-regions") }}',
            method: 'GET',
            success: function(response) {
                const dropdown = $('#region_non_print_select');
                dropdown.empty();
                dropdown.append('<option value="" selected disabled>Select a Region</option>');
                dropdown.append('<option value="AR">All Regions</option>');

                response.forEach(region => {
                    dropdown.append(`<option value="${region.id}">${region.station_name}</option>`);
                });
            },
            error: function(xhr) {}
        });

        // Fetch and populate Division dropdown based on selected Region
        $('#region_non_print_select').on('change', function() {
            const regionId = $(this).val();
            const divisionDropdown = $('#division_nonprint_select_central');

            divisionDropdown.empty();
            if (!regionId) {
                divisionDropdown.append('<option value="" selected disabled>Select a Division</option>');
                return;
            }

            $.ajax({
                url: '{{ route("get-central-divisions") }}',
                method: 'GET',
                data: {
                    region_id: regionId
                },
                success: function(response) {
                    divisionDropdown.append('<option value="" selected disabled>Select a Division</option>');
                    divisionDropdown.append('<option value="AD">All Divisions</option>');

                    response.forEach(division => {
                        divisionDropdown.append(`<option value="${division.id}">${division.station_name}</option>`);
                    });
                },
                error: function(xhr) {}
            });
        });

        // Fetch and populate District dropdown based on selected Division
        $('#division_nonprint_select_central').on('change', function() {
            const divisionId = $(this).val();

            const districtDropdown = $('#district_nonprint_select_central');

            districtDropdown.empty();
            if (!divisionId) {
                districtDropdown.append('<option value="" selected disabled>Select a District</option>');
                return;
            }

            $.ajax({
                url: '{{ route("get-central-districts") }}',
                method: 'GET',
                data: {
                    division_id: divisionId
                },
                success: function(response) {
                    districtDropdown.append('<option value="" selected disabled>Select a District</option>');
                    districtDropdown.append('<option value="AD">All District</option>');

                    response.forEach(district => {
                        districtDropdown.append(`<option value="${district.id}">${district.station_name}</option>`);
                    });

                    console.log('Districts loaded for Division ID:', divisionId, response);
                },
                error: function(xhr) {}
            });
        });

        // Fetch and populate Schools dropdown based on selected District
        $('#district_nonprint_select_central').on('change', function() {
            const districtId = $(this).val();
            console.log('Selected District ID:', districtId); // Log selected district ID

            const schoolDropdown = $('#school_nonprint_select_central');

            schoolDropdown.empty();
            if (!districtId) {
                schoolDropdown.append('<option value="" selected disabled>Select a School</option>');
                return;
            }

            $.ajax({
                url: '{{ route("get-central-schools") }}',
                method: 'GET',
                data: {
                    district_id: districtId
                },
                success: function(response) {
                    schoolDropdown.append('<option value="" selected disabled>Select School</option>');
                    schoolDropdown.append('<option value="AS">All Schools</option>');

                    response.forEach(school => {
                        // ✅ Corrected: Ensure each school has a proper `value` attribute
                        schoolDropdown.append(
                            `<option value="${school.school_id}">${school.beis_id} - ${school.school_name}</option>`
                        );
                    });
                },
                error: function(xhr) {}
            });
        });

        // Fetch and populate Division dropdown
        $.ajax({
            url: '{{ route("get-divisions") }}',
            method: 'GET',
            success: function(response) {
                const dropdown = $('#division_nonprint_select');
                dropdown.empty();
                dropdown.append('<option value="" selected disabled>Select a Division</option>');
                dropdown.append('<option value="AD">All Divisions</option>');

                response.forEach(division => {
                    dropdown.append(`<option value="${division.id}">${division.station_name}</option>`);
                });
            },
            error: function(xhr) {
                console.error('Error fetching divisions:', xhr.responseText);
            }
        });

        // Fetch and populate District dropdown
        $.ajax({
            url: '{{ route("get-districts") }}',
            method: 'GET',
            success: function(response) {

                const dropdown = $('#district_nonprint');
                dropdown.empty();
                dropdown.append('<option value="" selected disabled>Select a District</option>');
                dropdown.append('<option value="AD">All Districts</option>');

                response.forEach(district => {
                    dropdown.append(`<option value="${district.id}">${district.station_name}</option>`);
                });
            },
            error: function(xhr) {
                console.error('Error fetching districts:', xhr.responseText);
            }
        });

        // Fetch and populate Schools based on selected district
        $('#district_nonprint').on('change', function() {
            const districtId = $(this).val();

            const schoolsDropdown = $('#station_id_nonprint');
            schoolsDropdown.empty();

            if (!districtId) {
                schoolsDropdown.append('<option disabled selected>Select School</option>');
                return;
            }

            $.ajax({
                url: '{{ route("get-schools") }}',
                method: 'GET',
                data: {
                    district_id: districtId
                },
                success: function(response) {

                    schoolsDropdown.append('<option value="" selected disabled>Select School</option>');
                    schoolsDropdown.append('<option value="AS">All Schools</option>');

                    response.forEach(school => {
                        schoolsDropdown.append(`<option value="${school.id}">${school.beis_id} - ${school.school_name}</option>`);
                    });
                },
                error: function(xhr) {
                    console.error('Error fetching schools:', xhr.responseText);
                }
            });
        });

        // Fetch and populate District School dropdown
        $.ajax({
            url: '{{ route("get-district-sch") }}',
            method: 'GET',
            success: function(response) {
                const districtSchoolsdropdown = $('#school_nonprint_select');
                districtSchoolsdropdown.empty();
                districtSchoolsdropdown.append('<option value="" selected disabled>Select a School</option>');
                districtSchoolsdropdown.append('<option value="AD">All Schools</option>');

                response.forEach(school => {
                    districtSchoolsdropdown.append(`<option value="${school.school_id}">${school.beis_id} - ${school.school_name}</option>`);
                });
            },
            error: function(xhr) {}
        });

        // Fetch types
        $.ajax({
            url: '{{ route("get-reportTypes") }}',
            method: 'GET',
            success: function(response) {
                const schNonTypes = $('#sch_type_name_nonprint');
                const coNonTypes = $('#co_type_name_non_print');
                const rgNonTypes = $('#rg_type_name_nonprint');
                const divNonTypes = $('#type_name_nonprint');
                const disNonTypes = $('#dis_type_name_nonprint');
                response.forEach(types => {
                    schNonTypes.append(`<option value="${types.shortcode}">${types.type_name}</option>`);
                    coNonTypes.append(`<option value="${types.shortcode}">${types.type_name}</option>`);
                    rgNonTypes.append(`<option value="${types.shortcode}">${types.type_name}</option>`);
                    divNonTypes.append(`<option value="${types.shortcode}">${types.type_name}</option>`);
                    disNonTypes.append(`<option value="${types.shortcode}">${types.type_name}</option>`);
                });
            },
            error: function(xhr) {}
        });

        // Fetch and populate subjects and grade levels
        $.ajax({
            url: '/subject-grade-level',
            method: 'GET',
            success: function(response) {
                const subjects = response.subjects;
                const gradeLevels = ['K', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];

                let tableRows = '';
                subjects.forEach(subject => {
                    let row = `<tr><td>${subject.SubjectTitle}</td>`;
                    gradeLevels.forEach(grade => {
                        const gradeData = subject.GradeLevels[grade] ? `<input type="checkbox" class="grade-checkbox" name="subject_area[]" value="${subject.GradeLevels[grade]}" />` : '';
                        row += `<td style="text-align: center;">${gradeData}</td>`;
                    });
                    row += '</tr>';
                    tableRows += row;
                });

                $('#np_subjects_table').html(tableRows);
            },
            error: function() {
                console.error('Failed to fetch subject and grade level data.');
            }
        });

        // Select/Deselect all checkboxes when "Select All" is toggled
        $(document).on('change', '#select_all_non', function() {
            if ($(this).prop('checked')) {
                $('.grade-checkbox').prop('checked', true);
                $('#subject_grade_level_np').val(JSON.stringify(['All']));
                console.log('Select All checked: All subjects selected');
                console.log('Value of subject_grade_level_np:', $('#subject_grade_level_np').val());
            } else {
                $('.grade-checkbox').prop('checked', false);
                $('#subject_grade_level_np').val(JSON.stringify([]));
                console.log('Select All unchecked: No subjects selected');
                console.log('Value of subject_grade_level_np:', $('#subject_grade_level_np').val());
            }
        });

        // Update hidden input with selected subject and grade level IDs
        $('#np_subjects_table').on('change', 'input[type="checkbox"]', function() {
            let selectedSubjects = [];
            $(".grade-checkbox:checked").each(function() {
                selectedSubjects.push($(this).val());
            });

            // If all checkboxes are checked, set the value to ["All"]
            if ($('.grade-checkbox:checked').length === $('.grade-checkbox').length) {
                $('#subject_grade_level_np').val(JSON.stringify(['All']));
                $('#select_all_non').prop('checked', true);
            } else {
                $('#subject_grade_level_np').val(JSON.stringify(selectedSubjects));
                $('#select_all_non').prop('checked', false);
            }

            console.log('Selected subjects updated:', selectedSubjects);
            console.log('Value of subject_grade_level_np:', $('#subject_grade_level_np').val());
        });

        // non-print preview
        $(document).ready(function() {
            let table; // Store DataTable instance globally

            function initializeDataTable() {
                if (table) {
                    table.destroy(); // Destroy existing DataTable instance
                }

                table = $('#previewTable').DataTable({
                    pageLength: 10,
                    lengthMenu: [10, 25, 50, 100],
                    paging: true,
                    searching: false,
                    info: true,
                    destroy: true
                });
            }

            function fetchNonPrintReport(page = 1, limit = 10) {
                const formData = $('#reportNpForm').serialize() + `&page=${page}&limit=${limit}`;

                Swal.fire({
                    title: 'Retrieving Data...',
                    text: 'Please wait while we fetch the report data.',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading(),
                });

                $.ajax({
                    url: '{{ route("report.non.preview") }}',
                    method: 'GET',
                    data: formData,
                    success: function(response) {
                        Swal.close();

                        const {
                            headers,
                            rows,
                            totalRecords,
                            totalPages,
                            totalQty
                        } = response;
                        const thead = $('#previewTable thead').empty();
                        const tbody = $('#previewTable tbody').empty();

                        // Populate headers
                        let headerRow = '<tr>' + headers.map(header => `<th>${header}</th>`).join('') + '</tr>';
                        thead.append(headerRow);

                        // Populate data rows
                        if (rows && rows.length > 0) {
                            rows.forEach(row => {
                                let rowHtml = '<tr>' +
                                    row.map(cell => {
                                        const cellContent = (cell === null || cell === undefined || cell === '') ?
                                            'No data available' :
                                            cell;
                                        return `<td>${cellContent}</td>`;
                                    }).join('') +
                                    '</tr>';
                                tbody.append(rowHtml);
                            });

                            // Update total Learning Resources in footer
                            $('#totalLrsLabel').text(`Total Learning Resources Availability: ${totalQty || 0}`);

                            // Show modal and initialize DataTable
                            $('#previewModal').modal('show');
                            initializeDataTable();

                            // Update pagination
                            updatePagination(page, totalPages, totalRecords);
                        } else {
                            // Reset total Learning Resources label if no data
                            $('#totalLrsLabel').text('Total Learning Resources Availability: 0');
                            Swal.fire({
                                icon: 'info',
                                title: 'No Data Available',
                                text: 'No data found for the selected options. Please select again.',
                                confirmButtonColor: '#3085d6',
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.close();
                        // Reset total Learning Resources label on error
                        $('#totalLrsLabel').text('Total Learning Resources Availability: 0');
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'An error occurred while fetching the data. Please try again.',
                            confirmButtonColor: '#3085d6',
                        });
                        console.error(xhr.responseText);
                    }
                });
            }

            function updatePagination(currentPage, totalPages, totalRecords) {
                const pagination = $('#pagination').empty();
                const maxButtons = 5;
                let startPage = Math.max(1, currentPage - Math.floor(maxButtons / 2));
                let endPage = Math.min(totalPages, startPage + maxButtons - 1);

                if (endPage - startPage + 1 < maxButtons) {
                    startPage = Math.max(1, endPage - maxButtons + 1);
                }

                // Previous button
                if (currentPage > 1) {
                    pagination.append(`<button class="page-btn" data-page="${currentPage - 1}">« Prev</button>`);
                }

                // Page numbers
                for (let i = startPage; i <= endPage; i++) {
                    const activeClass = i === currentPage ? 'active' : '';
                    pagination.append(`<button class="page-btn ${activeClass}" data-page="${i}">${i}</button>`);
                }

                // Next button
                if (currentPage < totalPages) {
                    pagination.append(`<button class="page-btn" data-page="${currentPage + 1}">Next »</button>`);
                }

                // Total records info
                pagination.append(`<span class="total-records">Total Records: ${totalRecords}</span>`);

                // Attach click handlers
                $('.page-btn').on('click', function() {
                    const page = $(this).data('page');
                    fetchNonPrintReport(page);
                });
            }

            $('#previewNonPrintReportBtn').on('click', function(e) {
                e.preventDefault();

                const isFormValid = $('#reportNpForm')[0].checkValidity();
                if (!isFormValid) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Missing Fields',
                        text: 'All fields must be filled out to preview the report.',
                        confirmButtonColor: '#3085d6',
                    });
                    return;
                }

                fetchNonPrintReport();
            });

            // Clean up DataTable and reset total Learning Resources label when modal is closed
            $('#previewModal').on('hidden.bs.modal', function() {
                if (table) {
                    table.destroy();
                    table = null;
                }
                $('#previewTable thead').empty();
                $('#previewTable tbody').empty();
                $('#totalLrsLabel').text('Total Learning Resources Availability: 0');
            });
        });
        // Reset form
        document.getElementById('resetFormNonButton').addEventListener('click', function() {
            document.getElementById('reportNpForm').reset();
        });
    });

    //subject grade level ids
    document.addEventListener('DOMContentLoaded', async () => {
        // State management
        let selectedSubjectGradeIds = [];
        const tabsWithData = new Set();
        let activeTab = null;

        // Tab configuration (unchanged)
        const tabConfig = {
            1: {
                tabId: 'early-grade-tab-np',
                containerId: 'subject-gradelevel-container-1-np',
                contentId: 'early-grade-np'
            },
            2: {
                tabId: 'intermediate-tab-np',
                containerId: 'subject-gradelevel-container-2-np',
                contentId: 'intermediate-np'
            },
            3: {
                tabId: 'junior-high-tab-np',
                containerId: 'subject-gradelevel-container-3-np',
                contentId: 'junior-high-np'
            },
            4: {
                tabId: 'senior-high-tab-np',
                containerId: 'subject-gradelevel-container-4-np',
                contentId: 'senior-high-np'
            }
        };

        // Initialize tab elements (unchanged)
        const tabs = Object.fromEntries(
            Object.entries(tabConfig).map(([key, {
                tabId,
                containerId,
                contentId
            }]) => [
                key,
                {
                    tab: document.getElementById(tabId),
                    container: document.getElementById(containerId),
                    content: document.getElementById(contentId),
                    hasData: false
                }
            ])
        );

        // Utility functions (unchanged)
        const formatGradeLevel = level => level === 'K' ? 'K' : !isNaN(level) ? `G${level}` : level;
        const sortGradeLevels = levels => levels.sort((a, b) =>
            a === 'K' ? -1 : b === 'K' ? 1 : parseInt(a) - parseInt(b)
        );

        const activateTab = keystage => {
            Object.values(tabs).forEach(({
                tab,
                content
            }) => {
                tab?.classList.remove('active');
                content?.classList.remove('show', 'active');
            });
            const {
                tab,
                content
            } = tabs[keystage];
            if (tab && content) {
                tab.classList.add('active');
                content.classList.add('show', 'active');
                activeTab = keystage;
            }
        };

        const hideAllTabs = () => {
            Object.values(tabs).forEach(({
                tab,
                content
            }) => {
                if (tab) tab.style.display = 'none';
                if (content) content.classList.remove('show', 'active');
            });
        };

        // Modified loadSubjectGradeLevels function with optimized checkbox handling
        const loadSubjectGradeLevels = async (keystage, forceReload = false) => {
            const {
                container,
                tab
            } = tabs[keystage];
            if (!container || !tab) return;

            if (tabs[keystage].hasData && !forceReload) return;

            try {
                const response = await fetch(`/subject-grade-levels?keystage=${keystage}`);
                if (!response.ok) throw new Error('Network response not ok');

                const {
                    subjects,
                    error
                } = await response.json();
                if (error) throw new Error(error);

                const subjectNames = Object.keys(subjects);
                if (!subjectNames.length) {
                    tabs[keystage].hasData = false;
                    tabsWithData.delete(keystage);
                    container.innerHTML = '';
                    return;
                }

                tabsWithData.add(keystage);
                tabs[keystage].hasData = true;

                const gradeLevels = sortGradeLevels(Object.keys(subjects[subjectNames[0]]));

                // Add compressed styling for grade level columns
                const compressedStyle = `
                    <style>
                        .subject-grade-table th:nth-child(n+3),
                        .subject-grade-table td:nth-child(n+3) {
                            padding: 0.25rem 0.25rem;
                            width: 60px;
                            max-width: 60px;
                            min-width: 60px;
                            white-space: nowrap;
                            text-align: center;
                        }
                        .subject-grade-table th:nth-child(n+3) input[type="checkbox"],
                        .subject-grade-table td:nth-child(n+3) input[type="checkbox"] {
                            margin: 0 auto;
                        }
                        .subject-grade-table th:nth-child(2),
                        .subject-grade-table td:nth-child(2) {
                            width: 80px;
                            max-width: 80px;
                            min-width: 80px;
                        }
                        .subject-grade-table th:first-child,
                        .subject-grade-table td:first-child {
                            min-width: 200px;
                        }
                    </style>
                `;

                container.innerHTML = `
        <div class="subject-grade-table-container">
            <table class="subject-grade-table table-bordered table-hover">
                <thead class="table-light">
                    <tr>
                        <th class="text-center">Subject Name</th>
                        <th class="text-center all-column">
                            <input type="checkbox" class="select-all-column-checkbox">All
                        </th>
                        ${gradeLevels.map(level => `
                            <th class="text-center">
                                <input type="checkbox" class="select-all-checkbox" data-grade="${level}">
                                ${formatGradeLevel(level)}
                            </th>
                        `).join('')}
                    </tr>
                </thead>
                <tbody>
                    ${subjectNames.sort().map(subject => `
                        <tr>
                            <td class="text-start">${subject}</td>
                            <td class="text-center"></td>
                            ${gradeLevels.map(level => subjects[subject][level] ? `
                                <td class="text-center">
                                    <input type="checkbox"
                                        class="subject-grade-checkbox"
                                        data-id="${subjects[subject][level]}"
                                        data-grade="${level}"
                                        ${selectedSubjectGradeIds.includes(subjects[subject][level]) ? 'checked' : ''}>
                                </td>
                            ` : '<td></td>').join('')}
                        </tr>
                    `).join('')}
                </tbody>
            </table>
        </div>
    `;

                // Function to update "All" checkboxes based on current state
                const updateAllCheckboxes = () => {
                    // Update column-wide "All" checkbox
                    const allCheckboxes = container.querySelectorAll('.subject-grade-checkbox:checked');
                    const selectAllColumn = container.querySelector('.select-all-column-checkbox');
                    if (selectAllColumn) {
                        selectAllColumn.checked = allCheckboxes.length === container.querySelectorAll('.subject-grade-checkbox').length;
                    }

                    // Update grade-level "All" checkboxes
                    gradeLevels.forEach(level => {
                        const gradeCheckboxes = container.querySelectorAll(`.subject-grade-checkbox[data-grade="${level}"]`);
                        const checkedGradeCheckboxes = container.querySelectorAll(`.subject-grade-checkbox[data-grade="${level}"]:checked`);
                        const gradeAllCheckbox = container.querySelector(`.select-all-checkbox[data-grade="${level}"]`);

                        if (gradeAllCheckbox) {
                            gradeAllCheckbox.checked = checkedGradeCheckboxes.length === gradeCheckboxes.length;
                        }
                    });
                };

                // Individual checkbox event listeners
                container.querySelectorAll('.subject-grade-checkbox').forEach(checkbox => {
                    checkbox.addEventListener('change', () => {
                        updateSelectedSubjectGrades(checkbox);
                        updateAllCheckboxes();
                    });
                });

                // Grade-level "All" checkbox event listeners
                container.querySelectorAll('.select-all-checkbox').forEach(selectAll => {
                    selectAll.addEventListener('change', () => {
                        const gradeLevel = selectAll.dataset.grade;
                        const checkboxes = container.querySelectorAll(`.subject-grade-checkbox[data-grade="${gradeLevel}"]`);

                        checkboxes.forEach(cb => {
                            cb.checked = selectAll.checked;
                            updateSelectedSubjectGrades(cb);
                        });

                        // Update column-wide "All" checkbox
                        updateAllCheckboxes();
                    });
                });

                // Tab-wide "All" checkbox event listener
                const selectAllColumn = container.querySelector('.select-all-column-checkbox');
                if (selectAllColumn) {
                    selectAllColumn.addEventListener('change', () => {
                        const allCheckboxes = container.querySelectorAll('.subject-grade-checkbox');
                        allCheckboxes.forEach(cb => {
                            cb.checked = selectAllColumn.checked;
                            updateSelectedSubjectGrades(cb);
                        });

                        // Update all grade-level "All" checkboxes
                        container.querySelectorAll('.select-all-checkbox').forEach(cb => {
                            cb.checked = selectAllColumn.checked;
                        });
                    });
                }

                // Initialize "All" checkboxes state
                updateAllCheckboxes();

            } catch (error) {
                console.error('Error:', error);
                container.innerHTML = `<p class="text-danger">Error: ${error.message}</p>`;
                tabs[keystage].hasData = false;
                tabsWithData.delete(keystage);
            }
        };

        // Update selected subjects (unchanged)
        const updateSelectedSubjectGrades = checkbox => {
            const id = checkbox.dataset.id;
            const wasChecked = selectedSubjectGradeIds.includes(id);

            selectedSubjectGradeIds = checkbox.checked ? [...new Set([...selectedSubjectGradeIds, id])] :
                selectedSubjectGradeIds.filter(x => x !== id);

            const inputField = document.getElementById('subject_grade_level_np');
            if (inputField) inputField.value = JSON.stringify(selectedSubjectGradeIds);
        };

        // Reset and reload tabs (unchanged)
        const resetAndReloadTabs = async () => {
            const tabContentArea = document.getElementById('subjectGradeLevelContent_np');
            if (!tabContentArea) return;

            hideAllTabs();
            tabContentArea.classList.add('d-none');
            tabsWithData.clear();
            activeTab = null;

            await Promise.all(Object.keys(tabs).map(keystage => loadSubjectGradeLevels(keystage, true)));

            if (tabsWithData.size === 0) {
                tabContentArea.innerHTML = '<p class="text-muted">No subjects available.</p>';
                tabContentArea.classList.remove('d-none');
                return;
            }

            Object.entries(tabs).forEach(([keystage, {
                tab
            }]) => {
                if (tab) tab.style.display = tabsWithData.has(keystage) ? '' : 'none';
            });

            const firstTabWithData = [...tabsWithData][0];
            if (firstTabWithData) {
                activateTab(firstTabWithData);
                tabContentArea.classList.remove('d-none');
            }
        };

        // Initialize interface (unchanged)
        const initialize = async () => {
            await resetAndReloadTabs();

            Object.entries(tabs).forEach(([keystage, {
                tab
            }]) => {
                tab?.addEventListener('click', () => {
                    if (!tabs[keystage].hasData) {
                        loadSubjectGradeLevels(keystage, true);
                    }
                    if (tabsWithData.has(keystage)) {
                        activateTab(keystage);
                    }
                });
            });

            const resetButton = document.querySelector('button[title="Reset Form"]');
            resetButton?.addEventListener('click', async () => {
                selectedSubjectGradeIds = [];
                const inputField = document.getElementById('subject_grade_level_np');
                if (inputField) inputField.value = '[]';
                console.log('Form reset. Selected IDs cleared.');
                await resetAndReloadTabs();
            });

            const gradeLevelSelect = document.querySelector('select[name="grade_level"]');
            gradeLevelSelect?.addEventListener('change', async () => {
                console.log('Grade level changed. Reloading tabs...');
                await resetAndReloadTabs();
            });
        };

        // Initialize with existing values (unchanged)
        window.initializeWithExistingValues = existingIds => {
            if (!Array.isArray(existingIds)) return;
            selectedSubjectGradeIds = existingIds;
            const inputField = document.getElementById('subject_grade_level_np');
            if (inputField) inputField.value = JSON.stringify(existingIds);
            console.log('Initialized with existing Subject Grade Level IDs:', existingIds);
            resetAndReloadTabs();
        };

        await initialize();
    });
</script>
 -->