<x-admin-app-layout>
    <div class="white-box">
        <x-admin::page-header title="{{ __('Serialized Questions Order') }}" :buttons="$buttons" />
        <form action="{{ route('admin.quiz.questions.update-order', $quiz) }}" method="POST" class="form-submit-add">
            @csrf
            @method('PUT')
            <div x-data="metaAdd()" x-init="selectedItems = {{ json_encode($questions) }};
            questionLevel = {{ json_encode($questionLevel) }}" class="n10-box mt-4">
                <ul class="flex flex-col gap-3 h-full p-1 "
                    :class="isDragging ? 'bg-primary/10 border-primary border-dashed' : 'border-transparent'"
                    @dragover="allowDrop($event)" @drop="handleDrop($event)">
                    <template x-for="(item, index) in selectedItems" :key="index">
                        <li draggable="true" @dragstart="startDrag($event, 'selected', index)" @dragend="endDrag"
                            @dragover="allowDrop($event)" @drop="handleDrop($event, index)"
                            class="dd-item flex justify-between items-center bg-neutral-0 dark:bg-neutral-904"
                            :key="index">
                            <div
                                class="flex items-center justify-between w-full py-3 px-4 border border-neutral-30 dark:border-neutral-500 rounded-md">
                                <div class="flex items-center gap-3 dd-handle ">
                                    <button class="f-center text-xl cursor-pointer">
                                        <i class="ph ph-dots-six-vertical"></i>
                                    </button>
                                    <span class="capitalize" x-text="item.question_input_type == 'text' ? item.translation.question_text : item.question_input_type"></span>
                                </div>
                                <input type="hidden" :value="item.id" :name="`questions[${index}][id]`">
                                <input type="hidden" :value="index+1" :name="`questions[${index}][order]`">
                                <div class="flex justify-end items-center">
                                    <a
                                        :href="`/admin/quizzes/${item.quiz.id}/questions/${item.id}/edit${questionLevel ? `?level=${questionLevel.level.slug}` : ''}`">
                                        <i class="ph ph-pencil text-lg"></i>
                                    </a>
                                    <button type="button" class="delete-item-action"
                                        :data-action="`/admin/quizzes/${item.quiz.id}/questions/${item.id}${questionLevel ? `?level=${questionLevel?.level?.slug}` : ''}`">
                                        <i class="ph ph-trash text-lg"></i>
                                    </button>
                                </div>
                            </div>
                        </li>
                    </template>
                </ul>
            </div>
            <div class="flex items-center justify-end mt-4">
                <x-admin::primary-button type="submit">
                    {{ __('Save') }}
                </x-admin::primary-button>
            </div>
        </form>
    </div>
    <x-admin::modal modalId="quiz_import_modal" title="Bulk Import">
        <div class="flex flex-wrap justify-between items-center gap-3 py-3 mb-6 border-b border-gray-200">
            <!-- Excel Template -->
            <a href="{{ url('/assets/admin/help-questions.xlsx') }}" target="_blank" rel="noopener noreferrer"
                class="group flex items-center gap-3 px-4 py-2 rounded-lg border border-primary text-primary font-medium
              transition-all duration-300 hover:bg-primary hover:text-white shadow-sm hover:shadow-md">
                <i class="ph ph-file-spreadsheet text-xl group-hover:scale-110 transition-transform"></i>
                <span>{{ __('Excel Template') }}</span>
            </a>

            <!-- Import Guide -->
            <a href="{{ url('/assets/admin/Quiz_Import_Guide.pdf') }}" target="_blank" rel="noopener noreferrer"
                class="group flex items-center gap-3 px-4 py-2 rounded-lg border border-yellow-500 text-yellow-500 font-medium
              transition-all duration-300 hover:bg-yellow-500 hover:text-white shadow-sm hover:shadow-md">
                <i class="ph ph-file-pdf text-xl group-hover:scale-110 transition-transform"></i>
                <span>{{ __('Import Guide') }}</span>
            </a>
        </div>

        <form class="form-submit-add" method="POST">
            @csrf
            <x-admin::file-input name="file" label="File" />

            <div class="flex items-center justify-end mt-4">
                <x-admin::primary-button type="submit">
                    {{ __('Save') }}
                </x-admin::primary-button>
            </div>
        </form>
    </x-admin::modal>
    @push('scripts')
        @vite('resources/admin/js/quiz/question-list.js')
    @endpush
</x-admin-app-layout>
