{{-- resources/views/tests/weekly/partials/_test_card.blade.php --}}
<div class="group relative overflow-hidden rounded-3xl border border-slate-200 bg-white p-4 shadow-sm transition hover:shadow-lg">
    <div class="pointer-events-none absolute -top-14 -right-12 w-44 h-44 rounded-full bg-fuchsia-200/40 blur-3xl opacity-0 group-hover:opacity-100 transition"></div>

    {{-- رأس الكرت --}}
    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0">
            <div class="text-[11px] uppercase tracking-wider text-slate-500">
                اختبار أسبوعي
            </div>
            <h3 class="mt-0.5 font-extrabold text-slate-900 line-clamp-2">
                {{ $test->title }}
            </h3>
        </div>

        <div class="flex flex-col items-end gap-1 shrink-0">
            <span class="px-2.5 py-1 rounded-full text-[11px] border {{ $ui['timeChip'] }}">
                {{ $ui['timeLabel'] }}
            </span>
            <span class="px-2.5 py-1 rounded-full text-[11px] border {{ $ui['solveChip'] }}">
                {{ $ui['solveLabel'] }}
            </span>
        </div>
    </div>

    {{-- وصف --}}
    @if($test->description)
        <p class="mt-2 text-[12px] text-slate-600 leading-relaxed line-clamp-2">
            {{ $test->description }}
        </p>
    @endif

    {{-- معلومات --}}
    <div class="mt-3 text-[12px] text-slate-600 space-y-2">
        <div class="flex items-center gap-2">
            <i class="fa-regular fa-circle-question text-slate-400 w-4"></i>
            <span>{{ $ui['questionsCount'] }} سؤال</span>
        </div>

        <div class="flex items-start gap-2">
            <i class="fa-regular fa-clock text-slate-400 w-4 mt-0.5"></i>
            <div class="leading-relaxed">
                @if($ui['notStartedYet'])
                    يبدأ بعد <b class="text-slate-700">{{ $ui['timeLeftLabel'] }}</b>
                @elseif($ui['ended'])
                    <b class="text-slate-700">انتهى الاختبار</b>
                @else
                    @if($test->start_at && $test->end_at)
                        من {{ \Carbon\Carbon::parse($test->start_at)->format('Y/m/d H:i') }}
                        حتى {{ \Carbon\Carbon::parse($test->end_at)->format('Y/m/d H:i') }}
                    @elseif($test->start_at)
                        يبدأ {{ \Carbon\Carbon::parse($test->start_at)->format('Y/m/d H:i') }}
                    @elseif($test->end_at)
                        متاح حتى {{ \Carbon\Carbon::parse($test->end_at)->format('Y/m/d H:i') }}
                    @else
                        متاح حالياً
                    @endif
                @endif
            </div>
        </div>
    </div>

    {{-- زر --}}
    <div class="mt-4 pt-4 border-t border-slate-100 flex justify-end">
        @if($ui['notStartedYet'])
            <button type="button" disabled
                    class="px-4 py-2 rounded-2xl bg-amber-50 border border-amber-200 text-amber-700 text-xs font-bold cursor-not-allowed shadow-sm">
                لم يبدأ بعد ({{ $ui['timeLeftLabel'] }})
            </button>
        @elseif($ui['ended'])
            <button type="button" disabled
                    class="px-4 py-2 rounded-2xl bg-rose-50 border border-rose-200 text-rose-700 text-xs font-bold cursor-not-allowed shadow-sm">
                انتهى
            </button>
        @else
            <a href="{{ route('tests.weekly.show', $test) }}"
               class="inline-flex items-center justify-center px-4 py-2 rounded-2xl text-xs font-extrabold text-slate-900
                      bg-gradient-to-r from-emerald-300 via-cyan-200 to-sky-100
                      shadow-lg shadow-emerald-200 hover:scale-[1.01] active:scale-100 transition">
                <i class="fa-solid fa-arrow-up-right-from-square ms-2 text-[11px]"></i>
                {{ $ui['alreadyDone'] ? 'عرض النتيجة' : 'بدء الاختبار' }}
            </a>
        @endif
    </div>
</div>