@extends('student.layouts.app')

@section('title', ($course->subject?->name ?: $course->name) . ' | ' . __('dashboard.Virtual Class Rooms'))

@section('content')
@php
    $isArabic = app()->getLocale() === 'ar';
@endphp

<div class="space-y-6">
    @include('student.courses.inc.overview', ['course' => $course])
    @include('student.courses.inc.tabs', ['course' => $course])

    <section class="student-card overflow-hidden">
        <div class="flex flex-col gap-4 border-b border-zinc-200 bg-zinc-50 px-6 py-5 dark:border-zinc-800 dark:bg-zinc-950 lg:flex-row lg:items-center lg:justify-between">
            <div>
                <h2 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الفصول الافتراضية' : 'Virtual classrooms' }}</h2>
                <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'ترتيب أوضح للحصص القادمة والجارية مع وصول مباشر للتفاصيل أو الدخول.' : 'A cleaner layout for upcoming and live sessions with direct access to details or joining.' }}</p>
            </div>
            <div class="grid gap-3 sm:grid-cols-2">
                <div class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900">
                    <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'إجمالي الفصول' : 'Total rooms' }}</div>
                    <div class="mt-1 text-xl font-black text-zinc-900 dark:text-white font-numbers">{{ $virtualClassRooms->count() }}</div>
                </div>
                <div class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900">
                    <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'جارية الآن' : 'Live now' }}</div>
                    <div class="mt-1 text-xl font-black text-zinc-900 dark:text-white font-numbers">{{ $virtualClassRooms->where('status', 'ongoing')->count() }}</div>
                </div>
            </div>
        </div>
        <div class="grid gap-4 p-6 md:grid-cols-2 xl:grid-cols-3">
            @if ($virtualClassRooms->isNotEmpty())
                @foreach ($virtualClassRooms as $classroom)
                    @php
                        $statusClasses = match($classroom->status) {
                            'ongoing' => 'bg-rose-100 text-rose-700 dark:bg-rose-500/10 dark:text-rose-300',
                            'upcoming' => 'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-300',
                            default => 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300',
                        };
                        $statusLabel = match($classroom->status) {
                            'ongoing' => $isArabic ? 'جارية الآن' : 'Ongoing',
                            'upcoming' => $isArabic ? 'قريبة' : 'Upcoming',
                            'finished' => $isArabic ? 'منتهية' : 'Finished',
                            default => $classroom->status ?: ($isArabic ? 'غير محدد' : 'Unknown'),
                        };
                    @endphp
                    <article class="rounded-3xl border border-zinc-200 bg-white p-5 transition hover:border-primary/30 dark:border-zinc-800 dark:bg-zinc-900">
                        <div class="flex items-start justify-between gap-3">
                            <div class="flex items-start gap-4">
                                <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-primary-light text-primary dark:bg-primary/10 dark:text-primary-container">
                                    <i class="fa-solid fa-video text-lg"></i>
                                </div>
                                <div class="min-w-0">
                                    <h3 class="text-base font-black text-zinc-900 dark:text-white">{{ $classroom->title }}</h3>
                                    <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">{{ $classroom->start_time?->format('Y-m-d h:i A') }}</p>
                                    @if ($classroom->end_time)
                                        <p class="mt-1 text-xs text-zinc-400 dark:text-zinc-500">{{ $classroom->end_time->format('h:i A') }}</p>
                                    @endif
                                </div>
                            </div>
                            <span class="rounded-full px-3 py-1 text-xs font-black {{ $statusClasses }}">{{ $statusLabel }}</span>
                        </div>

                        <div class="mt-5 rounded-2xl bg-zinc-50 px-4 py-3 text-sm text-zinc-600 dark:bg-zinc-950 dark:text-zinc-300">
                            {{ $classroom->description ?: ($isArabic ? 'لا يوجد وصف إضافي للحصة.' : 'No extra description for this class.') }}
                        </div>

                        <div class="mt-5 flex items-center justify-between gap-3">
                            <span class="rounded-full bg-zinc-50 px-3 py-2 text-xs font-black text-zinc-500 dark:bg-zinc-950 dark:text-zinc-400">
                                <i class="fa-regular fa-clock me-1"></i>
                                {{ $classroom->start_time?->diffForHumans() }}
                            </span>
                            <a href="{{ route('student.courses.virtual-class-room.show', $classroom->id) }}" class="inline-flex items-center gap-2 whitespace-nowrap rounded-2xl {{ $classroom->status === 'ongoing' ? 'bg-primary text-white' : 'bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-200' }} px-4 py-2 text-sm font-black text-decoration-none">
                                <i class="fa-solid {{ $classroom->status === 'ongoing' ? 'fa-circle-play' : 'fa-eye' }} text-xs"></i>
                                {{ $classroom->status === 'ongoing' ? ($isArabic ? 'الدخول الآن' : 'Join now') : ($isArabic ? 'عرض التفاصيل' : 'View details') }}
                            </a>
                        </div>
                    </article>
                @endforeach
            @else
                <div class="col-span-full rounded-3xl border border-dashed border-zinc-300 p-10 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
                    {{ __('dashboard.No virtual classes scheduled yet.') }}
                </div>
            @endif
        </div>
    </section>
</div>
@endsection