@extends('siswa.layout')

@section('content')

<div class="max-w-3xl mx-auto bg-white p-8 rounded-2xl shadow space-y-6">

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

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

    <!-- ================= INFO QUIZ ================= -->
    <ul class="space-y-3 text-gray-700">

        <li class="flex items-center gap-2">
            <i data-lucide="target" class="w-5 h-5 text-gray-500"></i>
            <span>
                Syarat kelulusan:
                <strong>{{ $quiz->passing_score }}%</strong>
            </span>
        </li>

        <li class="flex items-center gap-2">
            <i data-lucide="help-circle" class="w-5 h-5 text-gray-500"></i>
            <span>
                Jumlah soal:
                <strong>{{ $quiz->questions->count() }}</strong>
            </span>
        </li>

        <li class="flex items-center gap-2">
            <i data-lucide="timer" class="w-5 h-5 text-gray-500"></i>
            <span>
                Durasi:
                <strong>
                    {{ $quiz->duration ? $quiz->duration.' menit' : 'Tidak dibatasi' }}
                </strong>
            </span>
        </li>

        @if($quiz->available_at)
        <li class="flex items-center gap-2 text-blue-600">
            <i data-lucide="clock" class="w-5 h-5"></i>
            <span>
                Dibuka:
                <strong>
                    {{ \Carbon\Carbon::parse($quiz->available_at)->translatedFormat('d F Y H:i') }}
                </strong>
            </span>
        </li>
        @endif

        @if($quiz->deadline)
        <li class="flex items-center gap-2 text-red-600">
            <i data-lucide="alert-octagon" class="w-5 h-5"></i>
            <span>
                Ditutup:
                <strong>
                    {{ \Carbon\Carbon::parse($quiz->deadline)->translatedFormat('d F Y H:i') }}
                </strong>
            </span>
        </li>
        @endif

    </ul>

    <!-- ================= WARNING ================= -->
    @if($quiz->deadline && now()->gt($quiz->deadline))
        <div class="p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 flex gap-2">
            <i data-lucide="alert-triangle" class="w-5 h-5 mt-0.5"></i>
            <div>
                Waktu pengerjaan telah berakhir. Quiz masih bisa dibuka,
                namun <strong>nilai otomatis 0</strong>.
            </div>
        </div>
    @endif

    <!-- ================= ACTION ================= -->
    <div class="flex justify-between items-center pt-6 border-t">

        <a href="{{ route('siswa.modul.show', $quiz->lesson_id) }}"
           class="text-gray-500 hover:text-black text-sm inline-flex items-center gap-1">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            Kembali ke materi
        </a>

        <a href="{{ route('siswa.quiz.start', $quiz->id) }}"
           class="bg-teal-600 text-white px-8 py-3 rounded-lg
                  hover:bg-teal-500 transition font-semibold inline-flex items-center gap-2">
            <i data-lucide="play-circle" class="w-5 h-5"></i>
            Mulai Quiz
        </a>

    </div>

    <!-- ================= RIWAYAT ATTEMPT ================= -->
    @if($attempts->count())
    <div class="mt-6 border-t pt-4">
        <h3 class="font-semibold mb-3 flex items-center gap-2">
            <i data-lucide="bar-chart-3" class="w-5 h-5"></i>
            Riwayat Pengerjaan
        </h3>

        <ul class="space-y-2 text-sm">
            @foreach($attempts as $a)
                <li class="flex justify-between items-center">
                    <span class="flex items-center gap-1 text-gray-600">
                        <i data-lucide="calendar" class="w-4 h-4"></i>
                        {{ \Carbon\Carbon::parse($a->started_at)->translatedFormat('d F Y H:i') }}
                    </span>

                    <span class="{{ $a->status === 'late' ? 'text-red-600' : 'text-green-600' }} font-semibold">
                        {{ $a->status === 'late' ? 'Terlambat (0)' : $a->score }}
                    </span>
                </li>
            @endforeach
        </ul>
    </div>
    @endif

</div>

@endsection