{% extends 'base.html' %}
{% block title %}Inventario{% endblock %}
{% block page_title %}Inventario de Productos{% endblock %}
{% block page_subtitle %}Gestion de stock y productos{% endblock %}

{% block content %}
{% if stock_bajo > 0 %}
<div class="alert alert-warning d-flex align-items-center gap-2 mb-4">
    <i class="fa-solid fa-triangle-exclamation"></i>
    <strong>{{ stock_bajo }} producto(s)</strong> con stock bajo o agotado. Revisar reposicion.
</div>
{% endif %}

<div class="d-flex flex-wrap gap-2 justify-content-between align-items-center mb-4">
    <form class="d-flex gap-2" method="get">
        <input type="text" name="q" value="{{ q }}" class="form-control"
            placeholder="Buscar por nombre, codigo o categoria..." style="width:310px;">
        <button type="submit" class="btn btn-warning px-4" style="border:none;"><i
                class="fa-solid fa-magnifying-glass"></i></button>
        {% if q %}<a href="{% url 'producto_lista' %}" class="btn btn-outline-secondary">Limpiar</a>{% endif %}
    </form>
    <div class="d-flex gap-2">
        <a href="{% url 'movimiento_crear' %}" class="btn btn-outline-secondary rounded-pill"><i
                class="fa-solid fa-arrow-right-arrow-left me-1"></i>Movimiento</a>
        <a href="{% url 'proveedor_lista' %}" class="btn btn-outline-secondary rounded-pill"><i
                class="fa-solid fa-truck me-1"></i>Proveedores</a>
        <a href="{% url 'producto_crear' %}" class="btn btn-warning rounded-pill px-4"
            style="color:#fff;border:none;"><i class="fa-solid fa-plus me-2"></i>Nuevo Producto</a>
    </div>
</div>

<div class="panel-card">
    {% if productos %}
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead>
                <tr style="background:#f8fafc; font-size:12px; text-transform:uppercase; color:#94a3b8;">
                    <th class="ps-3">Producto</th>
                    <th>Categoria</th>
                    <th>Proveedor</th>
                    <th class="text-center">Stock</th>
                    <th>P. Compra</th>
                    <th>P. Venta</th>
                    <th>Vencimiento</th>
                    <th class="text-center">Acciones</th>
                </tr>
            </thead>
            <tbody>
                {% for p in productos %}
                <tr {% if not p.is_active %}class="opacity-50" {% endif %}>
                    <td class="ps-3">
                        <div class="fw-semibold">{{ p.nombre }}</div>
                        {% if p.codigo %}<small class="text-muted"><code>{{ p.codigo }}</code></small>{% endif %}
                    </td>
                    <td><span class="badge bg-light text-dark border">{{ p.categoria.nombre|default:"-" }}</span></td>
                    <td class="text-muted">{{ p.proveedor.nombre|default:"-" }}</td>
                    <td class="text-center">
                        <span class="badge rounded-pill fw-bold"
                            style="{% if p.necesita_reposicion %}background:rgba(244,63,94,.15);color:#be123c;{% else %}background:rgba(16,185,129,.15);color:#047857;{% endif %}padding:5px 12px;">
                            {% if p.necesita_reposicion %}
                            <i class="fa-solid fa-triangle-exclamation me-1"></i>
                            {% endif %}
                            {{ p.stock_actual }} / {{ p.stock_minimo }}
                        </span>
                    </td>
                    <td class="text-muted">S/ {{ p.precio_compra }}</td>
                    <td class="fw-semibold">S/ {{ p.precio_venta }}</td>
                    <td class="text-muted small">{{ p.fecha_vencimiento|date:"d/m/Y"|default:"-" }}</td>
                    <td class="text-center">
                        <a href="{% url 'producto_editar' p.pk %}" class="btn btn-sm btn-outline-secondary me-1"><i
                                class="fa-solid fa-pen"></i></a>
                        <form method="post" action="{% url 'producto_estado' p.pk %}" class="d-inline">
                            {% csrf_token %}
                            {% if p.is_active %}
                            <button type="submit" class="btn btn-sm btn-outline-danger" title="Desactivar">
                                <i class="fa-solid fa-ban"></i>
                            </button>
                            {% else %}
                            <button type="submit" class="btn btn-sm btn-outline-success" title="Activar">
                                <i class="fa-solid fa-check"></i>
                            </button>
                            {% endif %}
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="text-center py-5 text-muted">
        <i class="fa-solid fa-box-open" style="font-size:3rem;opacity:.2;"></i>
        <p class="mt-3">No hay productos registrados.</p>
        <a href="{% url 'producto_crear' %}" class="btn btn-warning rounded-pill" style="color:#fff;border:none;"><i
                class="fa-solid fa-plus me-2"></i>Agregar producto</a>
    </div>
    {% endif %}
</div>
{% endblock %}