@extends('layouts.app')

@section('content')
    <div class="max-w-2xl mx-auto space-y-8">
        <div class="flex items-center gap-4 mb-4">
            <a href="{{ route('admin.students.index') }}" class="btn-icon-slate">
                <span class="material-icons-round">arrow_back</span>
            </a>
            <h2 class="text-3xl font-bold text-slate-800">Register Student</h2>
        </div>

        <div
            class="glass-panel p-8 rounded-2xl relative overflow-hidden bg-white border border-slate-200 shadow-xl shadow-slate-200/50">
            <form action="{{ route('admin.students.store') }}" method="POST"
                class="space-y-6 relative z-10 grid grid-cols-1">
                @csrf

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Full
                            Name</label>
                        <input type="text" name="name" class="form-input" placeholder="Jane Smith" value="{{ old('name') }}"
                            required>
                        @error('name') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Student
                            ID</label>
                        <input type="text" name="student_id" class="form-input" placeholder="STD001"
                            value="{{ old('student_id') }}" required>
                        @error('student_id') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Email
                        Address</label>
                    <input type="email" name="email" class="form-input" placeholder="student@college.edu"
                        value="{{ old('email') }}" required>
                    @error('email') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label
                            class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Department</label>
                        <select name="department_id" id="department_id" class="form-input bg-white text-slate-800" required>
                            <option value="">Select Department</option>
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>
                                    {{ $dept->name }}</option>
                            @endforeach
                        </select>
                        @error('department_id') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                    </div>
                    <div>
                        <label
                            class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Semester</label>
                        <select name="semester_id" id="semester_id" class="form-input bg-white text-slate-800" required>
                            <option value="">Select Department First</option>
                            @foreach($semesters as $sem)
                                <option value="{{ $sem->id }}" data-department-id="{{ $sem->department_id }}" {{ old('semester_id') == $sem->id ? 'selected' : '' }}>{{ $sem->name }}</option>
                            @endforeach
                        </select>
                        @error('semester_id') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                    </div>
                </div>

                <div>
                    <label class="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-2">Date of
                        Birth</label>
                    <input type="date" name="dob" class="form-input text-slate-500" value="{{ old('dob') }}" required>
                    @error('dob') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>

                <div class="bg-blue-50 p-4 rounded-xl flex gap-3 items-start border border-blue-100">
                    <span class="material-icons-round text-blue-500 text-sm mt-0.5">info</span>
                    <p class="text-xs text-blue-600">
                        Default password will be set to the Date of Birth (YYYY-MM-DD). The student can change it upon first
                        login.
                    </p>
                </div>

                <div class="pt-4">
                    <button type="submit" class="btn-primary w-full md:w-auto">
                        <span class="material-icons-round text-sm">person_add</span> Register Student
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const departmentSelect = document.getElementById('department_id');
            const semesterSelect = document.getElementById('semester_id');
            const allSemesterOptions = Array.from(semesterSelect.querySelectorAll('option[data-department-id]'));

            // Function to filter semesters based on selected department
            function filterSemesters() {
                const selectedDepartmentId = departmentSelect.value;

                // Remove all options except the first one (placeholder)
                semesterSelect.innerHTML = '<option value="">Select Semester</option>';

                if (!selectedDepartmentId) {
                    semesterSelect.innerHTML = '<option value="">Select Department First</option>';
                    return;
                }

                // Add back only the semesters that match the selected department
                allSemesterOptions.forEach(option => {
                    if (option.dataset.departmentId === selectedDepartmentId) {
                        semesterSelect.appendChild(option.cloneNode(true));
                    }
                });

                // If no semesters found for this department
                if (semesterSelect.options.length === 1) {
                    semesterSelect.innerHTML = '<option value="">No Semesters Available</option>';
                }
            }

            // Listen for department changes
            departmentSelect.addEventListener('change', filterSemesters);

            // Filter on page load if department is already selected (for validation errors)
            if (departmentSelect.value) {
                filterSemesters();
            }
        });
    </script>
@endsection