{% extends "base.html" %}
{% block title %}Nómina · {{ nom.apellidos }}, {{ nom.nombre }} · {{ meses[nom.mes-1] }} {{ nom.anio }}{% endblock %}
{% block page_title %}Detalle de nómina{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('nominas.index', anio=nom.anio, mes=nom.mes) }}" class="btn btn-outline-secondary btn-sm">
  <i class="bi bi-arrow-left me-1"></i>Volver
</a>
<button onclick="window.print()" class="btn btn-outline-secondary btn-sm no-print">
  <i class="bi bi-printer me-1"></i>Imprimir / PDF
</button>
{% endblock %}

{% block extra_head %}
<style>
  /* ── Variables ─────────────────────────────────────── */
  :root {
    --nom-navy:   #0f2744;
    --nom-blue:   #1e4a8a;
    --nom-accent: #2d6cc8;
    --nom-light:  #eef4fd;
    --nom-border: #ccd9ef;
    --nom-text:   #1a2740;
    --nom-muted:  #5a6e8a;
    --nom-red:    #b91c1c;
    --nom-green:  #166534;
    --nom-gold:   #92400e;
  }

  /* ── Contenedor del documento ─────────────────────── */
  .nom-doc {
    max-width: 800px;
    margin: 0 auto 40px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 24px rgba(0,0,0,.12);
    font-size: .88rem;
    color: var(--nom-text);
    font-family: 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
  }

  /* ── Cabecera ─────────────────────────────────────── */
  .nom-header {
    background: var(--nom-navy);
    color: #fff;
    padding: 22px 28px 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  .nom-empresa-nombre {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .3px;
    margin-bottom: 4px;
  }
  .nom-empresa-dato { font-size: .78rem; opacity: .75; line-height: 1.7; }
  .nom-titulo {
    text-align: right;
    flex-shrink: 0;
  }
  .nom-titulo-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: .6;
    margin-bottom: 3px;
  }
  .nom-titulo-periodo {
    font-size: 1.05rem;
    font-weight: 700;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 6px;
    padding: 4px 14px;
    white-space: nowrap;
  }
  .nom-estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    font-size: .72rem;
    padding: 3px 10px;
    border-radius: 20px;
  }
  .nom-estado-pagada  { background: #dcfce7; color: #14532d; }
  .nom-estado-borrador { background: rgba(255,255,255,.15); color: rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.25); }

  /* ── Info trabajador / período ────────────────────── */
  .nom-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--nom-border);
  }
  .nom-info-col {
    padding: 16px 24px;
  }
  .nom-info-col:first-child {
    border-right: 1px solid var(--nom-border);
  }
  .nom-info-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--nom-accent);
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .nom-info-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--nom-border);
  }
  .nom-dato { display: flex; gap: 8px; margin-bottom: 5px; line-height: 1.4; }
  .nom-dato-key { color: var(--nom-muted); min-width: 90px; flex-shrink: 0; font-size: .82rem; }
  .nom-dato-val { font-weight: 500; font-size: .85rem; word-break: break-all; }

  /* ── Tabla conceptos ──────────────────────────────── */
  .nom-section-title {
    background: var(--nom-light);
    border-top: 1px solid var(--nom-border);
    border-bottom: 1px solid var(--nom-border);
    padding: 7px 24px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--nom-blue);
  }

  .nom-table {
    width: 100%;
    border-collapse: collapse;
  }
  .nom-table td {
    padding: 8px 24px;
    border-bottom: 1px solid #f0f4fa;
    vertical-align: middle;
  }
  .nom-table tr:last-child td { border-bottom: none; }
  .nom-table .nom-concepto { color: var(--nom-text); }
  .nom-table .nom-sub {
    font-size: .78rem;
    color: var(--nom-muted);
    padding-top: 0;
    padding-bottom: 3px;
    border-bottom: none;
  }
  .nom-table .nom-pct {
    text-align: right;
    color: var(--nom-muted);
    font-size: .82rem;
    width: 100px;
  }
  .nom-table .nom-importe {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    width: 130px;
  }
  .nom-total-row td {
    background: #f8fafc;
    font-weight: 600;
    font-size: .85rem;
    padding: 9px 24px;
    border-top: 2px solid var(--nom-border) !important;
    border-bottom: 2px solid var(--nom-border) !important;
  }
  .nom-devengo   { color: var(--nom-text); }
  .nom-deduccion { color: var(--nom-red); }

  /* ── Líquido a percibir ───────────────────────────── */
  .nom-neto {
    background: var(--nom-navy);
    color: #fff;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nom-neto-label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: .7;
    margin-bottom: 2px;
  }
  .nom-neto-cantidad {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: .5px;
  }
  .nom-neto-right { text-align: right; }
  .nom-neto-fecha {
    font-size: .78rem;
    opacity: .65;
    margin-top: 2px;
  }

  /* ── Coste empresa / bases ────────────────────────── */
  .nom-footer-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 3px solid var(--nom-accent);
    background: var(--nom-light);
  }
  .nom-footer-col {
    padding: 14px 24px;
  }
  .nom-footer-col:first-child {
    border-right: 1px solid var(--nom-border);
  }
  .nom-footer-title {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--nom-accent);
    font-weight: 700;
    margin-bottom: 8px;
  }
  .nom-footer-row { display: flex; justify-content: space-between; margin-bottom: 3px; font-size: .82rem; }
  .nom-footer-row .k { color: var(--nom-muted); }
  .nom-footer-row .v { font-weight: 500; font-variant-numeric: tabular-nums; }
  .nom-coste-total { font-size: 1rem; font-weight: 700; color: var(--nom-navy); margin-top: 6px; }

  /* ── Firma ────────────────────────────────────────── */
  .nom-firmas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--nom-border);
    padding: 20px 24px 24px;
    gap: 24px;
  }
  .nom-firma-box {
    text-align: center;
  }
  .nom-firma-linea {
    border-top: 1px solid #94a3b8;
    margin: 48px 16px 8px;
  }
  .nom-firma-label {
    font-size: .72rem;
    color: var(--nom-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .nom-firma-nombre {
    font-size: .82rem;
    font-weight: 500;
    color: var(--nom-text);
    margin-top: 2px;
  }

  /* ── Notas ────────────────────────────────────────── */
  .nom-notas {
    border-top: 1px solid var(--nom-border);
    padding: 12px 24px;
    font-size: .78rem;
    color: var(--nom-muted);
    background: #fffbeb;
    display: flex;
    gap: 8px;
    align-items: flex-start;
  }

  /* ── Aviso legal pie ──────────────────────────────── */
  .nom-legal {
    border-top: 1px solid var(--nom-border);
    padding: 8px 24px;
    font-size: .68rem;
    color: #94a3b8;
    text-align: center;
    line-height: 1.6;
  }

  /* ── Panel de acciones (pantalla) ─────────────────── */
  .nom-actions {
    max-width: 800px;
    margin: 0 auto 32px;
  }

  /* ── Impresión ────────────────────────────────────── */
  @media print {
    .nom-actions, .no-print { display: none !important; }
    .nom-doc {
      box-shadow: none !important;
      margin: 0;
      max-width: 100%;
      border-radius: 0;
    }
    body { background: #fff; }
    .content { padding: 0 !important; }
  }
</style>
{% endblock %}

{% block content %}

{# ── Helpers de formato ─────────────────────────────────────────────── #}
{% macro eur(v) %}{{ '%.2f'|format(v)|replace('.',',')|replace(',', '.', 1) if ',' in '%.2f'|format(v) else '%.2f'|format(v) }} €{% endmacro %}

{# Calcula fin de mes #}
{# fin_dia pasado desde Python con calendar.monthrange (correcto en años bisiestos) #}
{% set fi_str   = '%02d/01/%04d'|format(nom.mes, nom.anio)|replace('01/01','01/01') %}
{% set fi = '01/%02d/%04d'|format(nom.mes, nom.anio) %}
{% set ff = '%02d/%02d/%04d'|format(fin_dia, nom.mes, nom.anio) %}

{# SS desglosado (proporcional al % configurado) #}
{% set ss_total = nom.ss_trab_importe %}
{% set ss_pct   = nom.ss_trab_pct %}
{% if ss_pct > 0 %}
  {% set cc_imp  = (nom.salario_bruto * 4.70  / 100) | round(2) %}
  {% set des_imp = (nom.salario_bruto * 1.55  / 100) | round(2) %}
  {% set fp_imp  = (ss_total - cc_imp - des_imp)     | round(2) %}
  {% set ss_desglosado = (ss_pct == 6.35) %}
{% else %}
  {% set ss_desglosado = false %}
{% endif %}

{% set total_ded = (nom.irpf_importe + nom.ss_trab_importe + nom.otras_deducciones) | round(2) %}

<!-- ═══ DOCUMENTO NÓMINA ═══════════════════════════════════════════════ -->
<div class="nom-doc">

  <!-- Cabecera empresa -->
  <div class="nom-header">
    <div>
      <div class="nom-empresa-nombre">
        {{ empresa.nombre if empresa else 'Empresa' }}
      </div>
      <div class="nom-empresa-dato">
        {% if empresa and empresa.nif %}NIF: {{ empresa.nif }}{% endif %}
        {% if empresa and empresa.telefono %} &nbsp;·&nbsp; Tel: {{ empresa.telefono }}{% endif %}
      </div>
      {% if empresa and empresa.direccion %}
      <div class="nom-empresa-dato">
        {{ empresa.direccion }}{% if empresa.cp %}, {{ empresa.cp }}{% endif %}{% if empresa.ciudad %} {{ empresa.ciudad }}{% endif %}
      </div>
      {% endif %}
    </div>
    <div class="nom-titulo">
      <div class="nom-titulo-label">Recibo de Salarios</div>
      <div class="nom-titulo-periodo">{{ meses[nom.mes-1] | upper }} {{ nom.anio }}</div>
      {% if nom.estado == 'pagada' %}
      <div>
        <span class="nom-estado-badge nom-estado-pagada">
          <i class="bi bi-check2-circle"></i> Pagada{% if nom.fecha_pago %} · {{ nom.fecha_pago }}{% endif %}
        </span>
      </div>
      {% else %}
      <div>
        <span class="nom-estado-badge nom-estado-borrador">Borrador</span>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Datos trabajador / período -->
  <div class="nom-info">
    <div class="nom-info-col">
      <div class="nom-info-label">Trabajador</div>
      <div class="nom-dato">
        <span class="nom-dato-key">Nombre</span>
        <span class="nom-dato-val">{{ nom.apellidos }}{% if nom.apellidos and nom.nombre %}, {% endif %}{{ nom.nombre }}</span>
      </div>
      {% if nom.emp_nif %}
      <div class="nom-dato">
        <span class="nom-dato-key">NIF / NIE</span>
        <span class="nom-dato-val">{{ nom.emp_nif }}</span>
      </div>
      {% endif %}
      {% if nom.cargo %}
      <div class="nom-dato">
        <span class="nom-dato-key">Categoría</span>
        <span class="nom-dato-val">{{ nom.cargo }}</span>
      </div>
      {% endif %}
      {% if nom.cuenta_bancaria %}
      <div class="nom-dato">
        <span class="nom-dato-key">IBAN pago</span>
        <span class="nom-dato-val" style="font-family:monospace;font-size:.8rem">{{ nom.cuenta_bancaria }}</span>
      </div>
      {% endif %}
    </div>
    <div class="nom-info-col">
      <div class="nom-info-label">Período</div>
      <div class="nom-dato">
        <span class="nom-dato-key">Liquidación</span>
        <span class="nom-dato-val">{{ fi }} — {{ ff }}</span>
      </div>
      <div class="nom-dato">
        <span class="nom-dato-key">Días</span>
        <span class="nom-dato-val">{{ fin_dia }}</span>
      </div>
      <div class="nom-dato">
        <span class="nom-dato-key">Empresa</span>
        <span class="nom-dato-val">{{ empresa.nombre if empresa else '—' }}</span>
      </div>
      {% if empresa and empresa.nif %}
      <div class="nom-dato">
        <span class="nom-dato-key">NIF empresa</span>
        <span class="nom-dato-val">{{ empresa.nif }}</span>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- I. DEVENGOS -->
  <div class="nom-section-title">I. &nbsp; Devengos</div>
  <table class="nom-table">
    <tr>
      <td class="nom-concepto">Salario base</td>
      <td class="nom-pct"></td>
      <td class="nom-importe nom-devengo">{{ '%.2f'|format(nom.salario_bruto) }} €</td>
    </tr>
    <tr class="nom-total-row">
      <td>Total devengado</td>
      <td class="nom-pct"></td>
      <td class="nom-importe">{{ '%.2f'|format(nom.salario_bruto) }} €</td>
    </tr>
  </table>

  <!-- II. DEDUCCIONES -->
  <div class="nom-section-title">II. &nbsp; Deducciones</div>
  <table class="nom-table">
    <!-- IRPF -->
    <tr>
      <td class="nom-concepto">Retención IRPF</td>
      <td class="nom-pct">{{ nom.irpf_pct }} %</td>
      <td class="nom-importe nom-deduccion">-{{ '%.2f'|format(nom.irpf_importe) }} €</td>
    </tr>

    <!-- SS trabajador -->
    {% if ss_desglosado %}
    <tr>
      <td class="nom-concepto">Cot. SS — Contingencias comunes</td>
      <td class="nom-pct">4,70 %</td>
      <td class="nom-importe nom-deduccion">-{{ '%.2f'|format(cc_imp) }} €</td>
    </tr>
    <tr>
      <td class="nom-concepto">Cot. SS — Desempleo</td>
      <td class="nom-pct">1,55 %</td>
      <td class="nom-importe nom-deduccion">-{{ '%.2f'|format(des_imp) }} €</td>
    </tr>
    <tr>
      <td class="nom-concepto">Cot. SS — Formación profesional</td>
      <td class="nom-pct">0,10 %</td>
      <td class="nom-importe nom-deduccion">-{{ '%.2f'|format(fp_imp) }} €</td>
    </tr>
    {% else %}
    <tr>
      <td class="nom-concepto">Cuotas Seguridad Social (trabajador)</td>
      <td class="nom-pct">{{ nom.ss_trab_pct }} %</td>
      <td class="nom-importe nom-deduccion">-{{ '%.2f'|format(nom.ss_trab_importe) }} €</td>
    </tr>
    {% endif %}

    {% if nom.otras_deducciones %}
    <tr>
      <td class="nom-concepto">Otras deducciones</td>
      <td class="nom-pct"></td>
      <td class="nom-importe nom-deduccion">-{{ '%.2f'|format(nom.otras_deducciones) }} €</td>
    </tr>
    {% endif %}

    <tr class="nom-total-row">
      <td>Total deducciones</td>
      <td class="nom-pct"></td>
      <td class="nom-importe nom-deduccion">-{{ '%.2f'|format(total_ded) }} €</td>
    </tr>
  </table>

  <!-- LÍQUIDO A PERCIBIR -->
  <div class="nom-neto">
    <div>
      <div class="nom-neto-label">Líquido a percibir</div>
      <div class="nom-neto-cantidad">{{ '%.2f'|format(nom.salario_neto) }} €</div>
    </div>
    <div class="nom-neto-right">
      <div style="font-size:.72rem;opacity:.6;margin-bottom:4px">Pago</div>
      {% if nom.cuenta_bancaria %}
      <div style="font-family:monospace;font-size:.78rem;opacity:.85">{{ nom.cuenta_bancaria }}</div>
      {% endif %}
      {% if nom.fecha_pago %}
      <div class="nom-neto-fecha">Fecha de pago: {{ nom.fecha_pago }}</div>
      {% endif %}
    </div>
  </div>

  <!-- Footer: Coste empresa + Bases cotización -->
  <div class="nom-footer-info">
    <div class="nom-footer-col">
      <div class="nom-footer-title">Bases de cotización</div>
      <div class="nom-footer-row">
        <span class="k">Base contingencias comunes</span>
        <span class="v">{{ '%.2f'|format(nom.salario_bruto) }} €</span>
      </div>
      <div class="nom-footer-row">
        <span class="k">Base IRPF (tipo efectivo)</span>
        <span class="v">{{ nom.irpf_pct }} %</span>
      </div>
      <div class="nom-footer-row">
        <span class="k">Base cotización empresa</span>
        <span class="v">{{ '%.2f'|format(nom.salario_bruto) }} €</span>
      </div>
    </div>
    <div class="nom-footer-col">
      <div class="nom-footer-title">Coste empresa</div>
      <div class="nom-footer-row">
        <span class="k">Salario bruto</span>
        <span class="v">{{ '%.2f'|format(nom.salario_bruto) }} €</span>
      </div>
      <div class="nom-footer-row">
        <span class="k">SS a cargo empresa ({{ nom.ss_emp_pct }} %)</span>
        <span class="v">{{ '%.2f'|format(nom.ss_emp_importe) }} €</span>
      </div>
      <div class="nom-footer-row nom-coste-total" style="margin-top:8px">
        <span>Coste total empresa</span>
        <span>{{ '%.2f'|format(nom.coste_empresa) }} €</span>
      </div>
    </div>
  </div>

  <!-- Notas -->
  {% if nom.notas %}
  <div class="nom-notas">
    <i class="bi bi-chat-square-text" style="flex-shrink:0;margin-top:1px"></i>
    <span>{{ nom.notas }}</span>
  </div>
  {% endif %}

  <!-- Firmas -->
  <div class="nom-firmas">
    <div class="nom-firma-box">
      <div class="nom-firma-linea"></div>
      <div class="nom-firma-label">El/La trabajador/a</div>
      <div class="nom-firma-nombre">{{ nom.apellidos }}{% if nom.apellidos and nom.nombre %}, {% endif %}{{ nom.nombre }}</div>
    </div>
    <div class="nom-firma-box">
      <div class="nom-firma-linea"></div>
      <div class="nom-firma-label">Por la empresa</div>
      <div class="nom-firma-nombre">{{ empresa.nombre if empresa else '' }}</div>
    </div>
  </div>

  <!-- Pie legal -->
  <div class="nom-legal">
    Recibo de salarios conforme al artículo 29 del Estatuto de los Trabajadores (R.D.Leg. 2/2015).
    La firma del trabajador/a acredita la recepción del importe indicado.
  </div>

</div><!-- /nom-doc -->

<!-- ═══ PANEL DE ACCIONES (solo pantalla) ═════════════════════════════ -->
<div class="nom-actions no-print">
  <div class="row g-3">

    <!-- Ajustar conceptos -->
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header border-0" style="background:#f8fafc">
          <i class="bi bi-sliders me-2 text-muted"></i>
          <span class="fw-semibold text-muted small">Ajustar conceptos</span>
        </div>
        <div class="card-body">
          <form method="post" action="{{ url_for('nominas.editar', nid=nom.id) }}">
            <div class="row g-2 mb-3">
              <div class="col-6">
                <label class="form-label form-label-sm">Bruto (€)</label>
                <input type="number" name="salario_bruto" class="form-control form-control-sm"
                       step="0.01" value="{{ nom.salario_bruto }}">
              </div>
              <div class="col-6">
                <label class="form-label form-label-sm">IRPF (%)</label>
                <input type="number" name="irpf_pct" class="form-control form-control-sm"
                       step="0.01" value="{{ nom.irpf_pct }}">
              </div>
              <div class="col-6">
                <label class="form-label form-label-sm">SS trab. (%)</label>
                <input type="number" name="ss_trab_pct" class="form-control form-control-sm"
                       step="0.01" value="{{ nom.ss_trab_pct }}">
              </div>
              <div class="col-6">
                <label class="form-label form-label-sm">SS emp. (%)</label>
                <input type="number" name="ss_emp_pct" class="form-control form-control-sm"
                       step="0.01" value="{{ nom.ss_emp_pct }}">
              </div>
              <div class="col-6">
                <label class="form-label form-label-sm">Otras ded. (€)</label>
                <input type="number" name="otras_deducciones" class="form-control form-control-sm"
                       step="0.01" value="{{ nom.otras_deducciones }}">
              </div>
              <div class="col-6">
                <label class="form-label form-label-sm">Notas</label>
                <input type="text" name="notas" class="form-control form-control-sm"
                       value="{{ nom.notas or '' }}">
              </div>
            </div>
            <button type="submit" class="btn btn-primary btn-sm w-100">
              <i class="bi bi-arrow-clockwise me-1"></i>Recalcular y guardar
            </button>
          </form>
        </div>
      </div>
    </div>

    <!-- Estado y acciones -->
    <div class="col-md-6">
      <div class="card border-0 shadow-sm">
        <div class="card-header border-0" style="background:#f8fafc">
          <i class="bi bi-cash-coin me-2 text-muted"></i>
          <span class="fw-semibold text-muted small">Estado de pago</span>
        </div>
        <div class="card-body d-flex flex-column gap-2">
          {% if nom.estado == 'borrador' %}
          <form method="post" action="{{ url_for('nominas.pagar', nid=nom.id) }}">
            <div class="mb-2">
              <label class="form-label form-label-sm">Fecha de pago</label>
              <input type="date" name="fecha_pago" class="form-control form-control-sm"
                     value="{{ nom.fecha_pago or '' }}">
            </div>
            <button type="submit" class="btn btn-success w-100">
              <i class="bi bi-check2-circle me-1"></i>Marcar como pagada
            </button>
          </form>
          {% else %}
          <div class="text-center py-2">
            <i class="bi bi-check2-circle text-success fs-4"></i>
            <div class="fw-bold text-success mt-1">Nómina pagada</div>
            {% if nom.fecha_pago %}<div class="text-muted small">{{ nom.fecha_pago }}</div>{% endif %}
          </div>
          <form method="post" action="{{ url_for('nominas.revertir_borrador', nid=nom.id) }}">
            <button type="submit" class="btn btn-outline-secondary btn-sm w-100">
              <i class="bi bi-arrow-counterclockwise me-1"></i>Revertir a borrador
            </button>
          </form>
          {% endif %}
          <hr class="my-1">
          <form method="post" action="{{ url_for('nominas.eliminar', nid=nom.id) }}"
                onsubmit="return confirm('¿Eliminar esta nómina?')">
            <button type="submit" class="btn btn-outline-danger btn-sm w-100">
              <i class="bi bi-trash me-1"></i>Eliminar nómina
            </button>
          </form>
        </div>
      </div>
    </div>

  </div>
</div>

{% endblock %}