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

{% block extra_head %}
  {# Carga la API de Google Maps con Places y Geocoding #}
  <script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCqHv0tnZpa1zHMWNSr7uvOE50RLvkSlrs&libraries=places"
    async defer>
  </script>
{% endblock %}

{% 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 mb-2">
    <div class="col-sm-2 me-2">
      <button class="btn btn-sm btn-warning w-100" onclick="obtener_ubicacion()">
        Obtener Punto Actual
      </button>
    </div>
    <div class="col-sm-2">
      <button class="btn btn-sm btn-danger w-100" id="btnGuardar">
        Guardar Punto Actual
      </button>
    </div>
  </div>
{% endif %}

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

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

<hr>

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

{# Modal para nombrar y guardar la ubicación #}
<div
  id="modalGuardarMapa"
  class="modal fade"
  tabindex="-1"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
>
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-info text-white">
        <h5 class="modal-title" id="modalGuardarMapaLabel"></h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form id="formMapa">
        <div class="modal-body">
          <label class="form-label" for="nombreUbicacion">Nombre Ubicación</label>
          <input
            id="nombreUbicacion"
            class="form-control form-control-sm"
            placeholder="Nombre Ubicación"
            value="{{ maps_name|default:'' }}"
          >
        </div>
        <div class="modal-footer">
          <button 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>
  </div>
</div>

<script>
  let map, marker;
  const defaultAddress = 'Choluteca, Choluteca, Honduras';
  const maps_opcion   = parseInt("{{ maps_opcion|default:'0' }}");
  const initialLat    = parseFloat("{{ maps_latitude|default:'0' }}");
  const initialLng    = parseFloat("{{ maps_longitude|default:'0' }}");

  function initMap() {
    // 1. Inicializa el mapa en Choluteca
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: { lat: 13.3009, lng: -87.1909 }
    });
    marker = new google.maps.Marker({ map, draggable: true });

    // 2. Autocomplete y Geocoder
    const geocoder     = new google.maps.Geocoder();
    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) {
        return Swal.fire('', 'No se encontraron detalles para esta dirección.', 'warning');
      }
      setLocation(place.geometry.location, place.formatted_address);
    });

    // 3. Si estamos en modo "nueva ubicación", geocode de Choluteca
    if (maps_opcion === 0) {
      geocoder.geocode({ address: defaultAddress }, (results, status) => {
        if (status === 'OK' && results[0]) {
          setLocation(results[0].geometry.location, results[0].formatted_address);
        }
      });

    // 4. Si es edición, usar coordenadas del backend
    } else {
      setLocation(
        { lat: initialLat, lng: initialLng },
        "{{ maps_name|default:'' }}"
      );
    }

    // 5. Clic en mapa mueve el marcador
    map.addListener('click', e => setLocation(e.latLng, ''));
  }

  // Mueve el marcador, centra el mapa y actualiza inputs
  function setLocation(latLng, address) {
    map.setCenter(latLng);
    map.setZoom(15);
    marker.setPosition(latLng);
    document.getElementById('maps_latitude').value  = latLng.lat();
    document.getElementById('maps_longitude').value = latLng.lng();
    if (address) document.getElementById('search-box').value = address;
  }

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

  // 6. Muestra la ubicación actual sin reinicializar el mapa
  function obtener_ubicacion() {
    if (!navigator.geolocation) {
      return alert('Tu navegador no soporta geolocalización.');
    }
    navigator.geolocation.getCurrentPosition(
      pos => {
        const loc = { lat: pos.coords.latitude, lng: pos.coords.longitude };
        setLocation(loc, '');
      },
      err => handleLocationError(err),
      { enableHighAccuracy: true, timeout: 5000, maximumAge: 0 }
    );
  }

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

{% block scripts %}
<script>
  $(function() {
    const csrf   = '{{ csrf_token }}';
    const mapsId = parseInt("{{ maps_id|default:'0' }}");

    $('#btnGuardar').click(e => {
      e.preventDefault();
      $('#modalGuardarMapaLabel').text(
        mapsId === 0 ? 'NUEVA UBICACIÓN' : 'EDITAR UBICACIÓN'
      );
      $('#formMapa').trigger('reset');
      $('#modalGuardarMapa').modal('show');
    });

    $('#formMapa').submit(e => {
      e.preventDefault();
      const name = $('#nombreUbicacion').val().trim();
      const lat  = $('#maps_latitude').val();
      const lng  = $('#maps_longitude').val();
      if (!name) {
        return Swal.fire('', 'Debe nombrar la ubicación.', 'warning');
      }

      $.post("{% url 'maps_insert_update_ubicacion' %}", {
        maps_id: mapsId,
        maps_name: name,
        maps_latitude: lat,
        maps_longitude: lng,
        csrfmiddlewaretoken: csrf
      }).done(data => {
        if (data.save == 1 && data.existe == 0) {
          $('#modalGuardarMapa').modal('hide');
          Swal.fire({ text: '¡Ubicación guardada!', icon: 'success' })
            .then(() => window.location = "{% url 'personalMap' %}");
        } else {
          Swal.fire('', data.existe
            ? 'Ya existe una ubicación con ese nombre.'
            : 'Error al guardar.', 'warning');
        }
      });
    });
  });
</script>
{% endblock %}