<?php
if (session_status() === PHP_SESSION_NONE) session_start();

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

$cdorcamento = (int)($_GET["cdorcamento"] ?? 0);
if ($cdorcamento <= 0) {
    echo "<div class='alert alert-danger'>Orçamento não informado.</div>";
    exit;
}
?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Planejamento Orçamentário</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<style>

body { background: #f5f6f8; }

.header-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    margin-bottom: 20px;
}

/* ÁRVORE */
.tree-cell {
    position: sticky;
    left: 0;
    background: white;
    z-index: 10;
    white-space: nowrap;
    padding: 6px;
}
.tree-indent { display: inline-block; }

.tree-btn {
    font-weight: bold;
    cursor: pointer;
    margin-right: 6px;
}

.tree-leaf {
    color: #888;
    margin-right: 6px;
}

/* TABLE - MELHORIAS DE VISUALIZAÇÃO */
.table-fixed {
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    border-collapse: collapse;
    table-layout: auto;
    width: 100%;
}

.table-fixed thead {
    position: sticky;
    top: 0;
    z-index: 25;
}

.table-fixed thead th {
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: white;
    z-index: 25;
    padding: 8px 6px !important;
    border: 1px solid #0f172a !important;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    min-width: 90px;
}

.table-fixed th.col-conta {
    position: sticky;
    left: 0;
    z-index: 30;
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
    min-width: 340px;
    width: 340px;
    text-align: left;
}

.cdcontabil {
    font-weight: 600;
    font-size: 0.9rem;
}

.desc-conta {
    flex: 1;
}

.valor-sintetico {
    background-color: #f3f4f6 !important;
    font-weight: 600;
}

.table-fixed tbody td {
    padding: 6px 4px !important;
    border: 1px solid #e5e7eb !important;
    text-align: center;
}

.table-fixed tbody td:not(:first-child) {
    min-width: 110px;
    text-align: center;
    padding: 6px 2px !important;
    white-space: nowrap;
}

.table-fixed tbody td:first-child {
    position: sticky;
    left: 0;
    background: white;
    z-index: 10;
    padding: 6px 8px !important;
    border-right: 2px solid #d1d5db !important;
    width: 320px;
    min-width: 320px;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
}

.tree-cell {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex-wrap: wrap;
}

.tree-indent {
    display: inline-block;
    flex-shrink: 0;
}

.tree-btn, .tree-leaf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    min-width: 18px;
}

.valor-analitico {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #1f2937;
    font-weight: 500;
    font-size: 0.85rem;
    max-width: 100%;
    display: block;
    white-space: nowrap;
}

/* BTN ADD FILHO */
.btn-add-filho {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    opacity: 0.7;
    margin-left: 6px;
    transition: 0.2s ease;
}

.btn-add-filho:hover {
    opacity: 1;
    transform: scale(1.12);
}

.btn-add-filho svg {
    width: 17px;
    height: 17px;
}

/* ZEBRA ROWS - Alternância suave */
.zebra-even td { 
    background: #f9fafb !important; 
}
.zebra-even td:first-child { 
    background: #f3f4f6 !important; 
}

.zebra-odd td  { 
    background: #ffffff !important; 
}
.zebra-odd td:first-child { 
    background: #ffffff !important; 
}

/* HOVER - Transição suave */
#tabelaOrcamento tbody tr:hover td {
    background: #fef3c7 !important;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

#tabelaOrcamento tbody tr:hover td:first-child {
    background: #fcd34d !important;
}

/* BUSCA - Destaque */
#tabelaOrcamento tbody tr.highlight-row td {
    background: #fef08a !important;
    border-color: #fbbf24 !important;
}

#tabelaOrcamento tbody tr.highlight-row td:first-child {
    background: #f59e0b !important;
    color: white !important;
}

/* VARIÁVEIS */
#tabelaVariaveis th {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: white;
    padding: 8px 6px !important;
    border: 1px solid #0f172a !important;
    text-align: center;
    font-weight: 600;
    white-space: nowrap;
}

#tabelaVariaveis th:first-child {
    text-align: left;
    width: 220px;
}

#tabelaVariaveis tbody td {
    padding: 6px 4px !important;
    border: 1px solid #e5e7eb !important;
}

.var-title {
    background: #f3f4f6;
    font-weight: bold;
    padding: 8px 6px !important;
    border-right: 2px solid #d1d5db !important;
}

#tabelaVariaveis tbody tr:hover td {
    background: #fef3c7 !important;
    transition: background-color 0.15s ease;
}

#tabelaVariaveis tbody tr:hover .var-title {
    background: #fcd34d !important;
}

</style>

</head>
<body>

<div class="container-fluid mt-3">

    <div class="header-card d-flex justify-content-between align-items-center flex-wrap gap-3">
        <div>
            <h4 class="mb-1">📘 Planejamento Orçamentário</h4>
            <small class="text-secondary">
                Exercício: <span id="lblExercicio">--</span> • 
                Centro de Custo: <span id="lblCentroCusto">--</span> • 
                Moeda: <span id="lblMoeda">--</span>
            </small>

            <div class="mt-2 d-flex align-items-center gap-2 flex-wrap">
                <div class="input-group input-group-sm" style="max-width: 360px;">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" id="busca" class="form-control" placeholder="Pesquisar conta (código, nome ou ID)...">
                    <button class="btn btn-outline-secondary" type="button" id="btnLimparBusca" title="Limpar">&times;</button>
                </div>
                <small class="text-muted" style="white-space: nowrap;">⏎ Enter ou F3</small>
                <small class="text-muted" id="buscaInfo" style="white-space: nowrap;"></small>
            </div>
        </div>

        <div class="d-flex align-items-center gap-2">
            <button class="btn btn-outline-secondary btn-sm" onclick="history.back()">← Voltar</button>
        </div>
    </div>

    <!-- TABELA PRINCIPAL -->
    <div style="
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 20px;
        background: white;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        overflow: hidden;
    ">
        <div style="
            overflow-x: auto;
            overflow-y: auto;
            max-height: calc(100vh - 420px);
        ">
            <table class="table table-bordered table-sm table-fixed" id="tabelaOrcamento" style="margin-bottom: 0;">
                <thead>
                    <tr>
                        <th class="col-conta">Conta</th>
                        <?php
                        $meses = ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"];
                        foreach ($meses as $m): ?>
                            <th><?= $m ?></th>
                        <?php endforeach; ?>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody id="tbodyOrcamento"></tbody>
            </table>
        </div>
    </div>

    <!-- MÓDULO DE VARIÁVEIS -->
    <div class="card mt-3 mb-5 border-0 shadow-sm">
        <div class="card-header bg-primary text-white py-2">
            <strong>📊 Variáveis de Planejamento</strong>
        </div>
        <div class="card-body p-0">
            <div id="boxVariaveisPlanejamento" style="
                overflow-x: auto;
                overflow-y: auto;
                max-height: 400px;
            ">
                <table class="table table-bordered table-sm mb-0" id="tabelaVariaveis">
                    <thead>
                        <tr>
                            <th>Variável</th>
                            <?php foreach ($meses as $m): ?>
                                <th><?= $m ?></th>
                            <?php endforeach; ?>
                            <th>Total Anual</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyVariaveis"></tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>

const cdorcamento = <?= $cdorcamento ?>;

/* -------------- NOVO (PARTE 1): Capturar o expand -------------- */
const expand = parseInt(new URLSearchParams(window.location.search).get("expand")) || null;

let simboloMoeda = "";
let formatoMoeda = "";
let raiz = [];
let mapaId = {};
let mapaCd = {};

$(document).ready(() => carregarContas());

/* ======================================================
   CARREGAR CONTAS DO ORÇAMENTO
====================================================== */
function carregarContas() {

    fetch(`?m=orcamentodet_actions&ajax=listar_contas&cdorcamento=${cdorcamento}`)
    .then(r => r.json())
    .then(ret => {
        console.log('Resposta listar_contas:', ret);
        
        if (!ret.ok) {
            alert('❌ Erro: ' + (ret.msg || 'Não foi possível carregar contas'));
            return;
        }

        simboloMoeda = ret.moeda;
        formatoMoeda = ret.formato;

        $("#lblMoeda").text(ret.moeda);
        $("#lblExercicio").text(ret.exercicio);
        $("#lblCentroCusto").text(ret.centrocusto);

        // Garantir que ret.dados é um array
        if (!Array.isArray(ret.dados)) {
            console.error('ret.dados não é um array:', ret.dados);
            ret.dados = [];
        }

        montarArvore(ret.dados);

        /* -------------- NOVO (PARTE 2): Expandir a conta ao voltar -------------- */
        if (expand && mapaId[expand]) {
            let n = mapaId[expand];
            while (n) {
                n.expanded = true;
                n = mapaCd[n.pai];
            }
        }

        somarArvore();
        renderTabela();
    })
    .catch(err => {
        console.error('Erro ao carregar contas:', err);
        alert('❌ Erro na requisição: ' + err.message);
    });
}

/* ======================================================
   MONTAR ÁRVORE CONTÁBIL
====================================================== */
function montarArvore(lista) {

    if (!Array.isArray(lista)) {
        console.error('montarArvore: lista não é um array válido', lista);
        lista = [];
    }

    raiz = [];
    mapaId = {};
    mapaCd = {};

    lista.forEach(c => {

        const node = {
            id: c.cdcontacontabil,
            cd: c.cdconta,
            pai: c.cdcontapai,
            desc: c.dsconta,
            tipo: c.fltipo,
            orcados: c.orcados,
            filhos: [],
            expanded: false,
            nivel: 0
        };

        mapaId[node.id] = node;
        mapaCd[node.cd] = node;
    });

    Object.values(mapaCd).forEach(n => {
        if (n.pai && mapaCd[n.pai]) {
            let p = mapaCd[n.pai];
            n.nivel = p.nivel + 1;
            p.filhos.push(n);
        } else {
            raiz.push(n);
        }
    });

    raiz.sort((a,b)=>a.cd.localeCompare(b.cd));
    Object.values(mapaCd).forEach(
        n => n.filhos.sort((a,b)=>a.cd.localeCompare(b.cd))
    );
}

/* ======================================================
   SOMAR ÁRVORE (CASCATA)
====================================================== */
function somarArvore() {
    function somarNode(node) {
        if (node.tipo === "A") return node.orcados;

        let soma = Array(12).fill(0);

        node.filhos.forEach(f => {
            let vf = somarNode(f);
            for (let i = 0; i < 12; i++) soma[i] += Number(vf[i]);
        });

        node.orcados = soma;
        return soma;
    }

    raiz.forEach(r => somarNode(r));
}

/* ======================================================
   RENDER TABELA PRINCIPAL
====================================================== */
function renderTabela() {

    const tbody = $("#tbodyOrcamento");
    tbody.empty();

    raiz.forEach(n => renderLinha(tbody, n));

    aplicarZebra();

    carregarVariaveisPlanejamento(mapaId);
}

// Re-render da tabela sem recarregar variáveis (usado na busca)
function renderTabelaSomente() {
    const tbody = $("#tbodyOrcamento");
    tbody.empty();
    raiz.forEach(n => renderLinha(tbody, n));
    aplicarZebra();
}

/* ======================================================
   ZEBRA
====================================================== */
function aplicarZebra() {
    $("#tbodyOrcamento tr").each(function(index) {
        $(this).removeClass("zebra-even zebra-odd");
        if (index % 2 === 0) $(this).addClass("zebra-even");
        else $(this).addClass("zebra-odd");
    });
}

/* ======================================================
   RENDERIZAR LINHA
====================================================== */
function renderLinha(tbody, n) {

    const tr = $("<tr></tr>").attr("data-id", n.id);
    const indent = n.nivel * 16;

    let expandBtn = "";

    if (n.tipo === "S") {
        expandBtn = `
            <span class="tree-btn" onclick="toggleExpand(${n.id}); event.stopPropagation();">
                ${n.expanded ? "−" : "+"}
            </span>`;
    } else {
        expandBtn = `<span class="tree-leaf">•</span>`;
    }

    let addBtn = (n.tipo === "A")
        ? `
        <span class="btn-add-filho" onclick="abrirFilhos(${n.id}); event.stopPropagation();" title="Adicionar lançamento">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
                <path stroke="#0d6efd" stroke-width="2" d="M12 5v14m7-7H5"/>
            </svg>
        </span>`
        : "";

    let descHtml = n.tipo === "S"
        ? `<strong>${n.desc}</strong>`
        : n.desc;

    tr.append(`
        <td class="tree-cell">
            <span class="tree-indent" style="width:${indent}px"></span>
            ${expandBtn}
            <span class="desc-conta">${descHtml}</span>
            <span class="text-muted" style="font-size: 0.85em;">(${n.id})</span>
            ${addBtn}
        </td>
    `);

    let total = 0;

    n.orcados.forEach(v => {
        total += Number(v);
        let valorHtml = n.tipo === "S" ? `<strong>${formatar(v)}</strong>` : formatar(v);
        tr.append(`
            <td class="${n.tipo === "S" ? "valor-sintetico" : ""}">
                <div class="valor-analitico">${valorHtml}</div>
            </td>
        `);
    });

    let totalHtml = n.tipo === "S" ? `<strong>${formatar(total)}</strong>` : formatar(total);
    tr.append(`<td class="${n.tipo === "S" ? "valor-sintetico" : ""}"><div class="valor-analitico">${totalHtml}</div></td>`);

    tbody.append(tr);

    if (n.expanded)
        n.filhos.forEach(f => renderLinha(tbody, f));
}

/* ======================================================
   EXPANDIR / RETRAIR
====================================================== */
function toggleExpand(id) {
    mapaId[id].expanded = !mapaId[id].expanded;
    renderTabela();
}

/* ======================================================
   ABRIR MÓDULO DE FILHOS
====================================================== */
function abrirFilhos(cdconta) {

    fetch("?m=orcamentodet_actions&ajax=criar_orcamentodet", {
        method: "POST",
        headers: {"Content-Type":"application/x-www-form-urlencoded"},
        body: new URLSearchParams({
            cdorcamento,
            cdcontacontabil: cdconta,
            anoref: $("#lblExercicio").text()
        })
    })
    .then(r => r.json())
    .then(res => {

        if (!res.ok) {
            alert(res.msg);
            return;
        }

        // Passa expand para reabrir árvore na volta
        window.location.href =
            `index.php?m=orcamentodetfilho&cdorcamentodet=${res.cdorcamentodet}`;
    });
}

/* ======================================================
   FORMATAR MOEDA
====================================================== */
function formatar(v){
    v = Number(v)||0;

    if (formatoMoeda === "inteiro") {
        return simboloMoeda + " " +
               v.toLocaleString("pt-BR",{minimumFractionDigits:0});
    }

    return simboloMoeda + " " +
           v.toLocaleString("pt-BR",{minimumFractionDigits:2});
}

/* ======================================================
   VARIÁVEIS DE PLANEJAMENTO
====================================================== */
function carregarVariaveisPlanejamento(mapaId){

    let contas = {};

    Object.values(mapaId).forEach(n => {
        contas[n.id] = n.orcados;
    });

    fetch(`index.php?m=variavel_planejamento&ajax=calcular`, {
        method:"POST",
        headers: {"Content-Type":"application/json"},
        body: JSON.stringify({ contas })
    })
    .then(r=>r.json())
    .then(ret => {

        if (!ret.ok){
            console.error(ret.msg);
            return;
        }

        const tbody = $("#tbodyVariaveis");
        tbody.empty();

        let dados = ret.dados;

        dados.forEach(sec => {

            let tr = $("<tr></tr>");

            tr.append(`<td class="var-title">${sec.titulo}</td>`);

            for (let i=0; i<12; i++){
                let v = sec.mensal[i];

                if (sec.mascara === "percentual") {
                    v = (v * 100).toFixed(2) + "%";
                } else {
                    v = parent.formatar(v);
                }

                tr.append(`<td class="text-end">${v}</td>`);
            }

            let total = sec.total;

            if (sec.mascara === "percentual") {
                total = (total * 100).toFixed(2) + "%";
            } else {
                total = parent.formatar(total);
            }

            tr.append(`<td class="text-end"><strong>${total}</strong></td>`);

            tbody.append(tr);
        });

    });

}

/* ======================================================
   BUSCA EM TELA
====================================================== */
let resultadosBusca = [];
let indiceBuscaAtual = -1;

function normTxt(s) {
    return String(s || '')
        .toLowerCase()
        .normalize('NFD')
        .replace(/[\u0300-\u036f]/g, '');
}

function expandirCaminhoAteRaiz(node) {
    let n = node;
    while (n) {
        n.expanded = true;
        n = (n.pai && mapaCd[n.pai]) ? mapaCd[n.pai] : null;
    }
}

function colapsarTudoNivel0() {
    Object.values(mapaId || {}).forEach(n => {
        if (n) n.expanded = false;
    });
    renderTabelaSomente();
}

function selecionarEExibirConta(id) {
    const node = mapaId[id];
    if (!node) return;

    // garante que o caminho até a raiz esteja expandido
    expandirCaminhoAteRaiz(node);

    // re-render somente a tabela para refletir expand
    renderTabelaSomente();

    // destaca e faz scroll
    $('#tbodyOrcamento tr').removeClass('highlight-row');
    const $row = $(`#tbodyOrcamento tr[data-id="${id}"]`);
    if ($row.length) {
        $row.addClass('highlight-row');
        $row[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
}

function buscarNaTela(termo) {
    resultadosBusca = [];
    indiceBuscaAtual = -1;

    if (!termo) {
        $('#tbodyOrcamento tr').removeClass('highlight-row');
        $('#buscaInfo').text('');
        colapsarTudoNivel0();
        return;
    }

    const t = normTxt(termo.trim());

    // Busca no dataset completo (inclui contas ainda não renderizadas por estarem colapsadas)
    Object.values(mapaId).forEach(n => {
        const hay = normTxt(`${n.cd} ${n.desc} ${n.id}`);
        if (hay.includes(t)) {
            resultadosBusca.push(n.id);
        }
    });

    // ordena por código (e depois por id) para navegação previsível
    resultadosBusca.sort((a, b) => {
        const na = mapaId[a];
        const nb = mapaId[b];
        const ca = String(na?.cd || '');
        const cb = String(nb?.cd || '');
        if (ca !== cb) return ca.localeCompare(cb);
        return Number(a) - Number(b);
    });

    const $info = $('#buscaInfo');
    if (!resultadosBusca.length) {
        $('#tbodyOrcamento tr').removeClass('highlight-row');
        $info.text('Nenhuma conta encontrada');
        return;
    }

    $info.text(`1/${resultadosBusca.length}`);
    navegarResultado(1);
}

function navegarResultado(dir) {
    if (!resultadosBusca.length) return;

    indiceBuscaAtual += dir;
    if (indiceBuscaAtual >= resultadosBusca.length) indiceBuscaAtual = 0;
    if (indiceBuscaAtual < 0) indiceBuscaAtual = resultadosBusca.length - 1;

    const id = resultadosBusca[indiceBuscaAtual];
    selecionarEExibirConta(id);

    const $info = $('#buscaInfo');
    if ($info.length) {
        $info.text(`${indiceBuscaAtual + 1}/${resultadosBusca.length}`);
    }
}

// Eventos de busca
$('#busca').on('input', function() {
    const termo = $(this).val().trim();
    buscarNaTela(termo);
});

$('#btnLimparBusca').on('click', function() {
    $('#busca').val('').focus();
    buscarNaTela('');
});

// F3 / Shift+F3 para próxima/anterior ocorrência
$(document).on('keydown', function(e) {
    if (e.key === 'F3') {
        e.preventDefault();
        navegarResultado(e.shiftKey ? -1 : 1);
        return;
    }

    // ENTER no campo de busca
    if (e.key === 'Enter' && document.activeElement.id === 'busca') {
        e.preventDefault();
        navegarResultado(1);
    }
});

</script>
</body>
</html>
