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

const props = defineProps({
    services: Array,
    fournisseurs: Array,
    statuts: Object,
})

const form = useForm({
    titre: '',
    description: '',
    fournisseur_id: '',
    service_id: props.services.length === 1 ? props.services[0].id : '',
    date_debut: '',
    date_echeance: '',
    statut: 'actif',
    montant: '',
    preavis_jours: '',
})

function submit() {
    form.post(route('contrats.store'))
}
</script>

<template>
    <Head title="Nouveau contrat" />
    <AuthenticatedLayout>
        <template #header>
            <div class="flex items-center gap-3">
                <Link :href="route('contrats.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">Nouveau contrat</h1>
            </div>
        </template>

        <form @submit.prevent="submit" class="mx-auto max-w-4xl space-y-6">
            <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
                <h2 class="mb-5 flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
                    Informations Générales
                </h2>
                
                <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">Titre *</label>
                        <input v-model="form.titre" type="text" required
                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none" />
                        <div v-if="form.errors.titre" class="mt-1 text-sm text-red-600">{{ form.errors.titre }}</div>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">Fournisseur *</label>
                        <select v-model="form.fournisseur_id" required
                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none">
                            <option value="" disabled>Sélectionner un fournisseur...</option>
                            <option v-for="f in fournisseurs" :key="f.id" :value="f.id">{{ f.nom }}</option>
                        </select>
                        <div v-if="form.errors.fournisseur_id" class="mt-1 text-sm text-red-600">{{ form.errors.fournisseur_id }}</div>
                    </div>

                    <div v-if="$page.props.auth.user?.roles?.some(r => r.name === 'admin')">
                        <label class="mb-1 block text-sm font-medium text-gray-700">Service *</label>
                        <select v-model="form.service_id" required
                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none">
                            <option value="">Sélectionner un service...</option>
                            <option v-for="s in services" :key="s.id" :value="s.id">{{ s.nom }}</option>
                        </select>
                        <div v-if="form.errors.service_id" class="mt-1 text-sm text-red-600">{{ form.errors.service_id }}</div>
                    </div>
                    
                    <div v-else>
                        <label class="mb-1 block text-sm font-medium text-gray-700">Service</label>
                        <input type="text" disabled :value="services[0]?.nom"
                            class="w-full rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-500" />
                    </div>

                    <div class="sm:col-span-2">
                        <label class="mb-1 block text-sm font-medium text-gray-700">Description</label>
                        <textarea v-model="form.description" rows="3"
                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none"></textarea>
                        <div v-if="form.errors.description" class="mt-1 text-sm text-red-600">{{ form.errors.description }}</div>
                    </div>
                </div>
            </div>

            <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
                <h2 class="mb-5 flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-gray-500">
                    Détails du Contrat
                </h2>
                
                <div class="grid gap-6 sm:grid-cols-2">
                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">Statut *</label>
                        <select v-model="form.statut" required
                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none">
                            <option v-for="(lbl, val) in statuts" :key="val" :value="val">{{ lbl }}</option>
                        </select>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">Montant</label>
                        <div class="relative">
                            <input v-model="form.montant" type="number" step="0.01" min="0" placeholder="0.00"
                                class="w-full rounded-lg border border-gray-300 pl-3 pr-8 py-2 text-sm focus:border-blue-500 focus:outline-none" />
                            <span class="absolute right-3 top-2 text-gray-500 text-sm">€</span>
                        </div>
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">Date de début</label>
                        <input v-model="form.date_debut" type="date"
                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none" />
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700">Date d'échéance *</label>
                        <input v-model="form.date_echeance" type="date" required
                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none" />
                    </div>

                    <div>
                        <label class="mb-1 block text-sm font-medium text-gray-700" title="Nombre de jours avant l'échéance pour recevoir une alerte relative à la dénonciation.">
                            Préavis (en jours)
                        </label>
                        <input v-model="form.preavis_jours" type="number" min="0"
                            class="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none" />
                        <p class="text-xs text-gray-500 mt-1">Ex: 90 jours pour un préavis de 3 mois.</p>
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="flex items-center justify-end gap-3">
                <Link :href="route('contrats.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-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors disabled:opacity-50">
                    {{ form.processing ? 'Création...' : 'Créer le contrat' }}
                </button>
            </div>
        </form>
    </AuthenticatedLayout>
</template>
