<?php $actionUrl = '/auditoria/desconto-operadora'; ?>
<script src="/assets/js/echarts.min.js?v=<?= \App\Core\Versao::ATUAL ?>"></script>
<div class="pbi-page-header">
    <div class="pbi-page-icon"><i class="bi bi-percent"></i></div>
    <div>
        <div class="pbi-page-title">Desconto por Operadora</div>
        <div class="pbi-page-subtitle" id="dop-periodo-label"><?= htmlspecialchars($dataIni) ?> a <?= htmlspecialchars($dataFim) ?></div>
    </div>
    <div class="ms-auto d-flex gap-2 align-items-center">
        <button id="btnDopAtualizar" class="btn btn-sm btn-outline-secondary" title="Atualizar dados">
            <i class="bi bi-arrow-clockwise"></i>
        </button>
        <a href="/auditoria" class="btn btn-sm btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>Voltar</a>
    </div>
</div>

<div class="pbi-hint mb-3" style="margin-top:0">
    <i class="bi bi-info-circle me-1"></i>
    Soma o desconto dado em cada nota emitida por operadora de caixa (link via abertura de sessão).
    A linha em <span style="color:#dc2626;font-weight:600">vermelho</span> marca quem está <strong>acima da média % de desconto da loja</strong>.
</div>

<!-- Filtro de período -->
<div class="pbi-card mb-3">
    <div class="p-3 d-flex flex-wrap gap-2 align-items-center">
        <span class="text-muted small me-2"><i class="bi bi-calendar3 me-1"></i>Período:</span>
        <a href="?p=hoje"   class="pbi-ano-btn <?= $periodo==='hoje'?'active':'' ?>">Hoje</a>
        <a href="?p=semana" class="pbi-ano-btn <?= $periodo==='semana'?'active':'' ?>">7 dias</a>
        <a href="?p=mes"    class="pbi-ano-btn <?= $periodo==='mes'?'active':'' ?>">Mês</a>
        <a href="?p=ano"    class="pbi-ano-btn <?= $periodo==='ano'?'active':'' ?>">Ano</a>
        <span class="text-muted small ms-3 me-1">ou:</span>
        <form method="get" action="<?= $actionUrl ?>" class="d-flex gap-2 align-items-center flex-wrap">
            <input type="date" name="data_ini" value="<?= htmlspecialchars($dataIni) ?>" class="form-control form-control-sm" style="max-width:160px">
            <span class="text-muted small">a</span>
            <input type="date" name="data_fim" value="<?= htmlspecialchars($dataFim) ?>" class="form-control form-control-sm" style="max-width:160px">
            <button type="submit" class="btn btn-sm pbi-btn-filtrar"><i class="bi bi-funnel me-1"></i>Filtrar</button>
        </form>
    </div>
</div>

<!-- KPIs do período -->
<div class="row g-3 mb-3">
    <div class="col-6 col-md-3">
        <div class="pbi-kpi-card">
            <div class="pbi-kpi-label"><i class="bi bi-cash-stack me-1"></i>Faturado</div>
            <div class="pbi-kpi-valor text-accent pbi-skeleton" id="dop-kpi-fat" style="height:1.6rem;border-radius:4px">&nbsp;</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="pbi-kpi-card">
            <div class="pbi-kpi-label"><i class="bi bi-percent me-1"></i>Desconto Total</div>
            <div class="pbi-kpi-valor text-danger pbi-skeleton" id="dop-kpi-desc" style="height:1.6rem;border-radius:4px">&nbsp;</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="pbi-kpi-card">
            <div class="pbi-kpi-label"><i class="bi bi-graph-down me-1"></i>% Desc / Faturado</div>
            <div class="pbi-kpi-valor pbi-skeleton" id="dop-kpi-pct" style="height:1.6rem;border-radius:4px">&nbsp;</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="pbi-kpi-card">
            <div class="pbi-kpi-label"><i class="bi bi-people me-1"></i>Operadoras ativas</div>
            <div class="pbi-kpi-valor pbi-skeleton" id="dop-kpi-oper" style="height:1.6rem;border-radius:4px">&nbsp;</div>
        </div>
    </div>
</div>

<!-- Grafico de barras horizontal -->
<div class="pbi-card mb-3">
    <div class="pbi-card-header">
        <i class="bi bi-bar-chart me-2 text-accent"></i>Desconto por Operadora — comparativo
    </div>
    <div class="pbi-card-body">
        <div class="pbi-hint mb-2" style="margin-top:0">Valor de desconto em R$. Barras em <span style="color:#dc2626;font-weight:600">vermelho</span> = acima da média de % desconto da loja.</div>
        <div id="dop-chart" style="height:380px;width:100%"></div>
    </div>
</div>

<!-- Tabela detalhada + drill-down -->
<div class="pbi-card mb-4">
    <div class="pbi-card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-table me-2 text-accent"></i>Detalhamento por Operadora</span>
        <span id="dop-count-badge" class="badge bg-secondary" style="display:none"></span>
    </div>
    <div class="table-responsive">
        <table class="pbi-table" id="dop-tabela">
            <thead>
                <tr>
                    <th style="width:50px">#</th>
                    <th>Operadora</th>
                    <th class="text-end">Qtd Vendas</th>
                    <th class="text-end">Faturado</th>
                    <th class="text-end">Desconto</th>
                    <th class="text-end">% Desc</th>
                    <th class="text-end">Ticket Médio</th>
                    <th class="text-center">Status</th>
                </tr>
            </thead>
            <tbody id="dop-tabela-body">
                <tr><td colspan="8" class="text-center text-muted p-4"><i class="bi bi-hourglass-split me-2"></i>Carregando...</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Drill-down modal -->
<div class="pbi-card mb-4" id="dop-drilldown" style="display:none">
    <div class="pbi-card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-receipt me-2 text-accent"></i>Notas com desconto — <span id="dop-drill-nome"></span></span>
        <button id="dop-drill-close" class="btn btn-sm btn-outline-secondary"><i class="bi bi-x-lg"></i></button>
    </div>
    <div class="table-responsive">
        <table class="pbi-table">
            <thead>
                <tr>
                    <th>Nota</th><th>Série</th><th>Data</th>
                    <th>Cliente</th>
                    <th class="text-end" title="Preço cheio do produto antes de qualquer desconto">Valor Original</th>
                    <th class="text-end" title="Quanto o cliente realmente pagou (após desconto)">Total Pago</th>
                    <th class="text-end">Desconto</th>
                    <th class="text-end">% Desc</th>
                </tr>
            </thead>
            <tbody id="dop-drill-body"></tbody>
        </table>
    </div>
</div>

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

    var dataIni = <?= json_encode($dataIni) ?>;
    var dataFim = <?= json_encode($dataFim) ?>;
    var chartDop = null;
    var ultimaLista = [];

    function moeda(v){ v=parseFloat(v||0); return 'R$ '+v.toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2}); }
    function num0(v){ return parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:0,maximumFractionDigits:0}); }
    function pct(v){ return (parseFloat(v||0)).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2}) + '%'; }
    function esc(s){ return String(s==null?'':s).replace(/[&<>"']/g, function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];}); }

    function mostrarErro(titulo, msg){
        var tb = document.getElementById('dop-tabela-body');
        if (tb) tb.innerHTML = '<tr><td colspan="8" class="text-center text-danger p-4">'
          + '<i class="bi bi-exclamation-triangle me-2"></i><strong>'+esc(titulo)+'</strong>'
          + '<div class="small text-muted mt-2" style="white-space:pre-wrap;font-family:monospace">'+esc(msg)+'</div></td></tr>';
        ['dop-kpi-fat','dop-kpi-desc','dop-kpi-pct','dop-kpi-oper'].forEach(function(id){
            var el=document.getElementById(id); if(el){ el.classList.remove('pbi-skeleton'); el.textContent='—'; }
        });
    }

    function carregar(){
        var url = '/api/auditoria/desconto-operadora?data_ini='+encodeURIComponent(dataIni)+'&data_fim='+encodeURIComponent(dataFim);
        fetch(url, {credentials:'same-origin'})
            .then(function(r){
                return r.text().then(function(txt){ return {status:r.status, ok:r.ok, body:txt}; });
            })
            .then(function(resp){
                if (!resp.ok) {
                    mostrarErro('HTTP ' + resp.status + ' do servidor',
                        'Resposta (primeiros 600 chars):\n' + resp.body.substring(0,600));
                    return;
                }
                var j;
                try { j = JSON.parse(resp.body); }
                catch (e) {
                    mostrarErro('Resposta nao e JSON valido',
                        'Inicio da resposta:\n' + resp.body.substring(0,400)
                        + '\n\nPossivel causa: erro PHP exibido na tela (ver display_errors).');
                    return;
                }
                if (!j.ok) {
                    mostrarErro('Erro reportado pelo servidor', String(j.erro||'desconhecido'));
                    return;
                }
                renderKPIs(j.totais);
                renderChart(j.lista, j.totais);
                renderTabela(j.lista, j.totais);
                ultimaLista = j.lista;
            })
            .catch(function(e){
                mostrarErro('Erro de rede ao chamar a API',
                    'A requisicao para /api/auditoria/desconto-operadora falhou.\n'
                    + 'Tipo: ' + (e && e.name ? e.name : '?') + '\n'
                    + 'Mensagem: ' + (e && e.message ? e.message : String(e)) + '\n\n'
                    + 'Verifique se o servidor Apache esta rodando e se nao ha bloqueio de firewall.');
            });
    }

    function renderKPIs(t){
        var el;
        el=document.getElementById('dop-kpi-fat');  if(el){ el.classList.remove('pbi-skeleton'); el.textContent = moeda(t.faturado); }
        el=document.getElementById('dop-kpi-desc'); if(el){ el.classList.remove('pbi-skeleton'); el.textContent = moeda(t.desconto); }
        el=document.getElementById('dop-kpi-pct');  if(el){ el.classList.remove('pbi-skeleton'); el.textContent = pct(t.media_pct); }
        el=document.getElementById('dop-kpi-oper'); if(el){ el.classList.remove('pbi-skeleton'); el.textContent = num0(t.qtd_oper); }
    }

    function renderChart(lista, totais){
        var el = document.getElementById('dop-chart');
        if (!el) return;
        if (!chartDop) chartDop = echarts.init(el);
        if (!lista.length) {
            chartDop.clear();
            chartDop.setOption({ title:{text:'Sem dados no período', left:'center', top:'middle', textStyle:{color:'#94a3b8', fontSize:13}} }, true);
            return;
        }
        // ordem desc por desconto
        var ordenada = lista.slice().sort(function(a,b){ return b.desconto - a.desconto; });
        var nomes = ordenada.map(function(x){ return x.operadora; });
        var vals  = ordenada.map(function(x){
            return {
                value: x.desconto,
                itemStyle: { color: x.acima_media ? '#dc2626' : '#3b82f6' }
            };
        });
        chartDop.setOption({
            backgroundColor: 'transparent',
            tooltip: { trigger:'axis', axisPointer:{type:'shadow'}, formatter: function(p){
                var i = p[0].dataIndex;
                var d = ordenada[i];
                return '<b>'+esc(d.operadora)+'</b><br/>'
                     + 'Desconto: <b>'+moeda(d.desconto)+'</b><br/>'
                     + 'Faturado: '+moeda(d.faturado)+'<br/>'
                     + '% Desc: <b>'+pct(d.pct_desconto)+'</b>'+(d.acima_media?' <span style="color:#dc2626">(acima da média)</span>':'')+'<br/>'
                     + 'Qtd vendas: '+num0(d.qtd_vendas);
            }},
            grid: { left:130, right:20, top:10, bottom:30 },
            xAxis: { type:'value', axisLabel:{ formatter: function(v){ return 'R$ '+v.toLocaleString('pt-BR'); }, fontSize:10 } },
            yAxis: { type:'category', data: nomes, axisLabel:{ fontSize:11 }, inverse:true },
            series: [{
                type:'bar', data: vals, barWidth:'60%',
                label:{ show:true, position:'right', formatter: function(p){ return moeda(p.value); }, fontSize:10 }
            }]
        }, true);
        chartDop.resize();
    }

    function renderTabela(lista, totais){
        var tb = document.getElementById('dop-tabela-body');
        var badge = document.getElementById('dop-count-badge');
        if (!tb) return;
        if (!lista.length){
            tb.innerHTML = '<tr><td colspan="8" class="text-center text-muted p-4"><i class="bi bi-inbox me-2"></i>Nenhuma venda no período.</td></tr>';
            if(badge){ badge.style.display='none'; }
            return;
        }
        badge.style.display = 'inline-block';
        badge.textContent = lista.length + ' operadoras';
        var html = lista.map(function(d, i){
            var bg = d.acima_media ? 'background:rgba(220,38,38,.04)' : '';
            var statusBg = d.acima_media ? '#fee2e2' : '#dcfce7';
            var statusFg = d.acima_media ? '#991b1b' : '#166534';
            var statusIc = d.acima_media ? 'bi-exclamation-triangle' : 'bi-check-circle';
            var statusTx = d.acima_media ? 'Acima da média' : 'Dentro da média';
            return '<tr style="cursor:pointer;'+bg+'" data-cod="'+esc(d.cod_operadora)+'" data-nome="'+esc(d.operadora)+'" class="dop-row">'
                 + '<td class="text-muted">'+(i+1)+'</td>'
                 + '<td class="fw-bold">'+esc(d.operadora)+'</td>'
                 + '<td class="text-end">'+num0(d.qtd_vendas)+'</td>'
                 + '<td class="text-end">'+moeda(d.faturado)+'</td>'
                 + '<td class="text-end text-danger fw-bold">'+moeda(d.desconto)+'</td>'
                 + '<td class="text-end">'+pct(d.pct_desconto)+'</td>'
                 + '<td class="text-end">'+moeda(d.ticket_medio)+'</td>'
                 + '<td class="text-center"><span class="badge" style="background:'+statusBg+';color:'+statusFg+';font-weight:600;padding:.35rem .55rem;font-size:.72rem"><i class="bi '+statusIc+' me-1"></i>'+statusTx+'</span></td>'
                 + '</tr>';
        }).join('');
        tb.innerHTML = html;
        // Liga drill-down nas linhas
        tb.querySelectorAll('.dop-row').forEach(function(tr){
            tr.addEventListener('click', function(){
                drillDown(tr.getAttribute('data-cod'), tr.getAttribute('data-nome'));
            });
        });
    }

    function drillDown(cod, nome){
        var box  = document.getElementById('dop-drilldown');
        var tb   = document.getElementById('dop-drill-body');
        var nm   = document.getElementById('dop-drill-nome');
        if (!box || !tb) return;
        nm.textContent = nome;
        tb.innerHTML = '<tr><td colspan="7" class="text-center text-muted p-3"><i class="bi bi-hourglass-split me-1"></i>Carregando notas...</td></tr>';
        box.style.display = '';
        box.scrollIntoView({behavior:'smooth', block:'start'});
        var url = '/api/auditoria/desconto-operadora/notas?cod='+encodeURIComponent(cod)+'&data_ini='+encodeURIComponent(dataIni)+'&data_fim='+encodeURIComponent(dataFim);
        fetch(url, {credentials:'same-origin'})
            .then(function(r){ return r.json(); })
            .then(function(j){
                if (!j.ok){ tb.innerHTML = '<tr><td colspan="8" class="text-center text-danger p-3">Erro: '+esc(j.erro||'')+'</td></tr>'; return; }
                if (!j.lista.length){ tb.innerHTML = '<tr><td colspan="8" class="text-center text-muted p-3">Esta operadora não emitiu nota com desconto no período.</td></tr>'; return; }
                tb.innerHTML = j.lista.map(function(n){
                    var vo = (n.valor_original != null) ? n.valor_original : (n.total_nota + n.desconto);
                    return '<tr>'
                         + '<td>'+esc(n.nr_nota)+'</td>'
                         + '<td>'+esc(n.serie||'-')+'</td>'
                         + '<td>'+esc(n.data)+'</td>'
                         + '<td>'+esc(n.cliente||'CONSUMIDOR')+'</td>'
                         + '<td class="text-end text-muted">'+moeda(vo)+'</td>'
                         + '<td class="text-end fw-bold">'+moeda(n.total_nota)+'</td>'
                         + '<td class="text-end text-danger fw-bold">'+moeda(n.desconto)+'</td>'
                         + '<td class="text-end">'+pct(n.pct_desconto)+'</td>'
                         + '</tr>';
                }).join('');
            })
            .catch(function(e){ tb.innerHTML = '<tr><td colspan="8" class="text-center text-danger p-3">Erro de rede.</td></tr>'; });
    }

    var btnClose = document.getElementById('dop-drill-close');
    if (btnClose) btnClose.addEventListener('click', function(){ document.getElementById('dop-drilldown').style.display = 'none'; });

    var btnAt = document.getElementById('btnDopAtualizar');
    if (btnAt) btnAt.addEventListener('click', carregar);

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

    carregar();
})();
</script>
