@extends("theme.sneat.admin")
@section('contenido')
<meta name="csrf-token" content="{{ csrf_token() }}" />
@php $c = $cfg; @endphp
<style>
  .rpi-page {
    --rpi-border: #e7e7e9;
    --rpi-muted: #697a8d;
    --rpi-surface: #f8f9fa;
    --rpi-accent: {{ $c['accent'] }};
    --rpi-accent-soft: {{ $c['accent_soft'] }};
    --rpi-accent-border: {{ $c['accent_border'] }};
    --rpi-ok: #28c76f;
    --rpi-warn: #ff9f43;
    --rpi-info: #00cfe8;
  }
  .rpi-page .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.15rem;
  }
  .rpi-page .page-head h4 { margin: 0; }
  .rpi-page .page-head .hint {
    margin: 0.3rem 0 0;
    color: var(--rpi-muted);
    font-size: 0.875rem;
    max-width: 42rem;
  }
  .rpi-filters {
    background: #fff;
    border: 1px solid var(--rpi-border);
    border-radius: 0.75rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.1rem;
  }
  .rpi-filters .form-label {
    font-size: 0.8rem;
    font-weight: 650;
    color: #566a7f;
    margin-bottom: 0.3rem;
  }
  .rpi-filters .form-control { min-height: 42px; }
  .rpi-filters .btn { min-height: 42px; }
  .rpi-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.7rem;
  }
  .rpi-quick .btn {
    min-height: 34px;
    font-size: 0.78rem;
    padding: 0.25rem 0.7rem;
  }
  .rpi-heroes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-bottom: 1rem;
  }
  @media (min-width: 768px) {
    .rpi-heroes { grid-template-columns: 1.25fr 1fr 1fr; }
  }
  .rpi-hero {
    background: #fff;
    border: 1px solid var(--rpi-border);
    border-radius: 0.7rem;
    padding: 1.1rem 1.2rem;
  }
  .rpi-hero.accent {
    background: linear-gradient(135deg, var(--rpi-accent-soft) 0%, #fff 70%);
    border-color: var(--rpi-accent-border);
  }
  .rpi-hero.ok {
    background: linear-gradient(135deg, #f2fbf6 0%, #fff 70%);
    border-color: #b9f0d1;
  }
  .rpi-hero .lbl {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rpi-muted);
    font-weight: 650;
    margin-bottom: 0.35rem;
  }
  .rpi-hero .val {
    font-size: 1.85rem;
    font-weight: 800;
    color: #566a7f;
    line-height: 1.15;
    margin: 0;
    font-variant-numeric: tabular-nums;
  }
  .rpi-hero.accent .val { color: var(--rpi-accent); }
  .rpi-hero.ok .val { color: var(--rpi-ok); }
  .rpi-hero .sub {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--rpi-muted);
  }
  .rpi-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin-bottom: 1rem;
  }
  @media (min-width: 768px) {
    .rpi-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .rpi-kpi {
    background: #fff;
    border: 1px solid var(--rpi-border);
    border-radius: 0.65rem;
    padding: 0.9rem 1rem;
  }
  .rpi-kpi .lbl {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rpi-muted);
    font-weight: 650;
    margin-bottom: 0.25rem;
  }
  .rpi-kpi .val {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #566a7f;
    font-variant-numeric: tabular-nums;
  }
  .rpi-kpi.is-warn .val { color: var(--rpi-warn); }
  .rpi-kpi.is-info .val { color: var(--rpi-info); }
  .rpi-kpi.is-accent .val { color: var(--rpi-accent); }
  .rpi-section {
    background: #fff;
    border: 1px solid var(--rpi-border);
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1rem;
  }
  .rpi-section .sec-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1.05rem;
    border-bottom: 1px solid var(--rpi-border);
    background: var(--rpi-surface);
  }
  .rpi-section .sec-head h6 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 750;
    color: #566a7f;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .rpi-section .sec-head .count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--rpi-muted);
    background: #fff;
    border: 1px solid var(--rpi-border);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
  }
  .rpi-section .sec-body { padding: 0.35rem 0.5rem 0.65rem; }
  .rpi-section table { margin: 0; width: 100%; }
  .rpi-section thead th {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--rpi-muted);
    border-bottom-color: var(--rpi-border);
    white-space: nowrap;
  }
  .rpi-section tbody td { vertical-align: middle; font-size: 0.88rem; }
  .rpi-section .qty {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--rpi-accent);
    white-space: nowrap;
  }
  .rpi-section .muted { color: var(--rpi-muted); font-size: 0.8rem; }
  .rpi-section .empty-row {
    text-align: center;
    color: var(--rpi-muted);
    padding: 1.4rem !important;
    font-size: 0.88rem;
  }
  .rpi-day-row { cursor: pointer; }
  .rpi-day-row:hover { background: var(--rpi-accent-soft); }
  .rpi-day-row.is-active { background: var(--rpi-accent-soft); }
  .rpi-bar {
    height: 0.4rem;
    background: #eceef1;
    border-radius: 999px;
    overflow: hidden;
    min-width: 70px;
  }
  .rpi-bar > span {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--rpi-accent);
    transition: width .45s ease;
  }
  .rpi-empty {
    border: 1px dashed var(--rpi-border);
    border-radius: 0.75rem;
    padding: 2.4rem 1.25rem;
    text-align: center;
    color: var(--rpi-muted);
    background: linear-gradient(180deg, #fcfcfd 0%, #f5f6f8 100%);
  }
  .rpi-empty i {
    font-size: 2.1rem;
    display: block;
    margin-bottom: 0.5rem;
    color: #b4b8c5;
  }
  .rpi-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    background: var(--rpi-accent-soft);
    color: var(--rpi-accent);
    font-size: 0.78rem;
    font-weight: 650;
  }
  .rpi-btn-accent {
    background: var(--rpi-accent) !important;
    border-color: var(--rpi-accent) !important;
    color: #fff !important;
  }
  .rpi-split {
    display: grid;
    gap: 1rem;
  }
  @media (min-width: 992px) {
    .rpi-split { grid-template-columns: 1fr 1fr; }
  }
  .rpi-obs {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--rpi-muted);
    font-size: 0.8rem;
  }
</style>

<div class="rpi-page">
  <div class="page-head">
    <div>
      <h4 class="fw-bold"><span class="text-muted fw-light">Informe de</span> {{ $c['titulo_plural'] }}</h4>
      <p class="hint">Consulte por rango de fechas, totalice cantidades y revise los productos con mayor movimiento.</p>
    </div>
    <div>
      <a href="{{ $c['urls']['index'] }}" class="btn btn-outline-secondary">
        <i class="bx {{ $c['icon'] }}"></i> Ir a registro
      </a>
    </div>
  </div>

  <div class="rpi-filters">
    <div class="row g-2 align-items-end">
      <div class="col-md-3">
        <label class="form-label" for="rpi_desde">Desde</label>
        <input type="date" class="form-control" id="rpi_desde" />
      </div>
      <div class="col-md-3">
        <label class="form-label" for="rpi_hasta">Hasta</label>
        <input type="date" class="form-control" id="rpi_hasta" />
      </div>
      <div class="col-md-6 d-flex flex-wrap gap-2">
        <button type="button" class="btn rpi-btn-accent" id="btn_generar">
          <i class="bx bx-analyse"></i> Generar informe
        </button>
        <button type="button" class="btn btn-outline-secondary" id="btn_mes">
          Mes actual
        </button>
      </div>
    </div>
    <div class="rpi-quick">
      <button type="button" class="btn btn-sm btn-outline-secondary" data-rango="hoy">Hoy</button>
      <button type="button" class="btn btn-sm btn-outline-secondary" data-rango="7">Últimos 7 días</button>
      <button type="button" class="btn btn-sm btn-outline-secondary" data-rango="30">Últimos 30 días</button>
      <button type="button" class="btn btn-sm btn-outline-secondary" data-rango="mes_ant">Mes anterior</button>
    </div>
  </div>

  <div id="bloque_vacio" class="rpi-empty">
    <i class="bx bx-bar-chart-alt-2"></i>
    <div>Elija un rango de fechas y genere el informe para ver totales e indicadores.</div>
  </div>

  <div id="bloque_resultado" class="d-none">
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
      <h5 class="mb-0 fw-bold" style="color:#566a7f" id="rpi_periodo">—</h5>
      <span class="rpi-badge" id="rpi_badge"><i class="bx bx-calendar"></i> —</span>
    </div>

    <div class="rpi-heroes">
      <div class="rpi-hero accent">
        <span class="lbl" id="h_cant_lbl">{{ !empty($c['requiere_personas']) ? 'Consumo por persona' : 'Cantidad total' }}</span>
        <p class="val" id="h_cant">{{ !empty($c['requiere_personas']) ? '$0' : '0' }}</p>
        <div class="sub" id="h_cant_sub">{{ !empty($c['requiere_personas']) ? 'Costo estimado ÷ personas' : 'Promedio diario —' }}</div>
      </div>
      <div class="rpi-hero ok">
        <span class="lbl">Costo estimado</span>
        <p class="val" id="h_costo">$0</p>
        <div class="sub" id="h_costo_sub">Promedio diario —</div>
      </div>
      <div class="rpi-hero">
        <span class="lbl">Producto destacado</span>
        <p class="val" style="font-size:1.25rem" id="h_top">—</p>
        <div class="sub" id="h_top_sub">Sin datos</div>
      </div>
    </div>

    <div class="rpi-kpis">
      <div class="rpi-kpi is-accent"><span class="lbl">Registros</span><p class="val" id="k_regs">0</p></div>
      <div class="rpi-kpi is-info"><span class="lbl">Días con datos</span><p class="val" id="k_dias">0</p></div>
      @if (!empty($c['requiere_personas']))
        <div class="rpi-kpi is-warn"><span class="lbl">Total personas</span><p class="val" id="k_prod">0</p></div>
      @else
        <div class="rpi-kpi is-warn"><span class="lbl">Productos distintos</span><p class="val" id="k_prod">0</p></div>
      @endif
      <div class="rpi-kpi"><span class="lbl">Días del rango</span><p class="val" id="k_rango">0</p></div>
    </div>

    <div class="rpi-split">
      <div class="rpi-section">
        <div class="sec-head">
          <h6><i class="bx bx-calendar"></i> Totales por día</h6>
          <span class="count" id="cnt_dias">0</span>
        </div>
        <div class="sec-body">
          <div class="table-responsive">
            <table class="table table-sm table-hover mb-0">
              <thead>
                <tr>
                  <th>Fecha</th>
                  <th class="text-end">Regs.</th>
                  @if (!empty($c['requiere_personas']))
                    <th class="text-end">Personas</th>
                    <th class="text-end">$/pers.</th>
                  @else
                    <th class="text-end">Cantidad</th>
                  @endif
                  <th class="text-end">Costo est.</th>
                </tr>
              </thead>
              <tbody id="tb_dias"></tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="rpi-section">
        <div class="sec-head">
          <h6><i class="bx bx-package"></i> Top productos</h6>
          <span class="count" id="cnt_prod">0</span>
        </div>
        <div class="sec-body">
          <div class="table-responsive">
            <table class="table table-sm table-hover mb-0">
              <thead>
                <tr>
                  <th>Producto</th>
                  <th style="width:90px"></th>
                  <th class="text-end">Cantidad</th>
                </tr>
              </thead>
              <tbody id="tb_prod"></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="rpi-section">
      <div class="sec-head">
        <h6><i class="bx bx-folder"></i> Por categoría</h6>
        <span class="count" id="cnt_cat">0</span>
      </div>
      <div class="sec-body">
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0">
            <thead>
              <tr>
                <th>Categoría</th>
                <th class="text-end">Registros</th>
                <th class="text-end">Cantidad</th>
                <th class="text-end">Costo est.</th>
              </tr>
            </thead>
            <tbody id="tb_cat"></tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="rpi-section">
      <div class="sec-head">
        <h6><i class="bx bx-list-ul"></i> Detalle <span class="muted fw-normal" id="filtro_dia_lbl"></span></h6>
        <div class="d-flex align-items-center gap-2">
          <button type="button" class="btn btn-sm btn-outline-secondary d-none" id="btn_ver_todo">Ver todo</button>
          <span class="count" id="cnt_det">0</span>
        </div>
      </div>
      <div class="sec-body">
        <div class="table-responsive">
          <table class="table table-sm table-hover mb-0">
            <thead>
              <tr>
                <th>Fecha</th>
                <th>Producto</th>
                <th class="text-end">Cantidad</th>
                <th class="text-end">Costo est.</th>
                <th>Observación</th>
              </tr>
            </thead>
            <tbody id="tb_det"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script>
(function () {
  const CFG = @json($c);
  const REQUIERE_PERSONAS = !!CFG.requiere_personas;
  let lastData = null;
  let filtroFecha = null;

  const $desde = $('#rpi_desde');
  const $hasta = $('#rpi_hasta');

  function pad(n) { return String(n).padStart(2, '0'); }
  function iso(d) {
    return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate());
  }
  function parseISO(s) {
    const p = String(s).split('-');
    return new Date(Number(p[0]), Number(p[1]) - 1, Number(p[2]));
  }
  function fmtFecha(s) {
    const d = parseISO(s);
    return d.toLocaleDateString('es-CL', { weekday: 'short', day: '2-digit', month: 'short', year: 'numeric' });
  }
  function esc(s) {
    return String(s == null ? '' : s)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;')
      .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
  }
  function fmtCLP(n) {
    return '$' + (Number(n) || 0).toLocaleString('es-CL', { maximumFractionDigits: 0 });
  }
  function fmtCant(n) {
    return (Number(n) || 0).toLocaleString('es-CL', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
  }
  function toast(icon, title) {
    Swal.fire({ icon: icon, title: title, timer: 1700, showConfirmButton: false, position: 'top-end', toast: true });
  }

  function setRango(tipo) {
    const hoy = new Date();
    let d1 = new Date(hoy), d2 = new Date(hoy);
    if (tipo === 'hoy') {
      // same
    } else if (tipo === '7') {
      d1.setDate(hoy.getDate() - 6);
    } else if (tipo === '30') {
      d1.setDate(hoy.getDate() - 29);
    } else if (tipo === 'mes' || tipo === 'mes_act') {
      d1 = new Date(hoy.getFullYear(), hoy.getMonth(), 1);
      d2 = new Date(hoy.getFullYear(), hoy.getMonth() + 1, 0);
    } else if (tipo === 'mes_ant') {
      d1 = new Date(hoy.getFullYear(), hoy.getMonth() - 1, 1);
      d2 = new Date(hoy.getFullYear(), hoy.getMonth(), 0);
    }
    $desde.val(iso(d1));
    $hasta.val(iso(d2));
  }

  function renderDetalle(rows) {
    if (!rows.length) {
      $('#tb_det').html('<tr><td colspan="5" class="empty-row">Sin registros en el rango</td></tr>');
      $('#cnt_det').text('0');
      return;
    }
    let html = '';
    rows.forEach(function (r) {
      html += '<tr>'
        + '<td>' + esc(fmtFecha(r.fecha)) + '</td>'
        + '<td><strong>' + esc(r.producto_nombre) + '</strong>'
        + '<div class="muted">'
        + ((r.tipo === 'preparacion') ? 'Preparación · ' : '')
        + esc(r.categoria || '') + (r.unidad_medida ? ' · ' + esc(r.unidad_medida) : '')
        + (REQUIERE_PERSONAS && r.personas ? (' · ' + r.personas + ' pers.') : '')
        + '</div></td>'
        + '<td class="text-end qty">' + fmtCant(r.cantidad) + '</td>'
        + '<td class="text-end">' + fmtCLP(r.costo_estimado) + '</td>'
        + '<td><div class="rpi-obs" title="' + esc(r.observacion) + '">' + esc(r.observacion || '—') + '</div></td>'
        + '</tr>';
    });
    $('#tb_det').html(html);
    $('#cnt_det').text(rows.length);
  }

  function aplicarFiltroDia(fecha) {
    filtroFecha = fecha || null;
    if (!lastData) return;
    if (filtroFecha) {
      $('#filtro_dia_lbl').text('· ' + fmtFecha(filtroFecha));
      $('#btn_ver_todo').removeClass('d-none');
      $('#tb_dias .rpi-day-row').removeClass('is-active')
        .filter('[data-fecha="' + filtroFecha + '"]').addClass('is-active');
      renderDetalle((lastData.detalle || []).filter(function (r) { return r.fecha === filtroFecha; }));
    } else {
      $('#filtro_dia_lbl').text('');
      $('#btn_ver_todo').addClass('d-none');
      $('#tb_dias .rpi-day-row').removeClass('is-active');
      renderDetalle(lastData.detalle || []);
    }
  }

  function render(data) {
    lastData = data;
    const r = data.resumen || {};

    $('#rpi_periodo').text(fmtFecha(data.desde) + ' → ' + fmtFecha(data.hasta));
    $('#rpi_badge').html('<i class="bx bx-calendar"></i> ' + (data.dias_rango || 0) + ' días de rango');

    if (REQUIERE_PERSONAS) {
      $('#h_cant').text(fmtCLP(r.consumo_por_persona || 0));
      $('#h_cant_sub').text(
        (r.total_personas || 0) + ' personas · costo ' + fmtCLP(r.costo_estimado || 0)
        + ' · cant. ' + fmtCant(r.total_cantidad || 0)
      );
      $('#k_prod').text(r.total_personas || 0);
    } else {
      $('#h_cant').text(fmtCant(r.total_cantidad));
      $('#h_cant_sub').text('Promedio diario ' + fmtCant(r.promedio_diario_cantidad) + ' · ' + (r.dias_con_datos || 0) + ' días con datos');
      $('#k_prod').text(r.productos_distintos || 0);
    }
    $('#h_costo').text(fmtCLP(r.costo_estimado));
    $('#h_costo_sub').text('Promedio diario ' + fmtCLP(r.promedio_diario_costo));
    $('#h_top').text(r.top_producto || '—');
    $('#h_top_sub').text(r.top_producto
      ? ('Cantidad ' + fmtCant(r.top_producto_cantidad))
      : 'Sin datos en el rango');

    $('#k_regs').text(r.total_registros || 0);
    $('#k_dias').text(r.dias_con_datos || 0);
    $('#k_rango').text(data.dias_rango || 0);

    // días
    const dias = data.por_dia || [];
    $('#cnt_dias').text(dias.length);
    const colSpanDias = REQUIERE_PERSONAS ? 5 : 4;
    if (!dias.length) {
      $('#tb_dias').html('<tr><td colspan="' + colSpanDias + '" class="empty-row">Sin movimientos por día</td></tr>');
    } else {
      let html = '';
      dias.forEach(function (d) {
        html += '<tr class="rpi-day-row" data-fecha="' + esc(d.fecha) + '" title="Ver detalle del día">'
          + '<td><strong>' + esc(fmtFecha(d.fecha)) + '</strong>'
          + '<div class="muted">' + d.productos_distintos + ' productos</div></td>'
          + '<td class="text-end">' + d.registros + '</td>';
        if (REQUIERE_PERSONAS) {
          html += '<td class="text-end">' + (d.personas || 0) + '</td>'
            + '<td class="text-end qty">' + fmtCLP(d.consumo_por_persona || 0) + '</td>';
        } else {
          html += '<td class="text-end qty">' + fmtCant(d.cantidad) + '</td>';
        }
        html += '<td class="text-end">' + fmtCLP(d.costo_estimado) + '</td></tr>';
      });
      $('#tb_dias').html(html);
    }

    // productos
    const prods = data.por_producto || [];
    const maxCant = prods.length ? Number(prods[0].cantidad) || 1 : 1;
    $('#cnt_prod').text(prods.length);
    if (!prods.length) {
      $('#tb_prod').html('<tr><td colspan="3" class="empty-row">Sin productos</td></tr>');
    } else {
      let html = '';
      prods.forEach(function (p) {
        const pct = Math.max(4, Math.round((Number(p.cantidad) / maxCant) * 100));
        html += '<tr>'
          + '<td><strong>' + esc(p.nombre) + '</strong>'
          + '<div class="muted">'
          + ((p.tipo === 'preparacion') ? 'Preparación · ' : '')
          + esc(p.categoria || '') + (p.unidad_medida ? ' · ' + esc(p.unidad_medida) : '') + '</div></td>'
          + '<td><div class="rpi-bar"><span style="width:' + pct + '%"></span></div></td>'
          + '<td class="text-end qty">' + fmtCant(p.cantidad) + '</td>'
          + '</tr>';
      });
      $('#tb_prod').html(html);
    }

    // categorías
    const cats = data.por_categoria || [];
    $('#cnt_cat').text(cats.length);
    if (!cats.length) {
      $('#tb_cat').html('<tr><td colspan="4" class="empty-row">Sin categorías</td></tr>');
    } else {
      let html = '';
      cats.forEach(function (c) {
        html += '<tr>'
          + '<td><strong>' + esc(c.categoria) + '</strong></td>'
          + '<td class="text-end">' + c.registros + '</td>'
          + '<td class="text-end qty">' + fmtCant(c.cantidad) + '</td>'
          + '<td class="text-end">' + fmtCLP(c.costo_estimado) + '</td>'
          + '</tr>';
      });
      $('#tb_cat').html(html);
    }

    filtroFecha = null;
    $('#filtro_dia_lbl').text('');
    $('#btn_ver_todo').addClass('d-none');
    renderDetalle(data.detalle || []);

    $('#bloque_vacio').addClass('d-none');
    $('#bloque_resultado').removeClass('d-none');
  }

  function generar() {
    const desde = $desde.val();
    const hasta = $hasta.val();
    if (!desde || !hasta) { toast('warning', 'Indique el rango de fechas'); return; }
    if (desde > hasta) { toast('warning', 'Desde no puede ser mayor que hasta'); return; }

    $('#btn_generar').prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span> Cargando…');
    $.getJSON(CFG.urls.informe_datos, { desde: desde, hasta: hasta }, function (res) {
      if (!res || !res.ok) {
        toast('error', (res && res.message) || 'No se pudo generar');
        return;
      }
      render(res.data);
    }).fail(function (xhr) {
      const msg = (xhr.responseJSON && xhr.responseJSON.message) || 'Error al consultar';
      toast('error', msg);
    }).always(function () {
      $('#btn_generar').prop('disabled', false).html('<i class="bx bx-analyse"></i> Generar informe');
    });
  }

  $('#btn_generar').on('click', generar);
  $('#btn_mes').on('click', function () { setRango('mes'); generar(); });
  $('.rpi-quick [data-rango]').on('click', function () {
    setRango($(this).data('rango'));
    generar();
  });
  $('#tb_dias').on('click', '.rpi-day-row', function () {
    aplicarFiltroDia($(this).data('fecha'));
  });
  $('#btn_ver_todo').on('click', function () { aplicarFiltroDia(null); });

  setRango('mes');
  generar();
})();
</script>
@endsection