<?php
$fmt = fn($v) => $v > 0 ? number_format((float)$v, 2, ',', '.') : '';
$moeda = fn($v) => 'R$ '.number_format((float)$v,2,',','.');
$nomeMeses = ['','Janeiro','Fevereiro','Março','Abril','Maio','Junho',
              'Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
?>
<div class="pbi-page-header">
    <h1 class="pbi-page-title"><i class="bi bi-person-check me-2 text-accent"></i>Metas por Vendedor</h1>
</div>

<!-- Filtros ano/mês -->
<div class="pbi-filtro-barra mb-4 d-flex flex-wrap gap-2 align-items-center">
    <?php foreach($anos as $a): ?>
    <a href="/metas/vendedores?ano=<?= $a ?>&mes=<?= $mesRef ?>" class="pbi-ano-btn <?= $a===$anoSel?'ativo':'' ?>"><?= $a ?></a>
    <?php endforeach; ?>
    <span class="text-muted mx-2">|</span>
    <?php for($m=1;$m<=12;$m++): ?>
    <a href="/metas/vendedores?ano=<?= $anoSel ?>&mes=<?= $m ?>" class="pbi-ano-btn <?= $m===$mesRef?'ativo':'' ?>"><?= substr($nomeMeses[$m],0,3) ?></a>
    <?php endfor; ?>
</div>

<?php if($salvo): ?>
<div class="alert alert-success d-flex align-items-center gap-2 mb-3">
    <i class="bi bi-check-circle-fill"></i> Metas de <?= $nomeMeses[$mesRef] ?>/<?= $anoSel ?> salvas.
</div>
<?php endif; ?>

<?php if (!$vendedores): ?>
<div class="pbi-card p-4 text-center text-muted">
    <i class="bi bi-person-x fs-2 mb-2"></i>
    <p>Nenhum vendedor ativo encontrado na tabela VENDEDOR.</p>
</div>
<?php else: ?>

<!-- Gráfico comparativo -->
<?php
$metasMes = $metasV[$anoSel][$mesRef] ?? [];
$grafNomes = [];
$grafMeta  = [];
$grafReal  = [];
$grafPerc  = [];
foreach ($vendedores as $v) {
    $cod  = $v['COD_PESSOA'];
    $meta = (float)($metasMes[$cod] ?? 0);
    $real = (float)($realizado[$cod] ?? 0);
    if ($meta <= 0 && $real <= 0) continue;
    $grafNomes[] = mb_substr($v['NOME'],0,18);
    $grafMeta[]  = $meta;
    $grafReal[]  = $real;
    $grafPerc[]  = $meta > 0 ? round($real/$meta*100,1) : 0;
}
?>
<?php if ($grafNomes): ?>
<div class="pbi-card mb-4">
    <div class="pbi-card-header"><i class="bi bi-bar-chart me-2 text-accent"></i>Meta × Realizado — <?= $nomeMeses[$mesRef] ?>/<?= $anoSel ?></div>
    <div id="chartVendMeta" style="height:300px"></div>
</div>
<?php endif; ?>

<form method="post" action="/metas/vendedores/salvar">
    <input type="hidden" name="ano" value="<?= $anoSel ?>">
    <input type="hidden" name="mes" value="<?= $mesRef ?>">

    <div class="pbi-card">
        <div class="pbi-card-header d-flex justify-content-between align-items-center">
            <span><i class="bi bi-person-check me-2"></i>Metas — <?= $nomeMeses[$mesRef] ?>/<?= $anoSel ?></span>
            <small class="text-muted">Defina a meta individual de cada vendedor</small>
        </div>
        <div class="table-responsive">
            <table class="pbi-table">
                <thead><tr>
                    <th>Vendedor</th>
                    <th style="width:220px">Meta do Mês (R$)</th>
                    <th class="text-end">Realizado</th>
                    <th class="text-center">% Atingido</th>
                    <th class="text-end">Falta / Sobra</th>
                </tr></thead>
                <tbody>
                <?php foreach($vendedores as $v):
                    $cod  = $v['COD_PESSOA'];
                    $meta = (float)($metasMes[$cod] ?? 0);
                    $real = (float)($realizado[$cod] ?? 0);
                    $perc = $meta > 0 ? $real/$meta*100 : ($real > 0 ? 100 : 0);
                    $gap  = $real - $meta;
                    $cor  = $perc >= 100 ? 'text-success' : ($perc >= 70 ? 'text-warning' : ($perc > 0 ? 'text-danger' : 'text-muted'));
                ?>
                <tr>
                    <td class="fw-semibold"><?= \App\Core\View::e($v['NOME']) ?></td>
                    <td>
                        <div class="input-group input-group-sm">
                            <span class="input-group-text" style="background:var(--pbi-surface-2);border-color:var(--pbi-border);color:var(--pbi-text-muted)">R$</span>
                            <input type="text" name="meta_vend_<?= $cod ?>" value="<?= $fmt($meta) ?>"
                                   class="form-control pbi-meta-input" placeholder="0,00"
                                   style="border-color:var(--pbi-border);background:var(--pbi-surface);color:var(--pbi-text)">
                        </div>
                    </td>
                    <td class="text-end"><?= $real > 0 ? $moeda($real) : '<span class="text-muted">—</span>' ?></td>
                    <td class="text-center">
                        <?php if ($meta > 0 || $real > 0): ?>
                        <span class="fw-bold <?= $cor ?>"><?= number_format($perc,1,',','.') ?>%</span>
                        <?php if ($meta > 0): ?>
                        <div class="progress mt-1" style="height:4px;background:var(--pbi-border)">
                            <div class="progress-bar <?= $perc>=100?'bg-success':($perc>=70?'bg-warning':'bg-danger') ?>" style="width:<?= min($perc,100) ?>%"></div>
                        </div>
                        <?php endif; ?>
                        <?php else: echo '<span class="text-muted">—</span>'; endif; ?>
                    </td>
                    <td class="text-end <?= $gap >= 0 ? 'text-success' : 'text-danger' ?>">
                        <?php if ($meta > 0): ?>
                            <?= $gap >= 0 ? '+' : '' ?><?= $moeda($gap) ?>
                        <?php else: echo '<span class="text-muted">—</span>'; endif; ?>
                    </td>
                </tr>
                <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <div class="p-3">
            <button type="submit" class="pbi-btn-filtrar btn"><i class="bi bi-save me-1"></i>Salvar Metas</button>
        </div>
    </div>
</form>

<?php if ($grafNomes): ?>
<script src="/assets/js/echarts.min.js"></script>
<script>
(function(){
    var txtClr = '#94a3b8';
    var nomes  = <?= json_encode($grafNomes) ?>;
    var meta   = <?= json_encode($grafMeta) ?>;
    var real   = <?= json_encode($grafReal) ?>;

    echarts.init(document.getElementById('chartVendMeta')).setOption({
        backgroundColor:'transparent',
        tooltip:{trigger:'axis',formatter:function(p){
            var s=p[0].axisValue+'<br/>';
            p.forEach(function(i){s+=i.marker+i.seriesName+': R$'+i.value.toLocaleString('pt-BR',{minimumFractionDigits:2})+'<br/>';});
            return s;
        }},
        legend:{top:0,textStyle:{color:txtClr}},
        grid:{left:50,right:20,top:40,bottom:80},
        xAxis:{type:'category',data:nomes,axisLabel:{color:txtClr,rotate:20,fontSize:11},axisLine:{lineStyle:{color:'#334155'}}},
        yAxis:{type:'value',axisLabel:{color:txtClr,formatter:function(v){return 'R$'+v.toLocaleString('pt-BR');}},splitLine:{lineStyle:{color:'#1e293b'}}},
        series:[
            {name:'Meta',    type:'bar', data:meta, itemStyle:{color:'rgba(79,142,247,.35)',borderRadius:[3,3,0,0]}, barGap:0},
            {name:'Realizado',type:'bar',data:real, itemStyle:{color:function(p){return p.value>=(meta[p.dataIndex]||0)?'#22c55e':'#4f8ef7';},borderRadius:[3,3,0,0]},
                label:{show:true,position:'top',color:'#e2e8f0',fontSize:10,formatter:function(p){return p.value>0?'R$'+p.value.toLocaleString('pt-BR',{minimumFractionDigits:0}):'';}}
            }
        ]
    });
})();
</script>
<?php endif; ?>
<?php endif; ?>
