{% extends "base.html" %}

{% block title %}Configuração de Balança - CapeFood{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <a href="{{ url_for('food.dashboard_food') }}" class="btn btn-outline-secondary mb-2">
                        <i class="bi bi-arrow-left"></i> Voltar
                    </a>
                    <h2><i class="bi bi-speedometer text-primary"></i> Configuração de Balança</h2>
                    <p class="text-muted">Configure balanças para pesagem de produtos (açaí, sorvete, etc.)</p>
                </div>
                <button class="btn btn-success" onclick="novaBalanca()">
                    <i class="bi bi-plus-lg"></i> Nova Balança
                </button>
            </div>
        </div>
    </div>
    
    <!-- Balanças Cadastradas -->
    <div class="row" id="balancasGrid">
        {% if balancas %}
            {% for balanca in balancas %}
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card h-100 {{ 'border-success' if balanca.ativo else 'border-secondary' }}">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">
                            <i class="bi bi-{{ 'check-circle text-success' if balanca.ativo else 'x-circle text-secondary' }}"></i>
                            {{ balanca.nome }}
                        </h5>
                        <span class="badge bg-{{ 'success' if balanca.ativo else 'secondary' }}">
                            {{ 'Ativa' if balanca.ativo else 'Inativa' }}
                        </span>
                    </div>
                    <div class="card-body">
                        <p><strong>Tipo:</strong> {{ balanca.tipo_conexao | capitalize }}</p>
                        
                        {% if balanca.tipo_conexao == 'serial' %}
                            <p><strong>Porta:</strong> {{ balanca.porta_serial or 'Não configurada' }}</p>
                            <p><strong>Baudrate:</strong> {{ balanca.baudrate }}</p>
                        {% elif balanca.tipo_conexao == 'rede' %}
                            <p><strong>IP:</strong> {{ balanca.ip_balanca or 'Não configurado' }}</p>
                            <p><strong>Porta:</strong> {{ balanca.porta_rede }}</p>
                        {% endif %}
                        
                        <p><strong>Protocolo:</strong> {{ balanca.protocolo | upper }}</p>
                        <p><strong>Casas Decimais:</strong> {{ balanca.casas_decimais }}</p>
                        <p><strong>Tara Padrão:</strong> {{ balanca.tara_padrao }} kg</p>
                    </div>
                    <div class="card-footer">
                        <button class="btn btn-sm btn-primary" onclick="editarBalanca({{ balanca.id }})">
                            <i class="bi bi-pencil"></i> Editar
                        </button>
                        <button class="btn btn-sm btn-info" onclick="testarBalanca({{ balanca.id }})">
                            <i class="bi bi-arrow-repeat"></i> Testar
                        </button>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <div class="col-12">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> Nenhuma balança configurada.
                    <a href="javascript:void(0)" onclick="novaBalanca()">Adicionar balança</a>
                </div>
            </div>
        {% endif %}
    </div>
    
    <!-- Informações -->
    <div class="row mt-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-info-circle"></i> Protocolos Suportados</h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled">
                        <li><strong>Toledo:</strong> Balanças Toledo (Prix, etc.)</li>
                        <li><strong>Filizola:</strong> Balanças Filizola</li>
                        <li><strong>Urano:</strong> Balanças Urano</li>
                        <li><strong>Prix:</strong> Balanças Prix 3 / Prix 4</li>
                        <li><strong>Genérico:</strong> Formato simples (peso em texto)</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5><i class="bi bi-lightbulb"></i> Dicas</h5>
                </div>
                <div class="card-body">
                    <ul>
                        <li>Verifique se a porta COM está correta no Gerenciador de Dispositivos</li>
                        <li>Baudrate comum: 9600 ou 2400</li>
                        <li>Para balanças em rede, certifique-se que o IP é acessível</li>
                        <li>Produtos que usam balança devem ter "Vende por peso" marcado</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Configurar Balança -->
<div class="modal fade cape-modal-standard" id="modalBalanca" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-speedometer"></i> <span id="modalTitulo">Nova Balança</span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="balancaId">
                
                <div class="mb-3">
                    <label class="form-label">Nome da Balança *</label>
                    <input type="text" class="form-control" id="balancaNome" placeholder="Ex: Balança Açaí">
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Tipo de Conexão *</label>
                    <select class="form-select" id="tipoConexao" onchange="toggleCamposConexao()">
                        <option value="serial">Serial (COM)</option>
                        <option value="teclado">Teclado (digitado)</option>
                        <option value="rede">Rede (TCP/IP)</option>
                    </select>
                </div>
                
                <!-- Campos Serial -->
                <div id="camposSerial">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Porta Serial *</label>
                            <select class="form-select" id="portaSerial">
                                <option value="">Selecione...</option>
                                <option value="COM1">COM1</option>
                                <option value="COM2">COM2</option>
                                <option value="COM3">COM3</option>
                                <option value="COM4">COM4</option>
                                <option value="COM5">COM5</option>
                                <option value="COM6">COM6</option>
                                <option value="COM7">COM7</option>
                                <option value="COM8">COM8</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Baudrate</label>
                            <select class="form-select" id="baudrate">
                                <option value="2400">2400</option>
                                <option value="4800">4800</option>
                                <option value="9600" selected>9600</option>
                                <option value="19200">19200</option>
                                <option value="38400">38400</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- Campos Rede -->
                <div id="camposRede" style="display: none;">
                    <div class="row">
                        <div class="col-md-8 mb-3">
                            <label class="form-label">IP da Balança *</label>
                            <input type="text" class="form-control" id="ipBalanca" placeholder="192.168.1.100">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Porta</label>
                            <input type="number" class="form-control" id="portaRede" value="3000">
                        </div>
                    </div>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Protocolo *</label>
                    <select class="form-select" id="protocolo">
                        <option value="toledo">Toledo</option>
                        <option value="filizola">Filizola</option>
                        <option value="urano">Urano</option>
                        <option value="prix">Prix 3/4</option>
                        <option value="generico">Genérico</option>
                    </select>
                </div>
                
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Casas Decimais</label>
                        <select class="form-select" id="casasDecimais">
                            <option value="2">2</option>
                            <option value="3" selected>3</option>
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Tara Padrão (kg)</label>
                        <input type="number" class="form-control" id="taraPadrao" value="0" step="0.001" min="0">
                    </div>
                </div>
                
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="balancaAtiva" checked>
                    <label class="form-check-label" for="balancaAtiva">
                        Balança Ativa
                    </label>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success" onclick="salvarBalanca()">
                    <i class="bi bi-check-circle"></i> Salvar
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Toggle campos baseado no tipo
    function toggleCamposConexao() {
        const tipo = document.getElementById('tipoConexao').value;
        document.getElementById('camposSerial').style.display = tipo === 'serial' ? 'block' : 'none';
        document.getElementById('camposRede').style.display = tipo === 'rede' ? 'block' : 'none';
    }
    
    // Nova balança
    function novaBalanca() {
        document.getElementById('balancaId').value = '';
        document.getElementById('modalTitulo').textContent = 'Nova Balança';
        document.getElementById('balancaNome').value = '';
        document.getElementById('tipoConexao').value = 'serial';
        document.getElementById('portaSerial').value = '';
        document.getElementById('baudrate').value = '9600';
        document.getElementById('ipBalanca').value = '';
        document.getElementById('portaRede').value = '3000';
        document.getElementById('protocolo').value = 'toledo';
        document.getElementById('casasDecimais').value = '3';
        document.getElementById('taraPadrao').value = '0';
        document.getElementById('balancaAtiva').checked = true;
        
        toggleCamposConexao();
        new bootstrap.Modal(document.getElementById('modalBalanca')).show();
    }
    
    // Editar balança
    function editarBalanca(id) {
        // TODO: Carregar dados da balança via API
        document.getElementById('balancaId').value = id;
        document.getElementById('modalTitulo').textContent = 'Editar Balança';
        
        toggleCamposConexao();
        new bootstrap.Modal(document.getElementById('modalBalanca')).show();
    }
    
    // Salvar balança
    async function salvarBalanca() {
        const dados = {
            id: document.getElementById('balancaId').value || null,
            nome: document.getElementById('balancaNome').value,
            tipo_conexao: document.getElementById('tipoConexao').value,
            porta_serial: document.getElementById('portaSerial').value,
            baudrate: document.getElementById('baudrate').value,
            ip_balanca: document.getElementById('ipBalanca').value,
            porta_rede: document.getElementById('portaRede').value,
            protocolo: document.getElementById('protocolo').value,
            casas_decimais: document.getElementById('casasDecimais').value,
            tara_padrao: document.getElementById('taraPadrao').value,
            ativo: document.getElementById('balancaAtiva').checked
        };
        
        if (!dados.nome) {
            alert('Informe o nome da balança!');
            return;
        }
        
        try {
            const resp = await fetch('/food/api/balanca/config', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(dados)
            });
            
            const data = await resp.json();
            
            if (data.success) {
                alert('Balança salva com sucesso!');
                location.reload();
            } else {
                alert('Erro: ' + data.message);
            }
        } catch (e) {
            console.error('Erro:', e);
            alert('Erro ao salvar balança');
        }
    }
    
    // Testar balança
    async function testarBalanca(id) {
        try {
            const resp = await fetch('/food/api/balanca/peso?modo=simulado');
            const data = await resp.json();
            
            if (data.success) {
                alert(`Teste de Leitura:\nPeso: ${data.peso.toFixed(3)} ${data.unidade}\nEstável: ${data.estavel ? 'Sim' : 'Não'}`);
            } else {
                alert('Erro ao ler balança: ' + data.message);
            }
        } catch (e) {
            console.error('Erro:', e);
            alert('Erro ao testar balança');
        }
    }
</script>
{% endblock %}