{% extends "base.html" %}
{% set active = "inventario" %}
{% block title %}Orden de compra #{{ compra.id }} · ArcaBeauty Club{% endblock %}

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow"><a href="{{ url_for('inventario') }}">&larr; Inventarios</a></div>
        <h1>Orden de compra #{{ compra.id }}</h1>
    </div>
    {% if compra.estado == 'pendiente' %}
    <div style="display:flex; gap:8px;">
        <form method="post" action="{{ url_for('orden_recibir', compra_id=compra.id) }}"><button type="submit" class="btn accent">Marcar como recibida</button></form>
        <form method="post" action="{{ url_for('orden_cancelar', compra_id=compra.id) }}"><button type="submit" class="btn ghost">Cancelar orden</button></form>
    </div>
    {% endif %}
</div>

<div class="grid cols-4" style="margin-bottom:22px;">
    <div class="card kpi">
        <span class="label">Proveedor</span>
        <span class="value" style="font-size:18px;">{{ compra.proveedor_nombre }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Estado</span>
        <span class="value" style="font-size:18px;"><span class="badge {{ 'confirmada' if compra.estado=='recibida' else ('cancelada' if compra.estado=='cancelada' else 'pendiente') }}">{{ compra.estado }}</span></span>
    </div>
    <div class="card kpi">
        <span class="label">Fecha</span>
        <span class="value" style="font-size:18px;">{{ compra.fecha[:16] }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Total</span>
        <span class="value">${{ "%.0f"|format(compra.total) }}</span>
    </div>
</div>

{% if compra.notas %}
<div class="card" style="margin-bottom:22px; background:var(--crema-oscuro); border:none;">
    <strong>Notas:</strong> {{ compra.notas }}
</div>
{% endif %}

<div class="card">
    <h2 style="font-size:18px; margin-bottom:14px;">Productos pedidos</h2>
    <table>
        <thead><tr><th>Producto</th><th>Cantidad</th><th>Costo unitario</th><th>Subtotal</th></tr></thead>
        <tbody>
        {% for it in items %}
            <tr>
                <td>{{ it.nombre }}</td>
                <td class="mono">{{ it.cantidad }}</td>
                <td class="mono">${{ "%.0f"|format(it.costo_unitario) }}</td>
                <td class="mono">${{ "%.0f"|format(it.subtotal) }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}