<?php
/**
 * Financeiro / Contas a Receber — shell instantâneo.
 * KPIs e tabela carregados via fetch() depois do DOM pronto.
 */
$actionUrl = '/financeiro/contas-receber';
$situacao  = $_GET['situacao'] ?? 'aberto';
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-arrow-down-circle me-2 text-success"></i>Financeiro</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<?php $mostrarDatePicker = false; include __DIR__ . '/_filtro.php'; ?>

<form method="get" action="/financeiro/contas-receber" class="pbi-filtro-vendas mb-3">
    <div class="pbi-filtro-row flex-wrap gap-2">
        <div class="pbi-filtro-field"><label class="pbi-filtro-label">De</label>
            <input type="date" name="data_ini" value="<?= htmlspecialchars($filtros['dataIni'] ?? '') ?>" class="pbi-filtro-input"></div>
        <div class="pbi-filtro-field"><label class="pbi-filtro-label">Até</label>
            <input type="date" name="data_fim" value="<?= htmlspecialchars($filtros['dataFim'] ?? '') ?>" class="pbi-filtro-input"></div>
        <div class="pbi-filtro-field"><label class="pbi-filtro-label">Situação</label>
            <select name="situacao" class="pbi-filtro-input">
                <option value="aberto" <?= $situacao === 'aberto' ? 'selected' : '' ?>>Em aberto</option>
                <option value="todos"  <?= $situacao === 'todos'  ? 'selected' : '' ?>>Todos</option>
            </select></div>
        <button type="submit" class="pbi-btn-filtrar"><i class="bi bi-funnel-fill"></i> Filtrar</button>
    </div>
</form>

<!-- ── KPIs skeleton ─────────────────────────────────────────────────────── -->
<div class="pbi-kpi-grid mb-4" id="kpi-grid">
    <?php for ($i = 0; $i < 3; $i++): ?>
    <div class="pbi-kpi-card">
        <div class="pbi-kpi-label pbi-skeleton" style="width:60%;height:.8rem;border-radius:4px">&nbsp;</div>
        <div class="pbi-kpi-value pbi-skeleton mt-2" style="width:80%;height:1.6rem;border-radius:4px">&nbsp;</div>
    </div>
    <?php endfor; ?>
</div>
<div class="pbi-hint mb-3" style="margin-top:0">Total a Receber = tudo que clientes ainda te devem. Vencidos = títulos que passaram do prazo e não foram pagos (inadimplência). Em aberto = o que falta receber dos títulos deste período.</div>

<!-- ── Tabela de Contas a Receber (async) ────────────────────────────────── -->
<div class="pbi-card" id="card-receber">
    <div class="pbi-card-header d-flex justify-content-between">
        <span><i class="bi bi-arrow-down-circle me-2 text-success"></i>Títulos a Receber</span>
        <small class="text-muted" id="receber-badge">
            <span class="pbi-skeleton d-inline-block" style="width:80px;height:.75rem;border-radius:3px">&nbsp;</span>
        </small>
    </div>
    <div id="receber-body">
        <div class="pbi-hint mb-2" style="margin-top:0">Lista do que clientes têm a pagar a você. Valor = total do título · Pago = quanto o cliente já pagou · Saldo = quanto ainda falta receber. Linhas em vermelho estão vencidas.</div>
        <div class="table-responsive">
            <table class="pbi-table">
                <thead><tr>
                    <th>Nota</th><th>Emissão</th><th>Vencimento</th>
                    <th>Cliente</th><th>Histórico</th>
                    <th class="text-end">Valor</th>
                    <th class="text-end">Pago</th>
                    <th class="text-end">Saldo</th>
                    <th>Status</th>
                </tr></thead>
                <tbody>
                <?php for ($i = 0; $i < 8; $i++): ?>
                <tr>
                    <?php for ($j = 0; $j < 9; $j++): ?>
                    <td><span class="pbi-skeleton d-inline-block" style="width:<?= [60,65,65,120,100,80,80,80,55][$j] ?>px;height:.75rem;border-radius:3px">&nbsp;</span></td>
                    <?php endfor; ?>
                </tr>
                <?php endfor; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
window.__FINANCEIRO = {
    dataIni:   <?= json_encode($filtros['dataIni']) ?>,
    dataFim:   <?= json_encode($filtros['dataFim']) ?>,
    situacao:  <?= json_encode($situacao) ?>,
    actionUrl: <?= json_encode($actionUrl) ?>
};
</script>

<style>
@keyframes pbi-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.pbi-skeleton {
  background: var(--pbi-border, #e2e8f0);
  animation: pbi-pulse 1.4s ease-in-out infinite;
  pointer-events: none;
  color: transparent !important;
}
</style>

<script>
(function () {
'use strict';

var ini      = window.__FINANCEIRO.dataIni;
var fim      = window.__FINANCEIRO.dataFim;
var situacao = window.__FINANCEIRO.situacao;
var qs       = '?data_ini=' + encodeURIComponent(ini) + '&data_fim=' + encodeURIComponent(fim) + '&situacao=' + encodeURIComponent(situacao);

function fmtR(v) {
    return 'R$ ' + parseFloat(v || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
}
function fmtN(v, d) {
    d = d === undefined ? 0 : d;
    return parseFloat(v || 0).toLocaleString('pt-BR', { minimumFractionDigits: d, maximumFractionDigits: d });
}
function fmtData(s) {
    if (!s) return '—';
    var str = String(s);
    return str.substring(8, 10) + '/' + str.substring(5, 7) + '/' + str.substring(0, 4);
}
function esc(s) {
    var d = document.createElement('div');
    d.textContent = s;
    return d.innerHTML;
}
function apiFetch(url) {
    return fetch(url, { credentials: 'same-origin' })
        .then(function (r) {
            if (!r.ok) return r.json().then(function (e) { throw new Error(e.erro || 'HTTP ' + r.status); });
            return r.json();
        });
}
function showErr(elId, msg) {
    var el = document.getElementById(elId);
    if (el) el.innerHTML = '<div class="px-3 py-3 alert alert-warning small">'
        + '<i class="bi bi-exclamation-triangle me-2"></i>' + esc(msg) + '</div>';
}

function renderKpis(kpis, linhas) {
    var totalAberto  = linhas.reduce(function (s, r) { return s + parseFloat(r.SALDO_TITULO || 0); }, 0);
    var defs = [
        { label: 'Total a Receber',     val: fmtR(kpis.A_RECEBER || 0),        cls: 'text-success', sub: linhas.length + ' títulos neste período' },
        { label: 'Vencidos',            val: fmtR(kpis.VENCIDOS_RECEBER || 0), cls: 'text-danger',  sub: '' },
        { label: 'Em aberto (período)', val: fmtR(totalAberto),                 cls: 'text-accent',  sub: '' },
    ];
    var html = defs.map(function (d) {
        return '<div class="pbi-kpi-card">'
             + '<div class="pbi-kpi-label">' + d.label + '</div>'
             + '<div class="pbi-kpi-value ' + d.cls + '">' + d.val + '</div>'
             + (d.sub ? '<div class="pbi-kpi-sub">' + d.sub + '</div>' : '')
             + '</div>';
    }).join('');
    document.getElementById('kpi-grid').innerHTML = html;
}

function renderLinhas(linhas) {
    document.getElementById('receber-badge').textContent = linhas.length + ' registros';
    if (!linhas.length) {
        document.getElementById('receber-body').innerHTML =
            '<p class="text-center text-muted py-4">Nenhum título encontrado.</p>';
        return;
    }
    var rows = linhas.map(function (r) {
        var vencido   = r.VENCIDO === 'S';
        var vencCls   = vencido ? 'text-danger fw-bold' : '';
        var rowCls    = vencido ? 'class="table-danger-soft"' : '';
        var statusHtml = vencido
            ? '<span class="pbi-badge pbi-badge-danger">Vencido</span>'
            : '<span class="pbi-badge pbi-badge-success">Em dia</span>';
        var serie = (r.SERIE || '').trim();
        var nota  = r.NR_NOTA + (serie ? '/' + serie : '');
        return '<tr ' + rowCls + '>'
            + '<td>' + esc(nota) + '</td>'
            + '<td>' + fmtData(r.DATA_EMISSAO) + '</td>'
            + '<td class="' + vencCls + '">' + fmtData(r.VENCIMENTO) + '</td>'
            + '<td>' + esc((r.CLIENTE || '—').substring(0, 30)) + '</td>'
            + '<td class="text-muted small">' + esc((r.HISTORICO || '').substring(0, 30)) + '</td>'
            + '<td class="text-end">' + fmtR(r.VALOR_TITULO || 0) + '</td>'
            + '<td class="text-end text-success">' + fmtR(r.PAGO || 0) + '</td>'
            + '<td class="text-end fw-bold">' + fmtR(r.SALDO_TITULO || 0) + '</td>'
            + '<td>' + statusHtml + '</td>'
            + '</tr>';
    }).join('');

    document.getElementById('receber-body').innerHTML =
        '<div class="pbi-hint mb-2" style="margin-top:0">Lista do que clientes têm a pagar a você. Valor = total do título · Pago = quanto o cliente já pagou · Saldo = quanto ainda falta receber. Linhas em vermelho estão vencidas.</div>'
        + '<div class="table-responsive">'
        + '<table class="pbi-table">'
        + '<thead><tr>'
        + '<th>Nota</th><th>Emissão</th><th>Vencimento</th>'
        + '<th>Cliente</th><th>Histórico</th>'
        + '<th class="text-end">Valor</th>'
        + '<th class="text-end">Pago</th>'
        + '<th class="text-end">Saldo</th>'
        + '<th>Status</th>'
        + '</tr></thead>'
        + '<tbody>' + rows + '</tbody>'
        + '</table></div>';
}

window.addEventListener('DOMContentLoaded', function () {
    var kpisData = null;
    var linhasData = null;

    function tryRenderKpis() {
        if (kpisData !== null && linhasData !== null) {
            renderKpis(kpisData, linhasData);
        }
    }

    apiFetch('/api/financeiro/kpis')
        .then(function (d) { kpisData = d.kpis || {}; tryRenderKpis(); })
        .catch(function (e) { showErr('kpi-grid', 'Erro ao carregar KPIs: ' + e.message); });

    apiFetch('/api/financeiro/contas-receber' + qs)
        .then(function (d) {
            linhasData = d.linhas || [];
            tryRenderKpis();
            renderLinhas(linhasData);
        })
        .catch(function (e) { showErr('receber-body', 'Erro ao carregar títulos: ' + e.message); });
});

})();
</script>
