{% extends 'base.html' %}
{% block title %}Movimientos{% endblock %}
{% block page_title %}Movimientos de Stock{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <a href="{% url 'producto_lista' %}" class="btn btn-outline-secondary rounded-pill"><i
            class="fa-solid fa-arrow-left me-1"></i>Volver a Inventario</a>
    <a href="{% url 'movimiento_crear' %}" class="btn btn-warning rounded-pill px-4" style="color:#fff;border:none;"><i
            class="fa-solid fa-plus me-2"></i>Nuevo Movimiento</a>
</div>
<div class="panel-card">
    {% if movimientos %}
    <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">Fecha</th>
                <th>Tipo</th>
                <th>Producto</th>
                <th class="text-center">Cantidad</th>
                <th>Motivo</th>
                <th>Comprobante</th>
            </tr>
        </thead>
        <tbody>
            {% for m in movimientos %}
            <tr>
                <td class="ps-3 small text-muted">{{ m.fecha|date:"d/m/Y H:i" }}</td>
                <td>
                    <span
                        class="badge rounded-pill {% if m.tipo == 'ENTRADA' %}bg-success{% elif m.tipo == 'SALIDA' %}bg-danger{% else %}bg-secondary{% endif %}">
                        {{ m.get_tipo_display }}
                    </span>
                </td>
                <td class="fw-semibold">{{ m.producto.nombre }}</td>
                <td class="text-center fw-bold">{{ m.cantidad }}</td>
                <td class="text-muted">{{ m.motivo }}</td>
                <td class="text-muted small">{{ m.comprobante|default:"—" }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <div class="text-center py-5 text-muted"><i class="fa-solid fa-arrow-right-arrow-left"
            style="font-size:3rem;opacity:.2;"></i>
        <p class="mt-3">Sin movimientos registrados.</p>
    </div>
    {% endif %}
</div>
{% endblock %}