{% extends "base.html" %}
{% block title %}Modelo 390{% endblock %}
{% block page_title %}Modelo 390 — Resumen anual IVA{% 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 año -->
<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">
      <label class="fw-semibold text-muted">Ejercicio</label>
      <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>
      <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 %}
  </div>
</div>
{% endif %}

<!-- Tabla por trimestres -->
<div class="card border-0 shadow-sm mb-4">
  <div class="card-header border-0" style="background:linear-gradient(135deg,#eef3ff,#e0e7ff)">
    <i class="bi bi-table me-2 text-primary"></i>
    <span class="fw-semibold text-primary">Desglose por trimestres — {{ año }}</span>
  </div>
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table mb-0" style="font-size:.875rem">
        <thead>
          <tr>
            <th>Trimestre</th>
            <th class="text-end">Base devengada</th>
            <th class="text-end">Cuota devengada</th>
            <th class="text-end">Base soportada</th>
            <th class="text-end">Cuota soportada</th>
            <th class="text-end fw-bold">Diferencia</th>
            <th class="text-center">Estado M303</th>
          </tr>
        </thead>
        <tbody>
          {% for t in trimestres_390 %}
          <tr>
            <td>
              <span class="fw-semibold">{{ t.trim }}</span>
              <small class="text-muted ms-1">{{ t.label }}</small>
            </td>
            <td class="text-end">{{ "%.2f"|format(t.calc.total_dev_base) }} €</td>
            <td class="text-end text-primary fw-semibold">{{ "%.2f"|format(t.calc.total_dev_cuota) }} €</td>
            <td class="text-end">{{ "%.2f"|format(t.calc.total_sop_base) }} €</td>
            <td class="text-end text-danger">{{ "%.2f"|format(t.calc.total_sop_cuota) }} €</td>
            <td class="text-end fw-bold {% if t.calc.resultado >= 0 %}text-primary{% else %}text-success{% endif %}">
              {{ "%.2f"|format(t.calc.resultado) }} €
            </td>
            <td class="text-center">
              {% if t.guardado %}
                <span class="badge {% if t.guardado.estado=='presentado' %}bg-success{% else %}bg-warning text-dark{% endif %}">
                  {{ t.guardado.estado|capitalize }}
                </span>
              {% else %}
                <span class="badge bg-secondary bg-opacity-25 text-secondary">Sin guardar</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
        <tfoot class="fw-bold" style="background:#f8fafc">
          <tr>
            <td>TOTAL ANUAL</td>
            <td class="text-end">{{ "%.2f"|format(total_dev_base) }} €</td>
            <td class="text-end text-primary">{{ "%.2f"|format(total_dev_cuota) }} €</td>
            <td class="text-end">{{ "%.2f"|format(total_sop_base) }} €</td>
            <td class="text-end text-danger">{{ "%.2f"|format(total_sop_cuota) }} €</td>
            <td class="text-end {% if resultado_anual >= 0 %}text-primary{% else %}text-success{% endif %}">
              {{ "%.2f"|format(resultado_anual) }} €
            </td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

<!-- Resultado anual -->
<div class="card border-0 shadow"
     style="background:linear-gradient(135deg,{% if resultado_anual >= 0 %}#1e40af,#1d4ed8{% else %}#15803d,#16a34a{% 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 390 — Ejercicio {{ año }}</h5>
        <div class="d-flex gap-4 opacity-90 flex-wrap" style="font-size:.875rem">
          <span>IVA devengado total: <b>{{ "%.2f"|format(total_dev_cuota) }} €</b></span>
          <span>IVA soportado total: <b>{{ "%.2f"|format(total_sop_cuota) }} €</b></span>
        </div>
        <div class="mt-2 opacity-75 small">
          <i class="bi bi-info-circle me-1"></i>
          Plazo de presentación: 1–30 enero del ejercicio siguiente
        </div>
      </div>
      <div class="col-md-2 text-center text-white">
        <div class="opacity-75 small mb-1">
          {% if resultado_anual >= 0 %}Resultado positivo{% else %}Resultado negativo{% endif %}
        </div>
        <div class="display-5 fw-bold">{{ "%.2f"|format(resultado_anual|abs) }} €</div>
      </div>
      <div class="col-md-3 d-flex justify-content-end">
        <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_390') }}">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><i class="bi bi-floppy me-2"></i>Guardar Modelo 390</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="resultado" value="{{ resultado_anual }}">
          <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>
            Resultado calculado: <b>{{ "%.2f"|format(resultado_anual) }} €</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 %}