@extends('layouts.admin')

@section('title', 'Tambah Soal Kuis Baru')

@section('content')
<div class="card border-0 shadow-sm rounded-4 p-4 col-lg-9 mx-auto">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h5 class="fw-bold mb-0">Form Tambah Soal Kuis</h5>
        <a href="{{ route('admin.quiz.index') }}" class="btn btn-outline-secondary btn-sm rounded-pill">&larr; Batal & Kembali</a>
    </div>

    <form action="{{ route('admin.quiz.store') }}" method="POST">
        @csrf
        
        <div class="row">
            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Pilih Level Kuis (1 s.d. 5)</label>
                <select name="level" class="form-select" required>
                    <option value="1">Level 1 - Pemula Lingkungan</option>
                    <option value="2">Level 2 - Sahabat Sampah</option>
                    <option value="3">Level 3 - Pejuang Daur Ulang</option>
                    <option value="4">Level 4 - Master Pemilah</option>
                    <option value="5">Level 5 - Pahlawan Lingkungan</option>
                </select>
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Kunci Jawaban Benar</label>
                <select name="correct_option" class="form-select" required>
                    <option value="A">Jawaban A</option>
                    <option value="B">Jawaban B</option>
                    <option value="C">Jawaban C</option>
                    <option value="D">Jawaban D</option>
                </select>
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label fw-bold">Teks Pertanyaan Soal</label>
            <textarea name="question_text" class="form-control" rows="3" placeholder="Tuliskan pertanyaan..." required></textarea>
        </div>

        <div class="row">
            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Pilihan A</label>
                <input type="text" name="option_a" class="form-control" placeholder="Pilihan A" required>
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Pilihan B</label>
                <input type="text" name="option_b" class="form-control" placeholder="Pilihan B" required>
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Pilihan C</label>
                <input type="text" name="option_c" class="form-control" placeholder="Pilihan C" required>
            </div>
            <div class="col-md-6 mb-3">
                <label class="form-label fw-bold">Pilihan D</label>
                <input type="text" name="option_d" class="form-control" placeholder="Pilihan D" required>
            </div>
        </div>

        <div class="mb-4">
            <label class="form-label fw-bold">Penjelasan Edukatif Jawaban (Muncul saat dijawab)</label>
            <textarea name="explanation" class="form-control" rows="2" placeholder="Penjelasan mengapa jawaban tersebut benar..."></textarea>
        </div>

        <button type="submit" class="btn btn-danger btn-lg w-100 rounded-pill fw-bold">
            <i class="fa-solid fa-save me-1"></i> Simpan Soal Kuis
        </button>
    </form>
</div>
@endsection
