<template>

    <Head title="solicitar viaje" />

    <AuthenticatedLayout>
        <template #header>
            Solicitar viaje
        </template>
        
        <div class="min-w-full overflow-hidden mb-3 grid md:grid-cols-4 gap-4">
            <div class="col-span-1">
                <IconField>
                    <InputIcon class="pi pi-send" />
                    <InputText v-model="origen" placeholder="Origen" />
                </IconField>
            </div>
            <div class="col-span-1">
                <IconField>
                    <InputIcon class="pi pi-map-marker" />
                    <InputText v-model="destino" placeholder="Destino" />
                </IconField>
            </div>
            <div class="col-span-1">
                <FloatLabel>
                    <DatePicker v-model="fecha_hora" inputId="over_label" showIcon fluid showTime hourFormat="12" stepMinute="60" iconDisplay="input" />
                    <label for="over_label">Fecha y Hora</label>
                </FloatLabel>
            </div>
            <div class="col-span-1">
                <Button type="button" label="Buscar" icon="pi pi-search" :loading="loading" @click="load" />
            </div>
        </div>
        <TableResponsive :columns="columns" :data="rutas">
            <template #puestos="{ item }">
                <Tag 
                    icon="pi pi-user" 
                    :value="item.puestos" 
                    :severity="getTagSeverity(item.puestos)"
                ></Tag>
            </template>

            <template #acciones="{ item }">
                <div class="flex gap-3">
                    <Link :href="route('solicitar-viaje.show', item.id)">
                        <Button icon="pi pi-send" rounded outlined aria-label="Solicitudes" />
                    </Link>
                </div>
                
            </template>

            <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>
        </TableResponsive>

        <!-- Paginación -->
        <div v-if="props.rutas.links.length > 3"
            class="flex flex-col items-center border-t bg-white px-2 py-2 xs:flex-row xs:justify-between">
            <pagination :links="props.rutas.links" />
        </div>

    </AuthenticatedLayout>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { watch } from "vue";
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import Pagination from '@/Components/Pagination.vue'
import { Head } from '@inertiajs/vue3';
import { router } from '@inertiajs/vue3'
import Tag from 'primevue/tag';
import IconField from 'primevue/iconfield';
import InputIcon from 'primevue/inputicon';
import InputText from 'primevue/inputtext';
import DatePicker from 'primevue/datepicker';
import FloatLabel from 'primevue/floatlabel';
import TableResponsive from "@/Components/TableResponsive.vue";
import Button from 'primevue/button';

import { Link } from '@inertiajs/vue3';

import OutlineButton from "@/Components/OutlineButton.vue";

import DataTable from 'primevue/datatable';
import Column from 'primevue/column';

import dayjs from "dayjs";
import "dayjs/locale/es";

dayjs.locale("es");


const props = defineProps({
    rutas: Object,
    filters: Object
});

console.log(props.rutas);

const origen = ref(props.filters.origen ?? "");
const destino = ref(props.filters.destino ?? "");
const fecha_hora = ref(props.filters.fecha_hora ?? "");


const columns = [
  { field: 'origen', label: 'Origen' },
  { field: 'destino', label: 'Destino' },
  { field: 'fecha', label: 'Fecha' },
  { field: 'vehiculo', label: 'Vehiculo' },
  { field: 'puestos', label: 'Puestos' },
  { field: 'acciones', label: 'Acciones' }
];
const rutas = computed(() => {
    return props.rutas.data.map(ruta => ({
        id: ruta.id,
        origen: formatLocation(ruta.origen),
        destino: formatLocation(ruta.destino),
        fecha: formatDateTime(ruta.fecha_hora), 
        vehiculo: ruta.vehiculo.placa + ' - ' + ruta.vehiculo.marca_vehiculo + ' ' + ruta.vehiculo.linea_vehiculo ?? 'No asignado',
        puestos: ruta.puestos_disponibles
    }));
});


const formatLocation = (location) => {
    if (location.includes("Universidad Tecnológica de Pereira")) {
        return "Universidad Tecnológica de Pereira"; // Si la ubicación contiene esta frase, solo retorna eso
    }
    
    const parts = location.split(',');
    return parts.length > 1 ? parts[0] + ', ' + parts[1] : parts[0];
};

const getTagSeverity = (puestos) => {
    if (puestos === 1) return 'danger';  // Rojo (pocos puestos)
    if (puestos === 2) return 'warn'; // Amarillo (medio)
    if (puestos === 3) return 'info';    // Azul (disponible)
    return 'success';                    // Verde (muchos puestos)
};

const data = ref([]);

const customers = ref();

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

const formatDateTime2 = (dateTime) => {
    return dateTime ? dayjs(dateTime).format("YYYY-MM-DD HH:mm:ss") : null;
};


const loading = ref(false);

const load = () => {
    loading.value = true;

    router.get("/solicitar-viaje", 
        {
            origen: origen.value,
            destino: destino.value,
            fecha_hora: formatDateTime2(fecha_hora.value)
        }, 
        {
            preserveState: true,
            replace: true,
            onFinish: () => loading.value = false
        }
    );
};
watch(
    () => props.solicitudes,
    (newSolicitudes) => {
        customers.value = newSolicitudes?.data || [];
    },
    { deep: true, immediate: true }
);
</script>

<style>
.p-inputtext{
    width: 100% !important;
}

.p-datepicker{
    width: 100% !important;
}
.p-floatlabel .p-datepicker input{
    width: 100% !important;
}
</style>