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

const props = defineProps({
    cattle: { type: Object, required: true },
    filters: { type: Object, default: () => ({}) },
    statuses: { type: Object, default: () => ({}) },
});

const q = ref(props.filters.q ?? '');
const status = ref(props.filters.status ?? 'active');

watch([q, status], () => {
    router.get(
        route('admin.ranch.cattle.index'),
        { q: q.value || undefined, status: status.value || undefined },
        { preserveState: true, replace: true },
    );
});
</script>

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

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

        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Inventario</h3>
                <div class="card-tools d-flex gap-2">
                    <input v-model="q" type="search" class="form-control form-control-sm" placeholder="Buscar arete..." style="width: 180px" />
                    <select v-model="status" class="form-select form-select-sm" style="width: 140px">
                        <option value="active">Activos</option>
                        <option v-for="(label, key) in statuses" :key="key" :value="key">{{ label }}</option>
                        <option value="all">Todos</option>
                    </select>
                    <Link :href="route('admin.ranch.cattle.create')" class="btn btn-sm btn-success">
                        <i class="fa-solid fa-plus me-1"></i> Nuevo
                    </Link>
                </div>
            </div>
            <div class="card-body table-responsive p-0">
                <table class="table table-hover text-nowrap mb-0">
                    <thead>
                        <tr>
                            <th>Arete</th>
                            <th>Raza</th>
                            <th>Sexo</th>
                            <th>Potrero</th>
                            <th>Estado</th>
                            <th class="text-end">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in cattle.data" :key="item.id">
                            <td><strong>{{ item.ear_tag }}</strong></td>
                            <td>{{ item.breed || '—' }}</td>
                            <td>{{ item.gender === 'female' ? 'Hembra' : 'Macho' }}</td>
                            <td>{{ item.pasture?.name || item.pasture_location || '—' }}</td>
                            <td>
                                <span class="badge" :class="item.status === 'active' ? 'text-bg-success' : 'text-bg-secondary'">
                                    {{ statuses[item.status] || item.status }}
                                </span>
                            </td>
                            <td class="text-end">
                                <Link :href="route('admin.ranch.cattle.show', item.id)" class="btn btn-outline-primary btn-sm me-1">
                                    <i class="fa-solid fa-eye"></i>
                                </Link>
                                <Link
                                    v-if="item.status === 'active'"
                                    :href="route('admin.ranch.cattle.edit', item.id)"
                                    class="btn btn-outline-secondary btn-sm"
                                >
                                    <i class="fa-solid fa-pen"></i>
                                </Link>
                            </td>
                        </tr>
                        <tr v-if="!cattle.data?.length">
                            <td colspan="6" class="text-center text-muted py-4">Sin animales</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div v-if="cattle.links?.length > 3" class="card-footer">
                <nav>
                    <ul class="pagination pagination-sm mb-0">
                        <li v-for="(link, i) in cattle.links" :key="i" class="page-item" :class="{ active: link.active, disabled: !link.url }">
                            <Link v-if="link.url" class="page-link" :href="link.url" v-html="link.label" />
                            <span v-else class="page-link" v-html="link.label" />
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </AuthenticatedLayout>
</template>
