<template>
    <div class="py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center">
                <h1 class="text-2xl font-semibold text-gray-900">
                    {{ customer ? 'Editar Cliente' : 'Nuevo Cliente' }}
                </h1>
                <Link :href="route('customers.index')"
                    class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                Volver
                </Link>
            </div>

            <form @submit.prevent="submit" class="mt-8 space-y-6">
                <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
                    <div class="grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                        <div class="sm:col-span-3">
                            <label for="name" class="block text-sm font-medium text-gray-700">Nombre</label>
                            <div class="mt-1">
                                <input type="text" name="name" id="name" v-model="form.name"
                                    class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                <div v-if="errors.name" class="mt-2 text-sm text-red-600">{{ errors.name }}</div>
                            </div>
                        </div>

                        <div class="sm:col-span-3">
                            <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                            <div class="mt-1">
                                <input type="email" name="email" id="email" v-model="form.email"
                                    class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                <div v-if="errors.email" class="mt-2 text-sm text-red-600">{{ errors.email }}</div>
                            </div>
                        </div>

                        <div class="sm:col-span-3">
                            <label for="phone" class="block text-sm font-medium text-gray-700">Teléfono</label>
                            <div class="mt-1">
                                <input type="text" name="phone" id="phone" v-model="form.phone"
                                    class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                <div v-if="errors.phone" class="mt-2 text-sm text-red-600">{{ errors.phone }}</div>
                            </div>
                        </div>

                        <div class="sm:col-span-3">
                            <label for="city" class="block text-sm font-medium text-gray-700">Ciudad</label>
                            <div class="mt-1">
                                <input type="text" name="city" id="city" v-model="form.city"
                                    class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                <div v-if="errors.city" class="mt-2 text-sm text-red-600">{{ errors.city }}</div>
                            </div>
                        </div>

                        <div class="sm:col-span-3">
                            <label for="country" class="block text-sm font-medium text-gray-700">País</label>
                            <div class="mt-1">
                                <input type="text" name="country" id="country" v-model="form.country"
                                    class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                <div v-if="errors.country" class="mt-2 text-sm text-red-600">{{ errors.country }}</div>
                            </div>
                        </div>

                        <div class="sm:col-span-6">
                            <label for="address" class="block text-sm font-medium text-gray-700">Dirección</label>
                            <div class="mt-1">
                                <input type="text" name="address" id="address" v-model="form.address"
                                    class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
                                <div v-if="errors.address" class="mt-2 text-sm text-red-600">{{ errors.address }}</div>
                            </div>
                        </div>

                        <div class="sm:col-span-6">
                            <label for="notes" class="block text-sm font-medium text-gray-700">Notas</label>
                            <div class="mt-1">
                                <textarea name="notes" id="notes" rows="3" v-model="form.notes"
                                    class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"></textarea>
                                <div v-if="errors.notes" class="mt-2 text-sm text-red-600">{{ errors.notes }}</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="submit"
                        class="ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        {{ customer ? 'Actualizar' : 'Guardar' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'
import { router } from '@inertiajs/vue3'
import { onMounted, reactive } from 'vue'

const props = defineProps({
    customer: {
        type: Object,
        default: null
    },
    errors: {
        type: Object,
        default: () => ({})
    }
})

const form = reactive({
    name: props.customer?.name ?? '',
    email: props.customer?.email ?? '',
    phone: props.customer?.phone ?? '',
    address: props.customer?.address ?? '',
    city: props.customer?.city ?? '',
    country: props.customer?.country ?? '',
    notes: props.customer?.notes ?? ''
})

const submit = () => {
    if (props.customer) {
        router.put(route('customers.update', props.customer.id), form)
    } else {
        router.post(route('customers.store'), form)
    }
}

onMounted(() => {
    console.log('Componente Form montado', { props })
})
</script>