<template>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 w-full min-w-0">
        <!-- In use -->
        <div class="flex flex-col px-6 py-2 bg-white shadow rounded-lg overflow-hidden">
            <div class="flex flex-col items-center space-y-2">
                <div class="text-6xl font-bold tracking-tight leading-none text-purple-500">{{ viajes_en_curso }}</div>
                <div class="text-lg font-medium text-purple-500">Viajes en curso</div>
            </div>
        </div>
        <!-- renovation -->
        <div class="flex flex-col px-6 py-2 bg-white shadow rounded-lg overflow-hidden">
            <div class="flex flex-col items-center space-y-2">
                <div class="text-6xl font-bold tracking-tight leading-none text-purple-900">{{ rutas_programadas }}</div>
                <div class="text-lg font-medium text-purple-900">Rutas programadas</div>
            </div>
        </div>
        <!-- Suspended -->
        <div class="flex flex-col px-6 py-2 bg-white shadow rounded-lg overflow-hidden">
            <div class="flex flex-col items-center space-y-2">
                <div class="text-6xl font-bold tracking-tight leading-none text-[#74badc]">{{ usuarios_activos }}</div>
                <div class="text-lg font-medium text-[#74badc]">Usuarios activos</div>
            </div>
        </div>
        <!-- Closed -->
        <div class="flex flex-col px-6 py-2 bg-white shadow rounded-lg overflow-hidden">
            <div class="flex flex-col items-center space-y-2">
                <div class="text-6xl font-bold tracking-tight leading-none text-primary-900">{{ viajes_completados }}</div>
                <div class="text-lg font-medium text-primary-900">Viajes completados</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import axios from 'axios';

const rutas_programadas = ref(0);
const usuarios_activos = ref(0);
const viajes_completados = ref(0);
const viajes_en_curso = ref(0);

onMounted(async () => {
    try {
        const response = await axios.get(route('resumen'));
        console.log("Data obtenida:", response.data);
        if (response.data) {
            rutas_programadas.value = response.data.rutas_programadas;
            usuarios_activos.value = response.data.usuarios_activos;
            viajes_completados.value = response.data.viajes_completados;
            viajes_en_curso.value = response.data.viajes_en_curso;
        }
    } catch (error) {
        console.error("Error al obtener la data:", error);
    }
});
</script>