@extends('layouts.admin')

@section('content')
<style>
    .exam-edit-card {
        position: relative;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 1.5rem;
        background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)), rgba(7, 12, 28, 0.48);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 24px 50px rgba(2, 6, 23, 0.26);
        backdrop-filter: blur(12px);
    }

    .exam-edit-card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.12), transparent 35%);
        pointer-events: none;
    }

    .exam-input-shell, .exam-number-shell, .exam-select-shell { position: relative; }

    .exam-field, .exam-select-input, .exam-datetime-input, .exam-number-input {
        width: 100%;
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(2, 6, 23, 0.45);
        color: rgb(255, 255, 255);
        padding: 0.8rem 1rem;
        outline: none;
    }

    .exam-field:focus, .exam-select-input:focus, .exam-datetime-input:focus, .exam-number-input:focus {
        border-color: rgba(34, 211, 238, 0.6);
        box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
    }

    .exam-select-input {
        appearance: none; -webkit-appearance: none;
        background-image: none !important;
        padding-right: 3.6rem;
    }

    .exam-select-icon {
        position: absolute; top: 50%; right: 0.85rem;
        display: inline-flex; align-items: center; justify-content: center;
        width: 2rem; height: 2rem; transform: translateY(-50%);
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.06);
        color: white;
        pointer-events: none;
    }

    .section-header {
        display: flex; align-items: center; gap: 0.75rem;
        padding-bottom: 0.75rem;
        margin-bottom: 1.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .section-header-icon {
        width: 2.5rem; height: 2.5rem;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 0.75rem;
        background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(59, 130, 246, 0.2));
        border: 1px solid rgba(34, 211, 238, 0.3);
        color: #67e8f9;
    }

    .level-selector {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .level-option {
        padding: 0.75rem 0.5rem;
        border-radius: 0.75rem;
        border: 2px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.02);
        text-align: center;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .level-option.selected {
        border-color: #06b6d4;
        background: rgba(6, 182, 212, 0.15);
    }
</style>

<div class="space-y-6">
    {{-- Header --}}
    <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div>
            <p class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-200">Manage Exam</p>
            <h1 class="mt-2 text-3xl font-semibold text-white">Edit {{ $exam->title }}</h1>
            <p class="mt-2 max-w-3xl text-sm text-slate-300">
                Update exam settings and manage questions from the button on the right.
            </p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a href="{{ route('admin.questions.index', $exam) }}" class="admin-action-btn bg-indigo-600 text-white">
                Manage Questions ({{ $exam->questions->count() }})
            </a>
            <a href="{{ route('admin.exams.index') }}" class="admin-action-btn bg-yellow-600 text-white">← Back</a>
        </div>
    </div>

    @if(session('success'))
        <div class="rounded-2xl border border-emerald-400/30 bg-emerald-500/10 px-4 py-3 text-sm text-emerald-100">
            {{ session('success') }}
        </div>
    @endif

    <form method="POST" action="{{ route('admin.exams.update', $exam) }}" class="space-y-6">
        @csrf
        @method('PUT')

        <div class="exam-edit-card p-6 space-y-6">

            {{-- SECTION 1: BASIC INFO --}}
            <div>
                <div class="section-header">
                    <span class="section-header-icon">
                        <svg viewBox="0 0 20 20" fill="none" class="w-5 h-5">
                            <path d="M4 4h12v12H4z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
                            <path d="M7 8h6M7 12h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                    </span>
                    <div>
                        <h2 class="text-lg font-semibold text-white">Basic Information</h2>
                        <p class="text-xs text-slate-400">Title, exam type, and difficulty</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-slate-100">Test Title <span class="text-red-400">*</span></label>
                        <input type="text" name="title" value="{{ old('title', $exam->title) }}" class="exam-field mt-2" required>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Exam Type <span class="text-red-400">*</span></label>
                        <div class="exam-select-shell mt-2">
                            <select name="exam_type" id="exam_type" class="exam-select-input" required>
                                @foreach($examTypes as $key => $label)
                                    <option value="{{ $key }}" {{ old('exam_type', $exam->exam_type) == $key ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                            <span class="exam-select-icon">
                                <svg viewBox="0 0 20 20" fill="none" class="h-4 w-4"><path d="M6 8L10 12L14 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </span>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Difficulty <span class="text-red-400">*</span></label>
                        <div class="exam-select-shell mt-2">
                            <select name="difficulty_level" class="exam-select-input" required>
                                @foreach($difficultyLevels as $key => $label)
                                    <option value="{{ $key }}" {{ old('difficulty_level', $exam->difficulty_level) == $key ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                            <span class="exam-select-icon">
                                <svg viewBox="0 0 20 20" fill="none" class="h-4 w-4"><path d="M6 8L10 12L14 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- SECTION 2: TEST STRUCTURE --}}
            <div>
                <div class="section-header">
                    <span class="section-header-icon">
                        <svg viewBox="0 0 20 20" fill="none" class="w-5 h-5">
                            <path d="M3 4h14M3 10h14M3 16h14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                    </span>
                    <div>
                        <h2 class="text-lg font-semibold text-white">Test Structure</h2>
                        <p class="text-xs text-slate-400">Subject, topic, test type & questions</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Test Type <span class="text-red-400">*</span></label>
                        <div class="exam-select-shell mt-2">
                            <select name="test_type" id="test_type" class="exam-select-input" required>
                                @foreach($testTypes as $key => $label)
                                    <option value="{{ $key }}" {{ old('test_type', $exam->test_type) == $key ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                            <span class="exam-select-icon">
                                <svg viewBox="0 0 20 20" fill="none" class="h-4 w-4"><path d="M6 8L10 12L14 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </span>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Language</label>
                        <div class="exam-select-shell mt-2">
                            <select name="language" class="exam-select-input">
                                @foreach($languages as $key => $label)
                                    <option value="{{ $key }}" {{ old('language', $exam->language) == $key ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                            <span class="exam-select-icon">
                                <svg viewBox="0 0 20 20" fill="none" class="h-4 w-4"><path d="M6 8L10 12L14 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </span>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Subject <span class="text-red-400">*</span></label>
                        <div class="exam-select-shell mt-2">
                            <select name="subject" id="subject" class="exam-select-input" required></select>
                            <span class="exam-select-icon">
                                <svg viewBox="0 0 20 20" fill="none" class="h-4 w-4"><path d="M6 8L10 12L14 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </span>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Topic <span class="text-slate-400 text-xs">(optional)</span></label>
                        <div class="exam-select-shell mt-2">
                            <select name="topic" id="topic" class="exam-select-input"></select>
                            <span class="exam-select-icon">
                                <svg viewBox="0 0 20 20" fill="none" class="h-4 w-4"><path d="M6 8L10 12L14 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </span>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Question Source</label>
                        <div class="exam-select-shell mt-2">
                            <select name="question_source" class="exam-select-input">
                                @foreach($questionSources as $key => $label)
                                    <option value="{{ $key }}" {{ old('question_source', $exam->question_source) == $key ? 'selected' : '' }}>{{ $label }}</option>
                                @endforeach
                            </select>
                            <span class="exam-select-icon">
                                <svg viewBox="0 0 20 20" fill="none" class="h-4 w-4"><path d="M6 8L10 12L14 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                            </span>
                        </div>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Total Questions</label>
                        <input type="number" name="total_questions" min="0" value="{{ old('total_questions', $exam->total_questions ?? 0) }}" class="exam-field mt-2">
                    </div>
                </div>
            </div>

            {{-- SECTION 3: MARKING & TIMING --}}
            <div>
                <div class="section-header">
                    <span class="section-header-icon">
                        <svg viewBox="0 0 20 20" fill="none" class="w-5 h-5">
                            <circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="1.5"/>
                            <path d="M10 6v4l2.5 2.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                    </span>
                    <div>
                        <h2 class="text-lg font-semibold text-white">Marking & Timing</h2>
                        <p class="text-xs text-slate-400">Duration, marks, and pass criteria</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Duration (minutes)</label>
                        <input type="number" name="duration_minutes" min="1" value="{{ old('duration_minutes', $exam->duration_minutes) }}" class="exam-field mt-2" required>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Pass Percentage</label>
                        <input type="number" step="0.01" name="pass_percentage" min="0" max="100" value="{{ old('pass_percentage', $exam->pass_percentage ?? 40) }}" class="exam-field mt-2" required>
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Marks per Question</label>
                        <input type="number" step="0.01" name="marks_per_question" min="0" value="{{ old('marks_per_question', $exam->marks_per_question ?? 1) }}" class="exam-field mt-2">
                    </div>

                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Total Marks</label>
                        <input type="number" step="0.01" name="total_marks" min="0" value="{{ old('total_marks', $exam->total_marks ?? 0) }}" class="exam-field mt-2">
                    </div>

                    <div class="md:col-span-2">
                        <div class="rounded-2xl border border-red-400/20 bg-red-500/5 p-4">
                            <div class="flex items-center justify-between flex-wrap gap-3">
                                <label class="inline-flex items-center gap-3 text-sm text-slate-200">
                                    <input type="hidden" name="negative_enabled" value="0">
                                    <input type="checkbox" name="negative_enabled" value="1" class="control-check accent-red-500" {{ old('negative_enabled', $exam->negative_enabled) ? 'checked' : '' }}>
                                    <span class="font-semibold">Enable Negative Marking</span>
                                </label>
                                <input type="number" step="0.01" min="0" name="negative_marking" value="{{ old('negative_marking', $exam->negative_marking) }}" class="exam-field w-full md:w-48" placeholder="e.g. 0.33">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- SECTION 4: SCHEDULE --}}
            <div>
                <div class="section-header">
                    <span class="section-header-icon">
                        <svg viewBox="0 0 20 20" fill="none" class="w-5 h-5">
                            <rect x="3" y="4.5" width="14" height="12.5" rx="2" stroke="currentColor" stroke-width="1.5"/>
                            <path d="M3 8.5H17M6.5 2.5V5M13.5 2.5V5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                    </span>
                    <div>
                        <h2 class="text-lg font-semibold text-white">Schedule</h2>
                        <p class="text-xs text-slate-400">When students can attempt</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Start Time</label>
                        <input type="datetime-local" name="start_time" value="{{ old('start_time', $exam->start_time?->format('Y-m-d\TH:i')) }}" class="exam-field mt-2" required>
                    </div>
                    <!--<div>-->
                    <!--    <label class="block text-sm font-semibold text-slate-100">End Time</label>-->
                    <!--    <input type="datetime-local" name="end_time" value="{{ old('end_time', $exam->end_time?->format('Y-m-d\TH:i')) }}" class="exam-field mt-2" required>-->
                    <!--</div>-->
                </div>
            </div>

            <!--{{-- SECTION 5: PROCTORING --}}-->
            <!--<div>-->
            <!--    <div class="section-header">-->
            <!--        <span class="section-header-icon">-->
            <!--            <svg viewBox="0 0 20 20" fill="none" class="w-5 h-5">-->
            <!--                <path d="M10 2 3 6v5c0 5 3 8 7 9 4-1 7-4 7-9V6l-7-4z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>-->
            <!--            </svg>-->
            <!--        </span>-->
            <!--        <div>-->
            <!--            <h2 class="text-lg font-semibold text-white">Security & Proctoring</h2>-->
            <!--            <p class="text-xs text-slate-400">Choose anti-cheat level</p>-->
            <!--        </div>-->
            <!--    </div>-->

            <!--    <div class="mb-4">-->
            <!--        <label class="block text-sm font-semibold text-slate-100 mb-3">Anti-Cheat Level</label>-->
            <!--        <input type="hidden" name="anti_cheat_level" id="anti_cheat_level" value="{{ old('anti_cheat_level', $exam->anti_cheat_level ?? 'standard') }}">-->
            <!--        <div class="level-selector">-->
            <!--            <div class="level-option" data-level="basic" onclick="selectLevel('basic')">-->
            <!--                <p class="text-xs font-semibold text-slate-400 uppercase">Basic</p>-->
            <!--                <p class="mt-1 text-sm font-semibold text-white">No Proctoring</p>-->
            <!--            </div>-->
            <!--            <div class="level-option" data-level="standard" onclick="selectLevel('standard')">-->
            <!--                <p class="text-xs font-semibold text-cyan-300 uppercase">Standard</p>-->
            <!--                <p class="mt-1 text-sm font-semibold text-white">Camera</p>-->
            <!--            </div>-->
            <!--            <div class="level-option" data-level="strict" onclick="selectLevel('strict')">-->
            <!--                <p class="text-xs font-semibold text-red-300 uppercase">Strict</p>-->
            <!--                <p class="mt-1 text-sm font-semibold text-white">Camera + Mic</p>-->
            <!--            </div>-->
            <!--        </div>-->
            <!--    </div>-->

            <!--    <details class="rounded-2xl border border-white/10 bg-black/20 overflow-hidden">-->
            <!--        <summary class="p-4 cursor-pointer flex items-center justify-between text-sm font-semibold text-slate-100">-->
            <!--            <span>Advanced Proctoring Options</span>-->
            <!--            <span class="text-slate-400">▾</span>-->
            <!--        </summary>-->
            <!--        <div class="p-4 pt-0 space-y-4">-->
            <!--            <input type="hidden" name="proctoring_enabled" value="0">-->
            <!--            <label class="inline-flex items-center gap-3 text-sm text-slate-200">-->
            <!--                <input type="checkbox" name="proctoring_enabled" id="proctoring_enabled" value="1" class="control-check accent-cyan-500" {{ old('proctoring_enabled', $exam->proctoring_enabled) ? 'checked' : '' }}>-->
            <!--                Enable proctoring-->
            <!--            </label>-->

            <!--            <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">-->
            <!--                <div class="rounded-2xl border border-white/10 bg-black/20 p-4">-->
            <!--                    <p class="text-sm font-semibold text-slate-100 mb-3">Device Access</p>-->
            <!--                    <div class="grid gap-3 text-sm text-slate-200">-->
            <!--                        <label class="inline-flex items-center gap-3">-->
            <!--                            <input type="hidden" name="require_camera" value="0">-->
            <!--                            <input type="checkbox" name="require_camera" id="require_camera" value="1" class="control-check accent-cyan-500" {{ old('require_camera', $exam->require_camera) ? 'checked' : '' }}>-->
            <!--                            Require camera-->
            <!--                        </label>-->
            <!--                        <label class="inline-flex items-center gap-3">-->
            <!--                            <input type="hidden" name="require_microphone" value="0">-->
            <!--                            <input type="checkbox" name="require_microphone" id="require_microphone" value="1" class="control-check accent-cyan-500" {{ old('require_microphone', $exam->require_microphone) ? 'checked' : '' }}>-->
            <!--                            Require microphone-->
            <!--                        </label>-->
            <!--                    </div>-->
            <!--                </div>-->

            <!--                <div class="rounded-2xl border border-white/10 bg-black/20 p-4">-->
            <!--                    <p class="text-sm font-semibold text-slate-100 mb-3">Violation Rules</p>-->
            <!--                    <div class="grid gap-3 text-sm text-slate-200">-->
            <!--                        <label class="inline-flex items-center gap-3">-->
            <!--                            <input type="hidden" name="detect_no_face" value="0">-->
            <!--                            <input type="checkbox" name="detect_no_face" value="1" class="control-check accent-cyan-500" {{ old('detect_no_face', $exam->detect_no_face) ? 'checked' : '' }}>-->
            <!--                            No face visible-->
            <!--                        </label>-->
            <!--                        <label class="inline-flex items-center gap-3">-->
            <!--                            <input type="hidden" name="detect_multiple_faces" value="0">-->
            <!--                            <input type="checkbox" name="detect_multiple_faces" value="1" class="control-check accent-cyan-500" {{ old('detect_multiple_faces', $exam->detect_multiple_faces) ? 'checked' : '' }}>-->
            <!--                            Multiple faces-->
            <!--                        </label>-->
            <!--                        <label class="inline-flex items-center gap-3">-->
            <!--                            <input type="hidden" name="detect_talking" value="0">-->
            <!--                            <input type="checkbox" name="detect_talking" value="1" class="control-check accent-cyan-500" {{ old('detect_talking', $exam->detect_talking) ? 'checked' : '' }}>-->
            <!--                            Talking detected-->
            <!--                        </label>-->
            <!--                    </div>-->
            <!--                </div>-->
            <!--            </div>-->

            <!--            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">-->
            <!--                <div>-->
            <!--                    <label class="block text-sm font-semibold text-slate-100">Max Warnings</label>-->
            <!--                    <input type="number" name="max_warnings" min="1" max="10" value="{{ old('max_warnings', $exam->max_warnings ?? 5) }}" class="exam-field mt-2">-->
            <!--                </div>-->
            <!--                <div>-->
            <!--                    <label class="block text-sm font-semibold text-slate-100">Pre-Exam Countdown (sec)</label>-->
            <!--                    <input type="number" name="pre_exam_countdown_seconds" min="0" max="60" value="{{ old('pre_exam_countdown_seconds', $exam->pre_exam_countdown_seconds ?? 10) }}" class="exam-field mt-2">-->
            <!--                </div>-->
            <!--            </div>-->
            <!--        </div>-->
            <!--    </details>-->
            <!--</div>-->

            {{-- SECTION 6: DESCRIPTION --}}
            <div>
                <div class="section-header">
                    <span class="section-header-icon">
                        <svg viewBox="0 0 20 20" fill="none" class="w-5 h-5">
                            <path d="M4 4h12v12H4z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
                            <path d="M7 9h6M7 12h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                        </svg>
                    </span>
                    <div>
                        <h2 class="text-lg font-semibold text-white">Additional Details</h2>
                    </div>
                </div>

                <div class="space-y-4">
                    <div>
                        <label class="block text-sm font-semibold text-slate-100">Description</label>
                        <textarea name="description" rows="3" class="exam-field mt-2">{{ old('description', $exam->description) }}</textarea>
                    </div>

                    <div class="rounded-2xl border border-green-400/20 bg-green-500/5 p-4">
                        <label class="inline-flex items-center gap-3 text-sm text-slate-200">
                            <input type="hidden" name="is_free_test" value="0">
                            <input type="checkbox" name="is_free_test" value="1" class="control-check accent-green-500" {{ old('is_free_test', $exam->is_free_test) ? 'checked' : '' }}>
                            <span class="font-semibold text-green-300">Mark as Free Test</span>
                        </label>
                    </div>
                </div>
            </div>

        </div>

        {{-- Actions --}}
        <div class="flex flex-wrap gap-3">
            <button type="submit" class="admin-action-btn bg-gradient-to-r from-green-500 to-emerald-600 text-white font-bold px-6 py-3">
                ✓ Update Exam
            </button>
            <a href="{{ route('admin.exams.index') }}" class="admin-action-btn bg-slate-700 text-white">Cancel</a>
        </div>
    </form>
</div>

<script>
    const subjectsByExam = @json($subjectsByExam);
const topicsBySubject = @json($topicsBySubject);     // NEW
const currentSubject = @json($exam->subject);
const currentTopic = @json($exam->topic);

    document.addEventListener('DOMContentLoaded', function () {
        const examTypeSelect = document.getElementById('exam_type');
        const subjectSelect = document.getElementById('subject');
        const topicSelect = document.getElementById('topic');
        // const antiCheatInput = document.getElementById('anti_cheat_level');

        function populateSubjects(preserveSelection = false) {
            const examType = examTypeSelect.value;
            const previousValue = preserveSelection ? currentSubject : subjectSelect.value;
            subjectSelect.innerHTML = '';

            if (!examType || !subjectsByExam[examType]) {
                subjectSelect.innerHTML = '<option value="">पहले Exam Type चुनें</option>';
                return;
            }

            const allOpt = document.createElement('option');
            allOpt.value = 'All Subjects';
            allOpt.textContent = '📚 All Subjects (Mixed)';
            subjectSelect.appendChild(allOpt);

            Object.keys(subjectsByExam[examType]).forEach(function (subject) {
                const opt = document.createElement('option');
                opt.value = subject;
                opt.textContent = subject;
                subjectSelect.appendChild(opt);
            });

            if (previousValue) {
                subjectSelect.value = previousValue;
            }
        }

        function populateTopics(preserveSelection = false) {
    const examType = examTypeSelect.value;
    const subject = subjectSelect.value;
    const previousTopic = preserveSelection ? currentTopic : topicSelect.value;

    if (subject === 'All Subjects') {
        topicSelect.innerHTML = '<option value="">All topics (mixed)</option>';
        topicSelect.disabled = true;
        return;
    }

    topicSelect.disabled = false;
    topicSelect.innerHTML = '<option value="">Select Topic (optional)</option>';

    if (!examType || !subject) return;

    // DB से topics लें
    const topics = topicsBySubject[examType]?.[subject] || [];

    topics.forEach(function (topic) {
        const opt = document.createElement('option');
        opt.value = topic;
        opt.textContent = topic;
        topicSelect.appendChild(opt);
    });

    if (previousTopic) {
        topicSelect.value = previousTopic;
    }
}
        // Initial load
        populateSubjects(true);
        populateTopics(true);

        // Set anti-cheat level
        // const initialLevel = antiCheatInput.value || 'standard';
        // document.querySelector(`[data-level="${initialLevel}"]`)?.classList.add('selected');

        // Listeners
        examTypeSelect.addEventListener('change', function () {
            populateSubjects(false);
            populateTopics(false);
        });

        subjectSelect.addEventListener('change', function () {
            populateTopics(false);
        });
    });

    // window.selectLevel = function (level) {
    //     document.getElementById('anti_cheat_level').value = level;

    //     document.querySelectorAll('.level-option').forEach(el => el.classList.remove('selected'));
    //     document.querySelector(`[data-level="${level}"]`).classList.add('selected');

    //     const proctoringCheck = document.getElementById('proctoring_enabled');
    //     const cameraCheck = document.getElementById('require_camera');
    //     const micCheck = document.getElementById('require_microphone');

    //     if (level === 'basic') {
    //         proctoringCheck.checked = false;
    //         cameraCheck.checked = false;
    //         micCheck.checked = false;
    //     } else if (level === 'standard') {
    //         proctoringCheck.checked = true;
    //         cameraCheck.checked = true;
    //         micCheck.checked = false;
    //     } else if (level === 'strict') {
    //         proctoringCheck.checked = true;
    //         cameraCheck.checked = true;
    //         micCheck.checked = true;
    //     }
    // };
</script>
@endsection