{% extends "base.html" %}
{% import 'macros/empresa.html' as empresa_ui %}

{% block title %}XMLs para Contabilidade - CapeSystem{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h2><i class="fa fa-file-code-o"></i> Gerenciar XMLs para Contabilidade</h2>
            <hr>
        </div>
    </div>

    <!-- Formulário de Seleção -->
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">Selecionar Período</h4>
                </div>
                <div class="card-body">
                    <form id="formSelecionarPeriodo">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="empresa_id">Empresa:</label>
                                    <select name="empresa_id" id="empresa_id" class="form-control" required>
                                        <option value="">Selecione...</option>
                                        {% for empresa in empresas %}
                                        <option value="{{ empresa.id }}" {% if empresa_id_selecionada == empresa.id %}selected{% endif %}>
                                            {{ empresa_ui.nome(empresa) }}
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="ano">Ano:</label>
                                    <select name="ano" id="ano" class="form-control" required>
                                        {% for ano in range(2020, 2031) %}
                                        <option value="{{ ano }}" {% if ano == ano_selecionado %}selected{% endif %}>{{ ano }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="mes">Mês:</label>
                                    <select name="mes" id="mes" class="form-control" required>
                                        <option value="1" {% if mes_selecionado == 1 %}selected{% endif %}>Janeiro</option>
                                        <option value="2" {% if mes_selecionado == 2 %}selected{% endif %}>Fevereiro</option>
                                        <option value="3" {% if mes_selecionado == 3 %}selected{% endif %}>Março</option>
                                        <option value="4" {% if mes_selecionado == 4 %}selected{% endif %}>Abril</option>
                                        <option value="5" {% if mes_selecionado == 5 %}selected{% endif %}>Maio</option>
                                        <option value="6" {% if mes_selecionado == 6 %}selected{% endif %}>Junho</option>
                                        <option value="7" {% if mes_selecionado == 7 %}selected{% endif %}>Julho</option>
                                        <option value="8" {% if mes_selecionado == 8 %}selected{% endif %}>Agosto</option>
                                        <option value="9" {% if mes_selecionado == 9 %}selected{% endif %}>Setembro</option>
                                        <option value="10" {% if mes_selecionado == 10 %}selected{% endif %}>Outubro</option>
                                        <option value="11" {% if mes_selecionado == 11 %}selected{% endif %}>Novembro</option>
                                        <option value="12" {% if mes_selecionado == 12 %}selected{% endif %}>Dezembro</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="tipo_doc">Tipo Documento:</label>
                                    <select name="tipo_doc" id="tipo_doc" class="form-control">
                                        <option value="">Todos</option>
                                        <option value="55">NF-e (Modelo 55)</option>
                                        <option value="65">NFC-e (Modelo 65)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="status">Status:</label>
                                    <select name="status" id="status" class="form-control">
                                        <option value="">Todos</option>
                                        <option value="autorizada">Autorizada</option>
                                        <option value="contingencia">Contingência</option>
                                        <option value="cancelada">Cancelada</option>
                                        <option value="denegada">Denegada</option>
                                        <option value="pronta_para_envio">Pronta para Envio</option>
                                        <option value="em_digitacao">Em Digitação</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="button" onclick="buscarXmls()" class="btn btn-primary form-control">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="cfop">CFOP:</label>
                                    <select name="cfop" id="cfop" class="form-control">
                                        <option value="">Todos os CFOPs</option>
                                        <optgroup label="Saídas Estaduais">
                                            <option value="5102">5102 - Venda Merc. Adq. Terceiros</option>
                                            <option value="5405">5405 - Venda ST Consumidor Final</option>
                                            <option value="5403">5403 - Venda ST Industrial/Comercial</option>
                                            <option value="5101">5101 - Venda Prod. Própria</option>
                                            <option value="5929">5929 - Lançamento NFC-e</option>
                                        </optgroup>
                                        <optgroup label="Saídas Interestaduais">
                                            <option value="6102">6102 - Venda Merc. Adq. Terceiros</option>
                                            <option value="6403">6403 - Venda ST Industrial/Comercial</option>
                                            <option value="6101">6101 - Venda Prod. Própria</option>
                                        </optgroup>
                                        <optgroup label="Devoluções">
                                            <option value="5202">5202 - Devolução Compra</option>
                                            <option value="6202">6202 - Devolução Compra Interestadual</option>
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-9">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <p class="form-text text-muted mb-0" style="padding-top: 8px;">
                                        <i class="fa fa-info-circle"></i> 
                                        <strong>Dica:</strong> A contabilidade geralmente precisa dos XMLs separados por tipo (NF-e/NFC-e) e CFOP para apuração fiscal correta.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Estatísticas -->
    <div id="estatisticas" class="row mt-3" style="display: none;">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body text-center">
                    <h2 id="stat-total">0</h2>
                    <p class="mb-0">Total de Arquivos</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body text-center">
                    <h2 id="stat-nfe">0</h2>
                    <p class="mb-0">NF-e</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body text-center">
                    <h2 id="stat-nfce">0</h2>
                    <p class="mb-0">NFC-e</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body text-center">
                    <h2 id="stat-tamanho">0 KB</h2>
                    <p class="mb-0">Tamanho Total</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Lista de XMLs -->
    <div id="listaXmls" class="row mt-3" style="display: none;">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">XMLs do Período</h4>
                    <button id="btnGerarPacote" onclick="gerarPacoteZip()" class="btn btn-success">
                        <i class="fa fa-download"></i> Gerar Pacote ZIP
                    </button>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" id="tabelaXmls">
                            <thead class="table-dark">
                                <tr>
                                    <th width="80" title="Modelo do documento fiscal: NF-e (55) ou NFC-e (65)">Tipo</th>
                                    <th width="80" title="Número da nota fiscal">Número</th>
                                    <th width="80" title="Série da nota fiscal">Série</th>
                                    <th width="80" title="Código Fiscal de Operações e Prestações">CFOP</th>
                                    <th title="Nome do destinatário/cliente">Destinatário</th>
                                    <th width="90" title="Status da nota na SEFAZ">Status</th>
                                    <th width="140" title="Data e hora de emissão">Data Emissão</th>
                                    <th width="110" class="text-end" title="Valor total da nota">Valor (R$)</th>
                                    <th width="60" class="text-center" title="Baixar XML individual">XML</th>
                                </tr>
                            </thead>
                            <tbody id="corpoTabelaXmls">
                                <!-- Preenchido via AJAX -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
var empresaSelecionada = null;
var anoSelecionado = null;
var mesSelecionado = null;
var statusSelecionado = '';
var tipoDocSelecionado = '';
var cfopSelecionado = '';

// Funções globais
function buscarXmls() {
    console.log('buscarXmls chamado');
    empresaSelecionada = document.getElementById('empresa_id').value;
    anoSelecionado = document.getElementById('ano').value;
    mesSelecionado = document.getElementById('mes').value;
    statusSelecionado = document.getElementById('status').value;
    tipoDocSelecionado = document.getElementById('tipo_doc').value;
    cfopSelecionado = document.getElementById('cfop').value;
    
    console.log('Empresa:', empresaSelecionada, 'Ano:', anoSelecionado, 'Mes:', mesSelecionado);
    
    if (!empresaSelecionada || !anoSelecionado || !mesSelecionado) {
        alert('Por favor, preencha todos os campos obrigatórios');
        return;
    }
    
    carregarXmls();
}

function carregarXmls() {
    console.log('carregarXmls chamado');
    // Mostrar loading
    document.getElementById('corpoTabelaXmls').innerHTML = '<tr><td colspan="9" class="text-center"><i class="fa fa-spinner fa-spin"></i> Carregando...</td></tr>';
    document.getElementById('listaXmls').style.display = 'block';
    
    var url = '/fiscal/listar-xmls/' + empresaSelecionada + '/' + anoSelecionado + '/' + mesSelecionado;
    var params = [];
    if (statusSelecionado) params.push('status=' + statusSelecionado);
    if (tipoDocSelecionado) params.push('tipo_doc=' + tipoDocSelecionado);
    if (cfopSelecionado) params.push('cfop=' + cfopSelecionado);
    if (params.length > 0) url += '?' + params.join('&');
    
    console.log('URL:', url);
    
    fetch(url)
        .then(function(response) { return response.json(); })
        .then(function(data) {
            console.log('Resposta:', data);
            if (data.sucesso) {
                exibirEstatisticas(data.estatisticas);
                exibirXmls(data.xmls);
            } else {
                alert('Erro: ' + data.mensagem);
            }
        })
        .catch(function(error) {
            console.log('Erro:', error);
            alert('Erro ao carregar XMLs: ' + error);
        });
}

function exibirEstatisticas(stats) {
    document.getElementById('stat-total').textContent = stats.total_arquivos;
    document.getElementById('stat-nfe').textContent = stats.por_tipo.nfe || 0;
    document.getElementById('stat-nfce').textContent = stats.por_tipo.nfce || 0;
    
    // Converter bytes para KB/MB
    var tamanho = stats.tamanho_total;
    var unidade = 'bytes';
    if (tamanho >= 1024 * 1024) {
        tamanho = (tamanho / (1024 * 1024)).toFixed(2);
        unidade = 'MB';
    } else if (tamanho >= 1024) {
        tamanho = (tamanho / 1024).toFixed(2);
        unidade = 'KB';
    }
    document.getElementById('stat-tamanho').textContent = tamanho + ' ' + unidade;
    
    document.getElementById('estatisticas').style.display = 'flex';
}

function exibirXmls(xmls) {
    var tbody = document.getElementById('corpoTabelaXmls');
    
    if (xmls.length === 0) {
        tbody.innerHTML = '<tr><td colspan="9" class="text-center text-muted">Nenhum XML encontrado com os filtros selecionados</td></tr>';
        return;
    }
    
    var html = '';
    xmls.forEach(function(xml) {
        var badgeTipo = xml.tipo === 'nfe' ? 'bg-success' : 'bg-info';
        var badgeStatus = 'bg-secondary';
        var statusTexto = xml.status || 'N/A';
        
        if (xml.status === 'autorizada') badgeStatus = 'bg-success';
        else if (xml.status === 'contingencia') badgeStatus = 'bg-warning text-dark';
        else if (xml.status === 'cancelada') badgeStatus = 'bg-danger';
        else if (xml.status === 'denegada') badgeStatus = 'bg-dark';
        
        html += '<tr>';
        html += '<td><span class="badge ' + badgeTipo + '">' + xml.tipo.toUpperCase() + '</span></td>';
        html += '<td>' + (xml.numero || '-') + '</td>';
        html += '<td>' + (xml.serie || '1') + '</td>';
        html += '<td>' + (xml.cfop || '-') + '</td>';
        html += '<td>' + (xml.destinatario || 'Consumidor') + '</td>';
        html += '<td><span class="badge ' + badgeStatus + '">' + statusTexto + '</span></td>';
        html += '<td>' + xml.data_emissao + '</td>';
        html += '<td class="text-end">' + (xml.valor ? xml.valor.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2}) : '0,00') + '</td>';
        html += '<td class="text-center">';
        html += '<a href="/fiscal/nota-fiscal/' + xml.id + '/xml" class="btn btn-sm btn-primary" title="Baixar XML"><i class="fa fa-download"></i></a>';
        html += '</td>';
        html += '</tr>';
    });
    
    tbody.innerHTML = html;
}

function gerarPacoteZip() {
    if (!empresaSelecionada || !anoSelecionado || !mesSelecionado) {
        alert('Selecione um período primeiro');
        return;
    }
    
    var btn = document.getElementById('btnGerarPacote');
    btn.disabled = true;
    btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Gerando...';
    
    fetch('/fiscal/gerar-pacote-xml/' + empresaSelecionada + '/' + anoSelecionado + '/' + mesSelecionado, {
        method: 'POST'
    })
    .then(function(response) { return response.json(); })
    .then(function(data) {
        if (data.sucesso) {
            // Criar link de download
            var a = document.createElement('a');
            a.href = data.arquivo;
            a.download = data.arquivo.split('/').pop();
            a.click();
            
            alert('Pacote gerado com sucesso!\\nArquivos: ' + data.total_arquivos);
        } else {
            alert('Erro: ' + data.mensagem);
        }
    })
    .catch(function(error) {
        alert('Erro ao gerar pacote: ' + error);
    })
    .finally(function() {
        btn.disabled = false;
        btn.innerHTML = '<i class="fa fa-download"></i> Gerar Pacote ZIP';
    });
}

// Inicialização quando o DOM estiver pronto
document.addEventListener('DOMContentLoaded', function() {
    // Ler parâmetros da URL
    var urlParams = new URLSearchParams(window.location.search);
    var empresaUrl = urlParams.get('empresa_id');
    var statusUrl = urlParams.get('status');
    var anoUrl = urlParams.get('ano');
    var mesUrl = urlParams.get('mes');
    
    if (statusUrl) {
        document.getElementById('status').value = statusUrl;
        statusSelecionado = statusUrl;
    }
    
    if (empresaUrl) {
        document.getElementById('empresa_id').value = empresaUrl;
        empresaSelecionada = empresaUrl;
    }
    
    if (anoUrl) {
        document.getElementById('ano').value = anoUrl;
        anoSelecionado = anoUrl;
    }
    
    if (mesUrl) {
        document.getElementById('mes').value = mesUrl;
        mesSelecionado = mesUrl;
    } else {
        var mesAtual = new Date().getMonth() + 1;
        document.getElementById('mes').value = mesAtual;
        mesSelecionado = mesAtual;
    }
    
    // Se todos os parâmetros estiverem preenchidos, carregar automaticamente
    if (empresaSelecionada && anoSelecionado && mesSelecionado) {
        carregarXmls();
    }
});
</script>

{% endblock %}