{% extends "base.html" %}
{% block title %}Facturas emitidas{% endblock %}
{% block page_title %}Facturas emitidas{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('facturas.nueva_emitida') }}" class="btn btn-primary btn-sm">
  <i class="bi bi-plus-lg"></i> Nueva factura
</a>
{% endblock %}

{% block content %}
{% set totales_dict = {} %}
{% for t in totales %}{% set _ = totales_dict.update({t.estado: t}) %}{% endfor %}

<div class="row g-3 mb-3">
  {% for estado, color, label, g1, g2, bc in [
    ('pendiente','warning','Pendientes','#fffbeb','#fef3c7','#f59e0b'),
    ('pagada','success','Pagadas','#f0fdf4','#dcfce7','#10b981'),
    ('vencida','danger','Vencidas','#fff5f5','#fee2e2','#ef4444'),
    ('cancelada','secondary','Canceladas','#f8fafc','#f1f5f9','#94a3b8')
  ] %}
  <div class="col-6 col-md-3">
    <a href="{{ url_for('facturas.emitidas') }}?estado={{ estado }}" class="text-decoration-none">
      <div class="card {% if estado_filtro == estado %}shadow{% endif %}"
           style="background:linear-gradient(135deg,{{ g1 }},{{ g2 }});border-left:4px solid {{ bc }}">
        <div class="card-body py-3">
          <div class="text-{{ color }} small fw-semibold">{{ label }}</div>
          <div class="fw-bold fs-5 text-{{ color }}">
            {% if estado in totales_dict %}{{ "%.2f"|format(totales_dict[estado].suma) }} €{% else %}0.00 €{% endif %}
          </div>
          <div class="text-muted" style="font-size:.75rem">
            {% if estado in totales_dict %}{{ totales_dict[estado].cnt }} factura(s){% else %}0{% endif %}
          </div>
        </div>
      </div>
    </a>
  </div>
  {% endfor %}
</div>

<div class="card">
  <div class="card-header py-3 d-flex align-items-center justify-content-between">
    <span><i class="bi bi-file-earmark-arrow-up me-2"></i>
      {% if estado_filtro %}{{ estado_filtro|capitalize }}s{% else %}Todas{% endif %}
    </span>
    <div class="d-flex gap-2">
      <form class="d-flex gap-2" method="get">
        {% if estado_filtro %}<input type="hidden" name="estado" value="{{ estado_filtro }}">{% endif %}
        <input type="search" name="q" value="{{ q }}" class="form-control form-control-sm" placeholder="Nº factura o cliente...">
        <button class="btn btn-sm btn-outline-secondary">Buscar</button>
      </form>
      {% if estado_filtro %}<a href="{{ url_for('facturas.emitidas') }}" class="btn btn-sm btn-outline-secondary">Todas</a>{% endif %}
    </div>
  </div>
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead><tr>
        <th>Número</th><th>Cliente</th><th>Fecha</th><th>Vencimiento</th>
        <th>Estado</th><th class="text-end">Total</th><th></th>
      </tr></thead>
      <tbody>
        {% for f in facturas %}
        <tr>
          <td>
            <a href="{{ url_for('facturas.detalle_emitida', id=f.id) }}" class="fw-semibold text-decoration-none">{{ f.numero }}</a>
            {% if f.etiquetas %}
            <div class="mt-1">
              {% for tag in f.etiquetas.split(',') %}{% set t = tag.strip() %}{% if t %}
              <span class="badge rounded-pill bg-primary bg-opacity-10 text-primary" style="font-size:.68rem;font-weight:500">{{ t }}</span>
              {% endif %}{% endfor %}
            </div>
            {% endif %}
          </td>
          <td class="small">{{ f.cliente_nombre or '—' }}</td>
          <td class="small text-muted">{{ f.fecha }}</td>
          <td class="small {% if f.estado == 'pendiente' and f.fecha_vencimiento and f.fecha_vencimiento < '2099' %}text-danger{% else %}text-muted{% endif %}">
            {{ f.fecha_vencimiento or '—' }}
          </td>
          <td><span class="badge badge-estado-{{ f.estado }}">{{ f.estado|capitalize }}</span></td>
          <td class="text-end fw-semibold">{{ "%.2f"|format(f.total) }} €</td>
          <td class="text-end">
            <a href="{{ url_for('facturas.detalle_emitida', id=f.id) }}" class="btn btn-outline-secondary btn-action"><i class="bi bi-eye"></i></a>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="7" class="text-center text-muted py-4">Sin facturas</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}