const API_PROD = '../../controllers/controller_producto.php';
const API_EVT  = '../../controllers/controller_producto_evento.php';
const cont = document.getElementById('container');
const evts = document.getElementById('eventos');

async function cargarMenu() {
  const res = await fetch(`${API_PROD}?accion=menu_publico`);
  const j = await res.json();
  pintarCategorias(j.data || []);
}
function pintarCategorias(bloques) {
  cont.innerHTML = '';
  bloques.forEach(b => {
    const sec = document.createElement('section');
    sec.className = 'cat';
    sec.innerHTML = `<h2>${b.categoria.nombre}</h2><div class="grid"></div>`;
    const grid = sec.querySelector('.grid');
    (b.productos || []).forEach(p => {
      const card = document.createElement('div');
      card.className = 'card';
      card.innerHTML = `
        ${p.foto_url ? `<img src="../${p.foto_url}" alt="">` : ''}
        <h3>${p.titulo}</h3>
        <div class="price">$${Number(p.precio).toFixed(2)}</div>
        <p>${p.descripcion || ''}</p>
        <button>Agregar</button>`;
      grid.appendChild(card);
    });
    cont.appendChild(sec);
  });
}

async function cargarEventos() {
  const res = await fetch(`${API_EVT}?accion=listar&solo_activos=1`);
  const j = await res.json();
  evts.innerHTML = '';
  (j.data || []).forEach(e => {
    const card = document.createElement('div');
    card.className = 'card';
    card.innerHTML = `
      ${e.foto_url ? `<img src="../${e.foto_url}" alt="">` : ''}
      <h3>${e.titulo}</h3>
      <div class="price">$${Number(e.precio).toFixed(2)}</div>
      <p>${e.descripcion || ''}</p>
      <button>Solicitar cotización</button>`;
    evts.appendChild(card);
  });
}

document.getElementById('btnFiltrar').onclick = async () => {
  const min = document.getElementById('min').value || 0;
  const max = document.getElementById('max').value || 999999;
  const res = await fetch(`${API_PROD}?accion=filtrar_precio&precio_min=${min}&precio_max=${max}&solo_activos=1`);
  const j = await res.json();
  // Agrupa por categoría para pintar igual que menu_publico
  const grouped = {};
  (j.data || []).forEach(p => {
    grouped[p.categoria_nombre] = grouped[p.categoria_nombre] || [];
    grouped[p.categoria_nombre].push(p);
  });
  const bloques = Object.entries(grouped).map(([cat, prods]) => ({
    categoria: { nombre: cat }, productos: prods
  }));
  pintarCategorias(bloques);
};

document.getElementById('q').oninput = async (e) => {
  const t = (e.target.value || '').trim();
  if (t.length < 2) { cargarMenu(); return; }
  const res = await fetch(`${API_PROD}?accion=buscar&termino=${encodeURIComponent(t)}&solo_activos=1`);
  const j = await res.json();
  const grouped = {};
  (j.data || []).forEach(p => {
    grouped[p.categoria_nombre] = grouped[p.categoria_nombre] || [];
    grouped[p.categoria_nombre].push(p);
  });
  const bloques = Object.entries(grouped).map(([cat, prods]) => ({
    categoria: { nombre: cat }, productos: prods
  }));
  pintarCategorias(bloques);
};

(async function init(){
  await cargarMenu();
  await cargarEventos();
})();
