{% extends "base.html" %}
{% block title %}Nóminas{% endblock %}
{% block page_title %}Nóminas{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('nominas.empleados') }}" class="btn btn-outline-secondary btn-sm">
  <i class="bi bi-people me-1"></i>Empleados
</a>
<a href="{{ url_for('nominas.exportar', anio=año, mes=mes) }}" class="btn btn-outline-success btn-sm">
  <i class="bi bi-file-earmark-excel me-1"></i>Exportar Excel
</a>
{% endblock %}

{% block content %}

<!-- Selector de mes -->
<form method="get" class="d-flex align-items-center gap-2 mb-4 flex-wrap">
  <select name="anio" class="form-select form-select-sm" style="width:100px" onchange="this.form.submit()">
    {% for a in años_lista %}
    <option value="{{ a }}" {{ 'selected' if a==año }}>{{ a }}</option>
    {% endfor %}
  </select>
  <select name="mes" class="form-select form-select-sm" style="width:140px" onchange="this.form.submit()">
    {% for i, m in enumerate(meses, 1) %}
    <option value="{{ i }}" {{ 'selected' if i==mes }}>{{ m }}</option>
    {% endfor %}
  </select>
  <span class="text-muted small">{{ meses[mes-1] }} {{ año }}</span>
</form>

<!-- Stats -->
<div class="row g-3 mb-4">
  <div class="col-sm-4 col-lg-2">
    <div class="stat-card" style="background:linear-gradient(135deg,#0f766e,#0d9488)">
      <div class="small opacity-75 mb-1">Empleados activos</div>
      <div class="fs-3 fw-bold">{{ activos|length }}</div>
    </div>
  </div>
  <div class="col-sm-4 col-lg-2">
    <div class="stat-card" style="background:linear-gradient(135deg,#1e40af,#2563eb)">
      <div class="small opacity-75 mb-1">Nóminas generadas</div>
      <div class="fs-3 fw-bold">{{ nominas|length }}</div>
    </div>
  </div>
  <div class="col-sm-4 col-lg-2">
    <div class="stat-card" style="background:linear-gradient(135deg,#15803d,#16a34a)">
      <div class="small opacity-75 mb-1">Pagadas</div>
      <div class="fs-3 fw-bold">{{ totales.pagadas }}</div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#7c3aed,#8b5cf6)">
      <div class="small opacity-75 mb-1">Total neto a pagar</div>
      <div class="fs-3 fw-bold">{{ '%.2f'|format(totales.neto) }} €</div>
    </div>
  </div>
  <div class="col-sm-6 col-lg-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#b45309,#d97706)">
      <div class="small opacity-75 mb-1">Coste empresa total</div>
      <div class="fs-3 fw-bold">{{ '%.2f'|format(totales.coste) }} €</div>
    </div>
  </div>
</div>

<div class="row g-4">

  <!-- Panel izquierdo: nóminas del mes -->
  <div class="col-lg-8">
    <div class="card border-0 shadow-sm">
      <div class="card-header border-0 d-flex align-items-center justify-content-between"
           style="background:linear-gradient(135deg,#ecfdf5,#d1fae5)">
        <div>
          <i class="bi bi-receipt me-2 text-success"></i>
          <span class="fw-semibold" style="color:#065f46">Nóminas — {{ meses[mes-1] }} {{ año }}</span>
        </div>
        {% if sin_nomina %}
        <form method="post" action="{{ url_for('nominas.generar') }}">
          <input type="hidden" name="anio" value="{{ año }}">
          <input type="hidden" name="mes"  value="{{ mes }}">
          <button class="btn btn-success btn-sm"
                  onclick="return confirm('Generar nóminas para {{ sin_nomina|length }} empleado(s)?')">
            <i class="bi bi-plus-circle me-1"></i>Generar nóminas
          </button>
        </form>
        {% endif %}
      </div>

      {% if nominas %}
      <div class="card-body p-0">
        <table class="table table-hover mb-0" style="font-size:.875rem">
          <thead>
            <tr>
              <th>Empleado</th>
              <th class="text-end">Bruto</th>
              <th class="text-end">IRPF</th>
              <th class="text-end">SS Trab.</th>
              <th class="text-end fw-bold">Neto</th>
              <th class="text-center">Estado</th>
              <th class="text-center no-print">Acc.</th>
            </tr>
          </thead>
          <tbody>
            {% for n in nominas %}
            <tr>
              <td>
                <div class="fw-semibold">{{ n.apellidos }}, {{ n.nombre }}</div>
                <div class="text-muted" style="font-size:.75rem">{{ n.cargo or '—' }}</div>
              </td>
              <td class="text-end">{{ '%.2f'|format(n.salario_bruto) }} €</td>
              <td class="text-end text-danger">-{{ '%.2f'|format(n.irpf_importe) }} €</td>
              <td class="text-end text-warning">-{{ '%.2f'|format(n.ss_trab_importe) }} €</td>
              <td class="text-end fw-bold text-success">{{ '%.2f'|format(n.salario_neto) }} €</td>
              <td class="text-center">
                {% if n.estado == 'pagada' %}
                <span class="badge" style="background:#dcfce7;color:#14532d;border:1px solid #86efac">
                  <i class="bi bi-check2-circle me-1"></i>Pagada
                </span>
                {% else %}
                <span class="badge bg-secondary">Borrador</span>
                {% endif %}
              </td>
              <td class="text-center no-print">
                <a href="{{ url_for('nominas.detalle', nid=n.id) }}"
                   class="btn btn-sm btn-outline-primary btn-action" title="Ver detalle">
                  <i class="bi bi-eye"></i>
                </a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
          <tfoot class="table-light">
            <tr class="fw-bold">
              <td>TOTALES ({{ nominas|length }})</td>
              <td class="text-end">{{ '%.2f'|format(totales.bruto) }} €</td>
              <td class="text-end text-danger">-{{ '%.2f'|format(totales.irpf) }} €</td>
              <td class="text-end text-warning">-{{ '%.2f'|format(totales.ss_trab) }} €</td>
              <td class="text-end text-success">{{ '%.2f'|format(totales.neto) }} €</td>
              <td colspan="2"></td>
            </tr>
          </tfoot>
        </table>
      </div>
      {% else %}
      <div class="card-body text-center py-5 text-muted">
        <i class="bi bi-receipt" style="font-size:2.5rem;opacity:.3"></i>
        <div class="mt-2">No hay nóminas para {{ meses[mes-1] }} {{ año }}.</div>
        {% if activos %}
        <form method="post" action="{{ url_for('nominas.generar') }}" class="mt-3">
          <input type="hidden" name="anio" value="{{ año }}">
          <input type="hidden" name="mes"  value="{{ mes }}">
          <button class="btn btn-success">
            <i class="bi bi-plus-circle me-1"></i>Generar nóminas para {{ activos|length }} empleado(s)
          </button>
        </form>
        {% else %}
        <a href="{{ url_for('nominas.empleado_nuevo') }}" class="btn btn-primary mt-3">
          <i class="bi bi-person-plus me-1"></i>Añadir primer empleado
        </a>
        {% endif %}
      </div>
      {% endif %}
    </div>

    <!-- Empleados sin nómina este mes -->
    {% if sin_nomina and nominas %}
    <div class="card border-0 shadow-sm mt-3">
      <div class="card-header border-0" style="background:#fffbeb;border-left:3px solid #f59e0b">
        <i class="bi bi-exclamation-triangle me-2 text-warning"></i>
        <span class="fw-semibold text-warning">Sin nómina este mes ({{ sin_nomina|length }})</span>
      </div>
      <div class="card-body p-0">
        <table class="table table-sm mb-0" style="font-size:.85rem">
          <tbody>
            {% for e in sin_nomina %}
            <tr>
              <td class="ps-3">{{ e.apellidos }}, {{ e.nombre }}</td>
              <td class="text-muted">{{ e.cargo or '—' }}</td>
              <td class="text-end">{{ '%.2f'|format(e.salario_bruto) }} €/mes</td>
              <td class="text-end pe-3">
                <form method="post" action="{{ url_for('nominas.generar') }}" class="d-inline">
                  <input type="hidden" name="anio" value="{{ año }}">
                  <input type="hidden" name="mes"  value="{{ mes }}">
                  <input type="hidden" name="empleado_ids" value="{{ e.id }}">
                  <button class="btn btn-outline-success btn-sm btn-action" title="Generar nómina">
                    <i class="bi bi-plus"></i>
                  </button>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- Panel derecho: resumen de costes -->
  <div class="col-lg-4">
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header border-0" style="background:linear-gradient(135deg,#f0f9ff,#e0f2fe)">
        <i class="bi bi-pie-chart me-2 text-info"></i>
        <span class="fw-semibold text-info">Resumen costes</span>
      </div>
      <div class="card-body" style="font-size:.875rem">
        <div class="d-flex justify-content-between py-2 border-bottom">
          <span class="text-muted">Salario bruto total</span>
          <span class="fw-semibold">{{ '%.2f'|format(totales.bruto) }} €</span>
        </div>
        <div class="d-flex justify-content-between py-2 border-bottom">
          <span class="text-danger">Retenciones IRPF</span>
          <span class="text-danger">-{{ '%.2f'|format(totales.irpf) }} €</span>
        </div>
        <div class="d-flex justify-content-between py-2 border-bottom">
          <span class="text-warning">SS trabajadores</span>
          <span class="text-warning">-{{ '%.2f'|format(totales.ss_trab) }} €</span>
        </div>
        <div class="d-flex justify-content-between py-2 border-bottom fw-bold">
          <span class="text-success">Neto a pagar</span>
          <span class="text-success">{{ '%.2f'|format(totales.neto) }} €</span>
        </div>
        <div class="d-flex justify-content-between py-2 border-bottom">
          <span class="text-muted">SS empresa</span>
          <span>+{{ '%.2f'|format(totales.ss_emp) }} €</span>
        </div>
        <div class="d-flex justify-content-between pt-3 fw-bold fs-5">
          <span>Coste empresa</span>
          <span>{{ '%.2f'|format(totales.coste) }} €</span>
        </div>
      </div>
    </div>

    <!-- Guía de porcentajes -->
    <div class="card border-0 shadow-sm">
      <div class="card-header border-0" style="background:#f8fafc">
        <i class="bi bi-info-circle me-2 text-muted"></i>
        <span class="fw-semibold text-muted small">Porcentajes 2025 (referencia)</span>
      </div>
      <div class="card-body p-3" style="font-size:.78rem">
        <div class="fw-semibold text-muted mb-2">Trabajador</div>
        <div class="d-flex justify-content-between mb-1">
          <span class="text-muted">Contingencias comunes</span><span>4,70 %</span>
        </div>
        <div class="d-flex justify-content-between mb-1">
          <span class="text-muted">Desempleo</span><span>1,55 %</span>
        </div>
        <div class="d-flex justify-content-between mb-2">
          <span class="text-muted">Formación profesional</span><span>0,10 %</span>
        </div>
        <div class="fw-semibold mb-1">Total trabajador: 6,35 %</div>
        <hr class="my-2">
        <div class="fw-semibold text-muted mb-2">Empresa</div>
        <div class="d-flex justify-content-between mb-1">
          <span class="text-muted">Contingencias comunes</span><span>23,60 %</span>
        </div>
        <div class="d-flex justify-content-between mb-1">
          <span class="text-muted">Desempleo (indef.)</span><span>5,50 %</span>
        </div>
        <div class="d-flex justify-content-between mb-1">
          <span class="text-muted">FOGASA</span><span>0,20 %</span>
        </div>
        <div class="d-flex justify-content-between mb-2">
          <span class="text-muted">Formación profesional</span><span>0,60 %</span>
        </div>
        <div class="fw-semibold">Total empresa: 29,90 %</div>
      </div>
    </div>
  </div>

</div>
{% endblock %}