<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mapa Cobertura Red Móvil 4G/5G</title>

  <link href="https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

  <!-- {# cdn manejo csv #} -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.min.js"></script>

  <!-- {# estilos css #} -->
  <link rel="stylesheet" href="{{ url_for('static', filename='css/index/tooltip.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/index/notifications.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='css/index/loading.css') }}">
  <link rel="stylesheet" href="{{url_for('static', filename='css/index/index.css')}}">  

</head>

<body>

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


<!-- FORMULARIO MEJORADO CON COLLAPSE -->
<div id="pin-form">
    <!-- COLLAPSE PRINCIPAL DEL FORMULARIO -->
    <input type="checkbox" id="collapse-toggle" />
    
    <!-- CABECERA COLAPSABLE -->
    <label for="collapse-toggle" class="form-header collapsible-header">
      <div class="header-left">
        <i class="fas fa-map-pin"></i>
        <strong>Marcadores</strong>
      </div>
      <div class="header-right">
        <i class="fas fa-chevron-down collapse-icon" id="collapse-icon" style="color: white !important;"></i>
      </div>
    </label>

    <!-- CONTENIDO COLAPSABLE -->
    <div class="collapsible-content">
      
      <!-- COLLAPSE 1: Formulario de carga unitaria -->
      <div class="collapse-section">
        <input type="checkbox" id="collapse-toggle-1" />
        <label for="collapse-toggle-1" class="collapse-header">
          <span><i class="fa-solid fa-location-crosshairs"></i> Carga Individual</span>
          <i class="fas fa-chevron-down collapse-icon"></i>
        </label>
        <div class="collapse-content">

          <div class="form-group">
            <label for="pin-label">Etiqueta</label>
            <input type="text" id="pin-label" class="form-input" placeholder="Ej. Sitio A, Torre B, etc." />
          </div>

          <div class="form-group">
            <label for="pin-lat">Latitud</label>
            <input type="number" id="pin-lat" class="form-input" step="0.0001" placeholder="19.3818" />
          </div>

          <div class="form-group">
            <label for="pin-lng">Longitud</label>
            <input type="number" id="pin-lng" class="form-input" step="0.0001" placeholder="-99.1766" />
          </div>

          <button id="add-pin" type="button" class="button-primary">
            <i class="fas fa-plus-circle"></i> Colocar Marcador
          </button>
        </div>
      </div>

      <!-- COLLAPSE 2: Carga masiva -->
      <div class="collapse-section">
        <input type="checkbox" id="collapse-toggle-2" />
        <label for="collapse-toggle-2" class="collapse-header">
          <span><i class="fa-solid fa-file-csv"></i> Carga Masiva Marcadores</span>
          <i class="fas fa-chevron-down collapse-icon"></i>
        </label>
        <div class="collapse-content">
          <div class="csv-section">

            <div class="tooltip">
              <i class="fas fa-info-circle" style="color: #1976d2; font-size: 0.9rem;"></i>
              <span class="tooltip-text">El archivo CSV debe contener columnas: etiqueta, latitud (eje. 19.3818), longitud (eje. -99.1766 ). Use la
                plantilla como referencia.</span>
            </div>
            <a href="{{url_for('download_file', filename='template_coordenadas_pines.csv')}}" class="button-secondary">
              <i class="fas fa-download"></i> Descargar Plantilla
            </a>

            <input type="file" id="csv-file" class="csv-file-input" accept=".csv" />
            <label for="csv-file" class="file-upload-label">
              <i class="fas fa-upload"></i> Subir Plantilla
            </label>

            
          </div>
        </div>
      </div>

      <!-- COLLAPSE 3: Descarga de capas -->
      <div class="collapse-section">
        <input type="checkbox" id="collapse-toggle-3" />
        <label for="collapse-toggle-3" class="collapse-header">
          <span><i class="fa-regular fa-map"></i> Descarga de Capas</span>
          <i class="fas fa-chevron-down collapse-icon"></i>
        </label>
        <div class="collapse-content">
          <div style="padding: 16px;">
            <a href="{{url_for('download_file', filename='hex_mapa2025-10-01_2025-12-14.gpkg')}}" class="button-secondary">
              Descargar Capa de Cobertura (gpkg)
            </a>
          </div>
        </div>
      </div>


    </div>
          <!-- SECCIÓN NO COLAPSABLE: Estado seleccionado -->
      <div class="active-state-section">
        <div class="form-group" style="padding: 0; margin: 0;">
          <label style="color: #9b2226; font-weight: 600;">Estado seleccionado:</label>
          <span id="nombre-estado-activo" style="font-weight: bold; color: #9b2226;">
            Ninguno
          </span>
        </div>
      </div>

  </div>













  <!-- INDICADOR DE CARGA -->
  <div id="loading-indicator" class="loading-indicator">
    <div class="loading-spinner"></div>
    <div class="loading-text">Cargando datos...</div>
  </div>


  <!-- NOTIFICACIÓN (se añadirá dinámicamente) -->
  <div id="notification-area"></div>

  <!-- {# CDN map libre #} -->
  <script src="https://unpkg.com/maplibre-gl@3.6.0/dist/maplibre-gl.js"></script>

  <!-- {# 1.- database hexagonos cobertura #} -->
  <script src="{{url_for('static', filename='js/index/01_cobertura.js')}}"></script>

  <!-- {# 2.- poligonos estados #} -->
  <script src="{{url_for('static', filename='js/index/02_edos-poligonos.js')}}" type="module"></script>

  <!-- carga de pines unitarios -->
  <script src="{{url_for('static', filename='js/index/03_carga_pin_unitarios.js')}}" type="module"></script>

  <!-- carga de pines masivos -->
  <script src="{{url_for('static', filename='js/index/04_carga_pines_masivo.js')}}" type="module"></script>

  <!-- {# Inicialización del mapa #} -->
  <!-- <script src="{{ url_for('static', filename='js/index/map-init.js') }}"></script> -->

  <!-- {# collapse #} -->
  <!-- <script src="{{ url_for('static', filename='js/index/05_collapse.js') }}" type="module"></script> -->



</body>

</html>