{% extends 'base.html' %}
{% block title %}Entrada Manual de Mercadorias{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Cabeçalho -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1"><i class="fas fa-edit me-2"></i>Entrada Manual de Mercadorias</h1>
            <p class="text-muted mb-0">Registre entrada de produtos sem nota fiscal eletrônica</p>
        </div>
        <div>
            <a href="{{ url_for('estoque_entradas_lista') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Voltar
            </a>
        </div>
    </div>

    <form id="formEntradaManual" method="POST">
        <div class="row">
            <!-- Dados do Documento -->
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-file-alt me-2"></i>Dados do Documento</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label">Tipo de Documento</label>
                                <select name="tipo_documento" class="form-select" required>
                                    <option value="NFE">NF-e</option>
                                    <option value="NFCE">NFC-e</option>
                                    <option value="MANUAL" selected>Entrada Manual</option>
                                    <option value="AJUSTE">Ajuste de Estoque</option>
                                    <option value="DEVOLUCAO">Devolução</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Número do Documento</label>
                                <input type="text" name="numero_nota" class="form-control" placeholder="Número">
                            </div>
                            <div class="col-md-2">
                                <label class="form-label">Série</label>
                                <input type="text" name="serie" class="form-control" placeholder="Série">
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Data de Emissão</label>
                                <input type="date" name="data_emissao" class="form-control" value="{{ hoje }}" required>
                            </div>
                            {% if empresas|length > 1 %}
                            <div class="col-md-6">
                                <label class="form-label">Empresa</label>
                                <select name="empresa_id" class="form-select" required>
                                    {% for empresa in empresas %}
                                    <option value="{{ empresa.id }}" {% if loop.first %}selected{% endif %}>
                                        {{ empresa.razao_social or empresa.nome }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            {% else %}
                            <input type="hidden" name="empresa_id" value="{{ empresas[0].id if empresas else '' }}">
                            {% endif %}
                            <div class="col-md-6">
                                <label class="form-label">Chave de Acesso (44 dígitos)</label>
                                <input type="text" name="chave_acesso" class="form-control" maxlength="44" 
                                       placeholder="Opcional - apenas se tiver NF-e">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Fornecedor -->
                <div class="card mb-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="fas fa-truck me-2"></i>Fornecedor</h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label class="form-label">CNPJ/CPF</label>
                                <div class="input-group">
                                    <input type="text" name="cnpj_fornecedor" id="cnpj_fornecedor" 
                                           class="form-control" placeholder="00.000.000/0000-00">
                                    <button type="button" class="btn btn-outline-secondary" onclick="buscarFornecedor()">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <label class="form-label">Nome/Razão Social</label>
                                <div class="input-group">
                                    <input type="text" name="nome_fornecedor" id="nome_fornecedor" 
                                           class="form-control" placeholder="Nome do fornecedor" required>
                                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modalBuscarPessoa">
                                        <i class="fas fa-search"></i> Buscar
                                    </button>
                                </div>
                                <input type="hidden" name="fornecedor_id" id="fornecedor_id">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Itens -->
                <div class="card mb-4">
                    <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                        <h5 class="mb-0"><i class="fas fa-boxes me-2"></i>Itens da Entrada</h5>
                        <button type="button" class="btn btn-light btn-sm" onclick="adicionarItem()">
                            <i class="fas fa-plus me-1"></i> Adicionar Item
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0" id="tabelaItens">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 40%;">Produto</th>
                                        <th style="width: 15%;">Quantidade</th>
                                        <th style="width: 15%;">Valor Unit.</th>
                                        <th style="width: 15%;">Subtotal</th>
                                        <th style="width: 15%;">Ações</th>
                                    </tr>
                                </thead>
                                <tbody id="tbodyItens">
                                    <!-- Itens serão adicionados via JS -->
                                </tbody>
                                <tfoot class="table-light">
                                    <tr>
                                        <td colspan="3" class="text-end"><strong>Total dos Produtos:</strong></td>
                                        <td><strong id="totalProdutos">R$ 0,00</strong></td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Observações -->
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="fas fa-sticky-note me-2"></i>Observações</h5>
                    </div>
                    <div class="card-body">
                        <textarea name="observacoes" class="form-control" rows="3" 
                                  placeholder="Observações sobre esta entrada (opcional)"></textarea>
                    </div>
                </div>
            </div>

            <!-- Totais e Ações -->
            <div class="col-md-4">
                <div class="card mb-4 sticky-top" style="top: 80px;">
                    <div class="card-header bg-dark text-white">
                        <h5 class="mb-0"><i class="fas fa-calculator me-2"></i>Totais</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Valor dos Produtos</label>
                            <input type="text" name="valor_produtos" id="inputValorProdutos" 
                                   class="form-control form-control-lg text-end" value="R$ 0,00" readonly>
                        </div>
                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <label class="form-label">Frete</label>
                                <input type="text" name="valor_frete" class="form-control text-end moeda" 
                                       value="0,00" onchange="calcularTotais()">
                            </div>
                            <div class="col-6">
                                <label class="form-label">Seguro</label>
                                <input type="text" name="valor_seguro" class="form-control text-end moeda" 
                                       value="0,00" onchange="calcularTotais()">
                            </div>
                        </div>
                        <div class="row g-2 mb-3">
                            <div class="col-6">
                                <label class="form-label">Desconto</label>
                                <input type="text" name="valor_desconto" class="form-control text-end moeda" 
                                       value="0,00" onchange="calcularTotais()">
                            </div>
                            <div class="col-6">
                                <label class="form-label">Outros</label>
                                <input type="text" name="valor_outros" class="form-control text-end moeda" 
                                       value="0,00" onchange="calcularTotais()">
                            </div>
                        </div>
                        <hr>
                        <div class="mb-3">
                            <label class="form-label"><strong>VALOR TOTAL</strong></label>
                            <input type="text" name="valor_total" id="inputValorTotal" 
                                   class="form-control form-control-lg text-end bg-success text-white fw-bold" 
                                   value="R$ 0,00" readonly>
                        </div>
                        
                        <!-- Opções de Financeiro -->
                        <div class="border rounded p-3 mb-3 bg-light">
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" id="gerarFinanceiro" 
                                       name="gerar_financeiro" value="1" onchange="toggleFinanceiro()">
                                <label class="form-check-label fw-bold" for="gerarFinanceiro">
                                    <i class="fas fa-money-bill-wave text-success me-1"></i>
                                    Gerar Contas a Pagar
                                </label>
                            </div>
                            <div id="opcaoFinanceiro" style="display: none;">
                                <div class="mb-2">
                                    <label class="form-label small">Quantidade de Parcelas</label>
                                    <select name="parcelas" class="form-select form-select-sm" id="qtdParcelas" onchange="gerarParcelas()">
                                        <option value="1">1x (À Vista)</option>
                                        <option value="2">2x</option>
                                        <option value="3">3x</option>
                                        <option value="4">4x</option>
                                        <option value="5">5x</option>
                                        <option value="6">6x</option>
                                        <option value="10">10x</option>
                                        <option value="12">12x</option>
                                    </select>
                                </div>
                                <div class="mb-2">
                                    <label class="form-label small">Primeiro Vencimento</label>
                                    <input type="date" name="primeiro_vencimento" id="primeiroVencimento" 
                                           class="form-control form-select-sm" value="{{ hoje }}">
                                </div>
                                <div id="listaParcelas" class="small">
                                    <!-- Parcelas serão geradas via JS -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="fas fa-save me-2"></i>Salvar Entrada
                            </button>
                            <button type="button" class="btn btn-outline-primary" onclick="salvarEFinalizar()">
                                <i class="fas fa-check-double me-2"></i>Salvar e Finalizar
                            </button>
                            <a href="{{ url_for('estoque_entradas_lista') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-2"></i>Cancelar
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Modal Buscar Pessoa/Fornecedor -->
<div class="modal fade" id="modalBuscarPessoa" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-search me-2"></i>Buscar Fornecedor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="buscaPessoa" 
                           placeholder="Digite o nome ou CNPJ do fornecedor...">
                    <button class="btn btn-primary" type="button" onclick="pesquisarPessoa()">
                        <i class="fas fa-search"></i> Buscar
                    </button>
                </div>
                <div id="resultadosPessoa" class="list-group" style="max-height: 400px; overflow-y: auto;">
                    <div class="text-center text-muted py-4">
                        Digite para buscar fornecedores cadastrados
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Buscar Produto -->
<div class="modal fade" id="modalBuscarProduto" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-barcode me-2"></i>Buscar Produto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="buscaProduto" 
                           placeholder="Digite o nome, código ou código de barras...">
                    <button class="btn btn-primary" type="button" onclick="pesquisarProduto()">
                        <i class="fas fa-search"></i> Buscar
                    </button>
                </div>
                <div id="resultadosProduto" class="list-group" style="max-height: 400px; overflow-y: auto;">
                    <div class="text-center text-muted py-4">
                        Digite para buscar produtos cadastrados
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
let itemCount = 0;
let linhaAtual = null;

// Adicionar item na tabela
function adicionarItem(produto = null) {
    itemCount++;
    const tbody = document.getElementById('tbodyItens');
    const tr = document.createElement('tr');
    tr.id = `item_${itemCount}`;
    tr.innerHTML = `
        <td>
            <div class="input-group input-group-sm">
                <input type="hidden" name="itens[${itemCount}][produto_id]" class="produto-id">
                <input type="text" name="itens[${itemCount}][produto_nome]" class="form-control produto-nome" 
                       placeholder="Selecione o produto" readonly required>
                <button type="button" class="btn btn-outline-primary" onclick="abrirBuscaProduto(${itemCount})">
                    <i class="fas fa-search"></i>
                </button>
            </div>
            <small class="text-muted produto-codigo"></small>
        </td>
        <td>
            <input type="number" name="itens[${itemCount}][quantidade]" class="form-control form-control-sm text-end quantidade" 
                   step="0.001" min="0.001" value="1" onchange="calcularSubtotal(${itemCount})">
        </td>
        <td>
            <input type="text" name="itens[${itemCount}][valor_unitario]" class="form-control form-control-sm text-end valor-unitario moeda" 
                   value="0,00" onchange="calcularSubtotal(${itemCount})">
        </td>
        <td>
            <input type="text" class="form-control form-control-sm text-end subtotal" value="R$ 0,00" readonly>
            <input type="hidden" name="itens[${itemCount}][subtotal]" class="subtotal-hidden">
        </td>
        <td>
            <button type="button" class="btn btn-outline-danger btn-sm" onclick="removerItem(${itemCount})">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    `;
    tbody.appendChild(tr);
    
    if (produto) {
        selecionarProdutoNaLinha(itemCount, produto);
    }
}

// Remover item
function removerItem(id) {
    document.getElementById(`item_${id}`).remove();
    calcularTotais();
}

// Abrir modal para buscar produto
function abrirBuscaProduto(itemId) {
    linhaAtual = itemId;
    document.getElementById('buscaProduto').value = '';
    document.getElementById('resultadosProduto').innerHTML = '<div class="text-center text-muted py-4">Digite para buscar produtos cadastrados</div>';
    new bootstrap.Modal(document.getElementById('modalBuscarProduto')).show();
    setTimeout(() => document.getElementById('buscaProduto').focus(), 500);
}

// Pesquisar produto
function pesquisarProduto() {
    const termo = document.getElementById('buscaProduto').value;
    if (termo.length < 2) return;
    
    fetch(`/api/produtos/buscar?q=${encodeURIComponent(termo)}`)
        .then(r => r.json())
        .then(data => {
            const container = document.getElementById('resultadosProduto');
            const produtos = Array.isArray(data) ? data : (data.produtos || []);
            if (produtos.length > 0) {
                container.innerHTML = produtos.map(p => `
                    <button type="button" class="list-group-item list-group-item-action" 
                            onclick="selecionarProduto(${JSON.stringify(p).replace(/"/g, '&quot;')})">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <strong>${p.nome}</strong>
                                <br><small class="text-muted">Cód: ${p.codigo || 'Sem código'} | Un: ${p.unidade || 'UN'}</small>
                            </div>
                            <div class="text-end">
                                <span class="badge bg-primary">R$ ${(p.preco || 0).toFixed(2).replace('.', ',')}</span>
                            </div>
                        </div>
                    </button>
                `).join('');
            } else {
                container.innerHTML = '<div class="text-center text-muted py-4">Nenhum produto encontrado</div>';
            }
        });
}

// Selecionar produto
function selecionarProduto(produto) {
    selecionarProdutoNaLinha(linhaAtual, produto);
    bootstrap.Modal.getInstance(document.getElementById('modalBuscarProduto')).hide();
}

function selecionarProdutoNaLinha(itemId, produto) {
    const linha = document.getElementById(`item_${itemId}`);
    linha.querySelector('.produto-id').value = produto.id;
    linha.querySelector('.produto-nome').value = produto.nome;
    linha.querySelector('.produto-codigo').textContent = `Cód: ${produto.codigo || 'Sem código'} | ${produto.unidade || 'UN'}`;
    
    // Usar preço da API (preco é o preco_venda da API)
    const valorUnit = produto.preco || 0;
    linha.querySelector('.valor-unitario').value = valorUnit.toFixed(2).replace('.', ',');
    
    calcularSubtotal(itemId);
}

// Calcular subtotal do item
function calcularSubtotal(itemId) {
    const linha = document.getElementById(`item_${itemId}`);
    const qtd = parseFloat(linha.querySelector('.quantidade').value) || 0;
    const valorStr = linha.querySelector('.valor-unitario').value.replace(/[^\d,]/g, '').replace(',', '.');
    const valorUnit = parseFloat(valorStr) || 0;
    const subtotal = qtd * valorUnit;
    
    linha.querySelector('.subtotal').value = `R$ ${subtotal.toFixed(2).replace('.', ',')}`;
    linha.querySelector('.subtotal-hidden').value = subtotal.toFixed(2);
    
    calcularTotais();
}

// Calcular totais gerais
function calcularTotais() {
    let totalProdutos = 0;
    document.querySelectorAll('.subtotal-hidden').forEach(input => {
        totalProdutos += parseFloat(input.value) || 0;
    });
    
    const frete = parseFloat(document.querySelector('[name="valor_frete"]').value.replace(/[^\d,]/g, '').replace(',', '.')) || 0;
    const seguro = parseFloat(document.querySelector('[name="valor_seguro"]').value.replace(/[^\d,]/g, '').replace(',', '.')) || 0;
    const desconto = parseFloat(document.querySelector('[name="valor_desconto"]').value.replace(/[^\d,]/g, '').replace(',', '.')) || 0;
    const outros = parseFloat(document.querySelector('[name="valor_outros"]').value.replace(/[^\d,]/g, '').replace(',', '.')) || 0;
    
    const total = totalProdutos + frete + seguro + outros - desconto;
    
    document.getElementById('totalProdutos').textContent = `R$ ${totalProdutos.toFixed(2).replace('.', ',')}`;
    document.getElementById('inputValorProdutos').value = `R$ ${totalProdutos.toFixed(2).replace('.', ',')}`;
    document.getElementById('inputValorTotal').value = `R$ ${total.toFixed(2).replace('.', ',')}`;
}

// Pesquisar pessoa/fornecedor
function pesquisarPessoa() {
    const termo = document.getElementById('buscaPessoa').value;
    if (termo.length < 2) return;
    
    fetch(`/api/pessoas/buscar?q=${encodeURIComponent(termo)}`)
        .then(r => r.json())
        .then(data => {
            const container = document.getElementById('resultadosPessoa');
            const pessoas = Array.isArray(data) ? data : (data.pessoas || []);
            if (pessoas.length > 0) {
                container.innerHTML = pessoas.map(p => `
                    <button type="button" class="list-group-item list-group-item-action" 
                            onclick="selecionarFornecedor(${p.id}, '${(p.nome || '').replace(/'/g, "\\'")}', '${p.documento || ''}')">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>${p.nome}</strong>
                                <br><small class="text-muted">${p.documento || 'Sem documento'}</small>
                            </div>
                            <span class="badge bg-secondary">${p.cidade || ''}</span>
                        </div>
                    </button>
                `).join('');
            } else {
                container.innerHTML = '<div class="text-center text-muted py-4">Nenhum fornecedor encontrado</div>';
            }
        });
}

// Selecionar fornecedor
function selecionarFornecedor(id, nome, cnpj) {
    document.getElementById('fornecedor_id').value = id;
    document.getElementById('nome_fornecedor').value = nome;
    document.getElementById('cnpj_fornecedor').value = cnpj;
    bootstrap.Modal.getInstance(document.getElementById('modalBuscarPessoa')).hide();
}

// Buscar fornecedor por CNPJ
function buscarFornecedor() {
    const cnpj = document.getElementById('cnpj_fornecedor').value.replace(/\D/g, '');
    if (cnpj.length < 11) {
        alert('Digite um CNPJ/CPF válido');
        return;
    }
    
    fetch(`/api/pessoas/buscar?q=${cnpj}`)
        .then(r => r.json())
        .then(data => {
            const pessoas = Array.isArray(data) ? data : (data.pessoas || []);
            if (pessoas.length > 0) {
                const p = pessoas[0];
                selecionarFornecedor(p.id, p.nome, p.documento);
            } else {
                alert('Fornecedor não encontrado. Você pode digitar o nome manualmente.');
                document.getElementById('nome_fornecedor').readOnly = false;
                document.getElementById('nome_fornecedor').focus();
            }
        });
}

// Salvar formulário
document.getElementById('formEntradaManual').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Verificar se tem itens
    if (document.querySelectorAll('#tbodyItens tr').length === 0) {
        alert('Adicione pelo menos um item à entrada!');
        return;
    }
    
    salvarEntrada(false);
});

function salvarEFinalizar() {
    if (document.querySelectorAll('#tbodyItens tr').length === 0) {
        alert('Adicione pelo menos um item à entrada!');
        return;
    }
    salvarEntrada(true);
}

function salvarEntrada(finalizar) {
    const form = document.getElementById('formEntradaManual');
    const formData = new FormData(form);
    formData.append('finalizar', finalizar ? '1' : '0');
    
    fetch('{{ url_for("estoque_entrada_manual_salvar") }}', {
        method: 'POST',
        body: formData
    })
    .then(r => r.json())
    .then(data => {
        if (data.sucesso || data.success) {
            alert(data.mensagem || data.message || 'Entrada salva com sucesso!');
            window.location.href = '{{ url_for("estoque_entradas_lista") }}';
        } else {
            alert(data.mensagem || data.message || 'Erro ao salvar entrada');
        }
    })
    .catch(err => {
        alert('Erro ao salvar: ' + err);
    });
}

// Funções de financeiro/parcelas
function toggleFinanceiro() {
    const checkbox = document.getElementById('gerarFinanceiro');
    const opcoes = document.getElementById('opcaoFinanceiro');
    if (checkbox.checked) {
        opcoes.style.display = 'block';
        gerarParcelas();
    } else {
        opcoes.style.display = 'none';
    }
}

function gerarParcelas() {
    const qtd = parseInt(document.getElementById('qtdParcelas').value) || 1;
    const dataInicialStr = document.getElementById('primeiroVencimento').value;
    const valorTotalStr = document.getElementById('inputValorTotal').value.replace(/[^\d,]/g, '').replace(',', '.');
    const valorTotal = parseFloat(valorTotalStr) || 0;
    
    if (valorTotal <= 0) {
        document.getElementById('listaParcelas').innerHTML = '<div class="text-warning">Adicione itens para visualizar parcelas</div>';
        return;
    }
    
    const valorParcela = valorTotal / qtd;
    let dataVencimento = dataInicialStr ? new Date(dataInicialStr + 'T00:00:00') : new Date();
    
    let html = '<div class="table-responsive"><table class="table table-sm table-borderless mb-0"><tbody>';
    
    for (let i = 1; i <= qtd; i++) {
        const dataFormatada = dataVencimento.toLocaleDateString('pt-BR');
        const dataInput = dataVencimento.toISOString().split('T')[0];
        
        html += `
            <tr>
                <td class="py-1"><strong>${i}/${qtd}</strong></td>
                <td class="py-1">
                    <input type="hidden" name="parcela_venc_${i}" value="${dataInput}">
                    <input type="hidden" name="parcela_valor_${i}" value="${valorParcela.toFixed(2)}">
                    ${dataFormatada}
                </td>
                <td class="py-1 text-end">R$ ${valorParcela.toFixed(2).replace('.', ',')}</td>
            </tr>
        `;
        
        // Próximo mês
        dataVencimento.setMonth(dataVencimento.getMonth() + 1);
    }
    
    html += '</tbody></table></div>';
    document.getElementById('listaParcelas').innerHTML = html;
}

// Atualizar parcelas quando calcular totais
const calcularTotaisOriginal = calcularTotais;
calcularTotais = function() {
    calcularTotaisOriginal();
    if (document.getElementById('gerarFinanceiro').checked) {
        gerarParcelas();
    }
};

// Adicionar primeira linha ao carregar
document.addEventListener('DOMContentLoaded', function() {
    adicionarItem();
    
    // Enter para pesquisar
    document.getElementById('buscaProduto').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            pesquisarProduto();
        }
    });
    
    document.getElementById('buscaPessoa').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            pesquisarPessoa();
        }
    });
});
</script>
{% endblock %}