@extends('layouts.admin')
@section('title', $quiz->title)
@section('header', 'Detail Quiz')

@section('content')

<a href="{{ route('admin.quiz.index') }}"
   class="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 mb-6">
    <i class="fa fa-arrow-left" style="font-size:11px"></i> Kembali
</a>

@if(session('success'))
<div class="mb-4 px-4 py-3 bg-green-50 border border-green-200 text-green-700 rounded-xl text-sm">
    {{ session('success') }}
</div>
@endif

{{-- Header --}}
<div class="bg-white rounded-xl border border-gray-100 p-6 mb-6">
    <div class="flex items-start justify-between gap-4">
        <div>
            <h2 class="text-xl font-bold text-gray-800 mb-1">{{ $quiz->title }}</h2>
            <p class="text-sm text-gray-500">{{ $quiz->course->title }} · {{ $quiz->course->teacher->name }}</p>
            <div class="flex items-center gap-4 mt-3">
                <span class="text-xs text-gray-500">
                    <i class="fa fa-clock mr-1 text-gray-400"></i>
                    {{ $quiz->duration_minutes ? $quiz->duration_minutes . ' menit' : 'Tanpa batas waktu' }}
                </span>
                <span class="text-xs text-gray-500">
                    <i class="fa fa-redo mr-1 text-gray-400"></i>
                    Maks {{ $quiz->max_attempts }}x percobaan
                </span>
                <span class="text-xs text-gray-500">
                    <i class="fa fa-check-circle mr-1 text-gray-400"></i>
                    Nilai lulus: {{ $quiz->passing_score }}
                </span>
            </div>
        </div>
        <a href="{{ route('admin.quiz.edit', $quiz) }}"
           class="text-sm bg-blue-50 hover:bg-blue-100 text-blue-700 px-4 py-2 rounded-xl font-medium transition shrink-0">
            Edit Quiz
        </a>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

    {{-- Soal --}}
    <div class="bg-white rounded-xl border border-gray-100 p-5">
        <div class="flex items-center justify-between mb-5">
            <h3 class="font-semibold text-gray-800">Daftar Soal ({{ $quiz->questions->count() }})</h3>
        </div>

        <div class="space-y-3">
            @forelse($quiz->questions as $question)
            <div class="p-4 rounded-xl border border-gray-100 bg-gray-50">
                <div class="flex items-start justify-between gap-2 mb-2">
                    <div class="flex items-start gap-2">
                        <span class="w-6 h-6 rounded-full bg-blue-100 text-blue-700 text-xs flex items-center justify-center shrink-0 font-semibold mt-0.5">
                            {{ $loop->iteration }}
                        </span>
                        <p class="text-sm text-gray-700">{{ $question->question }}</p>
                    </div>
                    <span class="text-xs px-2 py-0.5 rounded-full shrink-0
                        {{ $question->type === 'multiple' ? 'bg-indigo-50 text-indigo-600' : 'bg-orange-50 text-orange-600' }}">
                        {{ $question->type === 'multiple' ? 'PG' : 'Essay' }}
                    </span>
                </div>

                @if($question->type === 'multiple')
                <div class="ml-8 space-y-1">
                    @foreach($question->answers as $answer)
                    <div class="flex items-center gap-2">
                        <span class="w-4 h-4 rounded-full border-2 shrink-0
                            {{ $answer->is_correct ? 'border-green-500 bg-green-500' : 'border-gray-300' }}"></span>
                        <p class="text-xs text-gray-600">{{ $answer->answer_text }}</p>
                    </div>
                    @endforeach
                </div>
                @endif

                <p class="text-xs text-gray-400 mt-2 ml-8">{{ $question->points }} poin</p>
            </div>
            @empty
            <div class="text-center py-8">
                <i class="fa fa-question-circle text-gray-200" style="font-size:32px"></i>
                <p class="text-sm text-gray-400 mt-3">Belum ada soal.</p>
            </div>
            @endforelse
        </div>
    </div>

    {{-- Hasil Percobaan Siswa --}}
    <div class="bg-white rounded-xl border border-gray-100 p-5">
        <h3 class="font-semibold text-gray-800 mb-5">Hasil Siswa</h3>

        <div class="space-y-2">
            @forelse($quiz->attempts->load('student') as $attempt)
            <div class="flex items-center justify-between p-3 rounded-xl bg-gray-50">
                <div class="flex items-center gap-3">
                    <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center font-bold text-xs">
                        {{ strtoupper(substr($attempt->student->name, 0, 1)) }}
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-800">{{ $attempt->student->name }}</p>
                        <p class="text-xs text-gray-400">{{ $attempt->started_at->format('d M Y') }}</p>
                    </div>
                </div>
                <span class="text-sm font-bold px-3 py-1 rounded-full
                    {{ $attempt->score >= $quiz->passing_score ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-600' }}">
                    {{ $attempt->score ?? '–' }}
                </span>
            </div>
            @empty
            <div class="text-center py-8">
                <div class="w-12 h-12 bg-gray-50 rounded-2xl flex items-center justify-center mx-auto mb-3">
                    <i class="fa fa-users text-gray-300" style="font-size:18px"></i>
                </div>
                <p class="text-sm text-gray-400">Belum ada siswa yang mengerjakan quiz ini.</p>
            </div>
            @endforelse
        </div>
    </div>
</div>

@endsection