{{-- resources/views/tests/weekly/index.blade.php --}}
@php
    $user = auth()->user();
    $role = $user->membership_status ?? $user->role ?? 'member';

    switch ($role) {
        case 'super-admin':
            $layout = 'layouts.superadmin';
            break;

        case 'advisor':
            $layout = 'layouts.advisor';
            break;

        case 'admin':
        case 'moderator':
            $layout = 'layouts.admin';
            break;

        case 'official':
        case 'beta':
        case 'member':
        default:
            $layout = 'layouts.member';
            break;
    }
@endphp

@extends($layout)

@section('title', 'الاختبارات الأسبوعية')
@section('page-title', '📚 الاختبارات الأسبوعية')

@section('content')
<div class="min-h-screen bg-gradient-to-b from-slate-50 via-slate-100 to-slate-50 dark:from-slate-950 dark:via-slate-900 dark:to-slate-950 py-6 sm:py-8">
    <div class="max-w-5xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

        {{-- هيدر --}}
        <div class="relative overflow-hidden rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-lg shadow-slate-300/40 dark:shadow-black/40">
            <div class="pointer-events-none absolute -top-16 -left-10 w-40 h-40 rounded-full bg-cyan-400/20 blur-3xl"></div>
            <div class="pointer-events-none absolute -bottom-24 -right-16 w-52 h-52 rounded-full bg-indigo-500/25 blur-3xl"></div>

            <div class="relative px-4 sm:px-6 lg:px-8 py-6 sm:py-7 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                <div class="space-y-1">
                    <h1 class="text-xl sm:text-2xl lg:text-3xl font-black tracking-tight text-slate-900 dark:text-white">
                        الاختبارات الأسبوعية للأعضاء
                    </h1>
                    <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-300">
                        هنا ستجد الاختبارات المتاحة لك حسب نوع عضويتك ونوع الحساب.
                    </p>
                </div>
                <div class="flex flex-col items-start sm:items-end gap-1 text-xs sm:text-sm">
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200 text-[11px] sm:text-xs dark:bg-emerald-900/20 dark:text-emerald-200 dark:border-emerald-700/60">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
                        {{ $user->name }} — {{ $user->membership_status }}
                    </span>
                    <span class="text-[11px] text-slate-500 dark:text-slate-400">
                        {{ now()->locale('ar')->isoFormat('dddd D MMMM YYYY — h:mm A') }}
                    </span>
                </div>
            </div>
        </div>

        {{-- قائمة الاختبارات --}}
        <div class="space-y-3">
            @if($tests->isEmpty())
                <div class="rounded-2xl border border-dashed border-slate-300/70 dark:border-slate-700/80 bg-white/70 dark:bg-slate-900/70 px-4 sm:px-6 py-8 text-center">
                    <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-300">
                        <i class="fa-solid fa-circle-question text-lg"></i>
                    </div>
                    <p class="text-sm sm:text-base font-medium text-slate-700 dark:text-slate-200">
                        لا توجد اختبارات متاحة لك حالياً
                    </p>
                    <p class="mt-1 text-xs sm:text-sm text-slate-500 dark:text-slate-400">
                        عند نشر اختبار جديد مناسب لعضويتك سيظهر هنا تلقائياً.
                    </p>
                </div>
            @else
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3 sm:gap-4">
                    @foreach($tests as $test)
                        @php
                            $alreadyDone = $test->my_submissions_count > 0;
                        @endphp
                        <div class="group relative overflow-hidden rounded-2xl bg-white dark:bg-slate-900 border border-slate-200/80 dark:border-slate-700/80 shadow-sm hover:shadow-xl hover:border-cyan-400/70 transition-all duration-200">
                            <div class="pointer-events-none absolute -top-10 -left-10 w-32 h-32 rounded-full bg-cyan-400/10 blur-2xl group-hover:bg-cyan-400/20"></div>
                            <div class="pointer-events-none absolute -bottom-14 -right-10 w-40 h-40 rounded-full bg-indigo-500/10 blur-2xl group-hover:bg-indigo-500/20"></div>

                            <div class="relative p-4 sm:p-5 flex flex-col h-full gap-3">
                                <div class="flex items-start justify-between gap-3">
                                    <div class="space-y-1">
                                        <h2 class="text-sm sm:text-base font-bold text-slate-900 dark:text-slate-50 line-clamp-2">
                                            {{ $test->title }}
                                        </h2>
                                        @if($test->description)
                                            <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400 line-clamp-2">
                                                {{ $test->description }}
                                            </p>
                                        @endif
                                    </div>
                                    <div class="flex flex-col items-end gap-1">
                                        <span class="inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium
                                            @if($alreadyDone)
                                                bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-200 dark:border-emerald-700/50
                                            @else
                                                bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-900/30 dark:text-amber-200 dark:border-amber-700/50
                                            @endif
                                        ">
                                            <span class="w-1.5 h-1.5 rounded-full
                                                {{ $alreadyDone ? 'bg-emerald-500' : 'bg-amber-400' }} mr-1"></span>
                                            {{ $alreadyDone ? 'تم الحل' : 'بانتظار الحل' }}
                                        </span>
                                        <span class="text-[10px] text-slate-400 dark:text-slate-500">
                                            @if($test->start_at && $test->end_at)
                                                من {{ $test->start_at->format('Y/m/d H:i') }}
                                                حتى {{ $test->end_at->format('Y/m/d H:i') }}
                                            @elseif($test->start_at)
                                                يبدأ {{ $test->start_at->format('Y/m/d H:i') }}
                                            @elseif($test->end_at)
                                                متاح حتى {{ $test->end_at->format('Y/m/d H:i') }}
                                            @else
                                                متاح حالياً
                                            @endif
                                        </span>
                                    </div>
                                </div>

                                <div class="mt-auto flex items-center justify_between gap-2 pt-2 border-t border-slate-100 dark:border-slate-800">
                                    <div class="flex items-center gap-1.5 text-[11px] text-slate-500 dark:text-slate-400">
                                        <i class="fa-regular fa-circle-question"></i>
                                        <span>
                                            {{ $test->questions()->count() }} سؤال
                                        </span>
                                    </div>
                                    <a href="{{ route('tests.weekly.show', $test) }}"
                                       class="inline-flex items-center gap-1.5 rounded-xl px-3 py-1.5 text-[11px] sm:text-xs font-semibold
                                              bg-gradient-to-r from-cyan-500 to-indigo-500 text-white shadow-sm hover:shadow-md hover:from-cyan-600 hover:to-indigo-600">
                                        <span>{{ $alreadyDone ? 'عرض النتيجة' : 'بدء الاختبار' }}</span>
                                        <i class="fa-solid fa-arrow-left text-[10px]"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

    </div>
</div>
@endsection