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

defineProps({
    pastures: { type: Array, default: () => [] },
});

const createForm = useForm({
    name: '',
    code: '',
    notes: '',
    sort_order: 0,
});

const editingId = ref(null);
const editForm = useForm({
    name: '',
    code: '',
    notes: '',
    sort_order: 0,
    active: true,
});

const create = () =>
    createForm.post(route('admin.ranch.pastures.store'), {
        onSuccess: () => createForm.reset(),
    });

const startEdit = (p) => {
    editingId.value = p.id;
    editForm.name = p.name;
    editForm.code = p.code ?? '';
    editForm.notes = p.notes ?? '';
    editForm.sort_order = p.sort_order ?? 0;
    editForm.active = !!p.active;
};

const saveEdit = (id) => {
    editForm.put(route('admin.ranch.pastures.update', id), {
        onSuccess: () => (editingId.value = null),
    });
};

const toggleActive = (p) => {
    router.put(route('admin.ranch.pastures.update', p.id), { active: !p.active });
};
</script>

<template>
    <Head title="Potreros — Control Ganadero" />

    <AuthenticatedLayout>
        <template #header><h3 class="mb-0">Potreros / corrales</h3></template>
        <template #breadcrumb>
            <li class="breadcrumb-item"><Link :href="route('dashboard')">Inicio</Link></li>
            <li class="breadcrumb-item active">Potreros</li>
        </template>

        <div class="card mb-3">
            <div class="card-header"><h3 class="card-title">Nuevo potrero</h3></div>
            <form @submit.prevent="create">
                <div class="card-body row g-3">
                    <div class="col-md-4">
                        <input v-model="createForm.name" class="form-control" placeholder="Nombre" required />
                    </div>
                    <div class="col-md-2">
                        <input v-model="createForm.code" class="form-control" placeholder="Código" />
                    </div>
                    <div class="col-md-4">
                        <input v-model="createForm.notes" class="form-control" placeholder="Notas" />
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-success w-100" :disabled="createForm.processing">Crear</button>
                    </div>
                </div>
            </form>
        </div>

        <div class="card">
            <div class="card-body table-responsive p-0">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th>Nombre</th>
                            <th>Código</th>
                            <th>Activos</th>
                            <th>Estado</th>
                            <th class="text-end">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="p in pastures" :key="p.id">
                            <td>
                                <template v-if="editingId === p.id">
                                    <input v-model="editForm.name" class="form-control form-control-sm" />
                                </template>
                                <template v-else>{{ p.name }}</template>
                            </td>
                            <td>{{ p.code || '—' }}</td>
                            <td>{{ p.active_cattle_count ?? 0 }}</td>
                            <td>
                                <span class="badge" :class="p.active ? 'text-bg-success' : 'text-bg-secondary'">
                                    {{ p.active ? 'Activo' : 'Inactivo' }}
                                </span>
                            </td>
                            <td class="text-end">
                                <template v-if="editingId === p.id">
                                    <button type="button" class="btn btn-sm btn-success me-1" @click="saveEdit(p.id)">Guardar</button>
                                    <button type="button" class="btn btn-sm btn-secondary" @click="editingId = null">Cancelar</button>
                                </template>
                                <template v-else>
                                    <button type="button" class="btn btn-sm btn-outline-primary me-1" @click="startEdit(p)">
                                        <i class="fa-solid fa-pen"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" @click="toggleActive(p)">
                                        {{ p.active ? 'Desactivar' : 'Activar' }}
                                    </button>
                                </template>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
