<template>

    <Head title="solicitudes" />

    <AuthenticatedLayout>
        <template #header>
            Solicitudes de ruta
        </template>

        <div class="min-w-full overflow-hidden mb-3 grid md:grid-cols-2 gap-4">
            <div class="col-span-1">
                <IconField>
                    <InputIcon class="pi pi-send" />
                    <InputText readonly v-model="rutaInfo.origen" placeholder="Origen" />
                </IconField>
            </div>
            <div class="col-span-1">
                <IconField>
                    <InputIcon class="pi pi-map-marker" />
                    <InputText readonly v-model="rutaInfo.destino" placeholder="Destino" />
                </IconField>
            </div>
        </div>
        <div class="w-auto overflow-hidden mb-3">
            <div class="flex flex-wrap items-center gap-2 w-full">
                <div class="relative flex-grow w-full sm:w-auto">
                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                        </svg>
                    </div>
                    <input type="search" @keydown.enter="handleEnterKey" v-model="search" id="default-search"
                        class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-white focus:ring-0 focus:border-transparent"
                        placeholder="Buscar por nombre o identificación del estudiante" required>

                </div>
                <button type="submit" @click="handleEnterKey"
                    class="text-white bg-purple-700 hover:bg-purple-900 focus:ring-4 focus:outline-none focus:ring-purple-300 font-medium rounded-lg text-sm px-4 py-2">Buscar</button>
                <button type="button" @click="clearSearch"
                    class="text-white bg-gray-500 hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm px-4 py-2">Limpiar</button>
            </div>
        </div>
        <div class="flex gap-4">
            <div class="cols-span-1">
                <div class="w-full bg-white rounded-md shadow-md p-2 px-3">
                    <div class="flex items-center gap-2">
                        <div>Puestos disponibles:</div>
                        <div>
                            <Tag>{{ rutaInfo.puestos_disponibles }}</Tag>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cols-span-1">
                <Select v-model="selectedEstado" :options="estados" @change="handleEnterKey" optionLabel="name" placeholder="Seleccione un estado" class="w-full md:w-56" />
            </div>
        </div>
       
        <TableResponsive :columns="columns" :data="customers">
            <template #estudiante="{ item }">
                <button class="w-full text-left focus:outline-none focus-visible:bg-indigo-50">
                    <div class="flex items-center">
                        <img v-if="item.estudiante.foto_perfil" class="rounded-full object-cover w-[50px] h-[50px] flex-shrink-0 mr-5"
                            :src="$page.props.base_url+item.estudiante.foto_perfil"
                            width="50" height="50" :alt="item.estudiante.nombre" />
                        <Avatar v-else :label="item.estudiante?.nombre?.charAt(0).toUpperCase()" class="mr-5"
                            size="large" shape="circle" />
                        <div>
                            <h4 class="text-sm font-semibold text-gray-800">{{ item.estudiante.nombre }}</h4>
                            <div class="text-[13px] flex gap-2">
                                <Rating v-model="item.estudiante.puntaje" readonly /> ({{ item.estudiante.puntaje }})
                            </div>
                        </div>
                    </div>
                </button>
            </template>
            <template #observaciones="{ item }">
                <div class="max-w-sm">
                    {{ item.observaciones || "Sin observaciones" }}
                </div>

            </template>
            <template #espera="{ item }">
                <Tag v-if="item.estado === 'pendiente'" :severity="calcularTiempoEspera(item.created_at).color"
                    :value="calcularTiempoEspera(item.created_at).texto">
                </Tag>
            </template>
            <template #estado="{ item }">
                <Tag>{{ item.estado }}</Tag>
            </template>

            <template #acciones="{ item }">
                <div class="flex gap-3">
                    <Button v-if="item.estado === 'pendiente'" icon="pi pi-check" severity="success" rounded outlined
                        v-tooltip.left="'Aprobar'" @click="aprobar(item.id)" />
                    
                    <a v-if="item.estado === 'aprobado'"
                    :href="'https://wa.me/57' + item.estudiante.telefono"
                    target="_blank"
                    class="bg-green-500 hover:bg-green-600 text-white rounded-full p-3 shadow-lg flex items-center justify-center"
                    title="Chatear con el conductor por WhatsApp"
                    >
                        <i class="pi pi-whatsapp text-4xl" style="font-size: 1rem;"></i>
                    </a>
                    

                    <Button v-if="item.estado === 'aprobado' || item.estado === 'pendiente'" icon="pi pi-times" severity="danger" rounded outlined
                        v-tooltip.left="'Rechazar'" @click="rechazar(item.id)" />

                </div>

            </template>
        </TableResponsive>

        <div v-show="solicitudes.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="solicitudes.links" />
        </div>
        <Toast />
        <ConfirmPopup></ConfirmPopup>
    </AuthenticatedLayout>
</template>

<script setup>
import { 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 Rating from 'primevue/rating';
import TableResponsive from "@/Components/TableResponsive.vue";
import Button from 'primevue/button';
import Avatar from 'primevue/avatar';
import IconField from 'primevue/iconfield';
import InputIcon from 'primevue/inputicon';
import InputText from 'primevue/inputtext';
import Select from 'primevue/select';

import Toast from 'primevue/toast';
import ConfirmPopup from 'primevue/confirmpopup';

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

import { useToast } from 'primevue/usetoast';
import { useConfirm } from "primevue/useconfirm";

const toast = useToast();
const confirm = useConfirm();

dayjs.locale("es");

const props = defineProps({
    solicitudes: {
        type: Object,
        default: () => ({}),
    },

    rutaInfo: {
        type: Object,
        default: () => ({}),
    },
    filters: {
        type: Object,
        default: () => ({}),
    },

});
console.log(props.solicitudes);
const columns = [
    { field: 'estudiante', label: 'Estudiante' },
    { field: 'observaciones', label: 'Observaciones' },
    { field: 'espera', label: 'Tiempo de espera' },
    { field: 'estado', label: 'Estado' },
    { field: 'acciones', label: 'Acciones' }
];

const estados = ref([
    { name: 'Pendientes', code: 'pendiente' },
    { name: 'Aprobadas', code: 'aprobado' },
    { name: 'Rechazadas', code: 'rechazado' },
    { name: 'Finalizadas', code: 'finalizado' },
]);

const selectedEstado = ref(
    estados.value.find(e => e.code === props.filters.estado) || estados.value[0]
);

const customers = ref([]);
const rutaInfo = ref([]);
const rutaID = ref(props.rutaInfo.id);
const search = ref("");


onMounted(() => {
    customers.value = props.solicitudes.data;
    rutaInfo.value = props.rutaInfo;
    selectedEstado.value = estados.value.find(e => e.code === props.filters.estado) || estados.value[0];
});




// Calculate waiting time
const calcularTiempoEspera = (createdAt) => {
    if (!createdAt) return { texto: "Desconocido", color: "secondary" };

    const ahora = dayjs();
    const creado = dayjs(createdAt);
    const dias = ahora.diff(creado, "days");
    const horas = ahora.diff(creado, "hours") % 24;

    let color = "secondary";
    if (dias >= 1 && dias <= 3) {
        color = "success";
    } else if (dias >= 4 && dias <= 6) {
        color = "warn";
    } else if (dias >= 7) {
        color = "danger";
    }

    return { texto: `${dias} días`, color };
};

const clearSearch = () => {
    search.value = "";
    handleEnterKey();
};

const handleEnterKey = () => {
    router.get(
        route("solicitudes-rutas.show", rutaID.value),
        { search: search.value, estado: selectedEstado.value.code },
        { preserveState: false, replace: true }
    );
};
watch(
    () => props.solicitudes,
    (newSolicitudes) => {
        customers.value = newSolicitudes?.data || [];
    },
    { deep: true, immediate: true }
);

const aprobar = (id) => {
    confirm.require({
        target: event.currentTarget,
        message: '¿Estas seguro de aprobar la solicitud?',
        icon: 'pi pi-exclamation-triangle',
        rejectProps: {
            label: 'Cancelar',
            severity: 'secondary',
            outlined: true
        },
        acceptProps: {
            label: 'Aprobar',
        },
        accept: async () => {
            try {
                const url = route("solicitudes-rutas.aprobar", { id });
                const response = await axios.put(url);

                // Verificamos que la respuesta sea correcta
                if (response.status === 200) {

                    toast.add({
                        severity: "success",
                        summary: "Solicitud Aprobada",
                        detail: "El estado de la solicitud ha sido actualizado.",
                        life: 3000,
                    });

                    customers.value = customers.value.map((solicitud) =>
                        solicitud.id === id ? { ...solicitud, estado: "aprobado" } : solicitud
                    );
                } else {
                    throw new Error("Error en la aprobación");
                }
            } catch (error) {
                console.error("Error al actualizar el estado:", error);
                toast.add({
                    severity: "error",
                    summary: "Error",
                    detail: "No se pudo actualizar el estado.",
                    life: 3000,
                });
            }
        },
        reject: () => {
            toast.add({ severity: 'error', summary: 'Acción cancelada', detail: 'Se ha cancelado la acción.', life: 3000 });
        }
    });

};

const rechazar = (id) => {
    
    confirm.require({
        target: event.currentTarget,
        message: '¿Estas seguro de rechazar la solicitud?',
        icon: 'pi pi-exclamation-triangle',
        rejectProps: {
            label: 'Cancelar',
            severity: 'secondary',
            outlined: true
        },
        acceptProps: {
            label: 'Rechazar',
        },
        accept: async () => {
            try {
                const url = route("solicitudes-rutas.rechazar", { id });  
                const response = await axios.put(url);

                // Verificamos que la respuesta sea correcta
                if (response.status === 200) {

                    toast.add({
                        severity: "success",
                        summary: "Solicitud Rechazada",
                        detail: "El estado de la solicitud ha sido actualizado.",
                        life: 3000,
                    });

                    customers.value = customers.value.map((solicitud) =>
                        solicitud.id === id ? { ...solicitud, estado: "rechazado" } : solicitud
                    );
                } else {
                    throw new Error("Error en la aprobación");
                }
            } catch (error) {
                console.error("Error al actualizar el estado:", error);
                toast.add({
                    severity: "error",
                    summary: "Error",
                    detail: "No se pudo actualizar el estado.",
                    life: 3000,
                });
            }
        },
        reject: () => {
            toast.add({ severity: 'error', summary: 'Acción cancelada', detail: 'Se ha cancelado la acción.', life: 3000 });
        }
    });
};

</script>

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

.p-datepicker {
    width: 100% !important;
}

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