{{ block title }}
<div class="header-rosario">
    Nueva ubicación del Graduate School of Business (GSB)
  <div class="header-logos">
    <img src="{% static 'img/GSB2.png' %}" class="logo logo-gsb">
  </div>
</div>
{{ endblock }}

{{ block content }}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet">

<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

  .header-rosario {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e6e2dc;
    color: #800000;
  }

  .header-text {
    font-size: 18px;
    font-weight: 600;
    color: #800000;
  }

  .header-logos {
    display: flex;
    align-items: center;
  }

  .logo {
    height: 72px;
    object-fit: contain;
  }
  body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f5f4f0;
    color: #1a1a1a;
  }
  .gsb-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 14px 40px;
  }

  .instruc {
    background: #fff;
    border-left: 3px solid #800000;
    border-radius: 0 8px 8px 0;
    padding: 13px 15px;
    font-size: 13px;
    line-height: 1.65;
    color: #333;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .instruc strong { font-weight: 600; color: #800000; }

  .pool-wrap {
    background: #fff;
    border: 1.5px dashed #c8c4bc;
    border-radius: 12px;
    padding: 13px;
    margin-bottom: 16px;
  }
  .pool-title {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 10px;
  }
  #opciones-disponibles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 44px;
  }
  #opciones-disponibles:empty::after {
    content: "Todas las ubicaciones han sido clasificadas ✓";
    font-size: 13px;
    color: #27ae60;
    font-style: italic;
    padding: 4px 0;
  }

  .ficha-ubicacion {
    background: #faf9f6;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 7px 14px 7px 10px;
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: transform .12s, box-shadow .12s, border-color .12s;
  }
  .ficha-ubicacion:active { cursor: grabbing; }
  .ficha-ubicacion.dragging-source { opacity: .35; }
  .letra-ind {
    font-weight: 700;
    color: #800000;
    font-size: 12px;
    min-width: 14px;
  }

  .floating-chip {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%) scale(1.06) rotate(1.5deg);
    box-shadow: 0 10px 28px rgba(0,0,0,.18);
    background: #fff;
    border: 1.5px solid #800000;
    border-radius: 20px;
    padding: 8px 16px 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-family: 'IBM Plex Sans', sans-serif;
  }

  .main-layout {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
  }

  .col-ranking {
    flex: 0 0 340px;
    min-width: 0;
  }

  .col-right {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid #e5e2dc;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    min-height: 520px;
    display: flex;
    flex-direction: column;
  }

  .tabs-header {
    display: flex;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
  }
  .tab-btn {
    flex: 1;
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s, background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .tab-btn:hover { background: #faf9f6; color: #555; }
  .tab-btn.active {
    color: #800000;
    border-bottom-color: #800000;
    background: #fff;
  }
  .tab-icon { font-size: 14px; }

  .tab-panel {
    display: none;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 550px;
  }
  .tab-panel.active { display: flex; }

  #map {
    flex: 1;
    width: 100%;
    min-height: 550px;
  }

  .info-panel-hint {
    font-size: 8px;
    color: #aaa;
    padding: 8px 14px 4px;
    font-style: italic;
    flex-shrink: 0;
  }
  .info-panel-note {
    padding: 10px 14px 14px;
    font-size: 11px;
    line-height: 1.45;
    color: #666;
    background: #faf9f6;
    border-top: 1px solid #e5e2dc;
  }
  .info-panel-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 5px 5px 5px;
    flex: 1;
    min-height: 550px;
  }

  .rank-panel {
    background: #fff;
    border: 1px solid #e5e2dc;
    border-radius: 12px;
    padding: 13px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    min-height: 600px;
  }
  .rank-title {
    font-size: 13px;
    font-weight: 550;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: center;
    padding-bottom: 11px;
    margin-bottom: 12px;
    border-bottom: 1px solid #eee;
  }

  .slot-list { display: flex; flex-direction: column; gap: 5px; }

  .slot {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px dashed #d0cdc6;
    border-radius: 9px;
    padding: 8px 10px;
    min-height: 44px;
    background: #faf9f6;
    transition: background .15s, border-color .15s, border-style .15s;
  }
  .slot.over {
    background: #fdf0f0;
    border-color: #800000;
    border-style: solid;
  }
  .slot.filled {
    background: #fff;
    border-style: solid;
    border-color: #e0ddd7;
    cursor: grab;
  }

  .slot-num {
    font-size: 14px;
    font-weight: 600;
    color: #aaa;
    min-width: 22px;
    text-align: right;
    flex-shrink: 0;
    transition: color .2s;
  }
  .slot.filled .slot-num { color: #800000; }

  .slot-content { flex: 1; display: flex; align-items: center; overflow: hidden; }
  .slot-empty-label { font-size: 12px; color: #bbb; font-style: italic; }

  .slot-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1;
    overflow: hidden;
  }
  .slot-chip .letra-ind { font-size: 12px; }
  .slot-chip .slot-name {
    font-size: 12px;
    font-weight: 500;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .drag-grip {
    color: #ccc;
    font-size: 14px;
    flex-shrink: 0;
    cursor: grab;
  }
  .slot-remove {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: #f0ede8;
    color: #999;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
    transition: background .15s, color .15s;
  }
  .slot-remove:hover { background: #fce8e8; color: #c0392b; }

  .status-bar {
    padding: 12px 15px;
    border-radius: 9px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 14px;
    background: #fff8e1;
    color: #7b5e00;
    border: 1px solid #f5d76e;
    transition: background .3s, color .3s, border-color .3s;
    width: 100%;
    display: block;
  }
  .status-bar.done {
    background: #edfbf3;
    color: #1a6b3c;
    border-color: #a8e6c1;
  }

  .info-table-wrap {
    width: 100%;
    overflow-x: auto;
  }

  .info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    background: #fff;
  }

  .info-table th,
  .info-table td {
    border: 1px solid #e5e2dc;
    padding: 9px 10px;
    text-align: left;
    vertical-align: top;
    line-height: 1.4;
  }

  .info-table th {
    background: #faf9f6;
    color: #800000;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .info-table td:first-child,
  .info-table th:first-child {
    text-align: center;
    width: 60px;
    font-weight: 700;
  }

  .attr-map-btn {
    background: none;
    border: none;
    color: #800000;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
  }

  @media (max-width: 750px) {
    .main-layout { flex-direction: column; }
    .col-ranking { flex: none; width: 100%; }
    .col-right { width: 100%; min-height: 380px; }
    #map { min-height: 300px; }
    .info-panel-body { max-height: 300px; }
  }
</style>

<!-- ════════════════════════════════════
     PÁGINA
     ════════════════════════════════════ -->
<div class="gsb-page">

  <div class="instruc">
    Ordena las 10 ubicaciones del <strong>1 (más preferida)</strong> al <strong>10 (menos preferida)</strong>.<br>
    Arrastra cada ficha desde el panel superior hacia un espacio numerado, o entre espacios para reordenar.<br>
    Toca <strong>×</strong> para devolver una ficha. A la derecha puedes consultar el <strong>mapa</strong> o la <strong>información adicional</strong> de cada ubicación.
  </div>

  <!-- POOL DE FICHAS -->
  <div class="pool-wrap">
    <div class="pool-title">Opciones disponibles — arrastra al ranking - da clic para ubicar en el mapa:</div>
    <div id="opciones-disponibles">
      {% for ubi in ubicaciones %}
        <div class="ficha-ubicacion"
             data-id="{{ ubi.letra }}"
             data-name="{{ ubi.nombre }}"
             data-lat="{{ ubi.lat }}"
             data-lng="{{ ubi.lng }}">
          <span class="letra-ind">{{ ubi.letra }}.</span>
          <span>{{ ubi.nombre }}</span>
        </div>
      {% endfor %}
    </div>
  </div>

  <!-- LAYOUT PRINCIPAL -->
  <div class="main-layout">

    <!-- COLUMNA IZQUIERDA: RANKING -->
    <div class="col-ranking">
      <div class="rank-panel">
        <div class="rank-title">Tu ranking (1 = más preferida · 10 = menos preferida)</div>
        <div class="slot-list" id="lista-ranking"></div>
      </div>
    </div>

    <!-- COLUMNA DERECHA: TABS -->
    <div class="col-right">
      <div class="tabs-header">
        <button type="button" class="tab-btn active" id="tab-btn-mapa" onclick="switchTab('mapa')">
          <span class="tab-icon">🗺️</span> Mapa
        </button>
        <button type="button" class="tab-btn" id="tab-btn-info" onclick="switchTab('info')">
          <span class="tab-icon">ℹ️</span> Información
        </button>
      </div>

      <!-- TAB MAPA -->
      <div class="tab-panel active" id="tab-panel-mapa">
        <div id="map"></div>
      </div>

      <!-- TAB INFORMACIÓN -->
      <div class="tab-panel" id="tab-panel-info">
        <div class="info-panel-body" id="info-panel-body"></div>
        <div class="info-panel-note">
          <strong>Nota:</strong> Todas las ubicaciones cuentan con paraderos del SITP cercanos y acceso a ciclorutas a una distancia menor a una cuadra.
        </div>
      </div>

    </div> <!-- /col-right -->
  </div> <!-- /main-layout -->

  <!-- STATUS -->
  <div id="status-alerta" class="status-bar">
    Faltan ubicaciones por clasificar. Arrastra las 10 opciones al ranking para continuar.
  </div>

  <!-- INPUTS OCULTOS + BOTÓN SIGUIENTE -->
  <input type="hidden" name="ranking_lugares"    id="datos_ranking">
  <input type="hidden" name="info_panel_opened"  id="datos_info_opened"  value="0">
  <input type="hidden" name="info_panel_time_ms" id="datos_info_time_ms" value="0">

  <div id="btn-continuar" style="display:none;">{{ next_button }}</div>

</div><!-- /gsb-page -->

<!-- ════════════════════════════════════
     DATOS DESDE OTREE (JSON)
     ════════════════════════════════════ -->
<script>
  const UBICACIONES_DATA = {{ ubicaciones|json }};
</script>

<!-- GOOGLE MAPS -->
<script async src="https://maps.googleapis.com/maps/api/js?key={{ api_key }}&callback=initMap"></script>

<!-- ════════════════════════════════════
     LÓGICA PRINCIPAL
     ════════════════════════════════════ -->
<script>
/* ══════════════════════════════════════
   ESTADO GLOBAL
   ══════════════════════════════════════ */
var slots    = new Array(10).fill(null);
var mapObj   = null;
var markers  = {};

/* Tracking panel de información */
var infoPanelOpened = false;
var infoTabActive   = false;
var infoTabOpenTime = null;
var infoTotalMs     = 0;

/* Estado de drag activo */
var dragState = null;

/* ══════════════════════════════════════
   TABS
   ══════════════════════════════════════ */
function switchTab(tabId) {
  var now = Date.now();
  if (infoTabActive && tabId !== 'info') {
    infoTotalMs += now - infoTabOpenTime;
    infoTabActive = false;
    saveTracking();
  }
  if (tabId === 'info') {
    infoPanelOpened = true;
    infoTabActive   = true;
    infoTabOpenTime = now;
    saveTracking();
  }
  document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
  document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.remove('active'); });
  document.getElementById('tab-btn-' + tabId).classList.add('active');
  document.getElementById('tab-panel-' + tabId).classList.add('active');

  if (tabId === 'mapa' && mapObj) {
    google.maps.event.trigger(mapObj, 'resize');
  }
}

function saveTracking() {
  var ms = infoTotalMs + (infoTabActive && infoTabOpenTime ? Date.now() - infoTabOpenTime : 0);
  document.getElementById('datos_info_opened').value  = infoPanelOpened ? '1' : '0';
  document.getElementById('datos_info_time_ms').value = ms;
}

setInterval(saveTracking, 2000);
document.addEventListener('visibilitychange', saveTracking);
window.addEventListener('beforeunload', saveTracking);

/* ══════════════════════════════════════
   STATUS BAR
   ══════════════════════════════════════ */
function updateStatus() {
  document.getElementById('datos_ranking').value = slots.filter(Boolean).map(function(s) { return s.id; }).join(',');
  saveTracking();
  var vacios  = slots.filter(function(s) { return !s; }).length;
  var bar     = document.getElementById('status-alerta');
  var btnNext = document.getElementById('btn-continuar');
  if (vacios === 0) {
    bar.className = 'status-bar done';
    bar.innerHTML = '¡Excelente! Has clasificado todas las ubicaciones. Ya puedes continuar.';
    btnNext.style.display = 'block';
  } else {
    bar.className = 'status-bar';
    bar.innerHTML = 'Faltan <strong>' + vacios + '</strong> ubicación' + (vacios === 1 ? '' : 'es') + ' por clasificar.';
    btnNext.style.display = 'none';
  }
}

/* ══════════════════════════════════════
   CONSTRUIR SLOTS
   ══════════════════════════════════════ */
function buildSlots() {
  var lista = document.getElementById('lista-ranking');
  lista.innerHTML = '';

  slots.forEach(function(item, i) {
    var div = document.createElement('div');
    div.className = 'slot' + (item ? ' filled' : '');
    div.dataset.idx = i;

    if (item) {
      div.innerHTML =
        '<div class="slot-num">' + (i + 1) + '.</div>' +
        '<div class="slot-content">' +
          '<div class="slot-chip">' +
          '<span class="drag-grip slot-drag-handle">⠿</span>' +
          '<span class="letra-ind">' + item.id + '.</span>' +
          '<span class="slot-name">' + item.name + '</span>' +
        '</div>' +
        '</div>' +
        '<button type="button" class="slot-remove" data-idx="' + i + '" aria-label="Quitar">×</button>';

      (function(slotEl, idx, itemData) {
        var handle = slotEl.querySelector('.slot-drag-handle');

        /* Clic normal en el slot = zoom */
        slotEl.addEventListener('click', function(e) {
          if (e.target.classList.contains('slot-remove')) return;
          if (e.target.closest('.slot-drag-handle')) return;
          enfocarMapa(itemData.lat, itemData.lng);
        });

        /* Doble clic también = zoom */
        slotEl.addEventListener('dblclick', function(e) {
          if (e.target.classList.contains('slot-remove')) return;
          if (e.target.closest('.slot-drag-handle')) return;
          e.preventDefault();
          e.stopPropagation();
          enfocarMapa(itemData.lat, itemData.lng);
        });

        /* Drag SOLO desde el grip */
        if (handle) {
          handle.addEventListener('touchstart', function(e) {
            e.preventDefault();
            e.stopPropagation();
            startDragFromSlot(e.touches[0].clientX, e.touches[0].clientY, idx, slotEl, 'touch');
          }, { passive: false });

          handle.addEventListener('mousedown', function(e) {
            if (e.button !== 0) return;
            e.preventDefault();
            e.stopPropagation();
            startDragFromSlot(e.clientX, e.clientY, idx, slotEl, 'mouse');
          });
        }
      })(div, i, item);

    } else {
      div.innerHTML =
        '<div class="slot-num">' + (i + 1) + '.</div>' +
        '<div class="slot-content">' +
          '<span class="slot-empty-label">Arrastra aquí</span>' +
        '</div>';
    }

    lista.appendChild(div);
  });

  /* Botones de quitar */
  lista.querySelectorAll('.slot-remove').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var idx  = parseInt(btn.dataset.idx);
      var item = slots[idx];
      if (!item) return;
      slots[idx] = null;
      addChipToPool(item);
      buildSlots();
    });
  });

  updateStatus();
  reconcileItems();
}

/* ══════════════════════════════════════
   GHOST FLOTANTE
   ══════════════════════════════════════ */
function makeGhost(sourceEl, x, y) {
  var g = document.createElement('div');
  g.className = 'floating-chip';
  g.innerHTML = sourceEl.innerHTML;
  g.style.left = x + 'px';
  g.style.top  = y + 'px';
  document.body.appendChild(g);
  return g;
}
function moveGhost(g, x, y) { if (g) { g.style.left = x + 'px'; g.style.top = y + 'px'; } }
function killGhost(g) { if (g) g.remove(); }

/* ══════════════════════════════════════
   HIGHLIGHT DE SLOT
   ══════════════════════════════════════ */
var highlighted = null;
function hlSlot(idx) {
  clearHl();
  var el = document.getElementById('lista-ranking').children[idx];
  if (el) { el.classList.add('over'); highlighted = idx; }
}
function clearHl() {
  if (highlighted !== null) {
    var el = document.getElementById('lista-ranking').children[highlighted];
    if (el) el.classList.remove('over');
    highlighted = null;
  }
}

/* Slot bajo coordenadas */
function slotAt(x, y) {
  var els = document.getElementById('lista-ranking').children;
  for (var i = 0; i < els.length; i++) {
    var r = els[i].getBoundingClientRect();
    if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom) return i;
  }
  return -1;
}

/* ══════════════════════════════════════
   startDragFromSlot
   ══════════════════════════════════════ */
function startDragFromSlot(x, y, idx, slotEl, mode) {
  var item = slots[idx];
  if (!item) return;

  /* Guardamos el item; el slot queda null mientras dura el drag */
  slots[idx] = null;

  var ghost = makeGhost(slotEl, x, y);
  slotEl.classList.add('dragging-source');
  dragState = { item: item, source: 'slot', fromIdx: idx, ghostEl: ghost };

  function finalizarSlotDrag(toIdx) {
    killGhost(ghost);
    clearHl();
    dragState = null;

    if (toIdx >= 0 && toIdx < 10) {
      /* Drop en un slot válido: intercambiar */
      var displaced = slots[toIdx];
      slots[toIdx]  = item;
      if (displaced) {
        slots[idx] = displaced;
      }
      /* slots[idx] ya es null si no hubo desplazado, ok */
    } else {
      /* Drop inválido (fuera del ranking): volver al pool */
      slots[idx] = null; /* ya es null, pero explícito */
      addChipToPool(item);
    }

    buildSlots();
  }

  if (mode === 'touch') {
    var onMove = function(e) {
      e.preventDefault();
      var t = e.touches[0];
      moveGhost(ghost, t.clientX, t.clientY);
      var i = slotAt(t.clientX, t.clientY);
      if (i >= 0) hlSlot(i); else clearHl();
    };
    var onEnd = function(e) {
      document.removeEventListener('touchmove', onMove);
      document.removeEventListener('touchend', onEnd);
      slotEl.classList.remove('dragging-source');
      var t = e.changedTouches[0];
      finalizarSlotDrag(slotAt(t.clientX, t.clientY));
    };
    document.addEventListener('touchmove', onMove, { passive: false });
    document.addEventListener('touchend', onEnd);

  } else {
    var onMove = function(e) {
      moveGhost(ghost, e.clientX, e.clientY);
      var i = slotAt(e.clientX, e.clientY);
      if (i >= 0) hlSlot(i); else clearHl();
    };
    var onUp = function(e) {
      document.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseup', onUp);
      slotEl.classList.remove('dragging-source');
      finalizarSlotDrag(slotAt(e.clientX, e.clientY));
    };
    document.addEventListener('mousemove', onMove);
    document.addEventListener('mouseup', onUp);
  }
}

/* Red de seguridad: si algún item no aparece ni en slots ni en el pool DOM,
   lo devuelve al pool. Se llama al final de cada buildSlots(). */
function reconcileItems() {
  var presentes = {};
  slots.forEach(function(s) { if (s) presentes[s.id] = true; });
  document.querySelectorAll('#opciones-disponibles .ficha-ubicacion').forEach(function(chip) {
    presentes[chip.dataset.id] = true;
  });
  UBICACIONES_DATA.forEach(function(ubi) {
    if (!presentes[ubi.letra]) {
      addChipToPool({ id: ubi.letra, name: ubi.nombre, lat: ubi.lat, lng: ubi.lng });
    }
  });
}

/* ══════════════════════════════════════
   CHIPS DEL POOL
   ══════════════════════════════════════ */
function addChipToPool(item) {
  var pool = document.getElementById('opciones-disponibles');
  var chip = document.createElement('div');
  chip.className    = 'ficha-ubicacion';
  chip.dataset.id   = item.id;
  chip.dataset.name = item.name;
  chip.dataset.lat  = item.lat;
  chip.dataset.lng  = item.lng;
  chip.innerHTML    = '<span class="letra-ind">' + item.id + '.</span><span>' + item.name + '</span>';
  attachPoolChip(chip);
  pool.appendChild(chip);
}

function attachPoolChip(chip) {
  /* ✅ FIX: coordenadas siempre desde UBICACIONES_DATA (fuente de verdad),
     no desde data-lat/data-lng del DOM, que pueden tener formato incorrecto
     según el locale del servidor o errores de template. */
  var letra = chip.dataset.id;
  var ubiData = null;
  for (var k = 0; k < UBICACIONES_DATA.length; k++) {
    if (UBICACIONES_DATA[k].letra === letra) { ubiData = UBICACIONES_DATA[k]; break; }
  }
  var item = {
    id:   letra,
    name: chip.dataset.name,
    lat:  ubiData ? ubiData.lat : 0,
    lng:  ubiData ? ubiData.lng : 0
  };

  /* ══ TOUCH ══ */
  chip.addEventListener('touchstart', function(e) {
    e.preventDefault();
    var t = e.touches[0];
    var startX = t.clientX, startY = t.clientY;
    var ghost = null, hasDragged = false;

    var onMove = function(ev) {
      ev.preventDefault();
      var tt = ev.touches[0];
      if (!hasDragged) {
        if (Math.abs(tt.clientX - startX) < 5 && Math.abs(tt.clientY - startY) < 5) return;
        hasDragged = true;
        ghost = makeGhost(chip, tt.clientX, tt.clientY);
        chip.classList.add('dragging-source');
        dragState = { item: item, source: 'pool', fromIdx: null, ghostEl: ghost };
      }
      moveGhost(ghost, tt.clientX, tt.clientY);
      var i = slotAt(tt.clientX, tt.clientY);
      if (i >= 0) hlSlot(i); else clearHl();
    };

    var onEnd = function(ev) {
      document.removeEventListener('touchmove', onMove);
      document.removeEventListener('touchend', onEnd);

      if (!hasDragged) {
        dragState = null;
        enfocarMapa(item.lat, item.lng);
        return;
      }

      chip.classList.remove('dragging-source');
      var tt = ev.changedTouches[0];
      var toIdx = slotAt(tt.clientX, tt.clientY);
      killGhost(ghost);
      clearHl();
      dragState = null; /* ← antes de cualquier efecto secundario */

      if (toIdx >= 0 && toIdx < 10) {
        var displaced = slots[toIdx];
        slots[toIdx] = item;
        chip.remove();
        if (displaced) addChipToPool(displaced);
      }
      /* Si toIdx inválido: el chip sigue en el pool (no se removió) */
      buildSlots();
    };

    document.addEventListener('touchmove', onMove, { passive: false });
    document.addEventListener('touchend', onEnd);
  }, { passive: false });

  /* ══ MOUSE ══ */
  chip.addEventListener('mousedown', function(e) {
    if (e.button !== 0) return;

    var startX = e.clientX, startY = e.clientY;
    var hasStartedDrag = false, ghost = null;

    var onMove = function(ev) {
      if (!hasStartedDrag) {
        if (Math.abs(ev.clientX - startX) < 5 && Math.abs(ev.clientY - startY) < 5) return;
        hasStartedDrag = true;
        ghost = makeGhost(chip, startX, startY);
        chip.classList.add('dragging-source');
        dragState = { item: item, source: 'pool', fromIdx: null, ghostEl: ghost };
      }
      moveGhost(ghost, ev.clientX, ev.clientY);
      var i = slotAt(ev.clientX, ev.clientY);
      if (i >= 0) hlSlot(i); else clearHl();
    };

    var onUp = function(ev) {
      document.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseup', onUp);

      if (!hasStartedDrag) {
        dragState = null;
        enfocarMapa(item.lat, item.lng);
        return;
      }

      chip.classList.remove('dragging-source');
      var toIdx = slotAt(ev.clientX, ev.clientY);
      killGhost(ghost);
      clearHl();
      dragState = null; /* ← antes de cualquier efecto secundario */

      if (toIdx >= 0 && toIdx < 10) {
        var displaced = slots[toIdx];
        slots[toIdx] = item;
        chip.remove();
        if (displaced) addChipToPool(displaced);
      }
      /* Si toIdx inválido: el chip sigue en el pool (no se removió) */
      buildSlots();
    };

    document.addEventListener('mousemove', onMove);
    document.addEventListener('mouseup', onUp);
  });
}

/* ══════════════════════════════════════
   GOOGLE MAPS
   ══════════════════════════════════════ */
function initMap() {
  mapObj = new google.maps.Map(document.getElementById('map'), {
    mapTypeControl: false,
    streetViewControl: false,
    fullscreenControl: true,
    zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_TOP }
  });

  var bounds = new google.maps.LatLngBounds();

  UBICACIONES_DATA.forEach(function(ubi) {
    var marker = new google.maps.Marker({
      position: { lat: ubi.lat, lng: ubi.lng },
      map: mapObj,
      title: ubi.nombre,
      label: { text: ubi.letra, color: '#fff', fontWeight: '700', fontSize: '13px' },
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 14,
        fillColor: '#800000',
        fillOpacity: 1,
        strokeColor: '#fff',
        strokeWeight: 2,
        labelOrigin: new google.maps.Point(0, 0)
      }
    });
    markers[ubi.letra] = marker;
    bounds.extend({ lat: ubi.lat, lng: ubi.lng });
    marker.addListener('click', function() { enfocarMapa(ubi.lat, ubi.lng); });
  });

  mapObj.fitBounds(bounds);
}

/* ══════════════════════════════════════
   FIX: enfocarMapa
   Primer resize inmediato + segundo con
   más delay antes del pan/zoom.
   ══════════════════════════════════════ */
function enfocarMapa(lat, lng) {
  if (!mapObj) return;

  switchTab('mapa');

  /* Resize inmediato para cuando el tab ya estaba visible */
  google.maps.event.trigger(mapObj, 'resize');

  /* Segundo resize con margen suficiente para el cambio de tab */
  setTimeout(function() {
    google.maps.event.trigger(mapObj, 'resize');
    mapObj.panTo({ lat: lat, lng: lng });
    mapObj.setZoom(16);
  }, 250);
}

/* ══════════════════════════════════════
   PANEL DE INFORMACIÓN
   ══════════════════════════════════════ */
var ATTR_MAP = {
  A: { park: 2,  tm: 'Calle 100 (24 min)',     cc: 'Plaza 102 (13 min), Santa Ana (23 min)' },
  B: { park: 5,  tm: 'Calle 100 (2 min)',       cc: 'Galería 93 (18 min), Centro 93 (22 min)' },
  C: { park: 3,  tm: 'Calle 100 (7 min)',       cc: 'Galería 93 (13 min), Plaza 102 (17 min)' },
  D: { park: 3,  tm: 'Flores (17 min)',          cc: 'Avenida Chile (8 min), Andino (20 min)' },
  E: { park: 12, tm: 'Calle 100 (30 min)',      cc: 'Chicó Centro (8 min), Andino (24 min)' },
  F: { park: 1,  tm: 'Calle 100 (41 min)',      cc: 'Portobello (19 min), Santa Ana (21 min)' },
  G: { park: 5,  tm: 'Calle 76 (17 min)',       cc: 'Avenida Chile (11 min), Atlantis (14 min)' },
  H: { park: 9,  tm: 'Museo Nacional (4 min)',  cc: 'San Martín (8 min), Torres de Bavaria (8 min)' },
  I: { park: 7,  tm: 'Virrey (12 min)',          cc: 'Chicó (1 min), Centro 93 (2 min)' },
  J: { park: 5,  tm: 'Calle 76 (16 min)',       cc: 'Avenida Chile (12 min), Atlantis (13 min)' }
};

function buildInfoPanel() {
  var body = document.getElementById('info-panel-body');

  if (!body) {
    console.error('No existe el contenedor #info-panel-body');
    return;
  }

  if (!Array.isArray(UBICACIONES_DATA)) {
    console.error('UBICACIONES_DATA no existe o no es un arreglo');
    body.innerHTML = '<p>Error al cargar la información.</p>';
    return;
  }

  var html = '<div class="info-table-wrap">' +
    '<table class="info-table">' +
      '<thead>' +
        '<tr>' +
          '<th></th>' +
          '<th>Parqueaderos a 500m</th>' +
          '<th>Transmilenio más cercano (caminando)</th>' +
          '<th>Centros comerciales cercanos (caminando)</th>' +
        '</tr>' +
      '</thead>' +
      '<tbody>';

  UBICACIONES_DATA.forEach(function(ubi) {
    var a = ATTR_MAP[ubi.letra] || {};

    html += '<tr>' +
      '<td>' + (ubi.letra || '') + '</td>' +
      '<td>' + (a.park !== undefined ? a.park : '') + '</td>' +
      '<td>' + (a.tm || '') + '</td>' +
      '<td>' + (a.cc || '') + '</td>' +
    '</tr>';
  });

  html += '</tbody></table></div>';
  body.innerHTML = html;
}

/* ══════════════════════════════════════
   INICIALIZACIÓN
   ══════════════════════════════════════ */
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('#opciones-disponibles .ficha-ubicacion').forEach(function(chip) {
    attachPoolChip(chip);
  });

  buildSlots();
  buildInfoPanel();
});
</script>

{{ endblock }}