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

const props = defineProps({
    cattle: { type: Object, default: null },
    catalog: { type: Object, required: true },
});

const isEdit = computed(() => !!props.cattle?.id);

const form = useForm({
    ear_tag: props.cattle?.ear_tag ?? '',
    ear_tag_type: props.cattle?.ear_tag_type ?? 'internal',
    breed: props.cattle?.breed ?? '',
    gender: props.cattle?.gender ?? 'female',
    birth_date: props.cattle?.birth_date?.substring?.(0, 10) ?? props.cattle?.birth_date ?? '',
    mother_id: props.cattle?.mother_id ?? '',
    pasture_id: props.cattle?.pasture_id ?? '',
    pasture_location: props.cattle?.pasture_location ?? '',
    notes: props.cattle?.notes ?? '',
    target_min_gdp_kg_per_day: props.cattle?.target_min_gdp_kg_per_day ?? '',
});

const submit = () => {
    if (isEdit.value) {
        form.put(route('admin.ranch.cattle.update', props.cattle.id));
    } else {
        form.post(route('admin.ranch.cattle.store'));
    }
};
</script>

<template>
    <Head :title="isEdit ? 'Editar animal' : 'Nuevo animal'" />

    <AuthenticatedLayout>
        <template #header>
            <h3 class="mb-0">{{ isEdit ? 'Editar animal' : 'Nuevo animal' }}</h3>
        </template>
        <template #breadcrumb>
            <li class="breadcrumb-item"><Link :href="route('dashboard')">Inicio</Link></li>
            <li class="breadcrumb-item"><Link :href="route('admin.ranch.cattle.index')">Animales</Link></li>
            <li class="breadcrumb-item active">{{ isEdit ? 'Editar' : 'Nuevo' }}</li>
        </template>

        <div class="card card-success">
            <div class="card-header"><h3 class="card-title">Datos del animal</h3></div>
            <form @submit.prevent="submit">
                <div class="card-body">
                    <div class="row g-3">
                        <div v-if="!isEdit" class="col-md-4">
                            <label class="form-label">Arete</label>
                            <input v-model="form.ear_tag" class="form-control" :class="{ 'is-invalid': form.errors.ear_tag }" required />
                            <div v-if="form.errors.ear_tag" class="invalid-feedback">{{ form.errors.ear_tag }}</div>
                        </div>
                        <div v-if="!isEdit" class="col-md-4">
                            <label class="form-label">Tipo de arete</label>
                            <select v-model="form.ear_tag_type" class="form-select">
                                <option v-for="(label, key) in catalog.ear_tag_types" :key="key" :value="key">{{ label }}</option>
                            </select>
                        </div>
                        <div v-if="!isEdit" class="col-md-4">
                            <label class="form-label">Sexo</label>
                            <select v-model="form.gender" class="form-select">
                                <option v-for="(label, key) in catalog.genders" :key="key" :value="key">{{ label }}</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Raza</label>
                            <input v-model="form.breed" class="form-control" />
                        </div>
                        <div v-if="!isEdit" class="col-md-4">
                            <label class="form-label">Fecha de nacimiento</label>
                            <input v-model="form.birth_date" type="date" class="form-control" />
                        </div>
                        <div v-if="!isEdit" class="col-md-4">
                            <label class="form-label">Madre</label>
                            <select v-model="form.mother_id" class="form-select">
                                <option value="">—</option>
                                <option v-for="m in catalog.mothers" :key="m.id" :value="m.id">{{ m.ear_tag }}</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Potrero</label>
                            <select v-model="form.pasture_id" class="form-select">
                                <option value="">—</option>
                                <option v-for="p in catalog.pastures" :key="p.id" :value="p.id">{{ p.name }}</option>
                            </select>
                        </div>
                        <div v-if="isEdit" class="col-md-4">
                            <label class="form-label">GDP mínimo (kg/día)</label>
                            <input v-model="form.target_min_gdp_kg_per_day" type="number" step="0.01" class="form-control" />
                        </div>
                        <div class="col-12">
                            <label class="form-label">Notas</label>
                            <textarea v-model="form.notes" class="form-control" rows="3" />
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-success" :disabled="form.processing">Guardar</button>
                    <Link :href="route('admin.ranch.cattle.index')" class="btn btn-secondary ms-2">Cancelar</Link>
                </div>
            </form>
        </div>
    </AuthenticatedLayout>
</template>
