{% extends "base.html" %}

{% block title %}Etiquetas{% endblock %}

{% block content %}
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center">
        <h1><i class="bi bi-upc-scan"></i> Geração de Etiquetas</h1>
    </div>
</div>

<div class="row">
    <!-- Configuração -->
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi bi-gear"></i> Configurações</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Formato da Etiqueta</label>
                    <select id="formato" class="form-select">
                        <optgroup label="Impressora Térmica (Elgin/Zebra/Argox) - Bobina 100mm">
                            <option value="100x40" selected>100x40mm - Térmica com 2 preços</option>
                            <option value="100x30">100x30mm - Térmica compacta</option>
                        </optgroup>
                        <optgroup label="Impressora Comum (A4)">
                            <option value="33x17">33x17mm - 3 colunas (Código de barras)</option>
                            <option value="50x30">50x30mm - 4 colunas (Padrão)</option>
                            <option value="gondola">110x30mm - Gôndola (Prateleira)</option>
                            <option value="tag60x40">60x40mm - TAG (Com logo)</option>
                        </optgroup>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Tabela de Preço 1</label>
                    <select id="tabela1" class="form-select">
                        <option value="">Preço Padrão do Produto</option>
                        {% for t in tabelas_preco %}
                        <option value="{{ t.id }}">{{ t.nome }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Tabela de Preço 2 <small class="text-muted">(opcional)</small></label>
                    <select id="tabela2" class="form-select">
                        <option value="">Não usar segunda tabela</option>
                        {% for t in tabelas_preco %}
                        <option value="{{ t.id }}">{{ t.nome }}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Buscar Produto</label>
                    <div class="input-group">
                        <input type="text" id="busca_produto" class="form-control" placeholder="Nome ou código...">
                        <button class="btn btn-outline-primary" type="button" id="btn_buscar">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Produtos Disponíveis</label>
                    <select id="lista_produtos" class="form-select" size="8" multiple>
                        {% for p in produtos %}
                        <option value="{{ p.id }}" data-nome="{{ p.nome }}" data-codigo="{{ p.codigo_barras or '' }}" data-preco="{{ p.valor_venda or 0 }}">
                            {{ p.nome }} {% if p.codigo_barras %}({{ p.codigo_barras }}){% endif %}
                        </option>
                        {% endfor %}
                    </select>
                    <small class="text-muted">Dê duplo clique ou selecione e clique em Adicionar</small>
                </div>
                
                <div class="d-grid gap-2">
                    <button class="btn btn-success" id="btn_adicionar">
                        <i class="bi bi-plus-circle"></i> Adicionar Selecionados
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Produtos para Etiqueta -->
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-list-check"></i> Produtos para Etiqueta</h5>
                <span id="total_etiquetas" class="badge bg-light text-dark">0 etiquetas</span>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover" id="tabela_etiquetas">
                        <thead>
                            <tr>
                                <th>Produto</th>
                                <th style="width: 120px;">Código</th>
                                <th style="width: 100px;">Preço</th>
                                <th style="width: 100px;">Qtd</th>
                                <th style="width: 60px;">Ação</th>
                            </tr>
                        </thead>
                        <tbody id="lista_etiquetas">
                            <tr id="linha_vazia">
                                <td colspan="5" class="text-center text-muted py-4">
                                    <i class="bi bi-inbox fs-1"></i>
                                    <p class="mb-0">Nenhum produto adicionado</p>
                                    <small>Selecione produtos à esquerda para gerar etiquetas</small>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-between mt-3">
                    <button class="btn btn-outline-danger" id="btn_limpar">
                        <i class="bi bi-trash"></i> Limpar Lista
                    </button>
                    <div>
                        <button class="btn btn-info me-2" id="btn_visualizar">
                            <i class="bi bi-eye"></i> Visualizar
                        </button>
                        <button class="btn btn-primary" id="btn_gerar">
                            <i class="bi bi-printer"></i> Gerar PDF
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Preview -->
        <div class="card d-none" id="card_preview">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="bi bi-eye"></i> Pré-visualização</h5>
            </div>
            <div class="card-body p-0">
                <iframe id="iframe_preview" style="width: 100%; height: 500px; border: none;"></iframe>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Layout -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalLayouts" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">Exemplos de Formatos de Etiqueta</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <h6>33x17mm - Código de Barras</h6>
                                <div class="border p-2 mb-2" style="width: 99px; height: 51px; margin: 0 auto;">
                                    <small>|||||||||||</small><br>
                                    <small style="font-size: 8px;">123456789012</small>
                                </div>
                                <small class="text-muted">3 por linha - Ideal para etiquetas de código</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <h6>50x30mm - Padrão</h6>
                                <div class="border p-2 mb-2" style="width: 150px; height: 90px; margin: 0 auto;">
                                    <strong style="font-size: 10px;">Nome Produto</strong>
                                    <div>|||||||||||</div>
                                    <strong>R$ 19,90</strong>
                                </div>
                                <small class="text-muted">4 por linha - Nome, código e preço</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <h6>110x30mm - Gôndola</h6>
                                <div class="border p-2 mb-2" style="width: 220px; height: 60px; margin: 0 auto;">
                                    <strong>NOME DO PRODUTO</strong><br>
                                    <span>||||||||</span>
                                    <span style="float: right; font-size: 18px;"><strong>R$ 29,90</strong></span>
                                </div>
                                <small class="text-muted">1 por página - Prateleiras de supermercado</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-body text-center">
                                <h6>60x40mm - TAG com Logo</h6>
                                <div class="border p-2 mb-2" style="width: 120px; height: 80px; margin: 0 auto;">
                                    <div style="background: #eee; height: 20px; font-size: 8px;">[LOGO]</div>
                                    <strong style="font-size: 10px;">Produto</strong><br>
                                    <strong>R$ 39,90</strong><br>
                                    <small>|||||||</small>
                                </div>
                                <small class="text-muted">3 por linha - Roupas, bijuterias</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const produtosEtiqueta = {};

// Buscar produto
document.getElementById('btn_buscar').addEventListener('click', filtrarProdutos);
document.getElementById('busca_produto').addEventListener('keyup', function(e) {
    if (e.key === 'Enter') filtrarProdutos();
    else setTimeout(filtrarProdutos, 300);
});

function filtrarProdutos() {
    const termo = document.getElementById('busca_produto').value.toLowerCase();
    const options = document.getElementById('lista_produtos').options;
    
    for (let opt of options) {
        const nome = opt.dataset.nome.toLowerCase();
        const codigo = opt.dataset.codigo.toLowerCase();
        opt.style.display = (nome.includes(termo) || codigo.includes(termo)) ? '' : 'none';
    }
}

// Adicionar produtos
document.getElementById('btn_adicionar').addEventListener('click', adicionarSelecionados);
document.getElementById('lista_produtos').addEventListener('dblclick', function(e) {
    if (e.target.tagName === 'OPTION') {
        adicionarProduto(e.target);
    }
});

function adicionarSelecionados() {
    const select = document.getElementById('lista_produtos');
    const selecionados = Array.from(select.selectedOptions);
    selecionados.forEach(opt => adicionarProduto(opt));
}

function adicionarProduto(opt) {
    const id = opt.value;
    if (produtosEtiqueta[id]) {
        produtosEtiqueta[id].quantidade++;
        document.getElementById(`qtd_${id}`).value = produtosEtiqueta[id].quantidade;
    } else {
        produtosEtiqueta[id] = {
            id: id,
            nome: opt.dataset.nome,
            codigo: opt.dataset.codigo,
            preco: parseFloat(opt.dataset.preco) || 0,
            quantidade: 1
        };
        
        document.getElementById('linha_vazia').style.display = 'none';
        
        const tr = document.createElement('tr');
        tr.id = `linha_${id}`;
        tr.innerHTML = `
            <td>${produtosEtiqueta[id].nome}</td>
            <td><code>${produtosEtiqueta[id].codigo || 'Sem código'}</code></td>
            <td>R$ ${produtosEtiqueta[id].preco.toFixed(2)}</td>
            <td>
                <input type="number" class="form-control form-control-sm" id="qtd_${id}" 
                       value="1" min="1" max="999" onchange="atualizarQtd('${id}', this.value)">
            </td>
            <td>
                <button class="btn btn-sm btn-danger" onclick="removerProduto('${id}')">
                    <i class="bi bi-trash"></i>
                </button>
            </td>
        `;
        document.getElementById('lista_etiquetas').appendChild(tr);
    }
    atualizarTotalEtiquetas();
}

function atualizarQtd(id, valor) {
    if (produtosEtiqueta[id]) {
        produtosEtiqueta[id].quantidade = parseInt(valor) || 1;
        atualizarTotalEtiquetas();
    }
}

function removerProduto(id) {
    delete produtosEtiqueta[id];
    document.getElementById(`linha_${id}`)?.remove();
    
    if (Object.keys(produtosEtiqueta).length === 0) {
        document.getElementById('linha_vazia').style.display = '';
    }
    atualizarTotalEtiquetas();
}

function atualizarTotalEtiquetas() {
    let total = 0;
    Object.values(produtosEtiqueta).forEach(p => total += p.quantidade);
    document.getElementById('total_etiquetas').textContent = `${total} etiquetas`;
}

// Limpar lista
document.getElementById('btn_limpar').addEventListener('click', function() {
    Object.keys(produtosEtiqueta).forEach(id => removerProduto(id));
    document.getElementById('card_preview').classList.add('d-none');
});

// Gerar PDF
document.getElementById('btn_gerar').addEventListener('click', function() {
    const produtos = Object.keys(produtosEtiqueta);
    if (produtos.length === 0) {
        alert('Adicione pelo menos um produto');
        return;
    }
    
    const quantidades = {};
    produtos.forEach(id => {
        quantidades[id] = produtosEtiqueta[id].quantidade;
    });
    
    // Criar form para download
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = '/etiquetas/gerar';
    form.style.display = 'none';
    
    const inputFormato = document.createElement('input');
    inputFormato.name = 'formato';
    inputFormato.value = document.getElementById('formato').value;
    form.appendChild(inputFormato);
    
    // Usar fetch para JSON
    fetch('/etiquetas/gerar', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            formato: document.getElementById('formato').value,
            produtos: produtos.map(id => parseInt(id)),
            quantidades: quantidades,
            tabela1: document.getElementById('tabela1').value || null,
            tabela2: document.getElementById('tabela2').value || null
        })
    })
    .then(response => {
        if (response.ok) {
            return response.blob();
        }
        return response.json().then(data => { throw new Error(data.message); });
    })
    .then(blob => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = `etiquetas_${Date.now()}.pdf`;
        a.click();
        URL.revokeObjectURL(url);
    })
    .catch(err => alert('Erro: ' + err.message));
});

// Visualizar
document.getElementById('btn_visualizar').addEventListener('click', function() {
    const produtos = Object.keys(produtosEtiqueta);
    if (produtos.length === 0) {
        alert('Adicione pelo menos um produto');
        return;
    }
    
    const quantidades = {};
    produtos.forEach(id => {
        quantidades[id] = produtosEtiqueta[id].quantidade;
    });
    
    fetch('/etiquetas/visualizar', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
            formato: document.getElementById('formato').value,
            produtos: produtos.map(id => parseInt(id)),
            quantidades: quantidades,
            tabela1: document.getElementById('tabela1').value || null,
            tabela2: document.getElementById('tabela2').value || null
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('card_preview').classList.remove('d-none');
            document.getElementById('iframe_preview').src = 
                'data:application/pdf;base64,' + data.pdf_base64;
        } else {
            alert('Erro: ' + data.message);
        }
    })
    .catch(err => alert('Erro: ' + err.message));
});
</script>
{% endblock %}