{% extends "base.html" %}

{% block title %}Produtos de Balança - Toledo/Prix{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1><i class="bi bi-speedometer2"></i> Produtos de Balança</h1>
        <p class="text-muted mb-0">Gerencie produtos fracionados para integração com balança Toledo/Prix MGV6</p>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-warning" onclick="gerarCodigosSequenciais()" title="Gerar códigos sequenciais para produtos sem código">
            <i class="bi bi-123"></i> Gerar Códigos
        </button>
        <button class="btn btn-success" onclick="gerarArquivoBalanca()">
            <i class="bi bi-download"></i> Gerar Arquivo Balança
        </button>
        <a href="{{ url_for('produtos') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> Voltar
        </a>
    </div>
</div>

<div class="card mb-3">
    <div class="card-body py-2">
        <div class="row g-2 align-items-end">
            <div class="col-md-2">
                <label class="form-label small mb-1">Classificar</label>
                <select class="form-select form-select-sm" id="filtroClassificar" onchange="aplicarOrdenacaoBalanca()">
                    <option value="codigo" {% if classificar == 'codigo' %}selected{% endif %}>Código</option>
                    <option value="nome" {% if classificar == 'nome' %}selected{% endif %}>Nome</option>
                    <option value="descricao" {% if classificar == 'descricao' %}selected{% endif %}>Descrição</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small mb-1">Ordem</label>
                <select class="form-select form-select-sm" id="filtroOrdem" onchange="aplicarOrdenacaoBalanca()">
                    <option value="asc" {% if ordem == 'asc' %}selected{% endif %}>Crescente</option>
                    <option value="desc" {% if ordem == 'desc' %}selected{% endif %}>Decrescente</option>
                </select>
            </div>
        </div>
    </div>
</div>

<!-- Configurações de Exportação -->
<div class="card mb-4">
    <div class="card-header bg-info text-white">
        <h5 class="mb-0"><i class="bi bi-gear"></i> Configurações de Exportação</h5>
    </div>
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-3">
                <label class="form-label">Modelo de Etiqueta</label>
                <select id="modeloEtiqueta" class="form-select">
                    <option value="peso">Produto/Peso (padrão)</option>
                    <option value="valor">Produto/Valor</option>
                </select>
                <small class="text-muted">Formato do código de barras</small>
            </div>
            <div class="col-md-3">
                <label class="form-label">Prefixo Código Balança</label>
                <input type="text" id="prefixoBalanca" class="form-control" value="2" maxlength="1">
                <small class="text-muted">Geralmente 2 para peso</small>
            </div>
            <div class="col-md-3">
                <label class="form-label">Dígitos do Código</label>
                <select id="digitosCodigo" class="form-select">
                    <option value="5">5 dígitos</option>
                    <option value="6" selected>6 dígitos</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Diretório Exportação</label>
                <input type="text" id="diretorioExport" class="form-control" value="C:\PRIX\ITENSMGV">
                <small class="text-muted">Caminho para o MGV6</small>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Lista de Produtos de Balança -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="bi bi-list-check"></i> Produtos Cadastrados na Balança</h5>
                <span class="badge bg-light text-dark">{{ produtos_balanca|length }} produtos</span>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                    <table class="table table-hover table-striped mb-0">
                        <thead class="sticky-top bg-light">
                            <tr>
                                <th width="10%">Cód. Balança</th>
                                <th width="35%">Produto</th>
                                <th width="10%">Preço/Kg</th>
                                <th width="10%">Tipo</th>
                                <th width="10%">Validade</th>
                                <th width="10%">Depto</th>
                                <th width="15%">Ações</th>
                            </tr>
                        </thead>
                        <tbody id="tabelaProdutosBalanca">
                            {% for produto in produtos_balanca %}
                            <tr id="row-{{ produto.id }}">
                                <td><span class="badge bg-primary">{{ produto.codigo_balanca or '-' }}</span></td>
                                <td>
                                    <strong>{{ produto.nome }}</strong>
                                    <br><small class="text-muted">{{ produto.codigo_barras or 'Sem código' }}</small>
                                </td>
                                <td>R$ {{ '%.2f'|format(produto.valor_venda or 0) }}</td>
                                <td>
                                    {% if produto.tipo_etiqueta_balanca == 'valor' %}
                                    <span class="badge bg-warning text-dark">Valor</span>
                                    {% else %}
                                    <span class="badge bg-success">Peso</span>
                                    {% endif %}
                                </td>
                                <td>{{ produto.dias_validade or 0 }} dias</td>
                                <td>{{ produto.departamento_balanca or 1 }}</td>
                                <td>
                                    <button class="btn btn-sm btn-outline-primary" onclick="editarProdutoBalanca({{ produto.id }})">
                                        <i class="bi bi-pencil"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" onclick="removerDaBalanca({{ produto.id }})">
                                        <i class="bi bi-trash"></i>
                                    </button>
                                </td>
                            </tr>
                            {% else %}
                            <tr>
                                <td colspan="7" class="text-center text-muted py-4">
                                    <i class="bi bi-inbox" style="font-size: 2rem;"></i>
                                    <p class="mb-0">Nenhum produto de balança cadastrado</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Adicionar Produto -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0"><i class="bi bi-plus-circle"></i> Adicionar à Balança</h5>
            </div>
            <div class="card-body">
                <form id="formAdicionarBalanca">
                    <div class="mb-3">
                        <label class="form-label">Buscar Produto</label>
                        <select id="produtoSelect" class="form-select" onchange="selecionarProduto()">
                            <option value="">-- Selecione um produto --</option>
                            {% for produto in produtos_disponiveis %}
                            <option value="{{ produto.id }}" 
                                    data-nome="{{ produto.nome }}"
                                    data-preco="{{ produto.valor_venda or 0 }}"
                                    data-codigo="{{ produto.codigo_barras or '' }}">
                                {{ produto.nome }} - R$ {{ '%.2f'|format(produto.valor_venda or 0) }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div id="camposBalanca" style="display: none;">
                        <div class="alert alert-info py-2">
                            <strong id="nomeProdutoSelecionado">-</strong><br>
                            <small>Preço: <span id="precoProdutoSelecionado">R$ 0,00</span></small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Código na Balança *</label>
                            <input type="text" id="codigoBalanca" class="form-control" 
                                   maxlength="6" pattern="[0-9]{1,6}" required
                                   placeholder="Ex: 000001">
                            <small class="text-muted">Até 6 dígitos numéricos</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Tipo de Etiqueta</label>
                            <select id="tipoEtiqueta" class="form-select">
                                <option value="peso">Por Peso (kg)</option>
                                <option value="valor">Por Valor (R$)</option>
                            </select>
                        </div>

                        <div class="row g-2">
                            <div class="col-6">
                                <label class="form-label">Dias Validade</label>
                                <input type="number" id="diasValidade" class="form-control" 
                                       value="0" min="0" max="999">
                            </div>
                            <div class="col-6">
                                <label class="form-label">Departamento</label>
                                <input type="number" id="departamento" class="form-control" 
                                       value="1" min="1" max="99">
                            </div>
                        </div>

                        <div class="mb-3 mt-3">
                            <label class="form-label">Tara (g)</label>
                            <input type="number" id="tara" class="form-control" 
                                   value="0" min="0" step="1">
                            <small class="text-muted">Peso da embalagem em gramas</small>
                        </div>

                        <input type="hidden" id="produtoId">

                        <div class="d-grid gap-2 mt-4">
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-plus-circle"></i> Adicionar à Balança
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Preview da Etiqueta -->
        <div class="card mt-3">
            <div class="card-header bg-secondary text-white">
                <h6 class="mb-0"><i class="bi bi-upc"></i> Preview Código de Barras</h6>
            </div>
            <div class="card-body text-center">
                <div class="bg-light p-3 rounded">
                    <div class="mb-2">
                        <small class="text-muted">Formato: Prefixo + Código + Peso/Valor + DV</small>
                    </div>
                    <div id="previewCodigoBarras" class="font-monospace fs-4 fw-bold">
                        2 XXXXXX YYYYY Z
                    </div>
                    <small id="previewDescricao" class="text-muted">
                        2=Peso | XXXXXX=Código | YYYYY=Peso/Valor | Z=Dígito
                    </small>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Editar Produto Balança -->
<div class="modal fade cape-modal-standard" id="modalEditarBalanca" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title"><i class="bi bi-pencil"></i> Editar Produto na Balança</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formEditarBalanca">
                    <input type="hidden" id="editProdutoId">
                    
                    <div class="alert alert-info py-2 mb-3">
                        <strong id="editNomeProduto">-</strong>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Código na Balança *</label>
                        <input type="text" id="editCodigoBalanca" class="form-control" 
                               maxlength="6" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Tipo de Etiqueta</label>
                        <select id="editTipoEtiqueta" class="form-select">
                            <option value="peso">Por Peso (kg)</option>
                            <option value="valor">Por Valor (R$)</option>
                        </select>
                    </div>

                    <div class="row g-2">
                        <div class="col-6">
                            <label class="form-label">Dias Validade</label>
                            <input type="number" id="editDiasValidade" class="form-control" min="0">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Departamento</label>
                            <input type="number" id="editDepartamento" class="form-control" min="1">
                        </div>
                    </div>

                    <div class="mb-3 mt-3">
                        <label class="form-label">Tara (g)</label>
                        <input type="number" id="editTara" class="form-control" min="0" step="1">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="salvarEdicaoBalanca()">
                    <i class="bi bi-check"></i> Salvar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Gerar Arquivo -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalGerarArquivo" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title"><i class="bi bi-file-earmark-text"></i> Gerar Arquivo para Balança</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-info">
                    <h6><i class="bi bi-info-circle"></i> Formato MGV6 Toledo/Prix</h6>
                    <p class="mb-0">O arquivo será gerado no formato compatível com o sistema MGV6 da Toledo.</p>
                </div>

                <div class="mb-3">
                    <label class="form-label">Formato do Arquivo</label>
                    <select id="formatoArquivo" class="form-select">
                        <option value="ITENSMGV">ITENSMGV.TXT (Padrão MGV6)</option>
                        <option value="TXITENS">TXITENS.TXT (Alternativo)</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label">Produtos a Exportar</label>
                    <select id="filtroExportar" class="form-select">
                        <option value="todos">Todos os produtos de balança</option>
                        <option value="peso">Apenas produtos por peso</option>
                        <option value="valor">Apenas produtos por valor</option>
                    </select>
                </div>

                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0">Preview do Arquivo</h6>
                    </div>
                    <div class="card-body bg-dark text-success p-3" style="font-family: monospace; max-height: 300px; overflow-y: auto;">
                        <pre id="previewArquivo" class="mb-0" style="white-space: pre-wrap;">Clique em "Gerar Preview" para visualizar...</pre>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" onclick="gerarPreview()">
                    <i class="bi bi-eye"></i> Gerar Preview
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success" onclick="downloadArquivo()">
                    <i class="bi bi-download"></i> Baixar Arquivo
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let modalEditarBalanca = null;
let modalGerarArquivo = null;

document.addEventListener('DOMContentLoaded', function() {
    modalEditarBalanca = new bootstrap.Modal(document.getElementById('modalEditarBalanca'));
    modalGerarArquivo = new bootstrap.Modal(document.getElementById('modalGerarArquivo'));
    
    // Form de adicionar
    document.getElementById('formAdicionarBalanca').addEventListener('submit', function(e) {
        e.preventDefault();
        adicionarProdutoBalanca();
    });
    
    // Atualizar preview ao digitar código
    document.getElementById('codigoBalanca')?.addEventListener('input', atualizarPreview);
    document.getElementById('tipoEtiqueta')?.addEventListener('change', atualizarPreview);
});

function selecionarProduto() {
    const select = document.getElementById('produtoSelect');
    const option = select.options[select.selectedIndex];
    const campos = document.getElementById('camposBalanca');
    
    if (select.value) {
        document.getElementById('produtoId').value = select.value;
        document.getElementById('nomeProdutoSelecionado').textContent = option.dataset.nome;
        document.getElementById('precoProdutoSelecionado').textContent = 'R$ ' + parseFloat(option.dataset.preco).toFixed(2);
        
        // Sugerir código baseado no ID
        const codigoSugerido = select.value.toString().padStart(6, '0');
        document.getElementById('codigoBalanca').value = codigoSugerido;
        
        campos.style.display = 'block';
        atualizarPreview();
    } else {
        campos.style.display = 'none';
    }
}

function atualizarPreview() {
    const codigo = (document.getElementById('codigoBalanca')?.value || '').padStart(6, '0');
    const tipo = document.getElementById('tipoEtiqueta')?.value || 'peso';
    const prefixo = document.getElementById('prefixoBalanca')?.value || '2';
    
    const preview = document.getElementById('previewCodigoBarras');
    const descricao = document.getElementById('previewDescricao');
    
    if (tipo === 'peso') {
        preview.textContent = `${prefixo} ${codigo} PPPPP D`;
        descricao.textContent = `${prefixo}=Peso | ${codigo}=Código | PPPPP=Peso (g) | D=Dígito`;
    } else {
        preview.textContent = `${prefixo} ${codigo} VVVVV D`;
        descricao.textContent = `${prefixo}=Valor | ${codigo}=Código | VVVVV=Valor (cents) | D=Dígito`;
    }
}

async function adicionarProdutoBalanca() {
    const produtoId = document.getElementById('produtoId').value;
    const codigoBalanca = document.getElementById('codigoBalanca').value;
    const tipoEtiqueta = document.getElementById('tipoEtiqueta').value;
    const diasValidade = document.getElementById('diasValidade').value;
    const departamento = document.getElementById('departamento').value;
    const tara = document.getElementById('tara').value;
    
    if (!produtoId || !codigoBalanca) {
        alert('Preencha todos os campos obrigatórios!');
        return;
    }
    
    try {
        const response = await fetch('{{ url_for("balanca_adicionar_produto") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                produto_id: produtoId,
                codigo_balanca: codigoBalanca,
                tipo_etiqueta: tipoEtiqueta,
                dias_validade: parseInt(diasValidade) || 0,
                departamento: parseInt(departamento) || 1,
                tara: parseFloat(tara) || 0
            })
        });
        
        const data = await response.json();
        if (data.success) {
            alert('Produto adicionado à balança com sucesso!');
            location.reload();
        } else {
            alert('Erro: ' + data.message);
        }
    } catch (error) {
        alert('Erro ao adicionar produto: ' + error);
    }
}

async function editarProdutoBalanca(produtoId) {
    try {
        const response = await fetch(`/balanca/produto/${produtoId}`);
        const data = await response.json();
        
        if (data.success) {
            const p = data.produto;
            document.getElementById('editProdutoId').value = p.id;
            document.getElementById('editNomeProduto').textContent = p.nome;
            document.getElementById('editCodigoBalanca').value = p.codigo_balanca || '';
            document.getElementById('editTipoEtiqueta').value = p.tipo_etiqueta_balanca || 'peso';
            document.getElementById('editDiasValidade').value = p.dias_validade || 0;
            document.getElementById('editDepartamento').value = p.departamento_balanca || 1;
            document.getElementById('editTara').value = (p.tara || 0) * 1000; // Converter kg para g
            
            modalEditarBalanca.show();
        }
    } catch (error) {
        alert('Erro ao carregar produto: ' + error);
    }
}

async function salvarEdicaoBalanca() {
    const produtoId = document.getElementById('editProdutoId').value;
    
    try {
        const response = await fetch(`/balanca/produto/${produtoId}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                codigo_balanca: document.getElementById('editCodigoBalanca').value,
                tipo_etiqueta: document.getElementById('editTipoEtiqueta').value,
                dias_validade: parseInt(document.getElementById('editDiasValidade').value) || 0,
                departamento: parseInt(document.getElementById('editDepartamento').value) || 1,
                tara: parseFloat(document.getElementById('editTara').value) / 1000 || 0 // Converter g para kg
            })
        });
        
        const data = await response.json();
        if (data.success) {
            alert('Produto atualizado com sucesso!');
            modalEditarBalanca.hide();
            location.reload();
        } else {
            alert('Erro: ' + data.message);
        }
    } catch (error) {
        alert('Erro ao salvar: ' + error);
    }
}

async function removerDaBalanca(produtoId) {
    if (!confirm('Remover este produto da balança?')) return;
    
    try {
        const response = await fetch(`/balanca/produto/${produtoId}`, {
            method: 'DELETE'
        });
        
        const data = await response.json();
        if (data.success) {
            document.getElementById(`row-${produtoId}`)?.remove();
        } else {
            alert('Erro: ' + data.message);
        }
    } catch (error) {
        alert('Erro ao remover: ' + error);
    }
}

function gerarArquivoBalanca() {
    modalGerarArquivo.show();
}

async function gerarPreview() {
    const formato = document.getElementById('formatoArquivo').value;
    const filtro = document.getElementById('filtroExportar').value;
    
    try {
        const response = await fetch(`/balanca/gerar-arquivo?formato=${formato}&filtro=${filtro}&preview=1`);
        const data = await response.json();
        
        if (data.success) {
            document.getElementById('previewArquivo').textContent = data.conteudo;
        } else {
            document.getElementById('previewArquivo').textContent = 'Erro: ' + data.message;
        }
    } catch (error) {
        document.getElementById('previewArquivo').textContent = 'Erro ao gerar preview: ' + error;
    }
}

async function downloadArquivo() {
    const formato = document.getElementById('formatoArquivo').value;
    const filtro = document.getElementById('filtroExportar').value;
    
    window.location.href = `/balanca/gerar-arquivo?formato=${formato}&filtro=${filtro}&download=1`;
}

async function gerarCodigosSequenciais() {
    if (!confirm('Gerar códigos sequenciais para todos os produtos de balança que estão SEM CÓDIGO?\n\nOs códigos serão gerados a partir do maior código existente + 1.')) {
        return;
    }
    
    try {
        const response = await fetch('/balanca/gerar-codigos-sequenciais', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' }
        });
        
        const data = await response.json();
        
        if (data.success) {
            if (data.atualizados > 0) {
                alert(`✓ ${data.atualizados} produtos receberam código sequencial!\n\nCódigos de ${data.primeiro_codigo} até ${data.ultimo_codigo}`);
                location.reload();
            } else {
                alert('Todos os produtos já possuem código.');
            }
        } else {
            alert('Erro: ' + data.message);
        }
    } catch (error) {
        alert('Erro ao gerar códigos: ' + error);
    }
}

function aplicarOrdenacaoBalanca() {
    const classificar = document.getElementById('filtroClassificar').value;
    const ordem = document.getElementById('filtroOrdem').value;
    const url = new URL(window.location.href);
    url.searchParams.set('classificar', classificar);
    url.searchParams.set('ordem', ordem);
    window.location.href = url.toString();
}
</script>

{% endblock %}