<% /* Reportes - Asistencias, Tickets y Gastos */ %>
<div class="container-fluid py-3">

  <div class="d-flex align-items-center mb-2">
    <h3 class="mb-0">Reportes</h3>
    <span class="ms-auto small text-muted" id="repStatus">—</span>
  </div>

  <!-- Filtros -->
  <div class="card shadow-sm mb-3">
    <div class="card-body">
      <div class="row g-3 align-items-end">
        <div class="col-12 col-lg-6">
          <label class="form-label mb-1">Asistencias · Rango</label>
          <div class="row g-2">
            <div class="col-6 col-md-4"><input id="asistDesde" type="date" class="form-control"></div>
            <div class="col-6 col-md-4"><input id="asistHasta" type="date" class="form-control"></div>
            <div class="col-12 col-md-4 d-grid d-md-block">
              <button id="btnAsistCargar" class="btn btn-primary me-2">Cargar</button>
              <button id="btnAsistExcel"  class="btn btn-outline-success me-2">Excel</button>
              <button id="btnAsistPDF"    class="btn btn-outline-secondary">PDF</button>
            </div>
          </div>
        </div>

        <div class="col-12 col-lg-6">
          <label class="form-label mb-1">Año (Tickets / Gastos)</label>
          <div class="row g-2">
            <div class="col-6 col-md-4"><input id="anualYear" type="number" min="2000" step="1" class="form-control"></div>
            <div class="col-6 col-md-8 d-grid d-md-block">
              <button id="btnAnualCargar" class="btn btn-primary me-2">Cargar</button>
              <button id="btnAnualExcel"  class="btn btn-outline-success me-2">Excel (Comparativo)</button>
              <button id="btnAnualPDF"    class="btn btn-outline-secondary">PDF (Comparativo)</button>
            </div>
          </div>
        </div>
      </div>

      <div class="small text-muted mt-2">
        Los Excel se generan como CSV. Los PDF se generan con “Imprimir área” del navegador.
      </div>
    </div>
  </div>

    <!-- ASISTENCIA: Resumen diario (últimos 30 días) -->
    <div class="card shadow-sm mb-3" id="PRINT_ASIST">
        <div class="card-header d-flex align-items-center">
            <strong>Asistencia — Resumen diario (últimos 30 días)</strong>
            <span class="ms-auto small text-muted" id="resumeCount">Cargando…</span>
        </div>
        <div class="card-body">
            <div id="resumenCards" class="row g-3"></div>
        </div>
    </div>


  <!-- Tickets -->
  <div class="card shadow-sm mb-3" id="PRINT_TICKETS">
    <div class="card-header d-flex align-items-center">
      <strong>Ventas (Tickets)</strong>
      <span class="ms-auto small text-muted" id="ticketsInfo">—</span>
    </div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-12 col-lg-6">
          <div class="emp-card p-3 border rounded">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <div class="fw-semibold">Resumen del año</div>
              <div class="small text-muted" id="ticketsYearTitle">—</div>
            </div>
            <div class="row text-center">
              <div class="col-4"><div class="small text-muted">Tickets YTD</div><div class="fs-5 fw-semibold" id="tYtd">—</div></div>
              <div class="col-4"><div class="small text-muted">Promedio</div><div class="fs-5 fw-semibold" id="tAvg">—</div></div>
              <div class="col-4"><div class="small text-muted">Ingresos YTD</div><div class="fs-5 fw-semibold" id="tToDate">—</div></div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div class="emp-card p-3 border rounded">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <div class="fw-semibold">Tickets por mes</div>
              <div class="small text-muted">Cantidad</div>
            </div>
            <div id="ticketsChart" style="height:140px;"></div>
          </div>
        </div>

        <div class="col-12">
          <div class="table-responsive">
            <table class="table table-sm align-middle">
              <thead class="table-light">
              <tr><th>Mes</th><th class="text-end">Tickets</th><th class="text-end">Importe</th><th class="text-end">Ticket promedio</th></tr>
              </thead>
              <tbody id="tbTickets"><tr><td colspan="4" class="p-3 text-muted">Sin datos</td></tr></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Gastos detallados (filtrable por mes/año) -->
    <div class="card shadow-sm mb-3" id="PRINT_GASTOS_DET">
        <div class="card-header">
            <div class="row g-2 align-items-center">
            <div class="col-12 col-lg-4 d-flex align-items-center">
                <strong class="me-2">Gastos detallados — </strong>
                <span id="gdetTitle" class="text-muted small">mes anterior</span>
            </div>
            <div class="col-12 col-lg-4">
                <div class="row g-2">
                <div class="col-7">
                    <select id="gdetMes" class="form-select">
                    <option value="1">Enero</option>
                    <option value="2">Febrero</option>
                    <option value="3">Marzo</option>
                    <option value="4">Abril</option>
                    <option value="5">Mayo</option>
                    <option value="6">Junio</option>
                    <option value="7">Julio</option>
                    <option value="8">Agosto</option>
                    <option value="9">Setiembre</option>
                    <option value="10">Octubre</option>
                    <option value="11">Noviembre</option>
                    <option value="12">Diciembre</option>
                    </select>
                </div>
                <div class="col-5">
                    <input id="gdetAnio" type="number" min="2000" step="1" class="form-control" placeholder="Año">
                </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 d-grid d-md-block text-lg-end">
                <button id="btnGdetCargar" class="btn btn-primary btn-sm me-2">Cargar</button>
                <button id="btnGdetExcel"  class="btn btn-outline-success btn-sm me-2">Excel</button>
                <button id="btnGdetPDF"    class="btn btn-outline-secondary btn-sm">PDF</button>
            </div>
            </div>
        </div>

        <div class="card-body">
            <div class="row g-3 mb-2">
            <div class="col-12">
                <div class="d-flex gap-2 flex-wrap">
                <span class="badge bg-primary-subtle border text-primary">Total: <span id="gdetTotal">—</span></span>
                <span class="badge bg-secondary-subtle border text-secondary">Compras: <span id="gdetCompras">—</span></span>
                <span class="badge bg-info-subtle border text-info">Renglones: <span id="gdetRows">—</span></span>
                <span class="badge bg-light border text-muted ms-auto" id="gdetInfo">—</span>
                </div>
            </div>
            </div>

            <div class="table-responsive table-scroll" id="gdetScroll">
                <table class="table table-sm align-middle mb-0">
                    <thead class="table-light">
                    <tr>
                        <th>Fecha</th>
                        <th>Proveedor</th>
                        <th>Tipo</th>
                        <th>Ítem</th>
                        <th class="text-end">Cantidad</th>
                        <th class="text-end">Precio</th>
                        <th class="text-end">Subtotal</th>
                    </tr>
                    </thead>
                    <tbody id="tbGdet">
                    <tr><td colspan="7" class="p-3 text-muted">Sin datos</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>



  <!-- Comparativo Ventas vs Gastos -->
  <div class="card shadow-sm" id="PRINT_COMP">
    <div class="card-header d-flex align-items-center">
      <strong>Comparativo: Ventas vs Gastos</strong>
      <span class="ms-auto small text-muted" id="compInfo">—</span>
    </div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-12 col-lg-6">
          <div class="emp-card p-3 border rounded">
            <div class="row text-center">
              <div class="col-4"><div class="small text-muted">Ingresos YTD</div><div class="fs-5 fw-semibold" id="cmpSales">—</div></div>
              <div class="col-4"><div class="small text-muted">Gastos YTD</div><div class="fs-5 fw-semibold" id="cmpCost">—</div></div>
              <div class="col-4"><div class="small text-muted">Resultado</div><div class="fs-5 fw-semibold" id="cmpDiff">—</div></div>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-6">
          <div class="emp-card p-3 border rounded">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <div class="fw-semibold">Mensual (UYU)</div>
              <div class="small text-muted" id="compYearTitle">—</div>
            </div>
            <div id="compChart" style="height:160px;"></div>
          </div>
        </div>

        <div class="col-12">
          <div class="table-responsive">
            <table class="table table-sm align-middle">
              <thead class="table-light">
                <tr><th>Mes</th><th class="text-end">Ingresos</th><th class="text-end">Gastos</th><th class="text-end">Resultado</th></tr>
              </thead>
              <tbody id="tbComp"><tr><td colspan="4" class="p-3 text-muted">Sin datos</td></tr></tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="d-flex gap-2 mt-2">
        <button id="btnCompExcel" class="btn btn-outline-success btn-sm">Excel</button>
        <button id="btnCompPDF"   class="btn btn-outline-secondary btn-sm">PDF</button>
      </div>
    </div>
  </div>

</div>

<style>
  .spark rect:hover { filter: brightness(0.9); }
  .emp-card { border:1px solid #e9ecef; border-radius:.75rem; padding:12px; }
  .emp-meta .badge { background:#f8f9fa; color:#212529; border:1px solid #e9ecef; }
  .spark-wrap { width:100%; height:80px; }
  .spark { width:100%; height:100%; }
  .spark text { font-size:10px; fill:#6c757d; }
  .spark rect:hover { filter: brightness(.9); }
   @media print {
        body * { visibility: hidden !important; }
        #PRINT_ASIST, #PRINT_ASIST *,
        #PRINT_TICKETS, #PRINT_TICKETS *,
        #PRINT_GASTOS_DET, #PRINT_GASTOS_DET *,
        #PRINT_COMP,   #PRINT_COMP * { visibility: visible !important; }
        #PRINT_ASIST, #PRINT_TICKETS, #PRINT_GASTOS_DET, #PRINT_COMP { position:absolute; left:0; top:0; width:100%; }
    }
      #PRINT_GASTOS_DET { --gdet-h: 48vh; }           /* ~mitad de la pantalla */
  @media (min-width: 992px){ #PRINT_GASTOS_DET { --gdet-h: 420px; } } /* desktop fijo */

  /* Scroll vertical con encabezado fijo */
  #PRINT_GASTOS_DET .table-scroll{
    max-height: var(--gdet-h);
    overflow: auto;             /* vertical + horizontal si hace falta */
  }
  #PRINT_GASTOS_DET .table-scroll thead th{
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-table-bg, #fff);
  }
  #PRINT_GASTOS_DET .table-scroll tbody tr:last-child td{
    border-bottom: 0;
  }

  /* Al imprimir, expandir todo (sin scroll) */
  @media print{
    #PRINT_GASTOS_DET .table-scroll{
      max-height: none !important;
      overflow: visible !important;
    }
  }
</style>

<script>
/* ===== Helpers ===== */

const $ = s => document.querySelector(s);
const z2 = n => String(n).padStart(2,'0');
const fmtMoney = v => (v==null? '—' : new Intl.NumberFormat('es-UY',{style:'currency',currency:'UYU'}).format(Number(v)));
const fmtInt = v => Math.round(Number(v||0));
const fmtHM = mins => { const h=Math.floor(mins/60); const m=Math.round(mins%60); return `${z2(h)}:${z2(m)}`; };
const ymd = s => String(s||'').slice(0,10);
const monthNames = ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'];
const MONTH_NAMES = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Setiembre','Octubre','Noviembre','Diciembre'];

async function jget(url){ const r=await fetch(url); const j=await r.json().catch(()=>null); if(!r.ok) throw new Error(j?.error||`${r.status}`); return j; }
async function jpost(url, body){ const r=await fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body||{})}); const j=await r.json().catch(()=>null); if(!r.ok) throw new Error(j?.error||`${r.status}`); return j; }


function getSelectedMonthYear() {
  const m = parseInt(document.querySelector('#gdetMes')?.value, 10);
  const y = parseInt(document.querySelector('#gdetAnio')?.value, 10);
  const now = new Date();
  const month = (Number.isFinite(m) && m>=1 && m<=12) ? m : (now.getMonth()+1);
  const year  = (Number.isFinite(y) && y>=2000 && y<=2100) ? y : now.getFullYear();
  return {month, year};
}

function monthRange(month, year) {
  // month: 1..12
  const from = new Date(year, month-1, 1, 0,0,0,0);
  const to   = new Date(year, month,   0, 23,59,59,999);
  return {
    desdeISO: from.toISOString(),
    hastaISO: to.toISOString(),
    titulo: `${MONTH_NAMES[month-1]} ${year}`,
    spanTxt: `${from.toLocaleDateString('es-UY')} - ${to.toLocaleDateString('es-UY')}`
  };
}

function toCSV(rows, headers){
  const esc = v => v==null? '' : (typeof v==='number'? String(v) : /[",\n]/.test(String(v)) ? `"${String(v).replace(/"/g,'""')}"` : String(v));
  const cols = headers && headers.length? headers : Object.keys(rows?.[0]||{});
  const out = []; if(headers) out.push(cols.join(','));
  for(const r of (rows||[])) out.push(cols.map(c=>esc(r[c])).join(','));
  return out.join('\r\n');
}
function downloadText(name, text){ const blob=new Blob([text],{type:'text/csv;charset=utf-8;'}); const a=document.createElement('a'); a.href=URL.createObjectURL(blob); a.download=name; a.click(); URL.revokeObjectURL(a.href); }
function printArea(){ window.print(); }

/* === Mini SVGs === */
function barsSVG(series){ // [{label, value}]
  const W=560,H=120,P=10,G=6;
  const n=series.length||1, max=Math.max(1,...series.map(d=>Number(d.value||0)));
  const bw=Math.max(6,Math.floor((W-P*2-G*(n-1))/n)); let x=P, bars='';
  series.forEach(d=>{ const vh=Math.round((Number(d.value||0)/max)*(H-P-26)); const y=H-20-vh;
    bars+=`<g><rect x="${x}" y="${y}" width="${bw}" height="${vh}" rx="3" ry="3" fill="#0d6efd"><title>${d.label} · ${fmtMoney(d.value)}</title></rect><text x="${x+bw/2}" y="${H-6}" text-anchor="middle">${d.label}</text></g>`; x+=bw+G; });
  return `<svg viewBox="0 0 ${W} ${H}" class="spark" preserveAspectRatio="none"><line x1="${P}" y1="${H-20}" x2="${W-P}" y2="${H-20}" stroke="#adb5bd"/></svg>` .replace('</svg>', bars+'</svg>');
}
function barsCompareSVG(a,b){ // a=ventas, b=gastos: arrays [{label,value}]
  const W=560,H=160,P=10,G=8,PAIR=2,INNER=3;
  const n=a.length, max=Math.max(1,...a.map(d=>Number(d.value||0)),...b.map(d=>Number(d.value||0)));
  const bw=Math.max(5,Math.floor((W-P*2-G*(n-1))/(n*PAIR)));
  let x=P, g=''; for(let i=0;i<n;i++){
    const av=Number(a[i].value||0), bv=Number(b[i].value||0);
    const ah=Math.round((av/max)*(H-P-26)), bh=Math.round((bv/max)*(H-P-26));
    const ay=H-20-ah, by=H-20-bh;
    g+=`<g><rect x="${x}" y="${ay}" width="${bw}" height="${ah}" rx="3" ry="3" fill="#198754"><title>${a[i].label} · Ventas ${fmtMoney(av)}</title></rect></g>`;
    x+=bw+INNER;
    g+=`<g><rect x="${x}" y="${by}" width="${bw}" height="${bh}" rx="3" ry="3" fill="#dc3545"><title>${b[i].label} · Gastos ${fmtMoney(bv)}</title></rect><text x="${x-bw/2}" y="${H-6}" text-anchor="middle">${a[i].label}</text></g>`;
    x+=bw+G;
  }
  return `<svg viewBox="0 0 ${W} ${H}" class="spark" preserveAspectRatio="none"><line x1="${P}" y1="${H-20}" x2="${W-P}" y2="${H-20}" stroke="#adb5bd"/></svg>` .replace('</svg>', g+'</svg>');
}

/* ===== Asistencias ===== */
let cacheAsist=[];

async function fetchAsistencias(desde,hasta){
  try { return await jpost('/api/rpc/report_asistencia', { desde, hasta }); }
  catch { const url=`/api/table/asistencia_detalle?desde=${encodeURIComponent(desde)}&hasta=${encodeURIComponent(hasta)}&limit=10000`; return await jget(url); }
}
function renderAsistTabla(rows){
  const tb=$('#tbAsist'); if(!rows?.length){ tb.innerHTML='<tr><td colspan="7" class="p-3 text-muted">Sin datos</td></tr>'; return; }
  tb.innerHTML=''; rows.forEach(r=>{ const tr=document.createElement('tr'); tr.innerHTML=`
    <td>${r.documento||'—'}</td><td>${r.nombre||'—'}</td><td>${r.apellido||'—'}</td><td>${r.fecha||'—'}</td>
    <td class="text-end">${r.desde_hora||'—'}</td><td class="text-end">${r.hasta_hora||'—'}</td>
    <td class="text-end">${fmtHM(Number(r.dur_min||0))}</td>`; tb.appendChild(tr); });
}

async function loadAsist(){
  let d = $('#asistDesde')?.value;
  let h = $('#asistHasta')?.value;

  // fallback: últimos 30 días
  if (!d || !h){
    const end   = new Date();
    const start = new Date(end);
    start.setDate(end.getDate() - 30);
    d = start.toISOString().slice(0,10);
    h = end.toISOString().slice(0,10);
    if ($('#asistDesde')) $('#asistDesde').value = d;
    if ($('#asistHasta')) $('#asistHasta').value = h;
  }

  $('#repStatus').textContent = 'Cargando asistencias…';
  cacheAsist = await jpost('/api/rpc/report_asistencia', { desde: d, hasta: h })
    .catch(async ()=>{
      // fallback a tabla genérica si el RPC no está
      const url=`/api/table/asistencia_detalle?desde=${encodeURIComponent(d)}&hasta=${encodeURIComponent(h)}&limit=10000`;
      return await jget(url);
    });

  renderAsistTabla(cacheAsist||[]);
  const minsTot = (cacheAsist||[]).reduce((s,r)=>s+Number(r.dur_min||0),0);
  $('#asistInfo').textContent = `${cacheAsist?.length||0} registros · ${fmtHM(minsTot)}`;
  $('#repStatus').textContent = 'Listo';
}


 function asistBarsSVG(series /* [{x:'YYYY-MM-DD', h:Number}] */, maxH = null) {
    const W=520, H=80, PAD=6, GAP=3;
    const n = series.length || 1;
    const max = maxH ?? Math.max(1, ...series.map(d => d.h || 0));
    const bw = Math.max(2, Math.floor((W - PAD*2 - GAP*(n-1)) / n));
    let x = PAD, bars = '';
    series.forEach(d => {
      const vh = max ? Math.round((d.h / max) * (H - PAD*2)) : 0;
      const y = H - PAD - vh;
      const label = `${d.x} · ${fmtHM((d.h||0)*60)}`;
      bars += `<rect x="${x}" y="${y}" width="${bw}" height="${vh}" rx="2" ry="2" data-x="${d.x}" data-h="${d.h??0}"><title>${label}</title></rect>`;
      x += bw + GAP;
    });
    const axis = `<line x1="${PAD}" y1="${H-PAD}" x2="${W-PAD}" y2="${H-PAD}" stroke="#adb5bd" stroke-width="1"/>`;
    return `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" class="spark"><style>rect{fill:#0d6efd}</style>${axis}${bars}</svg>`;
  }

  // Render de tarjetas por empleado (idéntico a usuarios.ejs)
  function asistRenderCards(grouped) {
    const cont = $('#resumenCards');
    if (!cont) return;
    cont.innerHTML = '';
    for (const [key, data] of grouped.entries()) {
      const { doc, nombre, apellido, rows } = data;
      rows.sort((a,b)=> a.fecha.localeCompare(b.fecha));
      const series = rows.map(r => ({ x: r.fecha, h: Number(r.horas)||0 }));
      const totalH = series.reduce((s,d)=> s + d.h, 0);
      const dias   = series.length;
      const avgH   = dias ? totalH / dias : 0;
      const pairs  = rows.reduce((s,r)=> s + (Number(r.pares)||0), 0);
      const last   = series.at(-1) || {x:'',h:0};
      const svg    = asistBarsSVG(series);

      const col = document.createElement('div');
      col.className = 'col-12 col-md-6 col-lg-4';
      col.innerHTML = `
        <div class="emp-card h-100">
          <div class="d-flex justify-content-between align-items-start mb-2">
            <div>
              <div class="fw-semibold">${nombre||''} ${apellido||''}</div>
              <div class="text-muted small">${doc}</div>
            </div>
            <div class="text-end">
              <div class="small text-muted">Total</div>
              <div class="fs-5 fw-semibold">${fmtHM(totalH*60)}</div>
            </div>
          </div>
          <div class="spark-wrap mb-1">${svg}</div>
          <div class="small text-muted legend">Pasá el mouse por una barra…</div>
          <div class="d-flex flex-wrap gap-1 emp-meta mt-2">
            <span class="badge">Días: ${dias}</span>
            <span class="badge">Prom: ${fmtHM(avgH*60)}</span>
            <span class="badge">Pares: ${pairs}</span>
            <span class="badge">Último: ${fmtHM((last.h||0)*60)} ${last.x?`(${last.x})`:''}</span>
          </div>
        </div>`;
      cont.appendChild(col);
    }
    const badge = $('#resumeCount'); if (badge) badge.textContent = `${grouped.size} empleado(s)`;
  }

  // Leyenda al sobrevolar barras
  const cardsRoot = $('#resumenCards');
  if (cardsRoot){
    cardsRoot.addEventListener('mouseover', (e)=>{
      const r = e.target;
      if (!(r instanceof SVGRectElement)) return;
      const card = r.closest('.emp-card');
      const legend = card?.querySelector('.legend');
      if (!legend) return;
      const x = r.getAttribute('data-x')||'';
      const h = Number(r.getAttribute('data-h')||0);
      legend.textContent = `${x} · ${fmtHM(h*60)}`;
    });
  }

  // Loader: trae la vista asistencia_resumen_diario y arma tarjetas (30 días)
  async function asistLoadResumenDiario30d(){
    const badge = $('#resumeCount'); if (badge) badge.textContent = 'Cargando…';
    try{
      const rows = await jget('/api/table/asistencia_resumen_diario?limit=5000').catch(()=>[]);
      const today = new Date(); const cut = new Date(today); cut.setDate(today.getDate()-30);
      const byKey = new Map();
      for (const r of (rows||[])) {
        const fStr = ymd(r.fecha); const fDt = new Date(fStr);
        if (!(fDt >= cut)) continue;
        const key = `${r.documento}::${r.nombre||''}::${r.apellido||''}`;
        if (!byKey.has(key)) byKey.set(key, { doc:r.documento, nombre:r.nombre||'', apellido:r.apellido||'', rows:[] });
        byKey.get(key).rows.push({
          fecha: fStr,
          horas: Number(r.horas_dia ?? r.horas ?? (r.minutos_dia||0)/60),
          pares: Number(r.pares_dia ?? r.pares ?? 0)
        });
      }
      asistRenderCards(byKey);
      if (badge) badge.textContent = 'Listo';
    }catch(e){
      if (badge) badge.textContent = 'Error';
      console.error('asistLoadResumenDiario30d:', e);
    }
  }

  // Auto-carga al abrir reportes (si la card está en el DOM)
  document.addEventListener('DOMContentLoaded', () => {
    if (document.getElementById('PRINT_ASIST')) {
      asistLoadResumenDiario30d();
    }
  });


/* ===== Tickets (ventas) ===== */
let cacheTickets=null;

function getYearSafe(val){
  const y = parseInt(val, 10);
  return Number.isFinite(y) && y >= 2000 && y <= 2100
    ? y
    : new Date().getFullYear();
}

async function fetchTickets(year){
  const y = getYearSafe(year);
  return await jpost('/api/rpc/report_tickets', { year: y });
}

function renderTickets(data){
  const months=data?.months||[]; $('#ticketsYearTitle').textContent=data?.year||'—';
  $('#tYtd').textContent=months.reduce((s,m)=>s+Number(m.cant||0),0);
  $('#tAvg').textContent=fmtMoney(data?.avg||data?.avg_ticket||0);
  $('#tToDate').textContent=fmtMoney(data?.to_date||0);
  $('#ticketsChart').innerHTML=barsSVG(months.map(m=>({label:m.nombre||m.mes,value:Number(m.cant||0)})));
  const tb=$('#tbTickets'); if(!months.length){ tb.innerHTML='<tr><td colspan="4" class="p-3 text-muted">Sin datos</td></tr>'; } else {
    tb.innerHTML=''; months.forEach(m=>{ const tr=document.createElement('tr'); tr.innerHTML=`
      <td>${m.nombre||m.mes}</td><td class="text-end">${m.cant||0}</td>
      <td class="text-end">${fmtMoney(m.importe||0)}</td><td class="text-end">${fmtMoney(m.avg||0)}</td>`; tb.appendChild(tr); });
  }
  $('#ticketsInfo').textContent=`${months.length} meses`;
}

/* ===== Gastos ===== */
let cacheGastos=null; // {year, months:[{mes,nombre,importe}], total, avg}
async function fetchGastos(year){
  // 1) Intentar RPC
  try { return await jpost('/api/rpc/report_gastos', { year }); } catch {}
  // 2) Fallback: traer compras y agrupar en el cliente
  const rows = await jget('/api/table/compras?limit=10000&order_by=fec_compra%20asc').catch(()=>[]);
  const months = Array.from({length:12},(_,i)=>({mes:i+1,nombre:monthNames[i],importe:0}));
  let total=0;
  (rows||[]).forEach(r=>{
    const d=new Date(r.fec_compra||r.fec||r.fecha); if(!d.getFullYear) return;
    if (d.getFullYear() !== Number(year)) return;
    const m=d.getMonth(); const t=Number(r.total||0);
    months[m].importe += t; total += t;
  });
  const avg = months.reduce((s,m)=>s+m.importe,0)/12;
  return { year, months, total, avg };
}

function renderGastos(data){
  // siempre cacheo para el comparativo
  cacheGastos = data || { year: new Date().getFullYear(), months: [], total: 0, avg: 0 };

  const months = cacheGastos.months || [];

  // elementos de la antigua card (pueden NO existir)
  const yTitle = document.querySelector('#gastosYearTitle');
  const toDate = document.querySelector('#gToDate');
  const avgEl  = document.querySelector('#gAvg');
  const chart  = document.querySelector('#gastosChart');
  const tb     = document.querySelector('#tbGastos');
  const info   = document.querySelector('#gastosInfo');

  // si NO existe ninguno, significa que ya no está la card de Gastos ⇒ solo mantener cache y salir
  if (!yTitle && !toDate && !avgEl && !chart && !tb && !info) return;

  // a partir de acá, escribir solo si el elemento existe
  if (yTitle) yTitle.textContent = cacheGastos.year ?? '—';
  if (toDate) toDate.textContent = fmtMoney(cacheGastos.total || 0);
  if (avgEl)  avgEl.textContent  = fmtMoney(cacheGastos.avg   || 0);

  if (chart) {
    chart.innerHTML = barsSVG(months.map(m => ({
      label: m.nombre || m.mes, value: Number(m.importe || 0)
    })));
  }

  if (tb) {
    if (!months.length) {
      tb.innerHTML = '<tr><td colspan="2" class="p-3 text-muted">Sin datos</td></tr>';
    } else {
      tb.innerHTML = '';
      months.forEach(m => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
          <td>${m.nombre || m.mes}</td>
          <td class="text-end">${fmtMoney(m.importe || 0)}</td>`;
        tb.appendChild(tr);
      });
    }
  }

  if (info) info.textContent = `${months.length} meses`;
}

/* ===== Comparativo ===== */
function renderComparativo(){
  if(!cacheTickets?.months || !cacheGastos?.months) return;
  const y = cacheTickets.year || cacheGastos.year; $('#compYearTitle').textContent=y;
  const ventas = Array.from({length:12},(_,i)=>Number(cacheTickets.months.find(m=>(m.mes||monthNames.indexOf(m.nombre)+1)===i+1)?.importe||0));
  const gastos = Array.from({length:12},(_,i)=>Number(cacheGastos.months[i]?.importe||0));
  const seriesA = ventas.map((v,i)=>({label:monthNames[i], value:v}));
  const seriesB = gastos.map((v,i)=>({label:monthNames[i], value:v}));
  $('#compChart').innerHTML = barsCompareSVG(seriesA, seriesB);

  const tb=$('#tbComp'); tb.innerHTML='';
  let ySales=0,yCost=0;
  for(let i=0;i<12;i++){
    const s=ventas[i]||0, g=gastos[i]||0, d=s-g; ySales+=s; yCost+=g;
    const tr=document.createElement('tr'); tr.innerHTML=`
      <td>${monthNames[i]}</td>
      <td class="text-end">${fmtMoney(s)}</td>
      <td class="text-end">${fmtMoney(g)}</td>
      <td class="text-end ${d>=0?'text-success':'text-danger'}">${fmtMoney(d)}</td>`;
    tb.appendChild(tr);
  }
  $('#cmpSales').textContent = fmtMoney(ySales);
  $('#cmpCost').textContent  = fmtMoney(yCost);
  $('#cmpDiff').textContent  = fmtMoney(ySales - yCost);
  $('#compInfo').textContent = '12 meses';
}

/* ===== Exportaciones ===== */
function exportAsistCSV(){
  if(!cacheAsist?.length) return;
  const headers=['Documento','Nombre','Apellido','Fecha','Desde','Hasta','Duración(min)'];
  const rows = cacheAsist.map(r=>({Documento:r.documento||'',Nombre:r.nombre||'',Apellido:r.apellido||'',Fecha:r.fecha||'',Desde:r.desde_hora||'',Hasta:r.hasta_hora||'','Duración(min)':Number(r.dur_min||0)}));
  downloadText(`asistencias_${$('#asistDesde').value}_${$('#asistHasta').value}.csv`, toCSV(rows,headers));
}
function exportTicketsCSV(){
  if(!cacheTickets?.months?.length) return;
  const toInt=v=>fmtInt(v);
  const headers=['Año','Mes','Tickets','Importe','Ticket promedio'];
  const rows=cacheTickets.months.map(m=>({'Año':cacheTickets.year,'Mes':m.nombre||m.mes,'Tickets':Number(m.cant||0),'Importe':toInt(m.importe),'Ticket promedio':toInt(m.avg)}));
  downloadText(`tickets_${cacheTickets.year}.csv`, toCSV(rows,headers));
}
function exportGastosCSV(){
  if(!cacheGastos?.months?.length) return;
  const toInt=v=>fmtInt(v);
  const headers=['Año','Mes','Gasto'];
  const rows=cacheGastos.months.map(m=>({'Año':cacheGastos.year,'Mes':m.nombre,'Gasto':toInt(m.importe)}));
  downloadText(`gastos_${cacheGastos.year}.csv`, toCSV(rows,headers));
}
function exportCompCSV(){
  if(!cacheGastos?.months || !cacheTickets?.months) return;
  const headers=['Mes','Ingresos','Gastos','Resultado'];
  const rows=monthNames.map((nm,i)=>{ const s=Number(cacheTickets.months[i]?.importe||0), g=Number(cacheGastos.months[i]?.importe||0); return {Mes:nm,Ingresos:fmtInt(s),Gastos:fmtInt(g),Resultado:fmtInt(s-g)}; });
  downloadText(`comparativo_${cacheTickets.year||cacheGastos.year}.csv`, toCSV(rows,headers));
}

/* ===== Gastos detallados (mes anterior) ===== */
let cacheGastosDet = [];
let cacheGdetMeta  = null;

async function loadGastosDetallado(optMonth, optYear){
  // 1) rango según select (o params)
  const {month, year} = (Number.isFinite(optMonth) && Number.isFinite(optYear))
    ? {month: optMonth, year: optYear}
    : getSelectedMonthYear();
  const {desdeISO, hastaISO, titulo, spanTxt} = monthRange(month, year);
  cacheGdetMeta = { desdeISO, hastaISO, month, year };

  // 2) traer tablas base
  const [compras, provs, detMats, detProds, mates, prods] = await Promise.all([
    jget('/api/table/compras?limit=10000&order_by=fec_compra%20desc').catch(()=>[]),
    jget('/api/table/proveedores?limit=10000').catch(()=>[]),
    jget('/api/table/deta_comp_materias?limit=100000').catch(()=>[]),
    jget('/api/table/deta_comp_producto?limit=100000').catch(()=>[]),
    jget('/api/table/mate_primas?limit=10000').catch(()=>[]),
    jget('/api/table/productos?limit=10000').catch(()=>[]),
  ]);

  // 3) filtro por rango seleccionado
  const from = new Date(desdeISO), to = new Date(hastaISO);
  const comprasMes = (compras||[]).filter(c=>{
    const d = new Date(c.fec_compra || c.fecha || c.fec);
    return d >= from && d <= to;
  });
  const ids = new Set(comprasMes.map(c=>c.id_compra));

  // 4) mapas auxiliares
  const provById = Object.fromEntries((provs||[]).map(p=>[p.id_proveedor, p.raz_social||p.rut||`#${p.id_proveedor}`]));
  const matName  = Object.fromEntries((mates||[]).map(x=>[x.id_mat_prima, x.nombre]));
  const prodName = Object.fromEntries((prods||[]).map(x=>[x.id_producto,  x.nombre]));
  const mapCompra = Object.fromEntries(comprasMes.map(c=>[c.id_compra, c]));

  // 5) construir filas
  const filas = [];
  (detMats||[]).forEach(d=>{
    if(!ids.has(d.id_compra)) return;
    const c = mapCompra[d.id_compra]; const fecha = new Date(c.fec_compra||c.fecha||c.fec);
    const prov = provById[c.id_proveedor] || '—';
    const qty  = Number(d.cantidad||0);
    const pu   = Number(d.pre_unitario||0);
    filas.push({
      fecha, fecha_txt: fecha.toLocaleDateString('es-UY'),
      proveedor: prov, tipo: 'Materia', item: (matName[d.id_mat_prima] || `#${d.id_mat_prima}`),
      cantidad: qty, precio: pu, subtotal: qty*pu
    });
  });
  (detProds||[]).forEach(d=>{
    if(!ids.has(d.id_compra)) return;
    const c = mapCompra[d.id_compra]; const fecha = new Date(c.fec_compra||c.fecha||c.fec);
    const prov = provById[c.id_proveedor] || '—';
    const qty  = Number(d.cantidad||0);
    const pu   = Number(d.pre_unitario||0);
    filas.push({
      fecha, fecha_txt: fecha.toLocaleDateString('es-UY'),
      proveedor: prov, tipo: 'Producto', item: (prodName[d.id_producto] || `#${d.id_producto}`),
      cantidad: qty, precio: pu, subtotal: qty*pu
    });
  });

  filas.sort((a,b)=> b.fecha - a.fecha);
  cacheGastosDet = filas;

  // 6) render
  document.querySelector('#gdetTitle')?.replaceChildren(document.createTextNode(titulo));
  document.querySelector('#gdetInfo') ?.replaceChildren(document.createTextNode(spanTxt));
  const tb = document.querySelector('#tbGdet');
  if(!filas.length){ tb.innerHTML = '<tr><td colspan="7" class="p-3 text-muted">Sin datos</td></tr>'; }
  else{
    tb.innerHTML = '';
    filas.forEach(r=>{
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${r.fecha_txt}</td>
        <td>${r.proveedor}</td>
        <td>${r.tipo}</td>
        <td>${r.item}</td>
        <td class="text-end">${r.cantidad.toLocaleString('es-UY')}</td>
        <td class="text-end">${new Intl.NumberFormat('es-UY',{style:'currency',currency:'UYU'}).format(r.precio)}</td>
        <td class="text-end">${new Intl.NumberFormat('es-UY',{style:'currency',currency:'UYU'}).format(r.subtotal)}</td>`;
      tb.appendChild(tr);
    });
  }
  const total = filas.reduce((s,r)=>s+r.subtotal,0);
  document.querySelector('#gdetTotal')  ?.replaceChildren(document.createTextNode(new Intl.NumberFormat('es-UY',{style:'currency',currency:'UYU'}).format(total)));
  document.querySelector('#gdetCompras')?.replaceChildren(document.createTextNode(comprasMes.length.toLocaleString('es-UY')));
  document.querySelector('#gdetRows')   ?.replaceChildren(document.createTextNode(filas.length.toLocaleString('es-UY')));
}


function exportGdetCSV(){
  if(!cacheGastosDet?.length) return;
  const headers = ['Fecha','Proveedor','Tipo','Ítem','Cantidad','Precio','Subtotal'];
  const rows = cacheGastosDet.map(r=>({
    'Fecha': r.fecha_txt,
    'Proveedor': r.proveedor,
    'Tipo': r.tipo,
    'Ítem': r.item,
    'Cantidad': r.cantidad,
    'Precio': Math.round(r.precio),
    'Subtotal': Math.round(r.subtotal)
  }));
  const title = document.querySelector('#gdetTitle')?.textContent?.replace(/\s+/g,'_') || 'mes';
  downloadText(`gastos_detalle_${title}.csv`, toCSV(rows, headers));
}

const onPDFGdet = ()=>printArea('PRINT_GASTOS_DET');
const onPDFAsist=()=>printArea('PRINT_ASIST');
const onPDFTicket=()=>printArea('PRINT_TICKETS');
const onPDFGastos=()=>printArea('PRINT_GASTOS');
const onPDFComp=()=>printArea('PRINT_COMP');

/* ===== Eventos ===== */

const btnGdetCargar = document.querySelector('#btnGdetCargar');
if (btnGdetCargar) btnGdetCargar.addEventListener('click', ()=> loadGastosDetallado());

// por UX: recargar al cambiar mes/año
document.querySelector('#gdetMes') ?.addEventListener('change', ()=> loadGastosDetallado());
document.querySelector('#gdetAnio')?.addEventListener('change', ()=> loadGastosDetallado());

document.querySelector('#btnGdetExcel')?.addEventListener('click', exportGdetCSV);
document.querySelector('#btnGdetPDF') ?.addEventListener('click', onPDFGdet);


$('#btnAsistCargar').addEventListener('click', loadAsist);
$('#btnAsistExcel'). addEventListener('click', exportAsistCSV);
$('#btnAsistPDF').   addEventListener('click', onPDFAsist);

$('#btnAnualExcel').addEventListener('click', exportCompCSV);
$('#btnAnualPDF').  addEventListener('click', onPDFComp);

/* ✅ Enlaza los botones de la sección comparativo */
$('#btnCompExcel').addEventListener('click', exportCompCSV);
$('#btnCompPDF').  addEventListener('click', onPDFComp);

/* ✅ Botones de la nueva sección de gastos detallados */
$('#btnGdetExcel').addEventListener('click', exportGdetCSV);
$('#btnGdetPDF').  addEventListener('click', onPDFGdet);


$('#btnAnualCargar').addEventListener('click', async ()=>{
  const y=Number($('#anualYear').value);
  $('#repStatus').textContent='Cargando ventas y gastos…';
  cacheTickets = await fetchTickets(y).catch(()=>null);
  if (cacheTickets) renderTickets(cacheTickets);
  cacheGastos  = await fetchGastos(y).catch(()=>null);
  if (cacheGastos) renderGastos(cacheGastos);
  if (cacheTickets && cacheGastos) renderComparativo();
  $('#repStatus').textContent='Listo';
});
$('#btnAnualExcel').addEventListener('click', exportCompCSV);
$('#btnAnualPDF').  addEventListener('click', onPDFComp);

/* ===== Defaults al cargar ===== */
(function init(){
  const today = new Date();
  const y = today.getFullYear();

  if (!$('#anualYear').value) $('#anualYear').value = y;

  if (!$('#asistDesde').value || !$('#asistHasta').value){
    const end   = new Date();
    const start = new Date(end);
    start.setDate(end.getDate()-30);
    $('#asistDesde').value = start.toISOString().slice(0,10);
    $('#asistHasta').value = end.toISOString().slice(0,10);
  }

  loadAsist().catch(()=>{});
  (async()=>{
    cacheTickets = await fetchTickets($('#anualYear').value).catch(()=>null);
    if (cacheTickets) renderTickets(cacheTickets);
    cacheGastos  = await fetchGastos($('#anualYear').value).catch(()=>null);
    if (cacheGastos) renderGastos(cacheGastos);
    if (cacheTickets && cacheGastos) renderComparativo();
    $('#repStatus').textContent = 'Listo';
  })();
})();

(function presetMesAnterior(){
  const now = new Date();
  const prev = new Date(now.getFullYear(), now.getMonth()-1, 1);
  const mesSel = document.querySelector('#gdetMes');
  const anioIn = document.querySelector('#gdetAnio');
  if (mesSel && !mesSel.value) mesSel.value = String(prev.getMonth()+1);
  if (anioIn && !anioIn.value) anioIn.value = String(prev.getFullYear());
  // primera carga
  loadGastosDetallado(prev.getMonth()+1, prev.getFullYear()).catch(()=>{});
})();

</script>