@extends('layouts.admin')

@section('content')
<style>
    .exam-create-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);
        -webkit-backdrop-filter: blur(12px);
    }

    .exam-create-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;
        transition: border-color 0.2s ease;
    }

    .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-field::placeholder, .exam-number-input::placeholder { color: rgb(148 163 184); }

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

    .exam-select-input:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .exam-select-icon, .exam-input-icon-btn {
        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;
    }

    .exam-select-icon { pointer-events: none; }

    .exam-number-input { -moz-appearance: textfield; padding-right: 3rem; }
    .exam-number-input::-webkit-outer-spin-button,
    .exam-number-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    .exam-step-btn {
        position: absolute; right: 0.75rem;
        display: inline-flex; align-items: center; justify-content: center;
        width: 1.5rem; height: 1.15rem;
        border: 0; background: transparent;
        color: rgb(226 232 240); opacity: 0.9;
        transition: color 0.2s ease, opacity 0.2s ease;
    }

    .exam-step-btn:hover { color: white; opacity: 1; }
    .exam-step-btn-up { top: 0.58rem; }
    .exam-step-btn-down { bottom: 0.58rem; }

    .exam-step-divider {
        position: absolute; top: 50%; right: 0.75rem;
        width: 1.5rem; height: 1px;
        background: rgba(255, 255, 255, 0.12);
        transform: translateY(-50%); pointer-events: none;
    }

    /* Premium Section Headers */
    .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;
    }

    /* Live Preview Sidebar */
    .preview-card {
        position: sticky;
        top: 1.5rem;
        border: 1px solid rgba(34, 211, 238, 0.3);
        border-radius: 1.5rem;
        background: linear-gradient(180deg, rgba(8, 47, 73, 0.9), rgba(7, 12, 28, 0.95));
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(103, 232, 249, 0.15);
        padding: 1.5rem;
        overflow: hidden;
    }

    .preview-badge {
        display: inline-block;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .preview-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.6rem 0;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
        font-size: 0.875rem;
    }

    .preview-row:last-child { border-bottom: none; }
    .preview-row-label { color: #94a3b8; }
    .preview-row-value { color: white; font-weight: 600; text-align: right; }

    /* Progress Bar */
    .progress-bar-container {
        height: 6px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 9999px;
        overflow: hidden;
    }

    .progress-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #06b6d4, #3b82f6);
        transition: width 0.4s ease;
        border-radius: 9999px;
    }

    /* Quick Actions */
    .quick-action {
        display: inline-flex; align-items: center; gap: 0.5rem;
        padding: 0.5rem 0.9rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: #cbd5e1;
        font-size: 0.8rem;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .quick-action:hover {
        background: rgba(34, 211, 238, 0.1);
        border-color: rgba(34, 211, 238, 0.4);
        color: #67e8f9;
    }

    /* Smart Badge */
    .smart-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.25rem 0.65rem;
        border-radius: 9999px;
        background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
        border: 1px solid rgba(168, 85, 247, 0.4);
        font-size: 0.65rem;
        font-weight: 600;
        color: #d8b4fe;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    /* Anti-cheat level selector */
    .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:hover {
        border-color: rgba(34, 211, 238, 0.4);
        background: rgba(34, 211, 238, 0.05);
    }

    .level-option input { display: none; }
    .level-option.selected {
        border-color: #06b6d4;
        background: rgba(6, 182, 212, 0.15);
        box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
    }
</style>

<div class="space-y-6">
    {{-- Header --}}
    <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div>
            <div class="flex items-center gap-3">
                <span class="smart-badge">
                    <svg viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3">
                        <path d="M10 2a1 1 0 0 1 .894.553l1.618 3.28 3.618.526a1 1 0 0 1 .554 1.706l-2.618 2.552.618 3.605a1 1 0 0 1-1.451 1.054L10 13.553l-3.233 1.723a1 1 0 0 1-1.451-1.054l.618-3.605L3.316 8.065a1 1 0 0 1 .554-1.706l3.618-.526L9.106 2.553A1 1 0 0 1 10 2z"/>
                    </svg>
                    Smart Mode
                </span>
            </div>
            <h1 class="mt-2 text-3xl font-bold text-white bg-gradient-to-r from-cyan-300 to-blue-400 bg-clip-text text-transparent">
                Create Smart Test
            </h1>
            <p class="mt-2 max-w-3xl text-sm text-slate-300">
                Fill in the details — the preview on the right updates live as you type.
            </p>
        </div>

        <a href="{{ route('admin.exams.index') }}" class="admin-action-btn bg-yellow-600 text-white">← Back</a>
    </div>

    {{-- Progress Bar --}}
    <div class="exam-create-card p-4">
        <div class="flex items-center justify-between mb-2">
            <span class="text-xs font-semibold uppercase tracking-wider text-slate-300">Form Completion</span>
            <span id="progressText" class="text-xs font-bold text-cyan-300">0%</span>
        </div>
        <div class="progress-bar-container">
            <div id="progressBar" class="progress-bar-fill" style="width: 0%"></div>
        </div>
    </div>

    {{-- Main Grid: Form + Preview --}}
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- LEFT: Form --}}
        <div class="lg:col-span-2 space-y-6">
            <form method="POST" action="{{ route('admin.exams.store') }}" id="examForm" class="space-y-6">
                @csrf

                {{-- ===================================================== --}}
                {{-- SECTION 1: BASIC INFO --}}
                {{-- ===================================================== --}}
                <section class="exam-create-card p-6">
                    <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">Test title, exam type, and difficulty</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
                        {{-- Title --}}
                        <div class="md:col-span-2">
                            <div class="flex justify-between items-center">
                                <label class="block text-sm font-semibold text-slate-100">
                                    Test Title <span class="text-red-400">*</span>
                                </label>
                                <button type="button" onclick="autoGenerateTitle()" class="quick-action">
                                    <svg viewBox="0 0 20 20" fill="currentColor" class="w-3 h-3">
                                        <path d="M11.3 1.05a.75.75 0 0 1 .42.87l-1.2 4.05h4.23a.75.75 0 0 1 .58 1.22l-6.5 8a.75.75 0 0 1-1.3-.65l1.2-4.05H4.5a.75.75 0 0 1-.58-1.22l6.5-8a.75.75 0 0 1 .88-.22z"/>
                                    </svg>
                                    Auto-generate
                                </button>
                            </div>
                            <input type="text" name="title" id="title" value="{{ old('title') }}" class="exam-field mt-2" placeholder="e.g. RAS Prelims - History Mock Test 1" required>
                        </div>

                        {{-- Exam Type --}}
                        <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>
                                    <option value="">Select Exam Type</option>
                                    @foreach($examTypes as $key => $label)
                                        <option value="{{ $key }}" {{ old('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="M5 8L10 13L15 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                </span>
                            </div>
                        </div>

                        {{-- Difficulty --}}
                        <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" id="difficulty_level" class="exam-select-input" required>
                                    <option value="">Select Difficulty</option>
                                    @foreach($difficultyLevels as $key => $label)
                                        <option value="{{ $key }}" {{ old('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="M5 8L10 13L15 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </section>

                {{-- ===================================================== --}}
                {{-- SECTION 2: TEST STRUCTURE --}}
                {{-- ===================================================== --}}
                <section class="exam-create-card p-6">
                    <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">
                        {{-- Test Type --}}
                        <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>
                                    <option value="">Select Test Type</option>
                                    @foreach($testTypes as $key => $label)
                                        <option value="{{ $key }}" {{ old('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="M5 8L10 13L15 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                </span>
                            </div>
                        </div>

                        {{-- Language --}}
                        <div>
                            <label class="block text-sm font-semibold text-slate-100">Language</label>
                            <div class="exam-select-shell mt-2">
                                <select name="language" id="language" class="exam-select-input">
                                    @foreach($languages as $key => $label)
                                        <option value="{{ $key }}" {{ old('language', 'both') == $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="M5 8L10 13L15 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                </span>
                            </div>
                        </div>

                        {{-- Subject --}}
                        <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>
                                    <option value="">पहले Exam Type चुनें</option>
                                </select>
                                <span class="exam-select-icon">
                                    <svg viewBox="0 0 20 20" fill="none" class="h-4 w-4"><path d="M5 8L10 13L15 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                </span>
                            </div>
                        </div>

                        {{-- Topic --}}
                        <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">
                                    <option value="">पहले Subject चुनें</option>
                                </select>
                                <span class="exam-select-icon">
                                    <svg viewBox="0 0 20 20" fill="none" class="h-4 w-4"><path d="M5 8L10 13L15 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                </span>
                            </div>
                        </div>

                        {{-- Question Source --}}
                        <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" id="question_source" class="exam-select-input">
                                    @foreach($questionSources as $key => $label)
                                        <option value="{{ $key }}" {{ old('question_source', 'manual') == $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="M5 8L10 13L15 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                </span>
                            </div>
                        </div>

                        {{-- Total Questions --}}
                        <div>
                            <label class="block text-sm font-semibold text-slate-100">Total Questions</label>
                            <div class="exam-number-shell mt-2">
                                <input type="number" name="total_questions" id="total_questions" min="0" value="{{ old('total_questions', 0) }}" class="exam-number-input" placeholder="e.g. 100">
                                <button type="button" class="exam-step-btn exam-step-btn-up" data-step-target="total_questions" data-step-direction="up" aria-label="Increase">
                                    <svg viewBox="0 0 12 12" fill="none" class="h-3 w-3"><path d="M2.25 7.5 6 4.25 9.75 7.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
                                </button>
                                <span class="exam-step-divider"></span>
                                <button type="button" class="exam-step-btn exam-step-btn-down" data-step-target="total_questions" data-step-direction="down" aria-label="Decrease">
                                    <svg viewBox="0 0 12 12" fill="none" class="h-3 w-3"><path d="M2.25 4.5 6 7.75 9.75 4.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </section>

                {{-- ===================================================== --}}
                {{-- SECTION 3: MARKING & TIMING --}}
                {{-- ===================================================== --}}
                <section class="exam-create-card p-6">
                    <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">
                        {{-- Duration --}}
                        <div>
                            <label class="block text-sm font-semibold text-slate-100">Duration (minutes)</label>
                            <div class="exam-number-shell mt-2">
                                <input type="number" name="duration_minutes" id="duration_minutes" min="1" value="{{ old('duration_minutes') }}" class="exam-number-input" placeholder="e.g. 120" required>
                                <button type="button" class="exam-step-btn exam-step-btn-up" data-step-target="duration_minutes" data-step-direction="up" aria-label="Increase">
                                    <svg viewBox="0 0 12 12" fill="none" class="h-3 w-3"><path d="M2.25 7.5 6 4.25 9.75 7.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
                                </button>
                                <span class="exam-step-divider"></span>
                                <button type="button" class="exam-step-btn exam-step-btn-down" data-step-target="duration_minutes" data-step-direction="down" aria-label="Decrease">
                                    <svg viewBox="0 0 12 12" fill="none" class="h-3 w-3"><path d="M2.25 4.5 6 7.75 9.75 4.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
                                </button>
                            </div>
                        </div>

                        {{-- Marks per question --}}
                        <div>
                            <label class="block text-sm font-semibold text-slate-100">Marks per Question</label>
                            <div class="exam-number-shell mt-2">
                                <input type="number" name="marks_per_question" id="marks_per_question" step="0.01" min="0" value="{{ old('marks_per_question', 1) }}" class="exam-number-input" placeholder="e.g. 1">
                                <button type="button" class="exam-step-btn exam-step-btn-up" data-step-target="marks_per_question" data-step-direction="up" aria-label="Increase">
                                    <svg viewBox="0 0 12 12" fill="none" class="h-3 w-3"><path d="M2.25 7.5 6 4.25 9.75 7.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
                                </button>
                                <span class="exam-step-divider"></span>
                                <button type="button" class="exam-step-btn exam-step-btn-down" data-step-target="marks_per_question" data-step-direction="down" aria-label="Decrease">
                                    <svg viewBox="0 0 12 12" fill="none" class="h-3 w-3"><path d="M2.25 4.5 6 7.75 9.75 4.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
                                </button>
                            </div>
                        </div>

                        {{-- Total Marks (readonly) --}}
                        <div>
                            <label class="block text-sm font-semibold text-slate-100">Total Marks <span class="text-xs text-cyan-300">(auto)</span></label>
                            <input type="number" name="total_marks" id="total_marks" readonly class="exam-field mt-2 bg-cyan-500/5 border-cyan-400/30 cursor-not-allowed" value="{{ old('total_marks', 0) }}">
                        </div>

                        {{-- Pass Percentage --}}
                        <div>
                            <label class="block text-sm font-semibold text-slate-100">Pass Percentage</label>
                            <div class="exam-number-shell mt-2">
                                <input type="number" name="pass_percentage" id="pass_percentage" step="0.01" min="0" max="100" value="{{ old('pass_percentage', 40) }}" class="exam-number-input" required>
                                <button type="button" class="exam-step-btn exam-step-btn-up" data-step-target="pass_percentage" data-step-direction="up" aria-label="Increase">
                                    <svg viewBox="0 0 12 12" fill="none" class="h-3 w-3"><path d="M2.25 7.5 6 4.25 9.75 7.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
                                </button>
                                <span class="exam-step-divider"></span>
                                <button type="button" class="exam-step-btn exam-step-btn-down" data-step-target="pass_percentage" data-step-direction="down" aria-label="Decrease">
                                    <svg viewBox="0 0 12 12" fill="none" class="h-3 w-3"><path d="M2.25 4.5 6 7.75 9.75 4.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/></svg>
                                </button>
                            </div>
                        </div>

                        {{-- Negative Marking --}}
                        <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" id="negative_enabled" value="1" class="control-check accent-red-500" {{ old('negative_enabled') ? 'checked' : '' }}>
                                        <span class="font-semibold">Enable Negative Marking</span>
                                    </label>
                                    <div class="exam-number-shell w-full md:w-48">
                                        <input type="number" step="0.01" min="0" name="negative_marking" id="negative_marking" value="{{ old('negative_marking', 0) }}" class="exam-number-input" placeholder="Penalty e.g. 0.33">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {{-- ===================================================== --}}
                {{-- SECTION 4: SCHEDULE --}}
                {{-- ===================================================== --}}
                <section class="exam-create-card p-6">
                    <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 this test</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>
                            <div class="exam-input-shell mt-2">
                                <input type="datetime-local" name="start_time" id="start_time" value="{{ old('start_time') }}" class="exam-datetime-input" required>
                            </div>
                        </div>
                        <!--<div>-->
                        <!--    <label class="block text-sm font-semibold text-slate-100">End Time</label>-->
                        <!--    <div class="exam-input-shell mt-2">-->
                        <!--        <input type="datetime-local" name="end_time" id="end_time" value="{{ old('end_time') }}" class="exam-datetime-input" required>-->
                        <!--    </div>-->
                        <!--</div>-->
                    </div>
                </section>

                {{-- ===================================================== --}}
                {{-- SECTION 5: PROCTORING --}}
                {{-- ===================================================== --}}
                <!--<section class="exam-create-card p-6">-->
                <!--    <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 (smart preset)</p>-->
                <!--        </div>-->
                <!--    </div>-->

                <!--    {{-- Anti-Cheat Level Selector --}}-->
                <!--    <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', 'basic') }}">-->
                <!--        <div class="level-selector">-->
                <!--            <div class="level-option" data-level="basic" onclick="selectLevel('basic')">-->
                <!--                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wider">Basic</p>-->
                <!--                <p class="mt-1 text-sm font-semibold text-white">No Proctoring</p>-->
                <!--                <p class="text-xs text-slate-400 mt-1">Practice test</p>-->
                <!--            </div>-->
                <!--            <div class="level-option" data-level="standard" onclick="selectLevel('standard')">-->
                <!--                <p class="text-xs font-semibold text-cyan-300 uppercase tracking-wider">Standard</p>-->
                <!--                <p class="mt-1 text-sm font-semibold text-white">Camera</p>-->
                <!--                <p class="text-xs text-slate-400 mt-1">Basic monitoring</p>-->
                <!--            </div>-->
                <!--            <div class="level-option" data-level="strict" onclick="selectLevel('strict')">-->
                <!--                <p class="text-xs font-semibold text-red-300 uppercase tracking-wider">Strict</p>-->
                <!--                <p class="mt-1 text-sm font-semibold text-white">Camera + Mic</p>-->
                <!--                <p class="text-xs text-slate-400 mt-1">Full monitoring</p>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--    </div>-->

                <!--    {{-- Advanced Proctoring Options (collapsible) --}}-->
                <!--    <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') ? 'checked' : '' }}>-->
                <!--                Enable proctoring for this exam-->
                <!--            </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') ? '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') ? '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', 1) ? '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', 1) ? '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', 1) ? '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', 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', 10) }}" class="exam-field mt-2">-->
                <!--                </div>-->
                <!--            </div>-->
                <!--        </div>-->
                <!--    </details>-->
                <!--</section>-->

                {{-- ===================================================== --}}
                {{-- SECTION 6: DESCRIPTION & FREE TEST --}}
                {{-- ===================================================== --}}
                <section class="exam-create-card p-6">
                    <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>
                            <p class="text-xs text-slate-400">Description and free test option</p>
                        </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" placeholder="Test description (optional)">{{ old('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') ? 'checked' : '' }}>
                                <span class="font-semibold text-green-300">Mark as Free Test</span>
                                <span class="text-xs text-slate-400">(For new students without subscription)</span>
                            </label>
                        </div>
                    </div>
                </section>

                {{-- 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 shadow-lg shadow-green-500/20">
                        <svg viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 inline mr-2">
                            <path d="M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0z"/>
                        </svg>
                        Save & Continue
                    </button>
                    <a href="{{ route('admin.exams.index') }}" class="admin-action-btn bg-slate-700 text-white">Cancel</a>
                </div>
            </form>
        </div>

        {{-- RIGHT: Live Preview --}}
        <div class="lg:col-span-1">
            <div class="preview-card">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-sm font-bold text-cyan-300 uppercase tracking-wider">Live Preview</h3>
                    <span class="smart-badge">
                        <span class="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"></span>
                        Live
                    </span>
                </div>

                {{-- Preview Title --}}
                <div class="pb-3 border-b border-white/10 mb-4">
                    <p class="text-xs text-slate-400 uppercase tracking-wider mb-1">Title</p>
                    <p id="previewTitle" class="text-white font-semibold text-lg leading-tight">Untitled Test</p>
                </div>

                {{-- Badges --}}
                <div class="flex flex-wrap gap-2 mb-4">
                    <span id="previewExamType" class="preview-badge bg-cyan-500/20 text-cyan-300 border border-cyan-500/30 hidden"></span>
                    <span id="previewDifficulty" class="preview-badge bg-amber-500/20 text-amber-300 border border-amber-500/30 hidden"></span>
                    <span id="previewTestType" class="preview-badge bg-purple-500/20 text-purple-300 border border-purple-500/30 hidden"></span>
                </div>

                {{-- Details --}}
                <div class="space-y-0 mb-4">
                    <div class="preview-row">
                        <span class="preview-row-label">Subject</span>
                        <span id="previewSubject" class="preview-row-value">—</span>
                    </div>
                    <div class="preview-row">
                        <span class="preview-row-label">Topic</span>
                        <span id="previewTopic" class="preview-row-value">—</span>
                    </div>
                    <div class="preview-row">
                        <span class="preview-row-label">Duration</span>
                        <span id="previewDuration" class="preview-row-value">—</span>
                    </div>
                    <div class="preview-row">
                        <span class="preview-row-label">Questions</span>
                        <span id="previewQuestions" class="preview-row-value">—</span>
                    </div>
                    <div class="preview-row">
                        <span class="preview-row-label">Total Marks</span>
                        <span id="previewTotalMarks" class="preview-row-value text-cyan-300">—</span>
                    </div>
                    <div class="preview-row">
                        <span class="preview-row-label">Negative Marking</span>
                        <span id="previewNegative" class="preview-row-value text-red-300">None</span>
                    </div>
                    <div class="preview-row">
                        <span class="preview-row-label">Pass %</span>
                        <span id="previewPass" class="preview-row-value">—</span>
                    </div>
                    <div class="preview-row">
                        <span class="preview-row-label">Language</span>
                        <span id="previewLanguage" class="preview-row-value">—</span>
                    </div>
                    <!--<div class="preview-row">-->
                    <!--    <span class="preview-row-label">Security</span>-->
                    <!--    <span id="previewSecurity" class="preview-row-value">—</span>-->
                    <!--</div>-->
                </div>

                {{-- Free test indicator --}}
                <div id="previewFreeBadge" class="mt-4 hidden">
                    <div class="rounded-xl border border-green-400/30 bg-green-500/10 p-3 text-center">
                        <p class="text-xs font-bold text-green-300 uppercase tracking-wider">🎁 Free Test</p>
                    </div>
                </div>

                {{-- Smart tips --}}
                <div class="mt-4 pt-4 border-t border-white/10">
                    <p class="text-xs text-slate-400 mb-2 font-semibold uppercase tracking-wider">💡 Smart Tips</p>
                    <ul id="smartTips" class="text-xs text-slate-400 space-y-1.5">
                        <li>Select exam type to auto-fill defaults</li>
                        <li>Use "Auto-generate" for title</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const subjectsByExam = @json($subjectsByExam);       // config/academix से (associative)
    const topicsBySubject = @json($topicsBySubject);     // DB से — NEW
    const examPresets = @json($examPresets);
    const languages = @json($languages);
    // const antiCheatLevels = @json($antiCheatLevels);
    const examTypes = @json($examTypes);
    const testTypes = @json($testTypes);

    document.addEventListener('DOMContentLoaded', function () {
        // Elements
        const examTypeSelect = document.getElementById('exam_type');
        const subjectSelect = document.getElementById('subject');
        const topicSelect = document.getElementById('topic');
        const testTypeSelect = document.getElementById('test_type');
        const titleInput = document.getElementById('title');
        const durationInput = document.getElementById('duration_minutes');
        const totalQuestionsInput = document.getElementById('total_questions');
        const marksPerQuestionInput = document.getElementById('marks_per_question');
        const totalMarksInput = document.getElementById('total_marks');
        const passPercentageInput = document.getElementById('pass_percentage');
        const negativeEnabledCheck = document.getElementById('negative_enabled');
        const negativeMarkingInput = document.getElementById('negative_marking');
        const languageSelect = document.getElementById('language');
        // const antiCheatInput = document.getElementById('anti_cheat_level');

        // ============ SUBJECT POPULATION ============
        function populateSubjects() {
    const examType = examTypeSelect.value;
    subjectSelect.innerHTML = '';

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

    const defaultOpt = document.createElement('option');
    defaultOpt.value = '';
    defaultOpt.textContent = 'Select Subject';
    subjectSelect.appendChild(defaultOpt);

    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);
    });
}

        // ============ TOPIC POPULATION ============
        function populateTopics() {
    const examType = examTypeSelect.value;
    const subject = subjectSelect.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 लें — new structure: topicsBySubject[examType][subject]
    const topics = topicsBySubject[examType]?.[subject] || [];

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

        // ============ SMART PRESET APPLY ============
        function applyExamPreset(examType) {
            if (!examPresets[examType]) return;

            const preset = examPresets[examType];

            if (preset.duration_minutes) durationInput.value = preset.duration_minutes;
            if (preset.total_questions) totalQuestionsInput.value = preset.total_questions;
            if (preset.marks_per_question) marksPerQuestionInput.value = preset.marks_per_question;
            if (preset.negative_marking) negativeMarkingInput.value = preset.negative_marking;
            if (preset.negative_enabled) negativeEnabledCheck.checked = true;
            if (preset.pass_percentage) passPercentageInput.value = preset.pass_percentage;
            if (preset.language) languageSelect.value = preset.language;

            calculateTotalMarks();
            updatePreview();

            showTip('✨ Smart preset applied for ' + examType + '!');
        }

        // ============ AUTO GENERATE TITLE ============
        window.autoGenerateTitle = function () {
            const examType = examTypeSelect.value;
            const subject = subjectSelect.value;
            const testType = testTypeSelect.value;
            const difficulty = document.getElementById('difficulty_level').value;

            if (!examType) {
                showTip('⚠️ Please select Exam Type first!');
                return;
            }

            const parts = [];
            if (examType) parts.push(examType);
            if (subject && subject !== 'All Subjects') parts.push(subject);
            if (subject === 'All Subjects') parts.push('Full Syllabus');
            if (difficulty) parts.push(difficulty);
            if (testType && testTypes[testType]) parts.push(testTypes[testType]);

            const date = new Date();
            const title = parts.join(' - ') + ' ' + date.getFullYear();

            titleInput.value = title;
            updatePreview();
            showTip('✨ Title auto-generated!');
        };

        // ============ CALCULATE TOTAL MARKS ============
        function calculateTotalMarks() {
            const q = parseFloat(totalQuestionsInput.value) || 0;
            const m = parseFloat(marksPerQuestionInput.value) || 0;
            totalMarksInput.value = (q * m).toFixed(2);
            updatePreview();
        }

        // ============ ANTI-CHEAT LEVEL SELECTOR ============
        // window.selectLevel = function (level) {
        //     antiCheatInput.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;
        //     }

        //     updatePreview();
        // };

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

        // ============ LIVE PREVIEW ============
        function updatePreview() {
            const title = titleInput.value || 'Untitled Test';
            const examType = examTypeSelect.value;
            const subject = subjectSelect.value;
            const topic = topicSelect.value;
            const difficulty = document.getElementById('difficulty_level').value;
            const testType = testTypeSelect.value;
            const duration = durationInput.value;
            const questions = totalQuestionsInput.value;
            const totalMarks = totalMarksInput.value;
            const pass = passPercentageInput.value;
            const negEnabled = negativeEnabledCheck.checked;
            const negMarking = negativeMarkingInput.value;
            const language = languageSelect.value;
            // const antiCheat = antiCheatInput.value;
            const isFree = document.querySelector('input[name="is_free_test"]').checked;

            // Title
            document.getElementById('previewTitle').textContent = title;

            // Badges
            setBadge('previewExamType', examType ? examTypes[examType] : '', examType);
            setBadge('previewDifficulty', difficulty, difficulty);
            setBadge('previewTestType', testType ? testTypes[testType] : '', testType);

            // Details
            document.getElementById('previewSubject').textContent = subject || '—';
            document.getElementById('previewTopic').textContent = topic || '—';
            document.getElementById('previewDuration').textContent = duration ? duration + ' min' : '—';
            document.getElementById('previewQuestions').textContent = questions || '—';
            document.getElementById('previewTotalMarks').textContent = totalMarks ? totalMarks + ' marks' : '—';
            document.getElementById('previewNegative').textContent = negEnabled && negMarking ? '-' + negMarking : 'None';
            document.getElementById('previewPass').textContent = pass ? pass + '%' : '—';
            document.getElementById('previewLanguage').textContent = language ? languages[language] : '—';
            // document.getElementById('previewSecurity').textContent = antiCheat ? antiCheat.charAt(0).toUpperCase() + antiCheat.slice(1) : '—';

            // Free badge
            document.getElementById('previewFreeBadge').classList.toggle('hidden', !isFree);

            updateProgress();
        }

        function setBadge(id, label, value) {
            const el = document.getElementById(id);
            if (value && label) {
                el.textContent = label;
                el.classList.remove('hidden');
            } else {
                el.classList.add('hidden');
            }
        }

        // ============ PROGRESS BAR ============
        function updateProgress() {
            const requiredFields = ['title', 'exam_type', 'difficulty_level', 'test_type', 'subject', 'duration_minutes', 'pass_percentage', 'start_time'];
            let filled = 0;

            requiredFields.forEach(field => {
                const el = document.querySelector(`[name="${field}"]`);
                if (el && el.value && el.value !== '') filled++;
            });

            const percent = Math.round((filled / requiredFields.length) * 100);
            document.getElementById('progressBar').style.width = percent + '%';
            document.getElementById('progressText').textContent = percent + '%';
        }

        // ============ SMART TIPS ============
        function showTip(message) {
            const tips = document.getElementById('smartTips');
            const li = document.createElement('li');
            li.textContent = message;
            li.className = 'text-cyan-300';
            tips.insertBefore(li, tips.firstChild);

            // Keep only 3 tips
            while (tips.children.length > 3) {
                tips.removeChild(tips.lastChild);
            }

            setTimeout(() => { li.classList.add('opacity-50'); }, 3000);
        }

        // ============ EVENT LISTENERS ============
        examTypeSelect.addEventListener('change', function () {
            populateSubjects();
            if (this.value) applyExamPreset(this.value);
            updatePreview();
        });

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

        testTypeSelect.addEventListener('change', function () {
            const testType = this.value;

            // Smart behavior: Mock/Full → auto "All Subjects"
            if (testType === 'mock_test' || testType === 'full_test') {
                if (subjectSelect.value !== 'All Subjects') {
                    subjectSelect.value = 'All Subjects';
                    populateTopics();
                    showTip('✨ Auto-selected "All Subjects" for ' + testTypes[testType]);
                }
            }
            updatePreview();
        });

        // Live update on input
        [titleInput, durationInput, totalQuestionsInput, marksPerQuestionInput, passPercentageInput, negativeMarkingInput, languageSelect].forEach(el => {
            el?.addEventListener('input', updatePreview);
            el?.addEventListener('change', updatePreview);
        });

        totalQuestionsInput.addEventListener('input', calculateTotalMarks);
        marksPerQuestionInput.addEventListener('input', calculateTotalMarks);

        negativeEnabledCheck.addEventListener('change', updatePreview);

        document.getElementById('difficulty_level').addEventListener('change', updatePreview);

        // Free test checkbox
        document.querySelector('input[name="is_free_test"]').addEventListener('change', updatePreview);

        // Old values restoration
        const oldExamType = "{{ old('exam_type') }}";
        const oldSubject = "{{ old('subject') }}";
        const oldTopic = "{{ old('topic') }}";

        if (oldExamType) {
            examTypeSelect.value = oldExamType;
            populateSubjects();
            if (oldSubject) {
                subjectSelect.value = oldSubject;
                populateTopics();
                if (oldTopic) topicSelect.value = oldTopic;
            }
        }

        // Init
        calculateTotalMarks();
        updatePreview();

        // Step buttons
        document.querySelectorAll('[data-step-target]').forEach((button) => {
            button.addEventListener('click', () => {
                const input = document.querySelector(`[name="${button.dataset.stepTarget}"]`);
                if (!input) return;

                const step = Number(input.step) || 1;
                const min = input.min === '' ? null : Number(input.min);
                const max = input.max === '' ? null : Number(input.max);
                const current = input.value === '' ? 0 : Number(input.value);
                const delta = button.dataset.stepDirection === 'down' ? -step : step;
                let next = current + delta;

                if (min !== null) next = Math.max(min, next);
                if (max !== null) next = Math.min(max, next);

                input.value = Number.isInteger(step) ? String(next) : next.toFixed(String(step).split('.')[1]?.length || 2);
                input.dispatchEvent(new Event('input', { bubbles: true }));
                input.dispatchEvent(new Event('change', { bubbles: true }));
            });
        });
    });
</script>

@endsection