{% extends "avistamientos/base.html" %}

{% block title %}Reportar Fondeo - GEN-GOB{% endblock %}

{% block extra_css %}
<style>
  #mapa { 
    height: 320px; 
    width: 100%; 
    border-radius: 8px; 
    margin-bottom: 0.5rem; 
    border: 1px solid #ccc; 
  }
  .campo { margin-bottom: 1.2rem; }
  label { display: block; font-weight: bold; margin-bottom: 0.3rem; }
  input[type="text"], input[type="email"], input[type="date"], textarea { 
    width: 100%; 
    padding: 0.6rem; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
  }
  .ayuda-mapa { font-size: 0.9rem; color: #666; margin-bottom: 1.2rem; }
  .coordenadas-indicador { 
    background: #f0f4f8; 
    padding: 0.5rem 0.8rem; 
    border-radius: 4px; 
    font-family: monospace; 
    display: inline-block; 
  }
  button[type="submit"] { 
    background-color: #0d6efd; 
    color: white; 
    border: none; 
    padding: 0.75rem 1.5rem; 
    font-size: 1rem; 
    border-radius: 4px; 
    cursor: pointer; 
  }
  button[type="submit"]:hover { background-color: #0b5ed7; }
  .errores { color: #dc3545; font-size: 0.9rem; margin-top: 0.25rem; }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <h1>Reportar Fondeo</h1>
    <p>Haz clic en el mapa para marcar la ubicación exacta del avistamiento.</p>

    <div id="mapa"></div>
    <div class="ayuda-mapa">
      Punto seleccionado:
      <span id="coord-texto" class="coordenadas-indicador">Ninguno (haz clic en el mapa)</span>
    </div>

    <form method="post" enctype="multipart/form-data">
      {% csrf_token %} 
      {% if form.non_field_errors %}
        <div style="background-color: #f8d7da; color: #842029; padding: 0.8rem; border-radius: 4px; margin-bottom: 1.2rem; border: 1px solid #f5c2c7;">
          {{ form.non_field_errors }}
        </div>
      {% endif %}
      {{ form.latitud }} 
      {{ form.longitud }} 
    
      {% if form.latitud.errors or form.longitud.errors %}
        <div class="errores">Debes seleccionar un punto en el mapa.</div>
      {% endif %}
    
      <div class="campo">
        <label for="{{ form.fecha_avistamiento.id_for_label }}">{{ form.fecha_avistamiento.label }} *</label>
        {{ form.fecha_avistamiento }} 
        {% if form.fecha_avistamiento.errors %}
          <div class="errores">{{ form.fecha_avistamiento.errors }}</div>
        {% endif %}
      </div>
    
      <div class="campo">
        <label for="{{ form.descripcion.id_for_label }}">{{ form.descripcion.label }} *</label>
        {{ form.descripcion }} 
        {% if form.descripcion.errors %}
          <div class="errores">{{ form.descripcion.errors }}</div>
        {% endif %}
      </div>
    
      <div class="campo">
        <label for="{{ form.foto.id_for_label }}">{{ form.foto.label }} (opcional)</label>
        {{ form.foto }} 
        {% if form.foto.errors %}
          <div class="errores">{{ form.foto.errors }}</div>
        {% endif %}
      </div>
    
      <div class="campo">
        <label for="{{ form.contacto.id_for_label }}">{{ form.contacto.label }}</label>
        {{ form.contacto }} 
        {% if form.contacto.errors %}
          <div class="errores">{{ form.contacto.errors }}</div>
        {% endif %}
      </div>
    
      <button type="submit">Enviar reporte</button>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
  const mapa = L.map("mapa").setView([38.9, 1.43], 9);

  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
    attribution: "© OpenStreetMap",
  }).addTo(mapa);

  let marcador;
  const inputLat = document.getElementById("id_latitud");
  const inputLng = document.getElementById("id_longitud");
  const coordTexto = document.getElementById("coord-texto");

  mapa.on('click', function(e) {
    const { lat, lng } = e.latlng;

    inputLat.value = lat;
    inputLng.value = lng;

    coordTexto.textContent = `${lat.toFixed(5)}, ${lng.toFixed(5)}`;

    if (marcador) {
        marcador.setLatLng(e.latlng);
    } else {
        marcador = L.marker(e.latlng).addTo(mapa);
    }
  });
</script>
{% endblock %}