{% extends 'base.html' %}

{% block title %}Movimentos - Lote {{ lote.numero_lote }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Cabeçalho -->
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ url_for('lotes_lista') }}">Lotes</a></li>
                <li class="breadcrumb-item"><a href="{{ url_for('produto_lotes', produto_id=lote.produto_id) }}">{{ lote.produto.nome }}</a></li>
                <li class="breadcrumb-item active">Movimentos</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0 mt-2">
            <i class="fas fa-history text-primary"></i> Histórico de Movimentações
        </h1>
        <p class="text-muted mb-0">Lote: <strong>{{ lote.numero_lote }}</strong> | Produto: {{ lote.produto.nome }}</p>
    </div>

    <!-- Info do Lote -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <small class="text-muted">Código de Barras</small>
                            <p class="mb-0"><code>{{ lote.codigo_barras_lote }}</code></p>
                        </div>
                        <div class="col-md-2">
                            <small class="text-muted">Entrada</small>
                            <p class="mb-0"><strong>{{ "%.2f"|format(lote.quantidade_entrada) }}</strong> {{ lote.unidade }}</p>
                        </div>
                        <div class="col-md-2">
                            <small class="text-muted">Saldo Atual</small>
                            <p class="mb-0">
                                <strong class="{% if lote.quantidade_atual > 0 %}text-success{% else %}text-danger{% endif %}">
                                    {{ "%.2f"|format(lote.quantidade_atual) }}
                                </strong> {{ lote.unidade }}
                            </p>
                        </div>
                        <div class="col-md-2">
                            <small class="text-muted">Validade</small>
                            <p class="mb-0">
                                {% if lote.esta_vencido %}
                                <span class="badge bg-danger">VENCIDO</span>
                                {% else %}
                                {{ lote.data_validade.strftime('%d/%m/%Y') }}
                                {% endif %}
                            </p>
                        </div>
                        <div class="col-md-3">
                            <small class="text-muted">Status</small>
                            <p class="mb-0">
                                {% if lote.quantidade_atual <= 0 %}
                                <span class="badge bg-secondary">Zerado</span>
                                {% elif lote.esta_vencido %}
                                <span class="badge bg-danger">Vencido</span>
                                {% elif lote.esta_proximo_vencimento %}
                                <span class="badge bg-warning text-dark">Vence em {{ lote.dias_para_vencer }}d</span>
                                {% else %}
                                <span class="badge bg-success">Disponível</span>
                                {% endif %}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card bg-light">
                <div class="card-body text-center">
                    <a href="{{ url_for('etiquetas_imprimir', tipo='lote', produto_id=lote.produto_id, lote_id=lote.id) }}" 
                       class="btn btn-outline-success me-2" target="_blank">
                        <i class="fas fa-barcode"></i> Etiqueta
                    </a>
                    <a href="{{ url_for('lote_editar', lote_id=lote.id) }}" class="btn btn-outline-primary">
                        <i class="fas fa-edit"></i> Editar
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabela de Movimentos -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-exchange-alt"></i> Movimentações</h5>
        </div>
        <div class="card-body">
            {% if movimentos %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>Data/Hora</th>
                            <th class="text-center">Tipo</th>
                            <th class="text-center">Quantidade</th>
                            <th class="text-center">Anterior</th>
                            <th class="text-center">Depois</th>
                            <th>Observação</th>
                            <th>Usuário</th>
                            <th>Referência</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for mov in movimentos %}
                        <tr>
                            <td>{{ mov.data_movimento.strftime('%d/%m/%Y %H:%M') }}</td>
                            <td class="text-center">
                                {% if mov.tipo == 'entrada' %}
                                <span class="badge bg-success"><i class="fas fa-arrow-down"></i> Entrada</span>
                                {% elif mov.tipo == 'saida' %}
                                <span class="badge bg-danger"><i class="fas fa-arrow-up"></i> Saída</span>
                                {% elif mov.tipo == 'ajuste' %}
                                <span class="badge bg-warning text-dark"><i class="fas fa-balance-scale"></i> Ajuste</span>
                                {% elif mov.tipo == 'perda' %}
                                <span class="badge bg-dark"><i class="fas fa-trash"></i> Perda</span>
                                {% elif mov.tipo == 'devolucao' %}
                                <span class="badge bg-info"><i class="fas fa-undo"></i> Devolução</span>
                                {% else %}
                                <span class="badge bg-secondary">{{ mov.tipo }}</span>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                <strong>{{ "%.2f"|format(mov.quantidade) }}</strong>
                            </td>
                            <td class="text-center text-muted">
                                {{ "%.2f"|format(mov.quantidade_anterior or 0) }}
                            </td>
                            <td class="text-center">
                                <strong>{{ "%.2f"|format(mov.quantidade_depois or 0) }}</strong>
                            </td>
                            <td>{{ mov.observacao or '-' }}</td>
                            <td>
                                {% if mov.usuario %}
                                {{ mov.usuario.username }}
                                {% else %}
                                <span class="text-muted">Sistema</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if mov.venda_id %}
                                <a href="{{ url_for('venda_detalhes', id=mov.venda_id) }}">
                                    Venda #{{ mov.venda_id }}
                                </a>
                                {% elif mov.entrada_mercadoria_id %}
                                Entrada #{{ mov.entrada_mercadoria_id }}
                                {% else %}
                                -
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-5">
                <i class="fas fa-inbox fa-4x text-muted mb-3"></i>
                <h4 class="text-muted">Nenhuma movimentação registrada</h4>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}