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

{% block extra_css %}
<style>
.orden-layout { display:grid; grid-template-columns: 1fr 380px; gap:20px; align-items:start; }
.producto-pick { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; }
.producto-pick .pos-item { background:var(--blanco); border:1px solid var(--linea); border-radius:10px; padding:12px; cursor:pointer; }
.producto-pick .pos-item:hover { border-color: var(--terracota-claro); box-shadow: var(--sombra); }
.item-orden { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--crema-oscuro); }
.item-orden .nombre { flex:1; font-size:13px; font-weight:600; }
.item-orden input { width:70px; padding:6px 8px; font-size:13px; }
.cart-total-row { display:flex; justify-content:space-between; padding:10px 0; font-size:14px; }
.cart-total-row.grand { font-size:19px; font-weight:700; color:var(--ciruela); border-top:1px solid var(--linea); margin-top:8px; padding-top:14px; }
</style>
{% endblock %}

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow"><a href="{{ url_for('inventario') }}">&larr; Inventarios</a></div>
        <h1>Nueva orden de compra</h1>
    </div>
</div>

<div class="orden-layout">
    <div class="card">
        <h2 style="font-size:16px; margin-bottom:12px;">Selecciona los productos a pedir</h2>
        <div class="producto-pick">
            {% for p in productos %}
            <div class="pos-item" onclick='agregarProducto({"producto_id":{{ p.id }},"nombre":"{{ p.nombre|replace("\"","") }}","costo_unitario":{{ p.costo }}})'>
                <div class="tipo-tag" style="font-size:10px; text-transform:uppercase; color:var(--tinta-suave);">{{ p.categoria }} &middot; stock {{ p.stock }}</div>
                <div class="nombre" style="font-weight:600; font-size:13.5px; color:var(--ciruela);">{{ p.nombre }}</div>
                <div class="precio mono" style="color:var(--terracota); font-weight:700;">costo ${{ "%.0f"|format(p.costo) }}</div>
            </div>
            {% endfor %}
        </div>
    </div>

    <div class="card" style="position:sticky; top:20px;">
        <h2 style="font-size:16px; margin-bottom:12px;">Orden</h2>
        <div class="field">
            <label>Proveedor</label>
            <select id="proveedorSel" required>
                <option value="">Selecciona un proveedor</option>
                {% for pr in proveedores %}
                <option value="{{ pr.id }}">{{ pr.nombre }}</option>
                {% endfor %}
            </select>
        </div>

        <div id="itemsOrden" style="margin:14px 0; max-height:280px; overflow-y:auto;">
            <div class="empty-state" style="padding:20px 0;"><div class="display" style="font-size:14px;">Sin productos agregados</div></div>
        </div>

        <div class="cart-total-row grand"><span>Total estimado</span><span class="mono" id="ordenTotal">$0</span></div>

        <div class="field" style="margin-top:14px;">
            <label>Notas (opcional)</label>
            <textarea id="ordenNotas" rows="2"></textarea>
        </div>
        <button class="btn accent" style="width:100%;" onclick="crearOrden()">Crear orden de compra</button>
        <p style="font-size:12px; color:var(--tinta-suave); margin-top:8px;">La orden se crea en estado "pendiente". El stock solo se actualiza cuando la marques como recibida desde Inventarios.</p>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/orden_nueva.js') }}"></script>
{% endblock %}