@extends('layouts.cbt')
@section('page-title', 'Import Soal — '.$bank->title)
@section('sidebar')@include('components.guru-sidebar')@endsection
@section('content')
<div class="mb-4">
    <a href="{{ route('guru.banks.show', $bank) }}" class="text-sm text-blue-600 font-semibold">&larr; Kembali ke Bank Soal</a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="card-sdn">
        <h2 class="text-lg font-bold mb-2">Upload File Soal</h2>
        <p class="text-sm text-gray-600 mb-4">
            Upload file <strong>.docx</strong> (Word) atau <strong>.txt</strong> yang mengikuti template.
            Maksimal <strong>{{ number_format($maxUploadKb / 1024, 1, ',', '.') }} MB</strong>.
            Sistem akan menampilkan pratinjau sebelum soal disimpan.
        </p>
        <form method="POST" action="{{ route('guru.banks.import.preview', $bank) }}" enctype="multipart/form-data" class="space-y-4">
            @csrf
            <div>
                <label class="form-label">File soal</label>
                <input type="file" name="file" accept=".docx,.txt" class="form-input" required>
                @error('file')<p class="text-red-500 text-sm mt-1">{{ $message }}</p>@enderror
            </div>
            <button type="submit" class="btn-sdn-primary">Pratinjau Import</button>
        </form>
    </div>

    <div class="card-sdn">
        <h2 class="text-lg font-bold mb-2">Panduan Singkat</h2>
        <ol class="text-sm text-gray-700 space-y-2 list-decimal list-inside">
            <li>Unduh template Word di bawah (pilih .docx atau .txt).</li>
            <li>Isi soal — pisahkan tiap soal dengan <strong>baris kosong</strong>.</li>
            <li>Jenis soal terdeteksi <strong>otomatis</strong> dari isi soal.</li>
            <li>Simpan file, lalu upload di sini.</li>
        </ol>
        <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-xl text-sm text-blue-900">
            <p class="font-semibold mb-1">Sistem mendeteksi otomatis:</p>
            <ul class="space-y-1 text-xs font-mono">
                <li>Ada opsi A/B/C + <strong>Jawaban: C</strong> &rarr; Pilihan Ganda</li>
                <li>Ada opsi A/B/C + <strong>Jawaban: B,D</strong> &rarr; PG Kompleks</li>
                <li>Tanpa opsi + <strong>Jawaban: Benar/Salah</strong> &rarr; Benar/Salah</li>
                <li>Tanpa opsi + tanpa Jawaban &rarr; Esai</li>
            </ul>
        </div>
        <div class="mt-4 flex flex-wrap gap-2">
            <a href="{{ route('guru.banks.import.template.docx') }}" class="btn-sdn-primary text-sm py-2 px-4">Unduh Template Word (.docx)</a>
            <a href="{{ route('guru.banks.import.template') }}" class="btn-sdn-secondary text-sm py-2 px-4">Unduh Template (.txt)</a>
        </div>
        <div class="mt-3 p-3 bg-amber-50 border border-amber-200 rounded-xl text-sm text-amber-900">
            <strong>Tip:</strong> Gunakan template .docx agar Word tidak mengubah format otomatis. Gambar di Word tidak ikut terimport — tambahkan lewat Edit Soal setelah import.
        </div>
    </div>
</div>
@endsection