{% extends "base.html" %}
{% block title %}Modelo 347{% endblock %}
{% block page_title %}Modelo 347 — Operaciones con terceros{% 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 %}

<div class="alert alert-info mb-4" style="font-size:.85rem">
  <i class="bi bi-info-circle me-2"></i>
  El Modelo 347 recoge operaciones con clientes y proveedores que superan los
  <strong>{{ "%.2f"|format(calc.limite) }} €</strong> en el ejercicio {{ año }}.
  Plazo de presentación: <strong>febrero</strong> del año siguiente.
</div>

<!-- Cabecera -->
<div class="card border-0 mb-4" style="background:linear-gradient(135deg,#0f2744,#1e3a8a);color:#fff">
  <div class="card-body p-4">
    <div class="d-flex align-items-center gap-3 mb-3">
      <i class="bi bi-building" style="font-size:2rem;opacity:.8"></i>
      <div>
        <div class="fw-bold fs-5">Modelo 347 — Ejercicio {{ año }}</div>
        <div style="opacity:.8;font-size:.88rem">Declaración anual de operaciones con terceras personas</div>
      </div>
    </div>
    <div class="row g-4">
      <div class="col-auto">
        <div style="opacity:.7;font-size:.8rem">Clientes declarados</div>
        <div class="fw-bold fs-5">{{ calc.clientes|length }}</div>
      </div>
      <div class="col-auto">
        <div style="opacity:.7;font-size:.8rem">Volumen clientes</div>
        <div class="fw-bold fs-5">{{ "%.2f"|format(calc.total_clientes) }} €</div>
      </div>
      <div class="col-auto">
        <div style="opacity:.7;font-size:.8rem">Proveedores declarados</div>
        <div class="fw-bold fs-5">{{ calc.proveedores|length }}</div>
      </div>
      <div class="col-auto">
        <div style="opacity:.7;font-size:.8rem">Volumen proveedores</div>
        <div class="fw-bold fs-5">{{ "%.2f"|format(calc.total_proveedores) }} €</div>
      </div>
      <div class="col-auto ms-auto text-end">
        <div style="opacity:.7;font-size:.8rem">TOTAL REGISTROS</div>
        <div class="fw-bold" style="font-size:2.2rem">{{ calc.clientes|length + calc.proveedores|length }}</div>
      </div>
    </div>
  </div>
</div>

<!-- Clientes -->
<div class="card mb-4">
  <div class="card-header fw-semibold d-flex align-items-center justify-content-between">
    <span><i class="bi bi-person-check me-2" style="color:#10b981"></i>Clientes (operaciones ≥ {{ "%.2f"|format(calc.limite) }} €)</span>
    <span class="badge bg-success">{{ calc.clientes|length }} registros</span>
  </div>
  {% if calc.clientes %}
  <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-center">Nº facturas</th>
          <th class="text-end">Importe total (€)</th>
        </tr>
      </thead>
      <tbody>
        {% for c in calc.clientes %}
        <tr>
          <td class="fw-semibold">{{ c.nombre }}</td>
          <td class="text-muted font-monospace small">{{ c.nif or '—' }}</td>
          <td class="text-center text-muted">{{ c.n_facturas }}</td>
          <td class="text-end fw-bold text-success">{{ "%.2f"|format(c.total_ops) }}</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-light fw-bold">
        <tr>
          <td colspan="3">TOTAL CLIENTES</td>
          <td class="text-end text-success">{{ "%.2f"|format(calc.total_clientes) }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
  {% else %}
  <div class="card-body text-center text-muted py-4 small">
    Ningún cliente supera el umbral de {{ "%.2f"|format(calc.limite) }} € en {{ año }}.
  </div>
  {% endif %}
</div>

<!-- Proveedores -->
<div class="card mb-4">
  <div class="card-header fw-semibold d-flex align-items-center justify-content-between">
    <span><i class="bi bi-shop me-2" style="color:#ef4444"></i>Proveedores (operaciones ≥ {{ "%.2f"|format(calc.limite) }} €)</span>
    <span class="badge bg-danger">{{ calc.proveedores|length }} registros</span>
  </div>
  {% if calc.proveedores %}
  <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-center">Nº facturas</th>
          <th class="text-end">Importe total (€)</th>
        </tr>
      </thead>
      <tbody>
        {% for p in calc.proveedores %}
        <tr>
          <td class="fw-semibold">{{ p.nombre }}</td>
          <td class="text-muted font-monospace small">{{ p.nif or '—' }}</td>
          <td class="text-center text-muted">{{ p.n_facturas }}</td>
          <td class="text-end fw-bold text-danger">{{ "%.2f"|format(p.total_ops) }}</td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-light fw-bold">
        <tr>
          <td colspan="3">TOTAL PROVEEDORES</td>
          <td class="text-end text-danger">{{ "%.2f"|format(calc.total_proveedores) }}</td>
        </tr>
      </tfoot>
    </table>
  </div>
  {% else %}
  <div class="card-body text-center text-muted py-4 small">
    Ningún proveedor supera el umbral de {{ "%.2f"|format(calc.limite) }} € en {{ año }}.
  </div>
  {% endif %}
</div>

<!-- 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_347') }}" 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 registros</div>
        <div class="fw-bold fs-5">{{ calc.clientes|length + calc.proveedores|length }}</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 d-flex flex-column gap-1">
        <a href="{{ url_for('fiscal.exportar_347', ejercicio=año) }}"
           class="btn btn-outline-success btn-sm w-100">
          <i class="bi bi-file-earmark-excel me-1"></i>Exportar Excel
        </a>
        <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 %}