@extends('layouts.app')

@section('title', 'Quiz Builder')

@section('content')
    <div class="flex flex-col gap-6">
        <div>
            <h1 class="text-lg font-semibold">Quiz Builder</h1>
            <p class="text-xs text-muted-foreground">Create a quiz from the question bank or add a new custom item.</p>
        </div>

        <div class="grid gap-6 lg:grid-cols-[1.3fr_0.7fr]">
            <form class="rounded-xl border border-border bg-card p-4">
                <div class="grid gap-4 md:grid-cols-2">
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Quiz title</label>
                        <input value="Fractions Revision" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Form</label>
                        <select class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            @foreach (['Form 1', 'Form 2', 'Form 3', 'Form 4'] as $f)
                                <option value="{{ $f }}" @selected($form === $f)>{{ $f }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Subject</label>
                        <select class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            @foreach ($subjects as $subject)
                                <option value="{{ $subject }}" @selected($subject === $subject)>{{ $subject }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Question type</label>
                        <select class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                            @foreach ($questionTypes as $type)
                                <option value="{{ $type }}">{{ $type }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="mt-4 flex flex-col gap-1.5">
                    <label class="text-xs text-muted-foreground">Question prompt</label>
                    <textarea rows="4" class="rounded-lg border border-input bg-transparent px-3 py-2 text-sm outline-none focus-visible:border-ring">Simplify the following fraction: 18/24</textarea>
                </div>

                <div class="mt-4 grid gap-3 md:grid-cols-2">
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Option A</label>
                        <input value="3/4" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Option B</label>
                        <input value="2/3" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Option C</label>
                        <input value="9/12" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    </div>
                    <div class="flex flex-col gap-1.5">
                        <label class="text-xs text-muted-foreground">Option D</label>
                        <input value="5/8" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    </div>
                </div>

                <div class="mt-4 flex items-center justify-between gap-3">
                    <span class="text-xs text-muted-foreground">Auto-save enabled</span>
                    <button type="button" class="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90">Save question</button>
                </div>
            </form>

            <div class="rounded-xl border border-border bg-card p-4">
                <h2 class="text-sm font-semibold">Quiz summary</h2>
                <div class="mt-4 space-y-3 text-sm">
                    <div class="flex items-center justify-between"><span class="text-muted-foreground">Questions</span><strong>18</strong></div>
                    <div class="flex items-center justify-between"><span class="text-muted-foreground">Time limit</span><strong>30 mins</strong></div>
                    <div class="flex items-center justify-between"><span class="text-muted-foreground">Passing mark</span><strong>60%</strong></div>
                    <div class="flex items-center justify-between"><span class="text-muted-foreground">Attempts</span><strong>1 per student</strong></div>
                </div>
            </div>
        </div>
    </div>
@endsection