{% extends "base.html" %}

{% block title %}Nota Complementar - Nota {{ nota_original.numero }}/{{ nota_original.serie }}{% endblock %}

{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
.autocomplete-dropdown {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: none;
}
.autocomplete-dropdown.show {
    display: block;
}
.autocomplete-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
}
.autocomplete-item:hover {
    background-color: #f8f9fa;
}
.autocomplete-item .produto-nome {
    font-weight: 500;
}
.autocomplete-item .produto-info {
    font-size: 0.85em;
    color: #666;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-12">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h3><i class="bi bi-plus-square text-info"></i> Nota Fiscal Complementar</h3>
                    <p class="text-muted mb-0">Referência: Nota {{ nota_original.numero }}/{{ nota_original.serie }}</p>
                </div>
                <a href="{{ url_for('fiscal_notas', tipo='NFE') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> Voltar
                </a>
            </div>

            <!-- Alerta sobre configurações tributárias -->
            <div class="alert alert-info alert-dismissible fade show" role="alert">
                <i class="bi bi-info-circle-fill"></i> <strong>Configurações Tributárias Automáticas:</strong><br>
                <small>
                    • Regime: <strong>{{ regime_tributario|upper }}</strong><br>
                    • Alíquota ICMS ({{ uf_empresa }}): <strong>{{ aliq_icms_padrao }}%</strong><br>
                    • PIS: <strong>{{ aliq_pis_padrao }}%</strong> (CST {{ cst_pis_padrao }}) | COFINS: <strong>{{ aliq_cofins_padrao }}%</strong> (CST {{ cst_cofins_padrao }})<br>
                    • Base PIS/COFINS calculada <strong>EXCLUINDO ICMS</strong> (conforme legislação)
                </small>
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>

            <!-- Card com informações da nota original -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <i class="bi bi-file-earmark"></i> Nota Fiscal Original
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <strong>Número/Série:</strong><br>
                            {{ nota_original.numero }}/{{ nota_original.serie }}
                        </div>
                        <div class="col-md-3">
                            <strong>Emissão:</strong><br>
                            {{ nota_original.data_emissao.strftime('%d/%m/%Y') if nota_original.data_emissao else '-' }}
                        </div>
                        <div class="col-md-3">
                            <strong>Cliente:</strong><br>
                            {{ nota_original.pessoa.nome if nota_original.pessoa else 'N/A' }}
                        </div>
                        <div class="col-md-3">
                            <strong>Valor Total:</strong><br>
                            R$ {{ "%.2f"|format(nota_original.valor_total or 0) }}
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-12">
                            <strong>Chave:</strong> <code>{{ nota_original.chave_acesso }}</code>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Avisos SEFAZ -->
            <div class="alert alert-warning border-warning" role="alert">
                <h5><i class="bi bi-exclamation-triangle"></i> Regras da SEFAZ para Nota Complementar</h5>
                <div class="row">
                    <div class="col-md-6">
                        <strong>✅ PODE complementar:</strong>
                        <ul class="mb-0">
                            <li>Diferença de preço/valor</li>
                            <li>Diferença de impostos (ICMS, IPI, PIS, COFINS)</li>
                            <li>Diferença de frete, seguro ou despesas</li>
                            <li>Base de cálculo de tributos</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <strong>🚫 NÃO PODE alterar:</strong>
                        <ul class="mb-0">
                            <li>Produto (descrição/NCM)</li>
                            <li>Quantidade original</li>
                            <li>CFOP de saída</li>
                            <li>Destinatário</li>
                        </ul>
                    </div>
                </div>
                <div class="mt-2">
                    <small class="text-muted">
                        <i class="bi bi-info-circle"></i> A nota será gerada com <strong>finNFe=2</strong> e CFOP <strong>5929/6929</strong> (complemento)
                    </small>
                </div>
            </div>

            <!-- Formulário -->
            <div class="card">
                <div class="card-header bg-success text-white">
                    <i class="bi bi-pencil-square"></i> Dados da Nota Complementar
                </div>
                <div class="card-body">
                    <form id="formNotaComplementar">
                        <!-- Tipo de complemento -->
                        <div class="mb-3">
                            <label class="form-label">
                                <strong>Tipo de Complemento <span class="text-danger">*</span></strong>
                                <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" 
                                   title="Define a natureza do complemento e quais campos serão obrigatórios"></i>
                            </label>
                            <select class="form-select" id="tipo_complemento" required>
                                <option value="">Selecione...</option>
                                <option value="imposto" selected>Diferença de Impostos (ICMS, IPI, PIS, COFINS)</option>
                                <option value="valor">Diferença de Valor/Preço</option>
                                <option value="base_calculo">Complemento de Base de Cálculo</option>
                                <option value="frete_despesas">Frete, Seguro ou Despesas Acessórias</option>
                            </select>
                        </div>
                                <option value="quantidade">Complemento de Quantidade</option>
                                <option value="mercadoria">Mercadoria Não Incluída</option>
                            </select>
                        </div>

                        <!-- Motivo -->
                        <div class="mb-3">
                            <label for="motivo" class="form-label"><strong>Motivo do Complemento <span class="text-danger">*</span></strong></label>
                            <textarea 
                                class="form-control" 
                                id="motivo" 
                                rows="3" 
                                required
                                minlength="15"
                                placeholder="Descreva o motivo da emissão da nota complementar (mínimo 15 caracteres)"></textarea>
                        </div>

                        <!-- Tabela de itens -->
                        <div class="mb-3">
                            <label class="form-label"><strong>Itens do Complemento <span class="text-danger">*</span></strong></label>
                            <div class="table-responsive">
                                <!-- Campo de busca de produto -->
                                <div class="row mb-3">
                                    <div class="col-md-5">
                                        <label class="form-label">Buscar Produto</label>
                                        <div style="position: relative;">
                                            <input type="text" class="form-control" id="buscaProduto" 
                                                   placeholder="Digite nome, código ou código de barras..."
                                                   autocomplete="off">
                                            <div id="produtoDropdown" class="autocomplete-dropdown"></div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Quantidade</label>
                                        <input type="number" class="form-control" id="quantidadeProduto" 
                                               value="1" min="0.01" step="0.01">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">Valor Unit.</label>
                                        <input type="number" class="form-control" id="valorUnitarioProduto" 
                                               step="0.01" min="0" value="">
                                    </div>
                                    <div class="col-md-2">
                                        <label class="form-label">
                                            CFOP <i class="bi bi-info-circle text-muted" data-bs-toggle="tooltip" 
                                                    title="CFOP automático: 5929 (dentro UF) ou 6929 (fora UF)"></i>
                                        </label>
                                        <input type="text" class="form-control bg-light" id="cfopProduto" 
                                               value="5929/6929" readonly>
                                    </div>
                                    <div class="col-md-1">
                                        <label class="form-label">&nbsp;</label>
                                        <button type="button" class="btn btn-primary w-100" onclick="adicionarProdutoSelecionado()" id="btnAddProduto" disabled>
                                            <i class="bi bi-plus"></i>
                                        </button>
                                    </div>
                                </div>
                                
                                <table class="table table-bordered" id="tabelaItens">
                                    <thead class="table-light">
                                        <tr>
                                            <th style="width: 5%">#</th>
                                            <th style="width: 40%">Produto</th>
                                            <th style="width: 10%">NCM</th>
                                            <th style="width: 12%">Quantidade</th>
                                            <th style="width: 12%">Valor Unit.</th>
                                            <th style="width: 12%">Valor Total</th>
                                            <th style="width: 8%">CFOP</th>
                                            <th style="width: 3%"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="itensBody">
                                        <!-- Itens serão adicionados aqui via JavaScript -->
                                    </tbody>
                                    <tfoot>
                                        <tr class="table-secondary">
                                            <td colspan="5" class="text-end"><strong>Total Produtos:</strong></td>
                                            <td><strong>R$ <span id="totalGeral">0,00</span></strong></td>
                                            <td colspan="2"></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            
                            <!-- ==================== BLOCO DE IMPOSTOS COMPLEMENTARES ==================== -->
                            <div class="card bg-light mt-4" id="blocoImpostos">
                                <div class="card-header bg-warning text-dark">
                                    <h5 class="mb-0"><i class="bi bi-calculator"></i> Impostos Complementares</h5>
                                    <small>Valores complementares de impostos sobre a nota original</small>
                                </div>
                                <div class="card-body">
                                    <!-- ICMS -->
                                    <div class="card mb-3">
                                        <div class="card-header bg-primary text-white">
                                            <strong>ICMS - Imposto sobre Circulação de Mercadorias</strong>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label class="form-label">CST/CSOSN</label>
                                                    <select class="form-select" id="icms_cst">
                                                        <option value="90">90 - Outros</option>
                                                        <option value="00">00 - Tributada Integralmente</option>
                                                        <option value="10">10 - Tributada com ST</option>
                                                        <option value="20">20 - Redução de BC</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Base de Cálculo ICMS</label>
                                                    <input type="number" class="form-control" id="icms_base" 
                                                           step="0.01" min="0" value="0.00" onchange="calcularICMS()">
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Alíquota ICMS (%)</label>
                                                    <input type="number" class="form-control" id="icms_aliquota" 
                                                           step="0.01" min="0" max="100" value="{{ aliq_icms_padrao|default(18.00) }}" onchange="calcularICMS()">
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Valor ICMS Complementar</label>
                                                    <input type="number" class="form-control bg-light" id="icms_valor" 
                                                           step="0.01" min="0" value="0.00" readonly>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- IPI -->
                                    <div class="card mb-3" id="blocoIPI" style="display:none;">
                                        <div class="card-header bg-info text-white">
                                            <strong>IPI - Imposto sobre Produtos Industrializados</strong>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label class="form-label">Base de Cálculo IPI</label>
                                                    <input type="number" class="form-control" id="ipi_base" 
                                                           step="0.01" min="0" value="0.00" onchange="calcularIPI()">
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label">Alíquota IPI (%)</label>
                                                    <input type="number" class="form-control" id="ipi_aliquota" 
                                                           step="0.01" min="0" max="100" value="0.00" onchange="calcularIPI()">
                                                </div>
                                                <div class="col-md-4">
                                                    <label class="form-label">Valor IPI Complementar</label>
                                                    <input type="number" class="form-control bg-light" id="ipi_valor" 
                                                           step="0.01" min="0" value="0.00" readonly>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- PIS -->
                                    <div class="card mb-3">
                                        <div class="card-header bg-success text-white">
                                            <strong>PIS - Programa de Integração Social</strong>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label class="form-label">CST PIS</label>
                                                    <select class="form-select" id="pis_cst">
                                                        <option value="01" {% if cst_pis_padrao == '01' %}selected{% endif %}>01 - Operação Tributável - Alíquota Básica</option>
                                                        <option value="02">02 - Operação Tributável - Alíquota Diferenciada</option>
                                                        <option value="03">03 - Operação Tributável - Alíquota por Unidade</option>
                                                        <option value="04">04 - Operação Tributável Monofásica - Revenda a Alíquota Zero</option>
                                                        <option value="05">05 - Operação Tributável por Substituição Tributária</option>
                                                        <option value="06">06 - Operação Tributável a Alíquota Zero</option>
                                                        <option value="07">07 - Operação Isenta da Contribuição</option>
                                                        <option value="08">08 - Operação sem Incidência da Contribuição</option>
                                                        <option value="09">09 - Operação com Suspensão da Contribuição</option>
                                                        <option value="49">49 - Outras Operações de Saída</option>
                                                        <option value="50">50 - Operação com Direito a Crédito - Vinculada Exclusivamente a Receita Tributada</option>
                                                        <option value="51">51 - Operação com Direito a Crédito - Vinculada Exclusivamente a Receita Não Tributada</option>
                                                        <option value="52">52 - Operação com Direito a Crédito - Vinculada Exclusivamente a Receita de Exportação</option>
                                                        <option value="53">53 - Operação com Direito a Crédito - Vinculada a Receitas Tributadas e Não-Tributadas</option>
                                                        <option value="54">54 - Operação com Direito a Crédito - Vinculada a Receitas Tributadas e de Exportação</option>
                                                        <option value="55">55 - Operação com Direito a Crédito - Vinculada a Receitas Não-Tributadas e de Exportação</option>
                                                        <option value="56">56 - Operação com Direito a Crédito - Vinculada a Receitas Tributadas, Não-Tributadas e de Exportação</option>
                                                        <option value="60">60 - Crédito Presumido - Operação de Aquisição Vinculada a Receita Tributada</option>
                                                        <option value="61">61 - Crédito Presumido - Operação de Aquisição Vinculada a Receita Não-Tributada</option>
                                                        <option value="62">62 - Crédito Presumido - Operação de Aquisição Vinculada a Receita de Exportação</option>
                                                        <option value="63">63 - Crédito Presumido - Operação de Aquisição Vinculada a Receitas Tributadas e Não-Tributadas</option>
                                                        <option value="64">64 - Crédito Presumido - Operação de Aquisição Vinculada a Receitas Tributadas e de Exportação</option>
                                                        <option value="65">65 - Crédito Presumido - Operação de Aquisição Vinculada a Receitas Não-Tributadas e de Exportação</option>
                                                        <option value="66">66 - Crédito Presumido - Operação de Aquisição Vinculada a Todas as Receitas</option>
                                                        <option value="67">67 - Crédito Presumido - Outras Operações</option>
                                                        <option value="70">70 - Operação de Aquisição sem Direito a Crédito</option>
                                                        <option value="71">71 - Operação de Aquisição com Isenção</option>
                                                        <option value="72">72 - Operação de Aquisição com Suspensão</option>
                                                        <option value="73">73 - Operação de Aquisição a Alíquota Zero</option>
                                                        <option value="74">74 - Operação de Aquisição sem Incidência da Contribuição</option>
                                                        <option value="75">75 - Operação de Aquisição por Substituição Tributária</option>
                                                        <option value="98">98 - Outras Operações de Entrada</option>
                                                        <option value="99">99 - Outras Operações</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Base de Cálculo PIS</label>
                                                    <input type="number" class="form-control" id="pis_base" 
                                                           step="0.01" min="0" value="0.00" onchange="calcularPIS()">
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Alíquota PIS (%)</label>
                                                    <input type="number" class="form-control" id="pis_aliquota" 
                                                           step="0.01" min="0" max="100" value="{{ aliq_pis_padrao|default(1.65) }}" onchange="calcularPIS()">
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Valor PIS Complementar</label>
                                                    <input type="number" class="form-control bg-light" id="pis_valor" 
                                                           step="0.01" min="0" value="0.00" readonly>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- COFINS -->
                                    <div class="card mb-3">
                                        <div class="card-header bg-danger text-white">
                                            <strong>COFINS - Contribuição para Financiamento da Seguridade Social</strong>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <label class="form-label">CST COFINS</label>
                                                    <select class="form-select" id="cofins_cst">
                                                        <option value="01" {% if cst_cofins_padrao == '01' %}selected{% endif %}>01 - Operação Tributável - Alíquota Básica</option>
                                                        <option value="02">02 - Operação Tributável - Alíquota Diferenciada</option>
                                                        <option value="03">03 - Operação Tributável - Alíquota por Unidade</option>
                                                        <option value="04">04 - Operação Tributável Monofásica - Revenda a Alíquota Zero</option>
                                                        <option value="05">05 - Operação Tributável por Substituição Tributária</option>
                                                        <option value="06">06 - Operação Tributável a Alíquota Zero</option>
                                                        <option value="07">07 - Operação Isenta da Contribuição</option>
                                                        <option value="08">08 - Operação sem Incidência da Contribuição</option>
                                                        <option value="09">09 - Operação com Suspensão da Contribuição</option>
                                                        <option value="49" {% if cst_cofins_padrao == '49' %}selected{% endif %}>49 - Outras Operações de Saída</option>
                                                        <option value="50">50 - Operação com Direito a Crédito - Vinculada Exclusivamente a Receita Tributada</option>
                                                        <option value="51">51 - Operação com Direito a Crédito - Vinculada Exclusivamente a Receita Não Tributada</option>
                                                        <option value="52">52 - Operação com Direito a Crédito - Vinculada Exclusivamente a Receita de Exportação</option>
                                                        <option value="53">53 - Operação com Direito a Crédito - Vinculada a Receitas Tributadas e Não-Tributadas</option>
                                                        <option value="54">54 - Operação com Direito a Crédito - Vinculada a Receitas Tributadas e de Exportação</option>
                                                        <option value="55">55 - Operação com Direito a Crédito - Vinculada a Receitas Não-Tributadas e de Exportação</option>
                                                        <option value="56">56 - Operação com Direito a Crédito - Vinculada a Receitas Tributadas, Não-Tributadas e de Exportação</option>
                                                        <option value="60">60 - Crédito Presumido - Operação de Aquisição Vinculada a Receita Tributada</option>
                                                        <option value="61">61 - Crédito Presumido - Operação de Aquisição Vinculada a Receita Não-Tributada</option>
                                                        <option value="62">62 - Crédito Presumido - Operação de Aquisição Vinculada a Receita de Exportação</option>
                                                        <option value="63">63 - Crédito Presumido - Operação de Aquisição Vinculada a Receitas Tributadas e Não-Tributadas</option>
                                                        <option value="64">64 - Crédito Presumido - Operação de Aquisição Vinculada a Receitas Tributadas e de Exportação</option>
                                                        <option value="65">65 - Crédito Presumido - Operação de Aquisição Vinculada a Receitas Não-Tributadas e de Exportação</option>
                                                        <option value="66">66 - Crédito Presumido - Operação de Aquisição Vinculada a Todas as Receitas</option>
                                                        <option value="67">67 - Crédito Presumido - Outras Operações</option>
                                                        <option value="70">70 - Operação de Aquisição sem Direito a Crédito</option>
                                                        <option value="71">71 - Operação de Aquisição com Isenção</option>
                                                        <option value="72">72 - Operação de Aquisição com Suspensão</option>
                                                        <option value="73">73 - Operação de Aquisição a Alíquota Zero</option>
                                                        <option value="74">74 - Operação de Aquisição sem Incidência da Contribuição</option>
                                                        <option value="75">75 - Operação de Aquisição por Substituição Tributária</option>
                                                        <option value="98">98 - Outras Operações de Entrada</option>
                                                        <option value="99">99 - Outras Operações</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Base de Cálculo COFINS</label>
                                                    <input type="number" class="form-control" id="cofins_base" 
                                                           step="0.01" min="0" value="0.00" onchange="calcularCOFINS()">
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Alíquota COFINS (%)</label>
                                                    <input type="number" class="form-control" id="cofins_aliquota" 
                                                           step="0.01" min="0" max="100" value="{{ aliq_cofins_padrao|default(7.60) }}" onchange="calcularCOFINS()">
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label">Valor COFINS Complementar</label>
                                                    <input type="number" class="form-control bg-light" id="cofins_valor" 
                                                           step="0.01" min="0" value="0.00" readonly>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- PREPARAÇÃO REFORMA TRIBUTÁRIA (oculto) -->
                                    <div class="card mb-3" id="blocoReformaTributaria" style="display:none;">
                                        <div class="card-header bg-secondary text-white">
                                            <strong>Reforma Tributária (CBS/IBS) - 2026-2032</strong>
                                            <small class="d-block">Campos preparados para transição (não enviados ao XML atual)</small>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <h6>CBS - Contribuição sobre Bens e Serviços</h6>
                                                    <div class="mb-2">
                                                        <label class="form-label">Base CBS</label>
                                                        <input type="number" class="form-control" id="cbs_base" step="0.01" value="0.00" disabled>
                                                    </div>
                                                    <div class="mb-2">
                                                        <label class="form-label">Alíquota CBS (%)</label>
                                                        <input type="number" class="form-control" id="cbs_aliquota" step="0.01" value="8.80" disabled>
                                                    </div>
                                                    <div class="mb-2">
                                                        <label class="form-label">Valor CBS</label>
                                                        <input type="number" class="form-control bg-light" id="cbs_valor" step="0.01" value="0.00" readonly disabled>
                                                    </div>
                                                </div>
                                                <div class="col-md-6">
                                                    <h6>IBS - Imposto sobre Bens e Serviços</h6>
                                                    <div class="mb-2">
                                                        <label class="form-label">Base IBS</label>
                                                        <input type="number" class="form-control" id="ibs_base" step="0.01" value="0.00" disabled>
                                                    </div>
                                                    <div class="mb-2">
                                                        <label class="form-label">Alíquota IBS (%)</label>
                                                        <input type="number" class="form-control" id="ibs_aliquota" step="0.01" value="17.70" disabled>
                                                    </div>
                                                    <div class="mb-2">
                                                        <label class="form-label">Valor IBS</label>
                                                        <input type="number" class="form-control bg-light" id="ibs_valor" step="0.01" value="0.00" readonly disabled>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Resumo Total -->
                                    <div class="card bg-dark text-white">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <small>Total ICMS:</small>
                                                    <h5 id="resumo_icms">R$ 0,00</h5>
                                                </div>
                                                <div class="col-md-3">
                                                    <small>Total PIS:</small>
                                                    <h5 id="resumo_pis">R$ 0,00</h5>
                                                </div>
                                                <div class="col-md-3">
                                                    <small>Total COFINS:</small>
                                                    <h5 id="resumo_cofins">R$ 0,00</h5>
                                                </div>
                                                <div class="col-md-3">
                                                    <small>Total Impostos Complementares:</small>
                                                    <h5 id="resumo_total_impostos">R$ 0,00</h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Botões -->
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                            <button type="button" class="btn btn-secondary" onclick="window.history.back()">
                                <i class="bi bi-x-circle"></i> Cancelar
                            </button>
                            <button type="submit" class="btn btn-success" id="btnGerar">
                                <i class="bi bi-file-earmark-plus"></i> Gerar Nota Complementar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Garantir que todo código JavaScript execute após o DOM e SweetAlert2 estarem prontos
document.addEventListener('DOMContentLoaded', function() {
let numeroItem = 1;
let produtoSelecionado = null;

// Event listener para tipo de complemento
const tipoComplemento = document.getElementById('tipo_complemento');
if (tipoComplemento) {
    tipoComplemento.addEventListener('change', alterarTipoComplemento);
    // Executar ao carregar para configurar estado inicial
    alterarTipoComplemento();
}

// Buscar produtos via API
function buscarProdutos() {
    const input = document.getElementById('buscaProduto');
    const dropdown = document.getElementById('produtoDropdown');
    
    if (!input || !dropdown) return;
    
    const termo = (input.value || '').trim();
    if (termo.length < 2) {
        dropdown.classList.remove('show');
        return;
    }
    
    dropdown.innerHTML = '<div class="p-3 text-muted text-center"><i class="bi bi-hourglass-split"></i> Buscando...</div>';
    dropdown.classList.add('show');
    
    const url = `/api/produtos/buscar?q=${encodeURIComponent(termo)}&limite=10`;
    
    fetch(url, { credentials: 'same-origin' })
        .then(response => response.json())
        .then(data => {
            const produtos = Array.isArray(data) ? data : [];
            if (produtos.length === 0) {
                dropdown.innerHTML = '<div class="p-3 text-muted text-center">Nenhum produto encontrado</div>';
                return;
            }
            
            dropdown.innerHTML = produtos.map(p => {
                const nome = p.nome || '';
                const codigo = p.codigo || '';
                const ean = p.ean || '';
                const preco = Number(p.preco || 0);
                const ncm = p.ncm || '00000000';
                
                const infoPartes = [];
                if (codigo) infoPartes.push('Cód: ' + codigo);
                if (ean) infoPartes.push('EAN: ' + ean);
                if (ncm) infoPartes.push('NCM: ' + ncm);
                infoPartes.push('<strong class="text-success">R$ ' + preco.toFixed(2) + '</strong>');
                
                return `
                    <div class="autocomplete-item" onclick='selecionarProduto(${JSON.stringify(p)})'>
                        <div class="produto-nome">${nome}</div>
                        <div class="produto-info">${infoPartes.join(' | ')}</div>
                    </div>
                `;
            }).join('');
        })
        .catch(err => {
            console.error('Erro ao buscar produtos:', err);
            dropdown.innerHTML = '<div class="p-3 text-muted text-center">Erro ao buscar produtos</div>';
        });
}

// Selecionar produto do autocomplete
function selecionarProduto(produto) {
    produtoSelecionado = produto;
    document.getElementById('buscaProduto').value = produto.nome;
    document.getElementById('valorUnitarioProduto').value = (produto.preco || 0).toFixed(2);
    document.getElementById('produtoDropdown').classList.remove('show');
    document.getElementById('btnAddProduto').disabled = false;
    document.getElementById('quantidadeProduto').focus();
}

// Adicionar produto selecionado à tabela
function adicionarProdutoSelecionado() {
    if (!produtoSelecionado) return;
    
    const quantidade = parseFloat(document.getElementById('quantidadeProduto').value) || 1;
    const valorUnitario = parseFloat(document.getElementById('valorUnitarioProduto').value) || 0;
    const valorTotal = quantidade * valorUnitario;
    
    const tbody = document.getElementById('itensBody');
    const row = tbody.insertRow();
    row.id = `item-${numeroItem}`;
    
    row.innerHTML = `
        <td class="text-center">${numeroItem}</td>
        <td>
            <input type="hidden" name="produto_id" value="${produtoSelecionado.id || ''}">
            <input type="hidden" name="codigo" value="${produtoSelecionado.codigo || ''}">
            <input type="text" class="form-control form-control-sm" name="descricao" value="${produtoSelecionado.nome}" required>
        </td>
        <td>
            <input type="text" class="form-control form-control-sm bg-light" name="ncm" value="${produtoSelecionado.ncm || '00000000'}" maxlength="8" readonly>
        </td>
        <td>
            <input type="number" class="form-control form-control-sm" name="quantidade" step="0.01" min="0.01" value="${quantidade}" 
                   onchange="calcularTotal(${numeroItem})" required>
        </td>
        <td>
            <input type="number" class="form-control form-control-sm" name="valor_unitario" step="0.01" min="0.01" value="${valorUnitario.toFixed(2)}" 
                   onchange="calcularTotal(${numeroItem})" required>
        </td>
        <td>
            <input type="number" class="form-control form-control-sm bg-light" name="valor_total" step="0.01" value="${valorTotal.toFixed(2)}" readonly>
        </td>
        <td>
            <input type="text" class="form-control form-control-sm bg-light text-center" name="cfop" value="AUTO" readonly title="CFOP automático: 5929 ou 6929">
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-sm btn-danger" onclick="removerItem(${numeroItem})">
                <i class="bi bi-trash"></i>
            </button>
        </td>
    `;
    
    numeroItem++;
    calcularTotalGeral();
    
    // Limpar campos
    document.getElementById('buscaProduto').value = '';
    document.getElementById('quantidadeProduto').value = '1';
    document.getElementById('valorUnitarioProduto').value = '';
    document.getElementById('btnAddProduto').disabled = true;
    produtoSelecionado = null;
    document.getElementById('buscaProduto').focus();
}

// Remover item da tabela
function removerItem(id) {
    const row = document.getElementById(`item-${id}`);
    if (row) {
        row.remove();
        calcularTotalGeral();
    }
}

// Calcular total de um item
function calcularTotal(id) {
    const row = document.getElementById(`item-${id}`);
    if (!row) return;
    
    const qtd = parseFloat(row.querySelector('[name="quantidade"]').value) || 0;
    const valorUnit = parseFloat(row.querySelector('[name="valor_unitario"]').value) || 0;
    const total = qtd * valorUnit;
    
    row.querySelector('[name="valor_total"]').value = total.toFixed(2);
    calcularTotalGeral();
}

// Calcular total geral
function calcularTotalGeral() {
    const tbody = document.getElementById('itensBody');
    let total = 0;
    
    tbody.querySelectorAll('tr').forEach(row => {
        const valorTotal = parseFloat(row.querySelector('[name="valor_total"]').value) || 0;
        total += valorTotal;
    });
    
    document.getElementById('totalGeral').textContent = total.toFixed(2).replace('.', ',');
    
    // Auto-preencher bases de impostos se estiver em modo imposto
    const tipoComplemento = document.getElementById('tipo_complemento').value;
    if (tipoComplemento === 'imposto' || tipoComplemento === 'base_calculo') {
        // Base de ICMS = valor total dos produtos
        document.getElementById('icms_base').value = total.toFixed(2);
        calcularICMS();
        
        // IMPORTANTE: Base de PIS/COFINS = Valor Total - ICMS
        // Pois PIS/COFINS não podem incluir ICMS na base de cálculo
        const valorICMS = parseFloat(document.getElementById('icms_valor').value) || 0;
        const basePisCofins = total - valorICMS;
        
        document.getElementById('pis_base').value = basePisCofins.toFixed(2);
        document.getElementById('cofins_base').value = basePisCofins.toFixed(2);
        
        calcularPIS();
        calcularCOFINS();
    }
}

// ==================== FUNÇÕES DE CÁLCULO DE IMPOSTOS ====================

function calcularICMS() {
    const base = parseFloat(document.getElementById('icms_base').value) || 0;
    const aliquota = parseFloat(document.getElementById('icms_aliquota').value) || 0;
    const valor = (base * aliquota / 100);
    
    document.getElementById('icms_valor').value = valor.toFixed(2);
    document.getElementById('resumo_icms').textContent = 'R$ ' + valor.toFixed(2).replace('.', ',');
    
    // Após calcular ICMS, recalcular bases de PIS/COFINS
    const tipoComplemento = document.getElementById('tipo_complemento').value;
    if (tipoComplemento === 'imposto' || tipoComplemento === 'base_calculo') {
        const basePisCofins = base - valor;  // Exclui ICMS da base
        document.getElementById('pis_base').value = basePisCofins.toFixed(2);
        document.getElementById('cofins_base').value = basePisCofins.toFixed(2);
        calcularPIS();
        calcularCOFINS();
    }
    
    atualizarResumoImpostos();
}

function calcularIPI() {
    const base = parseFloat(document.getElementById('ipi_base').value) || 0;
    const aliquota = parseFloat(document.getElementById('ipi_aliquota').value) || 0;
    const valor = (base * aliquota / 100);
    
    document.getElementById('ipi_valor').value = valor.toFixed(2);
    atualizarResumoImpostos();
}

function calcularPIS() {
    const base = parseFloat(document.getElementById('pis_base').value) || 0;
    const aliquota = parseFloat(document.getElementById('pis_aliquota').value) || 0;
    const valor = (base * aliquota / 100);
    
    document.getElementById('pis_valor').value = valor.toFixed(2);
    document.getElementById('resumo_pis').textContent = 'R$ ' + valor.toFixed(2).replace('.', ',');
    atualizarResumoImpostos();
}

function calcularCOFINS() {
    const base = parseFloat(document.getElementById('cofins_base').value) || 0;
    const aliquota = parseFloat(document.getElementById('cofins_aliquota').value) || 0;
    const valor = (base * aliquota / 100);
    
    document.getElementById('cofins_valor').value = valor.toFixed(2);
    document.getElementById('resumo_cofins').textContent = 'R$ ' + valor.toFixed(2).replace('.', ',');
    atualizarResumoImpostos();
}

function atualizarResumoImpostos() {
    const icms = parseFloat(document.getElementById('icms_valor').value) || 0;
    const ipi = parseFloat(document.getElementById('ipi_valor').value) || 0;
    const pis = parseFloat(document.getElementById('pis_valor').value) || 0;
    const cofins = parseFloat(document.getElementById('cofins_valor').value) || 0;
    
    const total = icms + ipi + pis + cofins;
    document.getElementById('resumo_total_impostos').textContent = 'R$ ' + total.toFixed(2).replace('.', ',');
}

// Alterar tipo de complemento (mostra/oculta blocos)
function alterarTipoComplemento() {
    const tipo = document.getElementById('tipo_complemento').value;
    const blocoImpostos = document.getElementById('blocoImpostos');
    const blocoIPI = document.getElementById('blocoIPI');
    
    // Lógica de exibição baseada no tipo
    switch(tipo) {
        case 'imposto':
        case 'base_calculo':
            blocoImpostos.style.display = 'block';
            blocoIPI.style.display = 'block';
            break;
        case 'valor':
            blocoImpostos.style.display = 'block';
            blocoIPI.style.display = 'none';
            break;
        case 'frete_despesas':
            blocoImpostos.style.display = 'block';
            blocoIPI.style.display = 'none';
            break;
        default:
            blocoImpostos.style.display = 'none';
    }
}

// Expor funções para handlers inline (onclick/onchange no HTML)
window.selecionarProduto = selecionarProduto;
window.adicionarProdutoSelecionado = adicionarProdutoSelecionado;
window.removerItem = removerItem;
window.calcularTotal = calcularTotal;
window.calcularTotalGeral = calcularTotalGeral;
window.calcularICMS = calcularICMS;
window.calcularIPI = calcularIPI;
window.calcularPIS = calcularPIS;
window.calcularCOFINS = calcularCOFINS;
window.alterarTipoComplemento = alterarTipoComplemento;

// Debounce para otimizar busca
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// ===== CONFIGURAR EVENT LISTENERS PARA BUSCA DE PRODUTOS =====
const buscaProduto = document.getElementById('buscaProduto');
if (buscaProduto) {
    buscaProduto.addEventListener('input', debounce(buscarProdutos, 300));
    buscaProduto.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            e.preventDefault();
            if (produtoSelecionado) {
                adicionarProdutoSelecionado();
            }
        }
    });
}

// Fechar dropdown ao clicar fora
document.addEventListener('click', function(e) {
    const dropdown = document.getElementById('produtoDropdown');
    const input = document.getElementById('buscaProduto');
    if (dropdown && input && !dropdown.contains(e.target) && e.target !== input) {
        dropdown.classList.remove('show');
    }
});

// ===== ENVIO DO FORMULÁRIO =====
const formNotaComplementar = document.getElementById('formNotaComplementar');
if (formNotaComplementar) {
    formNotaComplementar.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const tipo = document.getElementById('tipo_complemento').value;
        const motivo = document.getElementById('motivo').value.trim();
        
        if (!tipo || motivo.length < 15) {
            Swal.fire({
                icon: 'error',
                title: 'Erro',
                text: 'Preencha todos os campos obrigatórios!'
            });
            return;
        }
        
        // Coletar itens
        const itens = [];
        const tbody = document.getElementById('itensBody');
    
    tbody.querySelectorAll('tr').forEach((row, index) => {
        const produtoId = row.querySelector('[name="produto_id"]')?.value || null;
        const codigo = row.querySelector('[name="codigo"]')?.value || '';
        const descricao = row.querySelector('[name="descricao"]')?.value || '';
        const ncm = row.querySelector('[name="ncm"]')?.value || '00000000';
        const quantidade = parseFloat(row.querySelector('[name="quantidade"]')?.value || 0);
        const valorUnitario = parseFloat(row.querySelector('[name="valor_unitario"]')?.value || 0);
        const valorTotal = parseFloat(row.querySelector('[name="valor_total"]')?.value || 0);
        const icmsValor = parseFloat(row.querySelector('[name="icms_valor"]')?.value || 0);
        const cfop = row.querySelector('[name="cfop"]')?.value || '5929';
        
        // Validar item
        if (!descricao || quantidade <= 0 || valorUnitario <= 0) {
            return; // Pula este item
        }
        
        itens.push({
            numero_item: index + 1,
            produto_id: produtoId,
            codigo: codigo,
            descricao: descricao,
            ncm: ncm,
            unidade: 'UN',
            quantidade: quantidade,
            valor_unitario: valorUnitario,
            valor_total: valorTotal,
            icms_valor: icmsValor,
            icms_base_calculo: icmsValor > 0 ? valorTotal : 0,
            icms_aliquota: icmsValor > 0 ? 18 : 0,
            cfop: cfop,
            icms_situacao: '00',
            icms_origem: '0'
        });
    });
    
    if (itens.length === 0) {
        Swal.fire({
            icon: 'error',
            title: 'Erro',
            text: 'Adicione pelo menos um item!'
        });
        return;
    }
    
    const btnGerar = document.getElementById('btnGerar');
    btnGerar.disabled = true;
    btnGerar.innerHTML = '<i class="bi bi-hourglass-split"></i> Gerando...';
    
    // Coletar dados de impostos
    const impostos = {
        icms: {
            cst: document.getElementById('icms_cst').value,
            base_calculo: parseFloat(document.getElementById('icms_base').value) || 0,
            aliquota: parseFloat(document.getElementById('icms_aliquota').value) || 0,
            valor: parseFloat(document.getElementById('icms_valor').value) || 0
        },
        ipi: {
            base_calculo: parseFloat(document.getElementById('ipi_base').value) || 0,
            aliquota: parseFloat(document.getElementById('ipi_aliquota').value) || 0,
            valor: parseFloat(document.getElementById('ipi_valor').value) || 0
        },
        pis: {
            cst: document.getElementById('pis_cst').value,
            base_calculo: parseFloat(document.getElementById('pis_base').value) || 0,
            aliquota: parseFloat(document.getElementById('pis_aliquota').value) || 0,
            valor: parseFloat(document.getElementById('pis_valor').value) || 0
        },
        cofins: {
            cst: document.getElementById('cofins_cst').value,
            base_calculo: parseFloat(document.getElementById('cofins_base').value) || 0,
            aliquota: parseFloat(document.getElementById('cofins_aliquota').value) || 0,
            valor: parseFloat(document.getElementById('cofins_valor').value) || 0
        }
    };
    
    fetch('{{ url_for("fiscal_nota_complementar", nota_id=nota_original.id) }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            tipo_complemento: tipo,
            motivo: motivo,
            itens: itens,
            impostos: impostos  // ← Novo: impostos separados
        })
    })
    .then(response => response.json())
    .then(data => {
        btnGerar.disabled = false;
        btnGerar.innerHTML = '<i class="bi bi-file-earmark-plus"></i> Gerar Nota Complementar';
        
        if (data.success) {
            Swal.fire({
                icon: 'success',
                title: 'Sucesso!',
                html: `
                    <p><strong>Nota Complementar criada!</strong></p>
                    <p>Número: ${data.numero}/${data.serie}</p>
                    <p>Chave: <code>${data.chave}</code></p>
                `,
                showDenyButton: true,
                confirmButtonText: 'Imprimir DANFE',
                denyButtonText: 'Voltar',
                confirmButtonColor: '#28a745'
            }).then((result) => {
                if (result.isConfirmed) {
                    window.open(`/fiscal/nota-complementar/${data.nota_id}/imprimir`, '_blank');
                }
                window.location.href = '{{ url_for("fiscal_notas", tipo="NFE") }}';
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Erro',
                text: data.message || 'Erro ao criar nota complementar'
            });
        }
    })
    .catch(error => {
        btnGerar.disabled = false;
        btnGerar.innerHTML = '<i class="bi bi-file-earmark-plus"></i> Gerar Nota Complementar';
        
        Swal.fire({
            icon: 'error',
            title: 'Erro',
            text: 'Erro ao criar nota: ' + error.message
        });
    });
    }); // Fecha formNotaComplementar.addEventListener('submit'
} // Fecha if (formNotaComplementar)

// Fechar DOMContentLoaded principal
});
</script>
{% endblock %}