<?php
/**
 * Depto de Engenharia e Automação - Master Automação - Autor: Derlivon Silva
 *
 * Vendas / Pré-Notas — pedidos e orçamentos (tabela PEDIDOS_CAB).
 * 2 endpoints paralelos:
 *   1. /api/vendas/pre-notas → listagem completa
 *   2. /api/vendas/pre-notas/resumo → KPIs, gráficos, top10
 * Quando a loja não usa o módulo de pedidos, mostra estado vazio amigável.
 */
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-file-earmark-plus me-2 text-accent"></i>Pré-Notas</h1>
</div>
<?php include __DIR__ . '/_submenu.php' ?>

<?php $actionUrl = '/vendas/pre-notas'; include __DIR__ . '/_filtro.php'; ?>

<!-- ── KPIs (4) ────────────────────────────────────────────────────────────── -->
<div class="row g-3 mb-3" id="kpi-grid">
    <?php for ($i = 0; $i < 4; $i++): ?>
    <div class="col-6 col-md-3">
        <div class="pbi-kpi-card h-100">
            <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>
    </div>
    <?php endfor; ?>
</div>
<div class="pbi-hint mb-3" style="margin-top:0">
    <strong>Pré-Nota</strong> = pedido ou orçamento de venda (tabela <code>PEDIDOS_CAB</code> do Fire).
    <strong>Aprovado</strong> = pedido confirmado pelo cliente. <strong>Taxa de aprovação</strong> = aprovados ÷ total.
</div>

<!-- ── Estado vazio (escondido por padrão, mostrado quando 0 pedidos) ─────── -->
<div id="estado-vazio" class="pbi-card text-center py-5 d-none">
    <i class="bi bi-inbox text-muted" style="font-size:4rem"></i>
    <h4 class="mt-3">Nenhum pedido ou orçamento no período</h4>
    <p class="text-muted px-4">
        Esta loja parece não usar o módulo de <strong>Pedidos / Orçamentos</strong> do Fire Sistemas
        (a tabela <code>PEDIDOS_CAB</code> está vazia no período selecionado).<br>
        Se sua operação não emite orçamentos prévios, esta tela pode ser ignorada.<br>
        <small>Se for o caso de começar a usar, peça ao implantador pra ativar o cadastro de pedidos no PDV/retaguarda.</small>
    </p>
</div>

<!-- ── Gráficos + Top 10 (escondidos quando vazio) ────────────────────────── -->
<div id="card-graficos" class="row g-3 mb-3 d-none">
    <div class="col-12 col-lg-8">
        <div class="pbi-card h-100">
            <div class="pbi-card-header"><i class="bi bi-graph-up me-2"></i>Pedidos e valor por dia</div>
            <div id="chart-pordia" style="height:340px"></div>
        </div>
    </div>
    <div class="col-12 col-lg-4">
        <div class="pbi-card h-100">
            <div class="pbi-card-header"><i class="bi bi-trophy me-2"></i>Top 10 maiores pedidos</div>
            <div id="top-maiores" style="max-height:340px;overflow-y:auto">
                <div class="px-3 py-4 text-center text-muted"><span class="spinner-border spinner-border-sm me-2"></span>Carregando…</div>
            </div>
        </div>
    </div>
    <div class="col-12 col-lg-6">
        <div class="pbi-card h-100">
            <div class="pbi-card-header"><i class="bi bi-tag me-2"></i>Por tipo de pedido</div>
            <div id="chart-tipo" style="height:300px"></div>
        </div>
    </div>
    <div class="col-12 col-lg-6">
        <div class="pbi-card h-100">
            <div class="pbi-card-header"><i class="bi bi-person me-2"></i>Top usuários (quem registrou)</div>
            <div id="card-usuarios">
                <div class="px-3 py-4 text-center text-muted"><span class="spinner-border spinner-border-sm me-2"></span>Carregando…</div>
            </div>
        </div>
    </div>
</div>

<!-- ── Listagem (escondida quando vazio) ──────────────────────────────────── -->
<div class="pbi-card d-none" id="card-prenotas">
    <div class="pbi-card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span><i class="bi bi-list-ul me-2"></i>Listagem de Pré-Notas</span>
        <div class="d-flex gap-2 align-items-center">
            <select id="filtro-status" class="form-select form-select-sm" style="width:auto">
                <option value="">Todos os status</option>
                <option value="aprovados">Apenas aprovados</option>
                <option value="pendentes">Apenas pendentes</option>
            </select>
            <input type="search" id="filtro-busca" class="form-control form-control-sm" placeholder="Buscar nº, cliente, usuário..." style="width:240px">
            <small class="text-muted" id="prenotas-badge">—</small>
        </div>
    </div>
    <div class="pbi-hint mb-2" style="margin-top:0;padding-left:1rem;padding-right:1rem">
        Cada linha é um pedido. Linhas com fundo verde-claro estão <strong>aprovadas</strong>.
    </div>
    <div id="prenotas-body" style="max-height:600px;overflow-y:auto">
        <div class="table-responsive">
            <table class="pbi-table">
                <thead><tr>
                    <th>Nº</th><th>Data / Hora</th><th>Previsão</th><th>Tipo</th>
                    <th>Cliente</th><th>Usuário</th><th>Status</th><th class="text-end">Valor</th>
                </tr></thead>
                <tbody>
                <?php for ($i = 0; $i < 6; $i++): ?>
                <tr>
                    <?php foreach ([50,90,80,70,140,90,70,80] as $w): ?>
                    <td><span class="pbi-skeleton d-inline-block" style="width:<?= $w ?>px;height:.75rem;border-radius:3px">&nbsp;</span></td>
                    <?php endforeach; ?>
                </tr>
                <?php endfor; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="/assets/js/echarts.min.js?v=<?= \App\Core\Versao::ATUAL ?>"></script>
<script>
window.__VENDAS = {
    dataIni: <?= json_encode($filtros['data_ini']) ?>,
    dataFim: <?= json_encode($filtros['data_fim']) ?>,
    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; }
.pbi-row-aprovado { background:rgba(16,185,129,0.06) !important; }
.pbi-status-badge { display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.7rem; font-weight:600; }
.pbi-status-aprovado { background:rgba(16,185,129,.15); color:#059669; border:1px solid rgba(16,185,129,.3); }
.pbi-status-pendente { background:rgba(245,158,11,.15); color:#d97706; border:1px solid rgba(245,158,11,.3); }
.top-maior-item { display:flex; justify-content:space-between; align-items:center; padding:.6rem .85rem; border-bottom:1px solid var(--pbi-border, #e2e8f0); gap:.5rem; }
.top-maior-item:last-child { border-bottom:none; }
.top-maior-item .tmi-rank { color:var(--pbi-muted); font-size:.8rem; min-width:1.5rem; }
.top-maior-item .tmi-cliente { font-size:.85rem; }
.top-maior-item .tmi-meta { font-size:.72rem; color:var(--pbi-muted); }
.top-maior-item .tmi-val { font-weight:700; color:var(--pbi-accent); white-space:nowrap; }
</style>

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

var ini = window.__VENDAS.dataIni;
var fim = window.__VENDAS.dataFim;
var qs  = '?data_ini=' + encodeURIComponent(ini) + '&data_fim=' + encodeURIComponent(fim);
var TODOS = [];
var STATUS_FILTRO = '';
var BUSCA = '';

function fmtR(v) { return 'R$ ' + parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2}); }
function fmtRk(v) { var n=parseFloat(v||0); if(Math.abs(n)>=1000) return 'R$ '+(n/1000).toLocaleString('pt-BR',{minimumFractionDigits:1,maximumFractionDigits:1})+'k'; return fmtR(n); }
function fmtN(v,d) { d=d===undefined?0:d; return parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:d,maximumFractionDigits:d}); }
function fmtPct(v,d) { d=d===undefined?1:d; return fmtN(v,d)+'%'; }
function fmtData(s) { if(!s) return '—'; var p=String(s).substring(0,10).split('-'); return p.length===3?p[2]+'/'+p[1]+'/'+p[0]:s; }
function fmtHora(s) { if(!s) return ''; var str=String(s); if(str.indexOf(':')>=0) return str.substring(0,5); if(str.length>=4) return str.substring(0,2)+':'+str.substring(2,4); return ''; }
function esc(s) { var d=document.createElement('div'); d.textContent=s==null?'':String(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 atualizarAnosAbas(anos) {
    var container = document.querySelector('.pbi-periodo-tabs');
    if (!container) return;
    var actionUrl = window.__VENDAS.actionUrl;
    var anoAtual  = parseInt(ini.substring(0,4));
    var hoje      = pbiHoje();
    var html = anos.map(function(a){
        a=parseInt(a);
        var cls=(a===anoAtual)?' active':'';
        return '<a href="'+actionUrl+'?data_ini='+a+'-01-01&data_fim='+a+'-12-31" class="pbi-tab-ano'+cls+'" onclick="setPeriodoSession('+a+',0)">'+a+'</a>';
    }).join('');
    var hojeBtn='<a href="'+actionUrl+'?data_ini='+hoje+'&data_fim='+hoje+'" class="pbi-tab-ano"><i class="bi bi-broadcast me-1"></i>Hoje</a>';
    container.innerHTML = hojeBtn + html;
}

function mostrarVazio() {
    document.getElementById('estado-vazio').classList.remove('d-none');
    document.getElementById('card-graficos').classList.add('d-none');
    document.getElementById('card-prenotas').classList.add('d-none');
}
function mostrarConteudo() {
    document.getElementById('estado-vazio').classList.add('d-none');
    document.getElementById('card-graficos').classList.remove('d-none');
    document.getElementById('card-prenotas').classList.remove('d-none');
}

/* ── KPIs ───────────────────────────────────────────────────────────────── */
function renderKpis(k) {
    if (!k || !k.qtd) {
        // 4 cards "zero"
        var zero = [
            {label:'Total do Período', val:'R$ 0,00', cls:'text-muted'},
            {label:'Pedidos', val:'0', cls:'text-muted'},
            {label:'Ticket Médio', val:'R$ 0,00', cls:'text-muted'},
            {label:'Taxa de aprovação', val:'—', cls:'text-muted'},
        ];
        document.getElementById('kpi-grid').innerHTML = zero.map(function(d){
            return '<div class="col-6 col-md-3"><div class="pbi-kpi-card h-100"><div class="pbi-kpi-label">'+d.label+'</div>'
                 + '<div class="pbi-kpi-value '+d.cls+'">'+d.val+'</div></div></div>';
        }).join('');
        return;
    }
    var ticket = k.qtd > 0 ? (k.total / k.qtd) : 0;
    var taxa = (k.taxa_aprovacao !== null) ? fmtPct(k.taxa_aprovacao) : '—';
    var defs=[
        {label:'Total do Período', val:fmtR(k.total), cls:'text-accent'},
        {label:'Pedidos', val:fmtN(k.qtd,0), cls:''},
        {label:'Ticket Médio', val:fmtR(ticket), cls:''},
        {label:'Taxa de aprovação', val:taxa+' ('+fmtN(k.aprovados_qtd,0)+' apr.)', cls: k.taxa_aprovacao>=50 ? 'text-success' : 'text-warning'},
    ];
    document.getElementById('kpi-grid').innerHTML = defs.map(function(d){
        return '<div class="col-6 col-md-3"><div class="pbi-kpi-card h-100"><div class="pbi-kpi-label">'+d.label+'</div>'
             + '<div class="pbi-kpi-value '+d.cls+'">'+d.val+'</div></div></div>';
    }).join('');
}

/* ── Tabela com filtros locais ──────────────────────────────────────────── */
function renderTabela() {
    var filtradas = TODOS.filter(function(n){
        if (STATUS_FILTRO === 'aprovados' && n.APROVADO !== 'S') return false;
        if (STATUS_FILTRO === 'pendentes' && n.APROVADO === 'S') return false;
        if (BUSCA) {
            var hay = ((n.NR_PEDIDO||'')+' '+(n.CLIENTE||'')+' '+(n.USUARIO||'')+' '+(n.TIPO_DESC||'')).toLowerCase();
            if (hay.indexOf(BUSCA.toLowerCase()) === -1) return false;
        }
        return true;
    });

    document.getElementById('prenotas-badge').textContent = filtradas.length + ' de ' + TODOS.length + ' pedidos';
    if (!filtradas.length) {
        document.getElementById('prenotas-body').innerHTML =
            '<div class="text-center text-muted py-5"><i class="bi bi-search fs-2"></i><p class="mt-2">Nenhum pedido com esses filtros.</p></div>';
        return;
    }

    var rows = filtradas.map(function(n){
        var aprov = n.APROVADO === 'S';
        var rowCls = aprov ? ' class="pbi-row-aprovado"' : '';
        var statusBadge = aprov
            ? '<span class="pbi-status-badge pbi-status-aprovado"><i class="bi bi-check-circle me-1"></i>Aprovado</span>'
            : '<span class="pbi-status-badge pbi-status-pendente"><i class="bi bi-hourglass-split me-1"></i>Pendente</span>';
        return '<tr'+rowCls+'>'
            +'<td class="fw-semibold text-accent">'+esc(n.NR_PEDIDO||'')+'</td>'
            +'<td class="small">'+fmtData(n.DT_EMISSAO)+' <span class="text-muted">'+fmtHora(n.HORA_EMISSAO)+'</span></td>'
            +'<td class="small text-muted">'+fmtData(n.DT_PREVISAO)+'</td>'
            +'<td class="small">'+esc(n.TIPO_DESC||n.COD_TIPO_PEDIDO||'—')+'</td>'
            +'<td class="small">'+esc(n.CLIENTE||'—')+'</td>'
            +'<td class="small text-muted">'+esc(n.USUARIO||'—')+'</td>'
            +'<td>'+statusBadge+'</td>'
            +'<td class="text-end fw-semibold">'+fmtR(n.TOTAL_PEDIDO)+'</td>'
            +'</tr>';
    }).join('');

    document.getElementById('prenotas-body').innerHTML =
        '<div class="table-responsive"><table class="pbi-table">'
        +'<thead><tr><th style="width:60px">Nº</th><th style="width:120px">Data / Hora</th>'
        +'<th style="width:90px">Previsão</th><th style="width:110px">Tipo</th>'
        +'<th>Cliente</th><th>Usuário</th><th style="width:120px">Status</th>'
        +'<th class="text-end" style="width:110px">Valor</th></tr></thead>'
        +'<tbody>'+rows+'</tbody></table></div>';
}

/* ── Gráfico por dia ────────────────────────────────────────────────────── */
var chartDia=null, chartTipo=null;
function desenharPorDia(porDia) {
    var el = document.getElementById('chart-pordia');
    if (!el || !window.echarts) return;
    if (!porDia || !porDia.length) { el.innerHTML='<div class="text-center text-muted py-5">Sem dados.</div>'; return; }
    var datas = porDia.map(function(d){var p=String(d.DIA).substring(0,10).split('-');return p[2]+'/'+p[1];});
    var qtds  = porDia.map(function(d){return parseInt(d.QTD)||0;});
    var fats  = porDia.map(function(d){return parseFloat(d.TOTAL)||0;});
    chartDia && chartDia.dispose();
    chartDia = echarts.init(el);
    chartDia.setOption({
        grid:{left:60, right:70, top:50, bottom:50, containLabel:true},
        tooltip:{trigger:'axis', formatter: function(arr){
            var s = arr[0].axisValue+'<br>';
            arr.forEach(function(a){ s += a.marker+a.seriesName+': '+(a.seriesName==='Valor'?fmtR(a.value):fmtN(a.value,0))+'<br>'; });
            return s;
        }},
        legend:{top:0},
        xAxis:{type:'category', data:datas},
        yAxis:[
            {type:'value', name:'Pedidos', axisLabel:{formatter:function(v){return fmtN(v,0);}}},
            {type:'value', name:'R$', position:'right', axisLabel:{formatter:fmtRk}}
        ],
        series:[
            {name:'Pedidos', type:'bar', data:qtds, itemStyle:{color:'#3b82f6', borderRadius:[6,6,0,0]}},
            {name:'Valor', type:'line', yAxisIndex:1, data:fats, smooth:true,
             lineStyle:{width:2.5, color:'#10b981'}, itemStyle:{color:'#10b981'}, symbolSize:7}
        ]
    });
}

/* ── Gráfico por tipo (donut) ───────────────────────────────────────────── */
function desenharPorTipo(porTipo) {
    var el = document.getElementById('chart-tipo');
    if (!el || !window.echarts) return;
    if (!porTipo || !porTipo.length) { el.innerHTML='<div class="text-center text-muted py-5">Sem dados.</div>'; return; }
    var data = porTipo.map(function(t){return {name:t.TIPO, value:parseFloat(t.TOTAL)||0};});
    chartTipo && chartTipo.dispose();
    chartTipo = echarts.init(el);
    chartTipo.setOption({
        tooltip:{trigger:'item', formatter:function(p){return p.name+'<br>'+fmtR(p.value)+' ('+fmtPct(p.percent)+')';}},
        legend:{bottom:0, type:'scroll'},
        color:['#3b82f6','#10b981','#f59e0b','#ec4899','#8b5cf6','#06b6d4'],
        series:[{type:'pie', radius:['45%','72%'], center:['50%','45%'],
                 avoidLabelOverlap:true, label:{formatter:'{b}\n{d}%', fontSize:11},
                 data:data}]
    });
}

/* ── Top 10 maiores pedidos ─────────────────────────────────────────────── */
function renderTopMaiores(top) {
    var el = document.getElementById('top-maiores');
    if (!top || !top.length) { el.innerHTML='<div class="text-center text-muted py-4">Sem dados.</div>'; return; }
    el.innerHTML = top.map(function(n,i){
        var aprov = n.APROVADO === 'S';
        var statusIcon = aprov ? '<i class="bi bi-check-circle-fill text-success" title="Aprovado"></i>' : '<i class="bi bi-hourglass-split text-warning" title="Pendente"></i>';
        return '<div class="top-maior-item">'
            + '<div class="d-flex align-items-center gap-2" style="min-width:0; flex:1">'
            + '  <span class="tmi-rank">#'+(i+1)+'</span>'
            + '  <div style="min-width:0">'
            + '    <div class="tmi-cliente text-truncate">'+esc(n.CLIENTE||'(sem cliente)')+'</div>'
            + '    <div class="tmi-meta">'+statusIcon+' Pedido '+esc(n.NR_PEDIDO)+' · '+fmtData(n.DT_EMISSAO)+'</div>'
            + '  </div>'
            + '</div>'
            + '<div class="tmi-val">'+fmtR(n.TOTAL_PEDIDO)+'</div>'
            + '</div>';
    }).join('');
}

/* ── Top usuários (tabela compacta) ─────────────────────────────────────── */
function renderUsuarios(lista) {
    var el = document.getElementById('card-usuarios');
    if (!lista || !lista.length) { el.innerHTML='<div class="text-center text-muted py-4">Sem dados.</div>'; return; }
    var rows = lista.map(function(u,i){
        return '<tr><td class="text-muted">'+(i+1)+'</td>'
            +'<td class="fw-semibold">'+esc(u.USUARIO)+'</td>'
            +'<td class="text-end text-muted">'+fmtN(u.QTD,0)+'</td>'
            +'<td class="text-end fw-semibold text-accent">'+fmtR(u.TOTAL)+'</td></tr>';
    }).join('');
    el.innerHTML =
        '<div class="table-responsive" style="max-height:300px;overflow-y:auto">'
        +'<table class="pbi-table"><thead><tr><th>#</th><th>Usuário</th>'
        +'<th class="text-end">Pedidos</th><th class="text-end">Total</th></tr></thead>'
        +'<tbody>'+rows+'</tbody></table></div>';
}

/* ── Boot ───────────────────────────────────────────────────────────────── */
window.addEventListener('DOMContentLoaded', function () {
    apiFetch('/api/vendas/pre-notas' + qs + '&limite=1000')
        .then(function(d) {
            TODOS = d.notas || [];
            if (d.anos && d.anos.length) atualizarAnosAbas(d.anos);
            renderTabela();
        })
        .catch(function(e) {
            showErr('prenotas-body', 'Erro: ' + e.message);
        });

    apiFetch('/api/vendas/pre-notas/resumo' + qs)
        .then(function(d) {
            var r = d.resumo || {};
            renderKpis(r.kpis);
            if (!r.kpis || r.kpis.qtd === 0) {
                mostrarVazio();
                return;
            }
            mostrarConteudo();
            desenharPorDia(r.por_dia);
            desenharPorTipo(r.por_tipo);
            renderTopMaiores(r.top_maiores);
            renderUsuarios(r.por_usuario);
        })
        .catch(function(e) {
            showErr('kpi-grid', 'Erro ao carregar resumo: ' + e.message);
        });

    // Filtros
    document.getElementById('filtro-status').addEventListener('change', function(e){ STATUS_FILTRO = e.target.value; renderTabela(); });
    var tBusca;
    document.getElementById('filtro-busca').addEventListener('input', function(e){
        clearTimeout(tBusca); var v = e.target.value;
        tBusca = setTimeout(function(){ BUSCA = v; renderTabela(); }, 200);
    });

    window.addEventListener('resize', function(){
        if (chartDia) chartDia.resize();
        if (chartTipo) chartTipo.resize();
    });
});

})();
</script>
