@extends('student.layouts.app')

@section('title', $virtualClassRoom->title . ' | ' . ($course->subject?->name ?: $course->name))

@section('content')
@php
    $isArabic = app()->getLocale() === 'ar';
    $statusClasses = match($virtualClassRoom->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',
        'finished' => 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300',
        default => 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300',
    };
    $statusLabel = match($virtualClassRoom->status) {
        'ongoing' => $isArabic ? 'جارية الآن' : 'Ongoing',
        'upcoming' => $isArabic ? 'قريبة' : 'Upcoming',
        'finished' => $isArabic ? 'منتهية' : 'Finished',
        default => $virtualClassRoom->status ?: ($isArabic ? 'غير محدد' : 'Unknown'),
    };
    $startsAt = $virtualClassRoom->start_time;
    $endsAt = $virtualClassRoom->end_time;
@endphp

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

    <section class="grid gap-6 xl:grid-cols-[minmax(0,1.35fr)_minmax(21rem,0.85fr)]">
        <div class="space-y-6">
            <div class="student-card overflow-hidden">
                <div class="border-b border-zinc-200 bg-zinc-50 px-6 py-5 dark:border-zinc-800 dark:bg-zinc-950">
                    <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                        <div>
                            <div class="flex flex-wrap items-center gap-3">
                                <span class="inline-flex items-center gap-2 rounded-full bg-primary-light px-3 py-1 text-[11px] font-black text-primary dark:bg-primary/10 dark:text-primary-container">
                                    <i class="fa-solid fa-video"></i>
                                    {{ $isArabic ? 'الفصل الافتراضي' : 'Virtual classroom' }}
                                </span>
                                <span class="rounded-full px-3 py-1 text-[11px] font-black {{ $statusClasses }}">{{ $statusLabel }}</span>
                            </div>
                            <h1 class="mt-4 text-2xl font-black text-zinc-900 dark:text-white md:text-3xl">{{ $virtualClassRoom->title }}</h1>
                            <p class="mt-2 text-sm font-semibold text-zinc-500 dark:text-zinc-400">{{ $course->teacher?->name ?: ($isArabic ? 'لم يتم تعيين المعلم بعد' : 'Teacher not assigned yet') }}</p>
                        </div>

                        <div class="grid min-w-[15rem] gap-3 sm:grid-cols-2">
                            <div class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-center dark:border-zinc-800 dark:bg-zinc-900">
                                <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'البداية' : 'Starts' }}</div>
                                <div class="mt-1 text-sm font-black text-zinc-900 dark:text-white">{{ $startsAt?->format('h:i A') ?: '--' }}</div>
                            </div>
                            <div class="rounded-2xl border border-zinc-200 bg-white px-4 py-3 text-center dark:border-zinc-800 dark:bg-zinc-900">
                                <div class="text-[11px] font-black text-zinc-400">{{ $isArabic ? 'النهاية' : 'Ends' }}</div>
                                <div class="mt-1 text-sm font-black text-zinc-900 dark:text-white">{{ $endsAt?->format('h:i A') ?: '--' }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="space-y-5 p-6">
                    <div class="overflow-hidden rounded-3xl border border-zinc-200 dark:border-zinc-800">
                        <div class="h-64 bg-cover bg-center" style="background-image:url('{{ $virtualClassRoom->image ?? asset('assets/media/stock/16_9/img-1.jpg') }}')"></div>
                        <div class="bg-white p-5 dark:bg-zinc-900">
                            <h3 class="text-lg font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'وصف الحصة' : 'Session description' }}</h3>
                            <p class="mt-3 whitespace-pre-line text-sm leading-7 text-zinc-600 dark:text-zinc-300">{{ $virtualClassRoom->description ?: ($isArabic ? 'لا يوجد وصف إضافي لهذه الحصة.' : 'No extra description for this session.') }}</p>
                        </div>
                    </div>

                    <div class="grid gap-4 md:grid-cols-3">
                        <div class="rounded-3xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                            <div class="text-xs font-black text-zinc-400">{{ $isArabic ? 'تاريخ الحصة' : 'Session date' }}</div>
                            <div class="mt-2 text-base font-black text-zinc-900 dark:text-white">{{ $startsAt?->format('Y-m-d') ?: ($isArabic ? 'غير محدد' : 'Not set') }}</div>
                            @if ($startsAt)
                                <div class="mt-2 text-xs font-semibold text-zinc-500 dark:text-zinc-400">{{ $startsAt->diffForHumans() }}</div>
                            @endif
                        </div>
                        <div class="rounded-3xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                            <div class="text-xs font-black text-zinc-400">{{ $isArabic ? 'وقت البداية' : 'Start time' }}</div>
                            <div class="mt-2 text-base font-black text-zinc-900 dark:text-white">{{ $startsAt?->format('Y-m-d h:i A') ?: ($isArabic ? 'غير محدد' : 'Not set') }}</div>
                        </div>
                        <div class="rounded-3xl border border-zinc-200 bg-white p-5 dark:border-zinc-800 dark:bg-zinc-900">
                            <div class="text-xs font-black text-zinc-400">{{ $isArabic ? 'وقت النهاية' : 'End time' }}</div>
                            <div class="mt-2 text-base font-black text-zinc-900 dark:text-white">{{ $endsAt?->format('Y-m-d h:i A') ?: ($isArabic ? 'غير محدد' : 'Not set') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="student-card overflow-hidden">
                <div class="border-b border-zinc-200 bg-zinc-50 px-6 py-5 dark:border-zinc-800 dark:bg-zinc-950">
                    <h2 class="text-xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'الدخول إلى الحصة' : 'Join this session' }}</h2>
                    <p class="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
                        {{ $isArabic ? 'معلومات الدخول والحالة الحالية للفصل الافتراضي.' : 'Access information and the current classroom status.' }}
                    </p>
                </div>
                <div class="p-6">
                    <div class="rounded-[1.75rem] bg-zinc-50 p-5 dark:bg-zinc-950">
                        @if ($virtualClassRoom->status === 'ongoing' && $virtualClassRoom->join_link)
                            <a href="{{ $virtualClassRoom->join_link }}" target="_blank" class="flex items-center justify-between gap-3 rounded-3xl bg-primary px-5 py-4 text-decoration-none text-white">
                                <div>
                                    <div class="text-sm font-black">{{ $isArabic ? 'الحصة متاحة الآن' : 'Session is live now' }}</div>
                                    <div class="mt-1 text-xs text-white/80">{{ $isArabic ? 'اضغط للدخول المباشر إلى الفصل الافتراضي.' : 'Click to open the virtual classroom immediately.' }}</div>
                                </div>
                                <i class="fa-solid fa-arrow-up-right-from-square"></i>
                            </a>
                        @else
                            <div class="rounded-3xl border border-dashed border-zinc-300 px-5 py-6 text-center dark:border-zinc-700">
                                <div class="text-sm font-black text-zinc-900 dark:text-white">
                                    {{ $isArabic ? 'رابط الانضمام غير متاح حالياً' : 'Join link is not available right now' }}
                                </div>
                                <div class="mt-2 text-xs text-zinc-500 dark:text-zinc-400">
                                    {{ $virtualClassRoom->status === 'upcoming'
                                        ? ($isArabic ? 'سيصبح متاحاً عند بدء الحصة أو عندما يفتحه المعلم.' : 'It will become available when the class starts or when the teacher opens it.')
                                        : ($isArabic ? 'يمكنك مراجعة تفاصيل الحصة الآن والعودة لاحقاً.' : 'You can review the session details and come back later.') }}
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="student-card p-6">
                <div class="flex items-start justify-between gap-4">
                    <div>
                        <span class="rounded-full px-3 py-1 text-[11px] font-black {{ $statusClasses }}">{{ $statusLabel }}</span>
                        <h2 class="mt-4 text-2xl font-black text-zinc-900 dark:text-white">{{ $isArabic ? 'ملخص الحصة' : 'Session summary' }}</h2>
                        <p class="mt-2 text-sm font-semibold leading-6 text-zinc-500 dark:text-zinc-400">
                            {{ $isArabic ? 'عرض سريع لأهم معلومات الفصل الافتراضي.' : 'A quick view of the most important virtual classroom details.' }}
                        </p>
                    </div>
                    <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-headset text-xl"></i>
                    </div>
                </div>
                <div class="mt-4 space-y-3">
                    <div class="flex items-center justify-between rounded-2xl bg-zinc-50 px-4 py-3 dark:bg-zinc-950">
                        <span class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'اسم المادة' : 'Course' }}</span>
                        <span class="text-sm font-black text-zinc-900 dark:text-white">{{ $course->name }}</span>
                    </div>
                    <div class="flex items-center justify-between rounded-2xl bg-zinc-50 px-4 py-3 dark:bg-zinc-950">
                        <span class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'بداية الحصة' : 'Starts' }}</span>
                        <span class="text-sm font-black text-zinc-900 dark:text-white">{{ $startsAt?->format('h:i A') ?: '--' }}</span>
                    </div>
                    <div class="flex items-center justify-between rounded-2xl bg-zinc-50 px-4 py-3 dark:bg-zinc-950">
                        <span class="text-sm font-bold text-zinc-500 dark:text-zinc-400">{{ $isArabic ? 'نهاية الحصة' : 'Ends' }}</span>
                        <span class="text-sm font-black text-zinc-900 dark:text-white">{{ $endsAt?->format('h:i A') ?: '--' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection