@extends('layouts.student')
@section('title', 'Kuis Dikumpulkan: ' . $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.75rem; 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; }
    .stat-block { background:var(--cream); border:1px solid var(--border); border-radius:16px; padding:1.25rem; text-align:center; }
    .action-btn { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; padding:.75rem 1.25rem; border-radius:14px; transition:opacity .2s; text-decoration:none; }
    .action-btn:hover { opacity:.85; }
    .action-btn.primary { background:var(--navy); color:white; }
    .action-btn.secondary { background:white; border:1px solid var(--border); color:var(--navy); }
    .action-btn.warning { background:#ea580c; color:white; }

    @keyframes popIn {
        from { opacity:0; transform:scale(.85) translateY(12px); }
        to { opacity:1; transform:scale(1) translateY(0); }
    }
    .pop-in { animation: popIn .4s cubic-bezier(.34,1.56,.64,1) both; }
</style>

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

    {{-- Success Header --}}
    <div class="text-center mb-8">
        <div class="w-24 h-24 rounded-full mx-auto mb-5 flex items-center justify-center pop-in" style="background:#d1fae5;">
            <i class="fa fa-check-circle" style="font-size:40px; color:#10b981;"></i>
        </div>
        <span class="section-label">{{ $quiz->course->title }}</span>
        <h1 class="edu-font-display text-3xl font-bold mt-1" style="color:var(--navy);">Kuis Berhasil Dikumpulkan!</h1>
        <p class="text-sm mt-2" style="color:var(--text-muted);">{{ $quiz->title }}</p>
    </div>

    @if(isset($attempt))
    @php
        $passed = ($attempt->score ?? 0) >= ($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

    {{-- Score --}}
    <div style="max-width:440px; margin:0 auto 1.5rem;">
        <div class="card text-center" style="border:2px solid {{ $passed ? '#a7f3d0' : '#fca5a5' }};">
            <p class="section-label mb-3">Skor Akhir</p>
            <p class="edu-font-display font-bold" style="font-size:72px; line-height:1; color:{{ $passed ? '#065f46' : '#dc2626' }};">{{ $attempt->score ?? 0 }}</p>
            <p class="text-sm mt-1 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-trophy' : 'fa-times-circle' }} text-xs"></i>
                {{ $passed ? 'Lulus' : 'Belum Lulus' }}
            </span>

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

    {{-- Statistik --}}
    <div style="max-width:440px; margin:0 auto 2rem;">
        <div class="grid grid-cols-3 gap-3">
            <div class="stat-block">
                <p class="edu-font-display text-2xl font-bold" style="color:#065f46;">{{ $correctCount }}</p>
                <p class="text-xs mt-1" style="color:var(--text-muted);">Benar</p>
            </div>
            <div class="stat-block">
                <p class="edu-font-display text-2xl font-bold" style="color:#dc2626;">{{ $wrongCount }}</p>
                <p class="text-xs mt-1" style="color:var(--text-muted);">Salah</p>
            </div>
            <div class="stat-block">
                <p class="edu-font-display text-2xl font-bold" style="color:var(--navy);">{{ $quiz->questions->count() }}</p>
                <p class="text-xs mt-1" style="color:var(--text-muted);">Total Soal</p>
            </div>
        </div>
    </div>
    @endif

    {{-- Aksi --}}
    <div class="flex flex-wrap justify-center gap-3">
        <a href="{{ route('student.courses.show', $quiz->course) }}" class="action-btn secondary">
            <i class="fa fa-arrow-left text-xs"></i> Kembali ke Kursus
        </a>

        @if(isset($attempt))
        <a href="{{ route('student.quiz.result', [$quiz, $attempt]) }}" class="action-btn primary">
            <i class="fa fa-eye text-xs"></i> Lihat Detail Hasil
        </a>
        @endif

        @php
            $canRetry = !isset($attempt) || ($attempt->score ?? 100) < ($quiz->passing_score ?? 70);
            $attemptsCount = isset($attempts) ? $attempts->count() : 0;
            $maxAttempts = $quiz->max_attempts ?? null;
            $canAttempt = !$maxAttempts || $attemptsCount < $maxAttempts;
        @endphp

        @if($canRetry && $canAttempt)
        <a href="{{ route('student.quiz.show', $quiz) }}" class="action-btn warning">
            <i class="fa fa-redo text-xs"></i> Coba Lagi
        </a>
        @endif
    </div>

</div>
@endsection