{% extends 'menu/menu_ion.html' %}
{% load static %}

{% block title %}Mis Direcciones{% endblock %}

{% block head %}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyClyIIUDFKc2Mq-IuqJf4cBGzdvZWRUiG4&libraries=places"></script>
{% endblock %}

{% block content %}
<ion-content>
    {% include 'ionic_refresher.html' %}

    {% if maps_opcion == 0 %}
    <ion-grid class="ion-padding">
        <ion-row>
            <ion-col size="6">
                <ion-button expand="block" id="btnObtenerActual" onclick="obtener_ubicacion()">
                    Obtener Punto Actual
                </ion-button>
            </ion-col>
            <ion-col size="6">
                <ion-button expand="block" id="btnGuardar">
                    Guardar Punto Actual
                </ion-button>
            </ion-col>
        </ion-row>
    </ion-grid>
    {% endif %}

    <input type="text" id="maps_latitude" hidden>
    <input type="text" id="maps_longitude" hidden>

    <ion-searchbar id="search-box" placeholder="Buscar dirección..." debounce="500"></ion-searchbar>

    <div id="map" style="height: 500px; width: 100%;"></div>

    <ion-modal id="modalGuardarMapa">
        <ion-header>
            <ion-toolbar>
                <ion-title id="modalGuardarMapaLabel"></ion-title>
                <ion-buttons slot="end">
                    <ion-button onclick="closeModal()">
                        <ion-icon name="close"></ion-icon>
                    </ion-button>
                </ion-buttons>
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <form id="formMapa">
                <ion-list>
                    <ion-item>
                        <ion-label position="stacked">Nombre Ubicación</ion-label>
                        <ion-input type="text" id="nombreUbicacion" placeholder="Nombre Ubicación" value="{{ maps_name }}"></ion-input>
                    </ion-item>
                </ion-list>
                <ion-footer class="ion-padding">
                    <ion-button type="submit" expand="block">Guardar</ion-button>
                    <ion-button expand="block" onclick="closeModal()">Cerrar</ion-button>
                </ion-footer>
            </form>
        </ion-content>
    </ion-modal>
</ion-content>
{% endblock %}


{% block scripts %}
<script>
    let map;
    let marker;
    let maps_id = parseInt("{{ maps_id }}");
    let maps_name = "{{ maps_name }}";
    let maps_opcion = parseInt("{{ maps_opcion }}");
    let maps_latitude = parseFloat("{{ maps_latitude }}") || 0;
    let maps_longitude = parseFloat("{{ maps_longitude }}") || 0;

    const latitudeInput = document.getElementById("maps_latitude");
    const longitudeInput = document.getElementById("maps_longitude");

    latitudeInput.value = maps_latitude;
    longitudeInput.value = maps_longitude;

    function reloadPage() {
        window.location.reload();
    }

    function obtener_ubicacion() {
        initMap(0);
    }

    function initMap(maps_id_param) {
        const defaultCenter = { lat: maps_latitude, lng: maps_longitude };
        map = new google.maps.Map(document.getElementById("map"), {
            zoom: 20,
            center: defaultCenter
        });
        marker = new google.maps.Marker({
            position: defaultCenter,
            map: map,
            draggable: true,
            title: "Ubicación Seleccionada"
        });

        if (maps_id_param === 0) {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        const userLocation = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };
                        map.setCenter(userLocation);
                        marker.setPosition(userLocation);
                        latitudeInput.value = userLocation.lat;
                        longitudeInput.value = userLocation.lng;
                    },
                    (error) => {
                        handleLocationError(error);
                    },
                    { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
                );
            }
        } else {
            const userLocation = { lat: maps_latitude, lng: maps_longitude };
            map.setCenter(userLocation);
            marker.setPosition(userLocation);
            latitudeInput.value = userLocation.lat;
            longitudeInput.value = userLocation.lng;
        }

        map.addListener("click", (event) => {
            marker.setPosition(event.latLng);
            map.panTo(event.latLng);
            latitudeInput.value = event.latLng.lat();
            longitudeInput.value = event.latLng.lng();
        });

        const input = document.getElementById("search-box");
        const autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo("bounds", map);
        autocomplete.addListener("place_changed", () => {
            const place = autocomplete.getPlace();
            if (!place.geometry) {
                Swal.fire("", "No se encontraron detalles para esta dirección.", "warning");
                return;
            }
            map.setCenter(place.geometry.location);
            map.setZoom(20);
            marker.setPosition(place.geometry.location);
            latitudeInput.value = place.geometry.location.lat();
            longitudeInput.value = place.geometry.location.lng();
        });
    }

    function handleLocationError(error) {
        let msg = "Error desconocido al obtener la ubicación.";
        if (error.code === error.PERMISSION_DENIED) {
            msg = "Permiso de geolocalización denegado. Verifica la configuración del navegador.";
        } else if (error.code === error.POSITION_UNAVAILABLE) {
            msg = "Información de ubicación no disponible.";
        } else if (error.code === error.TIMEOUT) {
            msg = "La solicitud de geolocalización tardó demasiado.";
        }
        Swal.fire("", msg, "warning").then(() => reloadPage());
    }

    function closeModal() {
        document.getElementById('modalGuardarMapa').dismiss();
    }

    window.onload = () => {
        initMap(maps_id);
    };
</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const csrfToken = "{{ csrf_token }}";

        document.getElementById('btnGuardar').addEventListener('click', () => {
            const modal = document.getElementById('modalGuardarMapa');
            const title = modal.querySelector('#modalGuardarMapaLabel');
            title.textContent = maps_id === 0 ? 'NUEVA UBICACIÓN' : 'EDITAR UBICACIÓN';
            modal.present();
        });

        document.getElementById('formMapa').addEventListener('submit', (e) => {
            e.preventDefault();
            const nombre = document.getElementById('nombreUbicacion').value;
            const lat = document.getElementById('maps_latitude').value;
            const lng = document.getElementById('maps_longitude').value;

            if (!nombre) {
                Swal.fire("", "Debes definir un nombre a tu dirección!", "warning");
                return;
            }

            $.ajax({
                url: `{% url 'maps_insert_update_ubicacion' %}`,
                method: 'POST',
                data: {
                    maps_id: maps_id,
                    maps_name: nombre,
                    maps_latitude: lat,
                    maps_longitude: lng,
                    csrfmiddlewaretoken: csrfToken
                },
                beforeSend: () => {
                    showLoadingLayer();
                },
                complete: () => {
                    hideLoadingLayer();
                },
                success: (data) => {
                    if (data.save == 1) {
                        if (data.existe == 0) {
                            closeModal();
                            Swal.fire({
                                title: "",
                                text: "Ubicación Guardada!",
                                icon: "success",
                                allowOutsideClick: false
                            }).then(() => {
                                window.location = "{% url 'personalMap' %}";
                            });
                        } else {
                            Swal.fire("", "Ya has guardado una Ubicación con este Nombre!", "warning");
                        }
                    } else {
                        console.log("Error D: " + data.error);
                    }
                }
            });
        });
    });
</script>
{% endblock %}