{% extends 'base.html' %}

{% block title %}Estoque Baixo - Sistema de Comandas{% endblock %}

{% block content %}
<div class="clearfix">
    <h2 style="float: left;">Produtos com Estoque Baixo</h2>
    <a href="{% url 'estoque:movimentacao' %}" class="btn btn-success" style="float: right; margin-top: 10px;">
        Nova Movimentação
    </a>
</div>

<div style="margin: 20px 0;">
    <a href="{% url 'estoque:list' %}" class="btn">Voltar ao Estoque</a>
    <a href="{% url 'estoque:movimentacoes' %}" class="btn">Ver Movimentações</a>
</div>

{% if produtos %}
<div class="alert alert-warning">
    <strong>Atenção!</strong> Os produtos abaixo estão com estoque igual ou inferior ao estoque mínimo configurado.
</div>

<table class="table">
    <thead>
        <tr>
            <th>Produto</th>
            <th>Grupo</th>
            <th>Estoque Atual</th>
            <th>Estoque Mínimo</th>
            <th>Diferença</th>
            <th>Ações</th>
        </tr>
    </thead>
    <tbody>
        {% for produto in produtos %}
        <tr {% if produto.estoque_atual == 0 %}style="background-color: #f8d7da;"{% endif %}>
            <td>
                <strong>{{ produto.nome }}</strong>
                {% if produto.estoque_atual == 0 %}
                    <span style="color: #dc3545; font-weight: bold;">(ESGOTADO)</span>
                {% endif %}
            </td>
            <td>{{ produto.grupo.nome }}</td>
            <td>
                <span style="color: {% if produto.estoque_atual == 0 %}#dc3545{% else %}#ffc107{% endif %}; font-weight: bold;">
                    {{ produto.estoque_atual }}
                </span>
            </td>
            <td>{{ produto.estoque_minimo }}</td>
            <td>
                {% with diferenca=produto.estoque_atual|add:produto.estoque_minimo|add:"-"|add:produto.estoque_minimo %}
                <span style="color: #dc3545;">
                    {{ produto.estoque_atual|add:"-"|add:produto.estoque_minimo }}
                </span>
                {% endwith %}
            </td>
            <td>
                <a href="{% url 'estoque:movimentacao' %}?produto={{ produto.id }}" class="btn btn-success" style="font-size: 12px; padding: 4px 8px;">
                    Repor Estoque
                </a>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<div class="card">
    <h4>Resumo</h4>
    <p><strong>Total de produtos com estoque baixo:</strong> {{ produtos|length }}</p>
    <p><strong>Produtos esgotados:</strong> 
        {% for produto in produtos %}
            {% if produto.estoque_atual == 0 %}
                {% if not forloop.first %}, {% endif %}{{ produto.nome }}
            {% endif %}
        {% empty %}
            Nenhum produto esgotado
        {% endfor %}
    </p>
</div>

{% else %}
<div class="card text-center">
    <h3 style="color: #28a745;">✓ Todos os produtos estão com estoque adequado</h3>
    <p>Nenhum produto está com estoque abaixo do mínimo configurado.</p>
    <a href="{% url 'estoque:list' %}" class="btn">Ver Estoque Completo</a>
</div>
{% endif %}
{% endblock %}