{% extends 'base.html' %}

{% block title %}Movimentações de Estoque - Sistema de Comandas{% endblock %}

{% block content %}
<div class="clearfix">
    <h2 style="float: left;">Movimentações de Estoque</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>
</div>

{% if movimentacoes %}
<table class="table">
    <thead>
        <tr>
            <th>Data/Hora</th>
            <th>Produto</th>
            <th>Tipo</th>
            <th>Quantidade</th>
            <th>Estoque Anterior</th>
            <th>Estoque Atual</th>
            <th>Motivo</th>
            <th>Usuário</th>
        </tr>
    </thead>
    <tbody>
        {% for movimentacao in movimentacoes %}
        <tr>
            <td>{{ movimentacao.data_movimentacao|date:"d/m/Y H:i" }}</td>
            <td>{{ movimentacao.produto.nome }}</td>
            <td>
                {% if movimentacao.tipo == 'entrada' %}
                    <span style="color: #28a745; font-weight: bold;">Entrada</span>
                {% elif movimentacao.tipo == 'saida' %}
                    <span style="color: #dc3545; font-weight: bold;">Saída</span>
                {% else %}
                    <span style="color: #ffc107; font-weight: bold;">Ajuste</span>
                {% endif %}
            </td>
            <td>
                {% if movimentacao.tipo == 'entrada' %}
                    <span style="color: #28a745;">+{{ movimentacao.quantidade }}</span>
                {% elif movimentacao.tipo == 'saida' %}
                    <span style="color: #dc3545;">-{{ movimentacao.quantidade }}</span>
                {% else %}
                    {{ movimentacao.quantidade }}
                {% endif %}
            </td>
            <td>{{ movimentacao.quantidade_anterior }}</td>
            <td>{{ movimentacao.quantidade_atual }}</td>
            <td>{{ movimentacao.motivo }}</td>
            <td>{{ movimentacao.usuario.get_full_name|default:movimentacao.usuario.username }}</td>
        </tr>
        {% if movimentacao.observacoes %}
        <tr>
            <td colspan="8" style="background-color: #f8f9fa; font-style: italic; padding-left: 30px;">
                <strong>Observações:</strong> {{ movimentacao.observacoes }}
            </td>
        </tr>
        {% endif %}
        {% endfor %}
    </tbody>
</table>

{% if is_paginated %}
<div class="text-center" style="margin: 20px 0;">
    <div>
        {% if page_obj.has_previous %}
            <a href="?page=1" class="btn">Primeira</a>
            <a href="?page={{ page_obj.previous_page_number }}" class="btn">Anterior</a>
        {% endif %}
        
        <span style="margin: 0 10px;">
            Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}
        </span>
        
        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}" class="btn">Próxima</a>
            <a href="?page={{ page_obj.paginator.num_pages }}" class="btn">Última</a>
        {% endif %}
    </div>
    <div style="margin-top: 10px;">
        Total de {{ page_obj.paginator.count }} movimentações
    </div>
</div>
{% endif %}

{% else %}
<div class="card text-center">
    <h3>Nenhuma movimentação encontrada</h3>
    <p>Ainda não há movimentações de estoque registradas.</p>
    <a href="{% url 'estoque:movimentacao' %}" class="btn btn-success">
        Registrar primeira movimentação
    </a>
</div>
{% endif %}
{% endblock %}