@extends('layouts.teacher')
@section('title', 'Buat Quiz')
@section('header', 'Buat Quiz Baru')

@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; }
    .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:.875rem 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); }
    .error-text { font-size:12px; color:#dc2626; margin-top:.375rem; }
    .btn-primary { display:inline-flex; align-items:center; gap:6px; background:var(--navy); color:white; font-size:13px; font-weight:600; padding:.75rem 1.5rem; border-radius:14px; border:none; cursor:pointer; transition:opacity .2s; text-decoration:none; }
    .btn-primary:hover { opacity:.87; }
    .btn-cancel { display:inline-flex; align-items:center; gap:6px; background:var(--cream); color:var(--navy); font-size:13px; font-weight:500; padding:.75rem 1.5rem; border-radius:14px; border:1px solid var(--border); text-decoration:none; transition:background .15s; }
    .btn-cancel:hover { background:#f0ece3; }
    .hint-box { background:var(--gold-light); border:1px solid #e8d4a0; border-radius:14px; padding:1rem 1.25rem; }
</style>

<div class="edu-font-body" style="max-width:600px; margin:0 auto;">

    {{-- Header --}}
    <div style="background:white; border:1px solid var(--border); border-radius:24px; padding:1.75rem 2rem; margin-bottom:1.5rem; box-shadow:0 1px 12px rgba(0,0,0,.04);">
        <div class="flex items-center justify-between">
            <div>
                <span class="section-label">{{ $course->title }}</span>
                <h1 class="edu-font-display text-2xl font-bold mt-1" style="color:var(--navy);">Buat Quiz Baru</h1>
            </div>
            <a href="{{ route('teacher.courses.quizzes.index', $course) }}" class="btn-cancel" style="padding:.5rem 1rem; font-size:12px;">
                <i class="fa fa-arrow-left" style="font-size:10px;"></i> Kembali
            </a>
        </div>
    </div>

    {{-- Form --}}
    <div style="background:white; border:1px solid var(--border); border-radius:24px; padding:2rem; box-shadow:0 1px 12px rgba(0,0,0,.04);">
        <form method="POST" action="{{ route('teacher.courses.quizzes.store', $course) }}" class="space-y-5">
            @csrf

            @if($errors->any())
            <div style="background:#fee2e2; border:1px solid #fca5a5; border-radius:14px; padding:1rem 1.25rem;">
                <p class="text-sm font-semibold mb-1" style="color:#dc2626;">Terdapat kesalahan:</p>
                <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

            {{-- Judul --}}
            <div>
                <label class="form-label">Judul Quiz <span>*</span></label>
                <input type="text" name="title" value="{{ old('title') }}"
                       class="form-input" placeholder="Contoh: Ulangan Matematika Semester 1">
                @error('title') <p class="error-text">{{ $message }}</p> @enderror
            </div>

            {{-- Setting Grid --}}
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                    <label class="form-label">Durasi (menit)</label>
                    <input type="number" name="duration_minutes" value="{{ old('duration_minutes', 30) }}"
                           min="0" max="240" class="form-input" placeholder="30">
                    <p class="text-xs mt-1" style="color:var(--text-muted);">0 = tanpa batas</p>
                    @error('duration_minutes') <p class="error-text">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="form-label">Maks. Percobaan</label>
                    <input type="number" name="max_attempts" value="{{ old('max_attempts', 3) }}"
                           min="1" max="10" class="form-input" placeholder="3">
                    @error('max_attempts') <p class="error-text">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="form-label">Passing Score (%)</label>
                    <input type="number" name="passing_score" value="{{ old('passing_score', 70) }}"
                           min="0" max="100" class="form-input" placeholder="70">
                    @error('passing_score') <p class="error-text">{{ $message }}</p> @enderror
                </div>
            </div>

            {{-- Hint --}}
            <div class="hint-box">
                <div class="flex gap-2">
                    <i class="fa fa-info-circle mt-0.5 flex-shrink-0" style="color:#92742a;"></i>
                    <p class="text-xs leading-relaxed" style="color:#92742a;">Setelah quiz dibuat, kamu dapat menambahkan soal dari halaman detail quiz. Soal bisa berupa pilihan ganda, benar/salah, atau esai.</p>
                </div>
            </div>

            {{-- Actions --}}
            <div class="flex gap-3 pt-2">
                <button type="submit" class="btn-primary">
                    <i class="fa fa-save" style="font-size:11px;"></i> Simpan Quiz
                </button>
                <a href="{{ route('teacher.courses.quizzes.index', $course) }}" class="btn-cancel">Batal</a>
            </div>
        </form>
    </div>

</div>
@endsection