@php
    $answersByQuestion = $submission->userAnswers->keyBy('question_id');
    $test = $submission->test;
@endphp

<div class="space-y-4">
    <div class="rounded-2xl border border-slate-700 bg-slate-900/70 p-4">
        <div class="flex flex-wrap items-center justify-between gap-2 text-xs sm:text-sm">
            <div>
                <div class="text-slate-300">
                    المستخدم:
                    <span class="font-semibold text-white">
                        {{ $submission->user->name ?? ('عضو #' . $submission->user_id) }}
                    </span>
                </div>
                <div class="text-slate-400 mt-1">
                    الاختبار:
                    <span class="font-semibold text-slate-100">{{ $test->title }}</span>
                </div>
            </div>

            <div class="text-right">
                @php
                    $score = $submission->score;
                    $cls =
                        $score >= 85 ? 'text-emerald-300' :
                        ($score >= 60 ? 'text-amber-300' : 'text-rose-300');
                @endphp
                <div class="text-[11px] text-slate-400">النتيجة</div>
                <div class="text-xl font-extrabold {{ $cls }}">{{ $score }}%</div>
                <div class="text-[11px] text-slate-500 mt-1">
                    تم الإرسال في:
                    {{ optional($submission->submitted_at)->format('Y/m/d H:i') ?? $submission->created_at->format('Y/m/d H:i') }}
                </div>
            </div>
        </div>
    </div>

    @foreach($test->questions as $index => $question)
        @php
            $ua         = $answersByQuestion->get($question->id);
            $selectedId = $ua?->answer_id;
        @endphp

        <div class="rounded-2xl border border-slate-700 bg-slate-900/60 p-4">
            <p class="font-semibold text-slate-50 text-sm sm:text-base mb-3">
                {{ $index + 1 }}. {{ $question->question_text }}
            </p>

            @foreach($question->answers as $answer)
                @php
                    $isCorrect  = $answer->is_correct;
                    $isSelected = $answer->id == $selectedId;
                    $rowCls = 'bg-slate-900/40 border-slate-700 text-slate-200';

                    if ($isCorrect && $isSelected) {
                        $rowCls = 'bg-emerald-600/25 border-emerald-500/60 text-emerald-50';
                    } elseif ($isCorrect) {
                        $rowCls = 'bg-emerald-700/20 border-emerald-500/60 text-emerald-200';
                    } elseif ($isSelected) {
                        $rowCls = 'bg-rose-700/20 border-rose-500/60 text-rose-200';
                    }
                @endphp

                <div class="px-3 py-2 mb-2 rounded-xl border text-xs sm:text-sm {{ $rowCls }}">
                    <div class="flex items-start justify-between gap-2">
                        <span>{{ $answer->answer_text }}</span>

                        <span class="flex items-center gap-1 text-[11px]">
                            @if($isCorrect)
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-500/20 border border-emerald-400/70 text-emerald-100">
                                    <i class="fa-solid fa-check"></i> صحيح
                                </span>
                            @endif

                            @if($isSelected && !$isCorrect)
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-rose-500/25 border border-rose-400/70 text-rose-100">
                                    <i class="fa-solid fa-xmark"></i> إجابته
                                </span>
                            @elseif($isSelected && $isCorrect)
                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-emerald-500/25 border border-emerald-400/70 text-emerald-50">
                                    <i class="fa-solid fa-star"></i> إجابته الصحيحة
                                </span>
                            @endif
                        </span>
                    </div>
                </div>
            @endforeach
        </div>
    @endforeach
</div>