{% extends "base.html" %}
{% block title %}Asistencia{% endblock %}
{% block page_title %}📍 Control de Asistencia{% endblock %}

{% block content %}
<div class="flex-between mb-20">
  <div>
    <h3 style="color:var(--accent-gold); margin:0;">{{ hoy.strftime('%A %d de %B de %Y').capitalize() }}</h3>
    <p class="text-muted" style="font-size:13px;">Registro de entrada/salida con validación GPS</p>
  </div>
  <a href="{{ url_for('reporte_asistencia') }}" class="btn btn-secondary btn-sm">📊 Ver reporte</a>
</div>

<!-- Registrar asistencia -->
<div class="card" style="border-left:4px solid var(--accent-gold);">
  <div class="card-header">
    <div class="card-title">📍 Marcar Asistencia</div>
    <span id="gpsStatus" class="badge badge-warning">Obteniendo GPS...</span>
  </div>

  <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;">
    <div class="form-group" style="margin-bottom:0;">
      <label>👤 Empleado</label>
      <select id="empleadoSel">
        <option value="">— Seleccionar empleado —</option>
        {% for emp in empleados %}
        <option value="{{ emp.id }}" data-local="{{ emp.local }}">{{ emp.nombre }} ({{ locales[emp.local].nombre if emp.local in locales else emp.local }})</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group" style="margin-bottom:0;">
      <label>🏪 Local</label>
      <select id="localSel">
        <option value="">— Seleccionar local —</option>
        {% for key, cfg in locales.items() %}
        <option value="{{ key }}">{{ cfg.icono }} {{ cfg.nombre }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <div style="display:flex; gap:12px;">
    <button class="btn btn-primary" id="btnEntrada" onclick="marcarAsistencia('entrada')">✅ Marcar Entrada</button>
    <button class="btn btn-secondary" id="btnSalida" onclick="marcarAsistencia('salida')">🚪 Marcar Salida</button>
  </div>

  <div id="mensajeGPS" style="margin-top:12px; display:none;"></div>
</div>

<!-- Registros del día -->
<div class="card">
  <div class="card-header">
    <div class="card-title">Registros de hoy</div>
    <span class="badge badge-info">{{ registros_hoy|length }} registros</span>
  </div>

  {% if registros_hoy %}
  <table class="table">
    <thead>
      <tr>
        <th>Empleado</th>
        <th>Local</th>
        <th>Entrada</th>
        <th>Salida</th>
        <th>Horas</th>
        <th>Dist.</th>
        <th>Dispositivo</th>
        <th>Estado</th>
      </tr>
    </thead>
    <tbody>
      {% for r in registros_hoy %}
      <tr>
        <td><b>{{ r.empleado.nombre }}</b></td>
        <td>{{ locales[r.local].icono if r.local in locales else '🏪' }} {{ locales[r.local].nombre if r.local in locales else r.local }}</td>
        <td style="font-family:monospace;">{{ r.entrada.strftime('%H:%M') if r.entrada else '—' }}</td>
        <td style="font-family:monospace;">{% if r.salida %}{{ r.salida.strftime('%H:%M') }}{% else %}<span class="badge badge-warning">En curso</span>{% endif %}</td>
        <td>{% if r.salida %}{{ '%.1f'|format(r.duracion_horas()) }} hrs{% else %}—{% endif %}</td>
        <td class="text-muted" style="font-size:12px;">{{ '%.0f'|format(r.distancia_entrada) if r.distancia_entrada else '—' }}m</td>
        <td style="font-size:11px; color:var(--text-secondary);" title="{{ r.device_fingerprint or '' }}">
          {{ r.device_info or '—' }}
        </td>
        <td>
          <span class="badge badge-{{ 'success' if r.valida else 'danger' }}">
            {{ '✓ Válida' if r.valida else '✕ Inválida' }}
          </span>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <p class="text-center text-muted" style="padding:30px;">Sin registros de asistencia hoy</p>
  {% endif %}
</div>

{% block extra_js %}
<script>
let userLat = null, userLng = null;

// Obtener GPS del usuario
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    pos => {
      userLat = pos.coords.latitude;
      userLng = pos.coords.longitude;
      document.getElementById('gpsStatus').textContent = '📍 GPS listo';
      document.getElementById('gpsStatus').className = 'badge badge-success';
    },
    err => {
      document.getElementById('gpsStatus').textContent = '❌ GPS no disponible';
      document.getElementById('gpsStatus').className = 'badge badge-danger';
    },
    { enableHighAccuracy: true, timeout: 10000 }
  );
} else {
  document.getElementById('gpsStatus').textContent = '❌ GPS no soportado';
  document.getElementById('gpsStatus').className = 'badge badge-danger';
}

// Auto-seleccionar local según empleado
document.getElementById('empleadoSel').addEventListener('change', function() {
  const local = this.options[this.selectedIndex].dataset.local;
  if (local) document.getElementById('localSel').value = local;
});

function marcarAsistencia(tipo) {
  const empleadoId = document.getElementById('empleadoSel').value;
  const local = document.getElementById('localSel').value;
  const msgEl = document.getElementById('mensajeGPS');

  if (!empleadoId || !local) {
    showMsg('danger', '⚠️ Selecciona un empleado y un local');
    return;
  }
  if (!userLat || !userLng) {
    showMsg('danger', '❌ GPS no disponible. Permite el acceso a tu ubicación.');
    return;
  }

  showMsg('info', '⏳ Registrando...');

  fetch("{{ url_for('registrar_asistencia') }}", {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      empleado_id: empleadoId,
      local: local,
      lat: userLat,
      lng: userLng,
      tipo: tipo
    })
  })
  .then(r => r.json())
  .then(data => {
    if (data.success) {
      showMsg('success', `✅ ${data.mensaje} — ${data.distancia}m del local`);
      setTimeout(() => location.reload(), 2000);
    } else {
      showMsg('danger', `❌ ${data.error}`);
    }
  })
  .catch(e => showMsg('danger', `Error: ${e.message}`));
}

function showMsg(type, text) {
  const el = document.getElementById('mensajeGPS');
  el.style.display = 'block';
  el.innerHTML = `<div class="alert alert-${type}"><span>${text}</span></div>`;
}
</script>
{% endblock %}
{% endblock %}