{% extends "base.html" %}
{% block title %}Abonos a proveedores{% endblock %}
{% block page_title %}Abonos a proveedores{% endblock %}

{% block content %}
{% with msgs = get_flashed_messages(with_categories=true) %}
  {% for cat, msg in msgs %}
  <div class="alert alert-{{ cat }} alert-dismissible fade show">{{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
  {% endfor %}
{% endwith %}

<!-- Cabecera -->
<div class="d-flex justify-content-between align-items-center mb-4">
  <div></div>
  <a href="{{ url_for('abonos_prov.nuevo') }}" class="btn btn-primary">
    <i class="bi bi-plus-lg me-1"></i>Nuevo abono
  </a>
</div>

<!-- Contadores de estado -->
<div class="row g-3 mb-4">
  {% set estados_cfg = [
    ('pendiente',  'warning',  'bi-hourglass-split',   'Pendientes'),
    ('enviado',    'info',     'bi-send-check',         'Enviados'),
    ('aceptado',   'success',  'bi-check-circle',       'Aceptados'),
    ('cancelado',  'secondary','bi-x-circle',           'Cancelados'),
  ] %}
  {% for est, color, icon, label in estados_cfg %}
  <div class="col-6 col-md-3">
    <a href="{{ url_for('abonos_prov.index', estado=est) }}"
       class="card text-decoration-none border-0 h-100 {% if estado == est %}border border-2 border-{{ color }}{% endif %}"
       style="background:var(--bs-body-bg)">
      <div class="card-body d-flex align-items-center gap-3 p-3">
        <div class="rounded-3 p-2 bg-{{ color }} bg-opacity-15 text-{{ color }}" style="flex-shrink:0">
          <i class="bi {{ icon }} fs-5"></i>
        </div>
        <div>
          <div class="fw-bold fs-5">{{ conteos[est] }}</div>
          <div class="text-muted small">{{ label }}</div>
        </div>
      </div>
    </a>
  </div>
  {% endfor %}
</div>

<!-- Filtro activo -->
{% if estado %}
<div class="mb-3 d-flex align-items-center gap-2">
  <span class="text-muted small">Filtrando por: <strong>{{ estado }}</strong></span>
  <a href="{{ url_for('abonos_prov.index') }}" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-x"></i> Quitar filtro
  </a>
</div>
{% endif %}

<!-- Tabla -->
<div class="card border-0 shadow-sm">
  <div class="table-responsive">
    <table class="table table-hover align-middle mb-0">
      <thead class="table-dark">
        <tr>
          <th>Número</th>
          <th>Proveedor</th>
          <th>Fecha</th>
          <th>Ref. factura</th>
          <th class="text-end">Total</th>
          <th>Estado</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for ab in abonos %}
        <tr>
          <td>
            <a href="{{ url_for('abonos_prov.detalle', id=ab.id) }}" class="fw-semibold text-decoration-none">
              {{ ab.numero }}
            </a>
          </td>
          <td>{{ ab.prov_nombre or '—' }}</td>
          <td>{{ ab.fecha }}</td>
          <td class="text-muted small">{{ ab.factura_ref or '—' }}</td>
          <td class="text-end fw-semibold">{{ '%.2f'|format(ab.total or 0) }} €</td>
          <td>
            {% if ab.estado == 'pendiente' %}
            <span class="badge bg-warning text-dark">Pendiente</span>
            {% elif ab.estado == 'enviado' %}
            <span class="badge bg-info text-dark">Enviado</span>
            {% elif ab.estado == 'aceptado' %}
            <span class="badge bg-success">Aceptado</span>
            {% else %}
            <span class="badge bg-secondary">Cancelado</span>
            {% endif %}
          </td>
          <td class="text-end">
            <div class="btn-group btn-group-sm">
              <a href="{{ url_for('abonos_prov.detalle', id=ab.id) }}" class="btn btn-outline-primary" title="Ver detalle">
                <i class="bi bi-eye"></i>
              </a>
              <a href="{{ url_for('abonos_prov.editar', id=ab.id) }}" class="btn btn-outline-secondary" title="Editar">
                <i class="bi bi-pencil"></i>
              </a>
              <button type="button" class="btn btn-outline-danger" title="Eliminar"
                      data-bs-toggle="modal" data-bs-target="#modalEliminar{{ ab.id }}">
                <i class="bi bi-trash"></i>
              </button>
            </div>
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="7" class="text-center text-muted py-5">
            <i class="bi bi-inbox fs-3 d-block mb-2 opacity-50"></i>
            No hay abonos{% if estado %} con estado «{{ estado }}»{% endif %}.
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Modales de confirmación eliminación -->
{% for ab in abonos %}
<div class="modal fade" id="modalEliminar{{ ab.id }}" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">Eliminar abono</h6>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body small">
        ¿Eliminar el abono <strong>{{ ab.numero }}</strong>? Esta acción no se puede deshacer.
      </div>
      <div class="modal-footer">
        <button class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Cancelar</button>
        <form method="post" action="{{ url_for('abonos_prov.eliminar', id=ab.id) }}">
          <button class="btn btn-sm btn-danger">Eliminar</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endfor %}
{% endblock %}