@extends('student.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-blue-500 text-xs"></i> Online Classes
    </h3>
</div>

<!-- FILTERS -->
<form method="GET" action="{{ route('student.online_classes.index', ['slug' => session('student_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">
        <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-blue-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-blue-400">
            </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('student.online_classes.index', ['slug' => session('student_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>

<!-- LIST -->
<div class="px-4 space-y-3 mb-8">
    @forelse($classes as $oc)
    @php
        $badge = [
            'upcoming'  => 'bg-blue-100 text-blue-600',
            'current'   => 'bg-green-100 text-green-600',
            'completed' => 'bg-slate-100 text-slate-500',
        ][$oc->dyn_status];
        
        $icon = [
            'upcoming'  => 'fa-clock',
            'current'   => 'fa-play',
            'completed' => 'fa-check',
        ][$oc->dyn_status];
        
        $startTime = \Carbon\Carbon::parse($oc->start_time)->format('h:i A');
    @endphp
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 {{ $oc->dyn_status == '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> {{ $oc->dyn_status }}
                    </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 : '' }}</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>{{ $startTime }} - {{ \Carbon\Carbon::parse($oc->end_time)->format('h:i A') }}
                </p>
            </div>
        </div>
                <div class="mt-3">
            @if($oc->dyn_status == 'completed')
                <div class="w-full 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
                <a href="{{ route('student.online_classes.join', ['slug' => session('student_school_slug'), 'id' => $oc->id]) }}"
                   target="_blank"
                   data-start="{{ $oc->start_ts }}"
                   class="join-btn block w-full py-2.5 rounded-xl text-[11px] font-black text-center uppercase tracking-wide transition-all
                   {{ $oc->dyn_status == 'current' || $now->timestamp >= ($oc->start_ts - 120) ? '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">{{ ($oc->dyn_status == 'current' || $now->timestamp >= ($oc->start_ts - 120)) ? 'Join Class Now' : 'Starts at ' . $startTime }}</span>
                </a>
            @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>
@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
const serverNowMs = {{ \Carbon\Carbon::now()->timestamp }} * 1000;
const offset = serverNowMs - Date.now();

setInterval(() => {
    const now = Date.now() + offset;
    document.querySelectorAll('.join-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 = 'Join Class Now'; label.dataset.live = '1'; }
        }
    });
}, 1000);
</script>
@endsection