<x-admin-app-layout>
    <div class="white-box">
        <x-admin::page-header title="{{ __('Create Question') }}" :buttons="$buttons" :isFilterable="false" />

        <div class="tabs space-y-4">
            <div
                class="flex flex-wrap gap-3 p-1 rounded-lg md:rounded-full border border-neutral-30 dark:border-neutral-500 relative">
                @foreach ($languages as $language)
                    <button data-link="{{ $language->code }}"
                        class="tab-link px-4 relative z-[3] py-2 flex items-center gap-2 text-sm rounded-full">
                        {{ $language->name }}
                    </button>
                @endforeach
            </div>
            <div class="tab-content">
                @foreach ($languages as $language)
                    @if ($language->code == 'en')
                        <div class="tab-panel {{ $loop->first ? '' : 'hidden' }}">
                            <form action="{{ route('admin.contests.questions.store', $contest) }}" method="POST"
                                class="form-submit-add">
                                @csrf
                                <input type="hidden" name="locale" value="{{ $language->code }}">
                                <div class="mt-4">
                                    <div
                                        class="w-full md:w-3/4 border border-neutral-30 rounded dark:border-neutral-500 flex flex-col gap-4 p-4 xl:p-6 mx-auto">
                                        <div class="input-group">
                                            <x-admin::label for="question_type">
                                                {{ __('Question Type') }}
                                            </x-admin::label>
                                            <x-admin::select-option class="select-2" name="question_type"
                                                id="question_type">
                                                @foreach (\App\Enums\QuestionTypeEnum::cases() as $type)
                                                    <option value="{{ $type->value }}" @selected($type->value == old('question_type', \App\Enums\QuestionTypeEnum::MULTIPLE_CHOICE->value))>
                                                        {{ $type->label() }}
                                                    </option>
                                                @endforeach
                                            </x-admin::select-option>
                                            <x-admin::input-error name="question_type" />
                                        </div>
                                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                            <x-admin::text-input-group name="time_limit"
                                                placeholder="{{ __('Enter Time Limit') }}"
                                                label="Time Limit (in minutes)" type="number" />
                                            <x-admin::text-input-group name="score" label="Score"
                                                placeholder="{{ __('Enter Score') }}" type="number" />
                                        </div>
                                        <span id="question_text_example" class="hidden">Example: The {A} of light is
                                            approximately
                                            {B}
                                            kilometers per {C}.</span>
                                        <x-admin::textarea-group name="question_text" label="Question"
                                            id="question_text" />

                                        <div id="gap_fillers" class="hidden">
                                            <button class="btn-primary" type="button"
                                                id="add_gap_filler">{black}</button>
                                        </div>

                                        <div class="form-group">
                                            <div class="flex justify-between items-center">
                                                <p class="m-text font-medium">{{ __('Question Options') }}</p>
                                                <button type="button" class="btn-primary" id="extra_field_container">
                                                    <i class="ph ph-plus"></i>
                                                    <span class="text-xs font-medium">{{ __('Add Option') }}</span>
                                                </button>
                                            </div>
                                            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5 py-4 pt-8"
                                                id="options_container">
                                            </div>
                                            <x-admin::input-error name="options" />
                                        </div>

                                        <div>
                                            <div class="flex justify-between items-center">
                                                <p class="m-text font-medium">{{ __('Correct Answers') }}</p>
                                            </div>
                                            <div class="flex flex-row gap-5 pt-8" id="correct_answers_container">

                                            </div>
                                        </div>

                                        <div
                                            class="border border-neutral-30 rounded dark:border-neutral-500 flex flex-col gap-4 p-4 xl:p-6">
                                            <h6>{{ __('Explanation') }}</h6>
                                            <div class="flex flex-row gap-5 pt-4 lg:pt-6">
                                                <div class="input-group flex-1">
                                                    <x-admin::label for="explanation_type">
                                                        {{ __('Select an Explanation Type (Optional)') }}
                                                    </x-admin::label>
                                                    <x-admin::select-option class="select-2" id="explanation_type"
                                                        name="explanation_type">
                                                        @foreach (\App\Enums\QuestionExplanationTypeEnum::cases() as $type)
                                                            <option value="{{ $type->value }}"
                                                                @selected($type->value == old('explanation_type', 'none'))>
                                                                {{ $type->label() }}
                                                            </option>
                                                        @endforeach
                                                    </x-admin::select-option>
                                                    <x-admin::input-error name="explanation_type" />
                                                </div>
                                                <div id="question-explanation" class="flex-1">
                                                    <div id="image" class="hidden input-group">
                                                        <x-admin::label for="question_explanation">
                                                            {{ __('Image') }}
                                                        </x-admin::label>
                                                        <x-admin::file-uploader id="icon"
                                                            name="question_explanation" />
                                                        <x-admin::input-error name="question_explanation" />
                                                    </div>
                                                    <div id="audio" class="hidden input-group">
                                                        <x-admin::label for="question_explanation">
                                                            {{ __('Audio') }}
                                                        </x-admin::label>
                                                        <x-admin::file-input name="question_explanation" />
                                                        <x-admin::input-error name="question_explanation" />
                                                    </div>
                                                    <div id="video" class="hidden input-group">
                                                        <x-admin::label for="question_explanation">
                                                            {{ __('Video') }}
                                                        </x-admin::label>
                                                        <x-admin::file-input name="question_explanation" />
                                                        <x-admin::input-error name="question_explanation" />
                                                    </div>
                                                    <div id="text" class="hidden">
                                                        <x-admin::textarea-group name="question_explanation"
                                                            label="Text" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <x-admin::editor label="Hints" name="hints" placeholder="Enter Hints"
                                            id="hints" />
                                        <x-admin::editor label="Answer Explanation" name="answer_explanation" placeholder="Enter Answer explanation"
                                            id="answer_explanation" />
                                    </div>
                                </div>
                                <div class="flex items-center justify-end mt-4">
                                    <x-admin::primary-button type="submit">
                                        {{ __('Save') }}
                                    </x-admin::primary-button>
                                </div>
                            </form>
                        </div>
                    @else
                        <div class="tab-panel {{ $loop->first ? '' : 'hidden' }}">
                            <form action="{{ route('admin.contests.questions.store', $contest) }}" method="POST"
                                class="form-submit-add">
                                @csrf
                                <input type="hidden" name="locale" value="{{ $language->code }}">
                                <div
                                    class="w-full md:w-3/4 border border-neutral-30 rounded dark:border-neutral-500 flex flex-col gap-4 p-4 xl:p-6 mx-auto">
                                    <x-admin::textarea-group name="question_text" label="Question" />
                                    <div
                                        class="border border-neutral-30 rounded dark:border-neutral-500 flex flex-col gap-4 p-4 xl:p-6">
                                        <h6>{{ __('Explanation') }}</h6>
                                        <x-admin::textarea-group name="question_explanation" label="Text" />
                                    </div>
                                    <x-admin::editor label="Hints" name="hints" placeholder="Enter Hints"
                                        id="hints" />
                                </div>
                                <div class="flex items-center justify-end mt-4">
                                    <x-admin::primary-button type="submit">
                                        {{ __('Save') }}
                                    </x-admin::primary-button>
                                </div>
                            </form>
                        </div>
                    @endif
                @endforeach

            </div>
        </div>

    </div>
    @push('scripts')
        @vite('resources/admin/js/contest/question.js')
    @endpush
</x-admin-app-layout>
