{% extends "base.html" %}
{% block title %}Cobros Pendientes{% endblock %}
{% block page_title %}Cobros Pendientes{% endblock %}

{% block extra_head %}
<style>
  .fac-card { border-radius: 12px; border: none; transition: box-shadow .15s; }
  .fac-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
  .dias-badge { font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
</style>
{% endblock %}

{% block content %}

<!-- Resumen -->
<div class="row g-3 mb-4">
  <div class="col-md-3">
    <div class="card stat-card" style="background:linear-gradient(135deg,#dc2626,#b91c1c)">
      <div class="small text-white-50 mb-1">Críticas (&gt;30 días)</div>
      <div class="fs-3 fw-bold">{{ criticas|length }}</div>
      <div class="small text-white-50 mt-1">{{ "%.2f"|format(criticas|sum(attribute='total')) }} €</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card stat-card" style="background:linear-gradient(135deg,#d97706,#b45309)">
      <div class="small text-white-50 mb-1">Vencidas (1–30 días)</div>
      <div class="fs-3 fw-bold">{{ urgentes|length }}</div>
      <div class="small text-white-50 mt-1">{{ "%.2f"|format(urgentes|sum(attribute='total')) }} €</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card stat-card" style="background:linear-gradient(135deg,#2563eb,#1d4ed8)">
      <div class="small text-white-50 mb-1">Por vencer</div>
      <div class="fs-3 fw-bold">{{ proximas|length }}</div>
      <div class="small text-white-50 mt-1">{{ "%.2f"|format(proximas|sum(attribute='total')) }} €</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card stat-card" style="background:linear-gradient(135deg,#0f172a,#1e293b)">
      <div class="small text-white-50 mb-1">Total pendiente</div>
      <div class="fs-3 fw-bold">{{ "%.2f"|format(total_pendiente) }} €</div>
      <div class="small text-white-50 mt-1">{{ facturas|length }} facturas</div>
    </div>
  </div>
</div>

{% if not facturas %}
<div class="text-center py-5 text-muted">
  <i class="bi bi-check-circle" style="font-size:3rem; opacity:.3; color:#22c55e"></i>
  <p class="mt-3 fs-5 fw-semibold text-success">¡Todo cobrado!</p>
  <p class="text-muted">No hay facturas pendientes de cobro.</p>
</div>
{% else %}

<!-- Tabla principal -->
<div class="card">
  <div class="card-header d-flex align-items-center gap-2">
    <i class="bi bi-clock-history"></i> Facturas pendientes de cobro
    <span class="badge bg-secondary ms-auto">{{ facturas|length }}</span>
  </div>
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead>
        <tr>
          <th>Factura</th>
          <th>Cliente</th>
          <th class="text-center">Fecha</th>
          <th class="text-center">Vencimiento</th>
          <th class="text-center">Retraso</th>
          <th class="text-end">Importe</th>
          <th class="text-center">Recordatorio</th>
          <th class="text-center">Acciones</th>
        </tr>
      </thead>
      <tbody>
        {% for f in facturas %}
        {% set dias = f.dias_retraso | int %}
        {% set es_critica = dias > 30 %}
        {% set es_urgente = dias > 0 and dias <= 30 %}
        <tr class="{% if es_critica %}table-danger{% elif es_urgente %}table-warning{% endif %}">
          <td>
            <a href="{{ url_for('facturas.detalle_emitida', id=f.id) }}" class="fw-semibold text-decoration-none">
              {{ f.numero }}
            </a>
          </td>
          <td>
            <div>{{ f.cliente_nombre or '—' }}</div>
            {% if f.cliente_email %}
            <div class="text-muted small">{{ f.cliente_email }}</div>
            {% endif %}
          </td>
          <td class="text-center">{{ f.fecha }}</td>
          <td class="text-center">{{ f.fecha_vencimiento or '—' }}</td>
          <td class="text-center">
            {% if dias > 0 %}
              <span class="dias-badge {% if es_critica %}bg-danger text-white{% else %}bg-warning text-dark{% endif %}">
                +{{ dias }} días
              </span>
            {% elif f.fecha_vencimiento %}
              <span class="dias-badge bg-info-subtle text-info">Vence pronto</span>
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </td>
          <td class="text-end fw-semibold">{{ "%.2f"|format(f.total) }} €</td>
          <td class="text-center">
            {% if f.recordatorio_enviado %}
            <span class="badge bg-success-subtle text-success border border-success-subtle small">
              <i class="bi bi-check me-1"></i>{{ f.recordatorio_enviado }}
            </span>
            {% else %}
            <span class="text-muted small">—</span>
            {% endif %}
          </td>
          <td class="text-center">
            <div class="d-flex gap-1 justify-content-center flex-wrap">
              <form method="post" action="{{ url_for('cobros.marcar_recordatorio', id=f.id) }}" class="d-inline"
                    title="Registrar que se ha enviado un recordatorio hoy">
                <button type="submit" class="btn btn-sm btn-outline-secondary">
                  <i class="bi bi-bell"></i>
                </button>
              </form>
              <form method="post" action="{{ url_for('cobros.marcar_cobrada', id=f.id) }}" class="d-inline"
                    onsubmit="return confirm('¿Marcar la factura ' + {{ f.numero | tojson }} + ' como cobrada?')">
                <button type="submit" class="btn btn-sm btn-success">
                  <i class="bi bi-check-lg"></i> Cobrada
                </button>
              </form>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="mt-3 text-muted small">
  <i class="bi bi-info-circle me-1"></i>
  <span class="badge dias-badge bg-danger text-white">+X días</span> = factura vencida.
  El botón <strong><i class="bi bi-bell"></i></strong> registra que hoy enviaste un recordatorio al cliente.
  El botón <strong>Cobrada</strong> marca la factura como pagada y crea la transacción automáticamente.
</div>

{% endif %}
{% endblock %}