@extends('layouts.guru')

@section('title', 'Import Soal')
@section('header', 'Import Soal Bank Soal')

@section('content')
<div class="bg-white rounded-lg shadow max-w-2xl mx-auto">
    <div class="p-6 border-b">
        <h2 class="text-xl font-semibold">Import Soal dari Excel</h2>
        <p class="text-gray-500 text-sm">Import soal menggunakan file Excel (xlsx, xls, csv)</p>
    </div>
    
    <div class="p-6">
        <div class="bg-blue-50 rounded-lg p-4 mb-6">
            <div class="flex justify-between items-center">
                <div>
                    <h3 class="font-semibold text-blue-800">Belum punya template?</h3>
                    <p class="text-sm text-blue-600">Download template Excel untuk memudahkan pengisian data</p>
                </div>
                <a href="{{ route('guru.bank-soal.template') }}" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">
                    <i class="fas fa-download mr-2"></i> Download Template
                </a>
            </div>
        </div>
        
        <form action="{{ route('guru.bank-soal.import') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="mb-4">
                <label class="block text-gray-700 font-semibold mb-2">File Excel</label>
                <input type="file" name="file" accept=".xlsx,.xls,.csv" required class="w-full border rounded-lg p-2">
                <p class="text-xs text-gray-500 mt-1">Format yang didukung: .xlsx, .xls, .csv (max 2MB)</p>
            </div>
            
            <div class="bg-yellow-50 p-4 rounded-lg mb-6">
                <h3 class="font-semibold text-yellow-800 mb-2">📋 Petunjuk Pengisian:</h3>
                <ul class="text-sm text-yellow-700 space-y-1 list-disc list-inside">
                    <li>Kolom <strong>Mata Pelajaran</strong> harus sesuai dengan nama mata pelajaran yang sudah ada di database</li>
                    <li>Kolom <strong>Jawaban Benar</strong> diisi dengan A, B, C, D, atau E</li>
                    <li>Kolom <strong>Tingkat Kesulitan</strong> diisi dengan: mudah, sedang, atau sulit</li>
                    <li>Kolom <strong>Bobot Nilai</strong> diisi angka 1-10</li>
                    <li>Kolom <strong>Pilihan E</strong> boleh dikosongkan jika hanya 4 pilihan</li>
                </ul>
            </div>
            
            <div class="bg-green-50 p-4 rounded-lg mb-6">
                <h3 class="font-semibold text-green-800 mb-2">📊 Contoh Format:</h3>
                <table class="w-full text-xs border-collapse">
                    <thead>
                        <tr class="bg-green-100">
                            <th class="border p-1">Mata Pelajaran</th>
                            <th class="border p-1">Pertanyaan</th>
                            <th class="border p-1">Pilihan A</th>
                            <th class="border p-1">Pilihan B</th>
                            <th class="border p-1">Pilihan C</th>
                            <th class="border p-1">Pilihan D</th>
                            <th class="border p-1">Jawaban Benar</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="border p-1">Matematika</td>
                            <td class="border p-1">2 + 2 = ?</td>
                            <td class="border p-1">3</td>
                            <td class="border p-1">4</td>
                            <td class="border p-1">5</td>
                            <td class="border p-1">6</td>
                            <td class="border p-1">B</td>
                        </tr>
                    </tbody>
                </table>
            </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 hover:bg-gray-400 transition">Batal</a>
                <button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
                    <i class="fas fa-upload mr-2"></i> Import
                </button>
            </div>
        </form>
    </div>
</div>
@endsection