<template>
    <Head title="Editar ruta" />

    <AuthenticatedLayout>
        <template #header> Editar Ruta </template>
        <div class="flex justify-center">
            <div class="relative w-full max-w-[1280px] min-h-[88vh]">
                <div class="absolute inset-0 transition-all duration-300" :class="{ 'h-1/2': !panelOpen, 'h-0': panelOpen }">
                    <div id="map" ref="mapContainer"></div>
                </div>

                <!-- Panel de detalles de la ruta -->
                <div class="absolute panel-detalles  bottom-0 left-0 w-full bg-white rounded-t-2xl shadow-lg p-4 transition-all duration-300"
                    :class="{ 'h-1/2': !panelOpen, 'h-full': panelOpen }">
                    <div class="border-b rounded-t-xl py-3 px-4 md:py-4 md:px-5 grid grid-cols-2 gap-4">
                        <h3 class="mt-1 text-gray-500">Detalles de la ruta</h3>
                        <div class="text-right">
                            <Button v-if="panelOpen" @click="togglePanel" icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
                        </div>
                    </div>
                    <div class="p-4 md:p-5 overflow-y-auto h-[90%]">
                        <form @submit.prevent="submit">
                            <div class="xl:grid tb:grid xl:grid-cols-8 tb:grid-cols-3 md:grid-cols-3 gap-4 gap-y-4 mx-5 lg:mx-0 xl:mx-0">
                                <div class="xl:col-span-2 tb:col-span-1">
                                    <InputLabel for="modo_viaje" value="Modo de Viaje" />
                                    <SelectButton class="mt-1" v-model="modo_viaje" :options="options" />
                                </div>
                                <div class="xl:col-span-2 tb:col-span-1 mt-3 lg:mt-0 xl:mt-0">
                                    <InputLabel for="origen" value="Origen" />
                                    <LocationSearch 
                                        v-model="ubicacionOrigen" 
                                        :disabled="modo_viaje === 'Regreso UTP'" 
                                        :default-location="ubicacionOrigen" 
                                        @locationSelected="updateLocationOrigen" 
                                    />
                                    <InputError class="mt-2" :message="form.errors.origen" />
                                </div>
                                <div class="xl:col-span-2 tb:col-span-1 mt-3 lg:mt-0 xl:mt-0">
                                    <InputLabel for="destino" value="Destino" />
                                    <LocationSearch 
                                        v-model="ubicacionDestino" 
                                        :disabled="modo_viaje === 'Ida UTP'" 
                                        :default-location="ubicacionDestino" 
                                        @locationSelected="updateLocationDestino" 
                                    />
                                    <InputError class="mt-2" :message="form.errors.destino" />
                                </div>

                                <div class="lg:flex lg:items-end lg:mb-0 mb-2 col-span-1 mt-3 lg:mt-0 xl:mt-0">
                                    <Button class="w-full" type="button" :disabled="loading" @click="drawRoute" label="Generar" severity="Primary" outlined>
                                        Generar <span v-if="loading" class="cargadorSpan"></span>
                                    </Button>
                                </div>
                                <div class="lg:flex lg:items-end col-span-1 mt-3 lg:mt-0 xl:mt-0">
                                    <div>
                                        <InputLabel for="destino" value="Puestos disponibles" />
                                        <InputNumber class="mt-1" v-model="form.puestos_disponibles" showButtons buttonLayout="horizontal" fluid style="width: 100%" :min="0" :max="99">
                                            <template #incrementbuttonicon>
                                                <span class="pi pi-plus" />
                                            </template>
                                            <template #decrementbuttonicon>
                                                <span class="pi pi-minus" />
                                            </template>
                                        </InputNumber>
                                        <InputError class="mt-2" :message="form.errors.puestos_disponibles" />
                                    </div>
                                </div>


                                <div class="xl:col-span-3 mt-3 lg:mt-0 xl:mt-0">
                                    <InputLabel for="destino" value="Vehiculo" />
                                    <Select v-model="form.vehiculo" :options="vehiculos" optionLabel="placa" optionValue="id" placeholder="Seleccionar vehiculo..." class="w-full mt-1" />
                                    <InputError class="mt-2" :message="form.errors.vehiculo" />
                                </div>
                                <div class="mt-3 lg:mt-0 xl:mt-0 xl:col-span-3">
                                    <InputLabel for="destino" value="Fecha y hora" />
                                    <DatePicker v-model="form.fecha_hora" showIcon fluid showTime hourFormat="12" iconDisplay="input" class="mt-1" />
                                    <InputError class="mt-2" :message="form.errors.fecha_hora" />
                                </div>
                                <div class="flex items-end justify-end mt-3 lg:mt-0 xl:mt-0 xl:col-span-2">
                                    <button type="submit" class="px-4 py-2 bg-purple-500 text-white rounded-full w-full lg:w-48">
                                    Crear Ruta
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <Toast />
        <ConfirmDialog></ConfirmDialog>
    </AuthenticatedLayout>
</template>

<script setup>
import { ref, onMounted, nextTick, watch, onBeforeUnmount } from 'vue';
import { useToast } from 'primevue/usetoast';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import LocationSearch from '@/Components/SearchMap.vue';
import Toast from 'primevue/toast';
import { useForm } from '@inertiajs/vue3';
import L from 'leaflet';
import SelectButton from 'primevue/selectbutton';
import Button from 'primevue/button';
import InputNumber from 'primevue/inputnumber';
import Select from 'primevue/select';
import DatePicker from 'primevue/datepicker';
import ConfirmDialog from 'primevue/confirmdialog';
import { useConfirm } from "primevue/useconfirm";
import dayjs from "dayjs";
import 'dayjs/locale/es';

dayjs.locale('es');

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


const props = defineProps({
    vehiculos: {
        type: Object,
        default: () => ({}),
    },
    conductor: {
        type: Object,
        default: () => ({}),
    },
});
console.log(props.conductor);

const vehiculos = ref([]);

const modo_viaje = ref('Ida UTP');
const options = ref(['Ida UTP', 'Regreso UTP']);
const icondisplay = ref();

// Control para abrir y cerrar el panel
const panelOpen = ref(false);
const selectedLocationOrigen = ref(null);
const selectedLocationDestino = ref(null);


const initialHeight = ref(window.innerHeight);


// Coordenadas de la UTP
const UTP_COORDENADAS = { lat: "4.79431505", lon: "-75.68889184219843", name: "Universidad Tecnológica de Pereira, Carrera 30, Universidad, Perimetro Urbano Pereira, Pereira, Risaralda, RAP Eje Cafetero, 660003, Colombia" };

const ubicacionOrigen = ref(null);
const ubicacionDestino = ref(null);


// Referencia al contenedor del mapa
const mapContainer = ref(null);
let map = null;
let markerOrigen = null;
let markerDestino = null;
let routeLine = null; // Variable para almacenar la línea de la ruta


// Función para actualizar la ubicación de origen
const updateLocationOrigen = (location) => {
    selectedLocationOrigen.value = location;
    if (markerOrigen) {
        markerOrigen.setLatLng([location.lat, location.lon]);
    } else {
        markerOrigen = L.marker([location.lat, location.lon]).addTo(map);
    }
    //drawRoute();
};

// Función para actualizar la ubicación de destino
const updateLocationDestino = (location) => {
    selectedLocationDestino.value = location;
    if (markerDestino) {
        markerDestino.setLatLng([location.lat, location.lon]);
    } else {
        markerDestino = L.marker([location.lat, location.lon]).addTo(map);
    }
    //drawRoute();
};

const loading = ref(false);

// Función para dibujar la ruta entre origen y destino
const drawRoute = () => {
    if (selectedLocationOrigen.value && selectedLocationDestino.value) {
        loading.value = true;

        const origin = [selectedLocationOrigen.value.lat, selectedLocationOrigen.value.lon];
        const destination = [selectedLocationDestino.value.lat, selectedLocationDestino.value.lon];

        if (routeLine) {
            map.removeLayer(routeLine); // Eliminar la línea anterior si existe
        }

        // Utiliza la API de OpenRouteService para calcular la ruta entre los puntos
        const url = `https://api.openrouteservice.org/v2/directions/driving-car?api_key=5b3ce3597851110001cf62485b32ffe175bb470baac5d187052a5d96&start=${origin[1]},${origin[0]}&end=${destination[1]},${destination[0]}`;
        
        fetch(url)
            .then(response => response.json())
            .then(data => {
                const coordinates = data.features[0].geometry.coordinates;
                routeLine = L.polyline(coordinates.map(coord => [coord[1], coord[0]]), {
                    color: 'blue',
                    weight: 4,
                    opacity: 0.7
                }).addTo(map);
                map.fitBounds(routeLine.getBounds()); // Ajustar el mapa a la ruta

                loading.value = false;
            })
            .catch(error => {
                console.error("Error al calcular la ruta:", error);
            });
    }
};

// Función para abrir/cerrar el panel de detalles
const togglePanel = () => {
    panelOpen.value = !panelOpen.value;
};


const handleResize = () => {
    // Si la altura actual es menor al 80% de la inicial, significa que el teclado está abierto
    if (window.innerHeight < initialHeight.value * 0.8) {
        panelOpen.value = true;
    }
};


// Inicialización del formulario
const form = useForm({
    origen: "",
    destino: "",
    lat_origen: "",
    long_origen: "",
    lat_destino: "",
    long_destino: "",
    vehiculo: null,
    puestos_disponibles: 4,
    fecha_hora: null,
    conductor: props.conductor.id
});

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

// Función para enviar el formulario
const submit = () => {
    form.lat_origen = selectedLocationOrigen.value.lat;
    form.long_origen = selectedLocationOrigen.value.lon;
    form.origen = selectedLocationOrigen.value.name;

    form.lat_destino = selectedLocationDestino.value.lat;
    form.long_destino = selectedLocationDestino.value.lon;
    form.destino = selectedLocationDestino.value.name;

    if(form.fecha_hora){
        form.fecha_hora = formatDateTime(form.fecha_hora);
    }
    

    confirm.require({
        message: '¿Esta seguro de crear la ruta?',
        header: 'Confirmación',
        icon: 'pi pi-exclamation-triangle',
        rejectProps: {
            label: 'Cancelar',
            severity: 'secondary',
            outlined: true
        },
        acceptProps: {
            label: 'Crear'
        },
        accept: () => {
            form.post(route("rutas.store"), {
                onSuccess: function () {
                    toast.add({
                        severity: "success",
                        summary: "Registro Guardado",
                        detail: "La ruta se ha almacenado exitosamente",
                        life: 5000,
                    });
                },
            });
        },
        reject: () => {
            toast.add({ severity: 'error', summary: 'Cancelado', detail: 'La acción se ha cancelado', life: 3000 });
        }
    });
};

onMounted(() => {
    vehiculos.value = props.vehiculos;
    console.log(vehiculos.value);
    nextTick(() => {
        const mapContainerEl = mapContainer.value;

        if (mapContainerEl && mapContainerEl.offsetHeight > 0) {
            // Coordenadas predeterminadas (Bogotá, Colombia)
            const startLatLng = [4.60971, -74.08175];
            const zoomLevel = 12;

            // Inicializar el mapa
            map = L.map(mapContainerEl).setView(startLatLng, zoomLevel);

            // Cargar las capas de mapa
            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '© UTP'
            }).addTo(map);

            // Intentar obtener la ubicación del usuario
            if ("geolocation" in navigator) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        const userLat = position.coords.latitude;
                        const userLon = position.coords.longitude;

                        if(userLat === 4.79431505 && userLon === -75.68889184219843){
                            modo_viaje.value = 'Regreso UTP';
                            ubicacionDestino.value = '';
                        }else{
                            ubicacionOrigen.value = {
                                lat: position.coords.latitude,
                                lon: position.coords.longitude,
                            };
                            ubicacionDestino.value = UTP_COORDENADAS;
                        }

                        

                        // Centrar el mapa en la ubicación del usuario
                        map.setView([userLat, userLon], 16);

                        // Agregar un marcador en la ubicación del usuario
                        L.marker([userLat, userLon], {
                            title: "Tu ubicación",
                        }).addTo(map)
                        .bindPopup("Tu ubicación actual")
                        .openPopup();
                    },
                    (error) => {
                        console.error("Error obteniendo la ubicación:", error.message);
                    }
                );
            } else {
                console.warn("Geolocalización no soportada en este navegador.");
            }

            map.invalidateSize();
        } else {
            console.error("El contenedor del mapa no está disponible o tiene altura cero");
        }
    });

    initialHeight.value = window.innerHeight;
    window.addEventListener("resize", handleResize);
});

onBeforeUnmount(() => {
    window.removeEventListener("resize", handleResize);
});

watch(modo_viaje, (nuevoModo) => {
    if (nuevoModo === "Ida UTP") {
        ubicacionDestino.value = UTP_COORDENADAS;
        ubicacionOrigen.value = null;
    } else if (nuevoModo === "Regreso UTP") {
        ubicacionOrigen.value = UTP_COORDENADAS;
        ubicacionDestino.value = null;
    }
});
</script>

<style>
.input_full input {
    width: 100% !important;
}

.transition-all {
    transition: all 0.3s ease-in-out;
}

#map {
    height: 50vh;
    width: 100%;
    z-index: 1;
}

.panel-detalles {
    z-index: 10;
}


.cargadorSpan {
    width: 20px;
    height: 20px;
    border: 3px solid #6b21a8;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

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

.p-togglebutton{
    width: 50% !important;
}
</style>
