{% extends "base.html" %}
{% block title %}Modelo 190{% endblock %}
{% block page_title %}Modelo 190 — Resumen anual retenciones IRPF{% endblock %}

{% block content %}
<div class="row g-3 mb-3">
  <div class="col-auto">
    <form method="get" class="d-flex gap-2 align-items-center">
      <select name="ejercicio" class="form-select form-select-sm" style="width:110px" onchange="this.form.submit()">
        {% for a in años %}<option {{ 'selected' if a==año }}>{{ a }}</option>{% endfor %}
      </select>
    </form>
  </div>
  <div class="col-auto ms-auto">
    <a href="{{ url_for('fiscal.index', ejercicio=año) }}" class="btn btn-sm btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>Volver al calendario
    </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">{{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
  {% endfor %}
{% endwith %}

<!-- Cabecera resumen -->
<div class="card border-0 mb-4" style="background:linear-gradient(135deg,#1e3a8a,#1d4ed8);color:#fff">
  <div class="card-body p-4">
    <div class="d-flex align-items-center gap-3 mb-3">
      <i class="bi bi-file-earmark-person-fill" style="font-size:2rem;opacity:.8"></i>
      <div>
        <div class="fw-bold fs-5">Modelo 190 — Ejercicio {{ año }}</div>
        <div style="opacity:.8;font-size:.88rem">Resumen anual de retenciones e ingresos a cuenta del IRPF</div>
      </div>
    </div>
    <div class="row g-4">
      <div class="col-auto">
        <div style="opacity:.7;font-size:.8rem">Perceptores profesionales</div>
        <div class="fw-bold fs-5">{{ calc.perceptores_prof|length }}</div>
      </div>
      <div class="col-auto">
        <div style="opacity:.7;font-size:.8rem">Base profesional</div>
        <div class="fw-bold fs-5">{{ "%.2f"|format(calc.total_base_prof) }} €</div>
      </div>
      <div class="col-auto">
        <div style="opacity:.7;font-size:.8rem">Cuota profesional</div>
        <div class="fw-bold fs-5">{{ "%.2f"|format(calc.total_cuota_prof) }} €</div>
      </div>
      <div class="col-auto">
        <div style="opacity:.7;font-size:.8rem">Empleados</div>
        <div class="fw-bold fs-5">{{ calc.perceptores_nom|length }}</div>
      </div>
      <div class="col-auto">
        <div style="opacity:.7;font-size:.8rem">Cuota nóminas</div>
        <div class="fw-bold fs-5">{{ "%.2f"|format(calc.total_cuota_nom) }} €</div>
      </div>
      <div class="col-auto ms-auto text-end">
        <div style="opacity:.7;font-size:.8rem">TOTAL RETENCIONES</div>
        <div class="fw-bold" style="font-size:2rem">{{ "%.2f"|format(calc.total_cuota_prof + calc.total_cuota_nom) }} €</div>
      </div>
    </div>
  </div>
</div>

<!-- Perceptores profesionales -->
{% if calc.perceptores_prof %}
<div class="card mb-4">
  <div class="card-header fw-semibold">
    <i class="bi bi-briefcase me-2" style="color:#7c3aed"></i>Perceptores de actividades profesionales
    <span class="badge bg-secondary ms-2">Clave G</span>
  </div>
  <div class="table-responsive">
    <table class="table table-hover mb-0" style="font-size:.875rem">
      <thead class="table-light">
        <tr>
          <th>Nombre / Razón social</th>
          <th>NIF</th>
          <th class="text-end">Base íntegra (€)</th>
          <th class="text-end">Retención (€)</th>
          <th class="text-end">Nº facturas</th>
        </tr>
      </thead>
      <tbody>
        {% for p in calc.perceptores_prof %}
        <tr>
          <td class="fw-semibold">{{ p.nombre }}</td>
          <td class="text-muted font-monospace small">{{ p.nif or '—' }}</td>
          <td class="text-end">{{ "%.2f"|format(p.base) }}</td>
          <td class="text-end fw-semibold text-danger">{{ "%.2f"|format(p.cuota) }}</td>
          <td class="text-end text-muted">{{ p.n_facturas }}</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-light fw-bold">
        <tr>
          <td colspan="2">TOTAL</td>
          <td class="text-end">{{ "%.2f"|format(calc.total_base_prof) }}</td>
          <td class="text-end text-danger">{{ "%.2f"|format(calc.total_cuota_prof) }}</td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
{% endif %}

<!-- Perceptores nóminas -->
{% if calc.perceptores_nom %}
<div class="card mb-4">
  <div class="card-header fw-semibold">
    <i class="bi bi-people me-2" style="color:#059669"></i>Perceptores de rendimientos del trabajo
    <span class="badge bg-secondary ms-2">Clave A</span>
  </div>
  <div class="table-responsive">
    <table class="table table-hover mb-0" style="font-size:.875rem">
      <thead class="table-light">
        <tr>
          <th>Nombre</th>
          <th>NIF</th>
          <th class="text-end">Base íntegra (€)</th>
          <th class="text-end">Retención (€)</th>
          <th class="text-end">Nº nóminas</th>
        </tr>
      </thead>
      <tbody>
        {% for p in calc.perceptores_nom %}
        <tr>
          <td class="fw-semibold">{{ p.nombre }}</td>
          <td class="text-muted font-monospace small">{{ p.nif or '—' }}</td>
          <td class="text-end">{{ "%.2f"|format(p.base) }}</td>
          <td class="text-end fw-semibold text-danger">{{ "%.2f"|format(p.cuota) }}</td>
          <td class="text-end text-muted">{{ p.n_nominas }}</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-light fw-bold">
        <tr>
          <td colspan="2">TOTAL</td>
          <td class="text-end">{{ "%.2f"|format(calc.total_base_nom) }}</td>
          <td class="text-end text-danger">{{ "%.2f"|format(calc.total_cuota_nom) }}</td>
          <td></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
{% endif %}

{% if not calc.perceptores_prof and not calc.perceptores_nom %}
<div class="alert alert-info">
  <i class="bi bi-info-circle me-2"></i>
  No hay retenciones registradas en el ejercicio {{ año }}.
  Las retenciones se calculan automáticamente de las facturas recibidas con IRPF y de las nóminas pagadas.
</div>
{% endif %}

<!-- Guardar -->
<div class="card">
  <div class="card-header fw-semibold"><i class="bi bi-check2-square me-2"></i>Estado del modelo</div>
  <div class="card-body">
    <form method="post" action="{{ url_for('fiscal.guardar_190') }}" class="row g-2 align-items-end">
      <input type="hidden" name="ejercicio" value="{{ año }}">
      <div class="col-md-2 text-center">
        <div class="text-muted small">Total retenciones</div>
        <div class="fw-bold fs-5 text-danger">{{ "%.2f"|format(calc.total_cuota_prof + calc.total_cuota_nom) }} €</div>
      </div>
      <div class="col-md-3">
        <label class="form-label small">Estado</label>
        <select name="estado" class="form-select form-select-sm">
          <option value="borrador" {{ 'selected' if not guardado or guardado.estado=='borrador' }}>Borrador</option>
          <option value="presentado" {{ 'selected' if guardado and guardado.estado=='presentado' }}>Presentado a AEAT</option>
        </select>
      </div>
      <div class="col-md-5">
        <label class="form-label small">Notas</label>
        <input type="text" name="notas" class="form-control form-control-sm"
               value="{{ guardado.notas if guardado else '' }}" placeholder="Observaciones...">
      </div>
      <div class="col-md-2">
        <button class="btn btn-primary btn-sm w-100"><i class="bi bi-save me-1"></i>Guardar</button>
      </div>
    </form>
    {% if guardado %}
    <div class="mt-2">
      <span class="badge {% if guardado.estado=='presentado' %}bg-success{% else %}bg-warning text-dark{% endif %}">
        {{ 'Presentado' if guardado.estado=='presentado' else 'Borrador' }}
      </span>
      {% if guardado.fecha_presentacion %}<small class="text-muted ms-2">{{ guardado.fecha_presentacion }}</small>{% endif %}
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}