<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import { Head, Link, useForm } from '@inertiajs/vue3'

const props = defineProps({
    domaine: Object,
})

const form = useForm({
    nom: props.domaine.nom ?? '',
    hebergeur: props.domaine.hebergeur ?? '',
    prestataire: props.domaine.prestataire ?? '',
    date_echeance: props.domaine.date_echeance ?? '',
})

function submit() {
    form.put(route('domaines.update', props.domaine.id))
}
</script>

<template>
    <Head title="Modifier domaine" />
    <AuthenticatedLayout>
        <template #header>
            <div class="flex items-center gap-3">
                <Link :href="route('domaines.index')" class="text-gray-400 hover:text-gray-600 transition-colors">
                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </Link>
                <h1 class="text-xl font-semibold text-gray-900">Modifier : {{ domaine.nom }}</h1>
            </div>
        </template>

        <form @submit.prevent="submit" class="mx-auto max-w-3xl space-y-6">
            <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
                <div class="grid gap-6 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <label class="mb-1 block text-sm font-medium text-gray-700">Nom de domaine *</label>
                        <input v-model="form.nom" type="text" required placeholder="ex: mon-site.com"
                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none" />
                        <div v-if="form.errors.nom" class="mt-1 text-sm text-red-600">{{ form.errors.nom }}</div>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">Hébergeur (Registrar)</label>
                        <input v-model="form.hebergeur" type="text" placeholder="ex: OVH, Gandi, Ionos..."
                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none" />
                        <div v-if="form.errors.hebergeur" class="mt-1 text-sm text-red-600">{{ form.errors.hebergeur }}</div>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">Date d'échéance</label>
                        <div class="flex items-center gap-2">
                            <input v-model="form.date_echeance" type="date"
                                class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none" />
                        </div>
                        <div v-if="form.errors.date_echeance" class="mt-1 text-sm text-red-600">{{ form.errors.date_echeance }}</div>
                    </div>

                    <div class="sm:col-span-2">
                        <label class="mb-1 block text-sm font-medium text-gray-700">Prestataire</label>
                        <textarea v-model="form.prestataire" rows="2" placeholder="Nom ou détails du prestataire gérant ce nom de domaine, si applicable."
                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:outline-none"></textarea>
                        <div v-if="form.errors.prestataire" class="mt-1 text-sm text-red-600">{{ form.errors.prestataire }}</div>
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end gap-3">
                <Link :href="route('domaines.index')"
                    class="rounded-lg px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 transition-colors">
                    Annuler
                </Link>
                <button type="submit" :disabled="form.processing"
                    class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 transition-colors disabled:opacity-50">
                    {{ form.processing ? 'Enregistrement...' : 'Enregistrer' }}
                </button>
            </div>
        </form>
    </AuthenticatedLayout>
</template>
