{% extends "base.html" %}
{% block title %}Fiscalidad{% endblock %}
{% block page_title %}Fiscalidad — Calendario fiscal{% endblock %}

{% block content %}
<div class="d-flex align-items-center gap-3 mb-4">
  <form method="get" class="d-flex align-items-center gap-2">
    <label class="fw-semibold text-muted me-1">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>
  </form>
</div>

<!-- Tarjetas de trimestres -->
<div class="row g-4 mb-5">
{% for p in periodos %}
<div class="col-lg-3 col-md-6">
  <div class="card h-100 shadow-sm border-0">
    <div class="card-header border-0 pb-2"
         style="background:linear-gradient(135deg,#eef3ff,#e0e7ff);border-radius:12px 12px 0 0">
      <div class="d-flex align-items-center justify-content-between">
        <span class="fw-bold text-primary">{{ p.trim }}</span>
        <small class="text-muted">{{ p.label }}</small>
      </div>
    </div>
    <div class="card-body pt-3 pb-3">

      <!-- M303 -->
      <div class="d-flex align-items-center justify-content-between mb-2 p-2 rounded-2"
           style="background:{% if p.m303 and p.m303.estado=='presentado' %}#f0fdf4{% elif p.m303 %}#fffbeb{% else %}#f8fafc{% endif %}">
        <div class="d-flex align-items-center gap-2">
          <i class="bi bi-receipt" style="color:#4f86f7"></i>
          <span class="small fw-semibold">Modelo 303</span>
        </div>
        <div class="d-flex align-items-center gap-2">
          {% if p.m303 %}
            <span class="badge {% if p.m303.estado=='presentado' %}bg-success{% else %}bg-warning text-dark{% endif %} small">
              {{ (p.m303.resultado or 0)|round(2) }} €
            </span>
          {% endif %}
          <a href="{{ url_for('fiscal.modelo_303', ejercicio=año, trimestre=p.trim) }}"
             class="btn btn-sm btn-outline-primary py-0 px-2" style="font-size:.75rem">
            {{ 'Ver' if p.m303 else 'Calcular' }}
          </a>
        </div>
      </div>

      <!-- M130 -->
      <div class="d-flex align-items-center justify-content-between p-2 rounded-2 mb-2"
           style="background:{% if p.m130 and p.m130.estado=='presentado' %}#f0fdf4{% elif p.m130 %}#fffbeb{% else %}#f8fafc{% endif %}">
        <div class="d-flex align-items-center gap-2">
          <i class="bi bi-person-badge" style="color:#34d399"></i>
          <span class="small fw-semibold">Modelo 130</span>
        </div>
        <div class="d-flex align-items-center gap-2">
          {% if p.m130 %}
            <span class="badge {% if p.m130.estado=='presentado' %}bg-success{% else %}bg-warning text-dark{% endif %} small">
              {{ (p.m130.resultado or 0)|round(2) }} €
            </span>
          {% endif %}
          <a href="{{ url_for('fiscal.modelo_130', ejercicio=año, trimestre=p.trim) }}"
             class="btn btn-sm btn-outline-success py-0 px-2" style="font-size:.75rem">
            {{ 'Ver' if p.m130 else 'Calcular' }}
          </a>
        </div>
      </div>

      <!-- M111 -->
      <div class="d-flex align-items-center justify-content-between p-2 rounded-2"
           style="background:{% if p.m111 and p.m111.estado=='presentado' %}#f0fdf4{% elif p.m111 %}#fffbeb{% else %}#f8fafc{% endif %}">
        <div class="d-flex align-items-center gap-2">
          <i class="bi bi-people" style="color:#7c3aed"></i>
          <span class="small fw-semibold">Modelo 111</span>
        </div>
        <div class="d-flex align-items-center gap-2">
          {% if p.m111 %}
            <span class="badge {% if p.m111.estado=='presentado' %}bg-success{% else %}bg-warning text-dark{% endif %} small">
              {{ (p.m111.resultado or 0)|round(2) }} €
            </span>
          {% endif %}
          <a href="{{ url_for('fiscal.modelo_111', ejercicio=año, trimestre=p.trim) }}"
             class="btn btn-sm btn-outline-secondary py-0 px-2" style="font-size:.75rem;border-color:#7c3aed;color:#7c3aed">
            {{ 'Ver' if p.m111 else 'Calcular' }}
          </a>
        </div>
      </div>

    </div>
    <div class="card-footer border-0 pt-0 pb-2"
         style="background:transparent;font-size:.75rem">
      {% if p.vence %}
      <div class="text-center {% if p.vencido %}text-danger fw-semibold{% else %}text-muted{% endif %}">
        <i class="bi bi-calendar-x me-1"></i>Plazo: {{ p.vence }}
        {% if p.vencido %}&nbsp;<span class="badge bg-danger">Vencido</span>{% endif %}
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endfor %}
</div>

<!-- Accesos anuales -->
<h6 class="text-muted fw-semibold mb-3 text-uppercase" style="letter-spacing:.05em;font-size:.75rem">
  Resúmenes anuales
</h6>
<div class="row g-3">
  <div class="col-md-4">
    <a href="{{ url_for('fiscal.modelo_390', ejercicio=año) }}" class="text-decoration-none">
      <div class="card border-0 shadow-sm h-100"
           style="background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-left:4px solid #10b981 !important">
        <div class="card-body d-flex align-items-center gap-3">
          <div class="rounded-circle d-flex align-items-center justify-content-center"
               style="width:48px;height:48px;background:#10b981;flex-shrink:0">
            <i class="bi bi-file-earmark-bar-graph text-white fs-5"></i>
          </div>
          <div>
            <div class="fw-bold text-success">Modelo 390</div>
            <div class="small text-muted">Resumen anual IVA — {{ año }}</div>
          </div>
          <i class="bi bi-chevron-right ms-auto text-muted"></i>
        </div>
      </div>
    </a>
  </div>
  <div class="col-md-4">
    <a href="{{ url_for('fiscal.libros', ejercicio=año) }}" class="text-decoration-none">
      <div class="card border-0 shadow-sm h-100"
           style="background:linear-gradient(135deg,#eef3ff,#e0e7ff);border-left:4px solid #4f86f7 !important">
        <div class="card-body d-flex align-items-center gap-3">
          <div class="rounded-circle d-flex align-items-center justify-content-center"
               style="width:48px;height:48px;background:#4f86f7;flex-shrink:0">
            <i class="bi bi-journal-text text-white fs-5"></i>
          </div>
          <div>
            <div class="fw-bold text-primary">Libros de registros</div>
            <div class="small text-muted">IVA emitidas y recibidas — {{ año }}</div>
          </div>
          <i class="bi bi-chevron-right ms-auto text-muted"></i>
        </div>
      </div>
    </a>
  </div>
  <div class="col-md-4">
    <a href="{{ url_for('fiscal.libros', ejercicio=año, tipo='ambas') }}" class="text-decoration-none">
      <div class="card border-0 shadow-sm h-100"
           style="background:linear-gradient(135deg,#fef9f0,#fef3c7);border-left:4px solid #f59e0b !important">
        <div class="card-body d-flex align-items-center gap-3">
          <div class="rounded-circle d-flex align-items-center justify-content-center"
               style="width:48px;height:48px;background:#f59e0b;flex-shrink:0">
            <i class="bi bi-download text-white fs-5"></i>
          </div>
          <div>
            <div class="fw-bold" style="color:#b45309">Exportar libros Excel</div>
            <div class="small text-muted">Descargar {{ año }} completo</div>
          </div>
          <i class="bi bi-chevron-right ms-auto text-muted"></i>
        </div>
      </div>
    </a>
  </div>
  <div class="col-md-4">
    <a href="{{ url_for('fiscal.modelo_190', ejercicio=año) }}" class="text-decoration-none">
      <div class="card border-0 shadow-sm h-100"
           style="background:linear-gradient(135deg,#f5f3ff,#ede9fe);border-left:4px solid #7c3aed !important">
        <div class="card-body d-flex align-items-center gap-3">
          <div class="rounded-circle d-flex align-items-center justify-content-center"
               style="width:48px;height:48px;background:#7c3aed;flex-shrink:0">
            <i class="bi bi-file-earmark-person text-white fs-5"></i>
          </div>
          <div>
            <div class="fw-bold" style="color:#6d28d9">Modelo 190</div>
            <div class="small text-muted">Resumen anual retenciones — {{ año }}</div>
          </div>
          <i class="bi bi-chevron-right ms-auto text-muted"></i>
        </div>
      </div>
    </a>
  </div>
  <div class="col-md-4">
    <a href="{{ url_for('fiscal.modelo_347', ejercicio=año) }}" class="text-decoration-none">
      <div class="card border-0 shadow-sm h-100"
           style="background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border-left:4px solid #0284c7 !important">
        <div class="card-body d-flex align-items-center gap-3">
          <div class="rounded-circle d-flex align-items-center justify-content-center"
               style="width:48px;height:48px;background:#0284c7;flex-shrink:0">
            <i class="bi bi-building text-white fs-5"></i>
          </div>
          <div>
            <div class="fw-bold" style="color:#0369a1">Modelo 347</div>
            <div class="small text-muted">Operaciones con terceros — {{ año }}</div>
          </div>
          <i class="bi bi-chevron-right ms-auto text-muted"></i>
        </div>
      </div>
    </a>
  </div>
</div>
{% endblock %}