@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">Edit 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.update', $student) }}" method="POST"
                class="space-y-6 relative z-10 grid grid-cols-1">
                @csrf
                @method('PUT')

                <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', $student->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', $student->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', $student->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', $student->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 Semester</option>
                            @foreach($semesters as $sem)
                                <option value="{{ $sem->id }}" data-department-id="{{ $sem->department_id }}" {{ old('semester_id', $student->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', $student->dob) }}"
                        required>
                    @error('dob') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>

                <div class="pt-4">
                    <button type="submit" class="btn-primary w-full md:w-auto">
                        <span class="material-icons-round text-sm">save</span> Update 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]'));
            const currentSemesterId = '{{ old("semester_id", $student->semester_id) }}';

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

                // Store currently selected semester
                const currentSelection = semesterSelect.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
                let hasOptions = false;
                allSemesterOptions.forEach(option => {
                    if (option.dataset.departmentId === selectedDepartmentId) {
                        const newOption = option.cloneNode(true);
                        semesterSelect.appendChild(newOption);
                        hasOptions = true;
                    }
                });

                // If no semesters found for this department
                if (!hasOptions) {
                    semesterSelect.innerHTML = '<option value="">No Semesters Available</option>';
                } else {
                    // Restore previous selection if it's still valid
                    if (currentSelection) {
                        semesterSelect.value = currentSelection;
                    }
                }
            }

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

            // Filter on page load to show only relevant semesters
            filterSemesters();
        });
    </script>
@endsection