{% extends "base.html" %}
{% block title %}Ventas — {{ locales[local].nombre }}{% endblock %}
{% block page_title %}💰 Ventas — {{ locales[local].icono }} {{ locales[local].nombre }}{% endblock %}

{% block content %}

<!-- Navegación de locales -->
<div style="display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;">
  {% for key, cfg in locales.items() %}
  <a href="{{ url_for('ventas', local=key) }}"
     class="btn btn-sm {{ 'btn-primary' if key == local else 'btn-secondary' }}">
    {{ cfg.icono }} {{ cfg.nombre }}
  </a>
  {% endfor %}
</div>

<!-- 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:155px;">
    </div>
    <div class="form-group" style="margin-bottom:0;">
      <label>Hasta</label>
      <input type="date" name="fecha_to" value="{{ fecha_to }}" style="width:155px;">
    </div>
    <div class="form-group" style="margin-bottom:0;">
      <label>Forma de Pago</label>
      <select name="forma_pago" style="width:170px;">
        <option value="">Todas</option>
        <option value="efectivo" {% if forma_pago_sel == 'efectivo' %}selected{% endif %}>💵 Efectivo</option>
        <option value="debito" {% if forma_pago_sel == 'debito' %}selected{% endif %}>💳 Débito</option>
        <option value="credito" {% if forma_pago_sel == 'credito' %}selected{% endif %}>💳 Crédito</option>
        <option value="transferencia" {% if forma_pago_sel == 'transferencia' %}selected{% endif %}>🏦 Transferencia</option>
        <option value="otros" {% if forma_pago_sel == 'otros' %}selected{% endif %}>🔄 Otros</option>
      </select>
    </div>
    <div class="form-group" style="margin-bottom:0;">
      <label>Turno</label>
      <select name="turno" style="width:100px;">
        <option value="">Todos</option>
        <option value="AM" {% if turno_sel == 'AM' %}selected{% endif %}>AM</option>
        <option value="PM" {% if turno_sel == 'PM' %}selected{% endif %}>PM</option>
      </select>
    </div>
    <div style="display:flex; gap:8px; align-items:flex-end;">
      <button type="submit" class="btn btn-primary btn-sm">🔍 Filtrar</button>
      <a href="{{ url_for('ventas', local=local) }}" class="btn btn-secondary btn-sm">✕ Limpiar</a>
      <a href="{{ url_for('registro_turno', local=local) }}" class="btn btn-primary btn-sm">📋 Registrar Turno</a>
      <a href="{{ url_for('nueva_venta', local=local) }}" class="btn btn-secondary btn-sm">➕ Venta individual</a>
    </div>
  </form>
</div>

<!-- Totales por forma de pago -->
<div class="stats-grid" style="grid-template-columns: repeat(3, 1fr);">
  <div class="stat-box" style="border-top:3px solid var(--accent-gold);">
    <div class="stat-label">💰 Total Período</div>
    <div class="stat-value" style="color:var(--accent-gold);">${{ '{:,.0f}'.format(total) }}</div>
    <div class="stat-change">{{ ventas|length }} registros</div>
  </div>
  <div class="stat-box" style="border-top:3px solid var(--accent-green);">
    <div class="stat-label">💵 Efectivo</div>
    <div class="stat-value" style="color:var(--accent-green);">${{ '{:,.0f}'.format(total_por_forma.efectivo) }}</div>
  </div>
  <div class="stat-box" style="border-top:3px solid #3498db;">
    <div class="stat-label">💳 Débito</div>
    <div class="stat-value" style="color:#3498db;">${{ '{:,.0f}'.format(total_por_forma.debito) }}</div>
  </div>
  <div class="stat-box" style="border-top:3px solid #9b59b6;">
    <div class="stat-label">💳 Crédito</div>
    <div class="stat-value" style="color:#9b59b6;">${{ '{:,.0f}'.format(total_por_forma.credito) }}</div>
  </div>
  <div class="stat-box" style="border-top:3px solid var(--accent-gold);">
    <div class="stat-label">🏦 Transferencia</div>
    <div class="stat-value" style="color:var(--accent-gold);">${{ '{:,.0f}'.format(total_por_forma.transferencia) }}</div>
  </div>
  <div class="stat-box" style="border-top:3px solid #7f8c8d;">
    <div class="stat-label">🔄 Otros</div>
    <div class="stat-value" style="color:#7f8c8d;">${{ '{:,.0f}'.format(total_por_forma.otros) }}</div>
  </div>
</div>

<!-- Tabla de ventas -->
<div class="card">
  <div class="card-header">
    <div class="card-title">Registro de Ventas</div>
  </div>

  {% if ventas %}
  <table class="table">
    <thead>
      <tr>
        <th>Fecha</th>
        <th>Hora</th>
        <th>Turno</th>
        <th>Descripción</th>
        <th>Monto</th>
        <th>Forma Pago</th>
        <th>Responsable</th>
        <th class="text-right">Total</th>
      </tr>
    </thead>
    <tbody>
      {% for v in ventas %}
      <tr>
        <td style="font-family:monospace; white-space:nowrap;">{{ v.fecha.strftime('%d/%m/%Y') }}</td>
        <td style="font-family:monospace; font-size:12px; color:var(--text-secondary); white-space:nowrap;">
          {{ v.creado.strftime('%H:%M') if v.creado else '—' }}
        </td>
        <td><span class="badge badge-info">{{ v.turno }}</span></td>
        <td>
          {{ v.producto }}
          {% if v.notas and '[CIERRE_TURNO]' in v.notas %}
            <span style="font-size:11px; color:var(--text-secondary);">(cierre)</span>
          {% endif %}
        </td>
        <td class="moneda">${{ '{:,.0f}'.format(v.total) }}</td>
        <td>
          {% if v.forma_pago == 'efectivo' %}
            <span class="badge badge-success">💵 Efectivo</span>
          {% elif v.forma_pago == 'debito' %}
            <span class="badge badge-info">💳 Débito</span>
          {% elif v.forma_pago == 'credito' %}
            <span class="badge" style="background:#9b59b6; color:#fff;">💳 Crédito</span>
          {% elif v.forma_pago == 'transferencia' %}
            <span class="badge badge-warning">🏦 Transfer.</span>
          {% else %}
            <span class="badge" style="background:#7f8c8d; color:#fff;">🔄 Otros</span>
          {% endif %}
        </td>
        <td>{{ v.vendedor or '—' }}</td>
        <td class="text-right moneda" style="font-weight:700;">${{ '{:,.0f}'.format(v.total) }}</td>
      </tr>
      {% endfor %}
    </tbody>
    <tfoot>
      <tr style="background:var(--bg-tertiary); font-weight:700;">
        <td colspan="7" style="padding:12px; text-align:right;">TOTAL</td>
        <td class="text-right moneda" style="padding:12px; color:var(--accent-gold); font-size:18px;">${{ '{:,.0f}'.format(total) }}</td>
      </tr>
    </tfoot>
  </table>
  {% else %}
  <div class="text-center text-muted" style="padding:40px;">
    <p style="font-size:32px; margin-bottom:12px;">📭</p>
    <p>No hay ventas para los filtros seleccionados</p>
    <a href="{{ url_for('nueva_venta', local=local) }}" class="btn btn-primary btn-sm" style="margin-top:12px;">➕ Registrar primera venta</a>
  </div>
  {% endif %}
</div>
{% endblock %}