@extends('staff.layouts.app')

@section('title', 'Online Classes')

@section('content')
@php
    $now = \Carbon\Carbon::now();
@endphp

<!-- HEADER -->
<div class= "flex items-center justify-between mx-4 mt-4 mb-3 " >
 <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 > Online Classes
 </h3 >
 <a href="{{ route('staff.online_classes.create', ['slug' => session('staff_school_slug')]) }}"
class= "px-3 py-1.5 bg-gradient-to-br from-amber-500 to-orange-600 text-white text-[11px] font-bold rounded-xl shadow-md active:scale-95 transition-transform " >
 <i class= "fa-solid fa-plus mr-1 " > </i > Schedule
 </a >
 </div >

<!-- FILTERS -->
<form method="GET" action="{{ route('staff.online_classes.index', ['slug' => session('staff_school_slug')]) }}" class="px-4 mb-4">
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-3 flex flex-col gap-2">
        
        <!-- Row 1: Status & Date -->
        <div class="grid grid-cols-2 gap-2">
            <div>
                <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Status</label>
                <select name="status" onchange="this.form.submit()"
                    class="w-full mt-0.5 bg-slate-50 border border-slate-200 rounded-xl px-2.5 py-2 text-xs font-bold text-slate-700 outline-none focus:border-amber-400">
                    <option value="all" {{ $statusFilter == 'all' ? 'selected' : '' }}>ALL</option>
                    <option value="current" {{ $statusFilter == 'current' ? 'selected' : '' }}>CURRENT</option>
                    <option value="upcoming" {{ $statusFilter == 'upcoming' ? 'selected' : '' }}>UPCOMING</option>
                    <option value="completed" {{ $statusFilter == 'completed' ? 'selected' : '' }}>COMPLETED</option>
                </select>
            </div>
            <div>
                <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Date</label>
                <input type="date" name="filter_date" value="{{ $filterDate }}"
                    onclick="this.showPicker()"
                    class="w-full mt-0.5 bg-slate-50 border border-slate-200 rounded-xl px-2.5 py-2 text-xs font-bold text-slate-700 outline-none focus:border-amber-400">
            </div>
        </div>

        <!-- Row 2: Class, Section, Subject -->
        <div class="grid grid-cols-3 gap-2">
            <div>
                <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Class</label>
                <select name="filter_class_id" id="filter_class_id" onchange="loadFilterSections(); this.form.submit();"
                    class="w-full mt-0.5 bg-slate-50 border border-slate-200 rounded-xl px-2.5 py-2 text-xs font-bold text-slate-700 outline-none focus:border-amber-400">
                    <option value="">All Classes</option>
                    @foreach($availableClasses as $c)
                        <option value="{{ $c->id }}" {{ $filterClassId == $c->id ? 'selected' : '' }}>{{ $c->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Section</label>
                <select name="filter_section_id" id="filter_section_id" onchange="this.form.submit();"
                    class="w-full mt-0.5 bg-slate-50 border border-slate-200 rounded-xl px-2.5 py-2 text-xs font-bold text-slate-700 outline-none focus:border-amber-400">
                    <option value="">All Sections</option>
                    @foreach($availableSections as $s)
                        <option value="{{ $s->id }}" {{ $filterSectionId == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">Subject</label>
                <select name="filter_subject" onchange="this.form.submit();"
                    class="w-full mt-0.5 bg-slate-50 border border-slate-200 rounded-xl px-2.5 py-2 text-xs font-bold text-slate-700 outline-none focus:border-amber-400">
                    <option value="">All Subjects</option>
                    @foreach($availableSubjects as $sub)
                        <option value="{{ $sub }}" {{ $filterSubject == $sub ? 'selected' : '' }}>{{ $sub }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="flex gap-2">
            <button type="submit" class="flex-1 py-2 bg-slate-800 text-white text-[11px] font-bold rounded-xl active:scale-95 transition-transform">
                <i class="fa-solid fa-filter mr-1"></i> Apply
            </button>
            <a href="{{ route('staff.online_classes.index', ['slug' => session('staff_school_slug')]) }}"
                class="flex-1 py-2 bg-slate-100 text-slate-600 text-[11px] font-bold rounded-xl text-center active:scale-95 transition-transform">
                Reset
            </a>
        </div>
    </div>
</form>

<script>
// Helper to reload sections when class changes in filter
function loadFilterSections() {
    const classId = document.getElementById('filter_class_id').value;
    const sectionSel = document.getElementById('filter_section_id');
    
    // Keep current selection if possible, otherwise reset
    const currentVal = sectionSel.value;
    sectionSel.innerHTML = '<option value="">All Sections</option>';
    
    if(!classId) return;

    fetch(`/school/{{session('staff_school_slug')}}/staff/online-classes/ajax/sections/${classId}`)
    .then(r => r.json())
    .then(data => {
        data.forEach(s => {
            // Check if this section was previously selected
            const isSelected = s.id == {{ $filterSectionId ?? 'null' }} ? 'selected' : '';
            sectionSel.innerHTML += `<option value="${s.id}" ${isSelected}>${s.name}</option>`;
        });
    });
}
</script>

<!-- FLASH MESSAGES -->
@if(session('success'))
<div class="mx-4 mb-3 p-3 bg-green-50 border border-green-200 rounded-2xl text-green-700 text-xs font-bold">
    <i class="fa-solid fa-circle-check mr-1"></i> {{ session('success') }}
</div>
@endif
@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

<!-- LIST -->
<div class="px-4 space-y-3 mb-8">
    @forelse($classes as $oc)
    @php
        $startTs = \Carbon\Carbon::parse($oc->class_date.' '.$oc->start_time)->timestamp;
        $endTs   = \Carbon\Carbon::parse($oc->class_date.' '.$oc->end_time)->timestamp;
        $nowTs   = $now->timestamp;
        $dyn     = $nowTs >= $endTs ? 'completed' : ($nowTs >= $startTs ? 'current' : 'upcoming');
        $startable = $nowTs >= ($startTs - 120); // ✅ enabled 2 minutes before
        $badge = [
            'upcoming'  => 'bg-blue-100 text-blue-600',
            'current'   => 'bg-green-100 text-green-600',
            'completed' => 'bg-slate-100 text-slate-500',
        ][$dyn];
        $icon = [
            'upcoming'  => 'fa-clock',
            'current'   => 'fa-play',
            'completed' => 'fa-check',
        ][$dyn];
    @endphp

    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 {{ $dyn == 'current' ? 'ring-2 ring-green-200' : '' }}">
        <div class="flex items-start justify-between gap-2">
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2 flex-wrap mb-1">
                    <h4 class="font-bold text-slate-800 text-sm truncate">{{ $oc->title }}</h4>
                    <span class="px-2 py-0.5 rounded-full text-[9px] font-black uppercase {{ $badge }}">
                        <i class="fa-solid {{ $icon }} mr-0.5"></i> {{ $dyn }}
                    </span>
                </div>
                <div class="flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-slate-500 font-medium">
                    <span><i class="fa-solid fa-book-open text-amber-500 mr-0.5"></i> {{ $oc->subject }}</span>
                    <span><i class="fa-solid fa-school text-indigo-500 mr-0.5"></i> {{ $oc->class_name }}{{ $oc->section_name ? ' - '.$oc->section_name : ' (All Sections)' }}</span>
                    <span><i class="fa-solid fa-user-group text-blue-500 mr-0.5"></i> {{ $oc->student_count > 0 ? $oc->student_count.' Students' : 'All Students' }}</span>
                </div>
                <p class="mt-1.5 text-xs font-bold text-slate-700">
                    <i class="fa-regular fa-calendar-days text-slate-400 mr-1"></i>{{ \Carbon\Carbon::parse($oc->class_date)->format('d M Y') }}
                    <span class="mx-1 text-slate-300">|</span>
                    <i class="fa-regular fa-clock text-slate-400 mr-1"></i>{{ \Carbon\Carbon::parse($oc->start_time)->format('h:i A') }} - {{ \Carbon\Carbon::parse($oc->end_time)->format('h:i A') }}
                </p>
            </div>
        </div>

             <div class="mt-3 flex items-center gap-2">
         @if($dyn == 'completed')
             {{-- ✅ COMPLETED STATUS BADGE --}}
             <div class="flex-1 py-2.5 rounded-xl text-[11px] font-black text-center uppercase tracking-wide bg-slate-100 text-slate-400 border border-slate-200">
                 <i class="fa-solid fa-check-circle mr-1"></i> Class Completed
             </div>
         @else
             {{-- ✅ START CLASS BUTTON — blinking + enabled 2 min before start --}}
             <a href="{{ route('staff.online_classes.start', ['slug' => session('staff_school_slug'), 'id' => $oc->id]) }}"
                target="_blank"
                data-start="{{ $startTs }}"
                class="start-btn flex-1 py-2.5 rounded-xl text-[11px] font-black text-center uppercase tracking-wide transition-all
                {{ $startable ? 'bg-gradient-to-r from-green-500 to-emerald-600 text-white shadow-lg shadow-green-200 blink-active' : 'bg-slate-100 text-slate-400 pointer-events-none' }}">
                 <i class="fa-solid fa-video mr-1"></i>
                 <span class="btn-label">{{ $startable ? 'Start Class' : 'Starts ' . \Carbon\Carbon::parse($oc->start_time)->format('h:i A') }}</span>
             </a>
             
             {{-- ✅ EDIT & DELETE ONLY IF UPCOMING --}}
             @if($dyn == 'upcoming')
             <a href="{{ route('staff.online_classes.edit', ['slug' => session('staff_school_slug'), 'id' => $oc->id]) }}"
                class="w-10 h-10 flex-shrink-0 bg-amber-50 text-amber-600 border border-amber-200 rounded-xl flex items-center justify-center active:scale-95 transition-transform">
                 <i class="fa-solid fa-pen text-xs"></i>
             </a>
             <form method="POST" action="{{ route('staff.online_classes.destroy', ['slug' => session('staff_school_slug'), 'id' => $oc->id]) }}"
                   onsubmit="return confirm('Delete this online class?');">
                 @csrf @method('DELETE')
                 <button type="submit" class="w-10 h-10 bg-red-50 text-red-600 border border-red-200 rounded-xl flex items-center justify-center active:scale-95 transition-transform">
                     <i class="fa-solid fa-trash text-xs"></i>
                 </button>
             </form>
             @endif
         @endif
     </div>
    </div>
    @empty
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-8 text-center">
        <i class="fa-solid fa-video-slash text-3xl text-slate-300 mb-2"></i>
        <p class="text-xs font-bold text-slate-400">No online classes found.</p>
    </div>
    @endforelse
</div>

<style>
    /* ✅ Blinking effect for the START button once enabled */
    @keyframes blinkGlow {
        0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.6); }
        50%      { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
    }
    .blink-active { animation: blinkGlow 1.2s infinite; }
</style>

<script>
    // ✅ Sync client clock with server clock, then enable START button 2 min before class
    const serverNowMs = {{ \Carbon\Carbon::now()->timestamp }} * 1000;
    const offset = serverNowMs - Date.now();

    setInterval(() => {
        const now = Date.now() + offset;
        document.querySelectorAll('.start-btn').forEach(btn => {
            const startMs = parseInt(btn.dataset.start) * 1000;
            if (now >= startMs - 120000) { // 2 minutes before
                btn.classList.remove('bg-slate-100','text-slate-400','pointer-events-none');
                btn.classList.add('bg-gradient-to-r','from-green-500','to-emerald-600','text-white','shadow-lg','shadow-green-200','blink-active');
                const label = btn.querySelector('.btn-label');
                if (label && !label.dataset.live) { label.textContent = 'Start Class'; label.dataset.live = '1'; }
            }
        });
    }, 1000);
</script>
@endsection