@extends('layouts.guru')

@section('title', 'Kelola Soal Ujian - SIPENA Guru')
@section('page_title', 'Kelola Soal Ujian')

@push('styles')
<style>
    /* Tabs System Styling */
    .tabs-navigation {
        display: flex;
        border-bottom: 2px solid #e2e8f0;
        margin-bottom: 24px;
        gap: 8px;
        overflow-x: auto;
        flex-wrap: wrap;
    }
    .tab-btn {
        padding: 12px 20px;
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent;
        font-weight: 600;
        color: #64748b;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.95rem;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .tab-btn:hover {
        color: #2563eb;
    }
    .tab-btn.active {
        color: #2563eb;
        border-bottom-color: #2563eb;
    }
    .tab-content {
        display: none;
    }
    .tab-content.active {
        display: block;
    }

    /* Modal dialog overrides & custom styles */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.6);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        backdrop-filter: blur(4px);
        overflow-y: auto;
        padding: 20px;
        box-sizing: border-box;
    }
    .modal-overlay.active {
        display: flex;
    }
    .modal-container {
        background: #ffffff;
        border-radius: 16px;
        width: 100%;
        max-width: 650px;
        max-height: calc(100vh - 40px);
        overflow: hidden;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        animation: modalFadeIn 0.3s ease-out;
        display: flex;
        flex-direction: column;
    }
    .modal-container.large {
        max-width: 900px;
    }
    .modal-container > form {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    @keyframes modalFadeIn {
        from { transform: scale(0.95); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }
    .modal-header {
        padding: 16px 24px;
        border-bottom: 1px solid #f1f5f9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
    }
    .modal-header h3 {
        margin: 0;
        font-size: 1.25rem;
        color: #1e293b;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .modal-close {
        background: transparent;
        border: none;
        font-size: 1.25rem;
        color: #94a3b8;
        cursor: pointer;
    }
    .modal-close:hover {
        color: #ef4444;
    }
    .modal-body {
        padding: 24px;
        overflow-y: auto;
        min-height: 0;
    }
    .modal-footer {
        padding: 16px 24px;
        border-top: 1px solid #f1f5f9;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        flex-shrink: 0;
        flex-wrap: wrap;
        background: #fff;
    }

    /* Algorithm Card Style */
    .algo-card {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        border-left: 5px solid #2563eb;
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 24px;
        color: #1e3a8a;
    }

    .preview-table-container {
        max-height: 350px;
        overflow: auto;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        margin-top: 16px;
    }

    .preview-table {
        width: 100%;
        min-width: 760px;
        border-collapse: collapse;
        font-size: 0.85rem;
        table-layout: fixed;
    }
    .preview-table th {
        background: #f8fafc;
        position: sticky;
        top: 0;
        padding: 10px;
        border-bottom: 2px solid #e2e8f0;
        text-align: left;
        color: #475569;
        z-index: 10;
    }
    .preview-table td {
        padding: 10px;
        border-bottom: 1px solid #f1f5f9;
        color: #334155;
        overflow-wrap: anywhere;
        word-break: break-word;
        vertical-align: top;
    }

    .modern-table td,
    .modern-table th {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .table-responsive {
        overflow-x: auto;
    }

    @media (max-width: 640px) {
        .modal-overlay {
            padding: 12px;
            align-items: flex-start;
        }

        .modal-container {
            max-height: calc(100vh - 24px);
            border-radius: 12px;
        }

        .modal-header,
        .modal-body,
        .modal-footer {
            padding-left: 16px;
            padding-right: 16px;
        }

        .modal-footer > .btn,
        .modal-footer > button {
            width: 100%;
            justify-content: center;
        }
    }

    .badge-status {
        padding: 4px 8px;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 700;
        display: inline-block;
    }
    .badge-aktif { background-color: #dcfce7; color: #16a34a; }
    .badge-draft { background-color: #f1f5f9; color: #475569; }
    .badge-ditutup { background-color: #fee2e2; color: #ef4444; }
</style>
@endpush

@section('content')

<!-- BREADCRUMB / ACCORDION TRIGGER -->
<div class="page-header" style="margin-bottom: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;">
    <div>
        @if($activeUjian)
            <h1><a href="{{ route('guru.soal') }}" class="text-primary" style="text-decoration: none;"><i class="fa-solid fa-arrow-left"></i> Kembali</a> / Kelola: {{ $activeUjian->judul }}</h1>
            <p>Mata Pelajaran: {{ $activeUjian->mataPelajaran->nama_mapel }} | Kelas: {{ $activeUjian->kelas->nama_kelas }}</p>
        @else
            <h1>Kelola Ujian & Bank Soal</h1>
            <p>Buat, kelola kuis, import excel, dan pantau nilai ujian siswa.</p>
        @endif
    </div>
    @if(!$activeUjian)
        <button onclick="openModal('modal-buat-ujian')" class="btn btn-primary" style="height: 42px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; border-radius: 8px; border: none; background-color: #2563eb; color: #fff; padding: 0 18px;">
            <i class="fa-solid fa-plus"></i> Buat Ujian Baru
        </button>
    @endif
</div>

<!-- STATS CARDS -->
<div class="stats-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 24px;">
    <div class="stat-card" style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 16px; border: 1px solid #e2e8f0;">
        <div style="background-color: #eff6ff; color: #2563eb; width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
            <i class="fa-solid fa-list-check"></i>
        </div>
        <div>
            <h3 style="font-size: 0.85rem; color: #64748b; margin: 0; text-transform: uppercase; letter-spacing: 0.05em;">Total Ujian</h3>
            <p style="font-size: 1.8rem; font-weight: 700; color: #1e293b; margin: 5px 0 0 0;">{{ $totalUjian }}</p>
        </div>
    </div>
    <div class="stat-card" style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 16px; border: 1px solid #e2e8f0;">
        <div style="background-color: #faf5ff; color: #9333ea; width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
            <i class="fa-solid fa-database"></i>
        </div>
        <div>
            <h3 style="font-size: 0.85rem; color: #64748b; margin: 0; text-transform: uppercase; letter-spacing: 0.05em;">Total Bank Soal</h3>
            <p style="font-size: 1.8rem; font-weight: 700; color: #1e293b; margin: 5px 0 0 0;">{{ $totalBankSoal }}</p>
        </div>
    </div>
    <div class="stat-card" style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 16px; border: 1px solid #e2e8f0;">
        <div style="background-color: #f0fdf4; color: #22c55e; width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
            <i class="fa-solid fa-clock"></i>
        </div>
        <div>
            <h3 style="font-size: 0.85rem; color: #64748b; margin: 0; text-transform: uppercase; letter-spacing: 0.05em;">Ujian Aktif</h3>
            <p style="font-size: 1.8rem; font-weight: 700; color: #1e293b; margin: 5px 0 0 0;">{{ $ujianAktif }}</p>
        </div>
    </div>
    <div class="stat-card" style="background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); display: flex; align-items: center; gap: 16px; border: 1px solid #e2e8f0;">
        <div style="background-color: #fffbeb; color: #d97706; width: 48px; height: 48px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;">
            <i class="fa-solid fa-user-graduate"></i>
        </div>
        <div>
            <h3 style="font-size: 0.85rem; color: #64748b; margin: 0; text-transform: uppercase; letter-spacing: 0.05em;">Peserta Ujian</h3>
            <p style="font-size: 1.8rem; font-weight: 700; color: #1e293b; margin: 5px 0 0 0;">{{ $totalPesertaUjian }}</p>
        </div>
    </div>
</div>

@if(!$activeUjian)
<!-- ============================================ -->
<!-- LIST VIEW: DAFTAR UJIAN -->
<!-- ============================================ -->
<div class="card" style="background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; margin-bottom: 24px;">
    <div class="card-header" style="padding: 16px 24px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;">
        <h3 style="margin: 0; font-size: 1.1rem; color: #1e293b; font-weight: 600;"><i class="fa-solid fa-table text-primary"></i> Daftar Ujian Anda</h3>
        
        <!-- Filter Form -->
        <form action="{{ route('guru.soal') }}" method="GET" style="display: flex; gap: 10px; flex-wrap: wrap; align-items: center;">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari Judul..." style="height: 36px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.9rem;">
            
            <select name="filter_mapel" style="height: 36px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.9rem; min-width: 130px;">
                <option value="">Semua Mapel</option>
                @foreach($mataPelajaran as $m)
                    <option value="{{ $m->id }}" {{ request('filter_mapel') == $m->id ? 'selected' : '' }}>{{ $m->nama_mapel }}</option>
                @endforeach
            </select>
            
            <select name="filter_kelas" style="height: 36px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.9rem; min-width: 100px;">
                <option value="">Semua Kelas</option>
                @foreach($kelas as $k)
                    <option value="{{ $k->id }}" {{ request('filter_kelas') == $k->id ? 'selected' : '' }}>Kelas {{ $k->nama_kelas }}</option>
                @endforeach
            </select>

            <select name="filter_status" style="height: 36px; padding: 0 10px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.9rem; min-width: 110px;">
                <option value="">Semua Status</option>
                <option value="Draft" {{ request('filter_status') == 'Draft' ? 'selected' : '' }}>Draft</option>
                <option value="Aktif" {{ request('filter_status') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                <option value="Ditutup" {{ request('filter_status') == 'Ditutup' ? 'selected' : '' }}>Ditutup</option>
            </select>

            <button type="submit" class="btn btn-primary" style="height: 36px; padding: 0 16px; border-radius: 6px; border: none; background: #2563eb; color: white; cursor: pointer; font-weight: 600;"><i class="fa-solid fa-magnifying-glass"></i> Cari</button>
            @if(request()->anyFilled(['search', 'filter_mapel', 'filter_kelas', 'filter_status']))
                <a href="{{ route('guru.soal') }}" class="btn" style="height: 36px; padding: 0 16px; border-radius: 6px; border: 1px solid #cbd5e1; display: inline-flex; align-items: center; justify-content: center; color: #475569; text-decoration: none; font-weight: 600;">Reset</a>
            @endif
        </form>
    </div>
    <div class="card-body" style="padding: 0;">
        <div class="table-responsive">
            <table class="modern-table" style="width: 100%; border-collapse: collapse; text-align: left;">
                <thead>
                    <tr style="background-color: #f8fafc; border-bottom: 2px solid #e2e8f0;">
                        <th style="padding: 16px 24px; font-weight: 600; color: #475569;">Judul Ujian</th>
                        <th style="padding: 16px 24px; font-weight: 600; color: #475569;">Kelas</th>
                        <th style="padding: 16px 24px; font-weight: 600; color: #475569;">Mata Pelajaran</th>
                        <th style="padding: 16px 24px; font-weight: 600; color: #475569; text-align: center;">Jumlah Soal</th>
                        <th style="padding: 16px 24px; font-weight: 600; color: #475569; text-align: center;">Durasi</th>
                        <th style="padding: 16px 24px; font-weight: 600; color: #475569;">Status</th>
                        <th style="padding: 16px 24px; font-weight: 600; color: #475569; text-align: center;">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($ujianList as $item)
                    <tr style="border-bottom: 1px solid #f1f5f9; transition: background-color 0.2s;">
                        <td style="padding: 16px 24px; font-weight: 600; color: #1e293b;">{{ $item->judul }}</td>
                        <td style="padding: 16px 24px;">Kelas {{ $item->kelas->nama_kelas }}</td>
                        <td style="padding: 16px 24px;">{{ $item->mataPelajaran->nama_mapel }}</td>
                        <td style="padding: 16px 24px; text-align: center; font-weight: bold; color: #2563eb;">{{ $item->soalUjian->count() }} Soal</td>
                        <td style="padding: 16px 24px; text-align: center;">{{ $item->durasi }} Menit</td>
                        <td style="padding: 16px 24px;">
                            <span class="badge-status badge-{{ strtolower($item->status) }}">{{ $item->status }}</span>
                        </td>
                        <td style="padding: 16px 24px; text-align: center;">
                            <div style="display: flex; gap: 8px; justify-content: center;">
                                <a href="{{ route('guru.soal', ['ujian_id' => $item->id]) }}" class="btn btn-primary" style="height: 32px; padding: 0 12px; font-size: 0.8rem; border-radius: 6px; background-color: #2563eb; color: white; display: inline-flex; align-items: center; gap: 4px; text-decoration: none; font-weight: 600;">
                                    <i class="fa-solid fa-gear"></i> Kelola
                                </a>
                                <button onclick="openEditUjianModal({{ json_encode($item) }})" class="btn" style="height: 32px; padding: 0 10px; font-size: 0.8rem; border-radius: 6px; border: 1px solid #cbd5e1; background-color: white; color: #475569; display: inline-flex; align-items: center; cursor: pointer;">
                                    <i class="fa-solid fa-pen"></i>
                                </button>
                                <form action="{{ route('guru.soal.destroy', $item->id) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus ujian ini? Seluruh data soal dan hasil ujian terkait juga akan terhapus.');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn" style="height: 32px; padding: 0 10px; font-size: 0.8rem; border-radius: 6px; border: 1px solid #fca5a5; background-color: #fef2f2; color: #ef4444; display: inline-flex; align-items: center; cursor: pointer;">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" style="padding: 32px; text-align: center; color: #64748b; font-style: italic;">
                            Belum ada ujian dibuat. Silakan klik "Buat Ujian Baru" di atas.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <div style="padding: 16px 24px;">
            {{ $ujianList->links() }}
        </div>
    </div>
</div>

@else
<!-- ============================================ -->
<!-- DETAIL VIEW: DETAIL / KELOLA UJIAN (TABS) -->
<!-- ============================================ -->
<div class="tabs-navigation">
    <button class="tab-btn active" onclick="switchTab(event, 'tab-info')"><i class="fa-solid fa-circle-info"></i> Informasi Ujian</button>
    <button class="tab-btn" onclick="switchTab(event, 'tab-bank-soal')"><i class="fa-solid fa-database"></i> Bank Soal ({{ $soals->count() }})</button>
    <button class="tab-btn" onclick="switchTab(event, 'tab-hasil')"><i class="fa-solid fa-star"></i> Hasil Ujian ({{ $hasilUjians->count() }})</button>
</div>

<!-- ----------------------- -->
<!-- TAB 1: INFORMASI UJIAN  -->
<!-- ----------------------- -->
<div id="tab-info" class="tab-content active">
    <div style="display: grid; grid-template-columns: 2fr 1.2fr; gap: 24px; align-items: start;">
        <!-- Kiri: Detail Metadata -->
        <div class="card" style="background: white; border-radius: 12px; border: 1px solid #e2e8f0; padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,0.05);">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h3 style="margin: 0; font-size: 1.2rem; color: #1e293b;"><i class="fa-solid fa-file-lines text-primary"></i> Data Utama Ujian</h3>
                <button onclick="openEditUjianModal({{ json_encode($activeUjian) }})" class="btn btn-outline" style="height: 36px; padding: 0 16px; border: 1px solid #cbd5e1; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; background: transparent;"><i class="fa-solid fa-pen-to-square"></i> Edit Pengaturan</button>
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                <div>
                    <label style="font-weight: 700; color: #475569; font-size: 0.85rem; display: block; margin-bottom: 4px;">Judul Ujian</label>
                    <p style="color: #1e293b; font-weight: 600; margin: 0; font-size: 1.05rem;">{{ $activeUjian->judul }}</p>
                </div>
                <div>
                    <label style="font-weight: 700; color: #475569; font-size: 0.85rem; display: block; margin-bottom: 4px;">Status Ujian</label>
                    <p style="margin: 0;"><span class="badge-status badge-{{ strtolower($activeUjian->status) }}">{{ $activeUjian->status }}</span></p>
                </div>
                <div>
                    <label style="font-weight: 700; color: #475569; font-size: 0.85rem; display: block; margin-bottom: 4px;">Mata Pelajaran</label>
                    <p style="color: #1e293b; margin: 0;">{{ $activeUjian->mataPelajaran->nama_mapel }}</p>
                </div>
                <div>
                    <label style="font-weight: 700; color: #475569; font-size: 0.85rem; display: block; margin-bottom: 4px;">Target Kelas</label>
                    <p style="color: #1e293b; margin: 0;">Kelas {{ $activeUjian->kelas->nama_kelas }}</p>
                </div>
                <div>
                    <label style="font-weight: 700; color: #475569; font-size: 0.85rem; display: block; margin-bottom: 4px;">Durasi Ujian</label>
                    <p style="color: #1e293b; margin: 0; font-weight: 600;"><i class="fa-regular fa-clock"></i> {{ $activeUjian->durasi }} Menit</p>
                </div>
                <div>
                    <label style="font-weight: 700; color: #475569; font-size: 0.85rem; display: block; margin-bottom: 4px;">Jumlah Soal Terdaftar</label>
                    <p style="color: #2563eb; margin: 0; font-weight: 700;">{{ $soals->count() }} Butir Soal</p>
                </div>
                <div>
                    <label style="font-weight: 700; color: #475569; font-size: 0.85rem; display: block; margin-bottom: 4px;">Mulai Ujian</label>
                    <p style="color: #1e293b; margin: 0; font-size: 0.9rem;"><i class="fa-regular fa-calendar"></i> {{ $activeUjian->waktu_mulai_ujian->format('d M Y, H:i') }} WIB</p>
                </div>
                <div>
                    <label style="font-weight: 700; color: #475569; font-size: 0.85rem; display: block; margin-bottom: 4px;">Selesai Otomatis</label>
                    <p style="color: #1e293b; margin: 0; font-size: 0.9rem;"><i class="fa-regular fa-calendar-xmark"></i> {{ $activeUjian->waktu_selesai_otomatis->format('d M Y, H:i') }} WIB</p>
                </div>
            </div>
        </div>
        
        <!-- Kanan: Info Shuffle & Acak -->
        <div>
            <div class="algo-card">
                <h3 style="margin-top: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 8px;"><i class="fa-solid fa-shuffle"></i> Fisher-Yates Shuffle</h3>
                <p style="font-size: 0.9rem; line-height: 1.5; margin-bottom: 12px;">Sistem menggunakan algoritma pengacakan **Fisher-Yates Shuffle** secara real-time saat siswa mulai mengerjakan ujian.</p>
                
                <ul style="padding-left: 18px; margin: 0 0 16px 0; font-size: 0.85rem; line-height: 1.4;">
                    <li><strong>Acak Urutan Soal</strong>: {{ $activeUjian->acak_soal ? 'AKTIF (Soal diacak untuk setiap siswa)' : 'TIDAK AKTIF' }}</li>
                    <li><strong>Acak Pilihan Jawaban</strong>: {{ $activeUjian->acak_jawaban ? 'AKTIF (Opsi pilihan ganda diacak)' : 'TIDAK AKTIF' }}</li>
                </ul>

                <blockquote style="font-style: italic; border-left: 2px solid #3b82f6; padding-left: 10px; margin: 0; font-size: 0.8rem; color: #475569;">
                    "Fisher-Yates menjamin pengacakan yang adil (unbiased permutation) sehingga mencegah siswa saling menyontek."
                </blockquote>
            </div>
        </div>
    </div>
</div>

<!-- ----------------------- -->
<!-- TAB 2: BANK SOAL        -->
<!-- ----------------------- -->
<div id="tab-bank-soal" class="tab-content">
    <div class="card" style="background: white; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 24px;">
        <div class="card-header" style="padding: 16px 24px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;">
            <h3 style="margin: 0; font-size: 1.1rem; color: #1e293b; font-weight: 600;"><i class="fa-solid fa-list-ol text-primary"></i> Daftar Soal Ujian ({{ $soals->count() }})</h3>
            
            <div style="display: flex; gap: 8px;">
                <button onclick="openModal('modal-tambah-soal')" class="btn btn-primary" style="height: 36px; padding: 0 16px; border-radius: 6px; border: none; background: #2563eb; color: white; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 600;"><i class="fa-solid fa-plus"></i> Tambah Soal</button>
                <button onclick="openModal('modal-import-excel')" class="btn" style="height: 36px; padding: 0 16px; border-radius: 6px; border: 1px solid #cbd5e1; background: white; color: #475569; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 600;"><i class="fa-solid fa-file-excel text-success"></i> Import Excel</button>
                <button onclick="Swal.fire({title: 'Coming Soon', text: 'Fitur Import Word akan tersedia pada versi berikutnya.', icon: 'info', confirmButtonColor: '#2563eb'})" class="btn" style="height: 36px; padding: 0 16px; border-radius: 6px; border: 1px solid #cbd5e1; background: white; color: #94a3b8; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 600;"><i class="fa-solid fa-file-word text-primary"></i> Import Word (Placeholder)</button>
            </div>
        </div>
        
        <div class="card-body" style="padding: 24px;">
            <div style="display: flex; flex-direction: column; gap: 20px;">
                @forelse($soals as $idx => $s)
                <div style="border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; background-color: #f8fafc; position: relative;">
                    <!-- Action Buttons -->
                    <div style="position: absolute; top: 20px; right: 20px; display: flex; gap: 8px;">
                        <button onclick="openEditSoalModal({{ json_encode($s) }})" class="btn" style="width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid #cbd5e1; background: white; color: #475569; cursor: pointer;" title="Edit Soal">
                            <i class="fa-solid fa-pen"></i>
                        </button>
                        <form action="{{ route('guru.soal.hapus-soal', [$activeUjian->id, $s->id]) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus soal ini?');" style="display: inline;">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn" style="width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid #fca5a5; background: #fef2f2; color: #ef4444; cursor: pointer;" title="Hapus Soal">
                                <i class="fa-solid fa-trash"></i>
                            </button>
                        </form>
                    </div>

                    <div style="margin-bottom: 12px; display: flex; align-items: center; gap: 8px;">
                        <span style="font-weight: 800; font-size: 0.95rem; color: #2563eb; background: #eff6ff; padding: 4px 10px; border-radius: 6px;">Soal {{ $idx + 1 }}</span>
                        <span style="font-size: 0.8rem; color: #64748b;"><i class="fa-solid fa-tag"></i> {{ $s->tipe_soal }}</span>
                        <span style="font-size: 0.8rem; color: #64748b; font-weight: 700; margin-left: 8px;">Bobot: {{ $s->bobot }}</span>
                    </div>

                    <!-- Question Image -->
                    @if($s->gambar)
                        <div style="margin-bottom: 12px;">
                            <img src="{{ asset('storage/' . $s->gambar) }}" alt="Gambar Soal" style="max-height: 150px; border-radius: 8px; border: 1px solid #e2e8f0; background: white; padding: 4px;">
                        </div>
                    @endif

                    <!-- Question Text -->
                    <div style="font-size: 1.05rem; color: #1e293b; font-weight: 600; margin-bottom: 16px; padding-right: 80px; line-height: 1.5;">
                        {!! nl2br(e($s->pertanyaan)) !!}
                    </div>

                    <!-- Options Grid -->
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                        <div style="padding: 10px 14px; border-radius: 8px; border: 1px solid #cbd5e1; background: {{ $s->jawaban_benar == 'A' ? '#dcfce7; border-color: #86efac;' : 'white' }}; display: flex; gap: 10px; align-items: center;">
                            <span style="font-weight: 700; color: {{ $s->jawaban_benar == 'A' ? '#15803d' : '#64748b' }}; background: {{ $s->jawaban_benar == 'A' ? '#bbf7d0' : '#f1f5f9' }}; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">A</span>
                            <span>{{ $s->opsi_a }}</span>
                        </div>
                        <div style="padding: 10px 14px; border-radius: 8px; border: 1px solid #cbd5e1; background: {{ $s->jawaban_benar == 'B' ? '#dcfce7; border-color: #86efac;' : 'white' }}; display: flex; gap: 10px; align-items: center;">
                            <span style="font-weight: 700; color: {{ $s->jawaban_benar == 'B' ? '#15803d' : '#64748b' }}; background: {{ $s->jawaban_benar == 'B' ? '#bbf7d0' : '#f1f5f9' }}; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">B</span>
                            <span>{{ $s->opsi_b }}</span>
                        </div>
                        <div style="padding: 10px 14px; border-radius: 8px; border: 1px solid #cbd5e1; background: {{ $s->jawaban_benar == 'C' ? '#dcfce7; border-color: #86efac;' : 'white' }}; display: flex; gap: 10px; align-items: center;">
                            <span style="font-weight: 700; color: {{ $s->jawaban_benar == 'C' ? '#15803d' : '#64748b' }}; background: {{ $s->jawaban_benar == 'C' ? '#bbf7d0' : '#f1f5f9' }}; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">C</span>
                            <span>{{ $s->opsi_c }}</span>
                        </div>
                        <div style="padding: 10px 14px; border-radius: 8px; border: 1px solid #cbd5e1; background: {{ $s->jawaban_benar == 'D' ? '#dcfce7; border-color: #86efac;' : 'white' }}; display: flex; gap: 10px; align-items: center;">
                            <span style="font-weight: 700; color: {{ $s->jawaban_benar == 'D' ? '#15803d' : '#64748b' }}; background: {{ $s->jawaban_benar == 'D' ? '#bbf7d0' : '#f1f5f9' }}; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">D</span>
                            <span>{{ $s->opsi_d }}</span>
                        </div>
                    </div>
                </div>
                @empty
                <div style="padding: 40px; text-align: center; color: #64748b; font-style: italic; border: 2px dashed #cbd5e1; border-radius: 12px;">
                    Belum ada soal ujian. Klik "Tambah Soal" atau "Import Excel" di atas untuk menambahkan.
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<!-- ----------------------- -->
<!-- TAB 3: HASIL UJIAN      -->
<!-- ----------------------- -->
<div id="tab-hasil" class="tab-content">
    <div class="card" style="background: white; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); margin-bottom: 24px;">
        <div class="card-header" style="padding: 16px 24px; border-bottom: 1px solid #f1f5f9;">
            <h3 style="margin: 0; font-size: 1.1rem; color: #1e293b; font-weight: 600;"><i class="fa-solid fa-award text-primary"></i> Rekapitulasi Nilai Siswa</h3>
        </div>
        <div class="card-body" style="padding: 0;">
            <div class="table-responsive">
                <table class="modern-table" style="width: 100%; border-collapse: collapse; text-align: left;">
                    <thead>
                        <tr style="background-color: #f8fafc; border-bottom: 2px solid #e2e8f0;">
                            <th style="padding: 16px 24px; font-weight: 600; color: #475569;">No</th>
                            <th style="padding: 16px 24px; font-weight: 600; color: #475569;">Nama Siswa</th>
                            <th style="padding: 16px 24px; font-weight: 600; color: #475569;">NIS</th>
                            <th style="padding: 16px 24px; font-weight: 600; color: #475569; text-align: center;">Jawaban Benar</th>
                            <th style="padding: 16px 24px; font-weight: 600; color: #475569; text-align: center;">Jawaban Salah</th>
                            <th style="padding: 16px 24px; font-weight: 600; color: #475569; text-align: center;">Nilai</th>
                            <th style="padding: 16px 24px; font-weight: 600; color: #475569;">Tanggal Submit</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($hasilUjians as $idx => $hu)
                        <tr style="border-bottom: 1px solid #f1f5f9;">
                            <td style="padding: 16px 24px;">{{ $idx + 1 }}</td>
                            <td style="padding: 16px 24px; font-weight: 600; color: #1e293b;">{{ $hu->siswa->name }}</td>
                            <td style="padding: 16px 24px;">{{ $hu->siswa->siswaProfile->nis ?? '-' }}</td>
                            <td style="padding: 16px 24px; text-align: center; color: #16a34a; font-weight: 600;">{{ $hu->benar }}</td>
                            <td style="padding: 16px 24px; text-align: center; color: #ef4444; font-weight: 600;">{{ $hu->salah }}</td>
                            <td style="padding: 16px 24px; text-align: center;">
                                <span style="font-size: 1.1rem; font-weight: 800; color: {{ $hu->nilai >= 70 ? '#16a34a' : '#ef4444' }}">{{ $hu->nilai }}</span>
                            </td>
                            <td style="padding: 16px 24px; color: #64748b; font-size: 0.9rem;">{{ $hu->created_at->format('d M Y, H:i') }} WIB</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" style="padding: 32px; text-align: center; color: #64748b; font-style: italic;">
                                Belum ada hasil ujian masuk untuk kelas ini.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endif

<!-- ============================================ -->
<!-- MODAL: BUAT UJIAN BARU -->
<!-- ============================================ -->
<div id="modal-buat-ujian" class="modal-overlay">
    <div class="modal-container">
        <div class="modal-header">
            <h3><i class="fa-solid fa-plus text-primary"></i> Buat Ujian Baru</h3>
            <button class="modal-close" onclick="closeModal('modal-buat-ujian')">&times;</button>
        </div>
        <form action="{{ route('guru.soal.store') }}" method="POST">
            @csrf
            <div class="modal-body">
                <div class="form-group mb-3">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Judul Ujian <span style="color: red;">*</span></label>
                    <input type="text" name="judul" class="form-control" placeholder="Contoh: Ujian Harian Pecahan Matematika" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                </div>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Mata Pelajaran <span style="color: red;">*</span></label>
                        <select name="mata_pelajaran_id" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                            @foreach($mataPelajaran as $m)
                                <option value="{{ $m->id }}">{{ $m->nama_mapel }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Target Kelas <span style="color: red;">*</span></label>
                        <select name="kelas_id" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                            @foreach($kelas as $k)
                                <option value="{{ $k->id }}">Kelas {{ $k->nama_kelas }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; margin-bottom: 16px;">
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Durasi (Menit) <span style="color: red;">*</span></label>
                        <input type="number" name="durasi" id="create-ujian-durasi" value="60" min="1" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Status Ujian <span style="color: red;">*</span></label>
                        <select name="status" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                            <option value="Draft">Draft</option>
                            <option value="Aktif">Aktif</option>
                            <option value="Ditutup">Ditutup</option>
                        </select>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Tanggal & Jam Mulai <span style="color: red;">*</span></label>
                        <input type="datetime-local" name="tanggal_mulai" id="create-ujian-mulai" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Selesai Otomatis</label>
                        <input type="text" id="create-ujian-selesai-preview" class="form-control" value="Isi jam mulai dan durasi" readonly style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px; background: #f8fafc; color: #64748b;">
                        <small style="display: block; margin-top: 6px; color: #64748b;">Jam selesai dihitung otomatis dari jam mulai + durasi.</small>
                    </div>
                </div>

                <div style="display: flex; gap: 24px; margin-top: 10px;">
                    <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600;">
                        <input type="checkbox" name="acak_soal" value="1" checked style="width: 18px; height: 18px; cursor: pointer;">
                        Acak Urutan Soal (Fisher-Yates)
                    </label>
                    <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600;">
                        <input type="checkbox" name="acak_jawaban" value="1" checked style="width: 18px; height: 18px; cursor: pointer;">
                        Acak Pilihan Jawaban
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" onclick="closeModal('modal-buat-ujian')" style="height: 38px; padding: 0 16px; border-radius: 6px; border: 1px solid #cbd5e1; cursor: pointer; background: white;">Batal</button>
                <button type="submit" class="btn btn-primary" style="height: 38px; padding: 0 20px; border-radius: 6px; border: none; background: #2563eb; color: white; cursor: pointer; font-weight: 600;">Buat Ujian</button>
            </div>
        </form>
    </div>
</div>

<!-- ============================================ -->
<!-- MODAL: EDIT UJIAN -->
<!-- ============================================ -->
<div id="modal-edit-ujian" class="modal-overlay">
    <div class="modal-container">
        <div class="modal-header">
            <h3><i class="fa-solid fa-pen-to-square text-primary"></i> Edit Pengaturan Ujian</h3>
            <button class="modal-close" onclick="closeModal('modal-edit-ujian')">&times;</button>
        </div>
        <form id="edit-ujian-form" method="POST">
            @csrf
            @method('PUT')
            <div class="modal-body">
                <div class="form-group mb-3">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Judul Ujian <span style="color: red;">*</span></label>
                    <input type="text" name="judul" id="edit-ujian-judul" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                </div>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Mata Pelajaran <span style="color: red;">*</span></label>
                        <select name="mata_pelajaran_id" id="edit-ujian-mapel" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                            @foreach($mataPelajaran as $m)
                                <option value="{{ $m->id }}">{{ $m->nama_mapel }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Target Kelas <span style="color: red;">*</span></label>
                        <select name="kelas_id" id="edit-ujian-kelas" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                            @foreach($kelas as $k)
                                <option value="{{ $k->id }}">Kelas {{ $k->nama_kelas }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; margin-bottom: 16px;">
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Durasi (Menit) <span style="color: red;">*</span></label>
                        <input type="number" name="durasi" id="edit-ujian-durasi" min="1" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Status Ujian <span style="color: red;">*</span></label>
                        <select name="status" id="edit-ujian-status" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                            <option value="Draft">Draft</option>
                            <option value="Aktif">Aktif</option>
                            <option value="Ditutup">Ditutup</option>
                        </select>
                    </div>
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Tanggal & Jam Mulai <span style="color: red;">*</span></label>
                        <input type="datetime-local" name="tanggal_mulai" id="edit-ujian-mulai" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Selesai Otomatis</label>
                        <input type="text" id="edit-ujian-selesai-preview" class="form-control" readonly style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px; background: #f8fafc; color: #64748b;">
                        <small style="display: block; margin-top: 6px; color: #64748b;">Jam selesai dihitung otomatis dari jam mulai + durasi.</small>
                    </div>
                </div>

                <div style="display: flex; gap: 24px; margin-top: 10px;">
                    <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600;">
                        <input type="checkbox" name="acak_soal" id="edit-ujian-acak-soal" value="1" style="width: 18px; height: 18px; cursor: pointer;">
                        Acak Urutan Soal (Fisher-Yates)
                    </label>
                    <label style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600;">
                        <input type="checkbox" name="acak_jawaban" id="edit-ujian-acak-jawaban" value="1" style="width: 18px; height: 18px; cursor: pointer;">
                        Acak Pilihan Jawaban
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" onclick="closeModal('modal-edit-ujian')" style="height: 38px; padding: 0 16px; border-radius: 6px; border: 1px solid #cbd5e1; cursor: pointer; background: white;">Batal</button>
                <button type="submit" class="btn btn-primary" style="height: 38px; padding: 0 20px; border-radius: 6px; border: none; background: #2563eb; color: white; cursor: pointer; font-weight: 600;">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>

@if($activeUjian)
<!-- ============================================ -->
<!-- MODAL: TAMBAH SOAL MANUALL -->
<!-- ============================================ -->
<div id="modal-tambah-soal" class="modal-overlay">
    <div class="modal-container">
        <div class="modal-header">
            <h3><i class="fa-solid fa-plus text-primary"></i> Tambah Soal Ujian</h3>
            <button class="modal-close" onclick="closeModal('modal-tambah-soal')">&times;</button>
        </div>
        <form action="{{ route('guru.soal.tambah-soal', $activeUjian->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="modal-body">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Tipe Soal <span style="color: red;">*</span></label>
                        <select name="tipe_soal" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                            <option value="Pilihan Ganda">Pilihan Ganda</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Bobot Soal <span style="color: red;">*</span></label>
                        <input type="number" step="0.1" name="bobot" value="1.0" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Pertanyaan <span style="color: red;">*</span></label>
                    <textarea name="pertanyaan" class="form-control" rows="4" placeholder="Tuliskan pertanyaan di sini..." required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px 12px; box-sizing: border-box; resize: vertical; min-height: 90px;"></textarea>
                </div>

                <div class="form-group mb-3">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Gambar Pendukung (Opsional)</label>
                    <input type="file" name="gambar" accept="image/*" class="form-control" style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 12px; box-sizing: border-box;">
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Pilihan A <span style="color: red;">*</span></label>
                        <input type="text" name="opsi_a" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Pilihan B <span style="color: red;">*</span></label>
                        <input type="text" name="opsi_b" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Pilihan C <span style="color: red;">*</span></label>
                        <input type="text" name="opsi_c" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Pilihan D <span style="color: red;">*</span></label>
                        <input type="text" name="opsi_d" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Jawaban Benar <span style="color: red;">*</span></label>
                    <select name="jawaban_benar" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                        <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                        <option value="D">D</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" onclick="closeModal('modal-tambah-soal')" style="height: 38px; padding: 0 16px; border-radius: 6px; border: 1px solid #cbd5e1; cursor: pointer; background: white;">Batal</button>
                <button type="submit" class="btn btn-primary" style="height: 38px; padding: 0 20px; border-radius: 6px; border: none; background: #2563eb; color: white; cursor: pointer; font-weight: 600;">Simpan Soal</button>
            </div>
        </form>
    </div>
</div>

<!-- ============================================ -->
<!-- MODAL: EDIT SOAL -->
<!-- ============================================ -->
<div id="modal-edit-soal" class="modal-overlay">
    <div class="modal-container">
        <div class="modal-header">
            <h3><i class="fa-solid fa-pen text-primary"></i> Edit Soal Ujian</h3>
            <button class="modal-close" onclick="closeModal('modal-edit-soal')">&times;</button>
        </div>
        <form id="edit-soal-form" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="modal-body">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Tipe Soal <span style="color: red;">*</span></label>
                        <select name="tipe_soal" id="edit-soal-tipe" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                            <option value="Pilihan Ganda">Pilihan Ganda</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Bobot Soal <span style="color: red;">*</span></label>
                        <input type="number" step="0.1" name="bobot" id="edit-soal-bobot" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Pertanyaan <span style="color: red;">*</span></label>
                    <textarea name="pertanyaan" id="edit-soal-pertanyaan" class="form-control" rows="4" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 10px 12px; box-sizing: border-box; resize: vertical; min-height: 90px;"></textarea>
                </div>

                <!-- Existing Image Preview -->
                <div id="edit-soal-image-container" class="mb-3" style="display: none;">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 4px;">Gambar Saat Ini</label>
                    <img id="edit-soal-image-preview" src="" style="max-height: 100px; border-radius: 6px; border: 1px solid #cbd5e1;">
                </div>

                <div class="form-group mb-3">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Ganti Gambar Pendukung (Opsional)</label>
                    <input type="file" name="gambar" accept="image/*" class="form-control" style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 12px; box-sizing: border-box;">
                </div>

                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Pilihan A <span style="color: red;">*</span></label>
                        <input type="text" name="opsi_a" id="edit-soal-opsi-a" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Pilihan B <span style="color: red;">*</span></label>
                        <input type="text" name="opsi_b" id="edit-soal-opsi-b" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Pilihan C <span style="color: red;">*</span></label>
                        <input type="text" name="opsi_c" id="edit-soal-opsi-c" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                    <div class="form-group">
                        <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Pilihan D <span style="color: red;">*</span></label>
                        <input type="text" name="opsi_d" id="edit-soal-opsi-d" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Jawaban Benar <span style="color: red;">*</span></label>
                    <select name="jawaban_benar" id="edit-soal-jawaban" class="form-control" required style="width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; box-sizing: border-box; height: 40px;">
                        <option value="A">A</option>
                        <option value="B">B</option>
                        <option value="C">C</option>
                        <option value="D">D</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" onclick="closeModal('modal-edit-soal')" style="height: 38px; padding: 0 16px; border-radius: 6px; border: 1px solid #cbd5e1; cursor: pointer; background: white;">Batal</button>
                <button type="submit" class="btn btn-primary" style="height: 38px; padding: 0 20px; border-radius: 6px; border: none; background: #2563eb; color: white; cursor: pointer; font-weight: 600;">Simpan Perubahan</button>
            </div>
        </form>
    </div>
</div>

<!-- ============================================ -->
<!-- MODAL: IMPORT EXCEL -->
<!-- ============================================ -->
<div id="modal-import-excel" class="modal-overlay">
    <div class="modal-container large">
        <div class="modal-header">
            <h3><i class="fa-solid fa-file-excel text-success"></i> Import Soal dari Excel</h3>
            <button class="modal-close" onclick="closeModal('modal-import-excel')">&times;</button>
        </div>
        <div class="modal-body">
            <div class="alert alert-info" style="background-color: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; padding: 12px 16px; border-radius: 8px; font-size: 0.85rem; line-height: 1.4; margin-bottom: 16px;">
                <h4 style="margin: 0 0 6px 0; font-weight: 700;"><i class="fa-solid fa-circle-info"></i> Panduan Format Kolom Excel:</h4>
                <p style="margin: 0 0 6px 0;">Pastikan file spreadsheet Excel Anda memiliki judul kolom berikut pada baris pertama:</p>
                <code style="display: block; background: #dbeafe; padding: 6px; border-radius: 4px; font-family: monospace; font-size: 0.8rem; font-weight: 700; color: #1e3a8a;">
                    Pertanyaan | Opsi A | Opsi B | Opsi C | Opsi D | Jawaban Benar | Bobot
                </code>
                <p style="margin: 6px 0 0 0;">
                    * Kolom <strong>Jawaban Benar</strong> harus berisi huruf kapital: <strong>A, B, C, atau D</strong>. Kolom <strong>Bobot</strong> default bernilai 1.0 jika dikosongkan.
                    <br>
                    <a href="{{ route('guru.soal.template') }}" class="btn" style="display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: #22c55e; color: white; text-decoration: none; border-radius: 6px; margin-top: 8px; font-size: 0.8rem; font-weight: 700;">
                        <i class="fa-solid fa-download"></i> Unduh Template Excel
                    </a>
                </p>
            </div>

            <div class="form-group mb-3">
                <label class="form-label" style="font-weight: 600; display: block; margin-bottom: 6px;">Pilih File Excel (.xlsx, .xls, .csv)</label>
                <div style="display: flex; gap: 8px;">
                    <input type="file" id="excel-file-input" accept=".xlsx, .xls, .csv" class="form-control" style="flex: 1; border: 1px solid #cbd5e1; border-radius: 6px; padding: 6px 12px; box-sizing: border-box; height: 38px;">
                    <button type="button" id="btn-preview-excel" onclick="previewExcelImport()" class="btn" style="height: 38px; padding: 0 16px; border-radius: 6px; border: 1px solid #cbd5e1; background: #f8fafc; color: #475569; font-weight: 600; cursor: pointer;">
                        <i class="fa-solid fa-eye"></i> Tampilkan Preview
                    </button>
                </div>
            </div>

            <!-- Preview Container -->
            <div id="import-preview-section" style="display: none;">
                <h4 style="margin: 20px 0 8px 0; color: #1e293b;"><i class="fa-solid fa-list-check"></i> Hasil Preview File Excel</h4>
                <p style="font-size: 0.8rem; color: #64748b; margin: 0 0 10px 0;">Mohon periksa data soal di bawah ini secara teliti. Jika sudah sesuai, klik tombol "Simpan ke Database".</p>
                
                <div class="preview-table-container">
                    <table class="preview-table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Pertanyaan</th>
                                <th>A</th>
                                <th>B</th>
                                <th>C</th>
                                <th>D</th>
                                <th>Kunci</th>
                                <th>Bobot</th>
                            </tr>
                        </thead>
                        <tbody id="preview-table-body">
                            <!-- Diisi oleh JS -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn" onclick="closeModal('modal-import-excel')" style="height: 38px; padding: 0 16px; border-radius: 6px; border: 1px solid #cbd5e1; cursor: pointer; background: white;">Batal</button>
            <button type="button" id="btn-save-excel" onclick="saveExcelImport()" class="btn btn-primary" disabled style="height: 38px; padding: 0 20px; border-radius: 6px; border: none; background: #94a3b8; color: white; cursor: not-allowed; font-weight: 600;">
                <i class="fa-solid fa-floppy-disk"></i> Simpan ke Database
            </button>
        </div>
    </div>
</div>
@endif

@endsection

@push('scripts')
<!-- Load SweetAlert2 CDN for modern alerts -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    // Global variable to hold previewed excel data
    let tempImportedSoals = [];

    // Switch active tabs
    function switchTab(evt, tabId) {
        // Get all elements with class="tab-content" and hide them
        const tabContents = document.getElementsByClassName("tab-content");
        for (let i = 0; i < tabContents.length; i++) {
            tabContents[i].classList.remove("active");
        }

        // Get all elements with class="tab-btn" and remove the class "active"
        const tabBtns = document.getElementsByClassName("tab-btn");
        for (let i = 0; i < tabBtns.length; i++) {
            tabBtns[i].classList.remove("active");
        }

        // Show the current tab, and add an "active" class to the button that opened the tab
        document.getElementById(tabId).classList.add("active");
        evt.currentTarget.classList.add("active");

        // Save tab to local state to persist across edits if possible
        sessionStorage.setItem('active_exam_tab', tabId);
    }

    // Modal helpers
    function openModal(modalId) {
        document.getElementById(modalId).classList.add("active");
    }

    function closeModal(modalId) {
        document.getElementById(modalId).classList.remove("active");
        if (modalId === 'modal-import-excel') {
            // Reset input and preview
            document.getElementById('excel-file-input').value = '';
            document.getElementById('import-preview-section').style.display = 'none';
            document.getElementById('preview-table-body').innerHTML = '';
            tempImportedSoals = [];
            const saveBtn = document.getElementById('btn-save-excel');
            saveBtn.disabled = true;
            saveBtn.style.background = '#94a3b8';
            saveBtn.style.cursor = 'not-allowed';
        }
    }

    // Setup edit modal for Ujian
    function formatDateTimeLocalValue(dt) {
        if (!dt) return '';
        return dt.substring(0, 16);
    }

    function formatAutoEndLabel(dt) {
        if (!dt) return 'Isi jam mulai dan durasi';

        return new Intl.DateTimeFormat('id-ID', {
            day: '2-digit',
            month: 'short',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
        }).format(dt) + ' WIB';
    }

    function calculateAutoEnd(startInputId, durationInputId, previewInputId) {
        const startEl = document.getElementById(startInputId);
        const durationEl = document.getElementById(durationInputId);
        const previewEl = document.getElementById(previewInputId);

        if (!startEl || !durationEl || !previewEl) {
            return;
        }

        const startValue = startEl.value;
        const duration = parseInt(durationEl.value, 10);
        if (!startValue || !duration || duration < 1) {
            previewEl.value = 'Isi jam mulai dan durasi';
            return;
        }

        const endDate = new Date(startValue);
        endDate.setMinutes(endDate.getMinutes() + duration);
        previewEl.value = formatAutoEndLabel(endDate);
    }

    ['change', 'input'].forEach((eventName) => {
        document.getElementById('create-ujian-mulai')?.addEventListener(eventName, () => calculateAutoEnd('create-ujian-mulai', 'create-ujian-durasi', 'create-ujian-selesai-preview'));
        document.getElementById('create-ujian-durasi')?.addEventListener(eventName, () => calculateAutoEnd('create-ujian-mulai', 'create-ujian-durasi', 'create-ujian-selesai-preview'));
        document.getElementById('edit-ujian-mulai')?.addEventListener(eventName, () => calculateAutoEnd('edit-ujian-mulai', 'edit-ujian-durasi', 'edit-ujian-selesai-preview'));
        document.getElementById('edit-ujian-durasi')?.addEventListener(eventName, () => calculateAutoEnd('edit-ujian-mulai', 'edit-ujian-durasi', 'edit-ujian-selesai-preview'));
    });

    function openEditUjianModal(ujian) {
        document.getElementById('edit-ujian-form').action = "{{ url('/guru/soal') }}/" + ujian.id;
        document.getElementById('edit-ujian-judul').value = ujian.judul;
        document.getElementById('edit-ujian-mapel').value = ujian.mata_pelajaran_id;
        document.getElementById('edit-ujian-kelas').value = ujian.kelas_id;
        document.getElementById('edit-ujian-durasi').value = ujian.durasi;
        document.getElementById('edit-ujian-status').value = ujian.status;

        document.getElementById('edit-ujian-mulai').value = formatDateTimeLocalValue(ujian.tanggal_mulai);
        calculateAutoEnd('edit-ujian-mulai', 'edit-ujian-durasi', 'edit-ujian-selesai-preview');

        document.getElementById('edit-ujian-acak-soal').checked = ujian.acak_soal;
        document.getElementById('edit-ujian-acak-jawaban').checked = ujian.acak_jawaban;

        openModal('modal-edit-ujian');
    }

    @if($activeUjian)
    // Setup edit modal for Soal
    function openEditSoalModal(soal) {
        document.getElementById('edit-soal-form').action = "{{ url('/guru/soal') }}/{{ $activeUjian->id }}/edit-soal/" + soal.id;
        document.getElementById('edit-soal-tipe').value = soal.tipe_soal;
        document.getElementById('edit-soal-bobot').value = soal.bobot;
        document.getElementById('edit-soal-pertanyaan').value = soal.pertanyaan;
        document.getElementById('edit-soal-opsi-a').value = soal.opsi_a;
        document.getElementById('edit-soal-opsi-b').value = soal.opsi_b;
        document.getElementById('edit-soal-opsi-c').value = soal.opsi_c;
        document.getElementById('edit-soal-opsi-d').value = soal.opsi_d;
        document.getElementById('edit-soal-jawaban').value = soal.jawaban_benar;

        const imgContainer = document.getElementById('edit-soal-image-container');
        const imgPreview = document.getElementById('edit-soal-image-preview');
        if (soal.gambar) {
            imgPreview.src = "{{ asset('storage') }}/" + soal.gambar;
            imgContainer.style.display = 'block';
        } else {
            imgContainer.style.display = 'none';
        }

        openModal('modal-edit-soal');
    }

    // Ajax Import Excel: Preview
    function previewExcelImport() {
        const fileInput = document.getElementById('excel-file-input');
        if (!fileInput.files || fileInput.files.length === 0) {
            Swal.fire('Perhatian', 'Pilih file excel terlebih dahulu.', 'warning');
            return;
        }

        const formData = new FormData();
        formData.append('file_excel', fileInput.files[0]);
        formData.append('_token', "{{ csrf_token() }}");

        Swal.fire({
            title: 'Membaca file...',
            html: 'Sistem sedang memproses spreadsheet Anda.',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        fetch("{{ route('guru.soal.import-preview', $activeUjian->id) }}", {
            method: 'POST',
            body: formData,
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(async response => {
            const isJson = response.headers.get('content-type')?.includes('application/json');
            const data = isJson ? await response.json() : null;
            
            if (!response.ok) {
                const error = (data && data.message) || response.statusText;
                return Promise.reject({ message: error, errors: data?.errors });
            }
            return data;
        })
        .then(data => {
            Swal.close();
            if (data.success) {
                tempImportedSoals = data.data;
                renderPreviewTable(tempImportedSoals);
                
                // Enable save button
                const saveBtn = document.getElementById('btn-save-excel');
                if (tempImportedSoals.length > 0) {
                    saveBtn.removeAttribute('disabled');
                    saveBtn.style.background = '#2563eb';
                    saveBtn.style.cursor = 'pointer';
                } else {
                    Swal.fire('Info', 'Tidak ada baris soal valid yang dapat diimpor dari file.', 'info');
                }
            } else {
                Swal.fire('Gagal', data.message || 'Gagal menguraikan file excel.', 'error');
            }
        })
        .catch(err => {
            Swal.close();
            if (err.errors && err.errors.length > 0) {
                let errorHtml = '<div style="text-align: left; max-height: 200px; overflow-y: auto; font-size: 0.85rem; background: #fef2f2; border: 1px solid #fca5a5; padding: 10px; border-radius: 6px; color: #b91c1c;">';
                errorHtml += '<ul style="margin: 0; padding-left: 20px;">';
                err.errors.forEach(e => {
                    errorHtml += `<li>${e}</li>`;
                });
                errorHtml += '</ul></div>';
                
                Swal.fire({
                    title: 'Kesalahan Baris Excel',
                    html: errorHtml,
                    icon: 'error',
                    confirmButtonColor: '#ef4444'
                });
            } else {
                Swal.fire('Gagal', err.message || 'Terjadi kesalahan jaringan atau server saat membaca file.', 'error');
            }
            console.error(err);
        });
    }

    // Render parsed excel rows to previews table
    function renderPreviewTable(soals) {
        const tbody = document.getElementById('preview-table-body');
        tbody.innerHTML = '';

        soals.forEach((soal, idx) => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td><strong>${idx + 1}</strong></td>
                <td style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${soal.pertanyaan}</td>
                <td>${soal.opsi_a}</td>
                <td>${soal.opsi_b}</td>
                <td>${soal.opsi_c}</td>
                <td>${soal.opsi_d}</td>
                <td style="text-align: center;"><span style="background: #eff6ff; color: #2563eb; padding: 2px 6px; border-radius: 4px; font-weight: bold;">${soal.jawaban_benar}</span></td>
                <td style="text-align: center;">${soal.bobot}</td>
            `;
            tbody.appendChild(tr);
        });

        document.getElementById('import-preview-section').style.display = 'block';
    }

    // AJAX Save Imported Soals
    function saveExcelImport() {
        if (tempImportedSoals.length === 0) {
            Swal.fire('Perhatian', 'Tidak ada soal untuk disimpan.', 'warning');
            return;
        }

        Swal.fire({
            title: 'Menyimpan soal...',
            html: 'Mohon tunggu selagi soal dimasukkan ke database.',
            allowOutsideClick: false,
            didOpen: () => {
                Swal.showLoading();
            }
        });

        fetch("{{ route('guru.soal.import-save', $activeUjian->id) }}", {
            method: 'POST',
            body: JSON.stringify({
                soal_list: tempImportedSoals,
                _token: "{{ csrf_token() }}"
            }),
            headers: {
                'Content-Type': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            Swal.close();
            if (data.success) {
                closeModal('modal-import-excel');
                Swal.fire({
                    title: 'Sukses!',
                    text: data.message,
                    icon: 'success',
                    confirmButtonColor: '#2563eb'
                }).then(() => {
                    // Refresh view
                    location.href = "{{ route('guru.soal', ['ujian_id' => $activeUjian->id]) }}";
                });
            } else {
                Swal.fire('Gagal', data.message || 'Gagal menyimpan soal.', 'error');
            }
        })
        .catch(err => {
            Swal.close();
            Swal.fire('Gagal', 'Terjadi kesalahan sistem saat menyimpan data.', 'error');
            console.error(err);
        });
    }
    @endif

    // Run on startup
    document.addEventListener('DOMContentLoaded', function() {
        // Keep active tab state on reload
        const activeTab = sessionStorage.getItem('active_exam_tab');
        if (activeTab && document.getElementById(activeTab)) {
            // Find tab button that matches
            const buttons = document.getElementsByClassName('tab-btn');
            for(let i = 0; i < buttons.length; i++) {
                if (buttons[i].outerHTML.includes(activeTab)) {
                    buttons[i].click();
                    break;
                }
            }
        }
    });
</script>
@endpush