@extends('layouts.teacher')
@section('title', $quiz->title)
@section('header', $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; --gold:#c9a84c; --gold-light:#f5e9cc; --cream:#faf8f4; --text-muted:#6b7280; --border:#e8e4dc; }
    .section-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }
    .card { background:white; border:1px solid var(--border); border-radius:20px; padding:1.5rem; box-shadow:0 1px 12px rgba(0,0,0,.04); }
    .form-label { display:block; font-size:13px; font-weight:600; margin-bottom:.5rem; color:var(--navy); }
    .form-label span { font-weight:400; color:#ef4444; }
    .form-input { width:100%; border:1.5px solid var(--border); border-radius:14px; padding:.75rem 1rem; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--navy); background:white; outline:none; transition:border-color .15s; box-sizing:border-box; }
    .form-input:focus { border-color:var(--navy); }
    .form-textarea { width:100%; border:1.5px solid var(--border); border-radius:14px; padding:.75rem 1rem; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--navy); background:white; outline:none; resize:none; transition:border-color .15s; box-sizing:border-box; }
    .form-textarea:focus { border-color:var(--navy); }
    .form-select { width:100%; border:1.5px solid var(--border); border-radius:14px; padding:.75rem 1rem; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--navy); background:white; outline:none; transition:border-color .15s; box-sizing:border-box; appearance:none; }
    .form-select:focus { border-color:var(--navy); }
    .btn-add { display:inline-flex; align-items:center; gap:6px; background:#065f46; color:white; font-size:13px; font-weight:600; padding:.75rem 1.5rem; border-radius:14px; border:none; cursor:pointer; transition:opacity .2s; }
    .btn-add:hover { opacity:.87; }
    .btn-primary { display:inline-flex; align-items:center; gap:6px; background:var(--navy); color:white; font-size:13px; font-weight:600; padding:.625rem 1.25rem; border-radius:14px; border:none; cursor:pointer; transition:opacity .2s; text-decoration:none; }
    .btn-primary:hover { opacity:.87; }
    .stat-block { background:var(--cream); border:1px solid var(--border); border-radius:14px; padding:1rem; text-align:center; }
    .question-card { background:var(--cream); border:1.5px solid var(--border); border-radius:16px; padding:1.25rem; transition:border-color .15s; }
    .question-card:hover { border-color:#c7bfb0; }
    .answer-option { display:flex; align-items:center; gap:.625rem; padding:.5rem .75rem; border-radius:10px; font-size:13px; }
    .answer-option.correct { background:#d1fae5; color:#065f46; font-weight:600; }
    .answer-option.wrong { color:#4b5563; }
    .option-letter { width:22px; height:22px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
    .option-letter.correct { background:#10b981; color:white; }
    .option-letter.wrong { background:#e5e7eb; color:#6b7280; }
    .delete-btn { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; padding:.25rem .625rem; border-radius:8px; background:#fee2e2; color:#dc2626; border:none; cursor:pointer; transition:background .15s; }
    .delete-btn:hover { background:#fecaca; }
    .error-text { font-size:12px; color:#dc2626; margin-top:.375rem; }
</style>

<div class="edu-font-body space-y-6">

    {{-- Header --}}
    <div style="background:white; border:1px solid var(--border); border-radius:24px; padding:1.75rem 2rem; box-shadow:0 1px 12px rgba(0,0,0,.04);">
        <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
            <div>
                <span class="section-label">{{ $course->title }} · Quiz</span>
                <h1 class="edu-font-display text-2xl font-bold mt-1" style="color:var(--navy);">{{ $quiz->title }}</h1>
            </div>
            <a href="{{ route('teacher.courses.quizzes.index', $course) }}" class="btn-primary self-start" style="background:var(--cream); border:1px solid var(--border); color:var(--navy);">
                <i class="fa fa-arrow-left" style="font-size:10px;"></i> Kembali
            </a>
        </div>

        {{-- Quiz Stats --}}
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-5">
            <div class="stat-block">
                <p class="section-label mb-1">Soal</p>
                <p class="edu-font-display text-2xl font-bold" style="color:var(--navy);">{{ $quiz->questions->count() }}</p>
            </div>
            <div class="stat-block">
                <p class="section-label mb-1">Durasi</p>
                <p class="edu-font-display text-2xl font-bold" style="color:var(--navy);">{{ $quiz->duration_minutes ?: '∞' }}</p>
                <p class="text-xs" style="color:var(--text-muted);">{{ $quiz->duration_minutes ? 'menit' : '' }}</p>
            </div>
            <div class="stat-block">
                <p class="section-label mb-1">Percobaan</p>
                <p class="edu-font-display text-2xl font-bold" style="color:var(--navy);">{{ $quiz->max_attempts }}</p>
                <p class="text-xs" style="color:var(--text-muted);">kali</p>
            </div>
            <div class="stat-block">
                <p class="section-label mb-1">Passing Score</p>
                <p class="edu-font-display text-2xl font-bold" style="color:var(--navy);">{{ $quiz->passing_score }}</p>
                <p class="text-xs" style="color:var(--text-muted);">poin</p>
            </div>
        </div>
    </div>

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

        {{-- Form Tambah Soal --}}
        <div class="lg:col-span-2">
            <div class="card">
                <h2 class="edu-font-display text-xl font-semibold mb-5" style="color:var(--navy);">
                    <i class="fa fa-plus-circle mr-2" style="color:var(--gold);"></i>Tambah Soal
                </h2>

                <form method="POST" action="{{ route('teacher.courses.quizzes.questions.store', [$course, $quiz]) }}" class="space-y-4">
                    @csrf

                    @if($errors->any())
                    <div style="background:#fee2e2; border:1px solid #fca5a5; border-radius:14px; padding:.875rem 1rem;">
                        <ul class="text-xs space-y-0.5" style="color:#dc2626; list-style:disc; padding-left:1rem;">
                            @foreach($errors->all() as $err) <li>{{ $err }}</li> @endforeach
                        </ul>
                    </div>
                    @endif

                    {{-- Pertanyaan --}}
                    <div>
                        <label class="form-label">Soal <span>*</span></label>
                        <textarea name="question" rows="3" class="form-textarea"
                                  placeholder="Tuliskan soal...">{{ old('question') }}</textarea>
                        @error('question') <p class="error-text">{{ $message }}</p> @enderror
                    </div>

                    {{-- Poin & Urutan --}}
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="form-label">Poin</label>
                            <input type="number" name="points" value="{{ old('points', 10) }}" min="1" max="100" class="form-input">
                            @error('points') <p class="error-text">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="form-label">Urutan</label>
                            <input type="number" name="order" value="{{ old('order', $quiz->questions->count() + 1) }}" min="1" class="form-input">
                        </div>
                    </div>

                    {{-- Pilihan A-D --}}
                    <div>
                        <p class="form-label mb-3">Pilihan Jawaban</p>
                        <div class="space-y-2.5">
                            @foreach(range(0, 3) as $index)
                            <div class="flex items-center gap-2.5">
                                <div class="w-8 h-8 rounded-xl flex items-center justify-center flex-shrink-0 text-xs font-bold" style="background:var(--gold-light); color:#92742a;">
                                    {{ chr(65 + $index) }}
                                </div>
                                <input type="text" name="answers[{{ $index }}]"
                                       value="{{ old('answers.' . $index) }}"
                                       class="form-input" placeholder="Teks pilihan {{ chr(65 + $index) }}">
                            </div>
                            @endforeach
                        </div>
                        @error('answers') <p class="error-text">{{ $message }}</p> @enderror
                    </div>

                    {{-- Jawaban Benar --}}
                    <div>
                        <label class="form-label">Jawaban Benar <span>*</span></label>
                        <div style="position:relative;">
                            <select name="correct_answer" class="form-select">
                                @foreach(range(0, 3) as $index)
                                    <option value="{{ $index }}" {{ old('correct_answer') == $index ? 'selected' : '' }}>
                                        Pilihan {{ chr(65 + $index) }}
                                    </option>
                                @endforeach
                            </select>
                            <i class="fa fa-chevron-down" style="position:absolute; right:1rem; top:50%; transform:translateY(-50%); font-size:11px; color:var(--text-muted); pointer-events:none;"></i>
                        </div>
                        @error('correct_answer') <p class="error-text">{{ $message }}</p> @enderror
                    </div>

                    <button type="submit" class="btn-add">
                        <i class="fa fa-plus" style="font-size:11px;"></i> Tambah Soal
                    </button>
                </form>
            </div>
        </div>

        {{-- Daftar Soal --}}
        <div class="space-y-4">
            <div class="card">
                <h2 class="edu-font-display text-xl font-semibold mb-4" style="color:var(--navy);">
                    Daftar Soal
                    <span class="text-sm font-normal ml-1" style="color:var(--text-muted);">({{ $quiz->questions->count() }})</span>
                </h2>

                @if($quiz->questions->isEmpty())
                    <div class="text-center py-8" style="color:var(--text-muted);">
                        <i class="fa fa-list text-3xl mb-3 block opacity-20"></i>
                        <p class="text-sm">Belum ada soal.</p>
                    </div>
                @else
                    <div class="space-y-3">
                        @foreach($quiz->questions as $i => $question)
                        <div class="question-card">
                            <div class="flex items-start justify-between gap-2 mb-3">
                                <div class="flex items-start gap-2.5">
                                    <div class="w-6 h-6 rounded-lg flex items-center justify-center flex-shrink-0 mt-0.5 text-xs font-bold" style="background:var(--gold-light); color:#92742a;">
                                        {{ $i + 1 }}
                                    </div>
                                    <p class="text-sm font-medium leading-snug" style="color:var(--navy);">{{ $question->question }}</p>
                                </div>
                                <div class="flex items-center gap-1.5 flex-shrink-0">
                                    <span class="text-xs font-semibold px-2 py-0.5 rounded-full" style="background:var(--gold-light); color:#92742a;">{{ $question->points }} poin</span>
                                    @if(isset($question->id))
                                    <form method="POST" action="{{ route('teacher.courses.quizzes.questions.destroy', [$course, $quiz, $question]) }}">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="delete-btn" onclick="return confirm('Hapus soal ini?')">
                                            <i class="fa fa-trash" style="font-size:10px;"></i>
                                        </button>
                                    </form>
                                    @endif
                                </div>
                            </div>

                            <div class="space-y-1.5">
                                @foreach($question->answers as $answer)
                                <div class="answer-option {{ $answer->is_correct ? 'correct' : 'wrong' }}">
                                    <div class="option-letter {{ $answer->is_correct ? 'correct' : 'wrong' }}">
                                        {{ $answer->is_correct ? '✓' : '' }}
                                    </div>
                                    <span>{{ $answer->answer_text }}</span>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endforeach
                    </div>
                @endif
            </div>
        </div>

    </div>
</div>
@endsection