<x-admin-app-layout>
    <div class="white-box">
        <x-admin::page-header
            title="{{ $questionLevel ? __('Create question for ' . $questionLevel->level->title) : __('Create Question') }}"
            :buttons="$buttons" :isFilterable="false" />
        <div class="mt-4">
            <form action="{{ route('admin.quizzes.questions.store', $quiz) }}" method="POST" class="form-submit-add">
                @csrf
                <input type="hidden" name="question_level_id" value="{{ $questionLevel ? $questionLevel->id : null }}">
                <input type="hidden" name="locale" value="en">
                <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>
                    <div class="input-group">
                        <x-admin::label for="question_input_type">
                            {{ __('Select an Question Input Type') }}
                        </x-admin::label>
                        <x-admin::select-option class="select-2" id="question_input_type" name="question_input_type"
                            label="Category">
                            @foreach (\App\Enums\QuestionInputTypeEnum::cases() as $type)
                                <option value="{{ $type->value }}" @selected($type->value == old('question_input_type', 'none'))>
                                    {{ $type->label() }}
                                </option>
                            @endforeach
                        </x-admin::select-option>
                        <x-admin::input-error name="question_input_type" />
                    </div>
                    <div id="question-text-container">
                        <div id="question_image_id" class="hidden input-group">
                            <x-admin::label for="question_text">
                                {{ __('Image') }}
                            </x-admin::label>
                            <x-admin::file-uploader id="question_text" name="question_text" :image_preview="true" />
                            <x-admin::input-error name="question_text" />
                        </div>
                        <div id="question_audio_id" class="hidden input-group">
                            <x-admin::label for="question_text">
                                {{ __('Audio') }}
                            </x-admin::label>
                            <x-admin::file-input name="question_text" />
                            <x-admin::input-error name="question_text" />
                        </div>
                        <div id="question_video_id" class="hidden input-group">
                            <x-admin::label for="question_text">
                                {{ __('Video') }}
                            </x-admin::label>
                            <x-admin::file-input name="question_text" />
                            <x-admin::input-error name="question_text" />
                        </div>
                        <div id="question_text_id">
                            <x-admin::editor label="Question" name="question_text" placeholder="Enter Question"
                                id="question_text" />
                        </div>
                    </div>
                    <div id="gap_fillers" class="hidden">
                        <button class="btn-primary" type="button" id="add_gap_filler">{black}</button>
                    </div>

                    <div>
                        <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>
                    </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"
                                    label="Category">
                                    @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="question_explanation" name="question_explanation"
                                        :image_preview="true" />
                                    <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 class="flex items-center justify-end mt-4">
                    <x-admin::primary-button type="submit">
                        {{ __('Save') }}
                    </x-admin::primary-button>
                </div>
            </form>
        </div>
    </div>
    @push('scripts')
        @vite('resources/admin/js/quiz/question.js')
    @endpush
</x-admin-app-layout>
