<x-admin-app-layout>
    <div class="white-box">
        <x-admin::page-header title="{{ __('Edit 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)
                    @php
                        $question_lang = $question->lang[$language->code] ?? [];
                    @endphp
                    @if ($language->code == 'en')
                        <div class="tab-panel {{ $loop->first ? '' : 'hidden' }}">
                            <form
                                action="{{ route('admin.contests.questions.update', ['contest' => $contest, 'question' => $question]) }}"
                                method="POST" class="form-submit-add">
                                @csrf
                                @method('PUT')
                                <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 == $question->type ?? old('question_type', ''))>
                                                        {{ $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"
                                                value="{{ $question->time_limit ?? '' }}"
                                                placeholder="{{ __('Enter Time Limit') }}"
                                                label="Time Limit (in minutes)" type="number" />
                                            <x-admin::text-input-group name="score"
                                                value="{{ $question->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 == $question->question_input_type->value)>
                                                        {{ $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="{{ $question->question_input_type === \App\Enums\QuestionInputTypeEnum::IMAGE ? '' : 'hidden' }} input-group">
                                                <x-admin::label for="question_text">
                                                    {{ __('Image') }}
                                                </x-admin::label>
                                                <x-admin::file-uploader id="question_text" name="question_text"
                                                    :value="$question_lang['question_text'] ?? ''" :image_preview="true" />
                                                <x-admin::input-error name="question_text" />
                                            </div>
                                            <div id="question_audio_id"
                                                class="{{ $question->question_input_type === \App\Enums\QuestionInputTypeEnum::AUDIO ? '' : 'hidden' }} input-group">
                                                <x-admin::label for="question_text">
                                                    {{ __('Audio') }}
                                                </x-admin::label>
                                                <x-admin::file-input name="question_text"
                                                    value="{{ $question_lang['question_text'] ?? '' }}" />
                                                <x-admin::input-error name="question_text" />
                                            </div>
                                            <div id="question_video_id"
                                                class="{{ $question->question_input_type === \App\Enums\QuestionInputTypeEnum::VIDEO ? '' : 'hidden' }} input-group">
                                                <x-admin::label for="question_text">
                                                    {{ __('Video') }}
                                                </x-admin::label>
                                                <x-admin::file-input name="question_text"
                                                    value="{{ $question_lang['question_text'] ?? '' }}" />
                                                <x-admin::input-error name="question_text" />
                                            </div>
                                            <div id="question_text_id"
                                                class="{{ $question->question_input_type === \App\Enums\QuestionInputTypeEnum::TEXT ? '' : 'hidden' }} input-group">
                                                <x-admin::editor label="Question" name="question_text"
                                                    value="{{ $question_lang['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 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">
                                                @foreach ($question->options as $key => $option)
                                                    <div class="space-y-4 border border-neutral-30 dark:border-neutral-500 p-3 rounded-lg  relative"
                                                        id="meta-row-{{ $loop->index }}">
                                                        <div class="input-group">
                                                            <div class="flex justify-between items-center py-2">
                                                                <label for="name" class="block mb-2 text-sm">Option
                                                                    -
                                                                    {{ $option['value'] }}</label>
                                                                <div
                                                                    class="flex items-center gap-3 text-sm text-gray-600 dark:text-gray-400">
                                                                    <span>Mark as correct answer</span>
                                                                    <button type="button"
                                                                        class="correct_answer p-2 rounded-full hover:bg-green-100 dark:hover:bg-green-900 transition"
                                                                        data-id="{{ $loop->index }}"
                                                                        aria-label="Mark as correct">
                                                                        <i
                                                                            class="ph ph-check text-lg text-green-600 dark:text-green-400"></i>
                                                                    </button>
                                                                </div>
                                                            </div>
                                                            <input type="text" class="text-input"
                                                                id="options-label-{{ $loop->index }}"
                                                                value="{{ $option['label'] ?? '' }}"
                                                                name="options[{{ $loop->index }}][label]"
                                                                placeholder="Enter option" />
                                                            <input type="hidden"
                                                                name="options[{{ $loop->index }}][value]"
                                                                value="{{ $option['value'] ?? '' }}"
                                                                id="options-value-{{ $loop->index }}">
                                                            <span class="input-text-error"></span>
                                                        </div>
                                                        <button type="button"
                                                            class="text-red-500 mt-2 delete-meta absolute right-0 -top-7"
                                                            data-id="{{ $loop->index }}">
                                                            <i class="ph ph-trash"></i>
                                                        </button>
                                                    </div>
                                                @endforeach
                                            </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">
                                                @foreach ($question->correct_answers as $key => $answer)
                                                    <div class="flex items-center gap-2"
                                                        id="meta-row-{{ $loop->index }}">
                                                        <span class="text-sm">{{ $answer }}</span>
                                                        <input type="hidden"
                                                            name="correct_answers[{{ $loop->index }}]"
                                                            value="{{ $answer }}">
                                                        <button type="button" class="text-red-500 mt-2 delete-meta"
                                                            data-id="{{ $loop->index }}">
                                                            <i class="ph ph-trash"></i>
                                                        </button>
                                                    </div>
                                                @endforeach
                                            </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', $question->explanation_type))>
                                                                {{ $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="{{ $question->explanation_type == 'image' ? '' : 'hidden' }} input-group">
                                                        <x-admin::label for="question_explanation">
                                                            {{ __('Image') }}
                                                        </x-admin::label>
                                                        <x-admin::file-uploader id="icon"
                                                            value="{{ $question_lang['question_explanation'] }}"
                                                            name="question_explanation" />
                                                        <x-admin::input-error name="question_explanation" />
                                                    </div>
                                                    <div id="audio"
                                                        class="{{ $question->explanation_type == 'audio' ? '' : 'hidden' }} input-group">
                                                        <x-admin::label for="question_explanation">
                                                            {{ __('Audio') }}
                                                        </x-admin::label>
                                                        <x-admin::file-input name="question_explanation"
                                                            value="{{ $question_lang['question_explanation'] }}" />
                                                        <x-admin::input-error name="question_explanation" />
                                                    </div>
                                                    <div id="video"
                                                        class="{{ $question->explanation_type == 'video' ? '' : 'hidden' }} input-group">
                                                        <x-admin::label for="question_explanation">
                                                            {{ __('Video') }}
                                                        </x-admin::label>
                                                        <x-admin::file-input name="question_explanation"
                                                            value="{{ $question_lang['question_explanation'] }}" />
                                                        <x-admin::input-error name="question_explanation" />
                                                    </div>
                                                    <div id="text"
                                                        class="{{ $question->explanation_type == 'text' ? '' : 'hidden' }}">
                                                        <x-admin::textarea-group name="question_explanation"
                                                            value="{{ $question_lang['question_explanation'] }}"
                                                            label="Text" />
                                                    </div>
                                                </div>
                                            </div>
                                            @if ($question->explanation_type == 'video')
                                                <video height="200" width="200"
                                                    src="{{ $question_lang['question_explanation'] }}"
                                                    class="w-40 h-30"></video>
                                            @elseif ($question->explanation_type == 'audio')
                                                <audio height="200" width="200"
                                                    src="{{ $question_lang['question_explanation'] }}"
                                                    class="w-40 h-30"></audio>
                                            @endif
                                        </div>
                                        <x-admin::editor label="Hints" name="hints"
                                            value="{{ $question_lang['hints'] }}" placeholder="Enter Hints"
                                            id="hints" />
                                        <x-admin::editor label="Answer Explanation" name="answer_explanation"
                                            value="{{ $question_lang['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.update', ['contest' => $contest, 'question' => $question]) }}"
                                method="POST" class="form-submit-add">
                                @csrf
                                @method('PUT')
                                <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"
                                        value="{{ $question_lang['question_text'] ?? '' }}" label="Question" />
                                    @if ($question->question_explanation == \App\Enums\QuestionExplanationTypeEnum::TEXT)
                                        <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"
                                                value="{{ $question_lang['question_explanation'] ?? '' }}"
                                                label="Text" />
                                        </div>
                                    @endif
                                    <x-admin::editor label="Hints" name="hints"
                                        value="{{ $question_lang['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>
