{% extends "base.html" %}
{% block title %}Modelo 130{% endblock %}
{% block page_title %}Modelo 130 — IRPF trimestral (autónomos){% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('fiscal.index') }}" class="btn btn-outline-secondary btn-sm">
  <i class="bi bi-arrow-left me-1"></i>Volver al calendario
</a>
{% endblock %}

{% block content %}

<!-- Selector -->
<div class="card mb-4 border-0 shadow-sm">
  <div class="card-body py-3">
    <form method="get" class="d-flex align-items-center gap-3 flex-wrap">
      <div class="d-flex align-items-center gap-2">
        <label class="fw-semibold text-muted">Ejercicio</label>
        <select name="ejercicio" class="form-select form-select-sm" style="width:110px">
          {% for a in años %}<option {{ 'selected' if a==año }}>{{ a }}</option>{% endfor %}
        </select>
      </div>
      <div class="d-flex align-items-center gap-2">
        <label class="fw-semibold text-muted">Trimestre</label>
        <select name="trimestre" class="form-select form-select-sm" style="width:90px">
          {% for t in trimestres %}<option {{ 'selected' if t==trim }}>{{ t }}</option>{% endfor %}
        </select>
      </div>
      <button type="submit" class="btn btn-primary btn-sm">
        <i class="bi bi-calculator me-1"></i>Calcular
      </button>
    </form>
  </div>
</div>

{% if guardado %}
<div class="alert {% if guardado.estado=='presentado' %}alert-success{% else %}alert-warning{% endif %} d-flex align-items-center gap-3 mb-4">
  <i class="bi {% if guardado.estado=='presentado' %}bi-check-circle-fill{% else %}bi-pencil-square{% endif %} fs-4 flex-shrink-0"></i>
  <div>
    <strong>{{ 'Modelo presentado' if guardado.estado=='presentado' else 'Borrador guardado' }}</strong>
    &mdash; Resultado: {{ "%.2f"|format(guardado.resultado) }} €
    {% if guardado.fecha_presentacion %}&nbsp;· Presentado el {{ guardado.fecha_presentacion }}{% endif %}
    {% if guardado.notas %}<br><small class="text-muted">{{ guardado.notas }}</small>{% endif %}
  </div>
</div>
{% endif %}

<!-- Aclaración metodología -->
<div class="alert alert-info py-2 mb-4 d-flex gap-2 align-items-start" style="font-size:.82rem">
  <i class="bi bi-info-circle-fill text-info flex-shrink-0 mt-1"></i>
  <div>
    El Modelo 130 usa <strong>rendimientos acumulados desde el 1 de enero</strong> hasta el final del trimestre (método progresivo).
    Los pagos de trimestres anteriores ya presentados se descuentan del resultado.
    Período acumulado: <b>{{ calc.fi_ac }}</b> → <b>{{ calc.ff }}</b>
  </div>
</div>

<div class="row g-4">

  <!-- Ingresos acumulados -->
  <div class="col-lg-6">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header border-0" style="background:linear-gradient(135deg,#f0fdf4,#dcfce7)">
        <i class="bi bi-arrow-up-circle me-2 text-success"></i>
        <span class="fw-semibold text-success">Ingresos acumulados</span>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-6">
            <div class="p-3 rounded-2" style="background:#f8fafc">
              <div class="small text-muted mb-1">Ingresos (base, acum.)</div>
              <div class="fs-5 fw-bold text-success">{{ "%.2f"|format(calc.ing_acum) }} €</div>
            </div>
          </div>
          <div class="col-6">
            <div class="p-3 rounded-2" style="background:#f8fafc">
              <div class="small text-muted mb-1">Solo este trimestre</div>
              <div class="fs-5 fw-bold text-success">{{ "%.2f"|format(calc.ing_trim) }} €</div>
            </div>
          </div>
          <div class="col-12">
            <div class="p-3 rounded-2" style="background:#fff5f5">
              <div class="small text-muted mb-1"><i class="bi bi-dash-circle me-1 text-danger"></i>Retenciones IRPF clientes (acum.)</div>
              <div class="fs-5 fw-bold text-danger">{{ "%.2f"|format(calc.ret_acum) }} €</div>
              <div class="text-muted" style="font-size:.75rem">Ya retenidas por tus clientes · se descuentan al final</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Gastos acumulados -->
  <div class="col-lg-6">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-header border-0" style="background:linear-gradient(135deg,#fff5f5,#fee2e2)">
        <i class="bi bi-arrow-down-circle me-2 text-danger"></i>
        <span class="fw-semibold text-danger">Gastos deducibles acumulados</span>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-6">
            <div class="p-3 rounded-2" style="background:#f8fafc">
              <div class="small text-muted mb-1">Facturas recibidas (base)</div>
              <div class="fs-5 fw-bold text-danger">{{ "%.2f"|format(calc.gas_fr) }} €</div>
            </div>
          </div>
          <div class="col-6">
            <div class="p-3 rounded-2" style="background:#f8fafc">
              <div class="small text-muted mb-1">Tickets / gastos</div>
              <div class="fs-5 fw-bold text-danger">{{ "%.2f"|format(calc.gas_tg) }} €</div>
            </div>
          </div>
          <div class="col-6">
            <div class="p-3 rounded-2" style="background:#f8fafc">
              <div class="small text-muted mb-1">Cuotas SS autónomo</div>
              <div class="fs-5 fw-bold text-danger">{{ "%.2f"|format(calc.cuotas) }} €</div>
            </div>
          </div>
          <div class="col-6">
            <div class="p-3 rounded-2 border border-danger border-opacity-25" style="background:#fff5f5">
              <div class="small text-muted mb-1 fw-semibold">TOTAL gastos acum.</div>
              <div class="fs-5 fw-bold text-danger">{{ "%.2f"|format(calc.gas_acum) }} €</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- Cálculo escalonado -->
<div class="card mt-4 border-0 shadow-sm">
  <div class="card-header border-0" style="background:linear-gradient(135deg,#eef3ff,#e0e7ff)">
    <i class="bi bi-calculator me-2 text-primary"></i>
    <span class="fw-semibold text-primary">Cálculo paso a paso</span>
  </div>
  <div class="card-body">
    <div class="row g-3">
      <div class="col-sm-6 col-lg-3">
        <div class="text-center p-3 rounded-2" style="background:#f8fafc">
          <div class="small text-muted mb-1">① Rendimiento neto acum.</div>
          <div class="fs-5 fw-bold {% if calc.benef_acum >= 0 %}text-success{% else %}text-danger{% endif %}">
            {{ "%.2f"|format(calc.benef_acum) }} €
          </div>
          <div class="text-muted" style="font-size:.72rem">ingresos − gastos</div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="text-center p-3 rounded-2" style="background:#f8fafc">
          <div class="small text-muted mb-1">② Cuota íntegra (20%)</div>
          <div class="fs-5 fw-bold text-primary">{{ "%.2f"|format(calc.cuota_int) }} €</div>
          <div class="text-muted" style="font-size:.72rem">rendimiento × 20%</div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="text-center p-3 rounded-2" style="background:#f8fafc">
          <div class="small text-muted mb-1">③ − Retenciones clientes</div>
          <div class="fs-5 fw-bold text-danger">{{ "%.2f"|format(calc.ret_acum) }} €</div>
          <div class="text-muted" style="font-size:.72rem">ya retenido por clientes</div>
        </div>
      </div>
      <div class="col-sm-6 col-lg-3">
        <div class="text-center p-3 rounded-2" style="background:#f8fafc">
          <div class="small text-muted mb-1">④ − Pagos anteriores</div>
          <div class="fs-5 fw-bold text-danger">{{ "%.2f"|format(calc.prev_pagos) }} €</div>
          <div class="text-muted" style="font-size:.72rem">trimestres ya presentados</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Resultado -->
<div class="card mt-4 border-0 shadow"
     style="background:linear-gradient(135deg,{% if calc.resultado > 0 %}#7c3aed,#6d28d9{% elif calc.resultado_calc < 0 %}#15803d,#16a34a{% else %}#475569,#334155{% endif %})">
  <div class="card-body p-4">
    <div class="row align-items-center g-3">
      <div class="col-md-7 text-white">
        <h5 class="mb-2 fw-bold">Resultado Modelo 130 — {{ trim }}/{{ año }}</h5>
        <div class="d-flex gap-3 opacity-90 flex-wrap" style="font-size:.85rem">
          <span>Cuota íntegra: <b>{{ "%.2f"|format(calc.cuota_int) }} €</b></span>
          <span>– Retenciones: <b>{{ "%.2f"|format(calc.ret_acum) }} €</b></span>
          <span>– Pagos previos: <b>{{ "%.2f"|format(calc.prev_pagos) }} €</b></span>
        </div>
        {% if calc.resultado_calc < 0 %}
        <div class="mt-2 opacity-75 small">
          <i class="bi bi-info-circle me-1"></i>Resultado negativo ({{ "%.2f"|format(calc.resultado_calc) }} €): no se ingresa nada este trimestre.
        </div>
        {% endif %}
      </div>
      <div class="col-md-2 text-center text-white">
        <div class="opacity-75 small mb-1">
          {% if calc.resultado > 0 %}A ingresar{% else %}Sin pago{% endif %}
        </div>
        <div class="display-5 fw-bold">{{ "%.2f"|format(calc.resultado) }} €</div>
      </div>
      <div class="col-md-3 d-flex justify-content-end gap-2 flex-wrap">
        <a href="{{ url_for('fiscal.exportar_130', ejercicio=año, trimestre=trim) }}"
           class="btn btn-outline-light btn-sm">
          <i class="bi bi-file-earmark-excel me-1"></i>Exportar Excel
        </a>
        <button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#modalGuardar">
          <i class="bi bi-floppy me-1"></i>Guardar
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal guardar -->
<div class="modal fade" id="modalGuardar" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <form method="post" action="{{ url_for('fiscal.guardar_130') }}">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><i class="bi bi-floppy me-2"></i>Guardar Modelo 130</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" name="ejercicio" value="{{ año }}">
          <input type="hidden" name="trimestre" value="{{ trim }}">
          <div class="mb-3">
            <label class="form-label fw-semibold">Estado</label>
            <div class="d-flex gap-3">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="estado" value="borrador"
                       id="rb" {{ 'checked' if not guardado or guardado.estado=='borrador' }}>
                <label class="form-check-label" for="rb">Borrador</label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="estado" value="presentado"
                       id="rp" {{ 'checked' if guardado and guardado.estado=='presentado' }}>
                <label class="form-check-label" for="rp">Presentado</label>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">Notas (opcional)</label>
            <textarea class="form-control" name="notas" rows="2" placeholder="Referencia AEAT, observaciones...">{{ guardado.notas if guardado and guardado.notas }}</textarea>
          </div>
          <div class="alert alert-info py-2 mb-0" style="font-size:.85rem">
            <i class="bi bi-info-circle me-1"></i>
            A ingresar: <b>{{ "%.2f"|format(calc.resultado) }} €</b>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary btn-sm">
            <i class="bi bi-check2 me-1"></i>Guardar
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

{% endblock %}