<?php
// Depto de Engenharia e Automacao - Master Automacao - Autor: Derlivon Silva
?>
<div class="pbi-page-header">
    <div class="pbi-page-icon"><i class="bi bi-hourglass-split"></i></div>
    <div>
        <div class="pbi-page-title">Convênios — Aging (atrasos)</div>
        <div class="pbi-page-subtitle">Quanto cada convênio deve por faixa de dias em atraso — quanto mais escuro, mais perigoso</div>
    </div>
    <div class="ms-auto"><button class="btn btn-sm btn-outline-secondary" onclick="window.print()"><i class="bi bi-printer"></i> Imprimir / PDF</button></div>
</div>
<?php if (file_exists(__DIR__ . '/_submenu.php')) include __DIR__ . '/_submenu.php'; ?>

<div class="pbi-hint mb-3" style="margin-top:0">
    Considera apenas títulos <strong>em aberto</strong> (saldo &gt; 0) vinculados a algum convênio.
</div>

<div class="row g-3 mb-3" id="aging-cards">
    <?php for($i=0;$i<5;$i++): ?>
    <div class="col-12 col-md-6 col-xl"><div class="pbi-card h-100" style="border-left:4px solid #e2e8f0">
        <div class="pbi-card-body"><div class="pbi-skeleton" style="height:1rem;width:60%">&nbsp;</div><div class="pbi-skeleton mt-2" style="height:1.4rem;width:80%">&nbsp;</div></div>
    </div></div>
    <?php endfor; ?>
</div>

<div class="pbi-card">
    <div class="pbi-card-header"><i class="bi bi-bar-chart-fill me-2"></i>Distribuição do valor a receber por faixa de atraso</div>
    <div class="pbi-card-body">
        <div id="aging-chart" style="height:340px"></div>
    </div>
</div>

<script src="/assets/vendor/echarts.min.js"></script>
<script>
(function(){
'use strict';
function brl(v){return (v==null||isNaN(+v))?'—':(+v).toLocaleString('pt-BR',{style:'currency',currency:'BRL'});}
function num(v){return (v==null||isNaN(+v))?'—':(+v).toLocaleString('pt-BR');}
function esc(s){return String(s??'').replace(/[&<>"]/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]));}

var CORES = {
    'A_VENCER':  { cor:'#10b981', txt:'A vencer'   },
    'D_0_15':    { cor:'#facc15', txt:'0–15 dias'   },
    'D_16_30':   { cor:'#f59e0b', txt:'16–30 dias'  },
    'D_31_60':   { cor:'#f97316', txt:'31–60 dias'  },
    'D_61_MAIS': { cor:'#ef4444', txt:'+60 dias'    },
};
var ORDEM = ['A_VENCER','D_0_15','D_16_30','D_31_60','D_61_MAIS'];

fetch('/api/convenios/aging').then(r=>r.json()).then(j=>{
    if(!j.ok) throw new Error(j.erro||'erro');
    var aging = j.aging||{};
    var html = '';
    ORDEM.forEach(k=>{
        var f = aging[k] || {QTD:0,SALDO:0,DIAS:0};
        var c = CORES[k];
        html += '<div class="col-12 col-md-6 col-xl">'
          + '<div class="pbi-card h-100" style="border-left:4px solid '+c.cor+'">'
          + '<div class="pbi-card-body">'
          + '<div class="text-muted small text-uppercase fw-semibold" style="letter-spacing:.05em">'+c.txt+'</div>'
          + '<div class="fs-4 fw-bold" style="color:'+c.cor+'">'+brl(f.SALDO)+'</div>'
          + '<div class="text-muted small">'+num(f.QTD)+' título(s)'
          + (f.DIAS > 0 ? ' · média '+Math.round(f.DIAS)+' dias atraso' : '')+'</div>'
          + '</div></div></div>';
    });
    document.getElementById('aging-cards').innerHTML = html;

    // grafico bar
    var ch = echarts.init(document.getElementById('aging-chart'));
    ch.setOption({
        tooltip:{ trigger:'axis', formatter: p => p.map(x => x.marker + x.name + ': ' + brl(x.value)).join('<br>') },
        grid:{ left:50, right:20, top:20, bottom:30 },
        xAxis:{ type:'category', data: ORDEM.map(k=>CORES[k].txt) },
        yAxis:{ type:'value', axisLabel:{ formatter: v => 'R$ ' + (v/1000).toFixed(0) + 'k' } },
        series:[{
            type:'bar', barWidth:'55%',
            data: ORDEM.map(k => ({ value: (aging[k]?.SALDO || 0), itemStyle:{ color: CORES[k].cor } })),
            label:{ show:true, position:'top', formatter: p => p.value > 0 ? brl(p.value) : '' }
        }]
    });
    window.addEventListener('resize', () => ch.resize());
}).catch(e=>{
    document.getElementById('aging-cards').innerHTML = '<div class="col-12"><div class="alert alert-danger">Erro: '+esc(e.message)+'</div></div>';
    document.getElementById('aging-chart').innerHTML = '';
});
})();
</script>
