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

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


{% block body %}

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

<h3>Mapa con buscador y ubicación actual</h3>


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

<hr>

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


<!-- <button type="button" class="btn btn-warning btn-sm px-4 py-2 fw-bold shadow"
    style="font-size: 0.9rem; border-radius: 5px; border: none; white-space: nowrap; width: auto; text-align: center;"
    data-bs-toggle="modal" data-bs-target="#mapsModal">Nuevo</button>

<div id="mapsModal" class="modal fade" tabindex="-1" aria-labelledby="mapsModalLabel" aria-hidden="true"
    data-bs-keyboard="false" data-bs-backdrop="static">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header" style="background-color: cadetblue; color: white;">
                <h5 class="modal-title text-uppercase" id="mapsModalLabel">Mapa</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">



            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-danger" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>l
    </div>
</div> -->


<script>
    let map;
    let marker;

    function initMap() {
        const defaultCenter = { lat: 14.0309, lng: -87.1655 }; // Coordenadas por defecto

        // Crear el mapa
        map = new google.maps.Map(document.getElementById("map"), {
            zoom: 15,
            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 (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);

                    console.log("Latitud: " + userLocation.lat);
                    console.log("Longitud: " + userLocation.lng);
                    alert(`Ubicación actual:\nLatitud: ${userLocation.lat}\nLongitud: ${userLocation.lng}`);
                },
                function (error) {
                    handleLocationError(error);
                },
                { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
            );
        }

        // Evento para mover el marcador al hacer clic en el mapa
        map.addListener("click", function (event) {
            marker.setPosition(event.latLng);
            map.panTo(event.latLng);
            alert(`Nueva posición:\nLatitud: ${event.latLng.lat()}\nLongitud: ${event.latLng.lng()}`);
            console.log("Latitud: " + event.latLng.lat());
            console.log("Longitud: " + 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) {
                alert("No se encontraron detalles para esta dirección.");
                return;
            }

            // Centrar el mapa y mover el marcador
            map.setCenter(place.geometry.location);
            map.setZoom(15);
            marker.setPosition(place.geometry.location);

            alert(`Ubicación seleccionada:\nLatitud: ${place.geometry.location.lat()}\nLongitud: ${place.geometry.location.lng()}`);
            console.log("Latitud: " + place.geometry.location.lat());
            console.log("Longitud: " + place.geometry.location.lng());
        });
    }

    // Manejo detallado de errores
    function handleLocationError(error) {
        switch (error.code) {
            case error.PERMISSION_DENIED:
                alert("Permiso de geolocalización denegado. Verifica la configuración del navegador.");
                break;
            case error.POSITION_UNAVAILABLE:
                alert("Información de ubicación no disponible.");
                break;
            case error.TIMEOUT:
                alert("La solicitud de geolocalización tardó demasiado.");
                break;
            default:
                alert("Error desconocido al obtener la ubicación.");
                break;
        }
    }

    window.onload = initMap;
</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 }}";

    });
</script>





{% endblock %}