<?php
require_once(dirname(__DIR__) . '/config/db.php');
$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, true);
?>

<h4 class="mb-3"><i class="bi bi-diagram-3"></i> Centros de Custo</h4>
<hr>

<div class="d-flex gap-3" style="height: calc(100vh - 160px);">
  <!-- ÁRVORE -->
  <div class="border-end p-3 overflow-auto flex-grow-1" style="min-width:55%;">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <div class="d-flex align-items-center gap-2 flex-grow-1">
        <input type="text" id="busca" class="form-control form-control-sm" placeholder="Pesquisar centro...">
        <button class="btn btn-outline-secondary btn-sm" id="expandAll" title="Expandir tudo"><i class="bi bi-arrows-expand"></i></button>
        <button class="btn btn-outline-secondary btn-sm" id="collapseAll" title="Recolher tudo"><i class="bi bi-arrows-collapse"></i></button>
      </div>
      <div class="d-flex gap-1">
        <button class="btn btn-sm btn-outline-success" id="btnNovoPai"><i class="bi bi-plus-circle"></i> Novo</button>
        <button class="btn btn-sm btn-outline-primary" id="btnNovoFilho"><i class="bi bi-diagram-2"></i> Novo Filho</button>
      </div>
    </div>
    <ul id="tree" class="list-unstyled ps-2"></ul>
  </div>

  <!-- FORMULÁRIO -->
  <div class="p-3" style="width: 480px;">
    <div class="card shadow-sm border-0" style="min-height: fit-content;">
      <div class="card-body p-3">
        <h6 class="fw-bold mb-3 text-secondary">Detalhes do Centro</h6>

        <div class="row g-3">
          <div class="col-12">
            <label class="small">Código</label>
            <input type="text" class="form-control form-control-sm" id="cdcentrocusto" readonly>
          </div>
          <div class="col-12">
            <label class="small">Descrição *</label>
            <input type="text" class="form-control form-control-sm" id="dscentro">
          </div>
          <div class="col-6">
            <label class="small">Centro Pai</label>
            <input type="text" class="form-control form-control-sm" id="cdcentropai" readonly placeholder="—">
          </div>
          <div class="col-6">
            <label class="small">Situação</label>
            <select class="form-select form-select-sm" id="flativo">
              <option value="0">Ativo</option>
              <option value="1">Inativo</option>
            </select>
          </div>
        </div>

        <div class="mt-3 d-flex justify-content-between">
          <button class="btn btn-warning btn-sm flex-grow-1 me-1" id="btnInativar"><i class="bi bi-power"></i> Inativar / Reativar</button>
          <button class="btn btn-success btn-sm flex-grow-1" id="btnSalvar"><i class="bi bi-save"></i> Salvar</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- CSS -->
<style>
#tree span.centro-item {
  display: inline-block;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
#tree span.centro-item.selected {
  background-color: #f2f2f2;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
let centroSelecionado = null;
let arvoreCompleta = [];
let iniciouTela = false;

// =============================
// 🔹 Carregar Árvore
// =============================
function carregarArvore(filtro = '') {
  fetch('?m=centro_custo_actions&ajax=tree&busca=' + encodeURIComponent(filtro))
    .then(r => r.json())
    .then(dados => {
      arvoreCompleta = dados;
      montarArvore($('#tree'), dados, !iniciouTela);
      iniciouTela = true;
    })
    .catch(err => alert('Erro ao carregar árvore: ' + err.message));
}

function montarArvore($ul, itens, recolhido = true) {
  $ul.empty();
  itens.forEach(item => {
    const temFilhos = item.children && item.children.length > 0;
    const $li = $('<li class="mb-1"></li>');
    const $toggle = $('<span class="me-1 text-secondary" style="cursor:pointer; display:inline-block; width:14px;">' +
                      (temFilhos ? '<i class="bi bi-plus-square toggle-icon"></i>' : '') + '</span>');

    let estilo = 'cursor:pointer; color:#000;';
    if (item.flativo == 1) estilo += 'color:gray; text-decoration: line-through;';
    if (temFilhos) estilo += 'font-weight:bold;';

    const desc = item.dscentro ?? '';
    const codigo = item.cdcentrocusto ? ` (${item.cdcentrocusto})` : '';
    const $span = $(`<span class="centro-item" style="${estilo}">${desc}${codigo}</span>`);

    $span.on('click', function () {
      $('#tree .centro-item').removeClass('selected');
      $(this).addClass('selected');
      selecionarCentro(item);
    });

    $li.append($toggle).append($span);

    if (temFilhos) {
      const $sub = $('<ul class="ps-4 list-unstyled"></ul>');
      montarArvore($sub, item.children, recolhido);
      $li.append($sub);

      if (recolhido) $sub.hide();
      $toggle.on('click', function() {
        const aberto = $sub.is(':visible');
        if (aberto) {
          $sub.slideUp(150);
          $(this).find('i').removeClass('bi-dash-square').addClass('bi-plus-square');
        } else {
          $sub.slideDown(150);
          $(this).find('i').removeClass('bi-plus-square').addClass('bi-dash-square');
        }
      });
    }

    $ul.append($li);
  });
}

// =============================
// 🔹 Selecionar item
// =============================
function selecionarCentro(item) {
  centroSelecionado = item;
  $('#cdcentrocusto').val(item.cdcentrocusto);
  $('#cdcentropai').val(item.cdcentropai || '');
  $('#dscentro').val(item.dscentro);
  $('#flativo').val(item.flativo);
}

// =============================
// 🔹 Novo Pai
// =============================
$('#btnNovoPai').on('click', () => {
  centroSelecionado = null;
  $('#cdcentrocusto').val('');
  $('#cdcentropai').val('');
  $('#dscentro').val('');
  $('#flativo').val('0');
  $('#tree .centro-item').removeClass('selected');
});

// =============================
// 🔹 Novo Filho
// =============================
$('#btnNovoFilho').on('click', () => {
  if (!centroSelecionado) return alert('Selecione um centro pai primeiro.');
  $('#cdcentrocusto').val('');
  $('#cdcentropai').val(centroSelecionado.cdcentrocusto);
  $('#dscentro').val('');
  $('#flativo').val('0');
  $('#tree .centro-item').removeClass('selected');
});

// =============================
// 🔹 Salvar
// =============================
$('#btnSalvar').on('click', () => {
  const dados = {
    cdcentrocusto: $('#cdcentrocusto').val(),
    cdcentropai: $('#cdcentropai').val() || null,
    dscentro: $('#dscentro').val().trim(),
    flativo: $('#flativo').val()
  };

  if (!dados.dscentro) return alert('Preencha a descrição do centro.');

  fetch('?m=centro_custo_actions&ajax=salvar', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(dados)
  })
  .then(r => r.json())
  .then(resp => {
    alert(resp.msg || 'Retorno indefinido.');
    if (resp.ok) carregarArvore($('#busca').val());
  });
});

// =============================
// 🔹 Inativar / Reativar
// =============================
$('#btnInativar').on('click', () => {
  if (!centroSelecionado) return alert('Selecione um centro primeiro.');
  fetch(`?m=centro_custo_actions&ajax=toggle&id=${centroSelecionado.cdcentrocusto}`)
    .then(r => r.json())
    .then(resp => {
      alert(resp.msg || 'Retorno indefinido.');
      if (resp.ok) carregarArvore($('#busca').val());
    });
});

// =============================
// 🔹 Expandir / Recolher Tudo
// =============================
$('#expandAll').on('click', () => {
  $('#tree ul').slideDown(150);
  $('#tree .toggle-icon').removeClass('bi-plus-square').addClass('bi-dash-square');
});

$('#collapseAll').on('click', () => {
  $('#tree ul').slideUp(150);
  $('#tree .toggle-icon').removeClass('bi-dash-square').addClass('bi-plus-square');
});

// =============================
// 🔹 Busca
// =============================
$('#busca').on('input', function() {
  const termo = $(this).val().trim();
  carregarArvore(termo);
});

carregarArvore();
</script>
