@extends('staff.layouts.app')

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

@section('content')
<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-pen text-amber-500 text-xs"></i> Edit 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.update', ['slug' => session('staff_school_slug'), 'id' => $oc->id]) }}" class="px-4 space-y-3 mb-8">
    @csrf @method('PUT')

    <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">
            @foreach($classes as $c)
            <option value="{{ $c->id }}" {{ old('class_id', $oc->class_id) == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
            @endforeach
        </select>
    </div>

    <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" id="subject_custom" placeholder="Type subject name" value="{{ old('subject', $oc->subject) }}"
                   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>

    <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', $studentsMode) == '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', $studentsMode) == '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>
    </div>

    <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>
            <input type="date" name="class_date" id="class_date" value="{{ old('class_date', $oc->class_date) }}" 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', \Carbon\Carbon::parse($oc->start_time)->format('H:i')) }}" 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', \Carbon\Carbon::parse($oc->end_time)->format('H:i')) }}" 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.</p>
    </div>

    <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', $oc->title) }}" 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', $oc->class_link) }}" 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-floppy-disk mr-1"></i> Update Online Class
    </button>
</form>

<script>
const slug = '{{ session("staff_school_slug") }}';
const selectedSection = '{{ $oc->section_id }}';
const selectedStudents = @json($selectedStudents);
const currentSubject = '{{ $oc->subject }}'; // Ensure this matches DB exactly

function validateMinTime() {
    const d = document.getElementById('class_date').value;
    const t = document.getElementById('start_time').value;
    if (!d || !t) return true; 
    if (new Date(d + 'T' + t + ':00').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 () {
    loadSections(this.value);
    loadSubjects(this.value);
    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) === selectedSection ? 'selected' : ''}>${s.name}</option>`);
    });
}

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

    if (!classId) return;

    fetch(`/school/${slug}/staff/online-classes/ajax/subjects/${classId}`)
    .then(r => r.json())
    .then(data => {
        let found = false;
        
        if (data.length === 0) {
            // No subjects in DB for this class, force custom
            sel.innerHTML = '<option value="__custom">— Type Manually —</option>';
            sel.value = '__custom';
            custom.classList.remove('hidden'); 
            custom.required = true; 
            sel.required = false;
            if (currentSubject) custom.value = currentSubject;
        } else {
            // Populate dropdown
            data.forEach(s => {
                const isSelected = s.name === currentSubject ? 'selected' : '';
                if (s.name === currentSubject) found = true;
                sel.innerHTML += `<option value="${s.name}" ${isSelected}>${s.name}</option>`;
            });
            
            // Add "Other" option
            sel.innerHTML += '<option value="__custom">Other (type manually)</option>';

            // If current subject wasn't in the list, switch to custom
            if (!found && currentSubject) {
                sel.value = '__custom';
                custom.classList.remove('hidden'); 
                custom.required = true; 
                sel.required = false;
                custom.value = currentSubject;
            }
        }
    })
    .catch(err => console.error('Error loading subjects:', err));
}

// Handle manual selection of "Other"
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;
        // Keep existing value if any, otherwise clear
        if (!custom.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');
    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>';
    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" ${selectedStudents.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('');
    });
}

// Init
loadSections(document.getElementById('class_id').value);
loadSubjects(document.getElementById('class_id').value); // This will restore the subject
toggleStudents();
</script>
@endsection