{% extends "base.html" %}

{% block title %}Vendas{% endblock %}

{% block content %}
<style>
    /* Garantir que dropdown não seja cortado */
    .card-body {
        overflow: visible !important;
    }
    .table {
        margin-bottom: 0;
    }
    .dropdown-menu {
        z-index: 1050 !important;
        position: absolute !important;
    }
    .table-responsive {
        overflow: visible !important;
    }
    .card-body {
        overflow: visible !important;
    }
</style>
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="fas fa-shopping-cart"></i> Vendas</h2>
        <a href="{{ url_for('nova_venda') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> Nova Venda
        </a>
    </div>

    {# Busca e Filtros #}
    <div class="card mb-3">
        <div class="card-body">
            <div class="row mb-3 g-2">
                <div class="col-md-2">
                    <label class="form-label small mb-1">Nº Pedido</label>
                    <input type="number" class="form-control form-control-sm" id="buscarNumeroPedido" 
                           placeholder="Ex: 89" onkeypress="if(event.key==='Enter') buscarPorNumero()">
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Nº Documento</label>
                    <input type="text" class="form-control form-control-sm" id="buscarNumeroDocumento" 
                           placeholder="Ex: NF-123" onkeypress="if(event.key==='Enter') buscarPorDocumento()">
                </div>
                <div class="col-md-1 d-flex align-items-end">
                    <button type="button" class="btn btn-primary btn-sm w-100" onclick="buscarPorNumero() || buscarPorDocumento()">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
                <div class="col-md-3">
                    <label class="form-label small mb-1">Busca Geral</label>
                    <div class="input-group input-group-sm">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control" id="buscarVenda" placeholder="Cliente, valor...">
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Empresa / Loja</label>
                    {% set empresas_filtro = empresas if empresas is defined and empresas else app_empresa_empresas_disponiveis if app_empresa_empresas_disponiveis is defined else [] %}
                    <select class="form-select form-select-sm" id="filtroEmpresa" onchange="filtrarPorEmpresa(this.value)">
                        <option value="" {% if not empresa_filter %}selected{% endif %}>Empresa Atual</option>
                        <option value="todas" {% if empresa_filter == 'todas' %}selected{% endif %}>📊 Todas as Empresas</option>
                        {% if empresas_filtro %}
                        <optgroup label="Empresas">
                            {% for emp in empresas_filtro %}
                            <option value="{{ emp.id }}" {% if empresa_filter == emp.id|string %}selected{% endif %}>
                                {{ emp.nome_fantasia or emp.razao_social or emp.nome or ('Empresa ' ~ emp.id) }} (ID {{ emp.id }})
                            </option>
                            {% endfor %}
                        </optgroup>
                        {% endif %}
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Desconto Exceção</label>
                    <select class="form-select form-select-sm" id="filtroDescontoExcecao" onchange="filtrarPorDescontoExcecao(this.value)">
                        <option value="todos" {% if desconto_excecao_filter == 'todos' %}selected{% endif %}>Todos</option>
                        <option value="sim" {% if desconto_excecao_filter == 'sim' %}selected{% endif %}>Com autorização gerente</option>
                        <option value="nao" {% if desconto_excecao_filter == 'nao' %}selected{% endif %}>Sem exceção</option>
                    </select>
                </div>
            </div>
            <div class="row g-2">
                <div class="col-md-2">
                    <label class="form-label small mb-1">Classificar</label>
                    <select class="form-select form-select-sm" id="filtroClassificar" onchange="aplicarOrdenacaoVendas()">
                        <option value="codigo" {% if classificar == 'codigo' %}selected{% endif %}>Código</option>
                        <option value="nome" {% if classificar == 'nome' %}selected{% endif %}>Nome</option>
                        <option value="descricao" {% if classificar == 'descricao' %}selected{% endif %}>Descrição</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Ordem</label>
                    <select class="form-select form-select-sm" id="filtroOrdem" onchange="aplicarOrdenacaoVendas()">
                        <option value="asc" {% if ordem == 'asc' %}selected{% endif %}>Crescente</option>
                        <option value="desc" {% if ordem == 'desc' %}selected{% endif %}>Decrescente</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small mb-1">Pagamento online</label>
                    <select class="form-select form-select-sm" id="filtroStatusOnline" onchange="filtrarPorStatusOnline(this.value)">
                        <option value="todos" {% if status_online_filter == 'todos' %}selected{% endif %}>Todos</option>
                        <option value="pendente" {% if status_online_filter == 'pendente' %}selected{% endif %}>A confirmar</option>
                        <option value="paga" {% if status_online_filter == 'paga' %}selected{% endif %}>Pago</option>
                        <option value="cancelada" {% if status_online_filter == 'cancelada' %}selected{% endif %}>Cancelado</option>
                        <option value="erro" {% if status_online_filter == 'erro' %}selected{% endif %}>Erro</option>
                        <option value="sem_operacao" {% if status_online_filter == 'sem_operacao' %}selected{% endif %}>Sem online</option>
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label small mb-1 d-block">Status</label>
                    <div class="btn-group" role="group">
                        <a href="{{ url_for('vendas', status='todos', status_online=status_online_filter, empresa=empresa_filter, desconto_excecao=desconto_excecao_filter, classificar=classificar, ordem=ordem) }}" 
                           class="btn btn-sm {% if status_filter == 'todos' %}btn-primary{% else %}btn-outline-primary{% endif %}">
                            Todas
                        </a>
                        <a href="{{ url_for('vendas', status='aberto', status_online=status_online_filter, empresa=empresa_filter, desconto_excecao=desconto_excecao_filter, classificar=classificar, ordem=ordem) }}" 
                           class="btn btn-sm {% if status_filter == 'aberto' %}btn-warning{% else %}btn-outline-warning{% endif %}">
                            Abertas
                        </a>
                        <a href="{{ url_for('vendas', status='finalizada', status_online=status_online_filter, empresa=empresa_filter, desconto_excecao=desconto_excecao_filter, classificar=classificar, ordem=ordem) }}" 
                           class="btn btn-sm {% if status_filter == 'finalizada' %}btn-secondary{% else %}btn-outline-secondary{% endif %}">
                            Finalizadas
                        </a>
                        <a href="{{ url_for('vendas', status='faturado', status_online=status_online_filter, empresa=empresa_filter, desconto_excecao=desconto_excecao_filter, classificar=classificar, ordem=ordem) }}" 
                           class="btn btn-sm {% if status_filter == 'faturado' %}btn-success{% else %}btn-outline-success{% endif %}">
                            Faturadas
                        </a>
                        <a href="{{ url_for('vendas', status='entregue', status_online=status_online_filter, empresa=empresa_filter, desconto_excecao=desconto_excecao_filter, classificar=classificar, ordem=ordem) }}" 
                           class="btn btn-sm {% if status_filter == 'entregue' %}btn-info{% else %}btn-outline-info{% endif %}">
                            Entregues
                        </a>
                        <a href="{{ url_for('vendas', status='cancelado', status_online=status_online_filter, empresa=empresa_filter, desconto_excecao=desconto_excecao_filter, classificar=classificar, ordem=ordem) }}" 
                           class="btn btn-sm {% if status_filter == 'cancelado' %}btn-danger{% else %}btn-outline-danger{% endif %}">
                            Canceladas
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# Tabela de vendas #}
    <div class="card">
        <div class="card-body">
            {% if vendas %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Nº Pedido</th>
                            <th>Nº Documento</th>
                            <th>Data</th>
                            <th>Cliente</th>
                            <th>Empresa</th>
                            {% if current_user.nivel_acesso in ['gerente', 'admin'] %}
                            <th>Custo</th>
                            <th>Desconto</th>
                            {% endif %}
                            <th>Valor Total</th>
                            <th>Pagamento Online</th>
                            <th>Status</th>
                            <th width="150">Ações</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for venda in vendas %}
                        <tr data-href="{{ url_for('editar_venda', id=venda.id) }}"
                            title="{% if venda.status == 'cancelado' %}Duplo clique para visualizar{% else %}Duplo clique para editar{% endif %}">
                            <td>
                                <strong>{{ venda.numero_pedido }}</strong>
                                {% if venda.desconto_excecao %}
                                <span class="badge bg-danger ms-1" title="Desconto manual acima do limite autorizado por gerente{% if venda.desconto_excecao_autorizador %}: {{ venda.desconto_excecao_autorizador }}{% endif %}">
                                    <i class="bi bi-shield-lock"></i> Exceção
                                </span>
                                {% endif %}
                                <button type="button" class="btn btn-sm btn-link p-0 ms-2" 
                                        data-bs-toggle="modal" data-bs-target="#timelineModal{{ venda.id }}"
                                        title="Ver histórico do pedido">
                                    <i class="bi bi-clock-history text-primary"></i>
                                </button>
                            </td>
                            <td>
                                {% if venda.tipo_documento and venda.numero_documento %}
                                    {% if venda.tipo_documento == 55 %}
                                        <span class="badge bg-primary">NF-e</span>
                                    {% elif venda.tipo_documento == 65 %}
                                        <span class="badge bg-info">NFC-e</span>
                                    {% else %}
                                        <span class="badge bg-secondary">{{ venda.tipo_documento }}</span>
                                    {% endif %}
                                    <small>{{ venda.numero_documento }}</small>
                                {% else %}
                                    <small class="text-muted">-</small>
                                {% endif %}
                            </td>
                            <td>{{ venda.data_venda.strftime('%d/%m/%Y') if venda.data_venda else 'N/A' }}</td>
                            <td>{{ venda.get_cliente_nome() }}</td>
                            <td>{{ venda.empresa.nome_fantasia or venda.empresa.razao_social if venda.empresa else 'N/A' }}</td>
                            {% if current_user.nivel_acesso in ['gerente', 'admin'] %}
                            <td>
                                {% set custo_total = namespace(valor=0) %}
                                {% for item in venda.itens %}
                                    {% if item.produto %}
                                        {# Buscar custo médio do produto (ProdutoEstoque) ou usar custo_operacao #}
                                        {% set custo_unitario = 0 %}
                                        {% if item.produto.estoques and item.produto.estoques|length > 0 %}
                                            {% set custo_unitario = item.produto.estoques[0].custo_medio or 0 %}
                                        {% endif %}
                                        {% if custo_unitario == 0 %}
                                            {% set custo_unitario = item.produto.custo_operacao or 0 %}
                                        {% endif %}
                                        {% set custo_total.valor = custo_total.valor + custo_unitario * item.quantidade %}
                                    {% endif %}
                                {% endfor %}
                                <span class="text-muted small">R$ {{ "%.2f"|format(custo_total.valor) }}</span>
                            </td>
                            <td>
                                {% if venda.desconto and venda.desconto > 0 %}
                                    <span class="badge bg-warning">R$ {{ "%.2f"|format(venda.desconto) }}</span>
                                    {% if venda.desconto_excecao %}
                                    <div class="small text-danger mt-1" title="Autorizado por {{ venda.desconto_excecao_autorizador or 'superior' }}">
                                        Extra autorizado
                                    </div>
                                    {% endif %}
                                {% else %}
                                    <span class="text-muted small">-</span>
                                {% endif %}
                            </td>
                            {% endif %}
                            <td>R$ {{ "%.2f"|format(venda.valor_total if venda.valor_total else 0) }}</td>
                            <td>
                                {% set online_label = venda.pagamento_online_label or 'Sem online' %}
                                {% set online_badge = venda.pagamento_online_badge or 'secondary' %}
                                <span class="badge bg-{{ online_badge }}">{{ online_label }}</span>
                                <div class="small text-muted mt-1">{{ venda.pagamento_online_detail or 'Venda local / balcão' }}</div>
                                {% if venda.operacao_online_atual and venda.operacao_online_atual.referencia_externa %}
                                <div class="small text-muted">Ref. {{ venda.operacao_online_atual.referencia_externa }}</div>
                                {% endif %}
                            </td>
                            <td>
                                {% if venda.status == 'aberto' %}
                                    <span class="badge bg-primary" title="Em edição, não disponível para PDV"><i class="bi bi-pencil"></i> Aberto</span>
                                {% elif venda.status == 'fechado' %}
                                    <span class="badge bg-success" title="Pronto para recebimento no PDV"><i class="bi bi-check-circle"></i> Fechado</span>
                                {% elif venda.status == 'faturado' %}
                                    <span class="badge bg-dark" title="Documento fiscal emitido"><i class="bi bi-file-earmark-check"></i> Faturado</span>
                                {% elif venda.status == 'recebido' %}
                                    <span class="badge bg-info" title="Pagamento recebido"><i class="bi bi-cash-coin"></i> Recebido</span>
                                {% elif venda.status == 'entregue' %}
                                    <span class="badge bg-info">Entregue</span>
                                {% elif venda.status == 'cancelado' %}
                                    <span class="badge bg-danger">Cancelado</span>
                                {% else %}
                                    <span class="badge bg-secondary">{{ venda.status|default('Desconhecido')|replace('_', ' ')|title }}</span>
                                {% endif %}
                                {% if venda.pagamento_online_status == 'pendente' and venda.status not in ['recebido', 'cancelado'] %}
                                <div class="mt-1">
                                    <span class="badge bg-warning text-dark" title="Pedido aguardando retorno do gateway para confirmar o pagamento">
                                        <i class="bi bi-hourglass-split"></i> A confirmar pgto.
                                    </span>
                                </div>
                                {% endif %}
                            </td>
                            <td class="text-center">
                                <div class="dropdown">
                                    <button class="btn btn-sm btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i class="bi bi-three-dots-vertical"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end">
                                        <li>
                                            <a class="dropdown-item" href="{{ url_for('editar_venda', id=venda.id) }}">
                                                <i class="bi bi-eye-fill text-primary"></i> Visualizar
                                            </a>
                                        </li>
                                        <li>
                                            {% if venda.status == 'cancelado' %}
                                            <span class="dropdown-item disabled">
                                                <i class="bi bi-pencil-fill text-warning"></i> Editar bloqueado
                                            </span>
                                            {% else %}
                                            <a class="dropdown-item" href="{{ url_for('editar_venda', id=venda.id) }}">
                                                <i class="bi bi-pencil-fill text-warning"></i> Editar
                                            </a>
                                            {% endif %}
                                        </li>
                                        <li>
                                            <form method="POST" action="{{ url_for('copiar_venda', id=venda.id) }}">
                                                <button type="submit" class="dropdown-item">
                                                    <i class="bi bi-copy text-primary"></i> Copiar Pedido
                                                </button>
                                            </form>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="{{ url_for('imprimir_venda', id=venda.id) }}" target="_blank">
                                                <i class="bi bi-printer-fill text-info"></i> Imprimir A4
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="{{ url_for('imprimir_venda_termica', id=venda.id) }}" target="_blank">
                                                <i class="bi bi-receipt text-success"></i> Imprimir 80mm (Bobina)
                                            </a>
                                        </li>
                                        {% if venda.status != 'cancelado' %}
                                        <li><hr class="dropdown-divider"></li>
                                        {% if venda.numero_nf %}
                                            {# Venda tem nota fiscal - mostrar opção de cancelar #}
                                            <li>
                                                <a class="dropdown-item text-danger" href="{{ url_for('fiscal_notas') }}?venda_id={{ venda.id }}">
                                                    <i class="bi bi-file-earmark-x"></i> Cancelar {{ 'NFC-e' if venda.caixa_pdv_id else 'NF-e' }}
                                                </a>
                                            </li>
                                        {% else %}
                                            {# Venda sem nota fiscal - mostrar opção de emitir #}
                                            {% if venda.caixa_pdv_id and venda.status == 'recebido' %}
                                            <li>
                                                <a class="dropdown-item" href="#" onclick="emitirNFCeVenda({{ venda.id }})">
                                                    <i class="bi bi-receipt text-warning"></i> Emitir NFC-e
                                                </a>
                                            </li>
                                            {% endif %}
                                            <li>
                                                <a class="dropdown-item" href="{{ url_for('fiscal_emitir_nfe', venda_id=venda.id) }}">
                                                    <i class="bi bi-file-earmark-text text-success"></i> Emitir NF-e
                                                </a>
                                            </li>
                                        {% endif %}
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <form method="POST" action="{{ url_for('cancelar_venda', id=venda.id) }}" 
                                                  onsubmit="return confirm('Tem certeza que deseja cancelar esta venda?')">
                                                <button type="submit" class="dropdown-item text-danger">
                                                    <i class="bi bi-x-circle-fill"></i> Cancelar
                                                </button>
                                            </form>
                                        </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> Nenhuma venda encontrada.
            </div>
            {% if status_filter == 'todos' and guardadas_finalizadas_count and guardadas_finalizadas_count > 0 %}
                <div class="alert alert-warning mt-3 mb-0" role="alert">
                <i class="fas fa-exclamation-triangle"></i>
                Existem <strong>{{ guardadas_finalizadas_count }}</strong> venda(s) finalizada(s) no buffer do PDV
                (<code>venda_guardada</code>) aguardando consolidação em <code>venda</code>.
                <a href="{{ url_for('relatorio_vendas') }}" class="alert-link">Ver no relatório operacional</a>.
            </div>
            {% endif %}
            {% endif %}
        </div>
    </div>
</div>

<script>
// Busca de vendas em tempo real
document.getElementById('buscarVenda').addEventListener('input', filtrarVendas);

function filtrarVendas() {
    const busca = document.getElementById('buscarVenda').value.toLowerCase();
    const linhas = document.querySelectorAll('tbody tr');
    
    linhas.forEach(linha => {
        const texto = linha.textContent.toLowerCase();
        
        if (texto.includes(busca)) {
            linha.style.display = '';
        } else {
            linha.style.display = 'none';
        }
    });
}

// Filtro por empresa/loja
function filtrarPorEmpresa(valor) {
    const url = new URL(window.location.href);
    if (valor === '') {
        url.searchParams.delete('empresa');
    } else {
        url.searchParams.set('empresa', valor);
    }
    // Manter status filter
    window.location.href = url.toString();
}

function filtrarPorDescontoExcecao(valor) {
    const url = new URL(window.location.href);
    if (!valor || valor === 'todos') {
        url.searchParams.delete('desconto_excecao');
    } else {
        url.searchParams.set('desconto_excecao', valor);
    }
    window.location.href = url.toString();
}

function filtrarPorStatusOnline(valor) {
    const url = new URL(window.location.href);
    if (!valor || valor === 'todos') {
        url.searchParams.delete('status_online');
    } else {
        url.searchParams.set('status_online', valor);
    }
    window.location.href = url.toString();
}

function aplicarOrdenacaoVendas() {
    const classificar = document.getElementById('filtroClassificar').value;
    const ordem = document.getElementById('filtroOrdem').value;
    const url = new URL(window.location.href);
    url.searchParams.set('classificar', classificar);
    url.searchParams.set('ordem', ordem);
    window.location.href = url.toString();
}

// Busca por número do pedido
function buscarPorNumero() {
    const numero = document.getElementById('buscarNumeroPedido').value.trim();
    if (!numero) return false;
    
    fetch(`/api/venda/buscar?numero_pedido=${encodeURIComponent(numero)}`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.venda_id) {
                window.location.href = `/venda/${data.venda_id}`;
            } else {
                alert('Pedido não encontrado');
            }
        })
        .catch(err => {
            console.error('Erro:', err);
            alert('Erro ao buscar pedido');
        });
    return true;
}

// Busca por número do documento
function buscarPorDocumento() {
    const documento = document.getElementById('buscarNumeroDocumento').value.trim();
    if (!documento) return false;
    
    fetch(`/api/venda/buscar?numero_documento=${encodeURIComponent(documento)}`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.venda_id) {
                window.location.href = `/venda/${data.venda_id}`;
            } else {
                alert('Documento não encontrado');
            }
        })
        .catch(err => {
            console.error('Erro:', err);
            alert('Erro ao buscar documento');
        });
    return true;
}

async function emitirNFCeVenda(vendaId) {
    if (!vendaId) return;
    if (!confirm('Deseja emitir a NFC-e para esta venda?')) return;

    try {
        // 1) Processar NFC-e (gera XML e nota)
        const respProcessar = await fetch(`/fiscal/processar-nfe/${vendaId}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        });
        const dataProcessar = await respProcessar.json();
        if (!respProcessar.ok || !dataProcessar.success) {
            throw new Error(dataProcessar.message || 'Erro ao processar NFC-e');
        }

        const notaId = dataProcessar.nota_id;

        // 2) Transmitir NFC-e
        const respTransmitir = await fetch(`/fiscal/transmitir-nfe/${notaId}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        });
        const dataTransmitir = await respTransmitir.json();
        if (!respTransmitir.ok || !dataTransmitir.success) {
            throw new Error(dataTransmitir.message || 'Erro na transmissão SEFAZ');
        }

        alert(`NFC-e emitida com sucesso!\nProtocolo: ${dataTransmitir.protocolo || 'N/A'}`);

        // 3) Abrir impressão automática do DANFE NFC-e
        window.open(`/fiscal/imprimir-danfe-nfce-auto/${notaId}`, '_blank', 'noopener');
    } catch (error) {
        alert(`Erro ao emitir NFC-e: ${error.message}`);
    }
}
</script>

{# Modais de Timeline #}
{% for venda in vendas %}
<div class="modal fade cape-modal-standard cape-modal-detail" id="timelineModal{{ venda.id }}" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="bi bi-clock-history"></i> Histórico Completo - Pedido #{{ venda.numero_pedido }}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="timeline">
                    {# 1. ABERTURA DO PEDIDO #}
                    <div class="timeline-item">
                        <i class="bi bi-plus-circle bg-success"></i>
                        <div class="timeline-content">
                            <h6><i class="bi bi-file-earmark-plus"></i> Pedido Aberto</h6>
                            <p class="mb-0 small"><strong>{{ venda.data_criacao.strftime('%d/%m/%Y %H:%M') if venda.data_criacao else 'N/A' }}</strong></p>
                            <p class="mb-0 small text-muted">
                                <i class="bi bi-person"></i> Por: {{ venda.usuario.username if venda.usuario else 'Sistema' }}
                                {% if venda.origem %}
                                | <i class="bi bi-laptop"></i> Origem: {{ venda.origem | upper }}
                                {% endif %}
                            </p>
                        </div>
                    </div>
                    
                    {# 2. EDIÇÕES DO PEDIDO #}
                    {% if venda.data_atualizacao and venda.data_atualizacao != venda.data_criacao %}
                    <div class="timeline-item">
                        <i class="bi bi-pencil-square bg-secondary"></i>
                        <div class="timeline-content">
                            <h6><i class="bi bi-pencil"></i> Pedido Editado</h6>
                            <p class="mb-0 small"><strong>{{ venda.data_atualizacao.strftime('%d/%m/%Y %H:%M') }}</strong></p>
                            <p class="mb-0 small text-muted">Última atualização registrada</p>
                        </div>
                    </div>
                    {% endif %}
                    
                    {# 3. FECHAMENTO DO PEDIDO #}
                    {% if venda.data_fechamento %}
                    <div class="timeline-item">
                        <i class="bi bi-check-circle bg-info"></i>
                        <div class="timeline-content">
                            <h6><i class="bi bi-lock"></i> Pedido Fechado</h6>
                            <p class="mb-0 small"><strong>{{ venda.data_fechamento.strftime('%d/%m/%Y %H:%M') }}</strong></p>
                            <p class="mb-0 small text-muted">Status: {{ venda.status | upper }}</p>
                        </div>
                    </div>
                    {% endif %}
                    
                    {# 4. RECEBIMENTO DO PAGAMENTO #}
                    {% if venda.data_recebimento %}
                    <div class="timeline-item">
                        <i class="bi bi-cash-coin bg-warning"></i>
                        <div class="timeline-content">
                            <h6><i class="bi bi-currency-dollar"></i> Pagamento Recebido</h6>
                            <p class="mb-0 small"><strong>{{ venda.data_recebimento.strftime('%d/%m/%Y %H:%M') }}</strong></p>
                            <p class="mb-0 small text-muted">
                                <i class="bi bi-person"></i> Por: {{ venda.recebido_por.username if venda.recebido_por else 'N/A' }}
                            </p>
                            {% if venda.pagamentos_json %}
                            {% set pagamentos = venda.pagamentos_json | fromjson %}
                            {% if pagamentos %}
                            <div class="mt-2 p-2" style="background: #f8f9fa; border-radius: 4px; border-left: 3px solid #ffc107;">
                                <small class="text-muted d-block mb-1"><strong>Formas de Pagamento:</strong></small>
                                {% for pag in pagamentos %}
                                {% set nome_forma = (pag.forma_nome or pag.forma or pag.forma_pagamento or '') %}
                                {% set tipo_agrupamento = (pag.tipo_agrupamento or '')|lower %}
                                {% set nome_forma_lower = nome_forma|lower %}
                                {% set eh_credito = (tipo_agrupamento == 'credito') or ('credito' in nome_forma_lower) or ('crédito' in nome_forma_lower) %}
                                {% set bandeira = (pag.bandeira or '') %}
                                {% set parcelas_bruto = pag.parcelas_qtd if (pag.parcelas_qtd is defined and pag.parcelas_qtd) else pag.parcelas %}
                                {% if parcelas_bruto is number %}
                                    {% set parcelas_qtd = parcelas_bruto|int %}
                                {% elif parcelas_bruto is iterable and parcelas_bruto is not string %}
                                    {% set parcelas_qtd = parcelas_bruto|length %}
                                {% else %}
                                    {% set parcelas_qtd = 1 %}
                                {% endif %}
                                <small class="d-block">
                                    <i class="bi bi-credit-card"></i> {{ nome_forma }}: 
                                    <strong>R$ {{ "%.2f"|format(pag.valor or pag.valor_pago or 0) }}</strong>
                                    {% if parcelas_qtd > 1 %}
                                    ({{ parcelas_qtd }}x)
                                    {% endif %}
                                </small>
                                {% if eh_credito and (bandeira or parcelas_qtd > 1) %}
                                <small class="d-block text-muted ms-3">
                                    {% if bandeira %}<i class="bi bi-bookmark"></i> Bandeira: {{ bandeira }}{% endif %}
                                    {% if bandeira and parcelas_qtd > 1 %} · {% endif %}
                                    {% if parcelas_qtd > 1 %}<i class="bi bi-collection"></i> Parcelas: {{ parcelas_qtd }}x{% endif %}
                                </small>
                                {% endif %}
                                {% endfor %}
                                {% if venda.troco_total and venda.troco_total > 0 %}
                                <small class="d-block text-success mt-1">
                                    <i class="bi bi-arrow-return-left"></i> Troco: R$ {{ "%.2f"|format(venda.troco_total) }}
                                </small>
                                {% endif %}
                            </div>
                            {% endif %}
                            {% elif venda.forma_pagamento %}
                            <p class="mb-0 small">
                                <i class="bi bi-credit-card"></i> Forma: <strong>{{ venda.forma_pagamento }}</strong>
                            </p>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                    
                    {# 5. FATURAMENTO (EMISSÃO DE NOTA FISCAL) #}
                    {% if venda.chave_documento %}
                    <div class="timeline-item">
                        <i class="bi bi-file-earmark-check bg-primary"></i>
                        <div class="timeline-content">
                            <h6><i class="bi bi-receipt"></i> Nota Fiscal Emitida</h6>
                            <p class="mb-0 small">
                                <strong>{{ 'NF-e' if venda.tipo_documento == 55 else 'NFC-e' if venda.tipo_documento == 65 else 'Nota' }}</strong> 
                                Nº {{ venda.numero_documento }}
                                {% if venda.serie_documento %} - Série {{ venda.serie_documento }}{% endif %}
                            </p>
                            {% if venda.chave_documento %}
                            <p class="mb-0 small text-muted" style="font-size: 10px;">
                                <i class="bi bi-key"></i> {{ venda.chave_documento }}
                            </p>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                    
                    {# 6. CANCELAMENTO #}
                    {% if venda.status == 'cancelado' %}
                    <div class="timeline-item">
                        <i class="bi bi-x-circle bg-danger"></i>
                        <div class="timeline-content">
                            <h6><i class="bi bi-slash-circle"></i> Pedido Cancelado</h6>
                            <p class="mb-0 small"><strong>{{ venda.data_cancelamento.strftime('%d/%m/%Y %H:%M') if venda.data_cancelamento else 'N/A' }}</strong></p>
                            {% if venda.motivo_cancelamento %}
                            <div class="mt-2 p-2" style="background: #ffe6e6; border-radius: 4px; border-left: 3px solid #dc3545;">
                                <small class="d-block"><strong>Motivo:</strong></small>
                                <small class="d-block text-danger">{{ venda.motivo_cancelamento }}</small>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    {% endif %}
                    
                    {# 7. RESUMO FINAL #}
                    <div class="timeline-item">
                        <i class="bi bi-info-circle bg-light text-dark"></i>
                        <div class="timeline-content">
                            <h6><i class="bi bi-journal-text"></i> Resumo</h6>
                            <small class="d-block text-muted">
                                <strong>Status Atual:</strong> 
                                <span class="badge {% if venda.status == 'cancelado' %}bg-danger{% elif venda.status == 'finalizada' or venda.status == 'recebido' %}bg-success{% elif venda.status == 'faturado' %}bg-primary{% else %}bg-warning{% endif %}">
                                    {{ venda.status | upper }}
                                </span>
                            </small>
                            <small class="d-block text-muted mt-1">
                                <strong>Valor Total:</strong> R$ {{ "%.2f"|format(venda.valor_total) }}
                            </small>
                            {% if venda.observacoes %}
                            <small class="d-block text-muted mt-1">
                                <strong>Observações:</strong> {{ venda.observacoes[:100] }}{% if venda.observacoes|length > 100 %}...{% endif %}
                            </small>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endfor %}

<style>
.timeline {
    position: relative;
    padding: 20px 0;
}
.timeline-item {
    position: relative;
    padding-left: 50px;
    padding-bottom: 30px;
}
.timeline-item:last-child {
    padding-bottom: 0;
}
.timeline-item i {
    position: absolute;
    left: 0;
    top: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 35px;
    width: 2px;
    height: calc(100% - 5px);
    background: #dee2e6;
}
.timeline-content h6 {
    margin-bottom: 5px;
    font-size: 14px;
}
</style>

{% endblock %}