{% extends 'base.html' %}
{% block title %}Libro Mayor — {{ cuenta.codigo }}{% 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-journal-bookmark me-2" style="color:#fbbf24"></i>
      Libro Mayor — <span class="font-monospace">{{ cuenta.codigo }}</span>
    </h4>
    <p class="text-muted mb-0" style="font-size:.85rem">{{ cuenta.nombre }}</p>
  </div>
  <a href="{{ url_for('cuentas.index') }}" class="btn btn-outline-secondary btn-sm">
    <i class="bi bi-arrow-left me-1"></i>Plan de cuentas
  </a>
</div>

<!-- Filtros -->
<div class="card mb-4">
  <div class="card-body py-2">
    <form class="row g-2 align-items-end">
      <div class="col-auto">
        <label class="form-label mb-1" style="font-size:.78rem">Año</label>
        <input type="number" name="anio" value="{{ anio }}" min="2000" max="2099" class="form-control form-control-sm" style="width:90px">
      </div>
      <div class="col-auto">
        <label class="form-label mb-1" style="font-size:.78rem">Mes</label>
        <select name="mes" class="form-select form-select-sm" style="width:130px">
          <option value="0" {% if mes==0 %}selected{% endif %}>Todo el año</option>
          {% for m in range(1,13) %}
          <option value="{{ m }}" {% if mes==m %}selected{% endif %}>
            {{ ['','Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'][m] }}
          </option>
          {% endfor %}
        </select>
      </div>
      <div class="col-auto">
        <button class="btn btn-primary btn-sm">Filtrar</button>
      </div>
    </form>
  </div>
</div>

<!-- Saldo anterior -->
{% if mes %}
<div class="alert alert-secondary py-2 mb-3" style="font-size:.85rem">
  Saldo anterior al {{ mes }}/{{ anio }}:
  <strong class="ms-2 font-monospace">{{ "%.2f €"|format(saldo_ant) }}</strong>
</div>
{% endif %}

{% if movs %}
<div class="card">
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead>
        <tr>
          <th style="width:100px">Fecha</th>
          <th style="width:120px">Asiento</th>
          <th>Concepto</th>
          <th class="text-end" style="width:130px">Debe</th>
          <th class="text-end" style="width:130px">Haber</th>
          <th class="text-end" style="width:130px">Saldo</th>
        </tr>
      </thead>
      <tbody>
        {% set ns = namespace(saldo=saldo_ant) %}
        {% for m in movs %}
          {% if cuenta.naturaleza == 'deudora' %}
            {% set ns.saldo = ns.saldo + m.debe - m.haber %}
          {% else %}
            {% set ns.saldo = ns.saldo + m.haber - m.debe %}
          {% endif %}
        <tr>
          <td class="text-muted" style="font-size:.82rem">{{ m.fecha }}</td>
          <td>
            <a href="{{ url_for('cuentas.asiento_detalle', id=m.asiento_id) }}"
               class="fw-bold text-decoration-none font-monospace" style="color:#fbbf24;font-size:.82rem">
              {{ m.asiento_num }}
            </a>
          </td>
          <td style="font-size:.85rem">
            <div>{{ m.concepto or m.asiento_desc }}</div>
            <small class="text-muted">{{ m.asiento_desc if m.concepto else '' }}</small>
          </td>
          <td class="text-end font-monospace" style="font-size:.85rem">
            {% if m.debe %}<span class="text-primary fw-bold">{{ "%.2f"|format(m.debe) }}</span>{% else %}<span class="text-muted">—</span>{% endif %}
          </td>
          <td class="text-end font-monospace" style="font-size:.85rem">
            {% if m.haber %}<span class="text-danger fw-bold">{{ "%.2f"|format(m.haber) }}</span>{% else %}<span class="text-muted">—</span>{% endif %}
          </td>
          <td class="text-end font-monospace fw-bold" style="font-size:.85rem">
            <span class="{{ 'text-success' if ns.saldo >= 0 else 'text-danger' }}">{{ "%.2f"|format(ns.saldo) }}</span>
          </td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-light">
        <tr class="fw-bold">
          <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">{{ "%.2f €"|format(total_d - total_h) }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
{% else %}
<div class="card">
  <div class="card-body text-center py-5 text-muted">
    <i class="bi bi-journal-x" style="font-size:2rem;opacity:.3"></i>
    <p class="mt-2 mb-0">No hay movimientos para el período seleccionado.</p>
  </div>
</div>
{% endif %}
{% endblock %}