@extends('siswa.layout')

@section('content')
<div class="max-w-3xl mx-auto bg-white p-8 rounded-xl shadow space-y-6">

    <!-- ================= HEADER ================= -->
    <h1 class="text-2xl font-bold text-gray-900 flex items-center gap-2">
        <i data-lucide="check-square" class="w-6 h-6"></i>
        Hasil Quiz
    </h1>

    <p class="text-gray-700 font-semibold">
        {{ $quiz->title }}
    </p>

    <!-- ================= SCORE ================= -->
    <p class="text-lg">
        Nilai kamu:
        <span class="{{ $isPassed ? 'text-green-600' : 'text-red-600' }} font-bold text-xl">
            {{ $score }}
        </span>
    </p>

    <!-- ================= STATUS ================= -->
    @if($isPassed)
        <div class="flex items-center gap-2 text-green-600 font-semibold">
            <i data-lucide="check-circle" class="w-5 h-5"></i>
            Selamat, kamu lulus!
        </div>
    @else
        <div class="flex items-center gap-2 text-red-600 font-semibold">
            <i data-lucide="x-circle" class="w-5 h-5"></i>
            Belum lulus, silakan ulangi.
        </div>
    @endif

    <!-- ================= ACTION ================= -->
    <div class="flex flex-wrap gap-4 pt-6 border-t">

        <a href="{{ route('siswa.dashboard') }}"
           class="inline-flex items-center gap-2 px-6 py-3
                  bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition">
            <i data-lucide="layout-dashboard" class="w-5 h-5"></i>
            Dashboard
        </a>

        <a href="{{ route('siswa.quiz.intro', $quiz->id) }}"
           class="inline-flex items-center gap-2 px-6 py-3
                  bg-blue-600 text-white rounded-lg hover:bg-blue-500 transition">
            <i data-lucide="rotate-ccw" class="w-5 h-5"></i>
            Kerjakan Ulang Quiz
        </a>

        @if($isPassed && $quiz->lesson_id)
            <a href="{{ route('siswa.modul.show', $quiz->lesson_id) }}"
               class="inline-flex items-center gap-2 px-6 py-3
                      bg-green-600 text-white rounded-lg hover:bg-green-500 transition">
                <i data-lucide="arrow-right-circle" class="w-5 h-5"></i>
                Lanjut Materi
            </a>
        @endif

    </div>

</div>
@endsection