@extends('layouts.app')

@section('content')
    <section class="app-card p-6">
        <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
            <div>
                <h1 class="text-2xl font-bold text-white">{{ $model->title }}</h1>
                <p class="text-sm text-slate-300">Quiz management</p>
            </div>
            <div class="flex gap-2">
                <a href="{{ route('staff.models.quiz.preview', $model) }}" class="btn-secondary">Preview student quiz</a>
                <form method="post" action="{{ route('staff.models.quiz.publish', $model) }}">
                    @csrf
                    <button class="btn-primary">Publish quiz</button>
                </form>
            </div>
        </div>

        @if(session('staff_notice'))
            <div class="mb-4 rounded-lg bg-emerald-500/20 p-3 text-sm text-emerald-100">{{ session('staff_notice') }}</div>
        @endif

        <section class="mb-6 rounded-xl border border-white/10 bg-white/5 p-4">
            <h2 class="mb-3 text-lg font-semibold text-white">Generate quiz questions</h2>
            <form method="post" action="{{ route('staff.models.quiz.generate', $model) }}" class="flex flex-wrap items-end gap-3">
                @csrf
                <div>
                    <label class="mb-1 block text-sm text-slate-200">Quiz level</label>
                    <select name="target_level" class="rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                        <option value="level_1">Level 1: Basic identification</option>
                        <option value="level_2">Level 2: Structure and function</option>
                        <option value="level_3">Level 3: Clinical relevance</option>
                        <option value="level_4">Level 4: Advanced interpretation</option>
                        <option value="mixed">Mixed levels</option>
                    </select>
                </div>
                <label class="inline-flex items-center gap-2 text-sm text-slate-200">
                    <input type="checkbox" name="replace_existing" value="1">
                    Regenerate quiz questions (replace existing)
                </label>
                <button class="btn-primary">Generate quiz</button>
            </form>
        </section>

        <section class="mb-6 rounded-xl border border-white/10 bg-white/5 p-4">
            <h2 class="mb-3 text-lg font-semibold text-white">Add question manually</h2>
            <form method="post" action="{{ route('staff.models.quiz.questions.store', $model) }}" class="space-y-3">
                @csrf
                <textarea name="prompt" rows="2" placeholder="Question text" class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100"></textarea>
                <div class="grid gap-2 md:grid-cols-2">
                    <input name="options[]" placeholder="Option 1" class="rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                    <input name="options[]" placeholder="Option 2" class="rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                    <input name="options[]" placeholder="Option 3" class="rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                    <input name="options[]" placeholder="Option 4" class="rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                </div>
                <div class="grid gap-3 md:grid-cols-3">
                    <select name="correct_index" class="rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                        <option value="0">Correct: Option 1</option>
                        <option value="1">Correct: Option 2</option>
                        <option value="2">Correct: Option 3</option>
                        <option value="3">Correct: Option 4</option>
                    </select>
                    <select name="level" class="rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100">
                        <option value="level_1">Level 1</option>
                        <option value="level_2">Level 2</option>
                        <option value="level_3">Level 3</option>
                        <option value="level_4">Level 4</option>
                    </select>
                    <label class="inline-flex items-center gap-2 text-sm text-slate-200">
                        <input type="checkbox" name="published" value="1">
                        Published
                    </label>
                </div>
                <textarea name="feedback" rows="2" placeholder="Feedback for learner" class="w-full rounded-lg border border-white/15 bg-slate-900/70 px-3 py-2 text-slate-100"></textarea>
                <button class="btn-secondary">Add question</button>
            </form>
        </section>

        <section class="mb-6">
            <h2 class="mb-3 text-lg font-semibold text-white">Draft questions</h2>
            <div class="space-y-3">
                @forelse($draftQuestions as $question)
                    @include('staff.models.quiz_question_editor', ['model' => $model, 'question' => $question])
                @empty
                    <p class="text-sm text-slate-300">No draft questions.</p>
                @endforelse
            </div>
        </section>

        <section>
            <h2 class="mb-3 text-lg font-semibold text-white">Published questions</h2>
            <div class="space-y-3">
                @forelse($publishedQuestions as $question)
                    @include('staff.models.quiz_question_editor', ['model' => $model, 'question' => $question])
                @empty
                    <p class="text-sm text-slate-300">No published questions.</p>
                @endforelse
            </div>
        </section>
    </section>
@endsection