@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto space-y-6">
    <div>
        <h2 class="text-3xl font-black text-slate-800 tracking-tight">Upload Timetable</h2>
        <p class="text-slate-500 mt-1">Upload PDF or Excel timetable (Max 2 per department/semester: Type A & B)</p>
    </div>

    <div class="glass-panel overflow-hidden rounded-2xl bg-white border border-slate-200 shadow-lg shadow-slate-200/50 p-6">
        <form action="{{ route('admin.timetables.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="space-y-4">
                 <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Department *</label>
                    <select name="department_id" id="department_id" required 
                        class="w-full px-4 py-2 rounded-lg border @error('department_id') border-red-500 @else border-slate-300 @enderror focus:ring-2 focus:ring-indigo-500">
                        <option value="">Select Department</option>
                        @foreach($departments as $department)
                        <option value="{{ $department->id }}" {{ old('department_id') == $department->id ? 'selected' : '' }}>
                            {{ $department->name }}
                        </option>
                        @endforeach
                    </select>
                    @error('department_id')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Semester *</label>
                    <select name="semester_id" id="semester_id" required 
                        class="w-full px-4 py-2 rounded-lg border @error('semester_id') border-red-500 @else border-slate-300 @enderror focus:ring-2 focus:ring-indigo-500">
                        <option value="">Select Department First</option>
                        @foreach($semesters as $semester)
                        <option value="{{ $semester->id }}" data-department-id="{{ $semester->department_id }}" {{ old('semester_id') == $semester->id ? 'selected' : '' }}>
                            {{ $semester->name }}
                        </option>
                        @endforeach
                    </select>
                    @error('semester_id')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Timetable Type *</label>
                    <div class="flex gap-4">
                        <label class="flex items-center">
                            <input type="radio" name="type" value="A" {{ old('type') == 'A' ? 'checked' : '' }} required class="mr-2">
                            <span class="px-3 py-1 rounded-lg bg-blue-50 text-blue-600 border border-blue-100 text-sm font-bold">Type A</span>
                        </label>
                        <label class="flex items-center">
                            <input type="radio" name="type" value="B" {{ old('type') == 'B' ? 'checked' : '' }} required class="mr-2">
                            <span class="px-3 py-1 rounded-lg bg-purple-50 text-purple-600 border border-purple-100 text-sm font-bold">Type B</span>
                        </label>
                    </div>
                    @error('type')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-2">Timetable File (PDF or Excel) *</label>
                    <input type="file" name="file" required accept=".pdf,.xlsx,.xls"
                        class="w-full px-4 py-2 rounded-lg border @error('file') border-red-500 @else border-slate-300 @enderror focus:ring-2 focus:ring-indigo-500">
                    <p class="text-xs text-slate-500 mt-1">Accepted formats: PDF, XLSX, XLS (Max 10MB)</p>
                    @error('file')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex gap-3 pt-4">
                    <button type="submit" class="btn-primary flex-1">
                        <span class="material-icons-round text-sm mr-2">upload_file</span>
                        Upload Timetable
                    </button>
                    <a href="{{ route('admin.timetables.index') }}" class="btn-secondary flex-1 text-center">
                        Cancel
                    </a>
                </div>
            </div>
        </form>
    </div>

    <div class="bg-amber-50 border border-amber-200 text-amber-800 px-4 py-3 rounded-lg">
        <p class="font-semibold">⚠️ Important:</p>
        <p class="text-sm mt-1">Only 2 timetables (Type A and Type B) are allowed per department/semester combination. If you try to upload a third one, it will be rejected.</p>
    </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 filterSemesters() {
        const selectedId = departmentSelect.value;
        const currentVal = semesterSelect.value;
        
        semesterSelect.innerHTML = '<option value="">Select Semester</option>';
        
        if (!selectedId) {
            semesterSelect.innerHTML = '<option value="">Select Department First</option>';
            return;
        }

        allSemesterOptions.forEach(opt => {
            if (opt.dataset.departmentId === selectedId) {
                semesterSelect.appendChild(opt.cloneNode(true));
            }
        });

        if (semesterSelect.options.length === 1) {
            semesterSelect.innerHTML = '<option value="">No Semesters Available</option>';
        } else if (currentVal) {
            semesterSelect.value = currentVal;
        }
    }

    departmentSelect.addEventListener('change', filterSemesters);
    if (departmentSelect.value) filterSemesters();
});
</script>
@endsection