{% extends "base.html" %}

{% block title %}Importar XML de Entrada - Fiscal{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col">
            <h2><i class="bi bi-upload"></i> Importar XML de Entrada</h2>
            <p class="text-muted">Importe XMLs de notas recebidas de fornecedores</p>
        </div>
        <div class="col-auto">
            <a href="{{ url_for('fiscal_gerenciar_xmls', direcao='entrada') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> Voltar
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0"><i class="bi bi-file-earmark-arrow-up"></i> Upload de XML</h5>
                </div>
                <div class="card-body">
                    <form id="formImportarXml" enctype="multipart/form-data">
                        <div class="mb-4">
                            <label class="form-label fw-bold">Arquivo XML</label>
                            <input type="file" class="form-control form-control-lg" 
                                   id="arquivo_xml" name="arquivo_xml" 
                                   accept=".xml" required>
                            <div class="form-text">
                                Selecione o arquivo XML da nota fiscal recebida (NF-e ou NFC-e)
                            </div>
                        </div>
                        
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-success btn-lg">
                                <i class="bi bi-cloud-upload"></i> Importar XML
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Dicas -->
            <div class="card mt-4">
                <div class="card-header bg-light">
                    <h6 class="mb-0"><i class="bi bi-lightbulb"></i> Dicas</h6>
                </div>
                <div class="card-body">
                    <ul class="mb-0">
                        <li>O XML será validado automaticamente</li>
                        <li>A chave de acesso será extraída do arquivo</li>
                        <li>XMLs duplicados serão rejeitados</li>
                        <li>Aceita NF-e (modelo 55) e NFC-e (modelo 65)</li>
                        <li>O arquivo será organizado por ano/mês automaticamente</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <!-- Resultado da importação -->
            <div id="resultadoImportacao" class="d-none">
                <div class="card">
                    <div class="card-header" id="resultadoHeader">
                        <h5 class="mb-0" id="resultadoTitulo"></h5>
                    </div>
                    <div class="card-body" id="resultadoBody">
                    </div>
                </div>
            </div>
            
            <!-- Preview do XML -->
            <div id="previewXml" class="d-none">
                <div class="card">
                    <div class="card-header bg-light">
                        <h6 class="mb-0"><i class="bi bi-eye"></i> Preview do Arquivo</h6>
                    </div>
                    <div class="card-body">
                        <pre id="xmlPreviewContent" style="max-height: 300px; overflow: auto; font-size: 0.75rem;"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Importação em lote -->
    <div class="card mt-4">
        <div class="card-header bg-light">
            <h5 class="mb-0"><i class="bi bi-files"></i> Importação em Lote (em breve)</h5>
        </div>
        <div class="card-body text-center text-muted py-4">
            <i class="bi bi-hourglass-split" style="font-size: 2rem;"></i>
            <p class="mt-2">Funcionalidade de importação múltipla será implementada em breve.</p>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Preview do arquivo
document.getElementById('arquivo_xml').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const content = e.target.result;
            document.getElementById('xmlPreviewContent').textContent = content.substring(0, 2000) + (content.length > 2000 ? '\n...[truncado]...' : '');
            document.getElementById('previewXml').classList.remove('d-none');
        };
        reader.readAsText(file);
    }
});

// Submissão do formulário
document.getElementById('formImportarXml').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const btn = this.querySelector('button[type="submit"]');
    const btnOriginal = btn.innerHTML;
    
    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Importando...';
    
    try {
        const response = await fetch('/fiscal/importar-xml-entrada', {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        
        const resultado = document.getElementById('resultadoImportacao');
        const header = document.getElementById('resultadoHeader');
        const titulo = document.getElementById('resultadoTitulo');
        const body = document.getElementById('resultadoBody');
        
        resultado.classList.remove('d-none');
        
        if (data.success) {
            header.className = 'card-header bg-success text-white';
            titulo.innerHTML = '<i class="bi bi-check-circle"></i> Importação Concluída!';
            
            const d = data.dados;
            body.innerHTML = `
                <table class="table table-sm">
                    <tr><th>Chave de Acesso:</th><td><code>${d.chave_acesso}</code></td></tr>
                    <tr><th>Número/Série:</th><td>${d.numero}/${d.serie}</td></tr>
                    <tr><th>Tipo:</th><td>${d.tipo_doc}</td></tr>
                    <tr><th>Emitente:</th><td>${d.emitente}</td></tr>
                    <tr><th>CNPJ Emitente:</th><td>${d.cnpj_emitente}</td></tr>
                    <tr><th>Data Emissão:</th><td>${d.data_emissao || 'N/A'}</td></tr>
                    <tr><th>Valor Total:</th><td>R$ ${parseFloat(d.valor_total).toFixed(2)}</td></tr>
                </table>
                <div class="alert alert-success mb-0">
                    <i class="bi bi-folder-check"></i> Arquivo salvo com sucesso!
                </div>
            `;
            
            // Limpar formulário
            this.reset();
            document.getElementById('previewXml').classList.add('d-none');
            
        } else {
            header.className = 'card-header bg-danger text-white';
            titulo.innerHTML = '<i class="bi bi-x-circle"></i> Erro na Importação';
            body.innerHTML = `
                <div class="alert alert-danger mb-0">
                    ${data.message}
                </div>
            `;
        }
        
    } catch (error) {
        alert('Erro na requisição: ' + error);
    } finally {
        btn.disabled = false;
        btn.innerHTML = btnOriginal;
    }
});
</script>
{% endblock %}