@extends('layouts.teacher')
@section('title', 'Kelola Soal')
@section('header_title', 'Penyusunan Soal')

@section('content')

@if(session('success'))
<div class="mb-6 bg-green-100 border border-green-200 text-green-700 px-4 py-3 rounded-lg flex items-center shadow-sm animate-fade-in-down">
    <i class="ph ph-check-circle text-xl mr-2"></i>
    {{ session('success') }}
</div>
@endif

@if($errors->any())
<div class="mb-6 bg-red-100 border border-red-200 text-red-700 px-4 py-3 rounded-lg shadow-sm">
    <ul class="list-disc list-inside">
        @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<div class="max-w-7xl mx-auto flex flex-col lg:flex-row gap-8">
    
    <!-- LEFT SIDEBAR - FORM INPUT/EDIT -->
    <div class="w-full lg:w-2/5">
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sticky top-6" id="formContainer">
            
            <div class="flex justify-between items-center border-b border-gray-100 pb-4 mb-6">
                <h3 class="font-bold text-gray-800 flex items-center">
                    <i class="ph ph-plus-circle text-indigo-600 mr-2 text-xl" id="formIcon"></i> 
                    <span id="formTitle">Input Soal Baru</span>
                </h3>
                <div class="flex items-center space-x-2">
                    <button onclick="document.getElementById('importModal').classList.remove('hidden')" 
                            class="text-xs bg-green-50 text-green-700 px-3 py-1.5 rounded-lg font-bold hover:bg-green-100 transition flex items-center border border-green-200">
                        <i class="ph ph-microsoft-excel-logo mr-1.5 text-lg"></i> Import Excel
                    </button>
                    <button type="button" onclick="resetForm()" id="cancelBtn" class="text-xs bg-gray-100 text-gray-700 px-3 py-1.5 rounded-lg font-bold hover:bg-gray-200 transition flex items-center border border-gray-200 hidden">
                        <i class="ph ph-x mr-1.5"></i> Batal
                    </button>
                </div>
            </div>

            {{-- =========================================================
                 FORM ADD (POST) — tetap seperti semula
            ========================================================= --}}
            <form 
                action="{{ route('guru.ujian.store_question', $exam->id) }}" 
                method="POST" 
                enctype="multipart/form-data" 
                id="questionForm"
            >
                @csrf
                
                <!-- SECTION 1: PERTANYAAN -->
                <div class="mb-5">
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Pertanyaan <span class="text-red-500">*</span>
                    </label>
                    <textarea name="question" id="inputQuestion" rows="4" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none transition" 
                        placeholder="Tulis pertanyaan soal di sini..." 
                        required 
                        oninput="checkFormValidity()"></textarea>
                </div>

                <!-- SECTION 2: GAMBAR SOAL -->
                <div class="mb-5">
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Gambar Soal <span class="text-gray-400 text-xs font-normal">(Opsional)</span>
                    </label>
                    
                    <div class="relative border-2 border-dashed border-gray-300 rounded-xl p-4 text-center hover:border-indigo-400 transition cursor-pointer bg-gray-50 hover:bg-indigo-50"
                         onclick="document.getElementById('questionImageInput').click()">
                        <input type="file" 
                               name="question_image" 
                               id="questionImageInput" 
                               class="hidden" 
                               accept="image/*" 
                               onchange="previewImage(event)">
                        
                        <div class="flex flex-col items-center justify-center py-4">
                            <div class="bg-indigo-100 p-3 rounded-full mb-2">
                                <i class="ph ph-image text-2xl text-indigo-500" id="imageIcon"></i>
                            </div>
                            <p class="text-sm font-medium text-gray-700 mb-1">
                                <span class="text-indigo-600" id="uploadText">Klik untuk upload</span> atau drag & drop
                            </p>
                            <p class="text-xs text-gray-500">Format: JPG, PNG, WebP | Maks: 500KB</p>
                        </div>
                    </div>
                    
                    <!-- CURRENT IMAGE PREVIEW (untuk mode edit) -->
                    <div id="currentImagePreview" class="mt-3 hidden">
                        <div class="bg-blue-50 p-3 rounded-lg border border-blue-200">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-blue-700">
                                    <i class="ph ph-image mr-1"></i> Gambar saat ini:
                                </span>
                                <button type="button" onclick="removeCurrentImage()" class="text-xs text-red-600 hover:text-red-800">
                                    <i class="ph ph-trash mr-1"></i> Hapus
                                </button>
                            </div>
                            <div class="relative rounded overflow-hidden border border-gray-200">
                                <img id="currentImageDisplay" class="w-full max-h-32 object-contain bg-white" src="">
                            </div>
                        </div>
                    </div>
                    
                    <!-- NEW IMAGE PREVIEW -->
                    <div id="newImagePreviewContainer" class="mt-3 hidden">
                        <div class="bg-green-50 p-3 rounded-lg border border-green-200">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-green-700">
                                    <i class="ph ph-upload-simple mr-1"></i> Gambar baru:
                                </span>
                                <button type="button" onclick="removeNewImage()" class="text-xs text-red-600 hover:text-red-800">
                                    <i class="ph ph-x-circle mr-1"></i> Batalkan
                                </button>
                            </div>
                            <div class="flex items-center">
                                <div class="w-12 h-12 rounded overflow-hidden mr-3 border border-gray-200">
                                    <img id="newImagePreview" class="w-full h-full object-cover" src="">
                                </div>
                                <div>
                                    <p id="newImageName" class="text-sm font-medium text-gray-700"></p>
                                    <p id="newImageSize" class="text-xs text-gray-500"></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 3: OPSI JAWABAN -->
                <div class="mb-6">
                    <div class="flex justify-between items-center mb-3">
                        <label class="block text-sm font-bold text-gray-700">
                            Opsi Jawaban <span class="text-red-500">*</span>
                            <span class="text-xs text-gray-400 font-normal">(Minimal 2, maksimal 4)</span>
                        </label>
                        <div class="flex space-x-1">
                            <button type="button" onclick="addOption()" id="addOptionBtn" 
                                class="text-xs bg-green-50 text-green-700 px-2 py-1 rounded font-bold hover:bg-green-100 transition border border-green-200">
                                <i class="ph ph-plus text-xs mr-1"></i> Opsi
                            </button>
                            <button type="button" onclick="removeOption()" id="removeOptionBtn" 
                                class="text-xs bg-red-50 text-red-700 px-2 py-1 rounded font-bold hover:bg-red-100 transition border border-red-200">
                                <i class="ph ph-minus text-xs mr-1"></i> Opsi
                            </button>
                        </div>
                    </div>
                    
                    <div id="optionsContainer" class="space-y-3">
                        <div class="option-item" data-index="0">
                            <div class="flex items-center group">
                                <div class="w-8 h-8 flex-shrink-0 flex items-center justify-center bg-gray-100 text-gray-500 rounded-full font-bold mr-2 uppercase option-letter">A</div>
                                <input type="text" name="option_a" class="option-input flex-1 px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition" placeholder="Jawaban A" required oninput="checkFormValidity()">
                                <input type="radio" name="correct_option" value="a" class="ml-2 correct-option-radio" onchange="checkFormValidity()">
                                <span class="ml-1 text-xs text-gray-500">Benar</span>
                            </div>
                        </div>
                        <div class="option-item" data-index="1">
                            <div class="flex items-center group">
                                <div class="w-8 h-8 flex-shrink-0 flex items-center justify-center bg-gray-100 text-gray-500 rounded-full font-bold mr-2 uppercase option-letter">B</div>
                                <input type="text" name="option_b" class="option-input flex-1 px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition" placeholder="Jawaban B" required oninput="checkFormValidity()">
                                <input type="radio" name="correct_option" value="b" class="ml-2 correct-option-radio" onchange="checkFormValidity()">
                                <span class="ml-1 text-xs text-gray-500">Benar</span>
                            </div>
                        </div>
                        <div class="option-item" data-index="2" style="display: none;">
                            <div class="flex items-center group">
                                <div class="w-8 h-8 flex-shrink-0 flex items-center justify-center bg-gray-100 text-gray-500 rounded-full font-bold mr-2 uppercase option-letter">C</div>
                                <input type="text" name="option_c" class="option-input flex-1 px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition" placeholder="Jawaban C" oninput="checkFormValidity()">
                                <input type="radio" name="correct_option" value="c" class="ml-2 correct-option-radio" onchange="checkFormValidity()">
                                <span class="ml-1 text-xs text-gray-500">Benar</span>
                            </div>
                        </div>
                        <div class="option-item" data-index="3" style="display: none;">
                            <div class="flex items-center group">
                                <div class="w-8 h-8 flex-shrink-0 flex items-center justify-center bg-gray-100 text-gray-500 rounded-full font-bold mr-2 uppercase option-letter">D</div>
                                <input type="text" name="option_d" class="option-input flex-1 px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none transition" placeholder="Jawaban D" oninput="checkFormValidity()">
                                <input type="radio" name="correct_option" value="d" class="ml-2 correct-option-radio" onchange="checkFormValidity()">
                                <span class="ml-1 text-xs text-gray-500">Benar</span>
                            </div>
                        </div>
                    </div>
                    <p class="text-xs text-gray-400 mt-2" id="optionCounter">2 opsi tersedia</p>
                </div>

                <!-- SUBMIT BUTTON -->
                <button type="submit" id="submitBtn" 
                    class="w-full bg-gray-300 text-gray-500 py-3 rounded-xl font-bold transition shadow-sm flex justify-center items-center cursor-not-allowed" 
                    disabled>
                    <i class="ph ph-check mr-2 font-bold"></i> 
                    <span id="submitText">Simpan Soal</span>
                </button>
            </form>

            {{-- =========================================================
                 FORM EDIT (POST ke route update_question, _method PATCH)
                 — FORM TERPISAH supaya tidak konflik dengan form tambah
            ========================================================= --}}
            <form 
                id="editQuestionForm"
                method="POST"
                enctype="multipart/form-data"
                style="display:none;"
            >
                @csrf
                @method('PATCH')

                <!-- field tersembunyi: question_id akan diset via JS -->
                <input type="hidden" id="editQuestionId" name="_question_id">

                <div class="mb-5">
                    <label class="block text-sm font-bold text-gray-700 mb-2">Pertanyaan <span class="text-red-500">*</span></label>
                    <textarea name="question" id="editInputQuestion" rows="4" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none transition"
                        oninput="checkEditFormValidity()"></textarea>
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-bold text-gray-700 mb-2">
                        Gambar Soal <span class="text-gray-400 text-xs font-normal">(Opsional — kosongkan jika tidak diganti)</span>
                    </label>
                    <div class="relative border-2 border-dashed border-gray-300 rounded-xl p-4 text-center hover:border-indigo-400 transition cursor-pointer bg-gray-50"
                         onclick="document.getElementById('editQuestionImageInput').click()">
                        <input type="file" name="question_image" id="editQuestionImageInput" class="hidden" accept="image/*" onchange="previewEditImage(event)">
                        <div class="flex flex-col items-center justify-center py-2">
                            <i class="ph ph-image text-2xl text-indigo-400 mb-1" id="editImageIcon"></i>
                            <p class="text-sm text-gray-600"><span class="text-indigo-600" id="editUploadText">Klik untuk ganti gambar</span></p>
                            <p class="text-xs text-gray-400">JPG, PNG, WebP | Maks: 500KB</p>
                        </div>
                    </div>
                    <!-- gambar lama -->
                    <div id="editCurrentImagePreview" class="mt-3 hidden">
                        <div class="bg-blue-50 p-3 rounded-lg border border-blue-200">
                            <p class="text-xs font-semibold text-blue-700 mb-1"><i class="ph ph-image mr-1"></i>Gambar saat ini:</p>
                            <img id="editCurrentImageDisplay" class="w-full max-h-32 object-contain bg-white rounded border border-gray-200" src="">
                        </div>
                    </div>
                    <!-- gambar baru -->
                    <div id="editNewImagePreview" class="mt-3 hidden">
                        <div class="bg-green-50 p-3 rounded-lg border border-green-200">
                            <div class="flex items-center justify-between mb-1">
                                <p class="text-xs font-semibold text-green-700"><i class="ph ph-upload-simple mr-1"></i>Gambar baru:</p>
                                <button type="button" onclick="removeEditNewImage()" class="text-xs text-red-600 hover:text-red-800"><i class="ph ph-x-circle mr-1"></i>Batal</button>
                            </div>
                            <img id="editNewImageDisplay" class="w-full max-h-24 object-contain rounded">
                        </div>
                    </div>
                </div>

                <div class="mb-6">
                    <div class="flex justify-between items-center mb-3">
                        <label class="block text-sm font-bold text-gray-700">Opsi Jawaban <span class="text-red-500">*</span></label>
                        <div class="flex space-x-1">
                            <button type="button" onclick="addEditOption()" id="addEditOptionBtn"
                                class="text-xs bg-green-50 text-green-700 px-2 py-1 rounded font-bold hover:bg-green-100 border border-green-200">
                                <i class="ph ph-plus text-xs mr-1"></i> Opsi
                            </button>
                            <button type="button" onclick="removeEditOption()" id="removeEditOptionBtn"
                                class="text-xs bg-red-50 text-red-700 px-2 py-1 rounded font-bold hover:bg-red-100 border border-red-200">
                                <i class="ph ph-minus text-xs mr-1"></i> Opsi
                            </button>
                        </div>
                    </div>
                    <div id="editOptionsContainer" class="space-y-3">
                        @foreach([['a','A',0],['b','B',1],['c','C',2],['d','D',3]] as [$val,$lbl,$idx])
                        <div class="edit-option-item" data-index="{{ $idx }}" {{ $idx >= 2 ? 'style=display:none' : '' }}>
                            <div class="flex items-center">
                                <div class="w-8 h-8 flex-shrink-0 flex items-center justify-center bg-gray-100 text-gray-500 rounded-full font-bold mr-2">{{ $lbl }}</div>
                                <input type="text" name="option_{{ $val }}" 
                                    class="edit-option-input flex-1 px-3 py-2.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-500 outline-none" 
                                    placeholder="Jawaban {{ $lbl }}"
                                    oninput="checkEditFormValidity()">
                                <input type="radio" name="correct_option" value="{{ $val }}" class="ml-2 edit-correct-radio" onchange="checkEditFormValidity()">
                                <span class="ml-1 text-xs text-gray-500">Benar</span>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <p class="text-xs text-gray-400 mt-2" id="editOptionCounter">2 opsi tersedia</p>
                </div>

                <div class="flex gap-3">
                    <button type="button" onclick="resetForm()"
                        class="flex-1 py-3 rounded-xl font-bold border border-gray-300 text-gray-600 hover:bg-gray-50 transition">
                        Batal
                    </button>
                    <button type="submit" id="editSubmitBtn"
                        class="flex-1 bg-gray-300 text-gray-500 py-3 rounded-xl font-bold transition cursor-not-allowed flex justify-center items-center"
                        disabled>
                        <i class="ph ph-pencil mr-2"></i>
                        <span id="editSubmitText">Update Soal</span>
                    </button>
                </div>
            </form>

        </div>
    </div>

    <!-- RIGHT CONTENT - LIST SOAL -->
    <div class="w-full lg:w-3/5">
        
        <!-- EXAM HEADER -->
        <div class="bg-gradient-to-r from-indigo-600 to-indigo-800 rounded-xl p-6 text-white shadow-lg shadow-indigo-200 mb-6 flex justify-between items-center">
            <div>
                <h2 class="text-xl font-bold">{{ $exam->title }}</h2>
                <div class="flex items-center text-indigo-100 text-sm mt-1 space-x-4">
                    <span class="flex items-center bg-white/10 px-2 py-1 rounded">
                        <i class="ph ph-clock mr-1.5"></i> {{ $exam->duration }} Menit
                    </span>
                    <span class="flex items-center bg-white/10 px-2 py-1 rounded">
                        <i class="ph ph-question mr-1.5"></i> {{ $questions->count() }} Soal
                    </span>
                </div>
            </div>
            <div class="text-center bg-white text-indigo-700 px-4 py-2 rounded-lg shadow-sm">
                <span class="block text-2xl font-bold">{{ $questions->count() }}</span>
                <span class="text-[10px] font-bold uppercase tracking-wider">Soal</span>
            </div>
        </div>

        <!-- QUESTION LIST -->
        <div class="space-y-4" id="questionsList">
            @forelse($questions as $index => $q)
            <div class="bg-white rounded-xl border border-gray-200 p-6 shadow-sm hover:shadow-md transition group relative overflow-hidden question-item" data-question-id="{{ $q->id }}">
                <div class="absolute top-0 left-0 bg-indigo-100 text-indigo-700 px-3 py-1 rounded-br-xl text-xs font-bold">
                    No. {{ $index + 1 }}
                </div>
                <div class="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition flex space-x-2">
                    <button class="bg-blue-50 text-blue-500 p-2 rounded-lg hover:bg-blue-600 hover:text-white transition" 
                        title="Edit Soal" 
                        onclick="editQuestion({{ $q->id }})">
                        <i class="ph ph-pencil-simple text-lg"></i>
                    </button>
                    <form action="{{ route('guru.ujian.destroy_question', $q->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus soal ini?')" class="inline">
                        @csrf
                        @method('DELETE')
                        <button class="bg-red-50 text-red-500 p-2 rounded-lg hover:bg-red-600 hover:text-white transition" title="Hapus Soal">
                            <i class="ph ph-trash text-lg"></i>
                        </button>
                    </form>
                </div>
                <div class="mt-6">
                    @if($q->question_image)
                    <div class="mb-4">
                        <div class="flex items-center text-xs text-gray-500 mb-1"><i class="ph ph-image mr-1"></i> Gambar Soal</div>
                        <div class="image-preview-container relative w-full max-w-md mx-auto" onclick="toggleImagePreview(this)">
                            <div class="relative overflow-hidden rounded-lg border border-gray-200 bg-gray-100 hover:shadow-md transition">
                                <img src="{{ $q->question_image }}" alt="Gambar Soal {{ $index + 1 }}" class="w-full h-48 object-cover" style="cursor:pointer">
                            </div>
                        </div>
                        <div class="full-image-modal fixed inset-0 z-[100] hidden items-center justify-center bg-black/80 p-4">
                            <div class="relative max-w-4xl max-h-[90vh]">
                                <img src="{{ $q->question_image }}" alt="Gambar Soal {{ $index + 1 }}" class="max-w-full max-h-[90vh] object-contain">
                                <button onclick="closeImageModal()" class="absolute top-4 right-4 bg-white/20 hover:bg-white/30 text-white p-2 rounded-full transition">
                                    <i class="ph ph-x text-lg"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    @endif
                    <p class="text-gray-800 font-medium text-lg mb-6 leading-relaxed">{{ $q->question }}</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                        @php
                            $options = ['a'=>$q->option_a,'b'=>$q->option_b,'c'=>$q->option_c,'d'=>$q->option_d];
                            $filledOptions = array_filter($options, fn($v) => !empty(trim($v ?? '')));
                        @endphp
                        @foreach($filledOptions as $opt => $value)
                        @php $isCorrect = strtolower($q->correct_option) == $opt; @endphp
                        <div class="flex items-center p-3 rounded-lg border {{ $isCorrect ? 'bg-gradient-to-r from-green-50 to-emerald-50 border-green-200' : 'border-gray-100' }}">
                            <div class="w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold mr-3 {{ $isCorrect ? 'bg-gradient-to-r from-green-500 to-emerald-500 text-white' : 'bg-gray-100 text-gray-500' }}">
                                {{ strtoupper($opt) }}
                            </div>
                            <div class="flex-1">
                                <span class="text-sm {{ $isCorrect ? 'text-green-800 font-semibold' : 'text-gray-600' }}">{{ $value }}</span>
                            </div>
                            @if($isCorrect)
                            <div class="ml-2 bg-green-100 text-green-600 px-2 py-1 rounded text-xs font-bold flex items-center">
                                <i class="ph ph-check-circle mr-1"></i> Benar
                            </div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                    <div class="mt-3 text-xs text-gray-500 flex items-center">
                        <i class="ph ph-info mr-1"></i>{{ count($filledOptions) }} opsi jawaban
                    </div>
                </div>
            </div>
            @empty
            <div class="flex flex-col items-center justify-center py-16 bg-white rounded-xl border border-dashed border-gray-300 text-center">
                <div class="bg-indigo-50 p-4 rounded-full mb-3"><i class="ph ph-pencil-slash text-3xl text-indigo-400"></i></div>
                <h3 class="text-gray-800 font-bold">Belum ada soal</h3>
                <p class="text-gray-500 text-sm mt-1 max-w-xs">Silakan input pertanyaan secara manual atau gunakan fitur Import Excel.</p>
            </div>
            @endforelse
        </div>
    </div>
</div>

<!-- IMPORT MODAL -->
<div id="importModal" class="fixed inset-0 z-[9999] hidden flex items-center justify-center">

    <!-- OVERLAY -->
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"
         onclick="document.getElementById('importModal').classList.add('hidden')"></div>

    <!-- MODAL -->
    <div class="relative bg-white rounded-2xl shadow-2xl sm:max-w-md w-full overflow-hidden">

        <div class="bg-gray-50 px-6 py-4 border-b border-gray-100 flex justify-between items-center">
            <h3 class="text-lg font-bold text-gray-800 flex items-center">
                <i class="ph ph-microsoft-excel-logo text-green-600 mr-2 text-xl"></i>
                Import Soal
            </h3>

            <button onclick="document.getElementById('importModal').classList.add('hidden')"
                    class="text-gray-400 hover:text-gray-600">
                <i class="ph ph-x text-xl"></i>
            </button>
        </div>

        <form action="{{ route('guru.ujian.import', $exam->id) }}" method="POST" enctype="multipart/form-data" class="p-6">
            @csrf

            <!-- DOWNLOAD TEMPLATE -->
            <div class="mb-5">
                <div class="flex items-center mb-2">
                    <span class="bg-indigo-100 text-indigo-700 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold mr-2">1</span>
                    <p class="text-sm font-bold text-gray-700">Download Template</p>
                </div>

                <a href="{{ route('guru.ujian.template') }}"
                   class="ml-8 inline-flex items-center text-xs bg-white border border-gray-300 px-3 py-2 rounded-lg text-gray-700 hover:bg-gray-50 font-semibold">
                    <i class="ph ph-download-simple mr-2 text-lg"></i>
                    template_soal.xlsx
                </a>
            </div>

            <hr class="border-gray-100 my-4">

            <!-- UPLOAD -->
            <div class="mb-6">
                <div class="flex items-center mb-2">
                    <span class="bg-indigo-100 text-indigo-700 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold mr-2">2</span>
                    <p class="text-sm font-bold text-gray-700">Upload File Excel</p>
                </div>

                <div class="ml-8">
                    <input type="file"
                           name="file_excel"
                           class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-green-50 file:text-green-700 border border-gray-300 rounded-lg cursor-pointer"
                           required>

                    <p class="text-[10px] text-gray-400 mt-2">
                        *Mendukung format .xlsx dan .csv
                    </p>
                </div>
            </div>

            <button type="submit"
                    class="w-full bg-green-600 text-white py-3 rounded-xl font-bold hover:bg-green-700 transition flex justify-center items-center">
                <i class="ph ph-upload-simple mr-2"></i>
                Upload & Proses Soal
            </button>
        </form>

    </div>

</div>

<!-- LOADING OVERLAY saat fetch API edit -->
<div id="loadingOverlay" class="fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm hidden items-center justify-center">
    <div class="bg-white rounded-2xl p-8 flex flex-col items-center gap-4 shadow-2xl">
        <div class="w-10 h-10 border-4 border-indigo-600 border-t-transparent rounded-full animate-spin"></div>
        <p class="text-gray-700 font-semibold">Memuat data soal...</p>
    </div>
</div>

<!-- JAVASCRIPT -->
<script>
// =============================================
// STATE
// =============================================
let currentOptionsCount = 2;
let editOptionsCount     = 2;
let isEditMode           = false;

// =============================================
// TAMBAH FORM — opsi
// =============================================
function addOption() {
    if (currentOptionsCount >= 4) { showNotification('warning','Maksimal 4 opsi'); return; }
    const item = document.querySelector(`.option-item[data-index="${currentOptionsCount}"]`);
    if (item) { item.style.display = 'block'; currentOptionsCount++; updateOptionCounter(); updateButtonStates(); checkFormValidity(); }
}
function removeOption() {
    if (currentOptionsCount <= 2) { showNotification('warning','Minimal 2 opsi'); return; }
    const lastIdx = currentOptionsCount - 1;
    const item = document.querySelector(`.option-item[data-index="${lastIdx}"]`);
    if (item) {
        item.querySelector('.option-input').value = '';
        const r = item.querySelector('.correct-option-radio'); if (r) r.checked = false;
        item.style.display = 'none'; currentOptionsCount--; updateOptionCounter(); updateButtonStates(); checkFormValidity();
    }
}
function updateOptionCounter() { document.getElementById('optionCounter').textContent = `${currentOptionsCount} opsi tersedia`; }
function updateButtonStates() {
    document.getElementById('addOptionBtn').disabled    = currentOptionsCount >= 4;
    document.getElementById('removeOptionBtn').disabled = currentOptionsCount <= 2;
}

// =============================================
// EDIT FORM — opsi
// =============================================
function addEditOption() {
    if (editOptionsCount >= 4) { showNotification('warning','Maksimal 4 opsi'); return; }
    const item = document.querySelector(`.edit-option-item[data-index="${editOptionsCount}"]`);
    if (item) { item.style.display = 'block'; editOptionsCount++; updateEditOptionCounter(); checkEditFormValidity(); }
}
function removeEditOption() {
    if (editOptionsCount <= 2) { showNotification('warning','Minimal 2 opsi'); return; }
    const lastIdx = editOptionsCount - 1;
    const item = document.querySelector(`.edit-option-item[data-index="${lastIdx}"]`);
    if (item) {
        item.querySelector('.edit-option-input').value = '';
        const r = item.querySelector('.edit-correct-radio'); if (r) r.checked = false;
        item.style.display = 'none'; editOptionsCount--; updateEditOptionCounter(); checkEditFormValidity();
    }
}
function updateEditOptionCounter() { document.getElementById('editOptionCounter').textContent = `${editOptionsCount} opsi tersedia`; }

// =============================================
// VALIDASI
// =============================================
function checkFormValidity() {
    const q = document.getElementById('inputQuestion').value.trim();
    let filled = 0;
    for (let i = 0; i < currentOptionsCount; i++) {
        const item = document.querySelector(`.option-item[data-index="${i}"]`);
        if (item?.querySelector('.option-input')?.value.trim()) filled++;
    }
    const correct = document.querySelector('.correct-option-radio:checked');
    let valid = q && filled >= 2 && correct;
    if (valid && correct) {
        const sel = document.querySelector(`input[name="option_${correct.value}"]`);
        if (!sel?.value.trim()) valid = false;
    }
    const btn = document.getElementById('submitBtn');
    btn.disabled = !valid;
    btn.className = valid
        ? 'w-full bg-indigo-600 text-white py-3 rounded-xl font-bold hover:bg-indigo-700 transition shadow-lg shadow-indigo-200 flex justify-center items-center cursor-pointer'
        : 'w-full bg-gray-300 text-gray-500 py-3 rounded-xl font-bold transition shadow-sm flex justify-center items-center cursor-not-allowed';
}

function checkEditFormValidity() {
    const q = document.getElementById('editInputQuestion').value.trim();
    let filled = 0;
    for (let i = 0; i < editOptionsCount; i++) {
        const item = document.querySelector(`.edit-option-item[data-index="${i}"]`);
        if (item?.querySelector('.edit-option-input')?.value.trim()) filled++;
    }
    const correct = document.querySelector('.edit-correct-radio:checked');
    let valid = q && filled >= 2 && correct;
    const btn = document.getElementById('editSubmitBtn');
    btn.disabled = !valid;
    btn.className = valid
        ? 'flex-1 bg-indigo-600 text-white py-3 rounded-xl font-bold hover:bg-indigo-700 transition flex justify-center items-center cursor-pointer'
        : 'flex-1 bg-gray-300 text-gray-500 py-3 rounded-xl font-bold transition flex justify-center items-center cursor-not-allowed';
}

// =============================================
// EDIT QUESTION — fetch dari API, isi form edit
// =============================================
function editQuestion(questionId) {
    // Tampilkan loading
    const loader = document.getElementById('loadingOverlay');
    loader.classList.remove('hidden');
    loader.classList.add('flex');

    // ✅ Fetch data soal langsung dari BE — tidak scraping DOM
    fetch(`/teacher/ujian/soal-data/${questionId}`, {
        headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
    })
    .then(r => r.json())
    .then(data => {
        loader.classList.add('hidden');
        loader.classList.remove('flex');

        if (!data || data.error) {
            showNotification('error', data?.message || 'Gagal memuat data soal'); return;
        }

        const q = data.question;

        // ── Sembunyikan form tambah, tampilkan form edit ──
        document.getElementById('questionForm').style.display    = 'none';
        document.getElementById('editQuestionForm').style.display = 'block';
        document.getElementById('formTitle').textContent          = 'Edit Soal';
        document.getElementById('formIcon').className             = 'ph ph-pencil-simple text-blue-600 mr-2 text-xl';
        document.getElementById('cancelBtn').classList.remove('hidden');
        isEditMode = true;

        // ── Set action form edit ──
        const form = document.getElementById('editQuestionForm');
        form.action = `/teacher/ujian/soal/${questionId}`;

        // ── Isi data ──
        document.getElementById('editQuestionId').value   = questionId;
        document.getElementById('editInputQuestion').value = q.question;

        // Reset semua opsi edit
        ['a','b','c','d'].forEach((ltr, idx) => {
            const item  = document.querySelector(`.edit-option-item[data-index="${idx}"]`);
            const input = item?.querySelector('.edit-option-input');
            const radio = item?.querySelector('.edit-correct-radio');
            if (input) input.value = q[`option_${ltr}`] || '';
            if (radio) radio.checked = q.correct_option === ltr;
        });

        // Hitung opsi yang terisi
        const opts   = ['a','b','c','d'];
        const filled = opts.filter(l => q[`option_${l}`]?.trim()).length;
        editOptionsCount = Math.max(2, filled);

        // Tampilkan/sembunyikan opsi
        document.querySelectorAll('.edit-option-item').forEach((item, idx) => {
            item.style.display = idx < editOptionsCount ? 'block' : 'none';
        });
        updateEditOptionCounter();

        // ── Gambar ──
        document.getElementById('editNewImagePreview').classList.add('hidden');
        document.getElementById('editQuestionImageInput').value = '';
        if (q.question_image) {
            document.getElementById('editCurrentImageDisplay').src = q.question_image;
            document.getElementById('editCurrentImagePreview').classList.remove('hidden');
        } else {
            document.getElementById('editCurrentImagePreview').classList.add('hidden');
        }

        checkEditFormValidity();

        // Highlight soal
        document.querySelectorAll('.question-item').forEach(i => i.classList.remove('border-indigo-300','bg-indigo-50'));
        document.querySelector(`[data-question-id="${questionId}"]`)?.classList.add('border-indigo-300','bg-indigo-50');

        // Scroll ke form
        document.getElementById('formContainer').scrollIntoView({ behavior: 'smooth' });
    })
    .catch(err => {
        loader.classList.add('hidden');
        loader.classList.remove('flex');
        console.error(err);
        showNotification('error', 'Terjadi kesalahan saat memuat data soal');
    });
}

// =============================================
// RESET FORM
// =============================================
function resetForm() {
    isEditMode = false;

    // Tampilkan form tambah, sembunyikan form edit
    document.getElementById('questionForm').style.display    = 'block';
    document.getElementById('editQuestionForm').style.display = 'none';
    document.getElementById('formTitle').textContent          = 'Input Soal Baru';
    document.getElementById('formIcon').className             = 'ph ph-plus-circle text-indigo-600 mr-2 text-xl';
    document.getElementById('cancelBtn').classList.add('hidden');

    // Reset form tambah
    document.getElementById('questionForm').reset();
    currentOptionsCount = 2;
    document.querySelectorAll('.option-item').forEach((item, idx) => {
        item.style.display = idx < 2 ? 'block' : 'none';
        if (idx >= 2) {
            item.querySelector('.option-input').value = '';
            const r = item.querySelector('.correct-option-radio'); if (r) r.checked = false;
        }
    });
    updateOptionCounter();
    updateButtonStates();

    // Reset gambar tambah
    document.getElementById('currentImagePreview').classList.add('hidden');
    document.getElementById('newImagePreviewContainer').classList.add('hidden');
    document.getElementById('uploadText').textContent = 'Klik untuk upload';
    document.getElementById('imageIcon').className   = 'ph ph-image text-2xl text-indigo-500';

    checkFormValidity();

    // Hapus highlight
    document.querySelectorAll('.question-item').forEach(i => i.classList.remove('border-indigo-300','bg-indigo-50'));

    showNotification('info', 'Form siap untuk input soal baru.');
}

// =============================================
// IMAGE HELPERS
// =============================================
function previewImage(event) {
    const file = event.target.files[0]; if (!file) return;
    if (file.size > 500*1024) { showNotification('error','Ukuran file maksimal 500KB'); event.target.value=''; return; }
    const reader = new FileReader();
    reader.onload = e => {
        document.getElementById('currentImagePreview').classList.add('hidden');
        document.getElementById('newImagePreview').src      = e.target.result;
        document.getElementById('newImageName').textContent = file.name;
        document.getElementById('newImageSize').textContent = formatBytes(file.size);
        document.getElementById('newImagePreviewContainer').classList.remove('hidden');
        document.getElementById('uploadText').textContent = 'Gambar baru dipilih';
        document.getElementById('imageIcon').className    = 'ph ph-check-circle text-2xl text-green-500';
    };
    reader.readAsDataURL(file);
}
function previewEditImage(event) {
    const file = event.target.files[0]; if (!file) return;
    if (file.size > 500*1024) { showNotification('error','Ukuran file maksimal 500KB'); event.target.value=''; return; }
    const reader = new FileReader();
    reader.onload = e => {
        document.getElementById('editCurrentImagePreview').classList.add('hidden');
        document.getElementById('editNewImageDisplay').src = e.target.result;
        document.getElementById('editNewImagePreview').classList.remove('hidden');
        document.getElementById('editUploadText').textContent = 'Gambar baru dipilih ✓';
        document.getElementById('editImageIcon').className   = 'ph ph-check-circle text-2xl text-green-500';
    };
    reader.readAsDataURL(file);
}
function removeCurrentImage() {
    document.getElementById('currentImagePreview').classList.add('hidden');
}
function removeNewImage() {
    document.getElementById('newImagePreviewContainer').classList.add('hidden');
    document.getElementById('questionImageInput').value = '';
}
function removeEditNewImage() {
    document.getElementById('editNewImagePreview').classList.add('hidden');
    document.getElementById('editQuestionImageInput').value = '';
    document.getElementById('editUploadText').textContent = 'Klik untuk ganti gambar';
    document.getElementById('editImageIcon').className   = 'ph ph-image text-2xl text-indigo-400';
}
function formatBytes(bytes) {
    if (!bytes) return '0 B';
    const k=1024, sz=['B','KB','MB'];
    const i=Math.floor(Math.log(bytes)/Math.log(k));
    return (bytes/Math.pow(k,i)).toFixed(1)+' '+sz[i];
}

// =============================================
// IMAGE MODAL
// =============================================
function toggleImagePreview(el) {
    const modal = el.nextElementSibling;
    if (modal) { modal.classList.remove('hidden'); modal.classList.add('flex'); }
}
function closeImageModal() {
    document.querySelector('.full-image-modal.flex')?.classList.remove('flex');
    document.querySelectorAll('.full-image-modal').forEach(m => m.classList.add('hidden'));
}

// =============================================
// NOTIFICATION
// =============================================
function showNotification(type, message) {
    const colors = { success:'bg-green-100 border-green-200 text-green-700', error:'bg-red-100 border-red-200 text-red-700', warning:'bg-yellow-100 border-yellow-200 text-yellow-700', info:'bg-blue-100 border-blue-200 text-blue-700' };
    const icons  = { success:'ph-check-circle', error:'ph-x-circle', warning:'ph-warning', info:'ph-info' };
    const wrap = document.createElement('div');
    wrap.className = 'fixed top-4 right-4 z-50 transform transition-all duration-300 translate-x-full';
    wrap.innerHTML = `<div class="${colors[type]||colors.info} border px-4 py-3 rounded-lg shadow-lg flex items-center max-w-sm"><i class="ph ${icons[type]||'ph-info'} text-xl mr-2"></i><span>${message}</span></div>`;
    document.body.appendChild(wrap);
    setTimeout(() => wrap.classList.replace('translate-x-full','translate-x-0'), 10);
    setTimeout(() => { wrap.classList.replace('translate-x-0','translate-x-full'); setTimeout(() => wrap.remove(), 300); }, 3500);
}

// =============================================
// INIT
// =============================================
document.addEventListener('DOMContentLoaded', function () {
    checkFormValidity();
    updateButtonStates();

    // Submit form tambah — spinner
    document.getElementById('questionForm').addEventListener('submit', function () {
        const btn = document.getElementById('submitBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="ph ph-circle-notch animate-spin mr-2"></i> Menyimpan...';
    });

    // Submit form edit — spinner
    document.getElementById('editQuestionForm').addEventListener('submit', function () {
        const btn = document.getElementById('editSubmitBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="ph ph-circle-notch animate-spin mr-2"></i> Menyimpan...';
    });

    // Close image modal
    document.addEventListener('click', e => { if (e.target.classList.contains('full-image-modal')) closeImageModal(); });
    document.addEventListener('keydown', e => { if (e.key === 'Escape') closeImageModal(); });

    // Drag & drop area (form tambah)
    const dropArea = document.querySelector('[onclick*="questionImageInput"]');
    if (dropArea) {
        ['dragenter','dragover','dragleave','drop'].forEach(ev => dropArea.addEventListener(ev, e => { e.preventDefault(); e.stopPropagation(); }));
        dropArea.addEventListener('dragenter', () => dropArea.classList.add('border-indigo-500','bg-indigo-50'));
        dropArea.addEventListener('dragleave', () => dropArea.classList.remove('border-indigo-500','bg-indigo-50'));
        dropArea.addEventListener('drop', e => {
            dropArea.classList.remove('border-indigo-500','bg-indigo-50');
            document.getElementById('questionImageInput').files = e.dataTransfer.files;
            document.getElementById('questionImageInput').dispatchEvent(new Event('change', { bubbles:true }));
        });
    }

    @if(session('success'))
        showNotification('success', '{{ addslashes(session('success')) }}');
    @endif
    @if($errors->any())
        showNotification('error', 'Terjadi kesalahan. Silakan periksa form.');
        const btn = document.getElementById('submitBtn');
        btn.disabled = false;
        checkFormValidity();
    @endif
});
</script>

<style>
.question-item { transition: all .2s ease; }
.question-item:hover { transform: translateY(-2px); }
.full-image-modal { backdrop-filter: blur(4px); }
@keyframes fade-in-down { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
.animate-fade-in-down { animation: fade-in-down .3s ease-out; }
.correct-option-radio, .edit-correct-radio { accent-color:#10b981; width:18px; height:18px; cursor:pointer; }
</style>

@endsection