@extends('layouts.guru')

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

@section('content')
<div class="bg-white rounded-lg shadow max-w-4xl mx-auto">
    <div class="p-6 border-b">
        <h2 class="text-xl font-semibold">Form Tambah Soal</h2>
    </div>
    
    <form action="{{ route('guru.bank-soal.store') }}" method="POST" class="p-6">
        @csrf
        
        <div class="mb-4">
            <label class="block text-gray-700 font-semibold mb-2">Mata Pelajaran <span class="text-red-500">*</span></label>
            <select name="mata_pelajaran_id" required class="w-full border rounded-lg p-2">
                <option value="">Pilih Mata Pelajaran</option>
                @foreach($mataPelajaran as $m)
                <option value="{{ $m->id }}">{{ $m->nama_mapel }}</option>
                @endforeach
            </select>
        </div>
        
        <div class="mb-4">
            <label class="block text-gray-700 font-semibold mb-2">Pertanyaan <span class="text-red-500">*</span></label>
            <textarea name="pertanyaan" rows="4" required class="w-full border rounded-lg p-2"></textarea>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="mb-4">
                <label class="block text-gray-700 font-semibold mb-2">Pilihan A <span class="text-red-500">*</span></label>
                <input type="text" name="pilihan_a" required class="w-full border rounded-lg p-2">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 font-semibold mb-2">Pilihan B <span class="text-red-500">*</span></label>
                <input type="text" name="pilihan_b" required class="w-full border rounded-lg p-2">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 font-semibold mb-2">Pilihan C <span class="text-red-500">*</span></label>
                <input type="text" name="pilihan_c" required class="w-full border rounded-lg p-2">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 font-semibold mb-2">Pilihan D <span class="text-red-500">*</span></label>
                <input type="text" name="pilihan_d" required class="w-full border rounded-lg p-2">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 font-semibold mb-2">Pilihan E</label>
                <input type="text" name="pilihan_e" class="w-full border rounded-lg p-2">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 font-semibold mb-2">Jawaban Benar <span class="text-red-500">*</span></label>
                <select name="jawaban_benar" required class="w-full border rounded-lg p-2">
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                    <option value="D">D</option>
                    <option value="E">E</option>
                </select>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 font-semibold mb-2">Bobot Nilai</label>
                <input type="number" name="bobot_nilai" value="1" class="w-full border rounded-lg p-2">
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 font-semibold mb-2">Tingkat Kesulitan</label>
                <select name="tingkat_kesulitan" class="w-full border rounded-lg p-2">
                    <option value="mudah">Mudah</option>
                    <option value="sedang">Sedang</option>
                    <option value="sulit">Sulit</option>
                </select>
            </div>
        </div>
        
        <div class="flex justify-end space-x-2">
            <a href="{{ route('guru.bank-soal.index') }}" class="px-4 py-2 bg-gray-300 rounded-lg">Batal</a>
            <button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-lg">Simpan</button>
        </div>
    </form>
</div>
@endsection