// ══════════════════════════════════════════════
// RRB Admin — Module: voucher-grupal
// ══════════════════════════════════════════════

// ════════════════════════════════════════════
let vgCobradorActual = null;  // cobrador seleccionado en la vista de detalle
let vgMiembrosData   = [];    // miembros cargados en la vista de detalle
let _ncSelId = 0, _ncSelNombre = '', _ncSelRef = '';
let _amSelId = 0, _amSelNombre = '', _amSelRef = '';
let _amCobradorId = 0;

// ---- Inicializar sección ----
function iniciarVoucherGrupal() {
  const MESES_NOM = ['','Enero','Febrero','Marzo','Abril','Mayo','Junio',
                      'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
  const now  = new Date();
  const mesCurso = now.getMonth() + 1; // 1-based
  const anioCurso = now.getFullYear();

  // Generar opciones: mes en curso + 4 meses atrás (total 5 opciones)
  const selMes = document.getElementById('vg-mes');
  selMes.innerHTML = '';
  for (let i = 0; i < 5; i++) {
    let m = mesCurso - i;
    let a = anioCurso;
    if (m <= 0) { m += 12; a--; }
    const opt = document.createElement('option');
    opt.value = m + '|' + a; // valor compuesto mes|año
    opt.textContent = MESES_NOM[m] + ' ' + a;
    if (i === 0) opt.selected = true; // mes en curso por defecto
    selMes.appendChild(opt);
  }

  // El año se muestra en el input readonly según la opción seleccionada
  function vgActualizarAnio() {
    const partes = document.getElementById('vg-mes').value.split('|');
    document.getElementById('vg-anio').value = partes[1] || anioCurso;
  }
  vgActualizarAnio();

  // Escuchar cambios de período para recargar el detalle si está abierto
  document.getElementById('vg-mes').onchange = function() {
    vgActualizarAnio();
    vgPeriodoChanged();
  };

  vgCargarCobradores();
}

function vgPeriodoChanged() {
  if (vgCobradorActual) {
    vgVerDetalle(vgCobradorActual.id_cobrador);
  }
}

// ---- Cargar lista de cobradores ----
async function vgCargarCobradores() {
  document.getElementById('vg-loading').style.display = 'block';
  document.getElementById('vg-cobradores-grid').style.display = 'none';
  document.getElementById('vg-empty').style.display = 'none';
  document.getElementById('vg-detalle-wrap').style.display = 'none';
  document.getElementById('vg-cobradores-wrap').style.display = 'block';

  try {
    const data = await api('GET', 'api/voucher-grupal.php?action=cobradores');
    const grid = document.getElementById('vg-cobradores-grid');
    document.getElementById('vg-loading').style.display = 'none';

    if (!data.cobradores || data.cobradores.length === 0) {
      document.getElementById('vg-empty').style.display = 'block';
      return;
    }

    grid.style.display = 'grid';
    grid.innerHTML = data.cobradores.map(c => `
      <div style="background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:20px;cursor:pointer;transition:box-shadow .2s"
           onclick="vgVerDetalle(${c.id_cobrador})"
           onmouseover="this.style.boxShadow='0 4px 16px rgba(124,58,237,.15)'"
           onmouseout="this.style.boxShadow='none'">
        <div style="display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px">
          <div>
            <div style="font-weight:700;font-size:15px;color:var(--primary)">${esc(c.nombre_cobrador.trim())}</div>
            <div style="font-size:12px;color:var(--muted);margin-top:2px">${esc(c.referencia || '')} &bull; ${esc(c.rfc || '')}</div>
          </div>
          <span style="background:#ede9fe;color:#5b21b6;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px">
            ${c.miembros_activos} miembros
          </span>
        </div>
        <div style="font-size:12px;color:var(--muted)">→ Ver ganancias del período</div>
      </div>
    `).join('');
  } catch(e) {
    document.getElementById('vg-loading').style.display = 'none';
    document.getElementById('vg-empty').style.display = 'block';
  }
}

// ---- Ver detalle de un cobrador ----
async function vgVerDetalle(id_cobrador) {
  const selVal = document.getElementById('vg-mes').value;
  const partes = selVal.split('|');
  const mes    = parseInt(partes[0]);
  const anio   = parseInt(partes[1]);
  const MESES  = ['','Enero','Febrero','Marzo','Abril','Mayo','Junio',
                  'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];

  document.getElementById('vg-cobradores-wrap').style.display = 'none';
  document.getElementById('vg-detalle-wrap').style.display = 'block';
  document.getElementById('vg-miembros-tbody').innerHTML =
    '<tr><td colspan="7" style="text-align:center;padding:32px;color:var(--muted)">Cargando...</td></tr>';
  document.getElementById('vg-miembros-tfoot').innerHTML = '';
  document.getElementById('vg-miembros-empty').style.display = 'none';
  document.getElementById('vg-btn-generar').disabled = true;

  try {
    const data = await api('GET',
      `api/voucher-grupal.php?action=detalle&id_cobrador=${id_cobrador}&mes=${mes}&anio=${anio}`);

    vgCobradorActual = data.cobrador;
    vgMiembrosData   = data.miembros || [];

    document.getElementById('vg-detalle-titulo').textContent =
      `💳 ${data.cobrador.nombre_completo.trim()} — ${MESES[mes]} ${anio}`;

    vgRenderMiembros(data);
  } catch(e) {
    document.getElementById('vg-miembros-tbody').innerHTML =
      `<tr><td colspan="7" style="text-align:center;padding:32px;color:var(--error)">Error al cargar: ${e.message}</td></tr>`;
  }
}

// ---- Renderizar tabla de miembros ----
function vgRenderMiembros(data) {
  const tbody  = document.getElementById('vg-miembros-tbody');
  const tfoot  = document.getElementById('vg-miembros-tfoot');
  const miembros = data.miembros || [];
  const cobrador = data.cobrador || {};

  if (miembros.length === 0 && !cobrador.idreg) {
    tbody.innerHTML = '';
    document.getElementById('vg-miembros-empty').style.display = 'block';
    return;
  }

  let totalDisp = 0;

  // Fila del cobrador como distribuidor (si tiene regalías en el período)
  let filaCobradorHTML = '';
  if (cobrador.idreg) {
    const tieneGanCob = parseInt(cobrador.reg_status) === 0 && parseFloat(cobrador.apagar) > 0;
    const yaVoucherCob = parseInt(cobrador.reg_status) === 5;
    if (tieneGanCob) totalDisp += parseFloat(cobrador.apagar);
    const statusCob = yaVoucherCob
      ? '<span style="background:#f3e8ff;color:#5b21b6;padding:3px 8px;border-radius:12px;font-size:12px">Voucher</span>'
      : tieneGanCob
        ? '<span style="background:#fef9c3;color:#854d0e;padding:3px 8px;border-radius:12px;font-size:12px">Por Pagar</span>'
        : '<span style="background:#f1f5f9;color:var(--muted);padding:3px 8px;border-radius:12px;font-size:12px">Otro</span>';
    const checkCob = tieneGanCob
      ? `<input type="checkbox" class="vg-chk" data-idreg="${cobrador.idreg}" data-apagar="${cobrador.apagar}" onchange="vgActualizarTotal()" checked>`
      : `<input type="checkbox" disabled>`;
    filaCobradorHTML = `<tr style="background:#eef6ff;border-left:4px solid var(--primary)">
      <td style="text-align:center">${checkCob}</td>
      <td style="font-weight:700;font-size:13px">${esc(cobrador.referencia || '')} <span style="font-size:10px;background:#dbeafe;color:#1d4ed8;padding:2px 6px;border-radius:8px;margin-left:4px">COBRADOR</span></td>
      <td style="font-weight:700;color:var(--primary)">${esc((cobrador.nombre_completo || '').trim())}</td>
      <td style="font-size:12px;color:var(--muted)">${esc(cobrador.rfc || '')}</td>
      <td style="text-align:right;font-weight:700;color:#15803d">${cobrador.apagar ? fmtMXN(cobrador.apagar) : '—'}</td>
      <td>${statusCob}</td>
      <td style="text-align:center"><span style="font-size:11px;color:var(--muted)">—</span></td>
    </tr>`;
  }

  tbody.innerHTML = filaCobradorHTML + miembros.map(m => {
    const tieneGanancia = m.idreg && parseInt(m.reg_status) === 0 && parseFloat(m.apagar) > 0;
    const yaVoucher     = m.idreg && parseInt(m.reg_status) === 5;
    if (tieneGanancia) totalDisp += parseFloat(m.apagar);

    const statusTxt = !m.idreg ? '<span style="color:var(--muted);font-size:12px">Sin regalías</span>'
      : yaVoucher ? '<span style="background:#f3e8ff;color:#5b21b6;padding:3px 8px;border-radius:12px;font-size:12px">Voucher</span>'
      : parseInt(m.reg_status) === 0 ? '<span style="background:#fef9c3;color:#854d0e;padding:3px 8px;border-radius:12px;font-size:12px">Por Pagar</span>'
      : '<span style="background:#f1f5f9;color:var(--muted);padding:3px 8px;border-radius:12px;font-size:12px">Otro</span>';

    const checkCell = tieneGanancia
      ? `<input type="checkbox" class="vg-chk" data-idreg="${m.idreg}" data-apagar="${m.apagar}" onchange="vgActualizarTotal()" checked>`
      : `<input type="checkbox" disabled>`;

    const btnEliminar = `<button
      class="btn-vg-del-miembro"
      data-rel-id="${m.rel_id}"
      data-cobrador="${vgCobradorActual.id_inver}"
      style="padding:3px 10px;font-size:11px;border-radius:8px;border:1.5px solid var(--error);
             background:#fff5f5;color:var(--error);cursor:pointer;font-weight:600"
    >✕</button>`;

    return `<tr style="${!m.idreg ? 'opacity:.6' : ''}">
      <td style="text-align:center">${checkCell}</td>
      <td style="font-weight:600;font-size:13px">${esc(m.ref_dist || '')}</td>
      <td>${esc((m.nombre_dist || '').trim())}</td>
      <td style="font-size:12px;color:var(--muted)">${esc(m.rfc_dist || '')}</td>
      <td style="text-align:right;font-weight:700;color:#15803d">${m.apagar ? fmtMXN(m.apagar) : '—'}</td>
      <td>${statusTxt}</td>
      <td style="text-align:center">${btnEliminar}</td>
    </tr>`;
  }).join('');

  // Fila de total + botón agregar miembro
  tfoot.innerHTML = `
    <tr style="background:#f5f8fc;font-weight:700">
      <td colspan="3" style="padding:10px 16px">
        <button onclick="abrirModalAddMiembro(${vgCobradorActual.id_inver})"
          style="padding:6px 14px;font-size:12px;border:1.5px solid var(--primary);border-radius:8px;
                 background:#fff;color:var(--primary);cursor:pointer;font-weight:600">
          + Agregar Miembro
        </button>
      </td>
      <td style="text-align:right;font-size:13px">TOTAL DISPONIBLE</td>
      <td style="text-align:right;color:#15803d;padding:10px 16px">${fmtMXN(totalDisp)}</td>
      <td></td><td></td>
    </tr>`;

  vgActualizarTotal();
}

// ---- Actualizar total seleccionado y habilitar botón ----
function vgActualizarTotal() {
  const checks = document.querySelectorAll('.vg-chk:checked');
  let total = 0;
  checks.forEach(c => { total += parseFloat(c.dataset.apagar) || 0; });
  const btn = document.getElementById('vg-btn-generar');
  btn.disabled = checks.length === 0;
  btn.textContent = checks.length > 0
    ? `💳 Generar Voucher Grupal — ${fmtMXN(total)} (${checks.length} personas)`
    : '💳 Generar Voucher Grupal';
}

// ---- Toggle all checkboxes ----
function vgToggleAll(masterChk) {
  document.querySelectorAll('.vg-chk:not(:disabled)').forEach(c => {
    c.checked = masterChk.checked;
  });
  vgActualizarTotal();
}

// ---- Volver a la lista de cobradores ----
function vgVolverLista() {
  vgCobradorActual = null;
  vgMiembrosData   = [];
  document.getElementById('vg-detalle-wrap').style.display = 'none';
  document.getElementById('vg-cobradores-wrap').style.display = 'block';
  vgCargarCobradores();
}

// ---- Generar voucher grupal ----
async function vgGenerarVoucher() {
  const checks = Array.from(document.querySelectorAll('.vg-chk:checked'));
  if (checks.length === 0) return;

  const idreg_list = checks.map(c => parseInt(c.dataset.idreg));
  const total      = checks.reduce((s, c) => s + (parseFloat(c.dataset.apagar) || 0), 0);
  const selVal2 = document.getElementById('vg-mes').value;
  const partes2  = selVal2.split('|');
  const mes      = parseInt(partes2[0]);
  const anio     = parseInt(partes2[1]);
  const MESES    = ['','Enero','Febrero','Marzo','Abril','Mayo','Junio',
                    'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];

  if (!confirm(`¿Generar voucher grupal por ${fmtMXN(total)} para ${checks.length} persona(s) de ${vgCobradorActual.nombre_completo.trim()}?`)) return;

  const btn = document.getElementById('vg-btn-generar');
  btn.disabled = true;
  btn.textContent = 'Generando...';

  try {
    const data = await api('POST', 'api/voucher-grupal.php', {
      action: 'crear',
      id_cobrador: vgCobradorActual.id_inver,
      mes,
      anio,
      idreg_list
    });

    if (data.success) {
      showToast(`✅ Voucher Grupal #${data.idv} creado — ${fmtMXN(data.total_voucher)}`, 'success');
      // Mostrar resumen
      const tbody = document.getElementById('vg-miembros-tbody');
      tbody.innerHTML = `
        <tr><td colspan="7">
          <div style="text-align:center;padding:32px">
            <div style="font-size:48px;margin-bottom:12px">✅</div>
            <h4 style="color:#5b21b6;margin-bottom:16px">Voucher Grupal creado</h4>
            <div style="background:#f5f3ff;border-radius:10px;padding:20px;text-align:left;max-width:380px;margin:0 auto">
              <div style="margin-bottom:10px">
                <div style="font-size:12px;color:var(--muted)">Cobrador</div>
                <div style="font-weight:700;font-size:15px">${esc(vgCobradorActual.nombre_completo.trim())}</div>
              </div>
              <div style="display:flex;justify-content:space-between;margin-bottom:8px">
                <span style="color:var(--muted);font-size:13px"># Voucher</span>
                <span style="font-weight:700;color:#5b21b6;font-size:16px">${data.idv}</span>
              </div>
              <div style="display:flex;justify-content:space-between;margin-bottom:8px">
                <span style="color:var(--muted);font-size:13px">Personas incluidas</span>
                <span style="font-weight:700">${data.registros}</span>
              </div>
              <div style="display:flex;justify-content:space-between;border-top:1px solid #c4b5fd;padding-top:8px;margin-top:4px">
                <span style="color:var(--muted);font-size:13px">Total Voucher</span>
                <span style="font-weight:700;color:#15803d;font-size:16px">${fmtMXN(data.total_voucher)}</span>
              </div>
            </div>
            <button onclick="vgVerDetalle(${vgCobradorActual.id_inver})"
              style="margin-top:20px;padding:10px 24px;background:#1a3a5c;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:600">
              Ver grupo actualizado
            </button>
          </div>
        </td></tr>`;
      document.getElementById('vg-miembros-tfoot').innerHTML = '';
      document.getElementById('vg-btn-generar').style.display = 'none';
    }
  } catch(e) {
    showToast('Error: ' + e.message, 'error');
    btn.disabled = false;
    vgActualizarTotal();
  }
}

// ---- Eliminar miembro del grupo (event delegation) ----
document.addEventListener('click', function(e) {
  const btn = e.target.closest('.btn-vg-del-miembro');
  if (!btn) return;
  const relId     = parseInt(btn.dataset.relId);
  const cobrador  = parseInt(btn.dataset.cobrador);
  if (!confirm('¿Eliminar este miembro del grupo?')) return;
  api('POST', 'api/voucher-grupal.php', { action: 'del_rel', rel_id: relId })
    .then(() => { showToast('Miembro eliminado', 'success'); vgVerDetalle(cobrador); })
    .catch(e => showToast('Error: ' + e.message, 'error'));
});

// ---- Modal Nuevo Cobrador ----
let _ncDebounce = null;
function abrirModalNuevoCobrador() {
  _ncSelId = 0; _ncSelNombre = ''; _ncSelRef = '';
  document.getElementById('nc-buscar').value = '';
  document.getElementById('nc-resultados').style.display = 'none';
  document.getElementById('nc-seleccionado').style.display = 'none';
  document.getElementById('nc-btn-guardar').disabled = true;
  document.getElementById('modal-nuevo-cobrador').classList.add('open');
}
function cerrarModalNuevoCobrador() {
  document.getElementById('modal-nuevo-cobrador').classList.remove('open');
}
function ncBuscar(q) {
  clearTimeout(_ncDebounce);
  if (q.length < 2) { document.getElementById('nc-resultados').style.display = 'none'; return; }
  _ncDebounce = setTimeout(async () => {
    const data = await api('GET', `api/voucher-grupal.php?action=buscar_dist&q=${encodeURIComponent(q)}`);
    const el = document.getElementById('nc-resultados');
    if (!data.resultados || data.resultados.length === 0) {
      el.innerHTML = '<div style="padding:12px;color:var(--muted);font-size:13px">Sin resultados</div>';
    } else {
      el.innerHTML = data.resultados.map(r => `
        <div class="nc-result-item" style="padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);font-size:13px"
             data-id="${r.id_inver}"
             data-nombre="${esc((r.nombre_completo||'').trim())}"
             data-ref="${esc(r.referencia||'')}"
             onmouseover="this.style.background='#f0f4f8'" onmouseout="this.style.background=''">
          <strong>${esc((r.nombre_completo||'').trim())}</strong>
          <span style="color:var(--muted);margin-left:8px">${esc(r.referencia||'')} &bull; ${esc(r.rfc||'')}</span>
        </div>`).join('');
    }
    el.style.display = 'block';
  }, 300);
}
function ncSeleccionar(id, nombre, ref) {
  _ncSelId = id; _ncSelNombre = nombre; _ncSelRef = ref;
  document.getElementById('nc-sel-nombre').textContent = nombre;
  document.getElementById('nc-sel-ref').textContent = ref;
  document.getElementById('nc-seleccionado').style.display = 'block';
  document.getElementById('nc-resultados').style.display = 'none';
  document.getElementById('nc-buscar').value = nombre;
  document.getElementById('nc-btn-guardar').disabled = false;
}
async function vgGuardarNuevoCobrador() {
  if (!_ncSelId) return;
  // Crear el cobrador agregando una relación consigo mismo como primer paso
  // En realidad solo necesitamos que exista en la tabla; lo hacemos agregando
  // una relación de placeholder que luego se elimina, o simplemente mostramos
  // el detalle vacío. Mejor: abrimos directamente el modal de agregar miembro.
  cerrarModalNuevoCobrador();
  // Abrir directamente el detalle del nuevo cobrador (estará vacío)
  // Primero agregar una relación dummy para que aparezca en la lista,
  // pero es mejor pedirle que agregue el primer miembro.
  showToast(`Cobrador ${_ncSelNombre} listo. Agrega miembros al grupo.`, 'success');
  // Mostrar detalle del cobrador (aunque esté vacío)
  vgCobradorActual = { id_inver: _ncSelId, nombre_completo: _ncSelNombre, referencia: _ncSelRef };
  document.getElementById('vg-cobradores-wrap').style.display = 'none';
  document.getElementById('vg-detalle-wrap').style.display = 'block';
  document.getElementById('vg-detalle-titulo').textContent =
    `💳 ${_ncSelNombre} — (nuevo grupo)`;
  document.getElementById('vg-miembros-tbody').innerHTML =
    '<tr><td colspan="7" style="text-align:center;padding:32px;color:var(--muted)">Grupo vacío. Agrega miembros con el botón de abajo.</td></tr>';
  document.getElementById('vg-miembros-tfoot').innerHTML = `
    <tr><td colspan="7" style="padding:12px">
      <button onclick="abrirModalAddMiembro(${_ncSelId})"
        style="padding:8px 18px;font-size:13px;border:1.5px solid var(--primary);border-radius:8px;
               background:#fff;color:var(--primary);cursor:pointer;font-weight:600">
        + Agregar Primer Miembro
      </button>
    </td></tr>`;
  document.getElementById('vg-btn-generar').style.display = 'none';
}

// ---- Modal Agregar Miembro ----
let _amDebounce = null;
function abrirModalAddMiembro(id_cobrador) {
  _amCobradorId = id_cobrador;
  _amSelId = 0; _amSelNombre = ''; _amSelRef = '';
  document.getElementById('am-buscar').value = '';
  document.getElementById('am-resultados').style.display = 'none';
  document.getElementById('am-seleccionado').style.display = 'none';
  document.getElementById('am-btn-guardar').disabled = true;
  const cobNombre = vgCobradorActual ? vgCobradorActual.nombre_completo.trim() : '';
  document.getElementById('am-cobrador-info').textContent =
    `Agregar miembro al grupo de: ${cobNombre}`;
  document.getElementById('modal-add-miembro').classList.add('open');
}
function cerrarModalAddMiembro() {
  document.getElementById('modal-add-miembro').classList.remove('open');
}
function amBuscar(q) {
  clearTimeout(_amDebounce);
  if (q.length < 2) { document.getElementById('am-resultados').style.display = 'none'; return; }
  _amDebounce = setTimeout(async () => {
    const data = await api('GET', `api/voucher-grupal.php?action=buscar_dist&q=${encodeURIComponent(q)}`);
    const el = document.getElementById('am-resultados');
    if (!data.resultados || data.resultados.length === 0) {
      el.innerHTML = '<div style="padding:12px;color:var(--muted);font-size:13px">Sin resultados</div>';
    } else {
      el.innerHTML = data.resultados.map(r => `
        <div class="am-result-item" style="padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);font-size:13px"
             data-id="${r.id_inver}"
             data-nombre="${esc((r.nombre_completo||'').trim())}"
             data-ref="${esc(r.referencia||'')}"
             onmouseover="this.style.background='#f0f4f8'" onmouseout="this.style.background=''">
          <strong>${esc((r.nombre_completo||'').trim())}</strong>
          <span style="color:var(--muted);margin-left:8px">${esc(r.referencia||'')} &bull; ${esc(r.rfc||'')}</span>
        </div>`).join('');
    }
    el.style.display = 'block';
  }, 300);
}
function amSeleccionar(id, nombre, ref) {
  _amSelId = id; _amSelNombre = nombre; _amSelRef = ref;
  document.getElementById('am-sel-nombre').textContent = nombre;
  document.getElementById('am-sel-ref').textContent = ref;
  document.getElementById('am-seleccionado').style.display = 'block';
  document.getElementById('am-resultados').style.display = 'none';
  document.getElementById('am-buscar').value = nombre;
  document.getElementById('am-btn-guardar').disabled = false;
}
async function amGuardar() {
  if (!_amSelId || !_amCobradorId) return;
  try {
    await api('POST', 'api/voucher-grupal.php', {
      action: 'add_rel',
      id_cobrador: _amCobradorId,
      id_dist: _amSelId
    });
    showToast(`${_amSelNombre} agregado al grupo`, 'success');
    cerrarModalAddMiembro();
    vgVerDetalle(_amCobradorId);
    // Actualizar botón generar
    document.getElementById('vg-btn-generar').style.display = '';
  } catch(e) {
    showToast('Error: ' + e.message, 'error');
  }
}

 // ════════════════════════════════════════════
// ── BUSCADOR VOUCHERS POR PERIODO ───────────────────
// ════════════════════════════════════════════
async function vpBuscar() {
  const desde = document.getElementById('vp-desde').value;
  const hasta = document.getElementById('vp-hasta').value;
  const errEl = document.getElementById('vp-error');
  const resEl = document.getElementById('vp-resultado');
  errEl.style.display = 'none';
  resEl.style.display = 'none';
  if (!desde || !hasta) {
    errEl.textContent = 'Selecciona ambas fechas.';
    errEl.style.display = 'block';
    return;
  }
  if (desde > hasta) {
    errEl.textContent = 'La fecha “Desde” no puede ser mayor a “Hasta”.';
    errEl.style.display = 'block';
    return;
  }
  try {
    document.getElementById('vp-tbody').innerHTML = '<tr><td colspan="9" style="text-align:center;padding:20px;color:#aaa">⏳ Cargando...</td></tr>';
    resEl.style.display = 'block';
    const data = await api('GET', `api/vouchers-periodo.php?desde=${desde}&hasta=${hasta}`);
    if (!data.ok) throw new Error(data.error || 'Error desconocido');
    const vs = data.vouchers || [];
    document.getElementById('vp-count').textContent = `${vs.length} voucher${vs.length !== 1 ? 's' : ''} encontrado${vs.length !== 1 ? 's' : ''}`;
    const totalSum = vs.reduce((s, v) => s + parseFloat(v.total || 0), 0);
    const restSum  = vs.reduce((s, v) => s + parseFloat(v.restante || 0), 0);
    document.getElementById('vp-totales').textContent = `Total: ${fmtMxn(totalSum)} | Restante: ${fmtMxn(restSum)}`;
    if (vs.length === 0) {
      document.getElementById('vp-tbody').innerHTML = '<tr><td colspan="9" style="text-align:center;padding:20px;color:#aaa">Sin vouchers en el periodo seleccionado</td></tr>';
      return;
    }
    document.getElementById('vp-tbody').innerHTML = vs.map(v => {
      const stBg    = v.status == 0 ? '#d4edda' : '#e2e3e5';
      const stColor = v.status == 0 ? '#155724' : '#383d41';
      const stLabel = v.status == 0 ? 'Activo' : 'Usado';
      return `<tr style="border-bottom:1px solid var(--border);cursor:pointer" onclick="vpVerDetalle(${v.idv})"
               onmouseover="this.style.background='#f0f4f8'" onmouseout="this.style.background=''">
        <td style="padding:8px 12px;font-family:monospace;font-weight:700;color:var(--primary)">${v.idv}</td>
        <td style="padding:8px 12px">${esc(v.referencia || '-')}</td>
        <td style="padding:8px 12px;font-family:monospace">${esc(v.rfc || '-')}</td>
        <td style="padding:8px 12px">${esc(((v.nombre||'') + ' ' + (v.appat||'') + ' ' + (v.apmat||'')).trim())}</td>
        <td style="padding:8px 12px;text-align:right;font-weight:600">${fmtMxn(v.total || 0)}</td>
        <td style="padding:8px 12px;text-align:right">${fmtMxn(v.restante || 0)}</td>
        <td style="padding:8px 12px;text-align:center"><span style="padding:3px 9px;border-radius:12px;font-size:11px;font-weight:700;background:${stBg};color:${stColor}">${stLabel}</span></td>
        <td style="padding:8px 12px;white-space:nowrap">${v.fecha_cre ? v.fecha_cre.substring(0,10) : '-'}</td>
        <td style="padding:8px 12px;font-size:12px;color:var(--muted)">${esc(v.observaciones || '-')}</td>
      </tr>`;
    }).join('');
  } catch(e) {
    resEl.style.display = 'none';
    errEl.textContent = '❌ Error: ' + e.message;
    errEl.style.display = 'block';
  }
}

// ════════════════════════════════════════════
// ── DETALLE VOUCHER ─────────────────────────────
// ════════════════════════════════════════════
async function vpVerDetalle(idv) {
  const modal = document.getElementById('modal-voucher-det');
  const body  = document.getElementById('vd-body');
  const titulo = document.getElementById('vd-titulo');
  body.innerHTML = '<div style="text-align:center;padding:40px;color:#aaa">⏳ Cargando...</div>';
  modal.classList.add('open');
  try {
    const d = await api('GET', `api/voucher-detalle.php?idv=${idv}`);
    if (!d.ok) throw new Error(d.error || 'Error desconocido');
    const v = d.voucher;
    const notas = d.notas || [];
    titulo.textContent = `Voucher #${v.idv} — ${esc(v.ref_dist || '')} ${esc(v.nombre || '')} ${esc(v.appat || '')} ${esc(v.apmat || '')}`;

    const stBg    = v.status == 0 ? '#d4edda' : '#e2e3e5';
    const stColor = v.status == 0 ? '#155724' : '#383d41';
    const stLabel = v.status == 0 ? 'Activo' : 'Usado';

    // Sección de datos del voucher
    let html = `
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px">
        <div style="background:#f8fafc;border-radius:10px;padding:14px">
          <div style="font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px">Propietario</div>
          <div style="font-size:15px;font-weight:700">${esc((v.nombre||'') + ' ' + (v.appat||'') + ' ' + (v.apmat||''))}</div>
          <div style="font-size:13px;color:var(--muted)">${esc(v.ref_dist||'')} &bull; ${esc(v.rfc||'')}</div>
        </div>
        <div style="background:#f8fafc;border-radius:10px;padding:14px">
          <div style="font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px">Montos</div>
          <div style="font-size:15px;font-weight:700">Total: ${fmtMxn(v.total)}</div>
          <div style="font-size:13px">Restante: <strong>${fmtMxn(v.restante)}</strong></div>
        </div>
        <div style="background:#f8fafc;border-radius:10px;padding:14px">
          <div style="font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px">Status</div>
          <span style="padding:4px 12px;border-radius:12px;font-size:12px;font-weight:700;background:${stBg};color:${stColor}">${stLabel}</span>
        </div>
        <div style="background:#f8fafc;border-radius:10px;padding:14px">
          <div style="font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px">Fecha creación</div>
          <div style="font-size:14px;font-weight:600">${v.fecha_cre ? v.fecha_cre.substring(0,10) : '-'}</div>
        </div>
      </div>`;

    // Sección de regalías de origen (campo referencia)
    if (v.referencia) {
      html += `
        <div style="background:#fff8e1;border:1px solid #ffe082;border-radius:10px;padding:14px;margin-bottom:20px">
          <div style="font-size:11px;font-weight:700;color:#856404;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px">🏆 Regalías de Origen</div>
          <pre style="margin:0;font-size:12px;color:#5d4037;white-space:pre-wrap;word-break:break-word;font-family:monospace">${esc(v.referencia)}</pre>
        </div>`;
    }
    if (v.descripcion) {
      html += `
        <div style="background:#f3e5f5;border:1px solid #ce93d8;border-radius:10px;padding:14px;margin-bottom:20px">
          <div style="font-size:11px;font-weight:700;color:#6a1b9a;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px">📝 Descripción</div>
          <div style="font-size:13px;color:#4a148c">${esc(v.descripcion)}</div>
        </div>`;
    }
    if (v.observaciones) {
      html += `
        <div style="background:#e8f5e9;border:1px solid #a5d6a7;border-radius:10px;padding:14px;margin-bottom:20px">
          <div style="font-size:11px;font-weight:700;color:#1b5e20;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px">💬 Observaciones</div>
          <div style="font-size:13px;color:#2e7d32">${esc(v.observaciones)}</div>
        </div>`;
    }

    // Notas en que se usó el voucher
    html += `<div style="font-size:13px;font-weight:700;color:var(--primary);margin-bottom:10px">📄 Notas en que se usó este voucher (${notas.length})</div>`;
    if (notas.length === 0) {
      html += `<div style="text-align:center;padding:20px;color:#aaa;font-size:13px">Este voucher aún no se ha utilizado en ninguna nota.</div>`;
    } else {
      html += `<div style="overflow-x:auto"><table style="width:100%;border-collapse:collapse;font-size:13px">
        <thead><tr style="background:#f0f4fb">
          <th style="padding:8px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;border-bottom:1px solid var(--border)">#Nota</th>
          <th style="padding:8px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;border-bottom:1px solid var(--border)">Fecha</th>
          <th style="padding:8px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;border-bottom:1px solid var(--border)">Distribuidor</th>
          <th style="padding:8px 12px;text-align:right;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;border-bottom:1px solid var(--border)">Monto Voucher</th>
          <th style="padding:8px 12px;text-align:center;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;border-bottom:1px solid var(--border)">Tipo</th>
        </tr></thead>
        <tbody>`;
      notas.forEach(n => {
        const folio = 'RRB-' + String(n.idtransacciones).padStart(6, '0');
        const ts = TX_TIPO_STYLE[n.tipostr_idtipostr] || { label: n.tipostr_idtipostr, bg: '#f0f0f0', color: '#333' };
        const fecha = n.fechat ? n.fechat.substring(0,10) : '-';
        html += `<tr style="border-bottom:1px solid var(--border);cursor:pointer" onclick="txVerDetalle(${n.idtransacciones})"
                 onmouseover="this.style.background='#f0f4f8'" onmouseout="this.style.background=''">
          <td style="padding:8px 12px;font-family:monospace;font-weight:700;color:var(--primary)">${folio}</td>
          <td style="padding:8px 12px;white-space:nowrap">${fecha}</td>
          <td style="padding:8px 12px">${esc(((n.nombre||'') + ' ' + (n.appat||'') + ' ' + (n.apmat||'')).trim())}</td>
          <td style="padding:8px 12px;text-align:right;font-weight:600">${fmtMxn(n.monto)}</td>
          <td style="padding:8px 12px;text-align:center"><span style="padding:3px 9px;border-radius:12px;font-size:11px;font-weight:700;background:${ts.bg};color:${ts.color}">${ts.label}</span></td>
        </tr>`;
      });
      html += '</tbody></table></div>';
    }

    body.innerHTML = html;
  } catch(e) {
    body.innerHTML = `<div style="color:#dc3545;padding:20px">❌ Error: ${esc(e.message)}</div>`;
  }
}
function vpCerrarDetalle() {
  document.getElementById('modal-voucher-det').classList.remove('open');
}

