{% extends "base.html" %}
{% block title %}{{ nombre }}{% endblock %}
{% block page_title %}{{ nombre }}{% endblock %}

{% block topbar_actions %}
<a href="{{ url_for('inventario.index') }}" class="btn btn-outline-secondary btn-sm">
  <i class="bi bi-arrow-left me-1"></i>Volver al inventario
</a>
{% endblock %}

{% block content %}
{% if stats %}
<div class="row g-3 mb-4">
  <div class="col-sm-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#4f86f7,#3a6fd8)">
      <div class="small opacity-75 mb-1">Unidades totales</div>
      <div class="fs-2 fw-bold">
        {{ "%.2f"|format(stats.total_unidades) if stats.total_unidades % 1 else "%.0f"|format(stats.total_unidades) }}
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#28a745,#1e7e34)">
      <div class="small opacity-75 mb-1">Precio medio</div>
      <div class="fs-2 fw-bold">{{ "%.2f"|format(stats.precio_medio) }} €</div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#6f42c1,#59359a)">
      <div class="small opacity-75 mb-1">Rango de precios</div>
      <div class="fs-5 fw-bold mt-1">
        {{ "%.2f"|format(stats.precio_min) }} – {{ "%.2f"|format(stats.precio_max) }} €
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="stat-card" style="background:linear-gradient(135deg,#e67e22,#d35400)">
      <div class="small opacity-75 mb-1">Total gastado</div>
      <div class="fs-2 fw-bold">{{ "%.2f"|format(stats.total_gastado) }} €</div>
    </div>
  </div>
</div>
{% endif %}

<div class="card">
  <div class="card-header py-3">
    <i class="bi bi-clock-history me-2"></i>Historial de compras
    <span class="badge bg-secondary ms-2 rounded-pill">{{ compras|length }}</span>
  </div>
  <div class="table-responsive">
    <table class="table table-hover mb-0">
      <thead>
        <tr>
          <th>Fecha</th>
          <th>Factura</th>
          <th>Proveedor</th>
          <th class="text-center">Cantidad</th>
          <th class="text-end">Precio unit.</th>
          <th class="text-center">Dto.</th>
          <th class="text-end">Subtotal</th>
        </tr>
      </thead>
      <tbody>
        {% for c in compras %}
        <tr>
          <td class="small text-muted">{{ c.fecha }}</td>
          <td>
            <a href="{{ url_for('facturas.detalle_recibida', id=c.factura_id) }}"
               class="text-decoration-none fw-semibold">{{ c.factura_numero }}</a>
          </td>
          <td>
            {% if c.proveedor_id %}
            <a href="{{ url_for('proveedores.detalle', id=c.proveedor_id) }}"
               class="text-decoration-none text-muted">
              <i class="bi bi-truck me-1 small"></i>{{ c.proveedor_nombre }}
            </a>
            {% else %}—{% endif %}
          </td>
          <td class="text-center">
            {{ "%.2f"|format(c.cantidad) if c.cantidad % 1 else "%.0f"|format(c.cantidad) }}
          </td>
          <td class="text-end">{{ "%.2f"|format(c.precio_unitario) }} €</td>
          <td class="text-center text-muted small">
            {% if c.descuento_pct %}{{ c.descuento_pct }}%{% else %}—{% endif %}
          </td>
          <td class="text-end fw-semibold">{{ "%.2f"|format(c.subtotal) }} €</td>
        </tr>
        {% else %}
        <tr><td colspan="7" class="text-center text-muted py-3">Sin compras registradas</td></tr>
        {% endfor %}
      </tbody>
      {% if compras %}
      <tfoot class="table-light">
        <tr>
          <td colspan="3" class="fw-semibold small">Total</td>
          <td class="text-center fw-semibold">
            {% if stats %}{{ "%.0f"|format(stats.total_unidades) }}{% endif %}
          </td>
          <td class="text-end text-muted small">
            {% if stats %}media {{ "%.2f"|format(stats.precio_medio) }} €{% endif %}
          </td>
          <td></td>
          <td class="text-end fw-bold">
            {% if stats %}{{ "%.2f"|format(stats.total_gastado) }} €{% endif %}
          </td>
        </tr>
      </tfoot>
      {% endif %}
    </table>
  </div>
</div>
{% endblock %}