{% extends "base.html" %}
{% block title %}Tickets de Gasto{% endblock %}
{% block page_title %}Tickets de Gasto{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('tickets.nuevo') }}" class="btn btn-primary btn-sm">
  <i class="bi bi-plus-lg me-1"></i>Nuevo ticket
</a>
{% endblock %}

{% block content %}

<!-- Resumen del mes -->
<div class="row g-3 mb-4">
  <div class="col-md-3">
    <div class="card stat-card" style="background:linear-gradient(135deg,#dc2626,#b91c1c)">
      <div class="small text-white-50 mb-1">Gasto total este mes</div>
      <div class="fs-3 fw-bold">{{ "%.2f"|format(total_mes) }} €</div>
      <div class="small text-white-50 mt-1">{{ mes_actual }}</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">IVA soportado este mes</div>
      <div class="fs-3 fw-bold">{{ "%.2f"|format(total_iva) }} €</div>
      <div class="small text-white-50 mt-1">Deducible</div>
    </div>
  </div>
  <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 tickets</div>
      <div class="fs-3 fw-bold">{{ tickets|length }}</div>
      <div class="small text-white-50 mt-1">Todos los períodos</div>
    </div>
  </div>
</div>

{% if tickets %}
<div class="card">
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead>
        <tr>
          <th>Fecha</th>
          <th>Concepto</th>
          <th>Proveedor / Lugar</th>
          <th>Categoría</th>
          <th class="text-center">Pago</th>
          <th class="text-end">Base</th>
          <th class="text-center">IVA</th>
          <th class="text-end fw-bold">Total</th>
          <th class="text-center">Archivo</th>
          <th class="text-center">Acciones</th>
        </tr>
      </thead>
      <tbody>
        {% for t in tickets %}
        <tr>
          <td class="text-muted small">{{ t.fecha }}</td>
          <td class="fw-semibold">{{ t.concepto }}</td>
          <td class="text-muted">{{ t.proveedor or '—' }}</td>
          <td>
            {% if t.cat_nombre %}
            <span class="badge" style="background:{{ t.cat_color }}20;color:{{ t.cat_color }};border:1px solid {{ t.cat_color }}40">
              {{ t.cat_nombre }}
            </span>
            {% else %}
            <span class="text-muted">—</span>
            {% endif %}
          </td>
          <td class="text-center">
            <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle small">
              {{ t.metodo_pago | capitalize }}
            </span>
          </td>
          <td class="text-end text-muted small">{{ "%.2f"|format(t.base) }} €</td>
          <td class="text-center text-muted small">
            {% if t.iva_pct > 0 %}{{ t.iva_pct|int }}% · {{ "%.2f"|format(t.iva_importe) }} €{% else %}—{% endif %}
          </td>
          <td class="text-end fw-semibold">{{ "%.2f"|format(t.importe) }} €</td>
          <td class="text-center">
            {% if t.archivo_path %}
            <button class="btn btn-sm btn-outline-secondary"
                    onclick="verArchivo('{{ url_for('tickets.ver_archivo', filename=t.archivo_path) }}', {{ t.concepto | tojson }})"
                    title="Ver justificante">
              <i class="bi bi-paperclip"></i>
            </button>
            {% else %}
            <span class="text-muted">—</span>
            {% endif %}
          </td>
          <td class="text-center">
            <a href="{{ url_for('tickets.editar', id=t.id) }}"
               class="btn btn-sm btn-outline-secondary" title="Editar">
              <i class="bi bi-pencil"></i>
            </a>
            <form method="post" action="{{ url_for('tickets.eliminar', id=t.id) }}" class="d-inline"
                  onsubmit="return confirm('¿Eliminar este ticket?')">
              <button type="submit" class="btn btn-sm btn-outline-danger" title="Eliminar">
                <i class="bi bi-trash"></i>
              </button>
            </form>
          </td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot class="table-light fw-bold">
        <tr>
          <td colspan="5">TOTAL</td>
          <td class="text-end">{{ "%.2f"|format(tickets|sum(attribute='base')) }} €</td>
          <td class="text-center">{{ "%.2f"|format(tickets|sum(attribute='iva_importe')) }} €</td>
          <td class="text-end">{{ "%.2f"|format(tickets|sum(attribute='importe')) }} €</td>
          <td colspan="2"></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>
{% else %}
<div class="text-center py-5 text-muted">
  <i class="bi bi-receipt" style="font-size:3rem; opacity:.3"></i>
  <p class="mt-3 fs-5">No hay tickets registrados</p>
  <p class="small">Registra gastos menores sin factura formal: parking, restaurantes, material de oficina...</p>
  <a href="{{ url_for('tickets.nuevo') }}" class="btn btn-primary mt-2">
    <i class="bi bi-plus-lg me-1"></i>Registrar primer ticket
  </a>
</div>
{% endif %}

{% endblock %}