<?php
require_once(dirname(__DIR__) . '/config/db.php');
$empresasVar = $pdo->query("SELECT cdempresa, dsempresa, dsapelido FROM back.empresa WHERE flativo = 0 ORDER BY dsempresa")->fetchAll(PDO::FETCH_ASSOC);
$origensVar  = $pdo->query("SELECT i.cdintegracao, i.dsintegracao FROM back.integracao i WHERE i.fltipo = 'origem' AND i.flativo = true ORDER BY i.dsintegracao")->fetchAll(PDO::FETCH_ASSOC);
?>
<h4 class="mb-3"><i class="bi bi-calculator"></i> Variáveis de Cálculo</h4>
<hr>

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
  <h6 class="text-secondary mb-0">Gerencie as variáveis globais que servirão como base para fórmulas em Planejamento, Dashboard e Relatórios.</h6>

  <button class="btn btn-outline-light btn-sm border-secondary text-dark bg-light"
          data-bs-toggle="modal" data-bs-target="#modalVariavel">
    <i class="bi bi-plus-circle"></i> Nova Variável
  </button>
</div>

<div class="table-responsive">
<table class="table table-striped table-hover align-middle">
  <thead class="table-dark">
    <tr>
      <th>#</th>
      <th>Nome</th>
      <th>Tipo</th>
      <th>Modelo</th>
      <th>Ordem</th>
      <th>Status</th>
      <th>Data Criação</th>
      <th class="text-center">Ações</th>
    </tr>
  </thead>
  <tbody id="tbodyVariaveis">
    <tr><td colspan="8" class="text-center text-muted">Carregando...</td></tr>
  </tbody>
</table>
</div>

<!-- MODAL CADASTRO/EDIÇÃO -->
<div class="modal fade" id="modalVariavel" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <form class="modal-content" id="formVariavel">
      <div class="modal-header">
        <h5 class="modal-title" id="modalTitle">Cadastrar Nova Variável</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="varCdvariavel" value="">

        <!-- Linha 1: Nome + Tipo -->
        <div class="row g-2 mb-2">
          <div class="col-md-7">
            <label class="form-label mb-1">Nome da Variável *</label>
            <input type="text" name="nome" id="varNome" class="form-control form-control-sm" required maxlength="100">
          </div>
          <div class="col-md-5">
            <label class="form-label mb-1">Tipo *</label>
            <select name="tipo" id="varTipo" class="form-select form-select-sm" required>
              <option value="">Selecione</option>
              <option value="Planejamento">Planejamento</option>
              <option value="Dashboard">Dashboard</option>
              <option value="Relatorio">Relatório</option>
              <option value="Outro">Outro</option>
            </select>
          </div>
        </div>

        <!-- Linha 2: Modelo + Ordem -->
        <div class="row g-2 mb-2">
          <div class="col-md-7">
            <label class="form-label mb-1">Modelo de Variável *</label>
            <select name="modelo" id="varModelo" class="form-select form-select-sm" required>
              <option value="">Selecione</option>
              <option value="meta">Meta</option>
              <option value="submeta">SubMeta</option>
              <option value="orcamento">Orçamento</option>
              <option value="resultado">Resultado</option>
            </select>
          </div>
          <div class="col-md-5" id="grupoOrdem" style="display:none;">
            <label class="form-label mb-1">Ordem Prioritária *</label>
            <input type="number" min="1" step="1" id="varOrdem" class="form-control form-control-sm" placeholder="Ex: 1, 2, 3...">
          </div>
        </div>

        <hr class="my-2">

        <!-- Linha 3: Checkboxes Gráfico + Apresentar Origem lado a lado -->
        <div class="row g-2 mb-2">
          <div class="col-md-4">
            <div class="form-check">
              <input type="checkbox" id="varGrafico" class="form-check-input">
              <label class="form-check-label" for="varGrafico" style="font-size:0.88rem;">
                Exibir em Gráficos
              </label>
            </div>
          </div>
          <div class="col-md-8">
            <div class="form-check">
              <input type="checkbox" id="varFlOrigem" class="form-check-input">
              <label class="form-check-label" for="varFlOrigem" style="font-size:0.88rem;">
                Apresentar dados Variáveis <small class="text-muted">(vincular origem)</small>
              </label>
            </div>
          </div>
        </div>

        <!-- Linha 4: Integração de Origem + Agregar (aparecem juntos quando fl_origem marcado) -->
        <div class="row g-2 mb-2" id="grupoOrigemIntegracao" style="display:none;">
          <div class="col-md-7">
            <label class="form-label mb-1">Integração de Origem *</label>
            <select id="varOrigemIntegracao" class="form-select form-select-sm">
              <option value="">Selecione uma origem</option>
              <?php foreach ($origensVar as $orig): ?>
              <option value="<?= (int)$orig['cdintegracao'] ?>"><?= htmlspecialchars($orig['dsintegracao']) ?> (#<?= (int)$orig['cdintegracao'] ?>)</option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="col-md-5 d-flex align-items-end">
            <div>
              <div class="form-check">
                <input type="checkbox" id="varAgregarCalculo" class="form-check-input">
                <label class="form-check-label" for="varAgregarCalculo" style="font-size:0.88rem;">
                  Agregar ao Cálculo Diário
                </label>
              </div>
              <div id="msgTipoValor" style="display:none;"></div>
            </div>
          </div>
        </div>

        <hr class="my-2">

        <!-- Empresas vinculadas -->
        <div class="mb-1">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <label class="fw-semibold mb-0" style="font-size:0.9rem;">Empresas vinculadas</label>
            <div class="d-flex gap-1">
              <button type="button" class="btn btn-outline-secondary btn-sm py-0 px-2" style="font-size:0.78rem;" id="btnSelecionarTodasEmpresas">Todas</button>
              <button type="button" class="btn btn-outline-secondary btn-sm py-0 px-2" style="font-size:0.78rem;" id="btnLimparEmpresas">Limpar</button>
            </div>
          </div>
          <small class="text-muted d-block mb-1" style="font-size:0.78rem;">Nenhuma selecionada = exibida para <strong>todas</strong>.</small>
          <div id="listaEmpresasVariavel" style="max-height: 150px; overflow-y: auto; border: 1px solid var(--border, #dee2e6); border-radius: 6px; padding: 6px; column-count: 2; column-gap: 12px;">
            <?php foreach ($empresasVar as $emp): ?>
            <div class="form-check" style="break-inside: avoid;">
              <input class="form-check-input chk-empresa-var" type="checkbox" value="<?= (int)$emp['cdempresa'] ?>" id="empVar_<?= (int)$emp['cdempresa'] ?>">
              <label class="form-check-label" for="empVar_<?= (int)$emp['cdempresa'] ?>" style="font-size: 0.8rem;">
                <?= htmlspecialchars($emp['dsapelido'] ?: $emp['dsempresa']) ?>
                <span class="text-muted" style="font-size: 0.7rem;">(#<?= (int)$emp['cdempresa'] ?>)</span>
              </label>
            </div>
            <?php endforeach; ?>
          </div>
        </div>
      </div>
      <div class="modal-footer py-2">
        <button type="submit" name="salvar" class="btn btn-success btn-sm">Salvar</button>
      </div>
    </form>
  </div>
</div>

<script>
async function carregarVariaveis() {
  const tbody = document.getElementById('tbodyVariaveis');
  tbody.innerHTML = '<tr><td colspan="8" class="text-center text-muted">Carregando...</td></tr>';

  try {
    const resp = await fetch('?m=variaveis_actions&ajax=listar_variaveis');
    const data = await resp.json();
    if (!data.ok) throw new Error(data.msg || 'Erro ao listar variáveis');

    const lista = data.data || [];
    if (!lista.length) {
      tbody.innerHTML = '<tr><td colspan="8" class="text-center text-muted">Nenhuma variável cadastrada.</td></tr>';
      return;
    }

    tbody.innerHTML = lista.map(v => {
      const statusBadge = v.flativo == 0
        ? '<span class="badge bg-success">Ativa</span>'
        : '<span class="badge bg-secondary">Inativa</span>';
      const tipo = (v.tipo || '').toUpperCase();
      const modelo = (v.modelo || '').toUpperCase();
      let modeloBadge;
      if (modelo === 'META') {
        modeloBadge = '<span class="badge bg-info">Meta</span>';
      } else if (modelo === 'SUBMETA') {
        modeloBadge = '<span class="badge bg-success">SubMeta</span>';
      } else if (modelo === 'RESULTADO') {
        modeloBadge = '<span class="badge bg-secondary">Resultado</span>';
      } else {
        modeloBadge = '<span class="badge bg-warning text-dark">Orçamento</span>';
      }
      const ordem = (v.ordem !== null && v.ordem !== undefined) ? v.ordem : '';
      let dt = v.dthrcriacao || '';
      try {
        if (dt) {
          const d = new Date(dt);
          if (!isNaN(d.getTime())) {
            dt = d.toLocaleString('pt-BR');
          }
        }
      } catch (e) {}

      const btnToggleClass = v.flativo == 0 ? 'danger' : 'success';
      const nomeEsc = String(v.nome || '').replace(/"/g, '&quot;');

      return `
        <tr data-id="${v.cdvariavel}" data-nome="${nomeEsc}">
          <td>${v.cdvariavel}</td>
          <td>${nomeEsc}</td>
          <td><span class="badge bg-primary">${tipo}</span></td>
          <td>${modeloBadge}</td>
          <td>${ordem || '-'}</td>
          <td>${statusBadge}</td>
          <td>${dt || '-'}</td>
          <td class="text-center">
            <button type="button" class="btn btn-sm btn-outline-warning btn-edit" title="Editar variável">
              <i class="bi bi-pencil"></i> Editar
            </button>
            <a href="?m=variaveis_detalhe&cdvariavel=${v.cdvariavel}" class="btn btn-sm btn-outline-primary">
              <i class="bi bi-diagram-3"></i> Estrutura
            </a>
            <button type="button" class="btn btn-sm btn-outline-${btnToggleClass} btn-toggle" title="Ativar/Inativar">
              <i class="bi bi-power"></i>
            </button>
            <button type="button" class="btn btn-sm btn-outline-danger btn-del" title="Excluir variável">
              <i class="bi bi-trash"></i>
            </button>
          </td>
        </tr>
      `;
    }).join('');

    // Eventos dos botões
    tbody.querySelectorAll('.btn-edit').forEach(btn => {
      btn.addEventListener('click', () => {
        const tr = btn.closest('tr');
        if (!tr) return;
        const id = tr.getAttribute('data-id');
        editarVariavel(id);
      });
    });

    tbody.querySelectorAll('.btn-toggle').forEach(btn => {
      btn.addEventListener('click', () => {
        const tr = btn.closest('tr');
        if (!tr) return;
        const id = tr.getAttribute('data-id');
        toggleVariavel(id);
      });
    });

    tbody.querySelectorAll('.btn-del').forEach(btn => {
      btn.addEventListener('click', () => {
        const tr = btn.closest('tr');
        if (!tr) return;
        const id = tr.getAttribute('data-id');
        const nome = tr.getAttribute('data-nome') || '';
        excluirVariavel(id, nome);
      });
    });

  } catch (err) {
    tbody.innerHTML = `<tr><td colspan="7" class="text-center text-danger">${err.message}</td></tr>`;
  }
}

async function editarVariavel(id) {
  try {
    const resp = await fetch('?m=variaveis_actions&ajax=obter_variavel&cdvariavel=' + encodeURIComponent(id));
    const data = await resp.json();
    if (!data.ok) {
      alert(data.msg || 'Erro ao carregar variável.');
      return;
    }
    const v = data.data;
    
    // Popula os campos do modal
    document.getElementById('varCdvariavel').value = v.cdvariavel;
    document.getElementById('varNome').value = v.nome;
    document.getElementById('varTipo').value = v.tipo;
    document.getElementById('varModelo').value = v.modelo;
    document.getElementById('varOrdem').value = v.ordem || '';
    document.getElementById('varGrafico').checked = v.grafico === true || v.grafico === 1 || v.grafico === '1' || v.grafico === 't';

    // Popula campos de origem
    const flOrigem = v.fl_origem === true || v.fl_origem === 1 || v.fl_origem === '1' || v.fl_origem === 't';
    document.getElementById('varFlOrigem').checked = flOrigem;
    document.getElementById('grupoOrigemIntegracao').style.display = flOrigem ? '' : 'none';
    document.getElementById('varOrigemIntegracao').value = v.cdintegracao || '';
    const flAgregar = v.fl_agregar_calc === true || v.fl_agregar_calc === 1 || v.fl_agregar_calc === '1' || v.fl_agregar_calc === 't';
    document.getElementById('varAgregarCalculo').checked = flAgregar;
    document.getElementById('msgTipoValor').style.display = 'none';

    // Popula empresas vinculadas
    document.querySelectorAll('.chk-empresa-var').forEach(chk => chk.checked = false);
    const empresasVinc = v.empresas || [];
    empresasVinc.forEach(id => {
      const chk = document.getElementById('empVar_' + id);
      if (chk) chk.checked = true;
    });
    
    // Atualiza título do modal
    document.getElementById('modalTitle').textContent = 'Editar Variável: ' + v.nome;
    
    // Mostra/esconde campo de ordem conforme o tipo
    const tipoSelecionado = v.tipo;
    const grupoOrdem = document.getElementById('grupoOrdem');
    if (tipoSelecionado && tipoSelecionado !== 'Planejamento') {
      grupoOrdem.style.display = 'block';
    } else {
      grupoOrdem.style.display = 'none';
    }
    
    // Abre o modal
    const modal = new bootstrap.Modal(document.getElementById('modalVariavel'));
    modal.show();
  } catch (err) {
    alert(err.message);
  }
}

async function toggleVariavel(id) {
  try {
    const resp = await fetch('?m=variaveis_actions&ajax=toggle_variavel', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: 'cdvariavel=' + encodeURIComponent(id)
    });
    const data = await resp.json();
    if (!data.ok) {
      alert(data.msg || 'Erro ao alterar status.');
      return;
    }
    carregarVariaveis();
  } catch (err) {
    alert(err.message);
  }
}

async function excluirVariavel(id, nome) {
  const msg = `Deseja excluir definitivamente a variável "${nome}" (ID ${id})?\nSuas seções e fórmulas também serão removidas.`;
  if (!confirm(msg)) return;

  try {
    const resp = await fetch('?m=variaveis_actions&ajax=excluir_variavel', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: 'cdvariavel=' + encodeURIComponent(id)
    });
    const data = await resp.json();
    alert(data.msg || (data.ok ? 'Operação concluída.' : 'Erro ao excluir.'));
    if (data.ok) {
      carregarVariaveis();
    }
  } catch (err) {
    alert(err.message);
  }
}

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('formVariavel');
  if (form) {
    form.addEventListener('submit', async (e) => {
      e.preventDefault();
      const cdvariavel = document.getElementById('varCdvariavel').value.trim();
      const nome = document.getElementById('varNome').value.trim();
      const tipo = document.getElementById('varTipo').value.trim();
      const modelo = document.getElementById('varModelo').value.trim();
      const ordemStr = document.getElementById('varOrdem').value.trim();
      const grafico = document.getElementById('varGrafico').checked;
      const fl_origem = document.getElementById('varFlOrigem').checked;
      const cdintegracao = fl_origem ? (document.getElementById('varOrigemIntegracao').value || null) : null;
      const fl_agregar_calc = fl_origem ? document.getElementById('varAgregarCalculo').checked : false;
      const empresas = Array.from(document.querySelectorAll('.chk-empresa-var:checked')).map(c => parseInt(c.value));
      const precisaOrdem = (tipo && tipo !== 'Planejamento');

      if (!nome || !tipo || !modelo) {
        alert('Informe nome, tipo e modelo da variável.');
        return;
      }

      // Validação: se marcou "Apresentar dados Variáveis", deve selecionar uma origem
      if (fl_origem && !cdintegracao) {
        alert('Selecione uma integração de origem para apresentar os dados.');
        return;
      }

      let ordem = null;
      if (precisaOrdem) {
        if (!ordemStr) {
          alert('Informe a ordem prioritária para este tipo de variável.');
          return;
        }
        ordem = parseInt(ordemStr, 10);
        if (!ordem || ordem <= 0) {
          alert('A ordem prioritária deve ser um número inteiro maior que zero.');
          return;
        }
      }

      try {
        // Determina se é inserção ou atualização
        const ajax = cdvariavel ? 'atualizar_variavel' : 'salvar_variavel';
        const payload = { nome, tipo, modelo, ordem, grafico: !!grafico, fl_origem: !!fl_origem, cdintegracao: cdintegracao ? parseInt(cdintegracao) : null, fl_agregar_calc: !!fl_agregar_calc, empresas };
        if (cdvariavel) payload.cdvariavel = parseInt(cdvariavel);
        
        const resp = await fetch('?m=variaveis_actions&ajax=' + ajax, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(payload)
        });
        const data = await resp.json();
        alert(data.msg || (data.ok ? 'Variável salva.' : 'Erro ao salvar.'));
        if (data.ok) {
          // Limpa campos
          document.getElementById('varCdvariavel').value = '';
          document.getElementById('varNome').value = '';
          document.getElementById('varTipo').value = '';
          document.getElementById('varModelo').value = '';
          document.getElementById('varOrdem').value = '';
          document.getElementById('varGrafico').checked = false;
          document.getElementById('varFlOrigem').checked = false;
          document.getElementById('varOrigemIntegracao').value = '';
          document.getElementById('varAgregarCalculo').checked = false;
          document.getElementById('grupoOrigemIntegracao').style.display = 'none';
          document.getElementById('msgTipoValor').style.display = 'none';
          document.querySelectorAll('.chk-empresa-var').forEach(chk => chk.checked = false);
          document.getElementById('modalTitle').textContent = 'Cadastrar Nova Variável';

          // Fecha o modal
          const modalEl = document.getElementById('modalVariavel');
          if (window.bootstrap && bootstrap.Modal && modalEl) {
            const instance = bootstrap.Modal.getInstance(modalEl);
            if (instance) {
              instance.hide();
            }
          }
          
          // Remove backdrop se ainda estiver visível
          setTimeout(() => {
            const backdrop = document.querySelector('.modal-backdrop');
            if (backdrop) {
              backdrop.remove();
            }
            document.body.classList.remove('modal-open');
          }, 300);

          carregarVariaveis();
        }
      } catch (err) {
        alert(err.message);
      }
    });
  }

  const tipoSel = document.getElementById('varTipo');
  const grupoOrdem = document.getElementById('grupoOrdem');
  if (tipoSel && grupoOrdem) {
    tipoSel.addEventListener('change', () => {
      const val = tipoSel.value;
      if (val && val !== 'Planejamento') {
        grupoOrdem.style.display = '';
      } else {
        grupoOrdem.style.display = 'none';
        document.getElementById('varOrdem').value = '';
      }
    });
  }

  // Botões selecionar todas / limpar empresas
  const btnSelTodas = document.getElementById('btnSelecionarTodasEmpresas');
  const btnLimpar   = document.getElementById('btnLimparEmpresas');
  if (btnSelTodas) btnSelTodas.addEventListener('click', () => document.querySelectorAll('.chk-empresa-var').forEach(c => c.checked = true));
  if (btnLimpar)   btnLimpar.addEventListener('click',   () => document.querySelectorAll('.chk-empresa-var').forEach(c => c.checked = false));

  // Toggle: Apresentar dados Variáveis → mostra/esconde dropdown e flag agregar
  const chkFlOrigem = document.getElementById('varFlOrigem');
  const grupoOrigem = document.getElementById('grupoOrigemIntegracao');
  if (chkFlOrigem) {
    chkFlOrigem.addEventListener('change', () => {
      const show = chkFlOrigem.checked;
      grupoOrigem.style.display = show ? '' : 'none';
      if (!show) {
        document.getElementById('varOrigemIntegracao').value = '';
        document.getElementById('varAgregarCalculo').checked = false;
        document.getElementById('msgTipoValor').style.display = 'none';
      }
    });
  }

  // Toggle: Agregar ao Cálculo Diário → valida se valor da origem é numérico
  const chkAgregar = document.getElementById('varAgregarCalculo');
  const selOrigem  = document.getElementById('varOrigemIntegracao');
  const msgTipo    = document.getElementById('msgTipoValor');
  if (chkAgregar) {
    chkAgregar.addEventListener('change', async () => {
      if (!chkAgregar.checked) {
        msgTipo.style.display = 'none';
        return;
      }
      const cdintegracao = selOrigem ? selOrigem.value : '';
      if (!cdintegracao) {
        alert('Selecione uma integração de origem antes de marcar esta opção.');
        chkAgregar.checked = false;
        return;
      }
      try {
        msgTipo.innerHTML = '<small class="text-info"><i class="bi bi-hourglass-split"></i> Validando tipo do valor...</small>';
        msgTipo.style.display = '';
        const resp = await fetch('?m=variaveis_actions&ajax=validar_tipo_valor_origem&cdintegracao=' + encodeURIComponent(cdintegracao));
        const data = await resp.json();
        if (!data.ok) {
          msgTipo.innerHTML = '<small class="text-danger"><i class="bi bi-x-circle"></i> ' + (data.msg || 'Erro ao validar.') + '</small>';
          chkAgregar.checked = false;
          return;
        }
        if (data.tipo !== 'numerico') {
          msgTipo.innerHTML = '<small class="text-danger"><i class="bi bi-x-circle"></i> A coluna valor desta origem contém dados do tipo <strong>' + data.tipo + '</strong>. Agregar ao cálculo diário requer dados numéricos.</small>';
          chkAgregar.checked = false;
        } else {
          msgTipo.innerHTML = '<small class="text-success"><i class="bi bi-check-circle"></i> Valores numéricos confirmados.</small>';
        }
      } catch (err) {
        msgTipo.innerHTML = '<small class="text-danger">' + err.message + '</small>';
        chkAgregar.checked = false;
      }
    });
  }

  // Ao trocar a origem, desmarcar agregar (precisa revalidar)
  if (selOrigem) {
    selOrigem.addEventListener('change', () => {
      if (chkAgregar) chkAgregar.checked = false;
      if (msgTipo) msgTipo.style.display = 'none';
    });
  }

  // Ao abrir modal para NOVA variável, limpar empresas
  const modalEl = document.getElementById('modalVariavel');
  if (modalEl) {
    modalEl.addEventListener('show.bs.modal', () => {
      if (!document.getElementById('varCdvariavel').value) {
        document.querySelectorAll('.chk-empresa-var').forEach(c => c.checked = false);
        document.getElementById('varFlOrigem').checked = false;
        document.getElementById('varOrigemIntegracao').value = '';
        document.getElementById('varAgregarCalculo').checked = false;
        document.getElementById('grupoOrigemIntegracao').style.display = 'none';
        document.getElementById('msgTipoValor').style.display = 'none';
      }
    });
  }

  carregarVariaveis();
});
</script>
