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

const props = defineProps({
    cattleOptions: { type: Array, default: () => [] },
    prefillCattleId: { type: Number, default: null },
});

const form = useForm({
    cattle_id: props.prefillCattleId ?? '',
    weight_kg: '',
    weighed_at: new Date().toISOString().slice(0, 10),
    notes: '',
});

const submit = () => form.post(route('admin.ranch.weights.store'));
</script>

<template>
    <Head title="Registrar pesaje" />

    <AuthenticatedLayout>
        <template #header><h3 class="mb-0">Registrar pesaje</h3></template>
        <template #breadcrumb>
            <li class="breadcrumb-item"><Link :href="route('dashboard')">Inicio</Link></li>
            <li class="breadcrumb-item"><Link :href="route('admin.ranch.weights.index')">Pesajes</Link></li>
            <li class="breadcrumb-item active">Nuevo</li>
        </template>

        <div class="card card-success">
            <form @submit.prevent="submit">
                <div class="card-body row g-3">
                    <div class="col-md-6">
                        <label class="form-label">Animal</label>
                        <select v-model="form.cattle_id" class="form-select" required>
                            <option value="">Seleccione...</option>
                            <option v-for="c in cattleOptions" :key="c.id" :value="c.id">
                                {{ c.ear_tag }} {{ c.breed ? `— ${c.breed}` : '' }}
                            </option>
                        </select>
                        <div v-if="form.errors.cattle_id" class="text-danger small">{{ form.errors.cattle_id }}</div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Peso (kg)</label>
                        <input v-model="form.weight_kg" type="number" step="0.01" class="form-control" required />
                    </div>
                    <div class="col-md-3">
                        <label class="form-label">Fecha</label>
                        <input v-model="form.weighed_at" type="date" class="form-control" required />
                    </div>
                    <div class="col-12">
                        <label class="form-label">Notas</label>
                        <textarea v-model="form.notes" class="form-control" rows="2" />
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-success" :disabled="form.processing">Guardar</button>
                    <Link :href="route('admin.ranch.weights.index')" class="btn btn-secondary ms-2">Cancelar</Link>
                </div>
            </form>
        </div>
    </AuthenticatedLayout>
</template>
