{% extends "base.html" %}
{% block title %}Modelo 111{% endblock %}
{% block page_title %}Modelo 111 — 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>
      <select name="trimestre" class="form-select form-select-sm" style="width:90px" onchange="this.form.submit()">
        {% for t in trimestres %}<option {{ 'selected' if t==trim }}>{{ t }}</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 %}

<div class="row g-4">
  <!-- Resultado -->
  <div class="col-12">
    <div class="card border-0" style="background:linear-gradient(135deg,{% if calc.resultado > 0 %}#7c3aed,#6d28d9{% else %}#059669,#047857{% endif %});color:#fff">
      <div class="card-body p-4">
        <div class="d-flex align-items-center gap-3 mb-2">
          <i class="bi bi-person-lines-fill" style="font-size:2rem;opacity:.8"></i>
          <div>
            <div class="fw-bold fs-5">Modelo 111 — {{ trim }} / {{ año }}</div>
            <div style="opacity:.8;font-size:.88rem">{{ trim_label }} · Retenciones e ingresos a cuenta IRPF</div>
          </div>
        </div>
        <div class="row g-3 mt-1">
          <div class="col-auto">
            <div style="opacity:.7;font-size:.8rem">Base profesionales</div>
            <div class="fw-bold fs-5">{{ "%.2f"|format(calc.base_prof) }} €</div>
          </div>
          <div class="col-auto">
            <div style="opacity:.7;font-size:.8rem">Base nóminas</div>
            <div class="fw-bold fs-5">{{ "%.2f"|format(calc.base_nom) }} €</div>
          </div>
          <div class="col-auto ms-auto text-end">
            <div style="opacity:.7;font-size:.8rem">RESULTADO A INGRESAR</div>
            <div class="fw-bold" style="font-size:2rem">{{ "%.2f"|format(calc.resultado) }} €</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Detalle actividades profesionales -->
  <div class="col-lg-6">
    <div class="card h-100">
      <div class="card-header fw-semibold">
        <i class="bi bi-briefcase me-2" style="color:#7c3aed"></i>Actividades profesionales (facturas recibidas con IRPF)
      </div>
      <div class="card-body">
        <table class="table table-sm mb-0">
          <tr><td class="text-muted">Período</td><td class="fw-semibold">{{ calc.fi }} → {{ calc.ff }}</td></tr>
          <tr><td class="text-muted">Base imponible</td><td class="fw-bold">{{ "%.2f"|format(calc.base_prof) }} €</td></tr>
          <tr><td class="text-muted">Cuota retenida</td><td class="fw-bold text-danger">{{ "%.2f"|format(calc.cuota_prof) }} €</td></tr>
        </table>
      </div>
    </div>
  </div>

  <!-- Detalle nóminas -->
  <div class="col-lg-6">
    <div class="card h-100">
      <div class="card-header fw-semibold">
        <i class="bi bi-people me-2" style="color:#059669"></i>Rendimientos del trabajo (nóminas)
      </div>
      <div class="card-body">
        {% if calc.base_nom > 0 %}
        <table class="table table-sm mb-0">
          <tr><td class="text-muted">Base imponible</td><td class="fw-bold">{{ "%.2f"|format(calc.base_nom) }} €</td></tr>
          <tr><td class="text-muted">Cuota retenida</td><td class="fw-bold text-danger">{{ "%.2f"|format(calc.cuota_nom) }} €</td></tr>
        </table>
        {% else %}
        <div class="text-center text-muted py-3 small">Sin nóminas en este trimestre</div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Resumen y guardar -->
  <div class="col-12">
    <div class="card">
      <div class="card-header fw-semibold"><i class="bi bi-check2-square me-2"></i>Resumen y estado</div>
      <div class="card-body">
        <div class="row g-3 mb-3">
          <div class="col-md-3 text-center">
            <div class="text-muted small">Base total</div>
            <div class="fw-bold fs-5">{{ "%.2f"|format(calc.base_total) }} €</div>
          </div>
          <div class="col-md-3 text-center">
            <div class="text-muted small">Cuota total retenida</div>
            <div class="fw-bold fs-5 text-danger">{{ "%.2f"|format(calc.cuota_total) }} €</div>
          </div>
          <div class="col-md-3 text-center">
            <div class="text-muted small">Resultado</div>
            <div class="fw-bold fs-5 {% if calc.resultado > 0 %}text-danger{% else %}text-success{% endif %}">{{ "%.2f"|format(calc.resultado) }} €</div>
          </div>
          <div class="col-md-3 text-center">
            {% if guardado %}
            <span class="badge {% if guardado.estado=='presentado' %}bg-success{% else %}bg-warning text-dark{% endif %} fs-6">
              {{ 'Presentado' if guardado.estado=='presentado' else 'Borrador' }}
            </span>
            {% if guardado.fecha_presentacion %}<div class="text-muted small mt-1">{{ guardado.fecha_presentacion }}</div>{% endif %}
            {% else %}
            <span class="badge bg-secondary fs-6">Sin guardar</span>
            {% endif %}
          </div>
        </div>
        <form method="post" action="{{ url_for('fiscal.guardar_111') }}" class="row g-2 align-items-end">
          <input type="hidden" name="ejercicio" value="{{ año }}">
          <input type="hidden" name="trimestre" value="{{ trim }}">
          <div class="col-md-4">
            <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-6">
            <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>
      </div>
    </div>
  </div>
</div>
{% endblock %}