@extends('layouts.student')
@section('title', 'Hasil Kuis: ' . $quiz->title)

@section('content')

<style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');
    .edu-font-display { font-family: 'Playfair Display', serif; }
    .edu-font-body { font-family: 'DM Sans', sans-serif; }
    :root { --navy:#0f1e38; --navy-mid:#1a3259; --gold:#c9a84c; --gold-light:#f5e9cc; --cream:#faf8f4; --text-muted:#6b7280; --border:#e8e4dc; }
    .card { background:white; border:1px solid var(--border); border-radius:20px; padding:1.5rem; box-shadow:0 1px 12px rgba(0,0,0,.04); }
    .section-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }
    .answer-option { display:flex; align-items:center; gap:.75rem; padding:.625rem .875rem; border-radius:10px; font-size:13px; }
    .answer-option.correct { background:#d1fae5; color:#065f46; font-weight:500; }
    .answer-option.wrong { background:#fee2e2; color:#dc2626; }
    .answer-option.neutral { color:#4b5563; }
    .review-card { background:white; border-radius:20px; border:1.5px solid var(--border); padding:1.5rem; box-shadow:0 1px 8px rgba(0,0,0,.04); }
    .review-card.correct { border-color:#a7f3d0; }
    .review-card.wrong { border-color:#fca5a5; }
</style>

<div class="edu-font-body">

    {{-- Header --}}
    <div class="text-center mb-8">
        <span class="section-label">{{ $quiz->course->title }} · Kuis</span>
        <h1 class="edu-font-display text-3xl font-bold mt-1" style="color:var(--navy);">{{ $quiz->title }}</h1>
    </div>

    {{-- Score Card --}}
    @php
        $score = $attempt->score ?? 0;
        $passed = $score >= ($quiz->passing_score ?? 70);
        $answers = json_decode($attempt->answers_json, true) ?? [];
        $correctCount = 0; $wrongCount = 0;
        foreach($quiz->questions as $question) {
            $userAnswer = $answers[$question->id] ?? null;
            if ($question->type === 'multiple_choice' || $question->type === 'true_false') {
                $correctAnswer = $question->answers->firstWhere('is_correct', true);
                if ($correctAnswer && $userAnswer == $correctAnswer->id) $correctCount++; else $wrongCount++;
            } elseif ($question->type === 'essay') {
                if (!empty($userAnswer)) $correctCount++; else $wrongCount++;
            }
        }
    @endphp

    <div style="max-width:480px; margin:0 auto 2.5rem;">
        <div class="card text-center" style="border:2px solid {{ $passed ? '#a7f3d0' : '#fca5a5' }};">
            <div class="w-20 h-20 rounded-full mx-auto mb-4 flex items-center justify-center" style="background:{{ $passed ? '#d1fae5' : '#fee2e2' }}; font-size:28px; color:{{ $passed ? '#065f46' : '#dc2626' }};">
                <i class="fa {{ $passed ? 'fa-trophy' : 'fa-times-circle' }}"></i>
            </div>
            <p class="edu-font-display text-6xl font-bold mb-1" style="color:{{ $passed ? '#065f46' : '#dc2626' }};">{{ $score }}</p>
            <p class="text-sm mb-4" style="color:var(--text-muted);">dari 100 poin</p>
            <span class="inline-flex items-center gap-2 text-sm font-semibold px-4 py-1.5 rounded-full" style="background:{{ $passed ? '#d1fae5' : '#fee2e2' }}; color:{{ $passed ? '#065f46' : '#dc2626' }}; border:1px solid {{ $passed ? '#a7f3d0' : '#fca5a5' }};">
                <i class="fa {{ $passed ? 'fa-check' : 'fa-times' }} text-xs"></i>
                {{ $passed ? 'Lulus!' : 'Belum Lulus' }}
            </span>

            <div class="grid grid-cols-3 gap-4 mt-6 pt-5" style="border-top:1px solid var(--border);">
                <div>
                    <p class="edu-font-display text-2xl font-bold" style="color:#065f46;">{{ $correctCount }}</p>
                    <p class="text-xs mt-0.5" style="color:var(--text-muted);">Benar</p>
                </div>
                <div>
                    <p class="edu-font-display text-2xl font-bold" style="color:#dc2626;">{{ $wrongCount }}</p>
                    <p class="text-xs mt-0.5" style="color:var(--text-muted);">Salah</p>
                </div>
                <div>
                    <p class="edu-font-display text-2xl font-bold" style="color:var(--navy);">{{ $quiz->questions->count() }}</p>
                    <p class="text-xs mt-0.5" style="color:var(--text-muted);">Total</p>
                </div>
            </div>

            @if($quiz->passing_score)
            <p class="text-xs mt-4" style="color:var(--text-muted);">Nilai lulus: <strong style="color:var(--navy);">{{ $quiz->passing_score }}</strong></p>
            @endif
        </div>
    </div>

    {{-- Review Jawaban --}}
    @if($attempt->answers && ($quiz->show_review ?? true))
    <div style="max-width:680px; margin:0 auto;">
        <h2 class="edu-font-display text-2xl font-semibold mb-5" style="color:var(--navy);">
            Review Jawaban
        </h2>
        <div class="space-y-4">
            @foreach($quiz->questions as $i => $question)
            @php
                $userAnswer = $attempt->answers[$question->id] ?? null;
                $correctAnswer = $question->correct_answer ?? null;
                $isCorrect = $userAnswer == $correctAnswer;
            @endphp
            <div class="review-card {{ $isCorrect ? 'correct' : 'wrong' }}">
                <div class="flex gap-3">
                    <div class="w-7 h-7 rounded-xl flex items-center justify-center text-xs font-bold flex-shrink-0 mt-0.5" style="background:{{ $isCorrect ? '#d1fae5' : '#fee2e2' }}; color:{{ $isCorrect ? '#065f46' : '#dc2626' }};">
                        {{ $i + 1 }}
                    </div>
                    <div class="flex-1">
                        <p class="text-sm font-medium mb-3" style="color:var(--navy);">{!! nl2br(e($question->question)) !!}</p>

                        @if($question->type === 'multiple_choice' || $question->type === 'true_false')
                        <div class="space-y-1.5">
                            @foreach($question->options ?? [] as $key => $option)
                            <div class="answer-option {{ $key == $correctAnswer ? 'correct' : ($key == $userAnswer && $key != $correctAnswer ? 'wrong' : 'neutral') }}">
                                @if($key == $correctAnswer)
                                    <i class="fa fa-check text-xs"></i>
                                @elseif($key == $userAnswer)
                                    <i class="fa fa-times text-xs"></i>
                                @else
                                    <span style="width:12px; display:inline-block;"></span>
                                @endif
                                {{ $option }}
                            </div>
                            @endforeach
                        </div>

                        @elseif($question->type === 'essay')
                        <div class="mt-2">
                            <p class="text-xs font-medium mb-1.5" style="color:var(--text-muted);">Jawaban kamu:</p>
                            <div class="rounded-xl p-3 text-sm" style="background:var(--cream); color:var(--navy);">{{ $userAnswer ?? '(tidak dijawab)' }}</div>
                        </div>
                        @endif

                        @if($question->explanation)
                        <div class="mt-3 rounded-xl p-3 text-xs" style="background:var(--gold-light); border:1px solid #e8d4a0; color:#92742a;">
                            <i class="fa fa-info-circle mr-1.5"></i>{{ $question->explanation }}
                        </div>
                        @endif
                    </div>

                    <div class="flex-shrink-0">
                        <i class="fa {{ $isCorrect ? 'fa-check-circle' : 'fa-times-circle' }}" style="font-size:18px; color:{{ $isCorrect ? '#10b981' : '#f87171' }};"></i>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif

    {{-- Aksi --}}
    <div class="flex justify-center gap-3 mt-8">
        <a href="{{ route('student.courses.show', $quiz->course) }}" class="inline-flex items-center gap-2 text-sm font-semibold px-5 py-2.5 rounded-2xl transition hover:opacity-80" style="background:white; border:1px solid var(--border); color:var(--navy);">
            <i class="fa fa-arrow-left text-xs"></i> Kembali ke Kursus
        </a>
        @if(!$passed && ($quiz->allow_retry ?? true))
        <a href="{{ route('student.quiz.show', $quiz) }}" class="inline-flex items-center gap-2 text-sm font-semibold px-5 py-2.5 rounded-2xl text-white hover:opacity-90 transition" style="background:var(--navy);">
            <i class="fa fa-redo text-xs"></i> Coba Lagi
        </a>
        @endif
    </div>

</div>
@endsection