{% extends "base.html" %}
{% set active = "inventario" %}
{% block title %}Inventarios · ArcaBeauty Club{% endblock %}

{% block content %}
<div class="topbar">
    <div>
        <div class="eyebrow">Operación</div>
        <h1>Inventarios</h1>
    </div>
    <a href="{{ url_for('orden_nueva') }}" class="btn accent">+ Nueva orden de compra</a>
</div>

<div class="grid cols-4" style="margin-bottom:22px;">
    <div class="card kpi">
        <span class="label">Valor del inventario</span>
        <span class="value">${{ "%.0f"|format(valor_total) }}</span>
        <span class="sub">stock &times; costo</span>
    </div>
    <div class="card kpi">
        <span class="label">Productos con stock bajo</span>
        <span class="value" style="color:{{ 'var(--alerta)' if productos_bajo_stock else 'var(--ciruela)' }};">{{ productos_bajo_stock|length }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Órdenes pendientes</span>
        <span class="value">{{ ordenes_pendientes }}</span>
    </div>
    <div class="card kpi">
        <span class="label">Proveedores activos</span>
        <span class="value">{{ proveedores|selectattr("activo")|list|length }}</span>
    </div>
</div>

<div class="card" style="margin-bottom:22px;">
    <div style="display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;">
        <h2 style="font-size:18px;">Productos</h2>
        <button class="btn ghost sm" onclick="document.getElementById('modalNuevoProducto').classList.add('open')">+ Nuevo producto</button>
    </div>
    {% if productos %}
    <table>
        <thead><tr><th>Producto</th><th>Categoría</th><th>Stock</th><th>Mínimo</th><th>Costo</th><th>Precio</th><th>Proveedor</th><th></th></tr></thead>
        <tbody>
        {% for p in productos %}
            <tr style="{{ 'background:rgba(194,83,61,0.06);' if p.stock <= p.stock_minimo }}">
                <td><a href="{{ url_for('producto_detalle', producto_id=p.id) }}"><strong>{{ p.nombre }}</strong></a></td>
                <td>{{ p.categoria }}</td>
                <td class="mono" style="{{ 'color:var(--alerta); font-weight:700;' if p.stock <= p.stock_minimo }}">{{ p.stock }}</td>
                <td class="mono">{{ p.stock_minimo }}</td>
                <td class="mono">${{ "%.0f"|format(p.costo) }}</td>
                <td class="mono">${{ "%.0f"|format(p.precio) }}</td>
                <td>{{ p.proveedor_nombre or "—" }}</td>
                <td><a href="{{ url_for('producto_detalle', producto_id=p.id) }}" class="btn ghost sm">Ver</a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="empty-state"><div class="display">Sin productos registrados</div></div>
    {% endif %}
</div>

<div class="grid cols-2" style="margin-bottom:22px;">
    <div class="card">
        <div style="display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px;">
            <h2 style="font-size:18px;">Proveedores</h2>
        </div>
        {% if proveedores %}
        <table>
            <thead><tr><th>Nombre</th><th>Contacto</th><th></th></tr></thead>
            <tbody>
            {% for p in proveedores %}
                <tr style="{{ 'opacity:0.5;' if not p.activo }}">
                    <td>{{ p.nombre }}</td>
                    <td style="font-size:12px; color:var(--tinta-suave);">{{ p.telefono or p.email or "—" }}</td>
                    <td>
                        <form method="post" action="{{ url_for('proveedor_toggle', proveedor_id=p.id) }}">
                            <button type="submit" class="btn ghost sm">{{ "Desactivar" if p.activo else "Activar" }}</button>
                        </form>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="empty-state"><div class="display">Sin proveedores todavía</div></div>
        {% endif %}

        <h3 style="font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--tinta-suave); margin:18px 0 8px;">Nuevo proveedor</h3>
        <form method="post" action="{{ url_for('proveedor_crear') }}">
            <div class="field"><label>Nombre</label><input type="text" name="nombre" required></div>
            <div class="field"><label>Persona de contacto</label><input type="text" name="contacto"></div>
            <div class="grid cols-2">
                <div class="field"><label>Teléfono</label><input type="text" name="telefono"></div>
                <div class="field"><label>Correo</label><input type="email" name="email"></div>
            </div>
            <div class="field"><label>Notas</label><input type="text" name="notas"></div>
            <button type="submit" class="btn accent" style="width:100%;">Guardar proveedor</button>
        </form>
    </div>

    <div class="card">
        <h2 style="font-size:18px; margin-bottom:14px;">Órdenes de compra recientes</h2>
        {% if ordenes %}
        {% for o in ordenes %}
        <div style="display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--crema-oscuro);">
            <div>
                <a href="{{ url_for('orden_detalle', compra_id=o.id) }}" style="font-size:13px; font-weight:600; color:var(--ciruela);">#{{ o.id }} &middot; {{ o.proveedor_nombre }}</a>
                <div style="font-size:11px; color:var(--tinta-suave);">{{ o.fecha[:16] }} &middot; ${{ "%.0f"|format(o.total) }}</div>
            </div>
            <div style="display:flex; align-items:center; gap:8px;">
                <span class="badge {{ 'confirmada' if o.estado=='recibida' else ('cancelada' if o.estado=='cancelada' else 'pendiente') }}">{{ o.estado }}</span>
                {% if o.estado == 'pendiente' %}
                <form method="post" action="{{ url_for('orden_recibir', compra_id=o.id) }}"><button type="submit" class="btn accent sm">Recibir</button></form>
                <form method="post" action="{{ url_for('orden_cancelar', compra_id=o.id) }}"><button type="submit" class="btn ghost sm">Cancelar</button></form>
                {% endif %}
            </div>
        </div>
        {% endfor %}
        {% else %}
        <div class="empty-state"><div class="display">Sin órdenes de compra todavía</div></div>
        {% endif %}
    </div>
</div>

<div class="modal-backdrop" id="modalNuevoProducto">
    <div class="modal">
        <button class="modal-close" onclick="document.getElementById('modalNuevoProducto').classList.remove('open')">&times;</button>
        <h2>Nuevo producto</h2>
        <form method="post" action="{{ url_for('producto_crear') }}">
            <div class="field"><label>Nombre</label><input type="text" name="nombre" required></div>
            <div class="field"><label>Categoría</label><input type="text" name="categoria" value="General"></div>
            <div class="grid cols-2">
                <div class="field"><label>Precio de venta</label><input type="number" name="precio" step="0.01" required></div>
                <div class="field"><label>Costo</label><input type="number" name="costo" step="0.01" required></div>
            </div>
            <div class="grid cols-2">
                <div class="field"><label>Stock inicial</label><input type="number" name="stock_inicial" value="0"></div>
                <div class="field"><label>Stock mínimo</label><input type="number" name="stock_minimo" value="5"></div>
            </div>
            <div class="field">
                <label>Proveedor preferido</label>
                <select name="proveedor_preferido_id">
                    <option value="">Sin definir</option>
                    {% for p in proveedores %}<option value="{{ p.id }}">{{ p.nombre }}</option>{% endfor %}
                </select>
            </div>
            <button type="submit" class="btn accent" style="width:100%;">Guardar producto</button>
        </form>
    </div>
</div>
{% endblock %}