{% extends "base.html" %}

{% block title %}Gerar Códigos EAN-13 em Lote{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="fas fa-barcode me-2"></i>Gerar Códigos EAN-13 em Lote</h2>
                <a href="{{ url_for('produtos') }}" class="btn btn-secondary">
                    <i class="fas fa-arrow-left me-1"></i>Voltar para Produtos
                </a>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Informações</h5>
                </div>
                <div class="card-body">
                    <div class="alert alert-info mb-4">
                        <h6 class="alert-heading"><i class="fas fa-lightbulb me-2"></i>O que é EAN-13?</h6>
                        <p class="mb-0">
                            EAN-13 é o padrão internacional de código de barras usado no Brasil. 
                            Esta ferramenta gera códigos internos começando com <strong>2</strong> 
                            (prefixo reservado para uso interno) seguido do ID do produto.
                        </p>
                    </div>

                    <div class="d-flex align-items-center mb-3">
                        <div class="display-4 text-primary me-3">
                            <i class="fas fa-box-open"></i>
                        </div>
                        <div>
                            <h4 class="mb-0 text-primary" id="totalSemCodigo">{{ total_sem_codigo }}</h4>
                            <p class="text-muted mb-0">Produtos sem código de barras</p>
                        </div>
                    </div>

                    {% if total_sem_codigo > 0 %}
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Atenção:</strong> Esta ação irá atribuir códigos EAN-13 a todos os 
                        {{ total_sem_codigo }} produtos que estão sem código de barras.
                    </div>
                    {% else %}
                    <div class="alert alert-success">
                        <i class="fas fa-check-circle me-2"></i>
                        <strong>Parabéns!</strong> Todos os produtos já possuem código de barras.
                    </div>
                    {% endif %}
                </div>
                <div class="card-footer">
                    {% if total_sem_codigo > 0 %}
                    <button type="button" class="btn btn-success btn-lg w-100" id="btnGerarCodigos" onclick="gerarCodigosLote()">
                        <i class="fas fa-magic me-2"></i>Gerar Códigos EAN-13
                    </button>
                    {% else %}
                    <button type="button" class="btn btn-secondary btn-lg w-100" disabled>
                        <i class="fas fa-check me-2"></i>Nenhuma ação necessária
                    </button>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card shadow-sm">
                <div class="card-header bg-secondary text-white">
                    <h5 class="mb-0"><i class="fas fa-list me-2"></i>Resultado da Geração</h5>
                </div>
                <div class="card-body">
                    <div id="resultadoArea" style="display: none;">
                        <div class="alert alert-success mb-3" id="alertSucesso" style="display: none;">
                            <i class="fas fa-check-circle me-2"></i>
                            <span id="mensagemSucesso"></span>
                        </div>
                        
                        <div class="alert alert-danger mb-3" id="alertErro" style="display: none;">
                            <i class="fas fa-times-circle me-2"></i>
                            <span id="mensagemErro"></span>
                        </div>

                        <h6 class="text-muted mb-2">Códigos gerados:</h6>
                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                            <table class="table table-sm table-striped" id="tabelaResultados">
                                <thead class="table-dark sticky-top">
                                    <tr>
                                        <th>ID</th>
                                        <th>Produto</th>
                                        <th>EAN-13</th>
                                    </tr>
                                </thead>
                                <tbody id="resultadosBody">
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div id="placeholderArea">
                        <div class="text-center text-muted py-5">
                            <i class="fas fa-barcode fa-4x mb-3"></i>
                            <p>Clique no botão ao lado para iniciar a geração</p>
                        </div>
                    </div>

                    <div id="loadingArea" style="display: none;">
                        <div class="text-center py-5">
                            <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                                <span class="visually-hidden">Carregando...</span>
                            </div>
                            <p class="mt-3 text-muted">Gerando códigos EAN-13...</p>
                            <p class="text-muted small">Isso pode levar alguns segundos</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Informações sobre o formato EAN-13 -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0"><i class="fas fa-code me-2"></i>Formato do Código EAN-13</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>Estrutura do código:</h6>
                            <pre class="bg-light p-3 rounded"><code>2 XXXXXXXXXXX D
│ └─────┬─────┘ │
│       │       └── Dígito verificador (calculado)
│       └────────── ID do produto (11 dígitos)
└────────────────── Prefixo 2 (uso interno)</code></pre>
                        </div>
                        <div class="col-md-6">
                            <h6>Exemplos:</h6>
                            <table class="table table-sm">
                                <tr>
                                    <th>ID Produto</th>
                                    <th>EAN-13 Gerado</th>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td><code>2000000000017</code></td>
                                </tr>
                                <tr>
                                    <td>42</td>
                                    <td><code>2000000000420</code></td>
                                </tr>
                                <tr>
                                    <td>1234</td>
                                    <td><code>2000000012348</code></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function gerarCodigosLote() {
    const btnGerar = document.getElementById('btnGerarCodigos');
    const resultadoArea = document.getElementById('resultadoArea');
    const placeholderArea = document.getElementById('placeholderArea');
    const loadingArea = document.getElementById('loadingArea');
    const alertSucesso = document.getElementById('alertSucesso');
    const alertErro = document.getElementById('alertErro');
    const mensagemSucesso = document.getElementById('mensagemSucesso');
    const mensagemErro = document.getElementById('mensagemErro');
    const resultadosBody = document.getElementById('resultadosBody');

    // Confirmar ação
    if (!confirm('Deseja gerar códigos EAN-13 para todos os produtos sem código de barras?\n\nEsta ação não pode ser desfeita.')) {
        return;
    }

    // Mostrar loading
    btnGerar.disabled = true;
    btnGerar.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Gerando...';
    placeholderArea.style.display = 'none';
    loadingArea.style.display = 'block';
    resultadoArea.style.display = 'none';

    // Fazer requisição
    fetch('/api/produtos/gerar-ean13-lote', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        loadingArea.style.display = 'none';
        resultadoArea.style.display = 'block';

        if (data.success) {
            alertSucesso.style.display = 'block';
            alertErro.style.display = data.total_erros > 0 ? 'block' : 'none';
            
            mensagemSucesso.textContent = data.message;
            if (data.total_erros > 0) {
                mensagemErro.textContent = `${data.total_erros} erro(s) durante a geração`;
            }

            // Preencher tabela
            resultadosBody.innerHTML = '';
            if (data.codigos_gerados && data.codigos_gerados.length > 0) {
                data.codigos_gerados.forEach(item => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>${item.produto_id}</td>
                        <td>${item.nome}</td>
                        <td><code>${item.ean13}</code></td>
                    `;
                    resultadosBody.appendChild(tr);
                });

                if (data.total_atualizado > 20) {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td colspan="3" class="text-center text-muted">
                            ... e mais ${data.total_atualizado - 20} produtos
                        </td>
                    `;
                    resultadosBody.appendChild(tr);
                }
            }

            // Atualizar contador
            document.getElementById('totalSemCodigo').textContent = '0';
            btnGerar.innerHTML = '<i class="fas fa-check me-2"></i>Concluído!';
            btnGerar.classList.remove('btn-success');
            btnGerar.classList.add('btn-secondary');
        } else {
            alertErro.style.display = 'block';
            alertSucesso.style.display = 'none';
            mensagemErro.textContent = data.error || 'Erro desconhecido';
            btnGerar.disabled = false;
            btnGerar.innerHTML = '<i class="fas fa-magic me-2"></i>Gerar Códigos EAN-13';
        }
    })
    .catch(error => {
        loadingArea.style.display = 'none';
        resultadoArea.style.display = 'block';
        alertErro.style.display = 'block';
        alertSucesso.style.display = 'none';
        mensagemErro.textContent = 'Erro ao comunicar com o servidor: ' + error.message;
        btnGerar.disabled = false;
        btnGerar.innerHTML = '<i class="fas fa-magic me-2"></i>Gerar Códigos EAN-13';
    });
}
</script>
{% endblock %}