{% extends "base.html" %}

{% block title %}Configuração de PDVs/Estações{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="bi bi-pc-display-horizontal"></i> Configuração de PDVs/Estações</h2>
        <div>
            <button class="btn btn-success" onclick="novoPDV()">
                <i class="bi bi-plus-circle"></i> Novo PDV
            </button>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="tabelaPDVs">
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Hostname</th>
                            <th>IP Local</th>
                            <th>Localização</th>
                            <th>Impressora</th>
                            <th>Balança</th>
                            <th>Última Conexão</th>
                            <th>Status</th>
                            <th>Ações</th>
                        </tr>
                    </thead>
                    <tbody id="listaPDVs">
                        <tr>
                            <td colspan="9" class="text-center">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Carregando...</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Cadastro/Edição -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalPDV" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-pc-display-horizontal"></i> 
                    <span id="tituloModal">Novo PDV</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="formPDV">
                    <input type="hidden" id="pdvId" name="id">
                    
                    <!-- Identificação -->
                    <div class="card mb-3">
                        <div class="card-header bg-primary text-white">
                            <i class="bi bi-info-circle"></i> Identificação
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label">Nome do PDV/Estação *</label>
                                    <input type="text" class="form-control" id="nome_estacao" 
                                           placeholder="Ex: Caixa 1, PDV Balcão" required>
                                    <small class="text-muted">Nome amigável para identificação</small>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Setor</label>
                                    <select class="form-select" id="setor">
                                        <option value="">Selecione...</option>
                                        <option value="BALCAO">Balcão</option>
                                        <option value="DELIVERY">Delivery</option>
                                        <option value="MESAS">Mesas</option>
                                        <option value="COMANDAS">Comandas</option>
                                        <option value="CAIXA">Caixa</option>
                                        <option value="ESTOQUE">Estoque</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <label class="form-label">Localização Física</label>
                                    <input type="text" class="form-control" id="localizacao" 
                                           placeholder="Ex: Loja 1 - Térreo, Cozinha - 2º Andar">
                                </div>
                            </div>
                            
                            <div class="alert alert-info mt-3">
                                <button type="button" class="btn btn-sm btn-primary" onclick="detectarMaquina()">
                                    <i class="bi bi-search"></i> Detectar Automaticamente
                                </button>
                                <small class="ms-2">Detecta hostname, IP e MAC da máquina atual</small>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4">
                                    <label class="form-label">Nome da Máquina (Hostname) *</label>
                                    <input type="text" class="form-control" id="nome_maquina" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">IP Local *</label>
                                    <input type="text" class="form-control" id="ip_local" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">MAC Address</label>
                                    <input type="text" class="form-control" id="mac_address">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Impressora de Cupom -->
                    <div class="card mb-3">
                        <div class="card-header bg-success text-white">
                            <i class="bi bi-printer"></i> Impressora de Cupom
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <label class="form-label">Tipo de Conexão</label>
                                    <select class="form-select" id="tipo_impressora_cupom" onchange="toggleImpressora()">
                                        <option value="local">Local (USB/Windows)</option>
                                        <option value="rede">Rede (IP)</option>
                                    </select>
                                </div>
                                <div class="col-md-4" id="divImpressoraLocal">
                                    <label class="form-label">Nome da Impressora</label>
                                    <select class="form-select" id="impressora_cupom_nome">
                                        <option value="">Carregando...</option>
                                    </select>
                                    <small class="text-muted">Impressoras instaladas no Windows</small>
                                </div>
                                <div class="col-md-4 d-none" id="divImpressoraIP">
                                    <label class="form-label">IP da Impressora</label>
                                    <input type="text" class="form-control" id="impressora_cupom_ip" 
                                           placeholder="Ex: 192.168.1.100">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Porta (Rede)</label>
                                    <input type="number" class="form-control" id="impressora_cupom_porta" value="9100">
                                </div>
                            </div>
                            
                            <div class="row mt-3">
                                <div class="col-md-4">
                                    <label class="form-label">Tipo de Impressora</label>
                                    <select class="form-select" id="impressora_cupom_tipo">
                                        <option value="TERMICA_80MM">Térmica 80mm</option>
                                        <option value="TERMICA_58MM">Térmica 58mm</option>
                                        <option value="MATRICIAL">Matricial</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Balança -->
                    <div class="card mb-3">
                        <div class="card-header bg-warning text-dark">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="balanca_habilitada" 
                                       onchange="toggleBalanca()">
                                <label class="form-check-label">
                                    <i class="bi bi-speedometer2"></i> <strong>Balança Habilitada</strong>
                                </label>
                            </div>
                        </div>
                        <div class="card-body" id="divBalanca" style="display:none;">
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="form-label">Modelo</label>
                                    <select class="form-select" id="balanca_modelo">
                                        <option value="TOLEDO">Toledo</option>
                                        <option value="FILIZOLA">Filizola</option>
                                        <option value="URANO">Urano</option>
                                        <option value="BALMAK">Balmak</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Tipo de Conexão</label>
                                    <select class="form-select" id="tipo_balanca" onchange="toggleTipoBalanca()">
                                        <option value="serial">Serial (COM)</option>
                                        <option value="rede">Rede (IP)</option>
                                    </select>
                                </div>
                                <div class="col-md-3" id="divBalancaSerial">
                                    <label class="form-label">Porta Serial</label>
                                    <input type="text" class="form-control" id="balanca_porta_serial" 
                                           placeholder="Ex: COM1">
                                </div>
                                <div class="col-md-3 d-none" id="divBalancaIP">
                                    <label class="form-label">IP da Balança</label>
                                    <input type="text" class="form-control" id="balanca_ip" 
                                           placeholder="Ex: 192.168.1.50">
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label">Timeout (seg)</label>
                                    <input type="number" class="form-control" id="balanca_timeout" value="5">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Outros -->
                    <div class="card mb-3">
                        <div class="card-header bg-secondary text-white">
                            <i class="bi bi-gear"></i> Outras Configurações
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="gaveta_habilitada" checked>
                                        <label class="form-check-label">Gaveta de Dinheiro Habilitada</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="is_principal">
                                        <label class="form-check-label">PDV Principal (padrão)</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-check form-switch">
                                        <input class="form-check-input" type="checkbox" id="ativo" checked>
                                        <label class="form-check-label">Ativo</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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="salvarPDV()">
                    <i class="bi bi-save"></i> Salvar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Logs -->
<div class="modal fade cape-modal-standard cape-modal-detail" id="modalLogs" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="bi bi-clock-history"></i> Histórico de Conexões
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Data/Hora</th>
                                <th>Evento</th>
                                <th>Descrição</th>
                                <th>IP</th>
                            </tr>
                        </thead>
                        <tbody id="listaLogs"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Carrega lista de PDVs ao iniciar
document.addEventListener('DOMContentLoaded', function() {
    carregarPDVs();
    carregarImpressoras();
});

function carregarImpressoras() {
    fetch('/configuracoes/pdv/api/impressoras-disponiveis')
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const select = document.getElementById('impressora_cupom_nome');
                select.innerHTML = '<option value="">Selecione uma impressora...</option>';
                
                data.impressoras.forEach(imp => {
                    const option = document.createElement('option');
                    option.value = imp.nome;
                    option.textContent = imp.nome;
                    select.appendChild(option);
                });
            } else {
                console.error('Erro ao carregar impressoras:', data.message);
            }
        })
        .catch(err => {
            console.error('Erro ao carregar impressoras:', err);
            const select = document.getElementById('impressora_cupom_nome');
            select.innerHTML = '<option value="">Erro ao carregar impressoras</option>';
        });
}

function carregarPDVs() {
    fetch('/configuracoes/pdv/api/listar')
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                renderizarPDVs(data.pdvs);
            }
        })
        .catch(err => {
            console.error('Erro ao carregar PDVs:', err);
            mostrarErro('Erro ao carregar lista de PDVs');
        });
}

function renderizarPDVs(pdvs) {
    const tbody = document.getElementById('listaPDVs');
    if (pdvs.length === 0) {
        tbody.innerHTML = '<tr><td colspan="9" class="text-center">Nenhum PDV cadastrado</td></tr>';
        return;
    }
    
    tbody.innerHTML = pdvs.map(pdv => `
        <tr>
            <td>
                <strong>${pdv.nome_estacao}</strong>
                ${pdv.is_principal ? '<span class="badge bg-primary ms-1">Principal</span>' : ''}
            </td>
            <td><code>${pdv.nome_maquina}</code></td>
            <td><code>${pdv.ip_local}</code></td>
            <td>${pdv.localizacao || '-'}</td>
            <td><small>${pdv.impressora_cupom}</small></td>
            <td><small>${pdv.balanca_modelo}</small></td>
            <td><small>${pdv.ultima_conexao}</small></td>
            <td>
                <span class="badge bg-${pdv.ativo ? 'success' : 'secondary'}">
                    ${pdv.ativo ? 'Ativo' : 'Inativo'}
                </span>
            </td>
            <td>
                <div class="btn-group btn-group-sm">
                    <button class="btn btn-primary" onclick="editarPDV(${pdv.id})" title="Editar">
                        <i class="bi bi-pencil"></i>
                    </button>
                    <button class="btn btn-success" onclick="testarImpressora(${pdv.id})" title="Testar Impressora">
                        <i class="bi bi-printer"></i>
                    </button>
                    <button class="btn btn-info" onclick="verLogs(${pdv.id})" title="Logs">
                        <i class="bi bi-clock-history"></i>
                    </button>
                    <button class="btn btn-${pdv.ativo ? 'warning' : 'success'}" 
                            onclick="toggleStatus(${pdv.id})" 
                            title="${pdv.ativo ? 'Desativar' : 'Ativar'}">
                        <i class="bi bi-${pdv.ativo ? 'pause' : 'play'}"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');
}

function novoPDV() {
    document.getElementById('tituloModal').textContent = 'Novo PDV';
    document.getElementById('formPDV').reset();
    document.getElementById('pdvId').value = '';
    new bootstrap.Modal(document.getElementById('modalPDV')).show();
}

function editarPDV(id) {
    fetch(`/configuracoes/pdv/api/${id}`)
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const pdv = data.pdv;
                document.getElementById('tituloModal').textContent = 'Editar PDV';
                document.getElementById('pdvId').value = pdv.id;
                document.getElementById('nome_estacao').value = pdv.nome_estacao;
                document.getElementById('nome_maquina').value = pdv.nome_maquina;
                document.getElementById('ip_local').value = pdv.ip_local;
                document.getElementById('mac_address').value = pdv.mac_address || '';
                document.getElementById('localizacao').value = pdv.localizacao || '';
                document.getElementById('setor').value = pdv.setor || '';
                
                // Impressora
                if (pdv.impressora_cupom_ip) {
                    document.getElementById('tipo_impressora_cupom').value = 'rede';
                    document.getElementById('impressora_cupom_ip').value = pdv.impressora_cupom_ip;
                } else {
                    document.getElementById('tipo_impressora_cupom').value = 'local';
                    document.getElementById('impressora_cupom_nome').value = pdv.impressora_cupom_nome || '';
                }
                toggleImpressora();
                
                document.getElementById('impressora_cupom_porta').value = pdv.impressora_cupom_porta || 9100;
                document.getElementById('impressora_cupom_tipo').value = pdv.impressora_cupom_tipo || 'TERMICA_80MM';
                
                // Balança
                document.getElementById('balanca_habilitada').checked = pdv.balanca_habilitada;
                toggleBalanca();
                if (pdv.balanca_habilitada) {
                    document.getElementById('balanca_modelo').value = pdv.balanca_modelo || 'TOLEDO';
                    if (pdv.balanca_ip) {
                        document.getElementById('tipo_balanca').value = 'rede';
                        document.getElementById('balanca_ip').value = pdv.balanca_ip;
                    } else {
                        document.getElementById('tipo_balanca').value = 'serial';
                        document.getElementById('balanca_porta_serial').value = pdv.balanca_porta_serial || '';
                    }
                    toggleTipoBalanca();
                    document.getElementById('balanca_timeout').value = pdv.balanca_timeout || 5;
                }
                
                // Outros
                document.getElementById('gaveta_habilitada').checked = pdv.gaveta_habilitada;
                document.getElementById('is_principal').checked = pdv.is_principal;
                document.getElementById('ativo').checked = pdv.ativo;
                
                new bootstrap.Modal(document.getElementById('modalPDV')).show();
            }
        });
}

function detectarMaquina() {
    fetch('/configuracoes/pdv/api/detectar', {method: 'POST'})
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                document.getElementById('nome_maquina').value = data.nome_maquina;
                document.getElementById('ip_local').value = data.ip_local;
                if (data.mac_address) {
                    document.getElementById('mac_address').value = data.mac_address;
                }
                mostrarSucesso('Dados detectados automaticamente!');
            }
        });
}

function toggleImpressora() {
    const tipo = document.getElementById('tipo_impressora_cupom').value;
    document.getElementById('divImpressoraLocal').classList.toggle('d-none', tipo === 'rede');
    document.getElementById('divImpressoraIP').classList.toggle('d-none', tipo === 'local');
}

function toggleBalanca() {
    const habilitada = document.getElementById('balanca_habilitada').checked;
    document.getElementById('divBalanca').style.display = habilitada ? 'block' : 'none';
}

function toggleTipoBalanca() {
    const tipo = document.getElementById('tipo_balanca').value;
    document.getElementById('divBalancaSerial').classList.toggle('d-none', tipo === 'rede');
    document.getElementById('divBalancaIP').classList.toggle('d-none', tipo === 'serial');
}

function salvarPDV() {
    const form = document.getElementById('formPDV');
    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }
    
    const pdvIdValue = document.getElementById('pdvId').value;
    
    const data = {
        id: pdvIdValue ? parseInt(pdvIdValue) : null,  // Converter para inteiro
        nome_estacao: document.getElementById('nome_estacao').value,
        nome_maquina: document.getElementById('nome_maquina').value,
        ip_local: document.getElementById('ip_local').value,
        mac_address: document.getElementById('mac_address').value,
        localizacao: document.getElementById('localizacao').value,
        setor: document.getElementById('setor').value,
        tipo_impressora_cupom: document.getElementById('tipo_impressora_cupom').value,
        impressora_cupom_nome: document.getElementById('impressora_cupom_nome').value,
        impressora_cupom_ip: document.getElementById('impressora_cupom_ip').value,
        impressora_cupom_porta: parseInt(document.getElementById('impressora_cupom_porta').value) || 9100,
        impressora_cupom_tipo: document.getElementById('impressora_cupom_tipo').value,
        balanca_habilitada: document.getElementById('balanca_habilitada').checked,
        balanca_modelo: document.getElementById('balanca_modelo').value,
        tipo_balanca: document.getElementById('tipo_balanca').value,
        balanca_porta_serial: document.getElementById('balanca_porta_serial').value,
        balanca_ip: document.getElementById('balanca_ip').value,
        balanca_timeout: parseInt(document.getElementById('balanca_timeout').value) || 5,
        gaveta_habilitada: document.getElementById('gaveta_habilitada').checked,
        is_principal: document.getElementById('is_principal').checked,
        ativo: document.getElementById('ativo').checked
    };
    
    fetch('/configuracoes/pdv/api/salvar', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            mostrarSucesso(data.message);
            bootstrap.Modal.getInstance(document.getElementById('modalPDV')).hide();
            carregarPDVs();
        } else {
            mostrarErro(data.message);
        }
    });
}

function toggleStatus(id) {
    fetch(`/configuracoes/pdv/api/${id}/toggle`, {method: 'POST'})
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                mostrarSucesso(data.message);
                carregarPDVs();
            }
        });
}

function testarImpressora(id) {
    mostrarInfo('Enviando teste para impressora...');
    fetch(`/configuracoes/pdv/api/${id}/testar-impressora`, {method: 'POST'})
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                mostrarSucesso(data.message);
            } else {
                mostrarErro(data.message);
            }
        });
}

function verLogs(id) {
    fetch(`/configuracoes/pdv/api/${id}/logs`)
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const tbody = document.getElementById('listaLogs');
                tbody.innerHTML = data.logs.map(log => `
                    <tr>
                        <td>${log.timestamp}</td>
                        <td><span class="badge bg-info">${log.evento}</span></td>
                        <td>${log.descricao}</td>
                        <td><code>${log.ip_detectado || '-'}</code></td>
                    </tr>
                `).join('');
                new bootstrap.Modal(document.getElementById('modalLogs')).show();
            }
        });
}

function mostrarSucesso(msg) {
    alert(msg);  // Pode trocar por toast do Bootstrap
}

function mostrarErro(msg) {
    alert('ERRO: ' + msg);
}

function mostrarInfo(msg) {
    console.log('INFO:', msg);
}
</script>
{% endblock %}