@extends('admin.layout.app')

@section('content')
<div class="app-content">
    <div class="container-fluid mt-4">
        <div class="row justify-content-center">
            <div class="col-lg-12 col-md-10">

                <div class="card shadow-lg border-0 rounded-4">

                    <div class="card-header bg-gradient bg-primary text-white rounded-top-4 d-flex align-items-center">
                        <i class="bi bi-info-circle-fill me-2" style="font-size: 1.3rem;"></i>
                        <h4 class="mb-0 fw-semibold">Create Section</h4>
                    </div>

                    <div class="card-body p-4">
                        <form method="POST" action="{{ route('admin.sections.store') }}">
                            @csrf

                            {{-- School --}}
                            <div class="mb-4">
                                <label class="form-label fw-semibold">
                                    <i class="bi bi-building me-1 text-primary"></i>
                                    School <span class="text-danger">*</span>
                                </label>

                                <select name="school_id" id="school_id"
                                    class="form-select form-select-lg rounded-3 shadow-sm" required>

                                    <option value="" disabled selected>Select school</option>

                                    @foreach($schools as $school)
                                        <option value="{{ $school->id }}"
                                            {{ old('school_id') == $school->id ? 'selected' : '' }}>
                                            {{ $school->name }}
                                        </option>
                                    @endforeach
                                </select>

                                @error('school_id')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            {{-- Standard --}}
                            <div class="mb-4">
                                <label class="form-label fw-semibold">
                                    <i class="bi bi-list-ul me-1 text-primary"></i>
                                    Standard <span class="text-danger">*</span>
                                </label>

                                <select name="standard_id" id="standard_id"
                                    class="form-select form-select-lg rounded-3 shadow-sm" required>

                                    <option value="" disabled selected>Select standard</option>

                                </select>

                                @error('standard_id')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            {{-- Section Name --}}
                            <div class="mb-4">
                                <label class="form-label fw-semibold">
                                    <i class="bi bi-type me-1 text-primary"></i>
                                    Section Name <span class="text-danger">*</span> <small>(Please use CAPS only)</small>
                                </label>

                                <input type="text" name="section_name"
                                    class="form-control form-control-lg rounded-3 shadow-sm"
                                    value="{{ old('section_name') }}"
                                    placeholder="Enter section name"
                                    required>

                                @error('section_name')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            {{-- Status --}}
                            <div class="mb-4">
                                <label class="form-label fw-semibold">
                                    <i class="bi bi-toggle-on me-1 text-primary"></i>
                                    Status <span class="text-danger">*</span>
                                </label>

                                <select name="status"
                                    class="form-select form-select-lg rounded-3 shadow-sm" required>

                                    <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>
                                        Active
                                    </option>

                                    <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>
                                        Inactive
                                    </option>

                                </select>

                                @error('status')
                                    <small class="text-danger">{{ $message }}</small>
                                @enderror
                            </div>

                            {{-- Submit --}}
                            <div class="text-end">
                                <button type="submit"
                                    class="btn btn-primary btn-lg px-4 rounded-3 shadow">
                                    <i class="bi bi-plus-circle me-2"></i>
                                    Create Section
                                </button>
                            </div>

                        </form>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

{{-- AJAX Script --}}
<script>
document.addEventListener('DOMContentLoaded', function () {

    const schoolSelect = document.getElementById('school_id');
    const standardSelect = document.getElementById('standard_id');

    function loadStandards(schoolId, selectedStandard = null) {

        standardSelect.innerHTML =
            '<option value="" disabled selected>Select standard</option>';

        if (!schoolId) return;

        fetch(`/admin/standards/by-school/${schoolId}`)
            .then(res => res.json())
            .then(data => {

                if (Array.isArray(data) && data.length > 0) {

                    data.forEach(std => {

                        let option = document.createElement('option');
                        option.value = std.id;
                        option.text = std.name;

                        if (selectedStandard && selectedStandard == std.id) {
                            option.selected = true;
                        }

                        standardSelect.appendChild(option);

                    });

                }
            });
    }

    schoolSelect.addEventListener('change', function () {
        loadStandards(this.value);
    });

    // Reload old data after validation error
    @if(old('school_id'))
        loadStandards("{{ old('school_id') }}", "{{ old('standard_id') }}");
    @endif

});
</script>

@endsection