<template>
    <div>
        <ul class="flex space-x-2 rtl:space-x-reverse">
            <li>
                <a href="javascript:;" class="text-primary hover:underline">Clientes</a>
            </li>
            <li class="before:content-['/'] ltr:before:mr-2 rtl:before:ml-2">
                <span>Listado</span>
            </li>
        </ul>

        <div class="pt-5">
            <div class="panel">
                <div class="flex justify-between items-center">
                    <h5 class="font-semibold text-lg dark:text-white-light">Clientes</h5>
                    <Link :href="route('customers.create')" class="btn btn-primary btn-sm m-1">
                    <span class="flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
                            class="w-4 h-4 ltr:mr-2 rtl:ml-2">
                            <line x1="12" y1="5" x2="12" y2="19"></line>
                            <line x1="5" y1="12" x2="19" y2="12"></line>
                        </svg>
                        Nuevo Cliente
                    </span>
                    </Link>
                </div>

                <div class="table-responsive mt-5">
                    <table class="table-hover">
                        <thead>
                            <tr>
                                <th>Nombre</th>
                                <th>Email</th>
                                <th>Teléfono</th>
                                <th>Ciudad</th>
                                <th class="text-center">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="customer in customers.data" :key="customer.id">
                                <td>{{ customer.name }}</td>
                                <td>{{ customer.email }}</td>
                                <td>{{ customer.phone }}</td>
                                <td>{{ customer.city }}</td>
                                <td class="text-center">
                                    <ul class="flex items-center justify-center gap-2">
                                        <li>
                                            <Link :href="route('customers.edit', customer.id)"
                                                class="btn btn-sm btn-outline-primary">
                                            Editar
                                            </Link>
                                        </li>
                                        <li>
                                            <button type="button" @click="destroy(customer.id)"
                                                class="btn btn-sm btn-outline-danger">
                                                Eliminar
                                            </button>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                            <tr v-if="customers.data.length === 0">
                                <td colspan="5" class="text-center">No hay clientes registrados</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div v-if="customers.links && customers.links.length > 3"
                    class="flex items-center justify-between mt-5">
                    <div class="flex gap-2">
                        <template v-for="(link, key) in customers.links" :key="key">
                            <Link v-if="link.url" :href="link.url" class="btn btn-outline-primary btn-sm"
                                :class="{ 'btn-primary': link.active }" v-html="link.label" />
                            <span v-else class="btn btn-outline-primary btn-sm opacity-50 cursor-not-allowed"
                                v-html="link.label" />
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { Link } from '@inertiajs/vue3'
import { router } from '@inertiajs/vue3'
import { onMounted } from 'vue'
import DefaultLayout from '@/layouts/app-layout.vue'

defineProps({
    customers: {
        type: Object,
        required: true
    }
})

const destroy = (id) => {
    if (confirm('¿Estás seguro de que deseas eliminar este cliente?')) {
        router.delete(route('customers.destroy', id))
    }
}

onMounted(() => {
    console.log('Componente Customers montado')
})

defineOptions({
    layout: DefaultLayout
})
</script>