{% extends 'base.html' %}
{% block title %}Plan de Cuentas{% 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-list-columns me-2" style="color:#fbbf24"></i>Plan de Cuentas PGC</h4>
    <p class="text-muted mb-0" style="font-size:.85rem">Plan General Contable simplificado. Las cuentas del sistema no son eliminables.</p>
  </div>
  <div class="d-flex gap-2">
    <a href="{{ url_for('cuentas.balance') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-bar-chart-steps me-1"></i>Balance sumas y saldos
    </a>
    <a href="{{ url_for('cuentas.asientos') }}" class="btn btn-outline-secondary btn-sm">
      <i class="bi bi-journal-text me-1"></i>Libro Diario
    </a>
    <a href="{{ url_for('cuentas.nueva') }}" class="btn btn-primary btn-sm">
      <i class="bi bi-plus-lg me-1"></i>Nueva cuenta
    </a>
  </div>
</div>

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

{% for grupo_num in [1,2,3,4,5,6,7] %}
  {% if grupos.get(grupo_num) %}
  <div class="card mb-3">
    <div class="card-header d-flex align-items-center justify-content-between">
      <span>
        <span class="badge rounded-pill me-2" style="background:#fbbf24;color:#78350f;font-size:.7rem">Grupo {{ grupo_num }}</span>
        {{ grupos_nombres.get(grupo_num, '') }}
      </span>
      <small class="text-muted">{{ grupos[grupo_num]|length }} cuenta(s)</small>
    </div>
    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead>
          <tr>
            <th style="width:100px">Código</th>
            <th>Nombre</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</th>
            <th style="width:80px">Tipo</th>
            <th style="width:90px"></th>
          </tr>
        </thead>
        <tbody>
          {% for c in grupos[grupo_num] %}
          {% set s = saldos.get(c.id, {}) %}
          {% set td = s.get('debe', 0) %}
          {% set th = s.get('haber', 0) %}
          {% set saldo = td - th if c.naturaleza == 'deudora' else th - td %}
          <tr>
            <td>
              <a href="{{ url_for('cuentas.mayor', id=c.id) }}" class="fw-bold text-decoration-none" style="color:#fbbf24;font-family:monospace">
                {{ c.codigo }}
              </a>
            </td>
            <td>
              {{ c.nombre }}
              {% if not c.activo %}<span class="badge bg-secondary ms-1" style="font-size:.65rem">Inactiva</span>{% endif %}
              {% if c.es_sistema %}<span class="badge ms-1" style="background:#fef3c7;color:#92400e;font-size:.65rem">PGC</span>{% endif %}
            </td>
            <td class="text-end font-monospace" style="font-size:.85rem">
              {% if td %}<span class="text-primary">{{ "%.2f €"|format(td) }}</span>{% else %}<span class="text-muted">—</span>{% endif %}
            </td>
            <td class="text-end font-monospace" style="font-size:.85rem">
              {% if th %}<span class="text-danger">{{ "%.2f €"|format(th) }}</span>{% else %}<span class="text-muted">—</span>{% endif %}
            </td>
            <td class="text-end font-monospace fw-bold" style="font-size:.85rem">
              {% if saldo != 0 %}
                <span class="{{ 'text-success' if saldo > 0 else 'text-danger' }}">{{ "%.2f €"|format(saldo) }}</span>
              {% else %}<span class="text-muted">—</span>{% endif %}
            </td>
            <td>
              <span class="badge" style="font-size:.65rem;
                {% if c.tipo == 'activo' %}background:#dbeafe;color:#1e40af
                {% elif c.tipo == 'pasivo' %}background:#fee2e2;color:#991b1b
                {% elif c.tipo == 'gasto' %}background:#fef3c7;color:#92400e
                {% elif c.tipo == 'ingreso' %}background:#dcfce7;color:#14532d
                {% elif c.tipo == 'neto' %}background:#ede9fe;color:#4c1d95
                {% else %}background:#f1f5f9;color:#475569{% endif %}">
                {{ c.tipo }}
              </span>
            </td>
            <td class="text-end">
              <a href="{{ url_for('cuentas.mayor', id=c.id) }}" class="btn btn-sm btn-outline-secondary btn-action me-1" title="Libro Mayor">
                <i class="bi bi-journal-bookmark"></i>
              </a>
              <a href="{{ url_for('cuentas.editar', id=c.id) }}" class="btn btn-sm btn-outline-primary btn-action me-1">
                <i class="bi bi-pencil"></i>
              </a>
              {% if not c.es_sistema %}
                {% set movs = saldos.get(c.id) %}
                {% if movs %}
                  <button class="btn btn-sm btn-outline-danger btn-action" disabled title="Tiene movimientos contables">
                    <i class="bi bi-trash"></i>
                  </button>
                {% else %}
                  <button class="btn btn-sm btn-outline-danger btn-action"
                          data-bs-toggle="modal" data-bs-target="#modalEliminar{{ c.id }}"
                          title="Eliminar cuenta">
                    <i class="bi bi-trash"></i>
                  </button>
                  <div class="modal fade" id="modalEliminar{{ c.id }}" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered modal-sm">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h6 class="modal-title">¿Eliminar cuenta?</h6>
                          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body text-center">
                          <div class="fw-bold font-monospace">{{ c.codigo }}</div>
                          <div class="text-muted small">{{ c.nombre }}</div>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
                          <form method="post" action="{{ url_for('cuentas.eliminar', id=c.id) }}" class="d-inline">
                            <button type="submit" class="btn btn-danger btn-sm">Eliminar</button>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                {% endif %}
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endif %}
{% endfor %}
{% endblock %}