{{-- 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.moderator';
            break;

        case 'official':
        case 'beta':
        case 'member':
        default:
            $layout = 'layouts.member';
            break;
    }
@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 bg-sky-50 text-sky-700 dark:bg-sky-900/30 dark:text-sky-200">
                            <i class="fa-regular fa-clock text-[11px]"></i>

                            @php
                                $start = $test->start_at ? \Carbon\Carbon::parse($test->start_at) : null;
                                $end   = $test->end_at ? \Carbon\Carbon::parse($test->end_at) : null;
                            @endphp

                            @if($start && $end)
                                من {{ $start->format('Y/m/d H:i') }}
                                حتى {{ $end->format('Y/m/d H:i') }}
                            @elseif($start)
                                يبدأ {{ $start->format('Y/m/d H:i') }}
                            @elseif($end)
                                متاح حتى {{ $end->format('Y/m/d H:i') }}
                            @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(!$existingSubmission && $test->questions->isNotEmpty())
            <div class="rounded-2xl bg-white/95 dark:bg-slate-900/95 border border-slate-200/80 dark:border-slate-700 shadow-sm px-4 sm:px-5 py-3.5 text-[11px] sm:text-xs text-slate-600 dark:text-slate-300">
                <div class="flex items-start gap-2">
                    <div class="mt-0.5">
                        <i class="fa-solid fa-circle-info text-sky-500"></i>
                    </div>
                    <div>
                        <div class="font-semibold mb-1">تعليمات حل الاختبار (نظام سلايد لكل سؤال):</div>
                        <ul class="list-disc pr-4 space-y-0.5">
                            <li>الأسئلة تظهر واحداً تلو الآخر، استخدم زر <strong>"السؤال التالي"</strong> للتقدّم.</li>
                            <li>لن يسمح لك الانتقال للسؤال التالي قبل اختيار إجابة للسؤال الحالي.</li>
                            <li>في آخر سؤال، يتغيّر الزر إلى <strong>"إرسال الإجابات"</strong> لإرسال الاختبار كاملاً.</li>
                            <li>يمكنك الرجوع للسؤال السابق باستخدام زر <strong>"السؤال السابق"</strong> قبل الإرسال.</li>
                            <li>بعد إرسال الاختبار، لا يمكن تعديل الإجابات أو حل الاختبار من جديد.</li>
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        {{-- الأسئلة --}}
        <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>

            @if(!$existingSubmission && $test->questions->isNotEmpty())
                {{-- شريط التقدّم --}}
                <div class="px-3 sm:px-5 lg:px-8 pt-3">
                    <div class="mb-1 flex items-center justify-between text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                        <span id="progressLabel">التقدم: 1 / {{ $test->questions->count() }}</span>
                        <span id="progressPercent">0%</span>
                    </div>
                    <div class="w-full h-2 rounded-full bg-slate-200 dark:bg-slate-800 overflow-hidden">
                        <div id="progressBar"
                             class="h-full rounded-full bg-gradient-to-r from-emerald-500 via-cyan-500 to-indigo-500 transition-all duration-300"
                             style="width: 0%;"></div>
                    </div>
                </div>

                {{-- ✅ مسودة الحل (Draft) --}}
                <div id="draftBar" class="hidden px-3 sm:px-5 lg:px-8 pt-2">
                    <div class="rounded-2xl border border-slate-200/80 dark:border-slate-700/80
                                bg-slate-50/80 dark:bg-slate-900/60 px-3 sm:px-4 py-2
                                flex items-center justify-between gap-3 text-[11px] sm:text-xs">
                        <div class="flex items-center gap-2 text-slate-600 dark:text-slate-300">
                            <i class="fa-solid fa-floppy-disk text-emerald-600"></i>
                            <span id="draftText">تم حفظ مسودة الحل.</span>
                        </div>

                        <button type="button" id="clearDraftBtn"
                                class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-xl font-semibold
                                       bg-rose-50 text-rose-700 hover:bg-rose-100
                                       dark:bg-rose-900/30 dark:text-rose-200 dark:hover:bg-rose-900/45">
                            <i class="fa-solid fa-trash-can text-[10px]"></i>
                            <span>مسح المسودة</span>
                        </button>
                    </div>
                </div>
            @endif

            <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 = $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" id="testForm">
                            @csrf

                            {{-- السلايدات (سؤال واحد في كل مرة) --}}
                            @foreach($test->questions as $index => $question)
                                @php $qNumber = $index + 1; @endphp
                                <div class="question-slide 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"
                                     data-index="{{ $index }}">
                                    <div class="flex items-start gap-2 sm:gap-3 mb-2">
                                        <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>
                                    </div>

                                    <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">
                                                <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>
                            @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">
                                <div class="flex items-center gap-2 text-[11px] sm:text-xs text-slate-500 dark:text-slate-400">
                                    <span>سؤال <span id="currentQuestionNumber">1</span> من {{ $test->questions->count() }}</span>
                                </div>

                                <div class="flex items-center gap-2 justify-end">
                                    <button type="button"
                                            id="prevQuestionBtn"
                                            class="inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] sm:text-xs font-semibold
                                                   bg-slate-100 text-slate-700 hover:bg-slate-200
                                                   dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700 disabled:opacity-40 disabled:cursor-not-allowed">
                                        <i class="fa-solid fa-arrow-right text-[10px]"></i>
                                        <span>السؤال السابق</span>
                                    </button>

                                    <button type="button"
                                            id="nextQuestionBtn"
                                            class="inline-flex items-center justify-center gap-1.5 px-3.5 py-1.5 rounded-xl 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 active:scale-[0.98] transition-all">
                                        <span>السؤال التالي</span>
                                        <i class="fa-solid fa-arrow-left text-[10px]"></i>
                                    </button>

                                    <button type="submit"
                                            id="submitTestBtn"
                                            class="hidden inline-flex items-center justify-center gap-1.5 px-3.5 py-1.5 rounded-xl text-[11px] sm:text-xs font-semibold
                                                   bg-gradient-to-r from-emerald-500 via-cyan-500 to-indigo-500 text-white shadow-sm hover:shadow-md
                                                   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-[10px]"></i>
                                        <span>إرسال الإجابات</span>
                                    </button>
                                </div>
                            </div>
                        </form>

                        {{-- ✅ Draft + Slides Script (يحفظ الإجابات + رقم السؤال ويرجع لهم بعد الريفريش) --}}
                        <script>
                        document.addEventListener('DOMContentLoaded', function () {
                            const slides = document.querySelectorAll('.question-slide');
                            if (!slides.length) return;

                            let currentIndex = 0;
                            const total = slides.length;

                            const userId = @json((int) auth()->id());
                            const testId = @json((int) $test->id);
                            const draftKey = `weekly_test_draft_${testId}_${userId}`;

                            const currentQuestionNumberEl = document.getElementById('currentQuestionNumber');
                            const prevBtn   = document.getElementById('prevQuestionBtn');
                            const nextBtn   = document.getElementById('nextQuestionBtn');
                            const submitBtn = document.getElementById('submitTestBtn');
                            const form      = document.getElementById('testForm');

                            const progressBar     = document.getElementById('progressBar');
                            const progressLabel   = document.getElementById('progressLabel');
                            const progressPercent = document.getElementById('progressPercent');

                            const draftBar      = document.getElementById('draftBar');
                            const draftText     = document.getElementById('draftText');
                            const clearDraftBtn = document.getElementById('clearDraftBtn');

                            let saveTimer = null;

                            function safeJsonParse(v){ try { return JSON.parse(v); } catch(e){ return null; } }

                            function collectAnswers(){
                                const data = {};
                                if (!form) return data;

                                const inputs = form.querySelectorAll('input[type="radio"]:checked');
                                inputs.forEach(inp => {
                                    const name = inp.getAttribute('name') || '';
                                    const m = name.match(/^answers\[(\d+)\]$/);
                                    if (m && m[1]) data[m[1]] = String(inp.value);
                                });
                                return data;
                            }

                            function showDraftBar(msg){
                                if (!draftBar) return;
                                if (draftText && msg) draftText.textContent = msg;
                                draftBar.classList.remove('hidden');
                            }

                            function hideDraftBar(){
                                if (!draftBar) return;
                                draftBar.classList.add('hidden');
                            }

                            function updateProgress() {
                                const step = currentIndex + 1;
                                const percent = Math.round((step / total) * 100);

                                if (progressLabel)   progressLabel.textContent   = 'التقدم: ' + step + ' / ' + total;
                                if (progressPercent) progressPercent.textContent = percent + '%';
                                if (progressBar)     progressBar.style.width    = percent + '%';
                            }

                            function saveDraftNow(){
                                if (!form) return;

                                const payload = {
                                    test_id: testId,
                                    user_id: userId,
                                    index: currentIndex,
                                    answers: collectAnswers(),
                                    saved_at: Date.now()
                                };

                                try{
                                    localStorage.setItem(draftKey, JSON.stringify(payload));
                                    showDraftBar('تم حفظ مسودة الحل تلقائيًا.');
                                }catch(e){}
                            }

                            function scheduleSaveDraft(){
                                clearTimeout(saveTimer);
                                saveTimer = setTimeout(saveDraftNow, 250);
                            }

                            function showSlide(index) {
                                slides.forEach((slide, i) => slide.classList.toggle('hidden', i !== index));

                                currentIndex = index;

                                if (currentQuestionNumberEl) currentQuestionNumberEl.textContent = (currentIndex + 1);

                                if (prevBtn) prevBtn.disabled = currentIndex === 0;

                                if (currentIndex === total - 1) {
                                    if (nextBtn)   nextBtn.classList.add('hidden');
                                    if (submitBtn) submitBtn.classList.remove('hidden');
                                } else {
                                    if (nextBtn)   nextBtn.classList.remove('hidden');
                                    if (submitBtn) submitBtn.classList.add('hidden');
                                }

                                updateProgress();
                                scheduleSaveDraft(); // يحفظ رقم السؤال كمان
                            }

                            function isCurrentAnswered() {
                                const slide = slides[currentIndex];
                                if (!slide) return false;
                                return !!slide.querySelector('input[type="radio"]:checked');
                            }

                            function goNext() {
                                if (!isCurrentAnswered()) {
                                    alert('يجب اختيار إجابة قبل الانتقال للسؤال التالي.');
                                    return;
                                }
                                if (currentIndex < total - 1) showSlide(currentIndex + 1);
                            }

                            function goPrev() {
                                if (currentIndex > 0) showSlide(currentIndex - 1);
                            }

                            function clearDraft(){
                                try { localStorage.removeItem(draftKey); } catch(e){}
                                hideDraftBar();
                            }

                            function loadDraft(){
                                const raw = localStorage.getItem(draftKey);
                                const draft = safeJsonParse(raw);
                                if (!draft || !draft.answers) return null;
                                return draft;
                            }

                            function applyDraft(draft){
                                if (!draft || !form) return;

                                Object.entries(draft.answers).forEach(([qId, aId]) => {
                                    const selector = `input[type="radio"][name="answers[${qId}]"][value="${aId}"]`;
                                    const input = form.querySelector(selector);
                                    if (input) input.checked = true;
                                });

                                let idx = Number(draft.index ?? 0);
                                if (Number.isNaN(idx) || idx < 0) idx = 0;
                                if (idx > total - 1) idx = total - 1;

                                showDraftBar('تم استرجاع المسودة — مكمل من آخر نقطة.');
                                showSlide(idx);
                            }

                            // events
                            if (nextBtn) nextBtn.addEventListener('click', goNext);
                            if (prevBtn) prevBtn.addEventListener('click', goPrev);

                            if (form) {
                                form.addEventListener('change', function(e){
                                    if (e.target && e.target.matches('input[type="radio"]')) scheduleSaveDraft();
                                });

                                form.addEventListener('submit', function (e) {
                                    // تأكد الكل مجاوب
                                    for (let i = 0; i < slides.length; i++) {
                                        const slide = slides[i];
                                        const checked = slide.querySelector('input[type="radio"]:checked');
                                        if (!checked) {
                                            e.preventDefault();
                                            showSlide(i);
                                            alert('هناك سؤال لم يتم الإجابة عنه بعد، يرجى الإجابة عليه قبل الإرسال.');
                                            return false;
                                        }
                                    }

                                    // مسح المسودة عند الإرسال
                                    clearDraft();
                                    return true;
                                });
                            }

                            if (clearDraftBtn) {
                                clearDraftBtn.addEventListener('click', function(){
                                    clearDraft();
                                    alert('تم مسح المسودة.');
                                });
                            }

                            // أول تحميل
                            slides.forEach((slide, i) => { if (i !== 0) slide.classList.add('hidden'); });
                            showSlide(0);

                            // استرجاع مسودة إن وجدت
                            const draft = loadDraft();
                            if (draft) applyDraft(draft);
                        });
                        </script>
                    @endif
                @endif
            </div>
        </div>

    </div>

    {{-- فوتر ملحمي لنظام الاختبارات --}}
    <div class="max-w-4xl mx-auto px-3 sm:px-4 lg:px-6 mt-3">
        <div class="pt-3 border-t border-slate-200 dark:border-slate-800 text-[11px] text-center text-slate-500 dark:text-slate-400">
            نظام الاختبارات الأسبوعية داخل
            <span class="font-semibold">فريق الوفاء الذهبي</span>
            صُمِّم لمساعدتك على فهم القرارات والنظام وأركان التيم بشكل أعمق،
            والهدف منه هو <span class="font-semibold text-emerald-600 dark:text-emerald-300">التطوير والتحسين</span> قبل أي شيء آخر.
        </div>
    </div>
</div>
@endsection