@extends('layouts.admin_lbb')

@section('page-title', 'Kelola Soal Paket')

@section('content')

<!-- Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('admin.exams.index') }}">Ujian</a></li>
        <li class="breadcrumb-item"><a href="{{ route('admin.exam.detail', $exam->exam_code) }}">{{ $exam->name }}</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ $package->name }}</li>
    </ol>
</nav>

<!-- Package Info -->
<div class="card mb-4">
    <div class="card-body">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h4 class="fw-bold mb-2">{{ $package->name }}</h4>
                <p class="text-muted mb-2">{{ $package->description ?? 'Tanpa deskripsi' }}</p>
                <div class="d-flex flex-wrap gap-3">
                    <div><i class="bi bi-question-lg me-2 text-primary"></i>{{ $totalQuestions }} Soal</div>
                    <div><i class="bi bi-clock me-2 text-primary"></i>{{ $exam->duration }} menit</div>
                </div>
            </div>
            <div class="col-md-4 text-md-end">
                <div class="d-flex gap-2 justify-content-md-end">
                    <button class="btn btn-outline-primary" onclick="location.href='{{ route('admin.exam.detail', $exam->exam_code) }}'">
                        <i class="bi bi-arrow-left me-1"></i>
                        Kembali
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Question Stats -->
<div class="row g-3 mb-4">
    <div class="col-lg-3 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon primary">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $totalQuestions }}</div>
                <div class="stat-label">Total Soal</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon secondary">
                    <i class="bi bi-check2-square"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $multipleChoiceCount }}</div>
                <div class="stat-label">Pilihan Ganda</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon warning">
                    <i class="bi bi-toggle-on"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $trueFalseCount }}</div>
                <div class="stat-label">Benar / Salah</div>
            </div>
        </div>
    </div>

    <div class="col-lg-3 col-md-6 col-12">
        <div class="stat-card accent">
            <div class="stat-image">
                <div class="stat-icon success">
                    <i class="bi bi-music-note-beamed"></i>
                </div>
            </div>
            <div class="stat-info">
                <div class="stat-value">{{ $listeningCount ?? 0 }}</div>
                <div class="stat-label">Listening</div>
            </div>
        </div>
    </div>
</div>

<!-- Questions Management -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div class="d-flex align-items-center gap-3">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" id="selectAllQuestions" onchange="toggleSelectAll()">
                <label class="form-check-label" for="selectAllQuestions">
                    Pilih Semua
                </label>
            </div>
            <div class="fw-bold">
                <i class="bi bi-question-square me-2"></i>
                Daftar Soal
            </div>
        </div>
        <div class="row">
            <div class="col-auto">
                <button class="btn btn-danger d-none" id="deleteSelectedBtn" onclick="deleteSelectedQuestions()">
                    <i class="bi bi-trash me-1"></i>
                    Hapus Terpilih (<span id="selectedCount">0</span>)
                </button>
            </div>
            <div class="col-auto">
                <button class="btn btn-outline-warning" data-bs-toggle="modal" data-bs-target="#importModal">
                    <i class="bi bi-upload me-1"></i>
                    Upload
                </button>
            </div>
            <div class="col-auto d-flex gap-2">
                <a href="{{ route('admin.exam.package.questions.template', [$exam->exam_code, $package->id]) }}" class="btn btn-outline-success flex-grow-1" title="Download Excel Template">
                    <i class="bi bi-file-earmark-excel me-1"></i>
                    Excel
                </a>
                <a href="{{ route('admin.exam.package.questions.template-word', [$exam->exam_code, $package->id]) }}" class="btn btn-outline-primary flex-grow-1" title="Download Word Template">
                    <i class="bi bi-file-earmark-word me-1"></i>
                    Word
                </a>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createQuestionModal">
                    <i class="bi bi-plus-circle me-1"></i>
                    Soal
                </button>
            </div>
        </div>
    </div>
    <div class="card-body">
        <!-- Search & Filter -->
        <form action="{{ route('admin.exam.package.detail', [$exam->exam_code, $package->id]) }}" method="GET" class="row g-3 mb-4">
            @if(request('search') || request('type') || request('per_page'))
            <div class="col-md-4">
            @else
            <div class="col-md-6">
            @endif
                <div class="input-group">
                    <span class="input-group-text">
                        <i class="bi bi-search"></i>
                    </span>
                    <input type="text" class="form-control" placeholder="Cari soal..." name="search" value="{{ request('search') }}">
                </div>
            </div>
            <div class="col-md-2">
                <select class="form-select" name="type">
                    <option value="">Semua Tipe</option>
                    <option value="multiple_choice" {{ request('type') === 'multiple_choice' ? 'selected' : '' }}>Pilihan Ganda</option>
                    <option value="true_false" {{ request('type') === 'true_false' ? 'selected' : '' }}>Benar / Salah</option>
                    <option value="listening" {{ request('type') === 'listening' ? 'selected' : '' }}>Listening</option>
                </select>
            </div>
            <div class="col-md-2">
                <select class="form-select" name="per_page">
                    <option value="10" {{ request('per_page') == 10 || !request('per_page') ? 'selected' : '' }}>10 per halaman</option>
                    <option value="25" {{ request('per_page') == 25 ? 'selected' : '' }}>25 per halaman</option>
                    <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50 per halaman</option>
                </select>
            </div>
            @if(request('search') || request('type') || request('per_page'))
            <div class="col-md-4">
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-outline-primary flex-grow-1">
                        <i class="bi bi-funnel"></i>
                        Filter
                    </button>
                    <a href="{{ route('admin.exam.package.detail', [$exam->exam_code, $package->id]) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-x-circle"></i>
                        Reset
                    </a>
                </div>
            </div>
            @else
            <div class="col-md-2">
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-outline-primary flex-grow-1">
                        <i class="bi bi-funnel"></i>
                        Filter
                    </button>
                </div>
            </div>
            @endif
        </form>
        
        <!-- Questions List (Card View with Image & Audio Support) -->
        <div class="row g-4 mb-4">
            @forelse($questions as $index => $question)
            @if($question->question_type === 'multiple_choice')
            <!-- Multiple Choice Question -->
            <div class="col-lg-12">
                <div class="card h-100 border-start border-4" style="border-left-color: var(--primary) !important;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-2 text-center d-flex">
                                <input type="checkbox" class="form-check-input question-checkbox" value="{{ $question->id }}" style="position: relative; z-index: 1; margin-bottom: -10px;">
                                <div class="d-flex flex-column align-items-center" style="margin-left:2rem;">
                                    <!-- Question Number -->
                                    <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; font-weight: bold; font-size: 0.9rem;">
                                        {{ $question->question_number ?? ($index + 1) }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-10">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div>
                                        <span class="badge badge-info me-2">Pilihan Ganda</span>
                                        <span class="badge badge-secondary">{{ $question->topic ?? 'Umum' }}</span>
                                        @if($question->image_path)
                                            <span class="badge badge-warning"><i class="bi bi-image me-1"></i>Content Bergambar</span>
                                        @endif
                                    </div>
                                    <div class="dropdown">
                                        <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="dropdown">
                                            <i class="bi bi-three-dots"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#" onclick="editQuestion({{ $question->id }}); return false;"><i class="bi bi-pencil me-2"></i>Edit</a></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item text-danger" href="#" onclick="deleteQuestion({{ $question->id }}); return false;"><i class="bi bi-trash me-2"></i>Hapus</a></li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <!-- Question Content -->
                                <div class="mb-3">
                                    <h6 class="mb-2">@purify($question->question_text)</h6>
                                    
                                    <!-- Question Image (if any) -->
                                    @if($question->image_path)
                                    <div class="mb-3">
                                        <img src="{{ $question->image_url ?? 'https://via.placeholder.com/400x200?text=No+Image' }}" alt="Gambar Soal" class="img-fluid rounded" style="max-width: 400px; max-height: 200px; object-fit: contain;">
                                    </div>
                                    @endif
                                    
                                    <!-- Answer Options -->
                                    <div class="row g-2 ms-0">
                                        @foreach($question->options as $optionIndex => $option)
                                        <div class="col-lg-6">
                                            <div class="card mb-2 {{ $option->is_correct ? 'border-success border-2' : '' }}">
                                                <div class="card-body p-2">
                                                    <div class="d-flex align-items-center">
                                                        <span class="fw-bold me-2">{{ ['A','B','C','D','E'][$optionIndex] ?? '' }}.</span>
                                                        <div class="flex-grow-1">
                                                            {{ $option->content }}
                                                        </div>
                                                        @if($option->option_key->value == $question->answer_key)
                                                            <span class="badge badge-success ms-2">Kunci</span>
                                                        @endif
                                                    </div>
                                                    <!-- Answer Image -->
                                                    @if($option->image_path)
                                                    <!-- {{ asset('storage/' . $question->image_path) }} -->
                                                    <img src="{{ $option->image_url ?? 'https://via.placeholder.com/200x100?text=No+Image' }}" alt="Gambar {{ ['A','B','C','D','E'][$optionIndex] }}" class="img-fluid rounded mt-2" style="max-width: 200px; max-height: 100px; object-fit: contain;">
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                
                                <div class="alert alert-success alert-sm d-flex align-items-center">
                                    <i class="bi bi-check-circle-fill me-2"></i>
                                    <strong>Kunci Jawaban:</strong> {{ $question->answer_key }}
                                </div>
                                
                                @if($question->explanation)
                                <div class="mt-2">
                                    <button class="btn btn-outline-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#pembahasan{{ $question->id }}">
                                        <i class="bi bi-eye me-1"></i>
                                        Lihat Pembahasan
                                    </button>
                                    <div class="collapse mt-3" id="pembahasan{{ $question->id }}">
                                        <div class="card bg-light">
                                            <div class="card-body">
                                                <h6 class="fw-bold mb-2">Pembahasan:</h6>
                                                <p>@purify($question->explanation)</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @elseif($question->question_type === 'true_false')
            <!-- True/False Question -->
            <div class="col-lg-12">
                <div class="card h-100 border-start border-4 warning" style="border-left-color: var(--warning) !important;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-2 text-center d-flex">
                                <input type="checkbox" class="form-check-input question-checkbox" value="{{ $question->id }}" style="position: relative; z-index: 1; margin-bottom: -10px;">
                                <div class="d-flex flex-column align-items-center" style="margin-left:2rem;">
                                    <!-- Question Number -->
                                    <div class="bg-warning text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; font-weight: bold; font-size: 0.9rem;">
                                        {{ $question->question_number ?? ($index + 1) }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-10">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div>
                                        <span class="badge badge-warning me-2">Benar / Salah</span>
                                        <span class="badge badge-secondary">{{ $question->topic ?? 'Umum' }}</span>
                                    </div>
                                    <div class="dropdown">
                                        <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="dropdown">
                                            <i class="bi bi-three-dots"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#" onclick="editQuestion({{ $question->id }}); return false;"><i class="bi bi-pencil me-2"></i>Edit</a></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item text-danger" href="#" onclick="deleteQuestion({{ $question->id }}); return false;"><i class="bi bi-trash me-2"></i>Hapus</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <h6>@purify($question->question_text)</h6>
                                    <!-- Question Image (if any) -->
                                    @if($question->image_path)
                                    <div class="mb-3">
                                        <img src="{{ $question->image_url ?? 'https://via.placeholder.com/400x200?text=No+Image' }}" alt="Gambar Soal" class="img-fluid rounded" style="max-width: 400px; max-height: 200px; object-fit: contain;">
                                    </div>
                                    @endif
                                    
                                    <div class="row g-2 ms-3">
                                        <div class="col-md-6">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="q{{ $question->id }}true" id="q{{ $question->id }}true" {{ $question->answer_key == 'TRUE' ? 'checked' : '' }} style="pointer-events: none;">
                                                <label class="form-check-label fw-bold text-success" for="q{{ $question->id }}true">
                                                    <i class="bi bi-check-circle me-2"></i>Benar
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="q{{ $question->id }}true" id="q{{ $question->id }}false" {{ $question->answer_key == 'FALSE' ? 'checked' : '' }} style="pointer-events: none;">
                                                <label class="form-check-label text-danger" for="q{{ $question->id }}false">
                                                    <i class="bi bi-x-circle me-2"></i>Salah
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="alert alert-success alert-sm">
                                    <strong>Kunci Jawaban:</strong> {{ $question->answer_key == 'TRUE' ? 'Benar' : 'Salah' }}
                                </div>
                                
                                @if($question->explanation)
                                <div class="mt-2">
                                    <button class="btn btn-outline-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#pembahasan{{ $question->id }}">
                                        <i class="bi bi-eye me-1"></i>
                                        Lihat Pembahasan
                                    </button>
                                    <div class="collapse mt-3" id="pembahasan{{ $question->id }}">
                                        <div class="card bg-light">
                                            <div class="card-body">
                                                <h6 class="fw-bold mb-2">Pembahasan:</h6>
                                                <p>@purify($question->explanation)</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @elseif($question->question_type === 'listening')
            <!-- Listening Question -->
            <div class="col-lg-12">
                <div class="card h-100 border-start border-4" style="border-left-color: #6366f1 !important;">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-2 text-center d-flex">
                                <input type="checkbox" class="form-check-input question-checkbox" value="{{ $question->id }}" style="position: relative; z-index: 1; margin-bottom: -10px;">
                                <div class="d-flex flex-column align-items-center" style="margin-left:2rem;">
                                    <!-- Question Number -->
                                    <div class="text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 35px; height: 35px; font-weight: bold; font-size: 0.9rem; background: linear-gradient(135deg, #6366f1 0%, #4f5d75 100%);">
                                        {{ $question->question_number ?? ($index + 1) }}
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-10">
                                <div class="d-flex justify-content-between align-items-start mb-3">
                                    <div>
                                        <span class="badge bg-secondary me-2">Listening</span>
                                        <span class="badge badge-secondary">{{ $question->topic ?? 'Umum' }}</span>
                                        <span class="badge badge-warning"><i class="bi bi-music-note-beamed me-1"></i>Audio</span>
                                        @if($question->max_play_count)
                                            <span class="badge badge-warning"><i class="bi bi-repeat me-1"></i>Max: {{ $question->max_play_count }}x</span>
                                        @endif
                                    </div>
                                    <div class="dropdown">
                                        <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="dropdown">
                                            <i class="bi bi-three-dots"></i>
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a class="dropdown-item" href="#" onclick="editQuestion({{ $question->id }}); return false;"><i class="bi bi-pencil me-2"></i>Edit</a></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item text-danger" href="#" onclick="deleteQuestion({{ $question->id }}); return false;"><i class="bi bi-trash me-2"></i>Hapus</a></li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <!-- Audio Player -->
                                @if($question->audio_path || $question->audio_url)
                                <div class="mb-3">
                                    <h6 class="mb-2">
                                        <i class="bi bi-music-note-beamed me-2"></i>Dengarkan audio berikut:
                                    </h6>
                                    <div class="card bg-light p-3">
                                        @if($question->audio_path)
                                            <audio controls class="w-100" preload="metadata" id="audio-{{ $question->id }}">
                                                <source src="{{ $question->audio_url }}" type="audio/mpeg">
                                                <source src="{{ $question->audio_url }}" type="audio/wav">
                                                <source src="{{ $question->audio_url }}" type="audio/mp3">
                                                <source src="{{ $question->audio_url }}" type="audio/ogg">
                                                <div class="alert alert-warning mb-0">
                                                    <i class="bi bi-exclamation-triangle me-2"></i>
                                                    Gagal memuat audio. <a href="{{ $question->audio_url }}" target="_blank" class="alert-link">Buka di tab baru</a>
                                                </div>
                                            </audio>
                                            <script>
                                                // Refresh audio URL before expiry
                                                setTimeout(() => {
                                                    fetch('/admin/api/image-url/{{ urlencode($question->audio_path) }}')
                                                        .then(res => res.json())
                                                        .then(result => {
                                                            if (result.success && result.url) {
                                                                const audio = document.getElementById('audio-{{ $question->id }}');
                                                                const sources = audio.querySelectorAll('source');
                                                                sources.forEach(source => {
                                                                    source.src = result.url;
                                                                });
                                                                audio.load();
                                                            }
                                                        });
                                                }, 14 * 60 * 1000); // Refresh every 14 minutes (before 15 min expiry)
                                            </script>
                                        @elseif($question->audio_url)
                                            <audio controls class="w-100" preload="metadata">
                                                <source src="{{ $question->audio_url }}" type="audio/mpeg">
                                                <source src="{{ $question->audio_url }}" type="audio/wav">
                                                <source src="{{ $question->audio_url }}" type="audio/mp3">
                                                <source src="{{ $question->audio_url }}" type="audio/ogg">
                                                <div class="alert alert-warning mb-0">
                                                    <i class="bi bi-exclamation-triangle me-2"></i>
                                                    Browser Anda tidak mendukung pemutar audio. 
                                                    <a href="{{ $question->audio_url }}" target="_blank" class="alert-link">Buka audio di tab baru</a>
                                                </div>
                                            </audio>
                                        @endif
                                        <div class="mt-2 text-muted small">
                                            <i class="bi bi-info-circle me-1"></i>
                                            {{ $question->audio_file_name ?? 'Audio listening' }}
                                        </div>
                                    </div>
                                </div>
                                @endif
                                
                                <div class="mb-3">
                                    <h6>@purify($question->question_text)</h6>
                                    @if($question->image_path)
                                    <div class="mb-3">
                                        <img src="{{ $question->image_url ?? 'https://via.placeholder.com/400x200?text=No+Image' }}" alt="Gambar Soal" class="img-fluid rounded" style="max-width: 400px; max-height: 200px; object-fit: contain;">
                                    </div>
                                    @endif
                                    <!-- Answer Options -->
                                    <div class="row g-2 ms-0">
                                        @foreach($question->options as $optionIndex => $option)
                                        <div class="col-lg-6">
                                            <div class="card mb-2 {{ $option->is_correct ? 'border-success border-2' : '' }}">
                                                <div class="card-body p-2">
                                                    <div class="d-flex align-items-center">
                                                        <span class="fw-bold me-2">{{ ['A','B','C','D','E'][$optionIndex] ?? '' }}.</span>
                                                        <div class="flex-grow-1">
                                                            {{ $option->content }}
                                                        </div>
                                                        @if($option->option_key->value == $question->answer_key)
                                                            <span class="badge badge-success ms-2">Kunci</span>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                
                                <div class="alert alert-success alert-sm d-flex align-items-center">
                                    <i class="bi bi-check-circle-fill me-2"></i>
                                    <strong>Kunci Jawaban:</strong> {{ $question->answer_key }}
                                </div>
                                
                                @if($question->explanation)
                                <div class="mt-2">
                                    <button class="btn btn-outline-primary btn-sm" data-bs-toggle="collapse" data-bs-target="#pembahasan{{ $question->id }}">
                                        <i class="bi bi-eye me-1"></i>
                                        Lihat Pembahasan
                                    </button>
                                    <div class="collapse mt-3" id="pembahasan{{ $question->id }}">
                                        <div class="card bg-light">
                                            <div class="card-body">
                                                <h6 class="fw-bold mb-2">Pembahasan:</h6>
                                                <p>@purify($question->explanation)</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif
            @empty
            <div class="col-12">
                <div class="text-center py-5">
                    <i class="bi bi-inbox display-4 text-muted"></i>
                    <p class="text-muted mt-3">Belum ada soal di paket ini</p>
                </div>
            </div>
            @endforelse
        </div>
        
        <!-- Pagination -->
        @if($questions->hasPages())
        <nav class="mt-4">
            <ul class="pagination justify-content-center">
                <li class="page-item {{ $questions->onFirstPage() ? 'disabled' : '' }}">
                    <a class="page-link" href="{{ $questions->previousPageUrl() ?? '#' }}" tabindex="-1"><i class="bi bi-chevron-left"></i></a>
                </li>
                
                @for ($page = 1; $page <= $questions->lastPage(); $page++)
                <li class="page-item {{ $page == $questions->currentPage() ? 'active' : '' }}">
                    <a class="page-link" href="{{ $questions->url($page) }}">{{ $page }}</a>
                </li>
                @endfor
                
                <li class="page-item {{ !$questions->hasMorePages() ? 'disabled' : '' }}">
                    <a class="page-link" href="{{ $questions->nextPageUrl() ?? '#' }}"><i class="bi bi-chevron-right"></i></a>
                </li>
            </ul>
        </nav>
        @endif
    </div>
</div>

<!-- Modal Tambah Soal -->
@include('admin.modal.question.create')

<!-- Modal Edit Soal -->
@include('admin.modal.question.update')

<!-- Modal Import Excel -->
@include('admin.modal.question.import')

<style>
/* Styling untuk gambar di editor contenteditable */
#questionEditor img,
#explanationEditor img,
#editQuestionEditor img,
#editExplanationEditor img {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    display: block;
    margin: 10px 0;
    border-radius: 4px;
    object-fit: contain;
}

/* Styling untuk preview gambar */
#questionImagePreview img,
#editQuestionImagePreview img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border:1px solid #dee2e6;
    border-radius: 4px;
    padding: 4px;
}

/* Styling umum editor */
[contenteditable="true"] {
    overflow-y: auto;
    max-height: 500px;
}
</style>

<script>
// Multi-select delete functionality
function toggleSelectAll() {
    const selectAll = document.getElementById('selectAllQuestions');
    const checkboxes = document.querySelectorAll('.question-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = selectAll.checked;
    });
    
    updateSelectedCount();
}

function updateSelectedCount() {
    const checkboxes = document.querySelectorAll('.question-checkbox:checked');
    const count = checkboxes.length;
    const deleteBtn = document.getElementById('deleteSelectedBtn');
    const selectedCount = document.getElementById('selectedCount');
    
    selectedCount.textContent = count;
    
    if (count > 0) {
        deleteBtn.classList.remove('d-none');
    } else {
        deleteBtn.classList.add('d-none');
    }
}

// Add event listeners to all question checkboxes
document.querySelectorAll('.question-checkbox').forEach(checkbox => {
    checkbox.addEventListener('change', updateSelectedCount);
});

function deleteSelectedQuestions() {
    const checkboxes = document.querySelectorAll('.question-checkbox:checked');
    const questionIds = Array.from(checkboxes).map(cb => cb.value);
    
    if (questionIds.length === 0) {
        if (typeof AppAlert != 'undefined') {
            AppAlert.warning('Pilih minimal 1 soal untuk dihapus');
        } else {
            alert('Pilih minimal 1 soal untuk dihapus');
        }
        return;
    }
    
    // Use SweetAlert2 or fallback to browser confirm
    if (typeof Swal != 'undefined' && typeof AppAlert != 'undefined') {
        AppAlert.delete(
            `Hapus ${questionIds.length} Soal?`,
            `Apakah Anda yakin ingin menghapus ${questionIds.length} soal terpilih? Tindakan ini tidak dapat dibatalkan.`,
            () => submitSelectedDeleteForm(questionIds)
        );
    } else {
        // Fallback to browser default confirm
        if (confirm(`Apakah Anda yakin ingin menghapus ${questionIds.length} soal terpilih?`)) {
            submitSelectedDeleteForm(questionIds);
        }
    }
}

// Helper function to submit selected delete form
function submitSelectedDeleteForm(questionIds) {
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '{{ route('admin.exam.package.questions.delete.selected', [$exam->exam_code, $package->id]) }}';
    
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
    if (csrfToken) {
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;
        form.appendChild(csrfInput);
    }
    
    const methodInput = document.createElement('input');
    methodInput.type = 'hidden';
    methodInput.name = '_method';
    methodInput.value = 'DELETE';
    form.appendChild(methodInput);
    
    // Convert string IDs to integers and filter out invalid values
    const validQuestionIds = questionIds
        .map(id => parseInt(id))
        .filter(id => !isNaN(id) && id > 0);
    
    const questionIdsInput = document.createElement('input');
    questionIdsInput.type = 'hidden';
    questionIdsInput.name = 'question_ids';
    questionIdsInput.value = JSON.stringify(validQuestionIds);
    form.appendChild(questionIdsInput);
    
    document.body.appendChild(form);
    
    form.submit();
}

// Delete single question using SweetAlert2
function deleteQuestion(questionId) {
    if (typeof Swal === 'undefined' || typeof AppAlert === 'undefined') {
        // Fallback to browser default confirm if SweetAlert2 not loaded
        if (confirm('Apakah Anda yakin ingin menghapus soal ini? Tindakan ini tidak dapat dibatalkan.')) {
            submitDeleteForm(questionId);
        }
        return;
    }

    // Use AppAlert.delete with SweetAlert2
    AppAlert.delete(
        'Hapus Soal',
        'Apakah Anda yakin ingin menghapus soal ini? Tindakan ini tidak dapat dibatalkan. Soal akan dihapus permanen dari paket.',
        () => submitDeleteForm(questionId)
    );
}

// Helper function to submit delete form
function submitDeleteForm(questionId) {
    // Create and submit delete form
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '{{ route('admin.exam.package.questions.destroy', [$exam->exam_code, $package->id, ':id']) }}'.replace(':id', questionId);
    
    // Add CSRF token
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
    if (csrfToken) {
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;
        form.appendChild(csrfInput);
    }
    
    // Add DELETE method
    const methodInput = document.createElement('input');
    methodInput.type = 'hidden';
    methodInput.name = '_method';
    methodInput.value = 'DELETE';
    form.appendChild(methodInput);
    
    // Submit form
    document.body.appendChild(form);
    form.submit();
}

// Function to toggle question type in create modal
function toggleQuestionType() {
    const type = document.getElementById('questionType').value;
    const multipleChoiceEl = document.getElementById('multipleChoiceOptions');
    const trueFalseEl = document.getElementById('trueFalseOptions');
    const listeningEl = document.getElementById('listeningOptions');

    // Hide all first
    [multipleChoiceEl, trueFalseEl, listeningEl].forEach(el => {
        if (el) {
            el.style.display = 'none';
            el.querySelectorAll('input, select, textarea').forEach(input => {
                input.disabled = true;
            });
        }
    });

    // Show appropriate section
    let activeEl;
    if (type === 'multiple_choice') activeEl = multipleChoiceEl;
    else if (type === 'true_false')  activeEl = trueFalseEl;
    else if (type === 'listening')   activeEl = listeningEl;

    if (activeEl) {
        activeEl.style.display = 'block';
        activeEl.querySelectorAll('input, select, textarea').forEach(input => {
            input.disabled = false;
        });
    }
}

// Function to toggle question type in edit modal
function toggleEditQuestionType() {
    const type = document.getElementById('editQuestionType').value;
    const multipleChoiceDiv = document.getElementById('editMultipleChoiceOptions');
    const trueFalseDiv = document.getElementById('editTrueFalseOptions');
    const listeningDiv = document.getElementById('editListeningOptions');
    
    if (multipleChoiceDiv) multipleChoiceDiv.style.display = 'none';
    if (trueFalseDiv) trueFalseDiv.style.display = 'none';
    if (listeningDiv) listeningDiv.style.display = 'none';
    
    if (type === 'multiple_choice' && multipleChoiceDiv) {
        multipleChoiceDiv.style.display = 'block';
    } else if (type === 'true_false' && trueFalseDiv) {
        trueFalseDiv.style.display = 'block';
    } else if (type === 'listening' && listeningDiv) {
        listeningDiv.style.display = 'block';
    }
}

// Function to format text in editor
function formatText(editorId, command) {
    document.execCommand(command, false, null);
    const editor = document.getElementById(editorId);
    if (editor) editor.focus();
}

// Function to insert image in editor
function insertImage(editorId, input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const editor = document.getElementById(editorId);
            if (!editor) return;
            
            editor.focus();
            document.execCommand('insertImage', false, e.target.result);
            
            setTimeout(() => {
                const images = editor.querySelectorAll('img');
                const lastImage = images[images.length - 1];
                if (lastImage) {
                    lastImage.style.maxWidth = '100%';
                    lastImage.style.height = 'auto';
                    lastImage.style.maxHeight = '400px';
                    lastImage.style.display = 'block';
                    lastImage.style.margin = '10px 0';
                    lastImage.style.borderRadius = '4px';
                    lastImage.style.objectFit = 'contain';
                }
            }, 100);
        };
        reader.readAsDataURL(input.files[0]);
    }
}

// Function to remove edit question image
function removeEditQuestionImage() {
    const editQuestionImageDisplay = document.getElementById('editQuestionImageDisplay');
    const editQuestionImagePreview = document.getElementById('editQuestionImagePreview');
    const editImagePath = document.getElementById('editImagePath');
    
    if (editQuestionImageDisplay) editQuestionImageDisplay.style.display = 'none';
    if (editQuestionImagePreview) editQuestionImagePreview.src = '';
    if (editImagePath) editImagePath.value = '';
}

// Initialize modal event listeners
document.addEventListener('DOMContentLoaded', function() {
    const createModal = document.getElementById('createQuestionModal');
    if (createModal) {
        createModal.addEventListener('show.bs.modal', function() {
            toggleQuestionType();
        });
    }
    
    // Add event listener for create form submission
    const createQuestionForm = document.getElementById('createQuestionForm');
    if (createQuestionForm) {
        createQuestionForm.addEventListener('submit', function(e) {
            const questionType = document.getElementById('questionType').value;
            
            // Copy question text from editor
            const questionEditor = document.getElementById('questionEditor');
            const questionText = document.getElementById('questionText');
            if (questionEditor && questionText) {
                questionText.value = questionEditor.innerHTML;
            }
            
            // Copy explanation from editor
            const explanationEditor = document.getElementById('explanationEditor');
            const explanationText = document.getElementById('explanationText');
            if (explanationEditor && explanationText) {
                explanationText.value = explanationEditor.innerHTML;
            }
            
            // Validate form
            const validationErrors = validateCreateQuestionForm(questionType);
            
            if (validationErrors.length > 0) {
                e.preventDefault();
                alert('Mohon lengkapi data berikut:\n\n' + validationErrors.join('\n'));
                return false;
            }
        });
    }
    
    // Add event listener for question image preview
    const questionImage = document.getElementById('questionImage');
    if (questionImage) {
        questionImage.addEventListener('change', function(e) {
            const preview = document.getElementById('questionImagePreview');
            if (e.target.files && e.target.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const img = preview.querySelector('img');
                    img.src = e.target.result;
                    img.style.maxWidth = '100%';
                    img.style.maxHeight = '200px';
                    img.style.objectFit = 'contain';
                    preview.style.display = 'block';
                };
                reader.readAsDataURL(e.target.files[0]);
            } else {
                preview.style.display = 'none';
            }
        });
    }
});

// Function to validate create question form
function validateCreateQuestionForm(questionType) {
    const errors = [];
    
    // Validate question text
    const questionEditor = document.getElementById('questionEditor');
    if (!questionEditor || questionEditor.innerHTML.trim() === '' || questionEditor.innerHTML.trim() === '<br>') {
        errors.push('- Pertanyaan wajib diisi');
    }
    
    // Validate based on question type
    if (questionType === 'multiple_choice') {
        const mcContainer = document.getElementById('multipleChoiceOptions');
        const options = ['A','B','C','D','E'];
        
        options.forEach(option => {
            const optionInput = mcContainer.querySelector(`input[name="options_${option}"]`);
            const imageInput = mcContainer.querySelector(`input[name="image_${option}"]`);
            
            const hasText = optionInput && optionInput.value.trim() !== '';
            const hasImage = imageInput && imageInput.files && imageInput.files.length > 0;

            if (!hasText && !hasImage) {
                errors.push(`- Pilihan jawaban ${option} minimal isi teks atau gambar`);
            }
        });

        const correctAnswer = mcContainer.querySelector('input[name="correct_answer_option"]:checked');
        if (!correctAnswer) {
            errors.push('- Kunci jawaban wajib dipilih');
        }
    } else if (questionType === 'true_false') {
        const correctAnswer = document.querySelector('input[name="correct_answer"]:checked');
        if (!correctAnswer) {
            errors.push('- Jawaban yang benar wajib dipilih (Benar/Salah)');
        }
    } else if (questionType === 'listening') {
        const audioFile = document.querySelector('input[name="audio_file"]');
        const audioUrl = document.querySelector('input[name="audio_url"]');
        
        if ((!audioFile || audioFile.files.length === 0) && (!audioUrl || audioUrl.value.trim() === '')) {
            errors.push('- Audio wajib diupload atau URL audio wajib diisi');
        }
        
        const listeningContainer = document.getElementById('listeningOptions');
        const options = ['A', 'B', 'C', 'D', 'E'];
        
        options.forEach(option => {
            const optionInput = listeningContainer.querySelector(`input[name="options_${option}"]`);
            const imageInput = listeningContainer.querySelector(`input[name="image_${option}"]`);

            const hasText = optionInput && optionInput.value.trim() !== '';
            const hasImage = imageInput && imageInput.files && imageInput.files.length > 0;

            if (!hasText && !hasImage) {
                errors.push(`- Jawaban Listening ${option} minimal isi teks atau gambar`);
            }
        });
        
        const correctAnswer = listeningContainer.querySelector('input[name="correct_answer_option"]:checked');
        if (!correctAnswer) {
            errors.push('- Kunci jawaban (correct_answer_option) wajib dipilih');
        }
    }
    
    return errors;
}

</script>
@endsection