@extends('layouts.main_dashboard.app')

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

@section('content')
@php
    $currentYearId = $question->subject->grade->stage->term->year->id ?? null;
    $currentTermId = $question->subject->grade->stage->term->id ?? null;
    $currentStageId = $question->subject->grade->stage->id ?? null;
    $currentGradeId = $question->subject->grade->id ?? null;
    $mcqChoices = old('choices', json_decode($question->mcq->choices ?? '[]', true) ?? []);
    $groupA = old('a', is_array($question->match?->group_a) ? $question->match->group_a : (json_decode($question->match->group_a ?? '[]', true) ?? []));
    $groupB = old('b', is_array($question->match?->group_b) ? $question->match->group_b : (json_decode($question->match->group_b ?? '[]', true) ?? []));
    $matchMap = is_array($question->match?->match) ? $question->match->match : (json_decode($question->match->match ?? '[]', true) ?? []);
    $oldMatchValues = old('match');
@endphp

<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.Edit 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.show', $question->id) }}" class="inline-flex items-center gap-2 rounded-2xl bg-white px-4 py-2 text-sm font-bold text-brand-700 transition hover:bg-brand-50">
                <i class="fa-solid fa-eye"></i>
                <span>{{ __('dashboard.View') }}</span>
            </a>
            <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.update', $question->id) }}" method="POST" enctype="multipart/form-data" class="space-y-8">
            @csrf
            @method('PUT')

            <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 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', $currentYearId) == $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 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Term') }}</option>
                        @foreach($terms as $term)
                            <option value="{{ $term->id }}" @selected(old('term_id', $currentTermId) == $term->id)>{{ $term->name }}</option>
                        @endforeach
                    </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 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Stage') }}</option>
                        @foreach($stages as $stage)
                            <option value="{{ $stage->id }}" @selected(old('stage_id', $currentStageId) == $stage->id)>{{ $stage->name }}</option>
                        @endforeach
                    </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 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                        <option value="">{{ __('dashboard.Select Grade') }}</option>
                        @foreach($grades as $grade)
                            <option value="{{ $grade->id }}" @selected(old('grade_id', $currentGradeId) == $grade->id)>{{ $grade->name }}</option>
                        @endforeach
                    </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 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required>
                        <option value="">{{ __('dashboard.Select Subject') }}</option>
                        @foreach($subjects as $subject)
                            <option value="{{ $subject->id }}" @selected(old('subject_id', $question->subject_id) == $subject->id)>{{ $subject->name }}</option>
                        @endforeach
                    </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 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100" required>
                        <option value="">{{ __('dashboard.Select Lesson') }}</option>
                        @foreach($lessons as $lesson)
                            <option value="{{ $lesson->id }}" @selected(old('lesson_id', $question->lesson_id) == $lesson->id)>{{ $lesson->title }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="space-y-2">
                    <label class="text-sm font-bold text-surface-700 dark:text-surface-200">{{ __('dashboard.Type') }}</label>
                    <input type="text" value="{{ ucwords(str_replace('_', ' ', $question->type)) }}" class="w-full rounded-2xl border border-surface-200 bg-surface-50 px-4 py-3 text-sm font-medium text-surface-700 dark:border-surface-700 dark:bg-surface-900 dark:text-surface-100" readonly>
                    <input type="hidden" name="type" value="{{ $question->type }}">
                </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 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', $question->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', $question->score) }}" 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" 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 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">
                </div>
            </div>

            @if($question->media_path)
                <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 flex-col gap-4 md:flex-row md:items-start md:justify-between">
                        <div>
                            <h2 class="text-base font-black text-surface-900 dark:text-white">{{ __('dashboard.Current Media') }}</h2>
                            <p class="mt-1 text-sm text-surface-500 dark:text-surface-400">{{ $question->media_type ?: __('dashboard.Attachment') }}</p>
                        </div>
                        <a href="{{ asset('storage/' . $question->media_path) }}" target="_blank" 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">
                            <i class="fa-solid fa-arrow-up-right-from-square"></i>
                            <span>{{ __('dashboard.Open') }}</span>
                        </a>
                    </div>
                </section>
            @endif

            <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 dark:border-surface-700 dark:bg-surface-950 dark:text-surface-100">{{ old('question_text', $question->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>
                    <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 class="mt-5 grid gap-5">
                    @if($question->type === 'true_false')
                        <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" @selected(old('correct_answer', $question->trueFalse->correct_answer ?? null) == '1')>{{ __('dashboard.True') }}</option>
                                <option value="0" @selected(old('correct_answer', $question->trueFalse->correct_answer ?? null) == '0')>{{ __('dashboard.False') }}</option>
                            </select>
                        </div>
                    @elseif($question->type === 'mcq')
                        <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">
                                @foreach($mcqChoices as $index => $choice)
                                    <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 }}" @checked((string) old('correct_choice', $question->mcq->correct_choice ?? '') === (string) $index)>
                                            {{ __('dashboard.Correct') }}
                                        </label>
                                    </div>
                                @endforeach
                            </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>
                    @elseif($question->type === 'essay')
                        <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', $question->essay->essay_text ?? '') }}</textarea>
                        </div>
                    @elseif($question->type === 'match')
                        <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">
                                    @foreach($groupA as $item)
                                        <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>
                                    @endforeach
                                </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">
                                    @foreach($groupB as $index => $item)
                                        <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="{{ $oldMatchValues[$index] ?? ($matchMap[$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>
                                        </div>
                                    @endforeach
                                </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>
                    @elseif($question->type === 'paragraph')
                        <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', $question->paragraph->paragraph_text ?? '') }}</textarea>
                        </div>
                    @elseif($question->type === 'audio_text')
                        <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 question shows an audio file in the quiz and asks the student to answer with text. Make sure the current or replacement media is an audio file.' }}
                            </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', $question->audioText->reference_answer ?? '') }}</textarea>
                            </div>
                        </div>
                    @elseif($question->type === 'text_audio')
                        <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', $question->textAudio->reference_answer ?? '') }}</textarea>
                        </div>
                    @elseif($question->type === 'fill_blank')
                        <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] في كل موضع تريد أن يظهر كفراغ للطالب.' : 'Place [blank] wherever you want a blank to appear 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', $question->fillBlank->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', $question->fillBlank->reference_answer ?? '') }}</textarea>
                            </div>
                        </div>
                    @endif
                </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 () {
            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") }}');

            $.get('{{ url("admin/years") }}/' + $(this).val() + '/terms', function (data) {
                setOptions($('#term-select'), '{{ __("dashboard.Select Term") }}', data, null);
            });
        });

        $('#term-select').on('change', function () {
            resetSelect($('#stage-select'), '{{ __("dashboard.Select Stage") }}');
            resetSelect($('#grade-select'), '{{ __("dashboard.Select Grade") }}');
            resetSelect($('#subject-select'), '{{ __("dashboard.Select Subject") }}');
            resetSelect($('#lesson-select'), '{{ __("dashboard.Select Lesson") }}');

            $.get('{{ url("admin/terms") }}/' + $(this).val() + '/stages', function (data) {
                setOptions($('#stage-select'), '{{ __("dashboard.Select Stage") }}', data, null);
            });
        });

        $('#stage-select').on('change', function () {
            resetSelect($('#grade-select'), '{{ __("dashboard.Select Grade") }}');
            resetSelect($('#subject-select'), '{{ __("dashboard.Select Subject") }}');
            resetSelect($('#lesson-select'), '{{ __("dashboard.Select Lesson") }}');

            $.get('{{ url("admin/stages") }}/' + $(this).val() + '/grades', function (data) {
                setOptions($('#grade-select'), '{{ __("dashboard.Select Grade") }}', data, null);
            });
        });

        $('#grade-select').on('change', function () {
            resetSelect($('#subject-select'), '{{ __("dashboard.Select Subject") }}');
            resetSelect($('#lesson-select'), '{{ __("dashboard.Select Lesson") }}');

            $.get('{{ url("admin/grades") }}/' + $(this).val() + '/subjects', function (data) {
                setOptions($('#subject-select'), '{{ __("dashboard.Select Subject") }}', data, null);
            });
        });

        $('#subject-select').on('change', function () {
            resetSelect($('#lesson-select'), '{{ __("dashboard.Select Lesson") }}');

            $.get('{{ url("admin/subjects") }}/' + $(this).val() + '/lessons', function (data) {
                setOptions($('#lesson-select'), '{{ __("dashboard.Select Lesson") }}', data, null, 'title');
            });
        });

        $('#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>`);
        });

        $('#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>`);
        });
    });
</script>
@endsection