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

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


{% block body %}

<style>
    #map {
        height: 500px;
        width: 100%;
    }
</style>

{% if maps_opcion == 0 %}
<div class="d-flex justify-content-end">
    <div class="col-sm-2 me-2">
        <a type="button" class="btn btn-sm btn-warning w-100" id="btnObtenerActual"
            onclick="obtener_ubicacion()">Obtener Punto Actual</a>
    </div>
    <div class="col-sm-2">
        <a type="button" class="btn btn-sm btn-danger w-100" id="btnGuardar">Guardar Punto Actual</a>
    </div>
</div>
{% endif %}
<br>

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

<input id="search-box" type="text" class="form-control form-control-sm" placeholder="Buscar dirección...">

<hr>

<div id="map"></div>


<div id="modalGuardarMapa" class="modal fade" tabindex="-1" aria-labelledby="modalGuardarMapaLabel" aria-hidden="true"
    data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background-color: cadetblue; color: white;">
                <h5 class="modal-title text-uppercase" id="modalGuardarMapaLabel"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formMapa">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group">
                            <label for="nombreUbicacion" class="form-label">Nombre Ubicacion</label>
                            <input type="text" class="form-control form-control-sm border-dark" id="nombreUbicacion"
                                placeholder="Nombre Ubicacion" value="{{ maps_name }}">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-sm btn-success">Guardar</button>
                    <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Cerrar</button>
                </div>
            </form>
        </div>l
    </div>
</div>


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

    // Seleccionar los campos ocultos
    var latitudeInput = document.getElementById("maps_latitude");
    var longitudeInput = document.getElementById("maps_longitude");

    // Asignar valores
    latitudeInput.value = maps_latitude;
    longitudeInput.value = maps_longitude;

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

    function obtener_ubicacion() {
        initMap(0);
    }

    function initMap(maps_id) {
        // Coordenadas por defecto
        const defaultCenter = { lat: maps_latitude, lng: maps_longitude };

        // Crear el mapa
        map = new google.maps.Map(document.getElementById("map"), {
            zoom: 20,
            center: defaultCenter
        });

        // Inicializar el marcador
        marker = new google.maps.Marker({
            position: defaultCenter,
            map: map,
            draggable: true,
            title: "Ubicación Seleccionada"
        });

        // Intentar obtener la ubicación del usuario
        if (maps_id == 0) {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    function (position) {
                        const userLocation = {
                            lat: position.coords.latitude,
                            lng: position.coords.longitude
                        };

                        // Centrar el mapa y mover el marcador
                        map.setCenter(userLocation);
                        marker.setPosition(userLocation);

                        latitudeInput.value = userLocation.lat;
                        longitudeInput.value = userLocation.lng;
                    },
                    function (error) {
                        handleLocationError(error);
                    },
                    { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
                );
            }
        } else {
            const userLocation = {
                lat: maps_latitude,
                lng: maps_longitude
            };

            // Centrar el mapa y mover el marcador
            map.setCenter(userLocation);
            marker.setPosition(userLocation);

            latitudeInput.value = userLocation.lat;
            longitudeInput.value = userLocation.lng;
        }

        // Evento para mover el marcador al hacer clic en el mapa 
        map.addListener("click", function (event) {
            marker.setPosition(event.latLng);
            map.panTo(event.latLng);

            latitudeInput.value = event.latLng.lat();
            longitudeInput.value = event.latLng.lng();
        });


        // Configurar el buscador de direcciones
        const input = document.getElementById("search-box");
        const autocomplete = new google.maps.places.Autocomplete(input);
        autocomplete.bindTo("bounds", map);

        // Evento cuando se selecciona una dirección del buscador
        autocomplete.addListener("place_changed", function () {
            const place = autocomplete.getPlace();
            if (!place.geometry) {
                Swal.fire("", "No se encontraron detalles para esta dirección.", "warning");
                return;
            }

            // Centrar el mapa y mover el marcador
            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) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                Swal.fire("", "Permiso de geolocalización denegado. Verifica la configuración del navegador.", "warning");
                reloadPage();

                break;
            case error.POSITION_UNAVAILABLE:
                Swal.fire("", "Información de ubicación no disponible.", "warning");
                reloadPage();

                break;
            case error.TIMEOUT:
                Swal.fire("", "La solicitud de geolocalización tardó demasiado.", "warning");
                reloadPage();
                break;
            default:
                Swal.fire("", "Error desconocido al obtener la ubicación.", "warning");
                reloadPage();
                break;
        }
    }

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



{% block scripts %}


<script>
    $(document).ready(function () {
        var buttons = "Bfrtlip";

        var csrfToken = "{{ csrf_token }}";
        var user_id = "{{ user_id }}";
        var tipo_usuario = "{{ tipo_usuario }}";
        var fullName = "{{ fullName }}";


        $('#btnGuardar').click(function (e) {
            e.preventDefault();

            if (maps_id == 0) {
                $('#modalGuardarMapaLabel').text('NUEVA UBICACION');
            } else {
                $('#modalGuardarMapaLabel').text('EDITAR UBICACION');
            }

            $('#formMapa').trigger('reset');
            $('#modalGuardarMapa').modal('show');
        });



        $('#formMapa').submit(function (e) {
            e.preventDefault();

            maps_name = $('#nombreUbicacion').val();
            maps_latitude = $('#maps_latitude').val();
            maps_longitude = $('#maps_longitude').val();

            if (!$('#nombreUbicacion').val()) {
                Swal.fire("", "Debes definir un nombre a tu direccion!", "warning");
            } else {
                $.ajax({
                    url: `{% url 'maps_insert_update_ubicacion' %}`, // Cambiar por tu URL
                    method: 'POST',
                    data: {
                        maps_id: maps_id,
                        maps_name: maps_name,
                        maps_latitude: maps_latitude,
                        maps_longitude: maps_longitude,
                        csrfmiddlewaretoken: csrfToken
                    },
                    success: function (data) {
                        if (data.save == 1) {

                            if (data.existe == 0) {

                                $('#modalGuardarMapa').modal('hide');

                                Swal.fire({
                                    title: "",
                                    text: "Ubicacion Guardada!",
                                    icon: "success",
                                    allowOutsideClick: false
                                }).then((result) => {
                                    if (result.isConfirmed) {
                                        window.location = "{% url 'personalMap' %}";
                                    } else {
                                        window.location = "{% url 'personalMap' %}";
                                    }
                                });
                            } else {
                                Swal.fire("", "Ya has guardado una Ubicacion con este Nombre!", "warning");
                            }



                        } else {
                            console.log("Error D: " + data.error);
                        }
                    }
                });
            }

        });



    });
</script>





{% endblock %}