{{-- resources/views/tests/weekly/show.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.app';
            break;
    }

    $now = time();

    $notStartedYet = $test->start_at && strtotime($test->start_at) > $now;
    $ended         = $test->end_at   && strtotime($test->end_at)   < $now;
    $lockedByTime  = $notStartedYet || $ended;
	
@endphp

@extends($layout)

@section('title', 'اختبار: ' . $test->title)
@section('page-title', '📝 ' . $test->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-4xl mx-auto px-3 sm:px-4 lg:px-6 space-y-6">

        {{-- تنبيهات --}}
        @if(session('success'))
            <div class="rounded-2xl border border-emerald-200 bg-emerald-50/90 text-emerald-800 px-4 py-3 text-xs sm:text-sm flex items-start gap-2 shadow-sm dark:bg-emerald-900/25 dark:border-emerald-700 dark:text-emerald-100">
                <i class="fa-solid fa-circle-check mt-0.5"></i>
                <p>{{ session('success') }}</p>
            </div>
        @endif
        @if(session('error'))
            <div class="rounded-2xl border border-rose-200 bg-rose-50/90 text-rose-800 px-4 py-3 text-xs sm:text-sm flex items-start gap-2 shadow-sm dark:bg-rose-900/25 dark:border-rose-700 dark:text-rose-100">
                <i class="fa-solid fa-triangle-exclamation mt-0.5"></i>
                <p>{{ session('error') }}</p>
            </div>
        @endif

        {{-- كارت معلومات الاختبار --}}
        <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-12 -left-10 w-32 h-32 rounded-full bg-cyan-400/20 blur-2xl"></div>
            <div class="pointer-events-none absolute -bottom-14 -right-16 w-40 h-40 rounded-full bg-indigo-500/20 blur-3xl"></div>

            <div class="relative px-4 sm:px-6 lg:px-8 py-5 sm:py-6 space-y-3">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                    <div class="space-y-1">
                        <h1 class="text-lg sm:text-2xl font-black text-slate-900 dark:text-white">
                            {{ $test->title }}
                        </h1>
                        @if($test->description)
                            <p class="text-xs sm:text-sm text-slate-600 dark:text-slate-300">
                                {{ $test->description }}
                            </p>
                        @endif
                    </div>
                    <div class="flex flex-col items-start sm:items-end gap-1 text-[11px] sm:text-xs">
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-slate-900 text-slate-50 text-[10px] sm:text-xs shadow-md dark:bg-slate-800">
                            <i class="fa-regular fa-user"></i>
                            {{ $user->name }}
                        </span>
                        <span class="text-slate-500 dark:text-slate-400">
                            {{ now()->locale('ar')->isoFormat('dddd D MMM YYYY — h:mm A') }}
                        </span>
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-2 text-[11px] sm:text-xs text-slate-500 dark:text-slate-400 pt-2 border-t border-slate-100 dark:border-slate-800">
                    <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200">
                        <i class="fa-regular fa-circle-question text-[11px]"></i>
                        {{ $test->questions->count() }} سؤال
                    </span>

                    {{-- شارة الوقت (محدّثة: لم يبدأ / انتهى / ضمن الوقت) --}}
                    @if($test->start_at || $test->end_at)
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full
                            @if($notStartedYet)
                                bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-200
                            @elseif($ended)
                                bg-rose-50 text-rose-700 dark:bg-rose-900/30 dark:text-rose-200
                            @else
                                bg-sky-50 text-sky-700 dark:bg-sky-900/30 dark:text-sky-200
                            @endif
                        ">
                            <i class="fa-regular fa-clock text-[11px]"></i>

                            @if($notStartedYet)
                                لم يبدأ بعد — يبدأ {{ $test->start_at->format('Y/m/d H:i') }}
                            @elseif($ended)
                                انتهى — انتهى {{ $test->end_at->format('Y/m/d H:i') }}
                            @else
                                @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') }}
                                @endif
                            @endif
                        </span>
                    @endif

                    @if($existingSubmission)
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-200">
                            <i class="fa-regular fa-circle-check text-[11px]"></i>
                            تم الحل مسبقاً — نتيجتك:
                            <strong class="ml-1">
                                {{ $existingSubmission->score }} / {{ $test->questions->count() }}
                            </strong>
                        </span>
                    @else
                        <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-200">
                            <i class="fa-solid fa-bolt text-[11px]"></i>
                            يمكنك حل هذا الاختبار مرة واحدة فقط
                        </span>
                    @endif
                </div>
            </div>
        </div>

        {{-- إذا مقفول بالوقت: كرت قفل بدل الأسئلة/الفورم --}}
        @if($lockedByTime && !$existingSubmission)
            <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-md shadow-slate-200/60 dark:shadow-black/40 overflow-hidden">
                <div class="px-4 sm:px-6 lg:px-8 py-5 sm:py-6 flex items-start gap-3">
                    <div class="h-10 w-10 rounded-2xl bg-gradient-to-br from-slate-700 to-slate-900 flex items-center justify-center text-white shadow-sm dark:from-slate-700 dark:to-slate-800">
                        <i class="fa-solid fa-lock text-sm"></i>
                    </div>
                    <div class="flex-1 space-y-1">
                        <h2 class="text-sm sm:text-base font-bold text-slate-900 dark:text-white">
                            @if($notStartedYet)
                                هذا الاختبار لم يبدأ بعد
                            @else
                                انتهى وقت هذا الاختبار
                            @endif
                        </h2>
                        <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                            @if($notStartedYet)
                                لا يمكنك البدء قبل موعد البداية.
                            @else
                                لا يمكنك حل الاختبار بعد انتهاء المدة.
                            @endif
                        </p>

                        <div class="pt-3">
                            <a href="{{ route('tests.weekly.index') }}"
                               class="inline-flex items-center gap-1.5 px-3 py-2 rounded-2xl text-xs font-semibold
                                      bg-slate-900 text-white hover:bg-slate-800 dark:bg-slate-800 dark:hover:bg-slate-700 shadow-sm">
                                <i class="fa-solid fa-arrow-rotate-left text-[11px]"></i>
                                العودة للاختبارات
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @else
            {{-- الأسئلة --}}
            <div class="rounded-3xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-md shadow-slate-200/60 dark:shadow-black/40">
                <div class="px-4 sm:px-6 lg:px-8 py-4 sm:py-5 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between gap-2">
                    <div class="flex items-center gap-2">
                        <div class="h-8 w-8 rounded-2xl bg-gradient-to-br from-cyan-500 to-indigo-500 flex items-center justify-center text-white shadow-sm">
                            <i class="fa-solid fa-list-check text-xs"></i>
                        </div>
                        <div>
                            <h2 class="text-sm sm:text-base font-semibold text-slate-900 dark:text-slate-50">
                                أسئلة الاختبار
                            </h2>
                            <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                                اختر إجابة واحدة لكل سؤال، ثم اضغط "إرسال الإجابات".
                            </p>
                        </div>
                    </div>
                    <a href="{{ route('tests.weekly.index') }}"
                       class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-xl text-[11px] sm:text-xs font-medium text-slate-600 hover:text-slate-900 bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-700">
                        <i class="fa-solid fa-arrow-rotate-left text-[10px]"></i>
                        العودة للاختبارات
                    </a>
                </div>

                <div class="px-3 sm:px-5 lg:px-8 py-4 sm:py-6">
                    @if($test->questions->isEmpty())
                        <div class="rounded-2xl border border-dashed border-slate-300 dark:border-slate-700 px-4 py-6 text-center text-sm text-slate-500 dark:text-slate-400">
                            لا توجد أسئلة مضافة لهذا الاختبار بعد.
                        </div>
                    @else
                        @if($existingSubmission)
                            {{-- عرض فقط، بدون فورم --}}
                            <div class="space-y-4 sm:space-y-5">
                                @foreach($test->questions as $index => $question)
                                    @php
                                        $qNumber = $index + 1;
                                        $userAnswer = $existingSubmission->answers
                                            ->where('question_id', $question->id)
                                            ->first();
                                    @endphp
                                    <div class="rounded-2xl border border-slate-200/80 dark:border-slate-700/80 bg-slate-50/70 dark:bg-slate-900/60 px-3 sm:px-4 py-3 sm:py-4">
                                        <div class="flex items-start gap-2 sm:gap-3">
                                            <div class="mt-0.5">
                                                <div class="h-6 w-6 rounded-full bg-slate-900 text-white text-[11px] flex items-center justify-center shadow-sm dark:bg-slate-700">
                                                    {{ $qNumber }}
                                                </div>
                                            </div>
                                            <div class="flex-1 space-y-2">
                                                <p class="text-[13px] sm:text-sm font-semibold text-slate-900 dark:text-slate-50">
                                                    {{ $question->question_text }}
                                                </p>
                                                <div class="space-y-1.5">
                                                    @foreach($question->answers as $answer)
                                                        @php
                                                            $isUser = $userAnswer && $userAnswer->answer_id == $answer->id;
                                                            $isCorrect = (bool) $answer->is_correct;
                                                        @endphp
                                                        <div class="flex items-start gap-2 text-[12px] sm:text-[13px]">
                                                            <div class="mt-1">
                                                                @if($isCorrect)
                                                                    <i class="fa-solid fa-check-circle text-emerald-500 text-xs"></i>
                                                                @elseif($isUser && !$isCorrect)
                                                                    <i class="fa-solid fa-xmark-circle text-rose-500 text-xs"></i>
                                                                @else
                                                                    <i class="fa-regular fa-circle text-slate-400 text-xs"></i>
                                                                @endif
                                                            </div>
                                                            <div class="flex-1">
                                                                <span class="text-slate-700 dark:text-slate-200">
                                                                    {{ $answer->answer_text }}
                                                                </span>
                                                                @if($isUser)
                                                                    <span class="ml-1 inline-flex items-center px-1.5 py-0.5 rounded-full text-[10px]
                                                                        {{ $isCorrect ? 'bg-emerald-50 text-emerald-700 border border-emerald-200' : 'bg-rose-50 text-rose-700 border border-rose-200' }}">
                                                                        إجابتك
                                                                    </span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            {{-- فورم حل الاختبار --}}
                            <form method="POST" action="{{ route('tests.weekly.submit', $test) }}" class="space-y-4 sm:space-y-5">
                                @csrf

                                @foreach($test->questions as $index => $question)
                                    @php $qNumber = $index + 1; @endphp
                                    <div class="rounded-2xl border border-slate-200/80 dark:border-slate-700/80 bg-white dark:bg-slate-900 px-3 sm:px-4 py-3 sm:py-4 shadow-sm">
                                        <div class="flex items-start gap-2 sm:gap-3">
                                            <div class="mt-0.5">
                                                <div class="h-6 w-6 rounded-full bg-cyan-500 text-white text-[11px] flex items-center justify-center shadow-sm">
                                                    {{ $qNumber }}
                                                </div>
                                            </div>
                                            <div class="flex-1 space-y-2">
                                                <p class="text-[13px] sm:text-sm font-semibold text-slate-900 dark:text-slate-50">
                                                    {{ $question->question_text }}
                                                </p>
                                                <div class="space-y-1.5">
                                                    @foreach($question->answers as $answer)
                                                        <label class="flex items-start gap-2 text-[12px] sm:text-[13px] cursor-pointer group">
                                                            <input type="radio"
                                                                   name="answers[{{ $question->id }}]"
                                                                   value="{{ $answer->id }}"
                                                                   class="mt-1 h-3.5 w-3.5 sm:h-4 sm:w-4 text-cyan-600 border-slate-300 dark:border-slate-600 focus:ring-cyan-500"
                                                                   required>
                                                            <span class="flex-1 text-slate-700 dark:text-slate-200 group-hover:text-slate-900 dark:group-hover:text-white">
                                                                {{ $answer->answer_text }}
                                                            </span>
                                                        </label>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pt-3 border-t border-slate-100 dark:border-slate-800">
                                    <p class="text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                                        تأكد من جميع إجاباتك قبل الإرسال، لا يمكن تعديلها بعد ذلك.
                                    </p>
                                    <button type="submit"
                                            class="inline-flex items-center justify-center gap-2 px-4 sm:px-6 py-2 sm:py-2.5 rounded-2xl text-xs sm:text-sm font-semibold
                                                   bg-gradient-to-r from-emerald-500 via-cyan-500 to-indigo-500 text-white shadow-md hover:shadow-lg
                                                   hover:from-emerald-600 hover:via-cyan-600 hover:to-indigo-600 active:scale-[0.98] transition-all">
                                        <i class="fa-solid fa-paper-plane text-[11px] sm:text-xs"></i>
                                        <span>إرسال الإجابات</span>
                                    </button>
                                </div>
                            </form>
                        @endif
                    @endif
                </div>
            </div>
        @endif

    </div>
</div>
@endsection