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

@section('title', 'Edit Organizational Unit')

@section('content')
    {{-- Page Header --}}
    <div class="page-header">
        <div>
            <h1> Edit {{ $stationName->station_name ?? 'Unit' }}</h1>
            <p class="text-muted">Update organizational unit information</p>
        </div>
        <span class="badge badge-level-{{ $stationType->authority_level }} rounded-pill" style="font-size: 0.9rem; padding: 0.5rem 1rem;">
            {{ $stationType->shortcode }}
        </span>
    </div>


    <div style="display: none;">                    
        <input type="hidden" id="currentRegionId" value="{{ $parentRegionId ?? '' }}">
        <input type="hidden" id="currentDivisionId" value="{{ $parentDivisionId ?? '' }}">
        <input type="hidden" id="currentDistrictId" value="{{ $parentDistrictId ?? '' }}">
    </div>

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

    @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="bi bi-exclamation-circle me-2"></i>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row g-4">
        {{-- Main Form Card --}}
        <div class="col-lg-8">
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white border-bottom">
                    <i class="bi bi-pencil me-1"></i> Edit Unit Details
                </div>
                <div class="card-body">
                    @if ($errors->any())
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="bi bi-exclamation-circle me-2"></i>
                            <strong>Validation Errors:</strong>
                            <ul class="mb-0 mt-2">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form action="{{ route('admin.organizational-units.update', $station->id) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <!-- Station Type (Read-only) -->
                        <div class="mb-4">
                            <div class="info-group">
                                <h6 class="text-muted small fw-bold text-uppercase mb-2">Station Type</h6>
                                <p class="mb-0" style="font-size: 1.1rem;">
                                    <i class="bi bi-shield-check me-2"></i>
                                    <strong>{{ $stationType->shortcode }}</strong> — {{ $stationType->name }}
                                </p>
                                <small class="text-muted d-block mt-2">
                                    <i class="bi bi-info-circle me-1"></i>
                                    Station type cannot be changed after creation
                                </small>
                            </div>
                        </div>

                        <hr class="my-4">

                        <!-- Station Name -->
                        <div class="mb-4">
                            <label for="station_name" class="form-label fw-bold">
                                <i class="bi bi-building me-2"></i>Station Name
                            </label>
                            <input 
                                type="text" 
                                class="form-control @error('station_name') is-invalid @enderror" 
                                id="station_name" 
                                name="station_name" 
                                value="{{ old('station_name', $stationName->station_name) }}"
                                placeholder="Enter full station name"
                                required
                            >
                            @error('station_name')
                                <div class="invalid-feedback d-block">
                                    <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                                </div>
                            @enderror
                        </div>

                        <!-- Short Name -->
                        <div class="mb-4">
                            <label for="shortname" class="form-label fw-bold">
                                <i class="bi bi-code-square me-2"></i>Short Name
                            </label>
                            <input 
                                type="text" 
                                class="form-control @error('shortname') is-invalid @enderror" 
                                id="shortname" 
                                name="shortname" 
                                value="{{ old('shortname', $stationName->shortname) }}"
                                placeholder="e.g., SDO-NCR"
                                maxlength="50"
                                required
                            >
                            <small class="text-muted d-block mt-2">Max 50 characters. Use abbreviations for easy identification.</small>
                            @error('shortname')
                                <div class="invalid-feedback d-block">
                                    <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                                </div>
                            @enderror
                        </div>



                        <!-- Region (For SDO) -->
                        @if ($stationType->shortcode === 'SDO')
                            {{-- Organizational Context --}}
                            <hr class="my-4">
                            <h6 class="mb-3 text-primary fw-bold">
                                <i class="bi bi-diagram-2 me-2"></i>Organizational Context
                            </h6>
                            <div class="mb-4">
                                <label for="region_id" class="form-label fw-bold">
                                    <i class="bi bi-geo-alt me-2"></i>Region
                                </label>
                                <div id="regionSkeleton" class="skeleton d-none"></div>
                                <select 
                                    class="form-select form-select @error('region_id') is-invalid @enderror" 
                                    id="region_id" 
                                    name="region_id"
                                    required
                                >                                
                                <option value="">Select Region </option>                                   
                                
                            </select>
                                
                                @error('region_id')
                                    <div class="invalid-feedback d-block">
                                        <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                                    </div> 
                                @enderror
                            </div>
                        @endif

                        <!-- Division (For DIST) -->
                        @if ($stationType->shortcode === 'DIST')
                             <div class="mb-4">
                                <label for="region_id" class="form-label fw-bold">
                                    <i class="bi bi-geo-alt me-2"></i>Region 
                                </label>
                                <select 
                                    class="form-select  @error('region_id') is-invalid @enderror" 
                                    id="region_id" 
                                    name="region_id"
                                    required
                                >
                                    <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-2"></i>Division
                                </label>
                                <select 
                                    class="form-select  @error('division_id') is-invalid @enderror" 
                                    id="division_id" 
                                    name="division_id"
                                    required
                                >
                                    <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>
                        @endif

                        <!-- District (For Schools) -->
                        @if ($stationType->shortcode === 'SCH')
                            <div class="mb-4">
                                <label for="region_id" class="form-label fw-bold">
                                    <i class="bi bi-geo-alt me-2"></i>Region 
                                </label>
                                <select 
                                    class="form-select  @error('region_id') is-invalid @enderror" 
                                    id="region_id" 
                                    name="region_id"
                                    required
                                >
                                    <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-2"></i>Division 
                                </label>
                                <select 
                                    class="form-select  @error('division_id') is-invalid @enderror" 
                                    id="division_id" 
                                    name="division_id"
                                    required
                                >
                                    <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-2"></i>District 
                                </label>
                                <select 
                                    class="form-select  @error('district_id') is-invalid @enderror" 
                                    id="district_id" 
                                    name="district_id"
                                    required
                                >
                                    <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>

                            <!-- School-specific fields -->
                            <hr class="my-4">
                            <h6 class="mb-3 text-primary fw-bold">
                                <i class="bi bi-mortarboard me-2"></i>School Information
                            </h6>

                            <div class="mb-4">
                                <label for="beis" class="form-label fw-bold">
                                    <i class="bi bi-hash me-2"></i>School ID (BEIS)
                                </label>
                               <input 
                                    type="text" 
                                    class="form-control @error('beis') is-invalid @enderror" 
                                    id="beis" 
                                    name="beis" 
                                    value="{{ old('beis', $beis?->beis_id) }}"
                                    placeholder="e.g., 300001"
                                    required
                                >
                                <small class="text-muted">Basic Education Information System ID</small>
                                @error('beis')
                                    <div class="invalid-feedback d-block">
                                        <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="schoolType" class="form-label fw-bold">
                                        <i class="bi bi-bookmark me-2"></i>School Type
                                    </label>
                                    <select 
                                        class="form-select @error('schoolType') is-invalid @enderror" 
                                        id="schoolType" 
                                        name="schoolType"
                                    >
                                        <option value="">-- Select Type --</option>
                                        @foreach ($schoolTypes as $type)
                                            <option 
                                                value="{{ $type->id }}"
                                                {{ old('schoolType', $beis?->schooltype_id) == $type->id ? 'selected' : '' }}
                                            >
                                                {{ $type->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('schoolType')
                                        <div class="invalid-feedback d-block">
                                            <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>

                                <div class="col-md-6">
                                    <label for="circularClass" class="form-label fw-bold">
                                        <i class="bi bi-layers me-2"></i>Circular Class
                                    </label>
                                    <select 
                                        class="form-select @error('circularClass') is-invalid @enderror" 
                                        id="circularClass" 
                                        name="circularClass"
                                    >
                                        <option value="">-- Select Class --</option>
                                        @foreach ($circularClasses as $class)
                                            <option 
                                                value="{{ $class->id }}"
                                                {{ old('circularClass', $beis?->circular_class_id) == $class->id ? 'selected' : '' }}
                                            >
                                                {{ $class->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('circularClass')
                                        <div class="invalid-feedback d-block">
                                            <i class="bi bi-exclamation-triangle me-1"></i>{{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                        @endif

                        <!-- Action Buttons -->
                        <div class="d-flex justify-content-between gap-2 mt-5">
                            <div>
                                <a href="{{ route('admin.organizational-units') }}" class="btn btn-outline-secondary btn-sm ms-auto">
                                    <i class="bi bi-arrow-left"></i> Back to List
                                </a>
                            </div>
                            <div class="gap-2 d-flex">
                 
                                <a href="{{ url()->previous() }}" class="btn btn-outline-secondary btn-sm">
                                    <i class="bi bi-x-circle me-2"></i>Cancel
                                </a>
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="bi bi-check-circle me-2"></i>Save Changes
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

       
    </div>

@endsection

@section('styles')
    <style>
        /* Level badges */
        .badge-level-1 {
            background: linear-gradient(135deg, #6f42c1 0%, #7c52d4 100%);
            color: white;
        }

        .badge-level-2 {
            background: linear-gradient(135deg, #0d6efd 0%, #0d47a1 100%);
            color: white;
        }

        .badge-level-3 {
            background: linear-gradient(135deg, #198754 0%, #0f5e30 100%);
            color: white;
        }

        .badge-level-4 {
            background: linear-gradient(135deg, #fd7e14 0%, #ff9800 100%);
            color: white;
        }

        .badge-level-5 {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
            color: white;
        }

        .badge-level-6 {
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
            color: white;
        }

        /* Info groups */
        .info-group {
            padding: 1rem;
            background-color: #f8f9fa;
            border-radius: 0.5rem;
            border-left: 4px solid #0d6efd;
        }

        /* Page header custom */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 2rem;
        }

        /* 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>
@endsection

@section('scripts')
    <script>
        // Get elements safely
        const regionSelect = document.getElementById('region_id');
        const divisionSelect = document.getElementById('division_id');
        const districtSelect = document.getElementById('district_id');
        
        // Get skeleton elements
        const regionSkeleton = document.getElementById('regionSkeleton');
        const divisionSkeleton = document.getElementById('divisionSkeleton');
        const districtSkeleton = document.getElementById('districtSkeleton');
        
        // Get the current values from hidden inputs
        const currentRegionId = document.getElementById('currentRegionId')?.value || '';
        const currentDivisionId = document.getElementById('currentDivisionId')?.value || '';
        const currentDistrictId = document.getElementById('currentDistrictId')?.value || '';

        // 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');
            }
        }

        // 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 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);
                    
                    // Auto-select current region and trigger load if divisions exist
                    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;
            const fetchDivisionApi = `/sa/api/divisions/${regionId}`
            
            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(fetchDivisionApi)
                .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;
            const fetchDistrictApi =  `/sa/api/districts/${divisionId}`
            
            if (!divisionId) {
                districtSelect.innerHTML = '<option value="">Select District</option>';
                setLoadingState(districtSelect, districtSkeleton, false);
                return;
            }

            setLoadingState(districtSelect, districtSkeleton, true);

            fetch(fetchDistrictApi)
                .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;
                    } 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');
                });
        }

        // Event listeners for manual changes
        if (regionSelect) {
            regionSelect.addEventListener('change', function() {
                if (divisionSelect) {
                    loadDivisions(this.value);
                }
            });
        }

        if (divisionSelect) {
            divisionSelect.addEventListener('change', function() {
                if (districtSelect) {
                    loadDistricts(this.value);
                }
            });
        }

        // Initialize on page load
        document.addEventListener('DOMContentLoaded', function() {
            loadRegions();
        });
    </script>
@endsection