<template>
    <DataTable class="mt-2" :value="customers" scrollable tableStyle="max-width: 100%">
        <Column field="origen" header="Origen"></Column>
        <Column field="destino" header="Destino"></Column>
        <Column field="fecha" header="Fecha"></Column>
        <Column field="vehiculo" header="Vehiculo"></Column>
        <column field="conductor" header="Conductor"></column>
        <column field="estado" header="Estado">
            <template #body="slotProps">
                <Tag v-if="slotProps.data.estado === 'Activa'">{{ slotProps.data.estado }}</Tag>
                <Tag v-else-if="slotProps.data.estado === 'Finalizada'" severity="secondary">{{ slotProps.data.estado }}</Tag>
                <Tag v-else-if="slotProps.data.estado === 'Cancelada'" severity="danger">{{ slotProps.data.estado }}</Tag>
                <Tag v-else severity="warning">Desconocido</Tag>
            </template>
        </column>
        <template #empty>
            <div class="flex flex-col items-center justify-center text-gray-500 py-5">
                <i class="pi pi-inbox text-4xl mb-3"></i>
                <p>No hay registros disponibles</p>
            </div>
        </template>
    </DataTable>
    <div v-show="links.length >= 3" class="xs:flex-row xs:justify-between flex flex-col items-center border-t px-2 py-2">
        <PaginationAxios
            :links="links"
            :perPage="per_page"
            @page-change="cambiarPagina"
            @per-page-change="cambiarRegistrosPorPagina"
        />
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';

import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import PaginationAxios from '@/Components/PaginationAxios.vue';
import dayjs from "dayjs";
import "dayjs/locale/es";
import Tag from 'primevue/tag';

dayjs.locale("es");

const customers = ref([]);
const per_page = ref(10); 
const links = ref([]);

onMounted(() => {
    obtenerRutas();
});

const obtenerRutas = async (page = 1) => {
    try {
        const response = await axios.get('/getrutas', {
            params: {
                page: page,
                per_page: per_page.value,
            }
        });
        links.value = response.data.links;

        customers.value = response.data.data.map(ruta => {
            return {
                origen: formatLocation(ruta.origen),
                destino: formatLocation(ruta.destino),
                fecha: formatDateTime(ruta.fecha_hora),
                vehiculo: `${ruta.vehiculo?.marca_vehiculo ?? ''} ${ruta.vehiculo?.linea_vehiculo ?? ''}`.trim(),
                conductor: ruta.conductor?.estudiante?.nombre ?? 'Sin nombre',
                estado: formatEstado(ruta.estado)
            };
        });

        console.log(response.data);
    } catch (error) {
        console.error('Error al obtener rutas:', error);
    }
};

function formatEstado(estado) {
    switch (estado) {
        case 0:
            return 'Activa';
        case 1:
            return 'Finalizada';
        case 2:
            return 'Cancelada';
        default:
            return 'Desconocido';
    }
}

const formatDateTime = (dateTime) => {
    return dayjs(dateTime).format("dddd, D [de] MMMM [de] YYYY h:mm A");
};


// Cambiar página
const cambiarPagina = (page) => {
    obtenerRutas(page);
};

// Cambiar cantidad de registros por página
const cambiarRegistrosPorPagina = (perPage) => {
  per_page.value = perPage;
  obtenerRutas();
};


const formatLocation = (location) => {
    if (location.includes("Universidad Tecnológica de Pereira") || location.includes("Plazoleta de banderas")) {
        return "Universidad Tecnológica de Pereira"; // Si la ubicación contiene esta frase, solo retorna eso
    }

    // Si no contiene "Universidad Tecnológica de Pereira", tomar los dos primeros elementos del split
    const parts = location.split(',');
    return parts.length > 1 ? parts[0] + ', ' + parts[1] : parts[0];
};
</script>