{{-- Create FAQ Modal --}}
<div
    x-show="showCreate"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-50 flex animate-fade-in items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
    x-cloak
    @keydown.escape.window="showCreate = false"
    role="dialog"
    aria-modal="true"
    aria-labelledby="create-faq-title">
    <div
        @click.outside="showCreate = false"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="flex max-h-[min(90dvh,calc(100dvh-2rem))] w-full max-w-2xl flex-col overflow-hidden animate-slide-up rounded-2xl border border-border bg-card text-card-foreground shadow-2xl">
        <div class="flex items-center justify-between border-b border-border px-6 py-4">
            <h3 id="create-faq-title" class="text-base font-semibold text-surface-900 dark:text-surface-100">
                {{ __('pages/common.add_new', ['resource' => __('pages/admin/faq.heading.singular')]) }}
            </h3>
            <button
                @click="showCreate = false"
                type="button"
                class="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
                aria-label="Close">
                <x-heroicon-o-x-mark class="w-5 h-5" />
            </button>
        </div>

        <form id="create-faq-form" @submit.prevent="createFaq()" class="flex min-h-0 flex-1 flex-col">
            <div class="min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain px-6 py-5 [scrollbar-gutter:stable]">
                <div>
                    <x-forms.label for="create_question" required>{{ __('pages/admin/faq.form.question') }}</x-forms.label>
                    <x-forms.input
                        id="create_question"
                        name="question"
                        type="text"
                        x-model="form.question"
                        placeholder="{{ __('pages/admin/faq.form.question_placeholder') }}"
                        required="true"
                        autocomplete="off" />
                </div>

                <div>
                    <x-forms.label for="create_answer" required>{{ __('pages/admin/faq.form.answer') }}</x-forms.label>
                    <x-forms.tinymce
                        id="create_answer"
                        name="answer"
                        x-model="form.answer"
                        :features="[
                            'text-format',
                            'alignment',
                            'lists',
                            'indent',
                        ]" />
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <x-forms.label for="create_status">{{ __('pages/admin/faq.form.status') }}</x-forms.label>
                        <x-forms.select id="create_status" name="status" x-model="form.status">
                            <option value="active">{{ __('pages/common.status.active') }}</option>
                            <option value="inactive">{{ __('pages/common.status.inactive') }}</option>
                        </x-forms.select>
                    </div>

                    <div>
                        <x-forms.label for="create_order">{{ __('pages/admin/faq.form.order') }}</x-forms.label>
                        <x-forms.input
                            id="create_order"
                            name="order"
                            type="number"
                            min="0"
                            maxlength="3"
                            x-model="form.order"
                            placeholder="{{ __('pages/admin/faq.form.order_placeholder') }}"
                            @input="$event.target.value = $event.target.value.replace(/[^0-9]/g, '').slice(0, 3)" />
                    </div>
                </div>

            </div>

            <div class="flex shrink-0 items-center justify-end gap-3 border-t border-border bg-card px-6 py-4">
                <x-buttons.primary type="button" @click="createFaq()" x-bind:disabled="createSubmitting">
                    <x-heroicon-o-arrow-path class="w-4 h-4 animate-spin" x-show="createSubmitting" />
                    <span x-text="createSubmitting ? '{{ __('buttons.saving') }}' : '{{ __('buttons.save') }}'"></span>
                </x-buttons.primary>
                <x-buttons.secondary @click="showCreate = false">{{ __('buttons.cancel') }}</x-buttons.secondary>
            </div>
        </form>
    </div>
</div>