@extends('layout.super-admin-two')

@section('title', 'Edit User')

@section('content')
    <div class="page-header">
        <div>
            <h1>Edit User</h1>
            <p class="text-muted">Update user information and permissions</p>
        </div>
    </div>

    <div style="display: none;">        
        <input type="hidden" id="currentUserId" value="{{ $user->user_id ?? '' }}">
        <input type="hidden" id="currentProfileId" value="{{ $user->profile_id ?? '' }}">
        <input type="hidden" id="currentRegionId" value="{{ $user->region ?? '' }}">
        <input type="hidden" id="currentDivisionId" value="{{ $user->division ?? '' }}">
        <input type="hidden" id="currentDistrictId" value="{{ $user->district ?? '' }}">
        <input type="hidden" id="currentSchoolId" value="{{ $user->station_id ?? '' }}">
        <input type="hidden" id="currentAuthorityId" value="{{ $user->authority_id ?? '' }}">
        <input type="hidden" id="currentUserTypeName" value="{{ $user->user_type_name ?? '' }}">
        <input type="hidden" id="currentAccountStatusName" value="{{ $user->user_status_name ?? '' }}">
    </div>

    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle-fill me-1 text-success"></i>  
            <span class="text-success">{{ session('success') }}</span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    {{-- Error Messages --}}
    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h5 class="alert-heading">
                <i class="bi bi-exclamation-circle"></i> Please fix the following errors:
            </h5>
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-4">
        <div class="col-lg-8">            
            <div class="card shadow-none border">
                <div class="card-header text-primary border-bottom" style="background-color: #E8F0FF;">
                    <i class="bi bi-info-circle me-1"></i> 
                    <span>User Information</span>                    
                </div>

                <div class="card-body">
                    <form action="/sa-usermgmt/{{ $user->user_id }}" method="POST">
                        @csrf
                        @method('PUT')

                        {{-- Username --}}
                        <div class="mb-4">
                            <label for="username" class="form-label fw-bold">
                                <i class="bi bi-person me-1"></i> Username
                            </label>

                            <div class="d-flex align-items-end gap-2">
                                <div class="flex-grow-1">
                                    <input type="text"
                                        class="form-control @error('username') is-invalid @enderror"
                                        id="username"
                                        name="username"
                                        value="{{ old('username', $user->username) }}">

                                    @error('username')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div>
                                    <button type="button" class="btn btn-outline-primary">
                                        <i class="bi bi-key me-1"></i>
                                        Reset Password
                                    </button>
                                </div>
                            </div>
                        </div>

                        {{-- First Name --}}
                        <div class="mb-4">
                            <label for="first_name" class="form-label fw-bold">
                                <i class="bi bi-person me-1"></i> First Name
                            </label>
                            <input type="text" 
                                   class="form-control  @error('first_name') is-invalid @enderror" 
                                   id="first_name" 
                                   name="first_name" 
                                   value="{{ old('first_name', $user->first_name) }}"
                                   >
                            @error('first_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Last Name --}}
                        <div class="mb-4">
                            <label for="last_name" class="form-label fw-bold">
                                <i class="bi bi-person me-1"></i> Last Name
                            </label>
                            <input type="text" 
                                   class="form-control  @error('last_name') is-invalid @enderror" 
                                   id="last_name" 
                                   name="last_name" 
                                   value="{{ old('last_name', $user->last_name) }}"
                                   >
                            @error('last_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Email --}}
                        <div class="mb-4">
                            <label for="email" class="form-label fw-bold">
                                <i class="bi bi-envelope me-1"></i> Email
                            </label>
                            <input type="email" 
                                   class="form-control  @error('email') is-invalid @enderror" 
                                   id="email" 
                                   name="email" 
                                   value="{{ old('email', $user->user_contact_email) }}"
                                   >
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Contact Number --}}
                        <div class="mb-4">
                            <label for="contact_number" class="form-label fw-bold">
                                <i class="bi bi-telephone me-1"></i> Mobile Number
                            </label>
                            <input type="text" 
                                   class="form-control  @error('contact_number') is-invalid @enderror" 
                                   id="contact_number" 
                                   name="contact_number" 
                                   value="{{ old('contact_number', $user->user_contact_mobile) }}"
                                   >
                            @error('contact_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <hr class="my-4">

                        <div class="mb-4">
                            <label for="region_id" class="form-label fw-bold">
                                <i class="bi bi-geo-alt me-1"></i>Region 
                            </label>
                            <select 
                                class="form-select  @error('region_id') is-invalid @enderror" 
                                id="region_id" 
                                name="region_id">
                                <option value="">Select Region</option>
                            </select>
                            <div id="regionSkeleton" class="skeleton d-none"></div>
                            @error('region_id')
                                <div class="invalid-feedback d-block">
                                    <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                                </div> 
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label for="division_id" class="form-label fw-bold">
                                <i class="bi bi-diagram-2 me-1"></i>Division 
                            </label>
                            <select 
                                class="form-select  @error('division_id') is-invalid @enderror" 
                                id="division_id" 
                                name="division_id"                                    
                            >
                                <option value="">Select Division</option>                                
                            </select>
                            <div id="divisionSkeleton" class="skeleton d-none"></div>
                            @error('division_id')
                                <div class="invalid-feedback d-block">
                                    <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label for="district_id" class="form-label fw-bold">
                                <i class="bi bi-diagram-2 me-1"></i>District 
                            </label>
                            <select 
                                class="form-select  @error('district_id') is-invalid @enderror" 
                                id="district_id" 
                                name="district_id"                                    
                            >
                                <option value="">Select District</option>                                    
                            </select>
                            <div id="districtSkeleton" class="skeleton d-none"></div>
                            @error('district_id')
                                <div class="invalid-feedback d-block">
                                    <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="mb-4">
                            <label for="school_id" class="form-label fw-bold">
                                <i class="bi bi-diagram-2 me-1"></i>School 
                            </label>
                            <select 
                                class="form-select  @error('school_id') is-invalid @enderror" 
                                id="school_id" 
                                name="school_id"                                    
                            >
                                <option value="">Select School</option>                                    
                            </select>
                            <div id="schoolSkeleton" class="skeleton d-none"></div>
                            @error('school_id')
                                <div class="invalid-feedback d-block">
                                    <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                                </div>
                            @enderror
                        </div>

                        <hr class="my-4">

                        {{-- User Type --}}
                        <div class="mb-4">
                            <label for="Authority Type" class="form-label fw-bold">
                                <i class="bi bi-person me-1"></i> Authority Type
                            </label>
                            <select class="form-select @error('user_type_name') is-invalid @enderror" 
                                    id="authorityType" 
                                    name="authorityType" 
                                    >                                
                            </select>
                            <div id="authorityTypeSkeleton" class="skeleton d-none"></div>  
                            @error('authorityType')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- User Type --}}
                        <div class="mb-4">
                            <label for="user_type_name" class="form-label fw-bold">
                                <i class="bi bi-shield-lock me-1"></i> User Type
                            </label>
                            <select class="form-select @error('user_type_name') is-invalid @enderror" 
                                    id="user_type_name" 
                                    name="user_type_name" 
                                    >                                
                            </select>
                            <div id="userTypeSkeleton" class="skeleton d-none"></div>                        
                            @error('user_type_name')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- User Status --}}
                        <div class="mb-4">
                            <label for="user_status_name" class="form-label fw-bold">
                                <i class="bi bi-toggle2-on me-1"></i> Account Status
                            </label>
                            <select class="form-select @error('user_status_name') is-invalid @enderror" 
                                    id="user_status_name" 
                                    name="user_status_name" 
                                    >
                                <option value="">Select</option>                                
                            </select>    
                            <div id="userStatusSkeleton" class="skeleton d-none"></div>                        
                            @error('user_status_name')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Action Buttons --}}
                        <div class="d-flex gap-2 pt-3 justify-content-end border-top">
                            <a href="/sa-usermgmt" class="btn btn-outline-secondary btn-sm">
                                <i class="bi bi-arrow-left"></i> Cancel
                            </a>
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="bi bi-check-circle"></i> Update User
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Sidebar --}}
        <div class="col-lg-4">  
            {{-- User Preview Card --}}
            <div class="card border shadow-none mb-4">
                <div class="card-header text-primary border-bottom" style="background-color: #E8F0FF;">                    
                    <i class="bi bi-person-circle me-1"></i>
                    <span>User Preview</span>                    
                </div>
                <div class="card-body text-center">
                    <div class="avatar-preview" style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 2rem; margin: 0 auto 1rem;">
                       {{ substr($user->first_name ?? 'U', 0, 1) }}{{ substr($user->last_name ?? '', 0, 1) }}
                    </div>
                    <h6 class="fw-bold">
                        <span id="previewName">{{ $user->first_name }} {{ $user->last_name }}</span>
                    </h6>
                    <p class="text-muted small mb-0">{{ $user->user_contact_email }}</p>
                </div>
            </div>

            {{-- Current Settings Card --}}
            <div class="card shadow-none border">
                <div class="card-header text-primary border-bottom" style="background-color: #E8F0FF;">                    
                    <i class="bi bi-sliders me-1"></i>
                    <span>Current Settings</span>                    
                </div>
                <div class="card-body">
                    <div class="mb-3 pb-3 border-bottom">
                        <h6 class="text-muted small fw-bold text-uppercase mb-2">User Type</h6>
                        <span class="badge bg-primary bg-opacity-10 text-primary border border-primary rounded-pill text-capitalize">
                            {{ $user->user_type_name ?? 'N/A' }}
                        </span>
                    </div>

                    <div class="mb-3 pb-3 border-bottom">
                        <h6 class="text-muted small fw-bold text-uppercase mb-2">Status</h6>
                         @php
                            $statusColors = [
                                'active' => 'success',
                                'deleted' => 'danger',
                                'pending' => 'warning',
                                'inactive' => 'secondary',
                            ];
                            $statusColor = $statusColors[strtolower($user->user_status_name)] ?? 'secondary';
                        @endphp
                        <span class="badge bg-{{ $statusColor }} rounded-pill">
                           {{ $user->user_status_name }}
                        </span>
                    </div>

                    <div>
                        <h6 class="text-muted small fw-bold text-uppercase mb-2">Contact Email</h6>
                        <p class="small mb-0">{{ $user->user_contact_email }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{--  Reset Modal --}}
    <div class="modal fade" id="resetModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Reset Password</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to reset password <strong id="resetUserName">{{ $user->first_name }} {{ $user->last_name }}</strong>?</p>
                    <div id="resetLoadingSpinner" style="display: none;" class="text-center">
                        <div class="spinner-border text-info" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="text-muted mt-2">Processing...</p>
                    </div>
                    <div id="resetErrorMessage" style="display: none;" class="alert alert-danger"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal" id="btnResetCancel">Cancel</button>
                    <button type="button" class="btn btn-info btn-sm" id="btnConfirmReset">
                        Reset
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        /* User Type Badges */
        .badge-user-type-admin {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .badge-user-type-encoder {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }

        .badge-user-type-user {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
        }

        .badge-user-type-super-admin {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: white;
        }       
        
        /* Skeleton loading styles */
        .skeleton {
            background: linear-gradient(90deg, #e9ecef 0%, #f8f9fa 50%, #e9ecef 100%);
            background-size: 200% 100%;
            animation: shimmer 2s infinite;
            border-radius: 0.375rem;
            height: 2.75rem; /* Same as form-select-lg */
        }
 
        @keyframes shimmer {
            0% {
                background-position: 200% 0;
            }
            100% {
                background-position: -200% 0;
            }
        }
 
        /* Make sure select is visible when not loading */
        .form-select:not(.d-none) {
            display: block;
        }
    </style>
@endpush

@push('scripts')
    <script>
        const currentUserId = document.getElementById('currentUserId')?.value || '';
        const currentProfileId  = document.getElementById('currentProfileId')?.value || '';
        const currentRegionId = document.getElementById('currentRegionId')?.value || '';
        const currentDivisionId = document.getElementById('currentDivisionId')?.value || '';
        const currentDistrictId = document.getElementById('currentDistrictId')?.value || '';
        const currentSchoolId = document.getElementById('currentSchoolId')?.value || '';
        const currentAuthorityId = document.getElementById('currentAuthorityId')?.value || '';
        const currentUserTypeName = document.getElementById('currentUserTypeName')?.value || '';
        const currentAccountStatusName = document.getElementById('currentAccountStatusName')?.value || '';

        const regionSelect = document.getElementById('region_id');
        const divisionSelect = document.getElementById('division_id');
        const districtSelect = document.getElementById('district_id');
        const schoolSelect = document.getElementById('school_id');

        const authoritySelect = document.getElementById('authorityType');
        const userTypeSelect = document.getElementById('user_type_name');
        const userStatusSelect = document.getElementById('user_status_name');    

        const resetPasswordBtn = document.querySelector('button[type="button"]:has(.bi-key)');
        const resetModal = new bootstrap.Modal(document.getElementById('resetModal'));
        const btnConfirmReset = document.getElementById('btnConfirmReset');
        const btnResetCancel = document.getElementById('btnResetCancel');
        const resetLoadingSpinner = document.getElementById('resetLoadingSpinner');

        if (resetPasswordBtn) {
            resetPasswordBtn.addEventListener('click', function() {
                resetModal.show();
            });
        }

        document.getElementById('btnConfirmReset').addEventListener('click', function(e) {
            e.preventDefault();
            
            const spinner = document.getElementById('resetLoadingSpinner');
            const errorDiv = document.getElementById('resetErrorMessage');
            const button = this;
            
            // Show spinner, hide error
            spinner.style.display = 'block';
            errorDiv.style.display = 'none';
            button.disabled = true;
            
            // Submit via AJAX
            fetch('{{ route("verify-email") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    depedEmail: '{{ $user->user_contact_email }}'
                })
            })
            .then(response => response.json())
            .then(data => {
                spinner.style.display = 'none';
                
                if (data.success) {
                    // Open Outlook in new tab
                    window.open(data.redirectUrl, '_blank');
                    // Close modal
                    bootstrap.Modal.getInstance(document.getElementById('resetModal')).hide();
                } else {
                    // Show error
                    errorDiv.textContent = data.message;
                    errorDiv.style.display = 'block';
                    button.disabled = false;
                }
            })
            .catch(error => {
                spinner.style.display = 'none';
                errorDiv.textContent = 'An error occurred. Please try again.';
                errorDiv.style.display = 'block';
                button.disabled = false;
                console.error('Error:', error);
            });
        });

        // Helper function to show error state
        function setErrorState(select, skeleton, message = 'Error loading') {
            if (!select || !skeleton) return;
            select.classList.remove('d-none');
            skeleton.classList.add('d-none');
            select.innerHTML = `<option value="">${message}</option>`;
        }

        // Helper function to set loading state
        function setLoadingState(select, skeleton, isLoading = true) {
            if (!select || !skeleton) return;
            
            if (isLoading) {
                select.classList.add('d-none');
                skeleton.classList.remove('d-none');
            } else {
                select.classList.remove('d-none');
                skeleton.classList.add('d-none');
            }
        }

        function loadAuthorityTypes() {
            const select = document.getElementById('authorityType');
            const skeleton = document.getElementById('authorityTypeSkeleton');

            setLoadingState(select, skeleton, true);

            fetch('/sa/api/station-types')
                .then(response => response.json())
                .then(data => {
                    select.innerHTML = '<option value="">Select Authority Type</option>';
                    data.forEach(type => {
                        const option = document.createElement('option');
                        option.value = type.id;
                        option.textContent =
                            type.name.charAt(0).toUpperCase() +
                            type.name.slice(1);
                        select.appendChild(option);
                    });

                    if (currentAuthorityId) {
                        select.value = currentAuthorityId;                        
                    }                    
                    
                })
                .catch(error => {
                    console.error('Error loading authority types:', error);
                    setErrorState(select, skeleton, 'Error loading authority types');
                })
                .finally(() => {
                    // NOW this waits for BOTH fetches
                    setLoadingState(select, skeleton, false);
                });
        }

        function loadUserTypes(stationTypeId) {
            const select = document.getElementById('user_type_name');
            const skeleton = document.getElementById('userTypeSkeleton');
            setLoadingState(select, skeleton, true);

            fetch(`/sa/api/user-type-by-station-type/${stationTypeId}`)
                .then(response => response.json())
                .then(data => {
                    select.innerHTML = '<option value="">Select User Type</option>';
                    data.forEach(type => {
                        const option = document.createElement('option');
                        option.value = type.id;
                        option.textContent = type.name.charAt(0).toUpperCase() + type.name.slice(1);
                        select.appendChild(option);
                    });

                    if (currentUserTypeName) {
                        const currentTypeOption = Array.from(select.options).find(opt => opt.textContent.toLowerCase() === currentUserTypeName.toLowerCase());
                        if (currentTypeOption) {
                            currentTypeOption.selected = true;
                        }                    
                    }
                })
                .catch(error => {
                    console.error('Error fetching user types:', error);
                    setErrorState(select, skeleton, 'Error loading user types');
                })
                .finally(() => {
                    setLoadingState(select, skeleton, false);
                });
        }

        function loadUserStatus() {
            const select = document.getElementById('user_status_name');
            const skeleton = document.getElementById('userStatusSkeleton');
            setLoadingState(select, skeleton, true);

            fetch('/sa/api/user-status')
                .then(response => response.json())
                .then(data => {
                    select.innerHTML = '<option value="">Select Status</option>';
                    data.forEach(status => {
                        const option = document.createElement('option');
                        option.value = status.id;
                        option.textContent = status.name.charAt(0).toUpperCase() + status.name.slice(1);
                        select.appendChild(option);
                    });
                    if (currentAccountStatusName) {
                        select.value = Array.from(select.options).find(opt => opt.textContent.toLowerCase() === currentAccountStatusName.toLowerCase())?.value || '';
                    }
                })
                .catch(error => {
                    console.error('Error fetching user statuses:', error);
                    setErrorState(select, skeleton, 'Error loading account status');
                })
                .finally(() => {
                    setLoadingState(select, skeleton, false);
                });
        }
        
        // Helper function to select first non-empty option
        function selectFirstAvailable(select) {
            if (!select) return;
            
            const options = select.querySelectorAll('option');
            if (options.length > 1) {                
                select.value = options[0].value;
            }
        }

        // Fetch and load regions
        function loadRegions() {
            if (!regionSelect) return;
            
            setLoadingState(regionSelect, regionSkeleton, true);
            
            fetch('/sa/api/regions')
                .then(response => {
                    if (!response.ok) throw new Error('Failed to fetch regions');
                    return response.json();
                })
                .then(data => {
                    const regions = Array.isArray(data) ? data : (data.data || []);
                    
                    regionSelect.innerHTML = '<option value="">Select Region</option>';
                    
                    regions.forEach(region => {
                        const option = document.createElement('option');
                        option.value = region.id;
                        option.textContent = region.region_name;
                        regionSelect.appendChild(option);
                    });

                    setLoadingState(regionSelect, regionSkeleton, false);
                    
                    if (currentRegionId) {                        
                        regionSelect.value = currentRegionId;
                        if (divisionSelect) {
                            loadDivisions(currentRegionId);
                        }
                    }
                })
                .catch(error => {
                    console.error('Error loading regions:', error);
                    setErrorState(regionSelect, regionSkeleton, 'Error loading regions');
                });
        }

        // Fetch and load divisions based on region
        function loadDivisions(regionId) {
            if (!divisionSelect) return;
            
            if (!regionId) {
                divisionSelect.innerHTML = '<option value="">Select Division</option>';
                setLoadingState(divisionSelect, divisionSkeleton, false);
                if (districtSelect) {
                    districtSelect.innerHTML = '<option value="">Select District</option>';
                    setLoadingState(districtSelect, districtSkeleton, false);
                }
                return;
            }

            setLoadingState(divisionSelect, divisionSkeleton, true);

            fetch(`/sa/api/divisions/${regionId}`)
                .then(response => {
                    if (!response.ok) throw new Error('Failed to fetch divisions');
                    return response.json();
                })
                .then(data => {
                    const divisions = Array.isArray(data) ? data : (data.data || []);
                    
                    divisionSelect.innerHTML = '<option value="">Select Division</option>';
                    
                    divisions.forEach(division => {
                        const option = document.createElement('option');
                        option.value = division.division_id;
                        option.textContent = division.division_name;
                        divisionSelect.appendChild(option);
                    });

                    setLoadingState(divisionSelect, divisionSkeleton, false);
                    
                    // Check if current division ID exists in new data
                    let divisionExists = false;
                    if (currentDivisionId) {
                        divisionExists = divisions.some(d => d.division_id == currentDivisionId);
                    }

                    if (divisionExists) {
                        // Current division still exists, select it
                        divisionSelect.value = currentDivisionId;
                        if (districtSelect) {
                            loadDistricts(currentDivisionId);
                        }
                    } else {
                        // Current division doesn't exist, select first available
                        selectFirstAvailable(divisionSelect);
                        if (districtSelect) {
                            const firstDivisionValue = divisionSelect.value;
                            if (firstDivisionValue) {
                                loadDistricts(firstDivisionValue);
                            } else {
                                districtSelect.innerHTML = '<option value="">Select District</option>';
                                setLoadingState(districtSelect, districtSkeleton, false);
                            }
                        }
                    }
                })
                .catch(error => {
                    console.error('Error loading divisions:', error);
                    setErrorState(divisionSelect, divisionSkeleton, 'Error loading divisions');
                });
        }

        // Fetch and load districts based on division
        function loadDistricts(divisionId) {
            if (!districtSelect) return;
            
            if (!divisionId) {
                districtSelect.innerHTML = '<option value="">Select District</option>';
                setLoadingState(districtSelect, districtSkeleton, false);
                return;
            }

            setLoadingState(districtSelect, districtSkeleton, true);

            fetch(`/sa/api/districts/${divisionId}`)
                .then(response => {
                    if (!response.ok) throw new Error('Failed to fetch districts');
                    return response.json();
                })
                .then(data => {
                    const districts = Array.isArray(data) ? data : (data.data || []);
                    
                    districtSelect.innerHTML = '<option value="">Select District</option>';
                    
                    districts.forEach(district => {
                        const option = document.createElement('option');
                        option.value = district.district_id;
                        option.textContent = district.district_name;
                        districtSelect.appendChild(option);
                    });

                    setLoadingState(districtSelect, districtSkeleton, false);
                    
                    // Check if current district ID exists in new data
                    let districtExists = false;
                    if (currentDistrictId) {
                        districtExists = districts.some(d => d.district_id == currentDistrictId);
                    }

                    if (districtExists) {
                        // Current district still exists, select it
                        districtSelect.value = currentDistrictId;
                        if(schoolSelect){
                            loadSchools(currentDistrictId);
                        }
                    } else {
                        // Current district doesn't exist, select first available
                        selectFirstAvailable(districtSelect);
                    }
                })
                .catch(error => {
                    console.error('Error loading districts:', error);
                    setErrorState(districtSelect, districtSkeleton, 'Error loading districts');
                });
        }

        function loadSchools(districtId) {
            if (!schoolSelect) return;
            
            if (!districtId) {
                schoolSelect.innerHTML = '<option value="">Select School</option>';
                setLoadingState(schoolSelect, schoolSkeleton, false);
                return;
            }

            setLoadingState(schoolSelect, schoolSkeleton, true);

            fetch(`/sa/api/schools/${districtId}`)
                .then(response => {
                    if (!response.ok) throw new Error('Failed to fetch schools');
                    return response.json();
                })
                .then(data => {
                    const schools = Array.isArray(data) ? data : (data.data || []);
                    
                    schoolSelect.innerHTML = '<option value="">Select School</option>';
                    
                    schools.forEach(school => {
                        const option = document.createElement('option');
                        option.value = school.id;  // ← matches query
                        option.textContent = school.station_name;  // ← matches query
                        schoolSelect.appendChild(option);
                    });

                    setLoadingState(schoolSelect, schoolSkeleton, false);
                    
                    // Check if current school ID exists in new data
                    let schoolExists = false;
                    if (currentSchoolId) {
                        schoolExists = schools.some(s => s.id == currentSchoolId);
                    }
                    
                    if (schoolExists) {
                        schoolSelect.value = currentSchoolId;
                    } else {
                        selectFirstAvailable(schoolSelect);
                    }                    
                })
                .catch(error => {
                    console.error('Error loading schools:', error);
                    setErrorState(schoolSelect, schoolSkeleton, 'Error loading schools');
                });
        }

        // Event listeners for manual changes
        if (regionSelect) {
            regionSelect.addEventListener('change', function() {
                if (divisionSelect) {
                    loadDivisions(this.value);
                }
                if (districtSelect) {
                    districtSelect.innerHTML = '<option value="">Select District</option>';
                    setLoadingState(districtSelect, districtSkeleton, false);
                }
                if (schoolSelect) {
                    schoolSelect.innerHTML = '<option value="">Select School</option>';
                    setLoadingState(schoolSelect, schoolSkeleton, false);
                }
            });
        }

        if (divisionSelect) {
            divisionSelect.addEventListener('change', function() {
                if (districtSelect) {
                    loadDistricts(this.value);
                }
                if (schoolSelect) {
                    schoolSelect.innerHTML = '<option value="">Select School</option>';
                    setLoadingState(schoolSelect, schoolSkeleton, false);
                }
            });
        }

        if (districtSelect) {
            districtSelect.addEventListener('change', function() {
                if (schoolSelect) {
                    loadSchools(this.value);
                }
            });
        }

        if (authoritySelect) {
            authoritySelect.addEventListener('change', function() {
                loadUserTypes(this.value);
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            loadRegions();
            loadAuthorityTypes();
            loadUserTypes(currentAuthorityId);
            loadUserStatus();            
        });

    </script>
@endpush