@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-person-plus-fill me-2" style="font-size: 1.3rem;"></i>
                            <h4 class="mb-0 fw-semibold">Register Student</h4>
                        </div>

                        <div class="card-body p-4">
                            @if(session('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    {{ 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">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <form method="POST" action="{{ route('admin.register') }}" autocomplete="off">
                                @csrf

                                {{-- School --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold" for="school_id">
                                        <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="">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 mt-1 d-block">{{ $message }}</small>
                                    @enderror
                                </div>

                                {{-- Student ID (Automatically Generated, Compulsory) --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold" for="student_id">
                                        <i class="bi bi-hash me-1 text-primary"></i> Student ID <span class="text-danger">*</span>
                                    </label>
                                <input type="text" name="student_id" id="student_id" class="form-control" placeholder="Enter Student Id">
                                    @error('student_id')
                                        <small class="text-danger mt-1 d-block">{{ $message }}</small>
                                    @enderror
                                </div>

                                {{-- Standard / Class --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold" for="standard_id">
                                        <i class="bi bi-list-ul me-1 text-primary"></i> Class / 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="">Select Class / Standard</option>
                                        @foreach($standards as $standard)
                                            <option value="{{ $standard->id }}"
                                                    data-school="{{ $standard->school_id }}"
                                                    {{ old('standard_id') == $standard->id ? 'selected' : '' }}>
                                                {{ $standard->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('standard_id')
                                        <small class="text-danger mt-1 d-block">{{ $message }}</small>
                                    @enderror
                                </div>

                                {{-- Section --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold" for="section_id">
                                        <i class="bi bi-layout-split me-1 text-primary"></i> Section <span class="text-danger">*</span>
                                    </label>
                                    <select name="section_id" id="section_id" class="form-select form-select-lg rounded-3 shadow-sm" required>
                                        <option value="">Select Section</option>
                                        @foreach($sections as $section)
                                            <option value="{{ $section->id }}"
                                                    data-school="{{ $section->school_id }}"
                                                    data-standard="{{ $section->standard_id }}"
                                                    {{ old('section_id') == $section->id ? 'selected' : '' }}>
                                                {{ $section->section_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('section_id')
                                        <small class="text-danger mt-1 d-block">{{ $message }}</small>
                                    @enderror
                                </div>

                                {{-- Student Name --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold" for="student_name">
                                        <i class="bi bi-person me-1 text-primary"></i> Student Name <span class="text-danger">*</span>
                                    </label>
                                    <input type="text"
                                           name="student_name"
                                           id="student_name"
                                           class="form-control form-control-lg rounded-3 shadow-sm"
                                           value="{{ old('student_name') }}"
                                           placeholder="Enter student name"
                                           maxlength="255"
                                           required>
                                    @error('student_name')
                                        <small class="text-danger mt-1 d-block">{{ $message }}</small>
                                    @enderror
                                </div>

                                {{-- Parent Name --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold" for="parent_name">
                                        <i class="bi bi-people me-1 text-primary"></i> Parent Name <span class="text-danger">*</span>
                                    </label>
                                    <input type="text"
                                           name="parent_name"
                                           id="parent_name"
                                           class="form-control form-control-lg rounded-3 shadow-sm"
                                           value="{{ old('parent_name') }}"
                                           placeholder="Enter parent name"
                                           maxlength="255"
                                           required>
                                    @error('parent_name')
                                        <small class="text-danger mt-1 d-block">{{ $message }}</small>
                                    @enderror
                                </div>

                                {{-- Parent Email --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold" for="email">
                                        <i class="bi bi-envelope me-1 text-primary"></i> Parent Email <span class="text-danger">*</span>
                                    </label>
                                    <input type="email"
                                           name="email"
                                           id="email"
                                           class="form-control form-control-lg rounded-3 shadow-sm"
                                           value="{{ old('email') }}"
                                           placeholder="Enter parent email"
                                           maxlength="255"
                                           required>
                                    @error('email')
                                        <small class="text-danger mt-1 d-block">{{ $message }}</small>
                                    @enderror
                                </div>

                                {{-- Parent Phone --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold" for="phone">
                                        <i class="bi bi-telephone me-1 text-primary"></i> Parent Phone <span class="text-danger">*</span>
                                    </label>
                                    <input type="text"
                                           name="phone"
                                           id="phone"
                                           class="form-control form-control-lg rounded-3 shadow-sm"
                                           value="{{ old('phone') }}"
                                           placeholder="Enter parent phone"
                                           maxlength="20"
                                           required>
                                    @error('phone')
                                        <small class="text-danger mt-1 d-block">{{ $message }}</small>
                                    @enderror
                                </div>

                                {{-- Gender --}}
                                <div class="mb-4">
                                    <label class="form-label fw-semibold" for="gender">
                                        <i class="bi bi-gender-ambiguous me-1 text-primary"></i> Gender <span class="text-danger">*</span>
                                    </label>
                                    <select name="gender"
                                            id="gender"
                                            class="form-select form-select-lg rounded-3 shadow-sm"
                                            required>
                                        <option value="">Select Gender</option>
                                        <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                                        <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                                    </select>
                                    @error('gender')
                                        <small class="text-danger mt-1 d-block">{{ $message }}</small>
                                    @enderror
                                </div>

                                {{-- Submit --}}
                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="btn btn-primary btn-lg px-4 rounded-3 shadow">
                                        <i class="bi bi-check-circle me-2"></i> Register Student
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

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

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const schoolSelect = document.getElementById('school_id');
            const standardSelect = document.getElementById('standard_id');
            const sectionSelect = document.getElementById('section_id');

            function filterStandards() {
                const selectedSchool = schoolSelect.value;

                Array.from(standardSelect.options).forEach(option => {
                    if (option.value === '') {
                        option.style.display = '';
                        return;
                    }

                    const optionSchool = option.getAttribute('data-school');
                    const shouldShow = !selectedSchool || optionSchool === selectedSchool;

                    option.style.display = shouldShow ? '' : 'none';

                    if (!shouldShow && option.selected) {
                        option.selected = false;
                    }
                });
            }

            function filterSections() {
                const selectedSchool = schoolSelect.value;
                const selectedStandard = standardSelect.value;

                Array.from(sectionSelect.options).forEach(option => {
                    if (option.value === '') {
                        option.style.display = '';
                        return;
                    }

                    const optionSchool = option.getAttribute('data-school');
                    const optionStandard = option.getAttribute('data-standard');

                    let shouldShow = true;

                    if (selectedSchool && optionSchool !== selectedSchool) {
                        shouldShow = false;
                    }

                    if (selectedStandard && optionStandard !== selectedStandard) {
                        shouldShow = false;
                    }

                    option.style.display = shouldShow ? '' : 'none';

                    if (!shouldShow && option.selected) {
                        option.selected = false;
                    }
                });
            }

            if (schoolSelect && standardSelect && sectionSelect) {
                schoolSelect.addEventListener('change', function () {
                    filterStandards();
                    filterSections();
                });

                standardSelect.addEventListener('change', function () {
                    filterSections();
                });

                // Initial filter on load to respect old values
                filterStandards();
                filterSections();
            }
        });
    </script>
@endsection