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

{% block topbar_actions %}
<a href="{{ url_for('transacciones.nueva') }}?tipo=ingreso" class="btn btn-success btn-sm">
  <i class="bi bi-plus-lg"></i> Ingreso
</a>
<a href="{{ url_for('transacciones.nueva') }}?tipo=gasto" class="btn btn-danger btn-sm">
  <i class="bi bi-plus-lg"></i> Gasto
</a>
{% endblock %}

{% block content %}
<!-- Resumen -->
<div class="row g-3 mb-3">
  <div class="col-md-4">
    <div class="card border-0">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center" style="width:44px;height:44px">
          <i class="bi bi-arrow-up-circle text-success fs-5"></i>
        </div>
        <div>
          <div class="text-muted small">Ingresos filtrados</div>
          <div class="fw-bold text-success fs-5">{{ "%.2f"|format(total_ingresos) }} €</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card border-0">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle bg-danger bg-opacity-10 d-flex align-items-center justify-content-center" style="width:44px;height:44px">
          <i class="bi bi-arrow-down-circle text-danger fs-5"></i>
        </div>
        <div>
          <div class="text-muted small">Gastos filtrados</div>
          <div class="fw-bold text-danger fs-5">{{ "%.2f"|format(total_gastos) }} €</div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card border-0">
      <div class="card-body d-flex align-items-center gap-3">
        <div class="rounded-circle {% if total_ingresos - total_gastos >= 0 %}bg-success{% else %}bg-danger{% endif %} bg-opacity-10 d-flex align-items-center justify-content-center" style="width:44px;height:44px">
          <i class="bi bi-wallet2 {% if total_ingresos - total_gastos >= 0 %}text-success{% else %}text-danger{% endif %} fs-5"></i>
        </div>
        <div>
          <div class="text-muted small">Balance</div>
          <div class="fw-bold fs-5 {% if total_ingresos - total_gastos >= 0 %}text-success{% else %}text-danger{% endif %}">
            {{ "%.2f"|format(total_ingresos - total_gastos) }} €
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-header py-3">
    <form class="row g-2 align-items-end" method="get">
      <div class="col-md-2">
        <label class="form-label mb-1 small">Tipo</label>
        <select name="tipo" class="form-select form-select-sm">
          <option value="">Todos</option>
          <option value="ingreso" {% if tipo_filtro == 'ingreso' %}selected{% endif %}>Ingresos</option>
          <option value="gasto" {% if tipo_filtro == 'gasto' %}selected{% endif %}>Gastos</option>
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label mb-1 small">Mes</label>
        <input type="month" name="mes" value="{{ mes_filtro }}" class="form-control form-control-sm">
      </div>
      <div class="col-md-3">
        <label class="form-label mb-1 small">Categoría</label>
        <select name="categoria" class="form-select form-select-sm">
          <option value="">Todas</option>
          {% for c in categorias %}
          <option value="{{ c.id }}" {% if cat_filtro == c.id|string %}selected{% endif %}>{{ c.nombre }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-2">
        <button class="btn btn-sm btn-primary w-100">Filtrar</button>
      </div>
      <div class="col-md-2">
        <a href="{{ url_for('transacciones.lista') }}" class="btn btn-sm btn-outline-secondary w-100">Limpiar</a>
      </div>
    </form>
  </div>
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead><tr>
        <th>Fecha</th><th>Tipo</th><th>Descripción</th><th>Categoría</th><th>Método</th>
        <th class="text-end">Importe</th><th></th>
      </tr></thead>
      <tbody>
        {% for t in transacciones %}
        <tr>
          <td class="text-muted small">{{ t.fecha }}</td>
          <td>
            <span class="badge {% if t.tipo == 'ingreso' %}bg-success{% else %}bg-danger{% endif %} bg-opacity-75">
              {{ t.tipo|capitalize }}
            </span>
          </td>
          <td class="small">{{ t.descripcion }}</td>
          <td>
            {% if t.categoria_nombre %}
            <span class="badge rounded-pill" style="background:{{ t.categoria_color }}20;color:{{ t.categoria_color }};font-size:.72rem">
              {{ t.categoria_nombre }}
            </span>
            {% else %}—{% endif %}
          </td>
          <td class="small text-muted">{{ t.metodo_pago or '—' }}</td>
          <td class="text-end fw-semibold {% if t.tipo == 'ingreso' %}text-success{% else %}text-danger{% endif %}">
            {% if t.tipo == 'ingreso' %}+{% else %}−{% endif %}{{ "%.2f"|format(t.importe) }} €
          </td>
          <td class="text-end">
            <a href="{{ url_for('transacciones.editar', id=t.id) }}" class="btn btn-outline-secondary btn-action">
              <i class="bi bi-pencil"></i>
            </a>
            <form method="post" action="{{ url_for('transacciones.eliminar', id=t.id) }}" class="d-inline"
                  onsubmit="return confirm('¿Eliminar transacción?')">
              <button class="btn btn-outline-danger btn-action"><i class="bi bi-trash"></i></button>
            </form>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="7" class="text-center text-muted py-4">Sin transacciones con los filtros actuales</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}