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

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

@section('content')
    <div class="page-header">
        <div>
            <h1> Create Organizational Unit</h1>
            <p class="text-muted">Add a new unit to the organizational hierarchy</p>
        </div>
    </div>

    @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" aria-label="Close"></button>
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <h5 class="alert-heading">
                <i class="bi bi-exclamation-circle me-2"></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-sm border-0">
                <div class="card-header bg-white border-bottom">
                    <i class="bi bi-info-circle text-primary"></i> Unit Information                    
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.organizational-units.store') }}" method="POST">
                        @csrf

                        {{-- Station Type --}}
                        <div class="mb-4">
                            <label for="stationtype_id" class="form-label fw-bold">
                                <i class="bi bi-diagram-3"></i> Station Type
                            </label>
                            <select class="form-select form-select @error('stationtype_id') is-invalid @enderror" 
                                    id="stationtype_id" 
                                    name="stationtype_id" 
                                    required>
                                <option value="">Select Station Type</option>
                                @foreach($stationTypes as $type)
                                    <option value="{{ $type->id }}" 
                                            data-level="{{ $type->authority_level }}"
                                            {{ old('stationtype_id') == $type->id ? 'selected' : '' }}>
                                        {{ $type->shortcode }} - {{ $type->name }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted d-block mt-2">Choose the type of unit you want to create</small>
                            @error('stationtype_id')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Level 3+: Region Dropdown --}}
                        <div class="mb-4 d-none" id="region-section">
                            <label for="region_id" class="form-label fw-bold">
                                <i class="bi bi-geo-alt"></i> Region
                            </label>
                            <select class="form-select form-select @error('region_id') is-invalid @enderror" 
                                    id="region_id" 
                                    name="region_id">
                                <option value="">Select Region</option>
                            </select>
                            <small class="text-muted d-block mt-2">Select the region</small>
                            @error('region_id')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Level 4+: Schools Division Dropdown --}}
                        <div class="mb-4 d-none" id="division-section">
                            <label for="division_id" class="form-label fw-bold">
                                <i class="bi bi-diagram-2"></i> Schools Division
                            </label>
                            <select class="form-select form-select @error('division_id') is-invalid @enderror" 
                                    id="division_id" 
                                    name="division_id">
                                <option value="">Select Schools Division</option>
                            </select>
                            <small class="text-muted d-block mt-2">Select the schools division</small>
                            @error('division_id')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Level 5: District Dropdown --}}
                        <div class="mb-4 d-none" id="district-section">
                            <label for="district_id" class="form-label fw-bold">
                                <i class="bi bi-diagram-3"></i> District
                            </label>
                            <select class="form-select form-select @error('district_id') is-invalid @enderror" 
                                    id="district_id" 
                                    name="district_id">
                                <option value="">Select District</option>
                            </select>
                            <small class="text-muted d-block mt-2">Select the district</small>
                            @error('district_id')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Station/School Name --}}
                        <div class="mb-4">
                            <label for="station_name" class="form-label fw-bold">
                                <i class="bi bi-file-earmark"></i> <span id="nameLabel">Station Name</span>
                            </label>
                            <input type="text" 
                                   class="form-control form-control @error('station_name') is-invalid @enderror" 
                                   id="station_name" 
                                   name="station_name" 
                                   value="{{ old('station_name') }}"
                                   placeholder="e.g., National Capital Region"
                                   required>
                            <small class="text-muted d-block mt-2">Full name of the unit</small>
                            @error('station_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Short Name --}}
                        <div class="mb-4">
                            <label for="shortname" class="form-label fw-bold">
                                <i class="bi bi-tag"></i> Short Name 
                            </label>
                            <input type="text" 
                                   class="form-control form-control @error('shortname') is-invalid @enderror" 
                                   id="shortname" 
                                   name="shortname" 
                                   value="{{ old('shortname') }}"
                                   placeholder="e.g., NCR"
                                   maxlength="50"
                                   required>
                            <small class="text-muted d-block mt-2">Abbreviation or short code (max 50 characters)</small>
                            @error('shortname')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>


                        {{-- Level 5: School ID --}}
                        <div class="mb-4 d-none" id="school-id-section">
                            <label for="beis" class="form-label fw-bold">
                                <i class="bi bi-hash"></i> School ID
                            </label>
                            <input type="text" 
                                   class="form-control form-control @error('beis') is-invalid @enderror" 
                                   id="beis" 
                                   name="beis" 
                                   value="{{ old('beis') }}"
                                   placeholder="e.g., 500000">
                            <small class="text-muted d-block mt-2">Unique school identifier</small>
                            @error('beis')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Level 5: School Type Dropdown --}}
                        <div class="mb-4 d-none" id="school-type-section">
                            <label for="schoolType" class="form-label fw-bold">
                                <i class="bi bi-house-fill"></i> School Type
                            </label>
                            <select class="form-select form-select @error('schoolType') is-invalid @enderror" 
                                    id="schoolType" 
                                    name="schoolType">
                                <option value="">Select School Type</option>
                                @foreach ($schoolTypes as $sType)
                                    <option value="{{ $sType->id }}" {{ old('schoolType') == $sType->id ? 'selected' : '' }}>
                                        {{ $sType->name }}
                                    </option>
                                @endforeach
                            </select>
                            <small class="text-muted d-block mt-2">Type of school</small>
                            @error('schoolType')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        {{-- Level 5: Specific Grade Offering Dropdown --}}
                        <div class="mb-4 d-none" id="grade-offering-section">
                            <label for="circularClass" class="form-label fw-bold">
                                <i class="bi bi-book-fill"></i> Grade Offering
                            </label>
                            <select class="form-select form-select @error('circularClass') is-invalid @enderror" 
                                    id="circularClass" 
                                    name="circularClass">
                                <option value="">Select Grade Offering</option>
                                @foreach ($circularClasses as $class)
                                    <option value="{{ $class->id }}" {{ old('circularClass') == $class->id ? 'selected' : '' }}>
                                        {{ $class->name }}
                                    </option>                                    
                                @endforeach
                               
                            </select>
                            <small class="text-muted d-block mt-2">Grade level offered by the school</small>
                            @error('circularClass')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-flex justify-content-end gap-2 pt-3 border-top">
                            <a href="{{ route('admin.organizational-units') }}" 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-plus-circle me-2"></i>Create Unit
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        {{-- Sidebar --}}
        <div class="col-lg-4">
            <div class="card shadow-sm border-0 mb-4">
                <div class="card-header bg-white border-bottom">
                    <h6 class="mb-0">
                        <i class="bi bi-book"></i> Hierarchy Guide
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3 pb-3 border-bottom">
                        <div class="badge bg-secondary rounded-pill mb-2">Level 1</div>
                        <h6 class="fw-bold">Central Office (CO)</h6>
                        <p class="text-muted small mb-0">Top level • No parent required</p>
                    </div>

                    <div class="mb-3 pb-3 border-bottom">
                        <div class="badge bg-primary rounded-pill mb-2">Level 2</div>
                        <h6 class="fw-bold">Regional Office (RO)</h6>
                        <p class="text-muted small mb-0">Parent: Central Office</p>
                    </div>

                    <div class="mb-3 pb-3 border-bottom">
                        <div class="badge bg-success rounded-pill mb-2">Level 3</div>
                        <h6 class="fw-bold">School Division Office (SDO)</h6>
                        <p class="text-muted small mb-0">Parent: Regional Office</p>
                    </div>

                    <div class="mb-3 pb-3 border-bottom">
                        <div class="badge bg-warning rounded-pill mb-2">Level 4</div>
                        <h6 class="fw-bold">District Office (DO)</h6>
                        <p class="text-muted small mb-0">Parent: School Division Office</p>
                    </div>

                    <div>
                        <div class="badge bg-danger rounded-pill mb-2">Level 5</div>
                        <h6 class="fw-bold">School</h6>
                        <p class="text-muted small mb-0">Parent: District Office</p>
                    </div>
                </div>
            </div>

            <div class="card shadow-sm border-0 bg-light">
                <div class="card-body">
                    <h6 class="fw-bold mb-3">
                        <i class="bi bi-lightbulb"></i> Tips
                    </h6>
                    <ul class="small text-muted mb-0">
                        <li class="mb-2">Station names should be descriptive and clear</li>
                        <li class="mb-2">Short names help with display in limited spaces</li>
                        <li class="mb-2">Select the appropriate station type first</li>
                        <li>Required fields will appear based on the station type</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    const stationtypeSelect = document.getElementById('stationtype_id');
    const regionSection = document.getElementById('region-section');
    const divisionSection = document.getElementById('division-section');
    const districtSection = document.getElementById('district-section');
    const schoolIdSection = document.getElementById('school-id-section');
    const schoolTypeSection = document.getElementById('school-type-section');
    const gradeOfferingSection = document.getElementById('grade-offering-section');
    const nameLabel = document.getElementById('nameLabel');

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

    // Show loading state
    function showLoading(element) {
        element.disabled = true;
        element.innerHTML = '<option value="">Loading...</option>';
    }

    // Hide loading state
    function hideLoading(element) {
        element.disabled = false;
    }

    // Station Type change event
    stationtypeSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const level = parseInt(selectedOption.getAttribute('data-level')) || 0;

        // Hide all dynamic sections
        regionSection.classList.add('d-none');
        divisionSection.classList.add('d-none');
        districtSection.classList.add('d-none');
        schoolIdSection.classList.add('d-none');
        schoolTypeSection.classList.add('d-none');
        gradeOfferingSection.classList.add('d-none');

        // Clear and reset dropdowns
        regionSelect.innerHTML = '<option value="">Select Region</option>';
        divisionSelect.innerHTML = '<option value="">Select Schools Division</option>';
        districtSelect.innerHTML = '<option value="">Select District</option>';

        // Update name label
        nameLabel.textContent = level === 5 ? 'School Name' : 'Station Name';

        // Show fields based on level
        if (level === 3) {
            regionSection.classList.remove('d-none');
            loadRegions();
        }
        if (level === 4) {
            regionSection.classList.remove('d-none');
            loadRegions();
            divisionSection.classList.remove('d-none');
        }
        if (level === 5) {
            regionSection.classList.remove('d-none');
            loadRegions();
            divisionSection.classList.remove('d-none');
            districtSection.classList.remove('d-none');
            schoolIdSection.classList.remove('d-none');
            schoolTypeSection.classList.remove('d-none');
            gradeOfferingSection.classList.remove('d-none');
        }
    });

    // Load all regions
    function loadRegions() {
        showLoading(regionSelect);
        
        fetch('/sa/api/regions')
            .then(response => {
                if (!response.ok) throw new Error('Failed to fetch regions');
                return response.json();
            })
            .then(data => {
                regionSelect.innerHTML = '<option value="">Select Region</option>';
                
                if (Array.isArray(data)) {
                    data.forEach(region => {
                        const option = document.createElement('option');
                        option.value = region.id;
                        option.textContent = region.region_name;
                        regionSelect.appendChild(option);
                    });
                } else if (data.data && Array.isArray(data.data)) {
                    // If response wraps data in a 'data' property
                    data.data.forEach(region => {
                        const option = document.createElement('option');
                        option.value = region.id;
                        option.textContent = region.region_name;
                        regionSelect.appendChild(option);
                    });
                }
                
                hideLoading(regionSelect);
            })
            .catch(error => {
                console.error('Error loading regions:', error);
                regionSelect.innerHTML = '<option value="">Error loading regions</option>';
                hideLoading(regionSelect);
            });
    }

    // Region change event - Load divisions
    regionSelect.addEventListener('change', function() {
        const fetchDivisionApi = `/sa/api/divisions/${this.value}`

        if (stationtypeSelect.options[stationtypeSelect.selectedIndex].getAttribute('data-level') === '3') {
            divisionSection.classList.add('d-none');
            return; // Only load districts for level 5 (Schools)
        }

        divisionSelect.innerHTML = '<option value="">Select Schools Division</option>';
        districtSelect.innerHTML = '<option value="">Select District</option>';


        if (!this.value) {
            divisionSection.classList.add('d-none');
            districtSection.classList.add('d-none');
            return;
        }

        showLoading(divisionSelect);
        
        fetch(fetchDivisionApi)
            .then(response => {
                if (!response.ok) throw new Error('Failed to fetch divisions');
                return response.json();
            })
            .then(data => {
                divisionSelect.innerHTML = '<option value="">Select Schools Division</option>';
                
                if (Array.isArray(data)) {
                    data.forEach(division => {
                        const option = document.createElement('option');
                        option.value = division.division_id;
                        option.textContent = division.division_name;
                        divisionSelect.appendChild(option);
                    });
                } else if (data.data && Array.isArray(data.data)) {
                    data.data.forEach(division => {
                        const option = document.createElement('option');
                        option.value = division.division_id;
                        option.textContent = division.division_name;
                        divisionSelect.appendChild(option);
                    });
                }

                divisionSection.classList.remove('d-none');
                hideLoading(divisionSelect);
            })
            .catch(error => {
                console.error('Error loading divisions:', error);
                divisionSelect.innerHTML = '<option value="">Error loading divisions</option>';
                hideLoading(divisionSelect);
            });
    });

    // Division change event - Load districts
    divisionSelect.addEventListener('change', function() {
        const fetchDistrictApi =  `/sa/api/districts/${this.value}`
        districtSelect.innerHTML = '<option value="">Select District</option>';


        if (stationtypeSelect.options[stationtypeSelect.selectedIndex].getAttribute('data-level') === '4') {
            districtSection.classList.add('d-none');
            return; // Only load districts for level 5 (Schools)
        }

        if (!this.value) {
            districtSection.classList.add('d-none');
            return;
        }

        showLoading(districtSelect);

        fetch(fetchDistrictApi)
            .then(response => {
                if (!response.ok) throw new Error('Failed to fetch districts');
                return response.json();
            })
            .then(data => {
                districtSelect.innerHTML = '<option value="">Select District</option>';
                
                if (Array.isArray(data)) {
                    data.forEach(district => {
                        const option = document.createElement('option');
                        option.value = district.district_id;
                        option.textContent = district.district_name;
                        districtSelect.appendChild(option);
                    });
                } else if (data.data && Array.isArray(data.data)) {
                    data.data.forEach(district => {
                        const option = document.createElement('option');
                        option.value = district.district_id;
                        option.textContent = district.district_name;
                        districtSelect.appendChild(option);
                    });
                }

                districtSection.classList.remove('d-none');
                hideLoading(districtSelect);
            })
            .catch(error => {
                console.error('Error loading districts:', error);
                districtSelect.innerHTML = '<option value="">Error loading districts</option>';
                hideLoading(districtSelect);
            });
    });

    // Trigger change event on page load if a station type is already selected
    if (stationtypeSelect.value) {
        stationtypeSelect.dispatchEvent(new Event('change'));
    }

    setTimeout(function () {
        document.querySelectorAll('.alert').forEach(function(alert) {
            let bsAlert = new bootstrap.Alert(alert);
            bsAlert.close();
        });
    }, 5000);
</script>
@endpush