{% extends "base.html" %}

{% block title %}Expedição de Pedidos{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h2><i class="bi bi-box-seam"></i> Expedição de Pedidos</h2>
            <p class="text-muted">Confira os produtos do pedido antes do envio</p>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-lg-4">
            {# Busca de Pedido #}
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="bi bi-search"></i> Localizar Pedido</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Número do Pedido</label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="numeroPedido" placeholder="Digite o número..." autofocus>
                            <button class="btn btn-primary" onclick="buscarPedido()">
                                <i class="bi bi-search"></i> Buscar
                            </button>
                        </div>
                    </div>
                    
                    <div id="infoPedido" class="d-none">
                        <hr>
                        <h6>Dados do Pedido</h6>
                        <div id="dadosPedido"></div>
                    </div>
                </div>
            </div>

            {# Pedidos Pendentes #}
            <div class="card mt-3">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="bi bi-list-check"></i> Pedidos Pendentes</h6>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush" id="listaPendentes">
                        {% for venda in vendas_pendentes %}
                        <a href="#" class="list-group-item list-group-item-action" onclick="carregarPedido({{ venda.id }}); return false;">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>#{{ venda.numero_pedido }}</strong>
                                    <br>
                                    <small class="text-muted">{{ venda.get_cliente_nome() }}</small>
                                </div>
                                <span class="badge bg-warning">{{ venda.itens|length }} itens</span>
                            </div>
                        </a>
                        {% else %}
                        <div class="p-3 text-center text-muted">
                            <i class="bi bi-inbox"></i> Nenhum pedido pendente
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-8">
            {# Área de Conferência #}
            <div class="card" id="areaConferencia" style="display: none;">
                <div class="card-header bg-success text-white">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="bi bi-upc-scan"></i> Conferência de Itens</h5>
                        <div>
                            <span class="badge bg-light text-dark" id="progressoConf">0/0</span>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {# Scanner #}
                    <div class="mb-4">
                        <label class="form-label fw-bold">Bipe o código de barras do produto:</label>
                        <div class="input-group input-group-lg">
                            <span class="input-group-text"><i class="bi bi-upc-scan"></i></span>
                            <input type="text" class="form-control" id="codigoBarras" 
                                   placeholder="Escaneie o código de barras..." 
                                   onkeypress="if(event.key==='Enter') conferirItem()">
                            <button class="btn btn-success" onclick="conferirItem()">
                                <i class="bi bi-check-lg"></i> Conferir
                            </button>
                        </div>
                        <div id="mensagemScanner" class="mt-2"></div>
                    </div>

                    {# Lista de Itens #}
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th width="60">Status</th>
                                    <th>Produto</th>
                                    <th>Código</th>
                                    <th width="100" class="text-center">Qtd</th>
                                    <th width="100" class="text-center">Conferido</th>
                                </tr>
                            </thead>
                            <tbody id="listaItens">
                            </tbody>
                        </table>
                    </div>

                    {# Botões de Ação #}
                    <div class="d-grid gap-2 mt-4" id="botoesAcao" style="display: none !important;">
                        <button class="btn btn-success btn-lg" onclick="finalizarExpedicao()">
                            <i class="bi bi-check-circle"></i> Finalizar Expedição
                        </button>
                        <button class="btn btn-outline-secondary" onclick="cancelarExpedicao()">
                            <i class="bi bi-x-circle"></i> Cancelar
                        </button>
                    </div>
                </div>
            </div>

            {# Instruções Iniciais #}
            <div class="card" id="instrucoes">
                <div class="card-body text-center py-5">
                    <i class="bi bi-box-seam" style="font-size: 4rem; color: #6c757d;"></i>
                    <h4 class="mt-3">Selecione um pedido para iniciar</h4>
                    <p class="text-muted">Busque pelo número ou selecione um pedido pendente</p>
                </div>
            </div>
        </div>
    </div>
</div>

{# Modal de Finalização #}
<div class="modal fade cape-modal-standard" id="modalFinalizacao" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="bi bi-check-circle"></i> Expedição Concluída</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="text-center py-3">
                    <i class="bi bi-check-circle-fill text-success" style="font-size: 4rem;"></i>
                    <h4 class="mt-3">Todos os itens conferidos!</h4>
                    <p id="mensagemNota" class="text-muted"></p>
                </div>
                
                <div id="opcaoNota" class="d-none">
                    <hr>
                    <p class="fw-bold">Deseja emitir a nota fiscal agora?</p>
                    <div class="d-grid gap-2">
                        <button class="btn btn-primary" onclick="emitirNotaFiscal()">
                            <i class="bi bi-file-earmark-text"></i> Emitir NF-e Agora
                        </button>
                        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            Emitir Depois
                        </button>
                    </div>
                </div>
                
                <div id="semNota" class="d-none">
                    <button class="btn btn-primary w-100" data-bs-dismiss="modal">OK</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
let vendaAtual = null;
let itensConferidos = {};

// Buscar pedido por número
function buscarPedido() {
    const numero = document.getElementById('numeroPedido').value;
    if (!numero) {
        alert('Digite o número do pedido');
        return;
    }
    
    fetch(`/api/venda/buscar?numero_pedido=${numero}`)
        .then(r => r.json())
        .then(data => {
            if (data.success && data.venda) {
                carregarPedido(data.venda.id);
            } else {
                alert('Pedido não encontrado');
            }
        });
}

// Carregar pedido para conferência
function carregarPedido(vendaId) {
    fetch(`/api/venda/${vendaId}`)
        .then(r => r.json())
        .then(data => {
            if (!data.success) {
                alert(data.message || 'Erro ao carregar pedido');
                return;
            }
            
            vendaAtual = data.venda;
            itensConferidos = {};
            
            // Mostrar área de conferência
            document.getElementById('instrucoes').style.display = 'none';
            document.getElementById('areaConferencia').style.display = 'block';
            
            // Renderizar itens
            renderizarItens();
            
            // Focar no scanner
            document.getElementById('codigoBarras').focus();
        });
}

// Renderizar lista de itens
function renderizarItens() {
    if (!vendaAtual) return;
    
    const tbody = document.getElementById('listaItens');
    tbody.innerHTML = '';
    
    let totalItens = 0;
    let totalConferidos = 0;
    
    vendaAtual.itens.forEach((item, index) => {
        const conferido = itensConferidos[item.id] || 0;
        const completo = conferido >= item.quantidade;
        
        totalItens += item.quantidade;
        totalConferidos += conferido;
        
        const tr = document.createElement('tr');
        tr.className = completo ? 'table-success' : '';
        tr.innerHTML = `
            <td class="text-center">
                ${completo ? '<i class="bi bi-check-circle-fill text-success"></i>' : '<i class="bi bi-circle text-muted"></i>'}
            </td>
            <td>${item.descricao}</td>
            <td><code>${item.produto.codigo_barras || item.produto.codigo_produto || '-'}</code></td>
            <td class="text-center"><strong>${item.quantidade}</strong></td>
            <td class="text-center">
                <span class="badge ${completo ? 'bg-success' : 'bg-warning'}">${conferido}</span>
            </td>
        `;
        tbody.appendChild(tr);
    });
    
    // Atualizar progresso
    document.getElementById('progressoConf').textContent = `${totalConferidos}/${totalItens}`;
    
    // Mostrar botão de finalizar se todos conferidos
    if (totalConferidos >= totalItens && totalItens > 0) {
        document.getElementById('botoesAcao').style.display = 'block';
    }
}

// Conferir item por código de barras
function conferirItem() {
    const codigo = document.getElementById('codigoBarras').value.trim();
    const msgDiv = document.getElementById('mensagemScanner');
    
    if (!codigo) {
        msgDiv.innerHTML = '<div class="alert alert-warning">Digite ou escaneie um código</div>';
        return;
    }
    
    if (!vendaAtual) {
        msgDiv.innerHTML = '<div class="alert alert-danger">Nenhum pedido selecionado</div>';
        return;
    }
    
    // Buscar item pelo código
    const item = vendaAtual.itens.find(i => 
        i.produto.codigo_barras === codigo || 
        i.produto.codigo_produto === codigo ||
        i.produto.referencia === codigo
    );
    
    if (!item) {
        msgDiv.innerHTML = '<div class="alert alert-danger"><i class="bi bi-x-circle"></i> Produto não encontrado neste pedido</div>';
        playSound('error');
        document.getElementById('codigoBarras').value = '';
        document.getElementById('codigoBarras').focus();
        return;
    }
    
    // Incrementar conferido
    itensConferidos[item.id] = (itensConferidos[item.id] || 0) + 1;
    
    if (itensConferidos[item.id] > item.quantidade) {
        msgDiv.innerHTML = '<div class="alert alert-warning"><i class="bi bi-exclamation-triangle"></i> Quantidade excedida para este produto</div>';
        playSound('warning');
    } else {
        msgDiv.innerHTML = '<div class="alert alert-success"><i class="bi bi-check-circle"></i> Produto conferido</div>';
        playSound('success');
    }
    
    renderizarItens();
    document.getElementById('codigoBarras').value = '';
    document.getElementById('codigoBarras').focus();
    
    setTimeout(() => msgDiv.innerHTML = '', 2000);
}

// Finalizar expedição
function finalizarExpedicao() {
    if (!vendaAtual) return;
    
    // Verificar se tem nota fiscal
    const temNota = vendaAtual.chave_documento || vendaAtual.numero_documento;
    
    if (temNota) {
        document.getElementById('mensagemNota').textContent = 'Este pedido já possui nota fiscal emitida.';
        document.getElementById('opcaoNota').classList.add('d-none');
        document.getElementById('semNota').classList.remove('d-none');
    } else {
        document.getElementById('mensagemNota').textContent = 'Este pedido ainda não possui nota fiscal.';
        document.getElementById('opcaoNota').classList.remove('d-none');
        document.getElementById('semNota').classList.add('d-none');
    }
    
    // Mostrar modal
    new bootstrap.Modal(document.getElementById('modalFinalizacao')).show();
}

// Emitir nota fiscal
function emitirNotaFiscal() {
    if (!vendaAtual) return;
    window.location.href = `/fiscal/emitir-nfe?venda_id=${vendaAtual.id}`;
}

// Cancelar expedição
function cancelarExpedicao() {
    if (confirm('Deseja cancelar a conferência deste pedido?')) {
        vendaAtual = null;
        itensConferidos = {};
        document.getElementById('areaConferencia').style.display = 'none';
        document.getElementById('instrucoes').style.display = 'block';
        document.getElementById('numeroPedido').value = '';
    }
}

// Sons de feedback
function playSound(type) {
    // Implementar sons de feedback se necessário
    // Por enquanto, apenas visual
}

// Enter no campo de busca
document.getElementById('numeroPedido').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') buscarPedido();
});

const numeroPedidoInicial = new URLSearchParams(window.location.search).get('numero_pedido');
if (numeroPedidoInicial) {
    document.getElementById('numeroPedido').value = numeroPedidoInicial;
    buscarPedido();
}
</script>

<style>
#codigoBarras {
    font-size: 1.2rem;
    font-weight: bold;
}

.table-success {
    background-color: #d4edda !important;
}

code {
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 3px;
}
</style>

{% endblock %}