{% extends "base.html" %}
{% block title %}Cuotas de Autónomo{% endblock %}
{% block page_title %}Cuotas de Autónomo (SS){% endblock %}

{% block extra_head %}
<style>
  .mes-card { border-radius: 12px; transition: box-shadow .15s; }
  .mes-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
  .mes-pagada   { border-left: 4px solid #22c55e !important; }
  .mes-pendiente-data { border-left: 4px solid #f59e0b !important; }
  .mes-sin-data { border-left: 4px solid #e2e8f0 !important; opacity:.65; }
</style>
{% endblock %}

{% block content %}

<!-- Selector de año + resumen -->
<div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
  <div class="d-flex align-items-center gap-2">
    {% for a in años %}
    <a href="?año={{ a }}"
       class="btn btn-sm {% if a == año %}btn-primary{% else %}btn-outline-secondary{% endif %}">
      {{ a }}
    </a>
    {% endfor %}
    <!-- Año siguiente si no existe -->
    {% if (año + 1) not in años %}
    <a href="?año={{ año + 1 }}" class="btn btn-sm btn-outline-secondary">{{ año + 1 }}</a>
    {% endif %}
  </div>
</div>

<!-- Resumen anual -->
<div class="row g-3 mb-4">
  <div class="col-md-3">
    <div class="card stat-card" style="background:linear-gradient(135deg,#0f172a,#1e293b)">
      <div class="small text-white-50 mb-1">Total cuotas {{ año }}</div>
      <div class="fs-3 fw-bold">{{ "%.2f"|format(total_año) }} €</div>
      <div class="small text-white-50 mt-1">12 meses</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card stat-card" style="background:linear-gradient(135deg,#16a34a,#15803d)">
      <div class="small text-white-50 mb-1">Pagado</div>
      <div class="fs-3 fw-bold">{{ "%.2f"|format(total_pagado) }} €</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card stat-card" style="background:linear-gradient(135deg,#d97706,#b45309)">
      <div class="small text-white-50 mb-1">Pendiente registrado</div>
      <div class="fs-3 fw-bold">{{ "%.2f"|format(total_pendiente) }} €</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card stat-card" style="background:linear-gradient(135deg,#7c3aed,#6d28d9)">
      <div class="small text-white-50 mb-1">Cuota media mensual</div>
      {% set con_datos = meses | selectattr('id') | list %}
      <div class="fs-3 fw-bold">
        {% if con_datos %}
          {{ "%.2f"|format(total_año / con_datos|length) }} €
        {% else %}
          —
        {% endif %}
      </div>
      <div class="small text-white-50 mt-1">Deducible en IRPF</div>
    </div>
  </div>
</div>

<!-- Grid de 12 meses -->
<div class="row g-3">
  {% for m in meses %}
  <div class="col-md-4 col-lg-3">
    <div class="card mes-card
      {% if m.id and m.estado == 'pagada' %}mes-pagada
      {% elif m.id %}mes-pendiente-data
      {% else %}mes-sin-data
      {% endif %}">
      <div class="card-body p-3">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <div class="fw-bold">{{ m.nombre }}</div>
          {% if m.id and m.estado == 'pagada' %}
          <span class="badge bg-success-subtle text-success border border-success-subtle small">Pagada</span>
          {% elif m.id %}
          <span class="badge bg-warning-subtle text-warning border border-warning-subtle small">Pendiente</span>
          {% else %}
          <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle small">Sin datos</span>
          {% endif %}
        </div>

        {% if m.id %}
        <div class="fs-5 fw-bold mb-1">{{ "%.2f"|format(m.importe) }} €</div>
        {% if m.fecha_pago %}
        <div class="text-muted small mb-2">Pagada el {{ m.fecha_pago }}</div>
        {% endif %}
        <div class="d-flex gap-1 mt-2">
          {% if m.estado == 'pendiente' %}
          <form method="post" action="{{ url_for('autonomo.marcar_pagada', id=m.id) }}" class="d-inline">
            <button type="submit" class="btn btn-sm btn-success">
              <i class="bi bi-check-lg"></i> Pagar
            </button>
          </form>
          {% endif %}
          <button type="button" class="btn btn-sm btn-outline-secondary"
                  data-bs-toggle="modal" data-bs-target="#modal-mes"
                  data-año="{{ año }}" data-mes="{{ m.mes }}"
                  data-importe="{{ m.importe }}"
                  data-estado="{{ m.estado }}"
                  data-fecha="{{ m.fecha_pago or '' }}"
                  data-notas="{{ m.notas or '' }}">
            <i class="bi bi-pencil"></i>
          </button>
          <form method="post" action="{{ url_for('autonomo.eliminar', id=m.id) }}" class="d-inline"
                onsubmit="return confirm('¿Eliminar la cuota de ' + {{ m.nombre | tojson }} + '?')">
            <button type="submit" class="btn btn-sm btn-outline-danger">
              <i class="bi bi-trash"></i>
            </button>
          </form>
        </div>
        {% else %}
        <div class="text-muted small mb-2">No registrada</div>
        <button type="button" class="btn btn-sm btn-outline-primary mt-1"
                data-bs-toggle="modal" data-bs-target="#modal-mes"
                data-año="{{ año }}" data-mes="{{ m.mes }}"
                data-importe="" data-estado="pendiente"
                data-fecha="" data-notas="">
          <i class="bi bi-plus-lg me-1"></i>Registrar
        </button>
        {% endif %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>

<!-- Modal editar/registrar cuota -->
<div class="modal fade" id="modal-mes" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form method="post" action="{{ url_for('autonomo.guardar') }}">
        <input type="hidden" name="año" id="m-año">
        <input type="hidden" name="mes" id="m-mes">
        <div class="modal-header">
          <h5 class="modal-title" id="modal-mes-titulo">Cuota de autónomo</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label fw-semibold">Importe (€)</label>
              <input type="number" name="importe" id="m-importe" class="form-control"
                     step="0.01" min="0" required>
            </div>
            <div class="col-md-6">
              <label class="form-label fw-semibold">Estado</label>
              <select name="estado" id="m-estado" class="form-select">
                <option value="pendiente">Pendiente</option>
                <option value="pagada">Pagada</option>
              </select>
            </div>
            <div class="col-12">
              <label class="form-label fw-semibold">Fecha de pago</label>
              <input type="date" name="fecha_pago" id="m-fecha" class="form-control">
            </div>
            <div class="col-12">
              <label class="form-label fw-semibold">Notas</label>
              <textarea name="notas" id="m-notas" class="form-control" rows="2"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="submit" class="btn btn-primary">
            <i class="bi bi-check-lg me-1"></i>Guardar
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_scripts %}
<script>
var _meses = {{ ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'] | tojson }};
document.getElementById('modal-mes').addEventListener('show.bs.modal', function(e) {
  var btn = e.relatedTarget;
  var año = btn.dataset.año, mes = parseInt(btn.dataset.mes);
  document.getElementById('m-año').value   = año;
  document.getElementById('m-mes').value   = mes;
  document.getElementById('m-importe').value = btn.dataset.importe || '';
  document.getElementById('m-estado').value  = btn.dataset.estado  || 'pendiente';
  document.getElementById('m-fecha').value   = btn.dataset.fecha   || '';
  document.getElementById('m-notas').value   = btn.dataset.notas   || '';
  document.getElementById('modal-mes-titulo').textContent =
    'Cuota ' + _meses[mes - 1] + ' ' + año;
});
</script>
{% endblock %}