<?php
/**
 * Depto de Engenharia e Automação - Master Automação - Autor: Derlivon Silva
 * (parte do Premium Express BI - Fire Sistemas)
 *
 * Compras / Margem por Item — Compra × Venda.
 * Cruza PRECO_VENDA × CUSTO efetivo (CUSTO_COMPRA → CUSTO_FINAL → CUSTO_MEDIO)
 * e mostra: quem dá lucro, quem está apertado, quem está VENDENDO NO PREJUÍZO.
 *
 * 100% renderizado em ECharts/HTML — toda lógica vive em
 * ComprasRepository::itensMargem() + kpisMargem(), via /api/compras/margem.
 */
?>
<div class="pbi-page-header">
  <h1 class="pbi-page-title">
    <i class="bi bi-graph-up-arrow me-2" style="color:#16a34a"></i>
    Margem por Item
    <span class="text-muted fw-normal" style="font-size:.95rem">— Compra × Venda</span>
  </h1>
  <div class="text-muted small">Esse preço de compra ainda deixa lucro? Quem está vendendo no prejuízo?</div>
</div>

<!-- ── Caixa de explicação (mesma paleta de /estoque/margem) ──────────────── -->
<div class="pbi-card mb-3" style="background:#f0fdf4;border-left:4px solid #16a34a">
  <div style="padding:.75rem 1.25rem">
    <div class="mb-2"><strong>📊 O que mostra esta tela:</strong> cruzamento <strong>Preço de Venda × Custo de Compra</strong> por item — quanto sobra de margem em cada produto. Use pra atacar os PREJUÍZOS primeiro (vermelho) e ajustar mark-ups apertados (amarelo).</div>
    <div class="mb-2" style="font-size:.85rem"><strong>Custo efetivo</strong> = primeiro custo positivo entre: <strong>Custo de Compra</strong> (último negociado) → <strong>Custo Final</strong> (com impostos/frete) → <strong>Custo Médio</strong> (ponderado).</div>
    <div class="d-flex flex-wrap gap-3" style="font-size:.85rem">
      <div><span class="badge" style="background:#dc2626;color:#fff;font-size:.72rem">PREJUÍZO</span> PV &lt; Custo · perde dinheiro a cada unidade</div>
      <div><span class="badge" style="background:#eab308;color:#000;font-size:.72rem">MARGEM BAIXA</span> Markup &lt; 20% · suporta pouco custo extra</div>
      <div><span class="badge" style="background:#16a34a;color:#fff;font-size:.72rem">OK</span> Markup ≥ 20% · saudável</div>
      <div><span class="badge" style="background:#64748b;color:#fff;font-size:.72rem">SEM CUSTO</span> Item sem custo cadastrado — não calcula margem</div>
    </div>
  </div>
</div>

<!-- ── Banner de aviso CMV (oculto por padrão, mostrado se cmv_confiavel=false) -->
<div id="cmv-warn" class="pbi-card mb-3" style="display:none;background:#fef3c7;border-left:4px solid #d97706">
  <div style="padding:.6rem 1.25rem;font-size:.88rem">
    ⚠️ <strong>CMV pouco confiável no agregado:</strong> este ERP tem custo cadastrado em só uma parte do mix. Interprete a margem por item com ressalva — o item que parece prejuízo pode estar com custo zerado/errado, não com preço errado.
  </div>
</div>

<!-- ── Filtros ──────────────────────────────────────────────────────────────── -->
<div class="pbi-card">
  <div class="pbi-card-body">
    <form id="frm" class="row g-2 align-items-end" onsubmit="return false">
      <div class="col-6 col-md-2">
        <label class="form-label small mb-1">De (venda)</label>
        <input type="date" id="f_ini" class="form-control form-control-sm" value="<?= htmlspecialchars($filtros['dataIni'] ?? date('Y-m-d', strtotime('-29 days'))) ?>">
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label small mb-1">Até</label>
        <input type="date" id="f_fim" class="form-control form-control-sm" value="<?= htmlspecialchars($filtros['dataFim'] ?? date('Y-m-d')) ?>">
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label small mb-1">Período rápido</label>
        <select id="f_periodo" class="form-select form-select-sm">
          <option value="">Personalizado</option>
          <option value="hoje">Hoje</option>
          <option value="7">Últimos 7 dias</option>
          <option value="30" selected>Últimos 30 dias</option>
          <option value="mes">Mês atual</option>
        </select>
      </div>
      <div class="col-6 col-md-2">
        <label class="form-label small mb-1">Limite de itens</label>
        <select id="f_limite" class="form-select form-select-sm">
          <option value="200">200</option>
          <option value="500" selected>500</option>
          <option value="1000">1.000</option>
          <option value="2000">2.000</option>
        </select>
      </div>
      <div class="col-12 col-md-auto">
        <button class="btn btn-sm btn-success" id="btn-aplicar"><i class="bi bi-search me-1"></i>Atualizar</button>
        <button class="btn btn-sm btn-outline-secondary" id="btn-csv"><i class="bi bi-download me-1"></i>CSV</button>
        <button class="btn btn-sm btn-outline-secondary d-print-none" onclick="window.print()"><i class="bi bi-printer me-1"></i>Imprimir</button>
      </div>
    </form>
  </div>
</div>

<!-- ── KPIs (6 cards) ─────────────────────────────────────────────────────── -->
<div class="row g-2 mb-2 mt-1" id="kpis">
  <div class="col-6 col-md-2">
    <div class="pbi-card h-100"><div class="pbi-card-body py-2">
      <div class="small text-muted"><i class="bi bi-percent me-1" style="color:#16a34a"></i>Markup médio</div>
      <div class="h4 mb-0 fw-bold" id="k_markup" style="color:#16a34a">—</div>
      <div class="small text-muted">Ponderado por venda</div>
    </div></div>
  </div>
  <div class="col-6 col-md-2">
    <div class="pbi-card h-100"><div class="pbi-card-body py-2">
      <div class="small text-muted"><i class="bi bi-cash-coin me-1" style="color:#16a34a"></i>Margem total</div>
      <div class="h4 mb-0 fw-bold" id="k_margem" style="color:#16a34a">—</div>
      <div class="small text-muted">R$ ganhos no período</div>
    </div></div>
  </div>
  <div class="col-6 col-md-2">
    <div class="pbi-card h-100"><div class="pbi-card-body py-2">
      <div class="small text-muted"><i class="bi bi-exclamation-circle me-1" style="color:#eab308"></i>Margem &lt; 20%</div>
      <div class="h4 mb-0 fw-bold" id="k_baixa" style="color:#d97706">—</div>
      <div class="small text-muted">SKUs apertados</div>
    </div></div>
  </div>
  <div class="col-6 col-md-2">
    <div class="pbi-card h-100"><div class="pbi-card-body py-2">
      <div class="small text-muted"><i class="bi bi-x-octagon-fill me-1" style="color:#dc2626"></i>Em prejuízo</div>
      <div class="h4 mb-0 fw-bold" id="k_prejuizo" style="color:#dc2626">—</div>
      <div class="small text-muted">PV &lt; custo · vendendo</div>
    </div></div>
  </div>
  <div class="col-6 col-md-2">
    <div class="pbi-card h-100"><div class="pbi-card-body py-2">
      <div class="small text-muted"><i class="bi bi-fire me-1" style="color:#dc2626"></i>R$ vazado</div>
      <div class="h4 mb-0 fw-bold" id="k_vazado" style="color:#dc2626">—</div>
      <div class="small text-muted">Perdido vendendo abaixo</div>
    </div></div>
  </div>
  <div class="col-6 col-md-2">
    <div class="pbi-card h-100"><div class="pbi-card-body py-2">
      <div class="small text-muted"><i class="bi bi-bar-chart-fill me-1"></i>CMV consolidado</div>
      <div class="h4 mb-0 fw-bold" id="k_cmv">—</div>
      <div class="small text-muted">% do custo s/ receita</div>
    </div></div>
  </div>
</div>

<!-- ── Gráficos ─────────────────────────────────────────────────────────────── -->
<div class="row g-2 mb-2">
  <div class="col-12 col-lg-6">
    <div class="pbi-card h-100">
      <div class="pbi-card-header"><i class="bi bi-trophy-fill me-2" style="color:#16a34a"></i>Top 20 itens — maior margem R$ no período</div>
      <div class="pbi-card-body">
        <div id="ch_top" style="height:520px"></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-exclamation-octagon-fill me-2" style="color:#dc2626"></i>Bottom 20 itens — em prejuízo</div>
      <div class="pbi-card-body">
        <div id="ch_bottom" style="height:520px"></div>
      </div>
    </div>
  </div>
</div>

<!-- ── Tabela ──────────────────────────────────────────────────────────────── -->
<div class="pbi-card" id="card">
  <div class="pbi-card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <div class="d-flex gap-1 flex-wrap">
      <span class="me-2"><i class="bi bi-list-ul me-2"></i>Itens — clique no filtro pra recortar</span>
      <button class="btn btn-sm btn-outline-secondary fbtn active" data-filtro="todos" type="button">Todos</button>
      <button class="btn btn-sm btn-outline-success fbtn"   data-filtro="lucro"     type="button">Lucro</button>
      <button class="btn btn-sm btn-outline-warning fbtn"   data-filtro="baixa"     type="button">Margem &lt; 20%</button>
      <button class="btn btn-sm btn-outline-danger fbtn"    data-filtro="prejuizo"  type="button">Prejuízo</button>
      <button class="btn btn-sm btn-outline-secondary fbtn" data-filtro="sem_custo" type="button">Sem custo</button>
    </div>
    <div style="position:relative;flex:1;min-width:180px;max-width:340px">
      <i class="bi bi-search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:.85rem"></i>
      <input type="text" id="f_busca" class="form-control form-control-sm" placeholder="Buscar produto, código ou marca…" style="padding-left:30px" autocomplete="off">
    </div>
    <small class="text-muted" id="badge"></small>
  </div>
  <div id="body">
    <p class="text-center text-muted py-4"><span class="spinner-border spinner-border-sm me-2"></span>Calculando margens…</p>
  </div>
</div>

<script src="/assets/js/echarts.min.js"></script>
<script>
(function () {
'use strict';

var DATA = null;
var CH_TOP = null, CH_BOTTOM = null;
var FILTRO = 'todos';

function $(id){ return document.getElementById(id); }
function fmtR(v){ return 'R$ ' + parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:2,maximumFractionDigits:2}); }
function fmtN(v,d){ d=d===undefined?2:d; return parseFloat(v||0).toLocaleString('pt-BR',{minimumFractionDigits:d,maximumFractionDigits:d}); }
function fmtP(v,d){ d=d===undefined?1:d; return fmtN(v,d) + '%'; }
function esc(s){ var d=document.createElement('div'); d.textContent=(s==null?'':s); return d.innerHTML; }
function api(u){ return fetch(u,{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 qs(){
  var p = new URLSearchParams();
  p.set('data_ini', $('f_ini').value);
  p.set('data_fim', $('f_fim').value);
  p.set('filtro',  FILTRO);
  p.set('limite',  $('f_limite').value || 500);
  return p.toString();
}

function setKpis(k){
  k = k || {};
  $('k_markup').textContent  = fmtP(k.markup_medio||0);
  $('k_margem').textContent  = fmtR(k.margem_total_rs);
  $('k_baixa').textContent   = (k.qtd_baixa_margem||0).toLocaleString('pt-BR');
  $('k_prejuizo').textContent= (k.qtd_prejuizo||0).toLocaleString('pt-BR');
  $('k_vazado').textContent  = fmtR(k.rs_vazado);
  $('k_cmv').textContent     = fmtP(k.cmv_pct||0);

  // Aviso CMV pouco confiável (helper do VendasRepository)
  $('cmv-warn').style.display = (k.cmv_confiavel === false) ? '' : 'none';
}

// Gradiente azul→verde (top) e laranja→vermelho (bottom) — padrão visual do projeto
function gradColor(i, n, c1, c2){
  var t = n <= 1 ? 0 : i/(n-1);
  var r = Math.round(c1[0]+(c2[0]-c1[0])*t);
  var g = Math.round(c1[1]+(c2[1]-c1[1])*t);
  var b = Math.round(c1[2]+(c2[2]-c1[2])*t);
  return 'rgb('+r+','+g+','+b+')';
}

function renderTopChart(rows){
  if (!CH_TOP) CH_TOP = echarts.init($('ch_top'));
  rows = (rows||[]).slice().reverse();
  if (!rows.length){
    CH_TOP.clear();
    CH_TOP.setOption({title:{text:'Sem vendas com margem no período', left:'center', top:'middle', textStyle:{color:'#94a3b8',fontSize:14}}});
    return;
  }
  var names = rows.map(function(r){ return r.DESCRICAO || ('#'+r.COD_ITEM); });
  var vals  = rows.map(function(r){ return Math.round((r.MARGEM_VALOR_VENDA||0)*100)/100; });
  var n = rows.length;
  var colors = rows.map(function(_,i){ return gradColor(n-1-i, n, [22,163,74], [59,130,246]); });
  CH_TOP.setOption({
    tooltip: {trigger:'axis', axisPointer:{type:'shadow'}, formatter: function(p){
      var d = rows[p[0].dataIndex];
      return '<strong>'+esc(p[0].name)+'</strong><br/>'
           + 'Margem: '+fmtR(p[0].value)+'<br/>'
           + 'Vendido: '+fmtR(d.VLR_VENDIDO)+' ('+fmtN(d.QTD_VENDIDA,1)+' un)<br/>'
           + 'Markup: '+fmtP(d.MARKUP_PERC);
    }},
    grid: {left:8, right:90, top:10, bottom:20, containLabel:true},
    xAxis: {type:'value', axisLabel:{formatter: function(v){ return 'R$ '+(v>=1000? (v/1000).toFixed(1)+'k' : v); }}},
    yAxis: {type:'category', data:names, axisLabel:{fontSize:11, width:240, overflow:'truncate'}},
    series: [{
      type:'bar', data: vals.map(function(v,i){ return {value:v, itemStyle:{color:colors[i], borderRadius:[0,4,4,0]}}; }),
      label:{show:true, position:'right', formatter: function(p){ return fmtR(p.value); }, fontSize:11}
    }]
  }, true);
}

function renderBottomChart(rows){
  if (!CH_BOTTOM) CH_BOTTOM = echarts.init($('ch_bottom'));
  rows = (rows||[]).slice().reverse();
  if (!rows.length){
    CH_BOTTOM.clear();
    CH_BOTTOM.setOption({title:{text:'Nenhum item vendendo no prejuízo 🎉', left:'center', top:'middle', textStyle:{color:'#16a34a',fontSize:14}}});
    return;
  }
  var names = rows.map(function(r){ return r.DESCRICAO || ('#'+r.COD_ITEM); });
  // Valor = R$ vazado por item (custo - PV) * qtd vendida — positivo p/ ECharts plotar
  var vals  = rows.map(function(r){
    var perda = ((+r.CUSTO_EFETIVO||0) - (+r.PRECO_VENDA||0)) * (+r.QTD_VENDIDA||0);
    return Math.round(Math.max(0, perda)*100)/100;
  });
  var n = rows.length;
  var colors = rows.map(function(_,i){ return gradColor(n-1-i, n, [220,38,38], [249,115,22]); });
  CH_BOTTOM.setOption({
    tooltip: {trigger:'axis', axisPointer:{type:'shadow'}, formatter: function(p){
      var d = rows[p[0].dataIndex];
      return '<strong>'+esc(p[0].name)+'</strong><br/>'
           + 'Perda: '+fmtR(p[0].value)+'<br/>'
           + 'Preço: '+fmtR(d.PRECO_VENDA)+' · Custo: '+fmtR(d.CUSTO_EFETIVO)+'<br/>'
           + 'Vendido: '+fmtN(d.QTD_VENDIDA,1)+' un';
    }},
    grid: {left:8, right:90, top:10, bottom:20, containLabel:true},
    xAxis: {type:'value', axisLabel:{formatter: function(v){ return 'R$ '+(v>=1000? (v/1000).toFixed(1)+'k' : v); }}},
    yAxis: {type:'category', data:names, axisLabel:{fontSize:11, width:240, overflow:'truncate'}},
    series: [{
      type:'bar', data: vals.map(function(v,i){ return {value:v, itemStyle:{color:colors[i], borderRadius:[0,4,4,0]}}; }),
      label:{show:true, position:'right', formatter: function(p){ return fmtR(p.value); }, fontSize:11}
    }]
  }, true);
}

function statusBadge(c){
  if (c.SEM_CUSTO)      return '<span class="badge" style="background:#64748b;color:#fff;font-size:.7rem">SEM CUSTO</span>';
  if (c.CUSTO_SUSPEITO) return '<span class="badge" style="background:#9333ea;color:#fff;font-size:.7rem" title="Custo > 100k ou > 50× preço (caixa-fechada plantada como unidade)">SUSPEITO</span>';
  if (c.PREJUIZO)       return '<span class="badge" style="background:#dc2626;color:#fff;font-size:.7rem">PREJUÍZO</span>';
  if (c.MARGEM_BAIXA)   return '<span class="badge" style="background:#eab308;color:#000;font-size:.7rem">MARGEM BAIXA</span>';
  return '<span class="badge" style="background:#16a34a;color:#fff;font-size:.7rem">OK</span>';
}

function corLinha(c){
  if (c.PREJUIZO)       return '#fee2e2';
  if (c.MARGEM_BAIXA)   return '#fef3c7';
  if (c.SEM_CUSTO || c.CUSTO_SUSPEITO) return '#f1f5f9';
  return '';
}

function corMarkup(c){
  if (c.SEM_CUSTO || c.CUSTO_SUSPEITO) return '#64748b';
  if (c.PREJUIZO)     return '#dc2626';
  if (c.MARGEM_BAIXA) return '#d97706';
  return '#16a34a';
}

function visiveis(){
  var rows = (DATA && DATA.itens) ? DATA.itens.slice() : [];
  var termo = ($('f_busca').value || '').trim().toLowerCase();
  if (termo){
    rows = rows.filter(function(c){
      return String(c.COD_ITEM).toLowerCase().indexOf(termo) >= 0
          || (c.DESCRICAO || '').toLowerCase().indexOf(termo) >= 0
          || (c.MARCA || '').toLowerCase().indexOf(termo) >= 0;
    });
  }
  return rows;
}

function renderTabela(){
  if (!DATA) return;
  var rows = visiveis();
  if (!rows.length){
    $('body').innerHTML = '<p class="text-center text-muted py-4">Nenhum item encontrado pra este recorte.</p>';
    return;
  }
  var h = '<div class="table-responsive"><table class="pbi-table"><thead><tr>'
        + '<th>Cód</th><th>Item</th><th>Marca</th><th>Un</th>'
        + '<th class="text-end" title="Custo efetivo: CUSTO_COMPRA → CUSTO_FINAL → CUSTO_MEDIO">Custo</th>'
        + '<th class="text-end">Preço venda</th>'
        + '<th class="text-end" title="(PV - Custo) / Custo · markup sobre custo">Markup %</th>'
        + '<th class="text-end">Margem R$/un</th>'
        + '<th class="text-end" title="Quantidade vendida no período">Vendas qtd</th>'
        + '<th class="text-end">Vendas R$</th>'
        + '<th>Alerta</th></tr></thead><tbody>';
  rows.forEach(function(c){
    var cor = corLinha(c);
    var mkc = corMarkup(c);
    h += '<tr style="'+(cor?'background:'+cor:'')+'">'
       + '<td class="small">'+esc(c.COD_ITEM)+'</td>'
       + '<td>'+esc(c.DESCRICAO || '')+'</td>'
       + '<td class="small text-muted">'+esc(c.MARCA || '')+'</td>'
       + '<td class="small">'+esc(c.COD_UNIDADE || '')+'</td>'
       + '<td class="text-end">'+(c.CUSTO_EFETIVO>0?fmtR(c.CUSTO_EFETIVO):'<span class="text-muted">—</span>')+'</td>'
       + '<td class="text-end fw-semibold">'+fmtR(c.PRECO_VENDA)+'</td>'
       + '<td class="text-end fw-bold" style="color:'+mkc+'">'+(c.SEM_CUSTO?'<span class="text-muted">—</span>':fmtP(c.MARKUP_PERC))+'</td>'
       + '<td class="text-end" style="color:'+mkc+'">'+(c.SEM_CUSTO?'<span class="text-muted">—</span>':fmtR(c.MARGEM_UNIT))+'</td>'
       + '<td class="text-end">'+(c.QTD_VENDIDA>0?fmtN(c.QTD_VENDIDA,1):'<span class="text-muted">0</span>')+'</td>'
       + '<td class="text-end">'+(c.VLR_VENDIDO>0?fmtR(c.VLR_VENDIDO):'<span class="text-muted">—</span>')+'</td>'
       + '<td>'+statusBadge(c)+'</td>'
       + '</tr>';
  });
  h += '</tbody></table></div>';
  $('body').innerHTML = h;
  $('badge').textContent = rows.length.toLocaleString('pt-BR') + ' item(ns)';
}

function carregar(){
  $('body').innerHTML = '<p class="text-center text-muted py-4"><span class="spinner-border spinner-border-sm me-2"></span>Calculando margens…</p>';
  $('badge').textContent = '';
  api('/api/compras/margem?'+qs()).then(function(d){
    DATA = d;
    if (d.data_ini) $('f_ini').value = d.data_ini;
    if (d.data_fim) $('f_fim').value = d.data_fim;
    setKpis(d.kpis);
    renderTopChart(d.top_margem);
    renderBottomChart(d.bottom_margem);
    renderTabela();
  }).catch(function(e){
    $('body').innerHTML = '<div class="px-3 py-3 alert alert-warning small"><i class="bi bi-exclamation-triangle me-2"></i>Erro: '+esc(e.message)+'</div>';
  });
}

function csv(){
  if (!DATA || !(DATA.itens||[]).length) return;
  var head = ['Cod','Item','Marca','Unidade','Custo','PrecoVenda','Markup_pct','Margem_un','Vendas_qtd','Vendas_RS','Alerta'];
  var linhas = [head.join(';')];
  (DATA.itens||[]).forEach(function(c){
    var st = c.SEM_CUSTO?'SEM CUSTO':(c.CUSTO_SUSPEITO?'SUSPEITO':(c.PREJUIZO?'PREJUIZO':(c.MARGEM_BAIXA?'MARGEM_BAIXA':'OK')));
    linhas.push([
      c.COD_ITEM, '"'+(c.DESCRICAO||'').replace(/"/g,'""')+'"', '"'+(c.MARCA||'').replace(/"/g,'""')+'"',
      c.COD_UNIDADE||'', (c.CUSTO_EFETIVO||0), (c.PRECO_VENDA||0),
      (c.SEM_CUSTO?'':(+c.MARKUP_PERC||0).toFixed(2)),
      (c.SEM_CUSTO?'':(+c.MARGEM_UNIT||0).toFixed(2)),
      (c.QTD_VENDIDA||0), (c.VLR_VENDIDO||0), st
    ].join(';'));
  });
  var blob = new Blob(["﻿"+linhas.join('\r\n')], {type:'text/csv;charset=utf-8'});
  var a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'margem_por_item_'+DATA.data_ini+'_'+DATA.data_fim+'.csv';
  a.click();
}

// Período rápido (hoje / 7 / 30 / mês)
function aplicarPeriodo(){
  var p = $('f_periodo').value;
  if (!p) return;
  var hoje = new Date(); var fim = hoje.toISOString().slice(0,10);
  var ini = fim;
  if (p === '7' || p === '30'){
    var d = new Date(hoje); d.setDate(d.getDate() - (parseInt(p,10)-1));
    ini = d.toISOString().slice(0,10);
  } else if (p === 'mes'){
    ini = fim.substr(0,7)+'-01';
  }
  $('f_ini').value = ini; $('f_fim').value = fim;
}

// Eventos
$('btn-aplicar').addEventListener('click', carregar);
$('btn-csv').addEventListener('click', csv);
$('f_periodo').addEventListener('change', function(){ aplicarPeriodo(); carregar(); });
$('f_limite').addEventListener('change', carregar);
Array.prototype.forEach.call(document.querySelectorAll('.fbtn'), function(b){
  b.addEventListener('click', function(){
    FILTRO = b.getAttribute('data-filtro') || 'todos';
    Array.prototype.forEach.call(document.querySelectorAll('.fbtn'), function(x){ x.classList.remove('active'); });
    b.classList.add('active');
    carregar();
  });
});
var t=null;
$('f_busca').addEventListener('input', function(){ clearTimeout(t); t=setTimeout(renderTabela, 250); });

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

window.addEventListener('DOMContentLoaded', carregar);
})();
</script>
