@extends('layout.layout')
@section('content')

<style>


    .shadow-dark {
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .info-label {
        font-weight: 600;
        color: #555;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    .info-value {
        color: #333;
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
        background: #f8f9fa;
        border-radius: 0.375rem;
        border-left: 3px solid #0071bd;
    }

    .logo-container {
        background: #f8f9fa;
        border: 3px dashed #dee2e6;
        border-radius: 0.5rem;
        padding: 2rem;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .logo-container:hover {
        border-color: #0071bd;
        background: #e3f2fd;
    }

    .logo-container i {
        font-size: 80px;
        color: #8b8b8b;
    }

    .section-card {
        border-left: 4px solid #0071bd;
        margin-bottom: 1.5rem;
    }

    .section-header {
        background: linear-gradient(135deg, #0071bd 0%, #005a94 100%);
        color: white;
        padding: 0.75rem 1rem;
        font-weight: 600;
        border-radius: 0.375rem 0.375rem 0 0;
        margin: -1rem -1rem 1rem -1rem;
    }

    .stat-card {
        text-align: center;
        padding: 1.5rem;
        background: white;
        border-radius: 0.5rem;
        border: 1px solid #e9ecef;
        transition: transform 0.2s;
    }

    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .stat-icon {
        font-size: 2.5rem;
        color: #0071bd;
        margin-bottom: 0.5rem;
    }

    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        color: #333;
    }

    .stat-label {
        font-size: 0.85rem;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .editbtn {
        background: #0071bd;
        color: white;
        border: none;
        padding: 0.5rem 1.5rem;
        border-radius: 0.375rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .editbtn:hover {
        background: #005a94;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,113,189,0.3);
    }

    .badge-custom {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
        font-weight: 500;
        border-radius: 20px;
    }
</style>
<style>
    .logo-container {
        background: #f8f9fa;
        border: 3px dashed #dee2e6;
        border-radius: 0.5rem;
        padding: 2rem;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .logo-container:hover {
        border-color: #0071bd;
        background: #e3f2fd;
    }

    .logo-container i {
        font-size: 80px;
        color: #8b8b8b;
    }

    .info-label {
        font-weight: 600;
        color: #555;
        font-size: 0.9rem;
        margin-bottom: 0.25rem;
    }

    .info-value {
        color: #333;
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
        background: #f8f9fa;
        border-radius: 0.375rem;
        border-left: 3px solid #0071bd;
        min-height: 2.5rem;
        display: flex;
        align-items: center;
    }

    .section-card {
        border-left: 4px solid #0071bd;
        margin-bottom: 1.5rem;
    }

    .section-header {
        background: linear-gradient(135deg, #0071bd 0%, #005a94 100%);
        color: white;
        padding: 0.75rem 1rem;
        font-weight: 600;
        border-radius: 0.375rem 0.375rem 0 0;
        margin: -1rem -1rem 1rem -1rem;
    }

    .editbtn {
        background: #0071bd;
        color: white;
        border: none;
        padding: 0.5rem 1.5rem;
        border-radius: 0.375rem;
        font-weight: 600;
        transition: all 0.3s ease;
    }

    .editbtn:hover {
        background: #005a94;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,113,189,0.3);
    }

    /* Skeleton Loading Styles */
    .skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s infinite;
        border-radius: 0.375rem;
    }

    @keyframes loading {
        0% {
            background-position: 200% 0;
        }
        100% {
            background-position: -200% 0;
        }
    }

    .skeleton-text {
        height: 1rem;
        margin-bottom: 0;
    }

    .skeleton-text.large {
        height: 1.5rem;
    }

    .skeleton-text.small {
        height: 0.75rem;
    }

    .skeleton-circle {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto 1rem;
    }

    .skeleton-btn {
        height: 38px;
        border-radius: 0.375rem;
    }

    /* Hide/Show based on loading state */
    .loading .actual-content {
        display: none !important;
    }

    .loading .skeleton {
        display: block !important;
    }

    .actual-content {
        display: block;
    }

    .skeleton {
        display: none;
    }
</style>

<div class="m-3">
    <div class="container-fluid my-2 mb-2 mt-4">
        <div class="card my-2 loading" id="profileCard">
            <!-- Header -->
            <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                <div class="shadow-dark border-radius-lg pt-3 pb-2" style="background-color: #0071bd; border-radius: 0.5rem;">
                    <h5 class="text-white text-capitalize ps-3 mb-0">
                        <i class="fas fa-school me-2"></i>{{ __('Manage School Profile') }}
                    </h5>
                </div>
            </div>

            <div class="row mx-2 mt-4 mb-2">
                <!-- Left Column (Logo and Quick Info) -->
                <div class="col-lg-3 mb-4">
                    <div class="sticky-top" style="top: 20px; z-index: 1">
                        <div class="logo-container mb-3" data-bs-toggle="modal" data-bs-target="#logoModal_sdo">
                                                        {{-- Skeleton --}}
                            <div class="skeleton skeleton-circle"></div>
                            {{-- Actual Content --}}
                            <div class="actual-content">
                                @if ($profileService->stationLogoPic && file_exists(public_path($imageLogoPath . $profileService->stationLogoPic)))
                                    <img src="{{ asset($imageLogoPath . $profileService->stationLogoPic) }}" alt="Logo Picture"
                                        class="logopic_" style="width:auto; height: 180px; background-color: white;">
                                @else
                                    <i class="fas fa-image mb-3"></i>
                                @endif
                            </div>

                            <p class="text-muted mb-0 small mt-2">{{ __('Click to change Logo Picture') }}</p>
                        </div>

                        <!-- Quick School Info Card -->
                        <div class="card border-0 shadow-sm">
                            <div class="card-body text-center">
                                {{-- Skeleton --}}
                                <div class="skeleton skeleton-text large mb-3 mx-auto" style="width: 80%;"></div>
                                <div class="skeleton skeleton-text small mb-2 mx-auto" style="width: 60%;"></div>
                                <div class="skeleton skeleton-text small mb-2 mx-auto" style="width: 70%;"></div>

                                {{-- Actual Content --}}
                                <h6 id='schoolNameL' class="fw-bold mb-2 actual-content" style="color: #0071bd;"></h6>
                                <p id='schoolLocationL' class="small text-muted mb-2 actual-content"></p>
                                <p id='schoolEmailL' class="small text-muted mb-2 actual-content"></p>
                                <hr class="my-2 actual-content">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column (Profile Details) -->
                <div class="col-lg-9">
                    {{-- Section description --}}
                    <p class="text-muted mb-2">{{ __('Manage your school profile, including contact details, location, and administrative information.') }}</p>
                    <!-- Basic Information -->
                    <x-sch-profile-section icon="info-circle" title="{{ __('Basic Information') }}">
                        <x-sch-profile-info-field
                            icon="school"
                            label="{{ __('School Name') }}"
                            id="schoolName"
                        />

                        <x-sch-profile-info-field
                            icon="id-card"
                            label="{{ __('School ID') }}"
                            id="beisId"
                            skeleton-width="50%"
                        />

                        <x-sch-profile-info-field
                            icon="envelope"
                            label="{{ __('Email Address') }}"
                            id="schoolEmail"
                            skeleton-width="80%"
                        />

                        <x-sch-profile-info-field
                            icon="phone"
                            label="{{ __('Contact Number') }}"
                            id="schoolMobileNumber"
                            skeleton-width="60%"
                        />
                    </x-sch-profile-section>

                    <!-- Location Details -->
                    <x-sch-profile-section icon="map" title="{{ __('Location Details') }}">

                        {{-- Administrative Coverage Label (Distrcit to regional office)--}}
                        <p class="text-muted" style="margin-bottom: 0;">{{ __('Administrative Offices') }}</p>
                        <x-sch-profile-info-field
                            icon="map-signs"
                            label="{{ __(key: 'Regional Office') }}"
                            id="schoolRegionalOffice"
                            skeleton-width="90%"
                            col-class="col-md-4"
                        />

                        <x-sch-profile-info-field
                            icon="layer-group"
                            label="{{ __('School Division Office') }}"
                            id="schoolDivision"
                            skeleton-width="85%"
                            col-class="col-md-4"
                        />

                        <x-sch-profile-info-field
                            icon="sitemap"
                            label="{{ __('District Office') }}"
                            id="schoolDistrict"
                            skeleton-width="70%"
                            col-class="col-md-4"
                        />

                        {{-- School Address Label --}}
                        <p class="text-muted" style="margin-bottom: 0;">{{ __('School Address') }}</p>
                        <x-sch-profile-info-field
                            icon="map-signs"
                            label="{{ __('Region') }}"
                            id="schoolRegionAddress"
                            skeleton-width="75%"
                            col-class="col-md-6"
                        />

                        <x-sch-profile-info-field
                            icon="city"
                            label="{{ __('Province') }}"
                            id="schoolProvince"
                            skeleton-width="75%"
                            col-class="col-md-6"
                        />

                        <x-sch-profile-info-field
                            icon="building"
                            label="{{ __('City/Municipality') }}"
                            id="schoolCityMun"
                            skeleton-width="80%"
                            col-class="col-md-6"
                        />

                        <x-sch-profile-info-field
                            icon="home"
                            label="{{ __('Barangay') }}"
                            id="schoolBarangay"
                            skeleton-width="65%"
                            col-class="col-md-6"
                        />

                        <x-sch-profile-info-field
                            icon="map-pin"
                            label="{{ __('Complete Address') }}"
                            id="schoolCompleteAddress"
                            col-class="col-12"
                        />
                    </x-sch-profile-section>

                    <!-- Administration -->
                    <x-sch-profile-section icon="user-shield" title="{{ __('Administration') }}">
                        <x-sch-profile-info-field
                            icon="user"
                            label="{{ __('School Principal') }}"
                            id="schoolPrincipal"
                        />

                        <x-sch-profile-info-field
                            icon="calendar"
                            label="{{ __('Year Established') }}"
                            id="yearEstablished"
                        />
                    </x-sch-profile-section>

                    @if (session('shortcode') == 'SPC')
                        <div class="card mt-4 d-flex justify-content-center align-items-center">
                            <form id="inventoryForm" class="row g-3 p-4">
                                <div class="col-auto">
                                    <input type="text" readonly class="form-control-plaintext" value="Pre-Inventory Count:">
                                </div>
                                <div class="col-auto">
                                    <input type="text" id="formattedInput" class="form-control">
                                    <input type="hidden" id="inputNumber" name="count">
                                </div>
                                <div class="col-auto">
                                    <button type="submit" class="editbtn">{{ __('Save') }}</button>
                                </div>
                            </form>
                        </div>

                        <script src="{{ asset('assets/js/pre-inventory.js') }}"></script>
                    @endif

                    <!-- Action Buttons -->
                    <div class="d-flex justify-content-end gap-2 mt-3">
                        <!-- <div class="skeleton skeleton-btn" style="width: 150px;"></div> -->
                        <div class="skeleton skeleton-btn mb-3" style="width: 180px;"></div>

                        <!-- <button class="btn btn-outline-primary actual-content">
                            <i class="fas fa-eye me-2"></i>View Full Profile
                        </button> -->
                        <!-- Update Button -->
                        <button class="btn btn-primary editbtn actual-content" id="openUpdateModalBtn">
                            <i class="fas fa-edit me-2"></i>{{ __('Update Profile') }}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid mt-3 mb-3">
        <div class="card px-4">
            <div class="row">
                <div class="col-md-6">
                    <div class="container mt-5">
                        <!-- Trigger/Button to Open Modal -->
                        <button type="button" class="btn btn-primary shadow-dark" data-bs-toggle="modal" data-bs-target="#addSchoolYearModal">
                            {{ __('Add School Year') }}
                        </button>
                    </div>
                </div>
            </div>

            <div class="container">
                <div class="d-flex justify-content-between align-items-center mb-4 mt-4">
                    <h3 class="text-capitalize mb-0">{{ __('School Population') }}</h2>
                        <div class="d-flex align-items-center">
                            <h5 class="mb-0 me-2">{{ __('Available SY') }}
                    </h3>
                    <select id="availSchoolYearDropdown" class="form-select w-auto">
                    </select>
                </div>
            </div>

            <table class="table table-bordered rounded-table shadow-sm">
                <thead class="table-light">
                    <tr>
                        <th>{{ __('Grade Level') }}</th>
                        <th>{{ __('Male') }}</th>
                        <th>{{ __('Female') }}</th>
                        <th>{{ __('Population') }}</th>
                        <th>{{ __('Action') }}</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- Data will be dynamically injected here by JS -->
                </tbody>
            </table>

            <style>
                .rounded-table {
                    border-radius: 12px;
                    overflow: hidden;
                }
            </style>
            <script src="{{ asset('assets/js/school-year-data.js') }}"></script>
        </div>

        <!-- Edit Modal -->
        @include('section.edit-population-modal')
        <script src="{{ asset('assets/js/edit-population.js') }}"></script>
    </div>

    <!-- Include Modal -->
    @include('modals.update-school-profile-modal') {{-- School profile modal for update --}}
    @include('modals.profile-logo-modal')  {{-- Logo modal for update --}}
    @include('section.add-sy-modal')  {{-- Add School Year Modal --}}

    <script src="{{ asset('assets/js/school-year.js') }}"></script>

    <!-- TODO: Move this script to a separate JS file -->
    <script>

        //image cropper
        document.addEventListener('DOMContentLoaded', function () {
            const imageToCrop = document.getElementById('image-to-crop-logo');
            const rotateLeftButton = document.getElementById('rotate-left-button-logo');
            const rotateRightButton = document.getElementById('rotate-right-button-logo');
            const croppedImageDataInput = document.getElementById('cropped-image-data-logo');
            const originalFileNameInput = document.getElementById('original-file-name-logo');
            const imagecropsect = document.getElementById('imagecropsect-logo');
            const uploadContainer = document.getElementById('upload-container-logo');
            const fileInput = document.getElementById('profpicid-logo');
            const buttonupl_profpic = document.getElementById('buttonupl_profpic-logo');
            let cropper;



            uploadContainer.addEventListener('click', function () {
                fileInput.click();
            });

            fileInput.addEventListener('change', function (event) {
                const files = event.target.files;
                if (files && files.length > 0) {
                    const file = files[0];

                    //file validation
                    const validExtensions = ['image/jpeg', 'image/png', 'image/jpg'];



                    if (!validExtensions.includes(file.type)) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Invalid File Type',
                            text: 'Please upload a file with .jpg, .jpeg, or .png',
                            confirmButtonColor: "#d33"
                        });
                        fileInput.value = ''; // Clear the input
                        return;
                    }

                    const tst = document.getElementById('imgtypschlogo');
                    if (tst) {
                        tst.style.display = 'none'; // Hide the image type message
                    }

                    originalFileNameInput.value = file.name;

                    const reader = new FileReader();

                    imagecropsect.style.display = 'flex';
                    buttonupl_profpic.style.display = 'block';
                    uploadContainer.style.padding = '10px';


                    reader.onload = function (e) {
                        imageToCrop.src = e.target.result;

                        if (cropper) {
                            cropper.destroy();
                        }

                        cropper = new Cropper(imageToCrop, {
                            aspectRatio: 1,
                            viewMode: 1,
                        });

                    };
                    reader.readAsDataURL(file);
                }
            });

            rotateLeftButton.addEventListener('click', function () {
                if (cropper) {
                    cropper.rotate(-90);
                }
            });

            rotateRightButton.addEventListener('click', function () {
                if (cropper) {
                    cropper.rotate(90);
                }
            });

            document.getElementById('logoPicForm').addEventListener('submit', function (event) {
                event.preventDefault();
                if (cropper) {
                    const canvas = cropper.getCroppedCanvas();

                    if (canvas) {
                        // Detect file type from original file name
                        const fileName = originalFileNameInput.value || 'cropped-image.jpg';
                        const isPng = fileName.toLowerCase().endsWith('.png');

                        canvas.toBlob(async function (blob) {
                            if (!blob) return;

                            // If PNG and under 100KB, upload directly
                            if (isPng && blob.size <= 100 * 1024) {
                                uploadImage(blob, fileName, 'image/png');
                            }
                            // If JPEG and under 100KB, upload directly
                            else if (!isPng && blob.size <= 100 * 1024) {
                                uploadImage(blob, fileName, 'image/jpeg');
                            } else {
                                // Create compression canvas
                                const compressionCanvas = document.createElement('canvas');
                                const ctx = compressionCanvas.getContext('2d');
                                compressionCanvas.width = canvas.width;
                                compressionCanvas.height = canvas.height;

                                // Only fill white for JPEG, not PNG
                                if (!isPng) {
                                    ctx.fillStyle = '#FFFFFF';
                                    ctx.fillRect(0, 0, compressionCanvas.width, compressionCanvas.height);
                                }
                                ctx.drawImage(canvas, 0, 0);

                                // Iterative compression function
                                async function compressIteratively(quality = 0.9) {
                                    return new Promise(resolve => {
                                        compressionCanvas.toBlob(async function (compressedBlob) {
                                            if (!compressedBlob) return resolve(null);

                                            if (compressedBlob.size <= 100 * 1024 || quality <= 0.1) {
                                                resolve(compressedBlob);
                                            } else {
                                                // Decrease quality and try again (only for JPEG)
                                                if (!isPng) {
                                                    resolve(await compressIteratively(quality - 0.05));
                                                } else {
                                                    resolve(compressedBlob); // For PNG, just return as is
                                                }
                                            }
                                        }, isPng ? 'image/png' : 'image/jpeg', isPng ? undefined : quality);
                                    });
                                }

                                const finalBlob = await compressIteratively();

                                if (finalBlob) {
                                    uploadImage(finalBlob, fileName, isPng ? 'image/png' : 'image/jpeg');
                                } else {
                                    console.error('Could not compress image below 100KB');
                                }
                            }
                        }, isPng ? 'image/png' : 'image/jpeg');
                    }
                }
            });

            function uploadImage(blob, fileName, mimeType) {
                const file = new File([blob], fileName, { type: mimeType });
                buttonupl_profpic.style.cursor = 'not-allowed';
                buttonupl_profpic.innerHTML = 'Saving...';
                buttonupl_profpic.disabled = true;

                const formData = new FormData();
                formData.append('original_file_name', fileName);
                formData.append('_token', '{{ csrf_token() }}');
                formData.append('image', file);

                fetch("{{ route('image.storeLogo') }}", {
                    method: 'POST',
                    body: formData,
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Image Uploaded',
                            text: 'Image Uploaded Successfully',
                            confirmButtonColor: "#3085d6",
                            showConfirmButton: true
                        }).then(() => {
                            location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Upload Failed',
                            text: 'Image Upload Failed',
                            confirmButtonColor: "#d33",
                            showConfirmButton: true,
                        });
                    }
                })
                .catch(error => {
                    console.error('Upload error:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Unexpected Error',
                        text: 'Something went wrong. Please try again.',
                        confirmButtonColor: "#d33",
                        showConfirmButton: true,
                    });
                });
            }
        });
    </script>

    <script>
        $(document).ready(function() {
            // Helper function to reset dropdown with proper encoding
            function resetDropdown(dropdown, placeholder) {
                dropdown.empty().append(`<option value="" selected disabled>${placeholder}</option>`);
            }

            // Function to find option by text with proper encoding handling
            function findOptionValue(dropdown, text) {
                const options = dropdown.find('option');
                let foundValue = null;

                // Normalize input text once
                const normalizedText = text.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();

                options.each(function() {
                    const optionText = $(this).text().normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();

                    // Match if equal OR if one contains the other
                if (optionText === normalizedText ||
                    optionText.includes(normalizedText) ||
                    normalizedText.includes(optionText)) {
                    foundValue = $(this).val();
                    return false; // break loop
                }
        });

        return foundValue;
            }

            // Main function to load division profile with encoding support
            async function loadDivisionProfile() {
                const divisionId = $('#division_id').val();
                if (!divisionId) return;

                try {
                    const response = await fetch(`{{ url('/division-profile') }}/${divisionId}`);
                    const data = await response.json();

                    // Set simple fields
                    $('#division_name').val(data.division_name || '');
                    $('#address').val(data.address || '');
                    $('#email_station').val(data.email || '');
                    $('#contact_number').val(data.contact_number || '');
                    $('#geoloc').val(data.geoloc || '');

                    // Process location dropdowns
                    if (data.city_region) {
                        await processLocationDropdowns(data);
                    }
                } catch (error) {
                    console.error('Error loading division profile:', error);
                }
            }

            // Process all location dropdowns with encoding support
            async function processLocationDropdowns(profileData) {
                const regionDropdown = $('#city_region');
                const provinceDropdown = $('#city_prov');
                const munDropdown = $('#city_mun');
                const brgyDropdown = $('#city_brgy');

                // 1. Set region
                const regionValue = findOptionValue(regionDropdown, profileData.city_region);
                if (regionValue) {
                    regionDropdown.val(regionValue).trigger('change');
                    await waitForOptions(provinceDropdown);

                    // 2. Set province
                    if (profileData.city_prov) {
                        const provinceValue = findOptionValue(provinceDropdown, profileData.city_prov);
                        if (provinceValue) {
                            provinceDropdown.val(provinceValue).trigger('change');
                            await waitForOptions(munDropdown);

                            // 3. Set municipality
                            if (profileData.city_mun) {
                                const munValue = findOptionValue(munDropdown, profileData.city_mun);
                                if (munValue) {
                                    munDropdown.val(munValue).trigger('change');
                                    await waitForOptions(brgyDropdown);

                                    // 4. Set barangay
                                    if (profileData.city_brgy) {
                                        const brgyValue = findOptionValue(brgyDropdown, profileData.city_brgy);
                                        if (brgyValue) {
                                            brgyDropdown.val(brgyValue);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            // Wait for dropdown options to load
            function waitForOptions(dropdown, timeout = 3000) {
                return new Promise((resolve) => {
                    const start = Date.now();
                    const check = setInterval(() => {
                        if (dropdown.find('option').length > 1 || Date.now() - start > timeout) {
                            clearInterval(check);
                            resolve();
                        }
                    }, 100);
                });
            }

            // Initialize the form
            async function initializeForm() {
                // First load regions with proper content-type header
                try {
                    const response = await $.ajax({
                        url: '{{ route("get-regions-geolevel") }}',
                        method: 'GET',
                        dataType: 'json',
                        beforeSend: function(xhr) {
                            xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                        }
                    });

                    const regionDropdown = $('#city_region');
                    resetDropdown(regionDropdown, 'Select a Region');

                    if (response && Array.isArray(response)) {
                        response.forEach(region => {
                            // Ensure proper encoding when appending
                            const option = new Option(region.name, region.id);
                            regionDropdown.append(option);
                        });

                        await loadDivisionProfile();
                    }
                } catch (error) {
                    alert('Error initializing form:', error);
                }
            }

            // Change handlers with encoding support
            $('#city_region').on('change', async function() {
                const regionId = $(this).val();
                const provinceDropdown = $('#city_prov');
                resetDropdown(provinceDropdown, 'Select a Province');
                resetDropdown($('#city_mun'), 'Select a City/Municipality');
                resetDropdown($('#city_brgy'), 'Select a Barangay');

                if (!regionId) return;

                await $.ajax({
                    url: '{{ route("get-province-geolevel") }}',
                    method: 'GET',
                    dataType: 'json',
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                    },
                    data: {
                        region_id: regionId
                    },
                    success: function(response) {
                        if (response && Array.isArray(response)) {
                            response.forEach(province => {
                                const option = new Option(province.name, province.id);
                                provinceDropdown.append(option);
                            });
                        }
                    }
                });
            });

            // Similar handlers for province and municipality...
            $('#city_prov').on('change', async function() {
                const provinceId = $(this).val();
                const munDropdown = $('#city_mun');
                resetDropdown(munDropdown, 'Select a City/Municipality');
                resetDropdown($('#city_brgy'), 'Select a Barangay');

                if (!provinceId) return;

                await $.ajax({
                    url: '{{ route("get-municipal-geolevel") }}',
                    method: 'GET',
                    dataType: 'json',
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
                    },
                    data: {
                        province_id: provinceId
                    },
                    success: function(response) {
                        if (response && Array.isArray(response)) {
                            response.forEach(mun => {
                                const option = new Option(mun.name, mun.id);
                                munDropdown.append(option);
                            });
                        }
                    }
                });
            });

            // Enhanced barangay change handler with loading state
            $('#city_mun').on('change', async function() {
                const munId = $(this).val();
                const brgyDropdown = $('#city_brgy');
                const loadingElement = $('#barangay_loading');

                resetDropdown(brgyDropdown, 'Select a Barangay');
                $('#barangay_error').hide();

                if (!munId) {
                    brgyDropdown.prop('disabled', true);
                    validateForm();
                    return;
                }

                brgyDropdown.prop('disabled', true);
                loadingElement.show();

                try {
                    const response = await $.ajax({
                        url: '{{ route("get-brgy-geolevel") }}',
                        method: 'GET',
                        dataType: 'json',
                        data: {
                            mun_id: munId
                        }
                    });

                    if (response && Array.isArray(response)) {
                        response.forEach(brgy => {
                            const option = new Option(brgy.name, brgy.id);
                            brgyDropdown.append(option);
                        });

                        brgyDropdown.prop('disabled', false);

                        // If there's only one barangay, select it automatically
                        if (response.length === 1) {
                            brgyDropdown.val(response[0].id).trigger('change');
                        }
                    }
                } catch (error) {
                    console.error('Error loading barangays:', error);
                    $('#barangay_error').show().text('Failed to load barangays. Please try again.');
                } finally {
                    loadingElement.hide();
                    validateForm();
                }
            });

            // Real-time validation for barangay
            $('#city_brgy').on('change blur', function() {
                validateBarangay();
                validateForm();
            }); // Start the initialization
            initializeForm();
        });

        $(document).ready(function() {
            // Set up CSRF token for all AJAX requests
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $("#school_update").on("click", function(e) {
                e.preventDefault(); // Prevent default form submit

                const form = $("#updateForm");
                const formData = form.serialize();
                const actionUrl = form.attr("action");

                Swal.fire({
                    title: 'Are you sure?',
                    text: "Are you sure you want to update this station?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, update it!',
                    cancelButtonText: 'Cancel'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Show loading immediately after confirmation
                        Swal.fire({
                            title: 'Updating...',
                            text: 'Please wait while updating your station.',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });

                        $.post(actionUrl, formData)
                            .done(function(response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Update Successful',
                                    text: response.message
                                }).then(() => {
                                    $('#updateDivisionModal').modal('hide'); // Hide modal
                                    location.reload(); // Reload after modal hide
                                });
                            })
                            .fail(function(xhr) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: "Error updating station: " + xhr.responseText
                            });
                        });
                    }
                });
            });
        });
    </script>
</div>

@endsection

@push('scripts')
    {{-- Pass Laravel data to JavaScript --}}
    <script>
        window.CONFIG = {
            csrf: "{{ csrf_token() }}",
            stationId: "{{ session('station_id') }}",
            userId: "{{ auth()->id() ?? '' }}",
            routes: {
                getRegionalOffices: "{{ route('get.ref.regional-offices') }}",
                getRegions: "{{ url('/api/regions') }}",
                getProvinces: "{{ route('get-province-geolevel') }}",
                getDivisions: "{{ route('divisions.by_region') }}",
                getDistricts: "{{ route('districts.by_division') }}",
                getMunicipalities: "{{ route('get-municipal-geolevel') }}",
                getBarangays: "{{ route('get-brgy-geolevel') }}"
            }
        };
    </script>

    {{-- Page-level module --}}
    <script type="module" src="{{ asset('assets/js/pages/school-profile.js') }}"></script>

    {{-- Inline module for modal --}}
    <script type="module">
        import UpdateSchoolProfileModal from "{{ asset('assets/js/components/update-school-profile-modal.js') }}";

        document
            .getElementById('openUpdateModalBtn')
            ?.addEventListener('click', () => {
                UpdateSchoolProfileModal.openModal();
            });
    </script>
@endpush