<template>
    <div class="lg:col-span-3 col-span-1 mx-auto bg-white rounded-lg p-6 shadow-md w-full">
        <div class="w-full overflow-auto">
            <DataTable class="mt-2" :value="conductores" scrollable
                tableStyle="max-width: 100%">
                <Column field="nombre" header="Nombre"></Column>
                <Column field="documento" header="Documento"></Column>
                <Column field="telefono" header="Telefono"></Column>
                <Column field="puntaje" header="Puntaje">
                    <template #body="slotProps">
                        <Rating v-model="slotProps.data.puntaje" readonly cancel="false" />
                    </template>
                </Column>
                <!-- <column field="ver" header="Ver">
                    <template #body="slotProps">
                        <Button icon="pi pi-eye" severity="info" rounded outlined aria-label="Ver" />
                    </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>
        </div>
    </div>
    <!-- <div class="lg:col-span-2 mt-5 lg:mt-0 col-span-1 mx-auto bg-white rounded-lg p-6 shadow-md w-full">
        <div>
            <div class="font-medium leading-6 text-gray-600 text-lg">Estadística de conductor</div>
            <div class="mt-0.5 text-sm text-gray-500">Juan Perez.</div>
        </div>
        <Chart type="bar" :data="chartData" :options="chartOptions" class="h-[30rem]" />
    </div> -->
</template>
<script setup>
import { onMounted, ref } from 'vue';
import Chart from 'primevue/chart';
import Button from 'primevue/button';
import Rating from 'primevue/rating';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
import PaginationAxios from '@/Components/PaginationAxios.vue';

const conductores = ref([]);
const per_page = ref(7); 
const links = ref([]);


onMounted(() => {
    obtenerConductores();

    chartData.value = setChartData();
    chartOptions.value = setChartOptions();
});

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

        console.log(response.data);

        conductores.value = response.data.data.map(item => {
            return {
                id: item.id,
                nombre: item.estudiante.nombre,
                documento: item.estudiante.identificacion,
                telefono: item.estudiante.telefono,
                puntaje: item.puntaje,
            };
        });

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

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

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

const chartData = ref();
const chartOptions = ref();

const setChartData = () => {
    const documentStyle = getComputedStyle(document.documentElement);

    return {
        labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio'],
        datasets: [
            {
                label: 'Viajes realizados',
                backgroundColor: documentStyle.getPropertyValue('--p-purple-500'),
                borderColor: documentStyle.getPropertyValue('--p-purple-500'),
                data: [65, 59, 80, 81, 56, 55, 40]
            },
            {
                label: 'Viajes cancelados',
                backgroundColor: documentStyle.getPropertyValue('--p-sky-300'),
                borderColor: documentStyle.getPropertyValue('--p-sky-300'),
                data: [28, 48, 40, 19, 86, 27, 90]
            }
        ]
    };
};
const setChartOptions = () => {
    const documentStyle = getComputedStyle(document.documentElement);
    const textColor = documentStyle.getPropertyValue('--p-text-color');
    const textColorSecondary = documentStyle.getPropertyValue('--p-text-muted-color');
    const surfaceBorder = documentStyle.getPropertyValue('--p-content-border-color');

    return {
        indexAxis: 'y',
        maintainAspectRatio: false,
        aspectRatio: 0.8,
        plugins: {
            legend: {
                labels: {
                    color: textColor
                }
            }
        },
        scales: {
            x: {
                ticks: {
                    color: textColorSecondary,
                    font: {
                        weight: 500
                    }
                },
                grid: {
                    display: false,
                    drawBorder: false
                }
            },
            y: {
                ticks: {
                    color: textColorSecondary
                },
                grid: {
                    color: surfaceBorder,
                    drawBorder: false
                }
            }
        }
    };
}
</script>