<script setup>
import { ref } from 'vue';
import { useForm } from '@inertiajs/vue3';

const showModal = ref(false);

const form = useForm({
    queue_number: '',
    friendly_name: '',
});

const openModal = () => {
    showModal.value = true;
    // Pequeno delay para garantir que o elemento foi "teleportado" antes de focar
    setTimeout(() => document.getElementById('queue_number')?.focus(), 100);
};

const closeModal = () => {
    showModal.value = false;
    form.reset();
    form.clearErrors();
};

const submitQueueInfo = () => {
    form.post(route('queues.store'), {
        preserveScroll: true,
        onSuccess: () => closeModal(),
    });
};
</script>

<template>
    <button 
        type="button"
        class="block w-full px-4 py-2 text-start text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out"
        @click="openModal"
    >
        Configurar Filas
    </button>

    <Teleport to="body">
        <div v-if="showModal" class="fixed inset-0 z-50 overflow-y-auto px-4 py-6 sm:px-0 flex items-center justify-center">
            
            <div class="fixed inset-0 transform transition-all" @click="closeModal">
                <div class="absolute inset-0 bg-gray-900 opacity-75"></div>
            </div>

            <div class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:max-w-lg sm:mx-auto z-50">
                
                <div class="px-6 py-4 border-b border-gray-200">
                    <h3 class="text-lg font-medium text-gray-900">
                        Vincular Fila ao Nome
                    </h3>
                </div>

                <div class="px-6 py-4">
                    <div class="grid grid-cols-1 gap-4">
                        <div>
                            <label for="queue_number" class="block font-medium text-sm text-gray-700">ID da Fila (Asterisk)</label>
                            <input 
                                id="queue_number"
                                v-model="form.queue_number"
                                type="text" 
                                placeholder="Ex: 900"
                                class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 block w-full"
                            />
                            <div v-if="form.errors.queue_number" class="text-red-600 text-sm mt-1">{{ form.errors.queue_number }}</div>
                        </div>

                        <div>
                            <label for="friendly_name" class="block font-medium text-sm text-gray-700">Nome de Exibição</label>
                            <input 
                                id="friendly_name"
                                v-model="form.friendly_name"
                                type="text" 
                                placeholder="Ex: Comercial"
                                class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm mt-1 block w-full"
                                @keyup.enter="submitQueueInfo"
                            />
                            <div v-if="form.errors.friendly_name" class="text-red-600 text-sm mt-1">{{ form.errors.friendly_name }}</div>
                        </div>
                    </div>
                </div>

                <div class="px-6 py-4 bg-gray-100 text-right flex justify-end gap-2">
                    <button 
                        type="button"
                        class="inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 transition ease-in-out duration-150"
                        @click="closeModal"
                    >
                        Cancelar
                    </button>

                    <button 
                        type="button"
                        class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 transition ease-in-out duration-150"
                        :class="{ 'opacity-25': form.processing }"
                        :disabled="form.processing"
                        @click="submitQueueInfo"
                    >
                        Salvar
                    </button>
                </div>
            </div>
        </div>
    </Teleport>
</template>