@extends('layouts.app')

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

@section('content')
    @php
        $accent = fn (string $s) => match ($s) {
            'Live' => 'bg-emerald-500/15 text-emerald-700',
            'Completed' => 'bg-sky-500/15 text-sky-700',
            default => 'bg-slate-500/15 text-slate-700',
        };

        // Source sorting: click the active header to flip; a new header starts ascending.
        $toggle = function (string $key) use ($filters) {
            $current = $filters['sort'];
            $dir = $filters['dir'];

            if ($current === $key) {
                return route('online.videos', array_merge($filters, ['dir' => $dir === 'asc' ? 'desc' : 'asc']));
            }

            return route('online.videos', array_merge($filters, ['sort' => $key, 'dir' => 'asc']));
        };

        $arrow = fn (string $key) => $filters['sort'] === $key ? ($filters['dir'] === 'asc' ? '↑' : '↓') : '↕';
    @endphp

    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <p class="text-xs font-medium text-muted-foreground">Schedule and run live video lessons for online classes</p>
                <h1 class="text-lg font-semibold">Video Classes</h1>
            </div>
            <button type="button" onclick="document.getElementById('video-new').open = true"
                    class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">
                Schedule Class
            </button>
        </div>

        @include('partials.flashes')

        <div class="grid grid-cols-2 gap-3 lg:grid-cols-3">
            @foreach ([
                ['label' => 'Upcoming Classes', 'value' => $stats['Upcoming Classes']],
                ['label' => 'Live Now', 'value' => $stats['Live Now']],
                ['label' => 'Total Classes', 'value' => $stats['Total Classes']],
            ] as $stat)
                <div class="rounded-xl border border-border bg-card p-4">
                    <div class="flex flex-col">
                        <span class="text-lg font-semibold leading-tight tabular-nums">{{ $stat['value'] }}</span>
                        <span class="text-xs text-muted-foreground">{{ $stat['label'] }}</span>
                    </div>
                </div>
            @endforeach
        </div>

        <form method="get" action="{{ route('online.videos') }}"
              class="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-card p-3">
            <div class="flex flex-col gap-1.5">
                <input type="search" name="q" value="{{ $filters['q'] }}" placeholder="Search classes..."
                       class="h-9 w-56 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
            </div>
            <select name="class" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                <option value="All" @selected($filters['class'] === 'All')>All Classes</option>
                @foreach ($classOptions as $c)
                    <option value="{{ $c }}" @selected($filters['class'] === $c)>{{ $c }}</option>
                @endforeach
            </select>
            <select name="status" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                <option value="All" @selected($filters['status'] === 'All')>All Statuses</option>
                @foreach ($statuses as $s)
                    <option value="{{ $s }}" @selected($filters['status'] === $s)>{{ $s }}</option>
                @endforeach
            </select>
            <input type="hidden" name="sort" value="{{ $filters['sort'] }}">
            <input type="hidden" name="dir" value="{{ $filters['dir'] }}">
            <input type="hidden" name="per_page" value="{{ $filters['per_page'] }}">
            <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Filter</button>
            <a href="{{ route('online.videos') }}" class="h-9 rounded-lg border border-border px-3 py-2 text-sm hover:bg-accent">Clear</a>
            <div class="ml-auto flex items-center gap-2">
                <a href="{{ route('online.videos.csv', $filters) }}"
                   class="rounded-lg border border-border px-3 py-2 text-sm font-medium hover:bg-accent">CSV</a>
                <a href="{{ route('online.videos.print', $filters) }}" target="_blank"
                   class="rounded-lg border border-border px-3 py-2 text-sm font-medium hover:bg-accent">PDF</a>
            </div>
        </form>

        <div class="rounded-xl border border-border bg-card">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                            <th class="px-3 py-2">
                                <a href="{{ $toggle('class_name') }}" class="flex items-center gap-1 uppercase hover:text-foreground">Class {{ $arrow('class_name') }}</a>
                            </th>
                            <th class="px-3 py-2">
                                <a href="{{ $toggle('subject') }}" class="flex items-center gap-1 uppercase hover:text-foreground">Subject {{ $arrow('subject') }}</a>
                            </th>
                            <th class="px-3 py-2 font-medium">Teacher</th>
                            <th class="px-3 py-2">
                                <a href="{{ $toggle('date') }}" class="flex items-center gap-1 uppercase hover:text-foreground">Date &amp; Time {{ $arrow('date') }}</a>
                            </th>
                            <th class="px-3 py-2 font-medium">Duration</th>
                            <th class="px-3 py-2 font-medium">Status</th>
                            <th class="px-3 py-2 text-right font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $video)
                            <tr class="border-b last:border-0 hover:bg-accent/40">
                                <td class="px-3 py-2 font-medium">{{ $video->class_name }}</td>
                                <td class="px-3 py-2">{{ $video->subject }}</td>
                                <td class="px-3 py-2 text-muted-foreground">{{ $video->teacher }}</td>
                                <td class="px-3 py-2 text-xs">
                                    <div class="flex flex-col">
                                        <span>{{ $video->isoDate() }}</span>
                                        <span class="text-muted-foreground">{{ $video->class_time }}</span>
                                    </div>
                                </td>
                                <td class="px-3 py-2">{{ $video->duration }} min</td>
                                <td class="px-3 py-2">
                                    @if ($video->status === 'Live')
                                        <span class="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[10px] font-medium {{ $accent('Live') }}">
                                            <span class="relative flex size-2">
                                                <span class="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75"></span>
                                                <span class="relative inline-flex size-2 rounded-full bg-emerald-500"></span>
                                            </span>
                                            Live Now
                                        </span>
                                    @else
                                        <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $accent($video->status) }}">{{ $video->status }}</span>
                                    @endif
                                </td>
                                <td class="px-3 py-2">
                                    <div class="flex items-center justify-end gap-1">
                                        @if ($video->status === 'Live')
                                            <button type="button" onclick="document.getElementById('room-{{ $video->id }}').classList.toggle('hidden')"
                                                    class="rounded-md bg-primary px-2 py-1 text-xs text-primary-foreground hover:bg-primary/90">Join</button>
                                        @elseif ($video->status === 'Scheduled')
                                            <a href="{{ route('online.videos.info', $video) }}" target="_blank"
                                               class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Start</a>
                                        @endif
                                        <button type="button" onclick="document.getElementById('video-{{ $video->id }}').classList.toggle('hidden')"
                                                class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">Edit</button>
                                        <form method="post" action="{{ route('online.videos.destroy', $video) }}"
                                              onsubmit="return confirm('Delete the {{ $video->subject }} class for {{ $video->class_name }}?')">
                                            @csrf @method('DELETE')
                                            <button class="rounded-md border border-rose-300 px-2 py-1 text-xs text-rose-700 hover:bg-rose-50">Delete</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>

                            @if ($video->status === 'Live')
                                <tr class="hidden" id="room-{{ $video->id }}">
                                    <td colspan="7" class="bg-muted/30 px-3 py-4">
                                        <div class="rounded-lg border border-border bg-card p-4">
                                            <h3 class="font-medium">Video Room</h3>
                                            <p class="text-xs text-muted-foreground">{{ $video->subject }} &middot; {{ $video->class_name }}</p>

                                            <div class="mt-3 grid gap-3 sm:grid-cols-2">
                                                <div class="rounded-lg border border-border p-3 text-sm">
                                                    Room: {{ $video->subject }} ({{ $video->class_name }})
                                                </div>
                                                <div class="flex items-center justify-between gap-2 rounded-lg border border-border p-3">
                                                    <div class="flex flex-col">
                                                        <span class="text-xs text-muted-foreground">Host &middot; {{ $video->isoDate() }} {{ $video->class_time }}</span>
                                                        <span class="text-sm font-medium">{{ $video->teacher }}</span>
                                                    </div>
                                                    <span class="rounded-full px-2 py-0.5 text-[10px] font-medium {{ $accent('Live') }}">Live Now</span>
                                                </div>
                                            </div>

                                            <div class="mt-3 flex justify-end gap-2">
                                                <a href="{{ route('online.videos.info', $video) }}" target="_blank"
                                                   class="rounded-lg border border-border px-3 py-1.5 text-xs hover:bg-accent">Print Info</a>
                                                <button type="button" class="rounded-lg bg-primary px-3 py-1.5 text-xs text-primary-foreground hover:bg-primary/90">Open Meeting</button>
                                                <button type="button" onclick="document.getElementById('room-{{ $video->id }}').classList.add('hidden')"
                                                        class="rounded-lg border border-border px-3 py-1.5 text-xs hover:bg-accent">Close</button>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            @endif

                            <tr class="hidden" id="video-{{ $video->id }}">
                                <td colspan="7" class="bg-muted/30 px-3 py-4">
                                    @include('online.partials.video-form', [
                                        'action' => route('online.videos.update', $video),
                                        'method' => 'PUT',
                                        'prefix' => 'video-'.$video->id,
                                        'row' => $video,
                                        'classCombos' => $classCombos,
                                        'subjectMap' => $subjectMap,
                                        'teachers' => $teachers,
                                    ])
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="px-3 py-8 text-center text-muted-foreground">No video classes match your filters.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            <div class="border-t px-4 py-2 text-xs text-muted-foreground">
                {{ $rows->total() }} of {{ $stats['Total Classes'] }} video classes
            </div>
        </div>

        <details id="video-new" class="rounded-xl border border-border bg-card p-4" @if ($errors->any()) open @endif>
            <summary class="cursor-pointer text-sm font-semibold">Schedule Video Class</summary>
            <div class="mt-3">
                <p class="mb-3 text-xs text-muted-foreground">Fields marked * are required.</p>
                @include('online.partials.video-form', [
                    'action' => route('online.videos.store'),
                    'method' => 'POST',
                    'prefix' => 'video-new',
                    'row' => null,
                    'classCombos' => $classCombos,
                    'subjectMap' => $subjectMap,
                    'teachers' => $teachers,
                ])
            </div>
        </details>
    </div>
@endsection

@push('scripts')
    <script>window.__subjectMap = @json($subjectMap);</script>
    <script>
        (function () {
            // Narrow the Subject select to the selected Class's form, as the source does.
            function sync(classSelect) {
                const target = document.querySelector('[data-subject-target="' + classSelect.getAttribute('data-subject-source') + '"]');
                if (!target) return;

                const current = target.value;
                const option = classSelect.options[classSelect.selectedIndex];
                const form = option ? option.getAttribute('data-form') : null;

                target.innerHTML = '<option value="">Select subject</option>';

                (window.__subjectMap && window.__subjectMap[form] ? window.__subjectMap[form] : []).forEach(function (subject) {
                    const opt = document.createElement('option');
                    opt.value = subject;
                    opt.textContent = subject;
                    target.appendChild(opt);
                });

                if (current) target.value = current;
            }

            document.querySelectorAll('.js-class').forEach(function (select) {
                select.addEventListener('change', function () { sync(select); });
            });
        })();
    </script>
@endpush