{% extends 'base.html' %}
{% block title %}Balance de sumas y saldos {{ anio }}{% endblock %}

{% block content %}
<div class="d-flex align-items-center justify-content-between mb-4">
  <div>
    <h4 class="fw-bold mb-1" style="color:#0f2744">
      <i class="bi bi-bar-chart-steps me-2" style="color:#fbbf24"></i>Balance de sumas y saldos
    </h4>
    <p class="text-muted mb-0" style="font-size:.85rem">Movimientos acumulados por cuenta en el ejercicio.</p>
  </div>
  <div class="d-flex gap-2">
    <form class="d-flex gap-2 align-items-center">
      <input type="number" name="anio" value="{{ anio }}" min="2000" max="2099"
             class="form-control form-control-sm" style="width:90px">
      <button class="btn btn-primary btn-sm">Filtrar</button>
    </form>
    <button onclick="window.print()" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-printer me-1"></i>Imprimir
    </button>
  </div>
</div>

{% if rows %}
<div class="card">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span>Ejercicio {{ anio }}</span>
    <small class="text-muted">{{ rows|length }} cuenta(s) con movimientos</small>
  </div>
  <div class="table-responsive">
    <table class="table table-hover mb-0" id="tabla-balance">
      <thead>
        <tr>
          <th style="width:90px">Código</th>
          <th>Nombre</th>
          <th style="width:70px">Tipo</th>
          <th class="text-end" style="width:130px">Suma Debe</th>
          <th class="text-end" style="width:130px">Suma Haber</th>
          <th class="text-end" style="width:130px">Saldo Deudor</th>
          <th class="text-end" style="width:130px">Saldo Acreedor</th>
        </tr>
      </thead>
      <tbody>
        {% set grupos_nombres = {1:'Financiación',2:'Activo no cte.',3:'Existencias',4:'Acreed./Deud.',5:'Ctas. financ.',6:'Gastos',7:'Ingresos'} %}
        {% set ns = namespace(cur_grupo=-1) %}
        {% for r in rows %}
          {% if r.grupo != ns.cur_grupo %}
            {% set ns.cur_grupo = r.grupo %}
        <tr style="background:linear-gradient(135deg,#f8f9ff,#f0f4ff)">
          <td colspan="7" class="fw-bold text-primary" style="font-size:.75rem;letter-spacing:.5px;padding:8px 12px;text-transform:uppercase">
            Grupo {{ r.grupo }} — {{ grupos_nombres.get(r.grupo, '') }}
          </td>
        </tr>
          {% endif %}
          {% set sd = (r.suma_debe - r.suma_haber) if r.suma_debe > r.suma_haber else 0 %}
          {% set sh = (r.suma_haber - r.suma_debe) if r.suma_haber > r.suma_debe else 0 %}
        <tr>
          <td>
            <a href="{{ url_for('cuentas.mayor', id=r.id) }}"
               class="fw-bold text-decoration-none font-monospace" style="color:#fbbf24">
              {{ r.codigo }}
            </a>
          </td>
          <td style="font-size:.85rem">{{ r.nombre }}</td>
          <td>
            <span class="badge" style="font-size:.62rem;
              {% if r.tipo == 'activo' %}background:#dbeafe;color:#1e40af
              {% elif r.tipo == 'pasivo' %}background:#fee2e2;color:#991b1b
              {% elif r.tipo == 'gasto' %}background:#fef3c7;color:#92400e
              {% elif r.tipo == 'ingreso' %}background:#dcfce7;color:#14532d
              {% elif r.tipo == 'neto' %}background:#ede9fe;color:#4c1d95
              {% else %}background:#f1f5f9;color:#475569{% endif %}">
              {{ r.tipo }}
            </span>
          </td>
          <td class="text-end font-monospace" style="font-size:.85rem">{{ "%.2f"|format(r.suma_debe) }}</td>
          <td class="text-end font-monospace" style="font-size:.85rem">{{ "%.2f"|format(r.suma_haber) }}</td>
          <td class="text-end font-monospace" style="font-size:.85rem">
            {% if sd %}<span class="text-primary fw-bold">{{ "%.2f"|format(sd) }}</span>{% else %}—{% endif %}
          </td>
          <td class="text-end font-monospace" style="font-size:.85rem">
            {% if sh %}<span class="text-danger fw-bold">{{ "%.2f"|format(sh) }}</span>{% else %}—{% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-light fw-bold">
        <tr>
          <td colspan="3" class="text-end" style="font-size:.82rem">TOTALES</td>
          <td class="text-end font-monospace text-primary">{{ "%.2f €"|format(total_d) }}</td>
          <td class="text-end font-monospace text-danger">{{ "%.2f €"|format(total_h) }}</td>
          <td class="text-end font-monospace">
            {% set tot_sd = 0 %}{% set tot_sh = 0 %}
            {% for r in rows %}
              {% if r.suma_debe > r.suma_haber %}{% set tot_sd = tot_sd + (r.suma_debe - r.suma_haber) %}{% endif %}
              {% if r.suma_haber > r.suma_debe %}{% set tot_sh = tot_sh + (r.suma_haber - r.suma_debe) %}{% endif %}
            {% endfor %}
            <span class="text-primary">{{ "%.2f €"|format(tot_sd) }}</span>
          </td>
          <td class="text-end font-monospace">
            <span class="text-danger">{{ "%.2f €"|format(tot_sh) }}</span>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>

  {% if (total_d - total_h)|abs < 0.02 %}
  <div class="card-footer text-success" style="font-size:.82rem">
    <i class="bi bi-check2-circle me-1"></i>La contabilidad cuadra. Suma debe = suma haber.
  </div>
  {% else %}
  <div class="card-footer text-warning" style="font-size:.82rem">
    <i class="bi bi-exclamation-triangle me-1"></i>Diferencia entre debe y haber: {{ "%.2f €"|format((total_d - total_h)|abs) }}
  </div>
  {% endif %}
</div>
{% else %}
<div class="card">
  <div class="card-body text-center py-5 text-muted">
    <i class="bi bi-bar-chart" style="font-size:2rem;opacity:.3"></i>
    <p class="mt-2 mb-0">No hay movimientos en {{ anio }}. Crea facturas o asientos manuales para verlos aquí.</p>
  </div>
</div>
{% endif %}
{% endblock %}