{% extends "base.html" %}
{% block title %}Reporte de Asistencia{% endblock %}
{% block page_title %}📊 Reporte de Asistencia{% endblock %}

{% block content %}

<!-- Filtros -->
<div class="card">
  <form method="GET" style="display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;">
    <div class="form-group" style="margin-bottom:0;">
      <label>Desde</label>
      <input type="date" name="fecha_from" value="{{ fecha_from }}" style="width:160px;">
    </div>
    <div class="form-group" style="margin-bottom:0;">
      <label>Hasta</label>
      <input type="date" name="fecha_to" value="{{ fecha_to }}" style="width:160px;">
    </div>
    <div class="form-group" style="margin-bottom:0;">
      <label>Empleado</label>
      <select name="empleado_id" style="width:200px;">
        <option value="">Todos</option>
        {% for emp in empleados %}
        <option value="{{ emp.id }}" {% if empleado_sel == emp.id %}selected{% endif %}>{{ emp.nombre }}</option>
        {% endfor %}
      </select>
    </div>
    <button type="submit" class="btn btn-primary btn-sm">🔍 Filtrar</button>
    <a href="{{ url_for('reporte_asistencia') }}" class="btn btn-secondary btn-sm">✕ Limpiar</a>
  </form>
</div>

<!-- Resumen -->
<div class="stats-grid" style="grid-template-columns:repeat(3,1fr);">
  <div class="stat-box">
    <div class="stat-label">Total registros</div>
    <div class="stat-value" style="font-size:28px;">{{ registros|length }}</div>
  </div>
  <div class="stat-box">
    <div class="stat-label">Días con asistencia</div>
    <div class="stat-value" style="font-size:28px; color:var(--accent-green);">{{ registros|selectattr('entrada')|list|length }}</div>
  </div>
  <div class="stat-box">
    <div class="stat-label">Horas promedio/día</div>
    {% set total_horas = namespace(v=0) %}
    {% set con_salida = namespace(n=0) %}
    {% for r in registros %}{% if r.salida %}{% set total_horas.v = total_horas.v + r.duracion_horas() %}{% set con_salida.n = con_salida.n + 1 %}{% endif %}{% endfor %}
    <div class="stat-value" style="font-size:28px; color:var(--accent-gold);">
      {{ '%.1f'|format(total_horas.v / con_salida.n if con_salida.n > 0 else 0) }}h
    </div>
  </div>
</div>

<!-- Tabla -->
<div class="card">
  {% if registros %}
  <table class="table">
    <thead>
      <tr>
        <th>Fecha</th>
        <th>Empleado</th>
        <th>Local</th>
        <th>Entrada</th>
        <th>Salida</th>
        <th>Horas</th>
        <th>Dist. Entrada</th>
        <th>Estado</th>
      </tr>
    </thead>
    <tbody>
      {% for r in registros %}
      <tr>
        <td style="font-family:monospace;">{{ r.fecha.strftime('%d/%m/%Y') }}</td>
        <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;">{{ r.salida.strftime('%H:%M') if r.salida else '—' }}</td>
        <td>{% if r.salida %}{{ '%.1f'|format(r.duracion_horas()) }} hrs{% else %}<span class="badge badge-warning">En curso</span>{% endif %}</td>
        <td class="text-muted" style="font-size:12px;">{{ '%.0f'|format(r.distancia_entrada) if r.distancia_entrada else '—' }}m</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:40px;">No hay registros para los filtros seleccionados</p>
  {% endif %}
</div>
{% endblock %}