@extends('staff.layouts.app')

@section('title', 'Schedule Online Class')

@section('content')
@php
    $minDate = \Carbon\Carbon::now()->addMinutes(5)->format('Y-m-d');
@endphp

<!-- HEADER -->
<div class="mx-4 mt-4 mb-3 flex items-center gap-2">
    <a href="{{ route('staff.online_classes.index', ['slug' => session('staff_school_slug')]) }}"
       class="w-8 h-8 bg-white border border-slate-200 rounded-xl flex items-center justify-center text-slate-500 active:scale-95 transition-transform">
        <i class="fa-solid fa-arrow-left text-xs"></i>
    </a>
    <h3 class="text-slate-700 font-bold text-sm flex items-center gap-2">
        <i class="fa-solid fa-video text-amber-500 text-xs"></i> Schedule Online Class
    </h3>
</div>

@if(session('error'))
<div class="mx-4 mb-3 p-3 bg-red-50 border border-red-200 rounded-2xl text-red-700 text-xs font-bold">
    <i class="fa-solid fa-triangle-exclamation mr-1"></i> {{ session('error') }}
</div>
@endif
@if($errors->any())
<div class="mx-4 mb-3 p-3 bg-red-50 border border-red-200 rounded-2xl text-red-700 text-[11px] font-bold">
    @foreach($errors->all() as $e) <p><i class="fa-solid fa-circle-exclamation mr-1"></i> {{ $e }}</p> @endforeach
</div>
@endif

<form method="POST" action="{{ route('staff.online_classes.store', ['slug' => session('staff_school_slug')]) }}" class="px-4 space-y-3 mb-8">
    @csrf

    <!-- CLASS -->
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4">
        <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Class <span class="text-red-500">*</span></label>
        <select name="class_id" id="class_id" required
                class="w-full mt-1 bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-xs font-bold text-slate-700 outline-none focus:border-amber-400">
            <option value="">— Select Class —</option>
            @foreach($classes as $c)
            <option value="{{ $c->id }}" {{ old('class_id') == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
            @endforeach
        </select>
    </div>

    <!-- SECTION + SUBJECT -->
    <div class="grid grid-cols-2 gap-3">
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4">
            <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Section</label>
            <select name="section_id" id="section_id"
                    class="w-full mt-1 bg-slate-50 border border-slate-200 rounded-xl px-2 py-2.5 text-xs font-bold text-slate-700 outline-none focus:border-amber-400">
                <option value="">All Sections</option>
            </select>
        </div>
        <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4">
            <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Subject <span class="text-red-500">*</span></label>
            <select name="subject" id="subject" required
                    class="w-full mt-1 bg-slate-50 border border-slate-200 rounded-xl px-2 py-2.5 text-xs font-bold text-slate-700 outline-none focus:border-amber-400">
                <option value="">— Select —</option>
            </select>
            <input type="text" name="subject_custom" id="subject_custom" placeholder="Type subject name" value="{{ old('subject_custom') }}"
                   class="w-full mt-2 bg-amber-50 border border-amber-200 rounded-xl px-2 py-2 text-xs font-bold text-slate-700 outline-none focus:border-amber-400 hidden">
        </div>
    </div>

    <!-- STUDENTS -->
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4">
        <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Students <span class="text-red-500">*</span></label>
        <div class="flex gap-2 mt-1 mb-2">
            <label class="flex-1 cursor-pointer">
                <input type="radio" name="students_mode" value="all" class="peer hidden" {{ old('students_mode', 'all') == 'all' ? 'checked' : '' }} onchange="toggleStudents()">
                <div class="text-center py-2 rounded-xl border border-slate-200 text-[11px] font-bold text-slate-500 peer-checked:bg-indigo-50 peer-checked:border-indigo-300 peer-checked:text-indigo-600 transition-all">All Students</div>
            </label>
            <label class="flex-1 cursor-pointer">
                <input type="radio" name="students_mode" value="particular" class="peer hidden" {{ old('students_mode') == 'particular' ? 'checked' : '' }} onchange="toggleStudents()">
                <div class="text-center py-2 rounded-xl border border-slate-200 text-[11px] font-bold text-slate-500 peer-checked:bg-indigo-50 peer-checked:border-indigo-300 peer-checked:text-indigo-600 transition-all">Particular Students</div>
            </label>
        </div>
        <div id="studentBox" class="hidden max-h-44 overflow-y-auto border border-slate-100 rounded-xl divide-y divide-slate-50">
            <div class="sticky top-0 bg-slate-50 px-3 py-2 flex items-center justify-between">
                <span class="text-[10px] font-bold text-slate-500 uppercase">Select</span>
                <label class="text-[10px] font-bold text-indigo-600 cursor-pointer">
                    <input type="checkbox" id="selectAllStudents" onchange="toggleAllStudents(this)" class="mr-1"> All
                </label>
            </div>
            <div id="studentList" class="divide-y divide-slate-50"></div>
        </div>
        <p id="studentHint" class="text-[10px] text-slate-400 mt-1"><i class="fa-solid fa-circle-info mr-0.5"></i> Choose class first, then pick particular students.</p>
    </div>

    <!-- DATE + TIMES -->
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 space-y-3">
        <div>
            <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Date <span class="text-red-500">*</span></label>
            <!-- ✅ onclick="this.showPicker()" = calendar opens when clicking ANYWHERE inside the field -->
            <input type="date" name="class_date" id="class_date" value="{{ old('class_date') }}"
                   min="{{ $minDate }}" required onclick="this.showPicker()"
                   class="w-full mt-1 bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-xs font-bold text-slate-700 outline-none focus:border-amber-400">
        </div>
        <div class="grid grid-cols-2 gap-3">
            <div>
                <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Start Time <span class="text-red-500">*</span></label>
                <input type="time" name="start_time" id="start_time" value="{{ old('start_time') }}" required onclick="this.showPicker()"
                       class="w-full mt-1 bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-xs font-bold text-slate-700 outline-none focus:border-amber-400">
            </div>
            <div>
                <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">End Time <span class="text-red-500">*</span></label>
                <input type="time" name="end_time" id="end_time" value="{{ old('end_time') }}" required onclick="this.showPicker()"
                       class="w-full mt-1 bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-xs font-bold text-slate-700 outline-none focus:border-amber-400">
            </div>
        </div>
        <p class="text-[10px] text-amber-600 font-semibold"><i class="fa-solid fa-circle-info mr-0.5"></i> Class must start at least <b>5 minutes</b> from now ({{ \Carbon\Carbon::now()->addMinutes(5)->format('d M, h:i A') }} onwards).</p>
    </div>

    <!-- TITLE + LINK -->
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 space-y-3">
        <div>
            <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Title <span class="text-red-500">*</span></label>
            <input type="text" name="title" value="{{ old('title') }}" placeholder="e.g. Maths - Chapter 4 Revision" required maxlength="255"
                   class="w-full mt-1 bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-xs font-bold text-slate-700 outline-none focus:border-amber-400">
        </div>
        <div>
            <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Class Link (Zoom / Google Meet) <span class="text-red-500">*</span></label>
            <input type="url" name="class_link" value="{{ old('class_link') }}" placeholder="https://meet.google.com/... or https://zoom.us/..." required maxlength="500"
                   class="w-full mt-1 bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-xs font-bold text-slate-700 outline-none focus:border-amber-400">
        </div>
    </div>

    <button type="submit"
            class="w-full py-3.5 bg-gradient-to-r from-amber-500 to-orange-600 text-white text-sm font-black rounded-2xl shadow-lg shadow-orange-200 active:scale-95 transition-transform uppercase tracking-wide">
        <i class="fa-solid fa-video mr-1"></i> Save Online Class
    </button>
</form>

<script>
    const slug = '{{ session("staff_school_slug") }}';
    const oldSection = '{{ old("section_id") }}';
    const oldStudents = @json(old('student_ids', []));

    // ✅ CLIENT-SIDE 5-MIN CHECK (server also validates)
    function validateMinTime() {
        const d = document.getElementById('class_date').value;
        const t = document.getElementById('start_time').value;
        if (!d || !t) return true;
        const start = new Date(d + 'T' + t + ':00');
        if (start.getTime() < Date.now() + 5*60*1000) {
            alert('Class must start at least 5 minutes from now.');
            return false;
        }
        return true;
    }
    document.querySelector('form').addEventListener('submit', e => { if (!validateMinTime()) e.preventDefault(); });

    document.getElementById('class_id').addEventListener('change', function () {
        const classId = this.value;
        loadSections(classId);
        loadSubjects(classId);
        loadStudents();
    });
    document.getElementById('section_id').addEventListener('change', loadStudents);

    function loadSections(classId) {
        const sel = document.getElementById('section_id');
        sel.innerHTML = '<option value="">All Sections</option>';
        if (!classId) return;
        fetch(`/${'school'}/${slug}/staff/online-classes/ajax/sections/${classId}`)
            .then(r => r.json()).then(data => {
                data.forEach(s => sel.innerHTML += `<option value="${s.id}" ${String(s.id) === oldSection ? 'selected' : ''}>${s.name}</option>`);
            });
    }

    function loadSubjects(classId) {
        const sel = document.getElementById('subject');
        const custom = document.getElementById('subject_custom');
        
        // Reset
        sel.innerHTML = '<option value="">— Select —</option>';
        custom.classList.add('hidden'); 
        custom.required = false; 
        sel.required = true;
        
        if (!classId) return;

        console.log('Fetching subjects for class ID:', classId); // Debug log

        fetch(`/school/${slug}/staff/online-classes/ajax/subjects/${classId}`)
        .then(r => {
            if (!r.ok) throw new Error('Network response was not ok');
            return r.json();
        })
        .then(data => {
            console.log('Subjects received:', data); // Debug log
            
            if (data.length === 0) {
                sel.innerHTML = '<option value="__custom">— Type Manually —</option>';
                sel.value = '__custom';
                custom.classList.remove('hidden'); 
                custom.required = true; 
                sel.required = false;
                // Restore old custom value if exists
                if ("{{ old('subject_custom') }}") {
                    custom.value = "{{ old('subject_custom') }}";
                    sel.value = custom.value;
                }
            } else {
                let hasOldValue = false;
                const oldSubject = "{{ old('subject') }}";
                
                data.forEach(s => {
                    const isSelected = s.name === oldSubject ? 'selected' : '';
                    if (s.name === oldSubject) hasOldValue = true;
                    sel.innerHTML += `<option value="${s.name}" ${isSelected}>${s.name}</option>`;
                });
                
                // Add "Other" option
                sel.innerHTML += '<option value="__custom">Other (type manually)</option>';
                
                // If old value wasn't in the list, switch to custom
                if (!hasOldValue && oldSubject) {
                    sel.value = '__custom';
                    custom.classList.remove('hidden');
                    custom.required = true;
                    sel.required = false;
                    custom.value = oldSubject;
                }
            }
        })
        .catch(error => {
            console.error('Error fetching subjects:', error);
            sel.innerHTML = '<option value="">Error loading subjects</option>';
        });
    }

    document.getElementById('subject').addEventListener('change', function () {
        const custom = document.getElementById('subject_custom');
        if (this.value === '__custom') {
            custom.classList.remove('hidden'); custom.required = true; this.required = false;
            if (custom.value) this.value = custom.value;
            custom.addEventListener('input', () => this.value = custom.value);
        } else {
            custom.classList.add('hidden'); custom.required = false; this.required = true;
        }
    });

    function toggleStudents() {
        const mode = document.querySelector('input[name="students_mode"]:checked').value;
        document.getElementById('studentBox').classList.toggle('hidden', mode !== 'particular');
        document.getElementById('studentHint').classList.toggle('hidden', mode === 'particular');
        if (mode === 'particular') loadStudents();
    }

    function toggleAllStudents(cb) {
        document.querySelectorAll('.student-cb').forEach(c => c.checked = cb.checked);
    }

    function loadStudents() {
        const mode = document.querySelector('input[name="students_mode"]:checked').value;
        if (mode !== 'particular') return;
        const classId = document.getElementById('class_id').value;
        const sectionId = document.getElementById('section_id').value;
        const box = document.getElementById('studentList');
        box.innerHTML = '<p class="px-3 py-3 text-[10px] text-slate-400">Loading...</p>';
        if (!classId) { box.innerHTML = '<p class="px-3 py-3 text-[10px] text-red-400">Please select a class first.</p>'; return; }
        fetch(`/${'school'}/${slug}/staff/online-classes/ajax/students?class_id=${classId}&section_id=${sectionId}`)
            .then(r => r.json()).then(data => {
                if (!data.length) { box.innerHTML = '<p class="px-3 py-3 text-[10px] text-slate-400">No students found.</p>'; return; }
                box.innerHTML = data.map(s => `
                    <label class="flex items-center gap-2.5 px-3 py-2 cursor-pointer active:bg-slate-50">
                        <input type="checkbox" name="student_ids[]" value="${s.id}" class="student-cb accent-indigo-600 w-4 h-4" ${oldStudents.includes(s.id) ? 'checked' : ''}>
                        <span class="text-[11px] font-bold text-slate-700 flex-1">${s.student_name}</span>
                        <span class="text-[9px] font-semibold text-slate-400">${s.admission_no ?? ''}</span>
                    </label>`).join('');
            });
    }

    // Restore state on old input
    @if(old('class_id'))
        loadSections('{{ old("class_id") }}');
        loadSubjects('{{ old("class_id") }}');
        toggleStudents();
    @endif
</script>
@endsection