@extends('layouts.main_dashboard.app')

@section('title', __('dashboard.Questions') . ' | ' . __('dashboard.Add New Question'))

@section('content')
<div class="space-y-8">
    <section class="flex flex-col gap-5 rounded-xl p-6 lg:flex-row lg:items-center lg:justify-between">
        <div>
            <p class="text-xs font-black uppercase tracking-[0.28em]">{{ __('dashboard.Question Form') }}</p>
            <h1 class="mt-3 text-3xl font-black">{{ __('dashboard.Add New Question') }}</h1>
            <p class="mt-3 max-w-2xl text-sm leading-7">إنشاء سؤال جديد داخل بنك الأسئلة مع ربطه بالسنة والفصل والمرحلة والدرس، ثم تحديد نوعه ومحتواه بشكل واضح.</p>
        </div>

        <div class="flex flex-wrap gap-3">
            <a href="{{ route('admin.questions.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-white/20 bg-white/10 px-4 py-2 text-sm font-bold text-white transition hover:bg-white/20">
                <i class="fa-solid fa-list"></i>
                <span>{{ __('dashboard.View All Questions') }}</span>
            </a>
        </div>
    </section>

    <section class="rounded-xl border border-surface-200 bg-white p-6 shadow-sm dark:border-surface-800 dark:bg-surface-900">
        <form action="{{ route('admin.questions.store') }}" method="POST" enctype="multipart/form-data" class="space-y-8">
            @csrf

            <div class="grid gap-5 md:grid-cols-2 xl:grid-cols-3">
                <div class="space-y-2">
                    <label for="year-select" class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Year') }}</label>
                    <select name="year_id" id="year-select" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Year') }}</option>
                        @foreach($years as $year)
                            <option value="{{ $year->id }}" @selected(old('year_id', $currentYear->id ?? null) == $year->id)>{{ $year->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="space-y-2">
                    <label for="term-select" class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Term') }}</label>
                    <select name="term_id" id="term-select" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" data-old-value="{{ old('term_id', $currentTerm->id ?? '') }}">
                        <option value="">{{ __('dashboard.Select Term') }}</option>
                    </select>
                </div>

                <div class="space-y-2">
                    <label for="stage-select" class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Stage') }}</label>
                    <select name="stage_id" id="stage-select" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" data-old-value="{{ old('stage_id') }}">
                        <option value="">{{ __('dashboard.Select Stage') }}</option>
                    </select>
                </div>

                <div class="space-y-2">
                    <label for="grade-select" class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Grade') }}</label>
                    <select name="grade_id" id="grade-select" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" data-old-value="{{ old('grade_id') }}">
                        <option value="">{{ __('dashboard.Select Grade') }}</option>
                    </select>
                </div>

                <div class="space-y-2">
                    <label for="subject-select" class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Subject') }}</label>
                    <select name="subject_id" id="subject-select" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required data-old-value="{{ old('subject_id') }}">
                        <option value="">{{ __('dashboard.Select Subject') }}</option>
                    </select>
                </div>

                <div class="space-y-2">
                    <label for="lesson-select" class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Lesson') }}</label>
                    <select name="lesson_id" id="lesson-select" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required data-old-value="{{ old('lesson_id') }}">
                        <option value="">{{ __('dashboard.Select Lesson') }}</option>
                    </select>
                </div>

                <div class="space-y-2">
                    <label for="question-type" class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Type') }}</label>
                    <select name="type" id="question-type" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required>
                        <option value="">{{ __('dashboard.Select Type') }}</option>
                        <option value="true_false" @selected(old('type') == 'true_false')>True/False</option>
                        <option value="mcq" @selected(old('type') == 'mcq')>MCQ</option>
                        <option value="match" @selected(old('type') == 'match')>Match</option>
                        <option value="essay" @selected(old('type') == 'essay')>Essay</option>
                        <option value="paragraph" @selected(old('type') == 'paragraph')>Paragraph</option>
                        <option value="audio_text" @selected(old('type') == 'audio_text')>{{ app()->getLocale() === 'ar' ? 'صوت ثم نص' : 'Audio to Text' }}</option>
                        <option value="text_audio" @selected(old('type') == 'text_audio')>{{ app()->getLocale() === 'ar' ? 'نص ثم صوت' : 'Text to Audio' }}</option>
                        <option value="fill_blank" @selected(old('type') == 'fill_blank')">{{ app()->getLocale() === 'ar' ? 'أكمل الفراغات' : 'Fill in the blanks' }}</option>
                    </select>
                </div>

                <div class="space-y-2">
                    <label for="difficulty_level_id" class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Difficulty Level') }}</label>
                    <select name="difficulty_level_id" id="difficulty_level_id" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required>
                        <option value="">{{ __('dashboard.Select Difficulty Level') }}</option>
                        @foreach($difficulty_levels as $level)
                            <option value="{{ $level->id }}" @selected(old('difficulty_level_id') == $level->id)>{{ $level->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="space-y-2">
                    <label for="score" class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Score') }}</label>
                    <input type="number" name="score" id="score" value="{{ old('score') }}" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" placeholder="{{ __('dashboard.Score') }}">
                </div>

                <div class="space-y-2 md:col-span-2 xl:col-span-1">
                    <label for="media" class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Media') }}</label>
                    <input type="file" name="media" id="media" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                </div>
            </div>

            <div class="space-y-2">
                <label for="question_text" class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Question Text') }}</label>
                <textarea name="question_text" id="question_text" rows="5" required class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm leading-7 text-surface-700 outline-none transition focus:border-brand-400 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">{{ old('question_text') }}</textarea>
            </div>

            <section class="rounded-xl border border-surface-200 bg-surface-50/70 p-5 dark:border-surface-800 dark:bg-surface-950/50">
                <div class="flex items-center justify-between gap-3">
                    <div>
                        <h2 class="text-base font-black text-surface-900 dark:text-white">{{ __('dashboard.Question Details') }}</h2>
                        <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">اختر نوع السؤال أولًا ليتم عرض الحقول المناسبة تلقائيًا.</p>
                    </div>
                </div>
                <div id="question-details" class="mt-5 grid gap-5"></div>
            </section>

            <div class="flex justify-end gap-3 border-t border-surface-200 pt-6 dark:border-surface-800">
                <a href="{{ route('admin.questions.index') }}" class="inline-flex items-center gap-2 rounded-2xl border border-surface-200 px-4 py-2 text-sm font-bold text-surface-600 transition hover:border-surface-300 hover:text-surface-900 dark:border-surface-700 dark:text-surface-300 dark:hover:border-surface-600 dark:hover:text-white">{{ __('dashboard.Cancel') }}</a>
                <button type="submit" class="inline-flex items-center gap-2 rounded-2xl bg-brand-600 px-4 py-2 text-sm font-bold text-white transition hover:bg-brand-700">
                    <i class="fa-solid fa-floppy-disk"></i>
                    <span>{{ __('dashboard.Save') }}</span>
                </button>
            </div>
        </form>
    </section>
</div>
@endsection

@section('scripts')
<script>
    $(function () {
        function resetSelect(target, placeholder) {
            target.empty().append('<option value="">' + placeholder + '</option>');
        }

        function setOptions(target, placeholder, data, selectedValue, labelKey = 'name') {
            resetSelect(target, placeholder);
            $.each(data, function (_, value) {
                const selected = String(selectedValue) === String(value.id) ? ' selected' : '';
                target.append('<option value="' + value.id + '"' + selected + '>' + value[labelKey] + '</option>');
            });
        }

        $('#year-select').on('change', function () {
            const yearId = $(this).val();
            const termSelect = $('#term-select');
            const oldValue = termSelect.attr('data-old-value');

            if (yearId) {
                $.get('{{ url("admin/years") }}/' + yearId + '/terms', function (data) {
                    setOptions(termSelect, '{{ __("dashboard.Select Term") }}', data, oldValue);
                    if (oldValue) {
                        termSelect.trigger('change');
                        termSelect.attr('data-old-value', '');
                    }
                });
            } else {
                resetSelect($('#term-select'), '{{ __("dashboard.Select Term") }}');
            }
            resetSelect($('#stage-select'), '{{ __("dashboard.Select Stage") }}');
            resetSelect($('#grade-select'), '{{ __("dashboard.Select Grade") }}');
            resetSelect($('#subject-select'), '{{ __("dashboard.Select Subject") }}');
            resetSelect($('#lesson-select'), '{{ __("dashboard.Select Lesson") }}');
        });

        $('#term-select').on('change', function () {
            const termId = $(this).val();
            const stageSelect = $('#stage-select');
            const oldValue = stageSelect.attr('data-old-value');

            if (termId) {
                $.get('{{ url("admin/terms") }}/' + termId + '/stages', function (data) {
                    setOptions(stageSelect, '{{ __("dashboard.Select Stage") }}', data, oldValue);
                    if (oldValue) {
                        stageSelect.trigger('change');
                        stageSelect.attr('data-old-value', '');
                    }
                });
            } else {
                resetSelect(stageSelect, '{{ __("dashboard.Select Stage") }}');
            }
            resetSelect($('#grade-select'), '{{ __("dashboard.Select Grade") }}');
            resetSelect($('#subject-select'), '{{ __("dashboard.Select Subject") }}');
            resetSelect($('#lesson-select'), '{{ __("dashboard.Select Lesson") }}');
        });

        $('#stage-select').on('change', function () {
            const stageId = $(this).val();
            const gradeSelect = $('#grade-select');
            const oldValue = gradeSelect.attr('data-old-value');

            if (stageId) {
                $.get('{{ url("admin/stages") }}/' + stageId + '/grades', function (data) {
                    setOptions(gradeSelect, '{{ __("dashboard.Select Grade") }}', data, oldValue);
                    if (oldValue) {
                        gradeSelect.trigger('change');
                        gradeSelect.attr('data-old-value', '');
                    }
                });
            } else {
                resetSelect(gradeSelect, '{{ __("dashboard.Select Grade") }}');
            }
            resetSelect($('#subject-select'), '{{ __("dashboard.Select Subject") }}');
            resetSelect($('#lesson-select'), '{{ __("dashboard.Select Lesson") }}');
        });

        $('#grade-select').on('change', function () {
            const gradeId = $(this).val();
            const subjectSelect = $('#subject-select');
            const oldValue = subjectSelect.attr('data-old-value');

            if (gradeId) {
                $.get('{{ url("admin/grades") }}/' + gradeId + '/subjects', function (data) {
                    setOptions(subjectSelect, '{{ __("dashboard.Select Subject") }}', data, oldValue);
                    if (oldValue) {
                        subjectSelect.trigger('change');
                        subjectSelect.attr('data-old-value', '');
                    }
                });
            } else {
                resetSelect(subjectSelect, '{{ __("dashboard.Select Subject") }}');
            }
            resetSelect($('#lesson-select'), '{{ __("dashboard.Select Lesson") }}');
        });

        $('#subject-select').on('change', function () {
            const subjectId = $(this).val();
            const lessonSelect = $('#lesson-select');
            const oldValue = lessonSelect.attr('data-old-value');

            if (subjectId) {
                $.get('{{ url("admin/subjects") }}/' + subjectId + '/lessons', function (data) {
                    setOptions(lessonSelect, '{{ __("dashboard.Select Lesson") }}', data, oldValue, 'title');
                    if (oldValue) {
                        lessonSelect.attr('data-old-value', '');
                    }
                });
            } else {
                resetSelect(lessonSelect, '{{ __("dashboard.Select Lesson") }}');
            }
        });

        // Trigger on load
        if ($('#year-select').val()) {
            $('#year-select').trigger('change');
        }

        function renderQuestionDetails(type) {
            const target = $('#question-details');
            target.empty();

            if (type === 'true_false') {
                target.append(`
                    <div class="space-y-2">
                        <label class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Correct Answer') }}</label>
                        <select name="correct_answer" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                            <option value="1" ${@json(old('correct_answer')) == '1' ? 'selected' : ''}>{{ __('dashboard.True') }}</option>
                            <option value="0" ${@json(old('correct_answer')) == '0' ? 'selected' : ''}>{{ __('dashboard.False') }}</option>
                        </select>
                    </div>
                `);
            } else if (type === 'mcq') {
                let rows = '';
                const oldChoices = @json(old('choices', ['']));
                const selectedChoice = @json(old('correct_choice'));

                oldChoices.forEach((choice, index) => {
                    rows += `<div class="grid gap-3 md:grid-cols-[1fr_auto]"><input type="text" name="choices[]" value="${choice ?? ''}" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required><label class="inline-flex items-center gap-2 rounded-2xl border border-surface-200 px-4 py-3 text-sm font-bold text-surface-600 dark:border-surface-700 dark:text-surface-300"><input type="radio" name="correct_choice" value="${index}" ${String(selectedChoice) === String(index) ? 'checked' : ''}> {{ __('dashboard.Correct') }}</label></div>`;
                });

                target.append(`<div class="space-y-3"><label class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Choices') }}</label><div id="mcq-choices" class="space-y-3">${rows}</div><button type="button" id="add-choice" class="inline-flex items-center gap-2 rounded-2xl border border-surface-200 px-4 py-2.5 text-sm font-bold text-surface-700 transition hover:border-brand-300 hover:text-brand-600 dark:border-surface-700 dark:text-surface-200">{{ __('dashboard.Add Choice') }}</button></div>`);

                $('#add-choice').on('click', function () {
                    const index = $('#mcq-choices > div').length;
                    $('#mcq-choices').append(`<div class="grid gap-3 md:grid-cols-[1fr_auto]"><input type="text" name="choices[]" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required><label class="inline-flex items-center gap-2 rounded-2xl border border-surface-200 px-4 py-3 text-sm font-bold text-surface-600 dark:border-surface-700 dark:text-surface-300"><input type="radio" name="correct_choice" value="${index}"> {{ __('dashboard.Correct') }}</label></div>`);
                });
            } else if (type === 'essay') {
                target.append(`<div class="space-y-2"><label class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Essay Text') }}</label><textarea name="essay_text" rows="5" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm leading-7 text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required>{{ old('essay_text') }}</textarea></div>`);
            } else if (type === 'match') {
                const oldA = @json(old('a', ['']));
                const oldB = @json(old('b', ['']));
                const oldMatch = @json(old('match', ['']));
                let aRows = '';
                let bRows = '';

                oldA.forEach((item) => {
                    aRows += `<div><input type="text" name="a[]" value="${item ?? ''}" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required></div>`;
                });

                oldB.forEach((item, index) => {
                    bRows += `<div class="grid gap-3 md:grid-cols-2"><input type="text" name="b[]" value="${item ?? ''}" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required><input type="text" name="match[]" value="${oldMatch[index] ?? ''}" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required></div>`;
                });

                target.append(`<div class="grid gap-5 md:grid-cols-2"><div class="space-y-3"><label class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Group A') }}</label><div id="group-a" class="space-y-3">${aRows}</div><button type="button" id="add-group-a" class="inline-flex items-center gap-2 rounded-2xl border border-surface-200 px-4 py-2.5 text-sm font-bold text-surface-700 transition hover:border-brand-300 hover:text-brand-600 dark:border-surface-700 dark:text-surface-200">{{ __('dashboard.Add Group A') }}</button></div><div class="space-y-3"><label class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Group B') }}</label><div id="group-b" class="space-y-3">${bRows}</div><button type="button" id="add-group-b" class="inline-flex items-center gap-2 rounded-2xl border border-surface-200 px-4 py-2.5 text-sm font-bold text-surface-700 transition hover:border-brand-300 hover:text-brand-600 dark:border-surface-700 dark:text-surface-200">{{ __('dashboard.Add Group B') }}</button></div></div>`);

                $('#add-group-a').on('click', function () {
                    $('#group-a').append(`<div><input type="text" name="a[]" class="w-full rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required></div>`);
                });

                $('#add-group-b').on('click', function () {
                    $('#group-b').append(`<div class="grid gap-3 md:grid-cols-2"><input type="text" name="b[]" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required><input type="text" name="match[]" class="rounded-2xl border border-surface-200 bg-white px-4 py-3 text-sm text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required></div>`);
                });
            } else if (type === 'paragraph') {
                target.append(`<div class="space-y-2"><label class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Paragraph Text') }}</label><textarea name="paragraph_text" rows="6" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm leading-7 text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required>{{ old('paragraph_text') }}</textarea></div>`);
            } else if (type === 'audio_text') {
                target.append(`
                    <div class="space-y-4">
                        <div class="rounded-2xl border border-dashed border-surface-300 px-4 py-4 text-sm leading-7 text-surface-500 dark:border-surface-700 dark:text-surface-400">
                            {{ app()->getLocale() === 'ar' ? 'هذا النوع يعرض ملفاً صوتياً داخل السؤال ويطلب من الطالب كتابة الإجابة نصاً. ارفع الملف الصوتي من حقل الوسائط أعلى الصفحة.' : 'This type shows an audio file in the question and expects the student to answer with text. Upload the audio file from the media field above.' }}
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ app()->getLocale() === 'ar' ? 'الإجابة المرجعية' : 'Reference Answer' }}</label>
                            <textarea name="reference_answer" rows="5" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm leading-7 text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">{{ old('reference_answer') }}</textarea>
                        </div>
                    </div>
                `);
            } else if (type === 'text_audio') {
                target.append(`
                    <div class="space-y-4">
                        <div class="rounded-2xl border border-dashed border-surface-300 px-4 py-4 text-sm leading-7 text-surface-500 dark:border-surface-700 dark:text-surface-400">
                            {{ app()->getLocale() === 'ar' ? 'هذا النوع يعرض نص السؤال ويطلب من الطالب رفع إجابة صوتية. لا حاجة لرفع صوت في السؤال نفسه إلا إذا كان ذلك داعماً للمحتوى.' : 'This type shows a text prompt and expects the student to upload an audio answer. You do not need to attach audio to the question itself unless it supports the prompt.' }}
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ app()->getLocale() === 'ar' ? 'الإجابة المرجعية' : 'Reference Answer' }}</label>
                            <textarea name="reference_answer" rows="5" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm leading-7 text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">{{ old('reference_answer') }}</textarea>
                        </div>
                    </div>
                `);
            } else if (type === 'fill_blank') {
                target.append(`
                    <div class="space-y-4">
                        <div class="rounded-2xl border border-dashed border-surface-300 px-4 py-4 text-sm leading-7 text-surface-500 dark:border-surface-700 dark:text-surface-400">
                            {{ app()->getLocale() === 'ar' ? 'اكتب النص الكامل وضع [blank] في كل موضع تريد تحويله إلى فراغ للطالب.' : 'Write the full text and place [blank] wherever you want to turn the content into a blank for the student.' }}
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ app()->getLocale() === 'ar' ? 'نص الفراغات' : 'Blank Template Text' }}</label>
                            <textarea name="template_text" rows="6" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm leading-7 text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required>{{ old('template_text') }}</textarea>
                        </div>
                        <div class="space-y-2">
                            <label class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ app()->getLocale() === 'ar' ? 'الإجابة المرجعية' : 'Reference Answer' }}</label>
                            <textarea name="reference_answer" rows="4" class="w-full rounded-xl border border-surface-200 bg-white px-4 py-3 text-sm leading-7 text-surface-700 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">{{ old('reference_answer') }}</textarea>
                        </div>
                    </div>
                `);
            }
        }

        $('#question-type').on('change', function () {
            renderQuestionDetails($(this).val());
        });

        if ($('#question-type').val()) {
            renderQuestionDetails($('#question-type').val());
        }
    });
</script>
@endsection