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

const props = defineProps({
    commande:     Object,
    services:     Array,
    fournisseurs: Array,
    categories:   Array,
    articles:     Array,
})

const form = useForm({
    service_id:            props.commande.service_id,
    fournisseur_id:        props.commande.fournisseur_id ?? '',
    objet:                 props.commande.objet,
    description:           props.commande.description ?? '',
    justification:         props.commande.justification ?? '',
    priorite:              props.commande.priorite,
    reference_fournisseur: props.commande.reference_fournisseur ?? '',
    imputation_budgetaire: props.commande.imputation_budgetaire ?? '',
    date_demande:          props.commande.date_demande,
    date_souhaitee:        props.commande.date_souhaitee ?? '',
    date_livraison_prevue: props.commande.date_livraison_prevue ?? '',
    notes:                 props.commande.notes ?? '',
    notes_fournisseur:     props.commande.notes_fournisseur ?? '',
    lignes:                props.commande.lignes ?? [],
})

function submit() {
    form.put(route('commandes.update', props.commande.id))
}

const showReceived = ['commandee','partiellement_recue','recue_complete'].includes(props.commande.statut)
</script>

<template>
    <Head :title="`Modifier — ${commande.numero_commande}`" />
    <AuthenticatedLayout>
        <template #header>
            <div class="flex items-center gap-3">
                <Link :href="route('commandes.show', commande.id)" class="text-gray-400 hover:text-gray-600">
                    <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 {{ commande.numero_commande }}</h1>
                <StatutBadge :statut="commande.statut" />
            </div>
        </template>

        <form @submit.prevent="submit" class="space-y-6 max-w-5xl">
            <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
                <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Informations générales</h2>
                <div class="grid gap-4 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <label class="block text-sm font-medium text-gray-700">Objet <span class="text-red-500">*</span></label>
                        <input v-model="form.objet" type="text" required
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
                        <p v-if="form.errors.objet" class="mt-1 text-xs text-red-600">{{ form.errors.objet }}</p>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Service <span class="text-red-500">*</span></label>
                        <select v-model="form.service_id" required
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none">
                            <option v-for="s in services" :key="s.id" :value="s.id">{{ s.nom }}</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Fournisseur</label>
                        <select v-model="form.fournisseur_id"
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none">
                            <option value="">— Non défini —</option>
                            <option v-for="f in fournisseurs" :key="f.id" :value="f.id">{{ f.nom }}</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Priorité</label>
                        <select v-model="form.priorite"
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none">
                            <option value="normale">Normale</option>
                            <option value="haute">Haute</option>
                            <option value="urgente">Urgente</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Date de demande</label>
                        <input v-model="form.date_demande" type="date"
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Date souhaitée</label>
                        <input v-model="form.date_souhaitee" type="date"
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Référence fournisseur</label>
                        <input v-model="form.reference_fournisseur" type="text"
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Imputation budgétaire</label>
                        <input v-model="form.imputation_budgetaire" type="text"
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
                    </div>
                    <div class="sm:col-span-2">
                        <label class="block text-sm font-medium text-gray-700">Description</label>
                        <textarea v-model="form.description" rows="2"
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
                    </div>
                    <div class="sm:col-span-2">
                        <label class="block text-sm font-medium text-gray-700">Justification</label>
                        <textarea v-model="form.justification" rows="2"
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Notes internes</label>
                        <textarea v-model="form.notes" rows="2"
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700">Notes fournisseur</label>
                        <textarea v-model="form.notes_fournisseur" rows="2"
                            class="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm shadow-sm focus:border-blue-500 focus:outline-none" />
                    </div>
                </div>
            </div>

            <div class="rounded-xl bg-white p-6 shadow-sm border border-gray-100">
                <h2 class="mb-4 text-sm font-semibold uppercase tracking-wide text-gray-500">Lignes de commande</h2>
                <LignesCommandeForm v-model="form.lignes" :categories="categories" :articles="articles" :show-received="showReceived" />
            </div>

            <div class="flex justify-end gap-3">
                <Link :href="route('commandes.show', commande.id)"
                    class="rounded-lg border border-gray-300 px-5 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
                    Annuler
                </Link>
                <button type="submit" :disabled="form.processing"
                    class="rounded-lg bg-blue-600 px-5 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50 transition-colors">
                    {{ form.processing ? 'Enregistrement...' : 'Enregistrer les modifications' }}
                </button>
            </div>
        </form>
    </AuthenticatedLayout>
</template>
