<?php
session_start();
require_once('Connections/conexionabm.php');

$isLogged = isset($_SESSION['id_cliente']);
$nombreCliente = null;

if ($isLogged) {
    if (!empty($_SESSION['nombre_cliente'])) {
        $nombreCliente = $_SESSION['nombre_cliente'];
    } elseif (!empty($_SESSION['usuario_cliente'])) {
        $nombreCliente = $_SESSION['usuario_cliente'];
    } else {
        $nombreCliente = 'Cliente';
    }
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Supermercado Dragón de Oro - Tienda Online</title>
  <style>
    :root{
      --rojo:#ff0000;
      --mamey:#e1552f;
      --mamey-dark:#c14425;
      --gris:#f3f4f6;
      --gris-borde:#e5e7eb;
      --texto:#111827;
      --blanco:#ffffff;
      --header-h:118px;
	  --sidebar-w:260px; 
    }
    *{box-sizing:border-box;margin:0;padding:0}

    body{
      font-family:Arial,sans-serif;
      color:var(--texto);
      background:#F9FBFB;
    }

    header{
      position:fixed;top:0;left:0;right:0;z-index:1000;
      background:var(--blanco);box-shadow:0 1px 6px rgba(0,0,0,.08);
    }
    .topbar{
      background:var(--rojo);color:#fff;
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) auto;
      align-items:center;gap:16px;
      padding:6px 24px;font-size:13px;
    }
    .top-left{display:flex;align-items:center;gap:20px;white-space:nowrap;}
    .top-left span{display:flex;align-items:center;gap:6px;}
    .top-search{display:flex;justify-content:center;}
    .top-search input{
      width:100%;max-width:420px;height:30px;
      border-radius:999px;border:none;
      padding:0 14px;font-size:13px;outline:none;color:#111;
    }
    .top-right{display:flex;justify-content:flex-end;gap:14px;font-size:16px;}
    .top-right a{color:#fff;text-decoration:none;}

    .nav-white{
      background:#fff;
      display:flex;align-items:center;justify-content:space-between;
      padding:12px 40px 10px;
    }
    .logo-wrap{display:flex;align-items:center;gap:10px;}
    .logo-wrap img{height:55px;width:auto;display:block;}

    .main-menu{
      display:flex;align-items:center;gap:26px;
      font-size:12px;font-weight:500;
      text-transform:none;letter-spacing:.4px;
    }
    .main-menu a{		
      color:#111;text-decoration:none;
      padding-bottom:4px;border-bottom:2px solid transparent;
    }
    .main-menu a:hover,
    .main-menu a.activo{
	  font-weight:bold;
      color:var(--mamey);border-bottom-color:var(--mamey);
    }

    .cuenta-wrap{position:relative;display:inline-flex;align-items:center;}
    .btn-cuenta{
      background:transparent;border:none;cursor:pointer;
      font:inherit;color:#111;text-transform:none;
      display:flex;align-items:center;gap:4px;
      padding-bottom:4px;border-bottom:2px solid transparent;
    }
    .btn-cuenta:hover{
      color:var(--mamey);border-bottom-color:var(--mamey);
    }
    .dropdown{
      position:absolute;right:0;top:120%;
      width:210px;background:#fff;
      border:1px solid var(--gris-borde);
      border-radius:12px;
      box-shadow:0 16px 35px rgba(0,0,0,.14);
      display:none;overflow:hidden;z-index:1200;
    }
    .dropdown a{
      display:block;padding:10px 14px;
      text-decoration:none;color:#111;
      font-weight:600;font-size:13px;
    }
    .dropdown a:hover{background:#f9fafb;}
    .dropdown .divider{height:1px;background:#e5e7eb;}

    .cart-mini-wrap{
      display:flex;
      align-items:center;
      gap:6px;
      cursor:pointer;
    }
    .cart-mini-wrap img{
      height:22px;
      width:auto;
      display:block;
    }
    .cart-mini-label{
	font-size: 11px;
	color: #F00;
    }
    .cart-mini-count{
      font-size:12px;
      font-weight:700;
      color:var(--mamey);
    }
	.cart-mini-total{
	font-size: 10px;
	font-weight: 600;
	color: #F00;
	}
    /*main{
      display:grid;
      grid-template-columns:260px 1fr; // ancho de la columna categoria 
      gap:16px;
      max-width:1300px;
      margin:0 auto;
      padding:calc(var(--header-h) + 18px) 16px 48px;
    }*/
	main{
	  display:grid;
	  grid-template-columns:var(--sidebar-w) 1fr; 
	  gap:26px;
	  width:100%;
	  max-width:100%;           
	  margin:0;                 
	  padding:calc(var(--header-h) + 18px) 16px 48px 0;
	  /*                         ↑ right  ↑ bottom ↑ left(0) */
	}

    .sidebar{
      position:sticky;
      top:calc(var(--header-h) + 10px);
      align-self:flex-start;
      background:var(--gris);
      border:none;
      border-radius:0;
      padding:8px 8px 12px;
		
		/*scroll bar*/
	  max-height:calc(100vh - (var(--header-h) + 20px));
	  overflow-y:auto;	  
    }
    .sidebar h3{
      margin:0 0 6px 4px;
      padding:0;
      background:transparent;
      border:none;
      font-size:14px;
      font-weight:700;
      color:#4b5563;
      text-transform: none;
    }
    .categorias{
      list-style:none;
      padding:0;
      margin:0;
    }
    .categorias li{margin:2px 0;}
    .categorias a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:8px 10px;
      border-radius:8px;
      text-decoration:none;
      color:#111;
      font-size:13px;
      background:transparent;
    }
    .categorias a:hover,
    .categorias a.active{
      background:#e5e7eb;
      color:var(--mamey);
    }

    .toolbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:10px;
    }
    .toolbar h2{font-size:18px;font-weight:600;}

    .grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
    }

    .card{
      border-radius:16px;
      background:#fff;
      display:flex;
      flex-direction:column;
	  height:300px;
      transition:box-shadow .18s,transform .18s;
      /*box-shadow:2px 6px 10px rgba(15,23,42,.06);*/
	  /*box-shadow: 0px 0px 5px 0px rgba(207,202,202,0.75);*/
	  box-shadow: 0px 0px 5px 0px rgba(232,220,220,0.75);
	  /*min-height:260px; ALTURA MINIMA */
	  
	  min-height:280px;
	  max-height:350px;	  
    }
    .card:hover{
      /*box-shadow:0 10px 14px rgba(15,23,42,.12);*/
      /*box-shadow:0 10px 14px #666;*/
	  box-shadow: 0px 4px 14px 1px rgba(154, 154, 156, 1);
      transform:translateY(-8px);
    }

    .card .img{
      height:160px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:#ffffff;
      box-shadow:0 1px 2px rgba(15,23,42,.06);
      border-radius:16px 16px 0 0;
    }
    .card .img img{
      max-width:95%;
      max-height:150px;
      object-fit:contain;
    }

    .card .body{
      padding:10px 12px 12px;
      display:flex;
      flex-direction:column;
      gap:6px;
      flex:1;
    }
    .titulo{
      font-weight:500;
      font-size:13px;
      line-height:1.3;
      min-height:36px;
      color:#111;
      text-decoration:none;
    }
    .titulo:hover{color:var(--mamey);}
    .precio{
      font-size:14px;
      font-weight:600;
      color:#0b7a28;
    }
    .acciones-card{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-top:auto;
    }
    .btn-agregar{
      background:#FF2424;
      border:none;
      color:#fff;
      padding:8px 12px;
      border-radius:10px;
      font-weight:700;
      font-size:13px;
      width:90%;
      cursor:pointer;
    }
    .btn-agregar:hover{background:var(--mamey-dark);}
    .btn-detalle{
      background:#fff;
      border:1px solid var(--gris-borde);
      padding:8px 10px;
      border-radius:10px;
      font-size:12px;
      cursor:pointer;
      text-decoration:none;
      color:#111;
      white-space:nowrap;
    }

    footer{
      background:#0f172a;color:#e2e8f0;
    }
    .foot-wrap{
      max-width:1300px;margin:0 auto;
      padding:32px 16px 26px;
      display:grid;gap:24px;
      grid-template-columns:2fr 1fr 1.3fr 1.5fr;
      font-size:14px;
    }
    .foot-title{font-weight:800;margin-bottom:10px;}
    .foot-links a{
      display:block;color:#e2e8f0;
      text-decoration:none;padding:4px 0;
      font-size:13px;
    }
    .foot-links a:hover{text-decoration:underline;}
    .boletin input{
      width:100%;height:38px;border-radius:10px;
      border:1px solid #334155;background:#0b1220;
      color:#e2e8f0;padding:0 10px;
      margin-bottom:6px;font-size:13px;
    }
    .btn-sub{
      width:100%;height:38px;border-radius:10px;
      border:none;background:var(--mamey);
      color:#fff;font-weight:700;
      cursor:pointer;font-size:13px;
    }
    .foot-copy{
      border-top:1px solid #1f2937;
      text-align:center;padding:10px;
      font-size:12px;color:#94a3b8;
    }

    @media(max-width:1200px){
      .grid{grid-template-columns:repeat(3,minmax(0,1fr));}
    }
    @media(max-width:900px){
      :root{--header-h:140px;}
      .topbar{
        grid-template-columns:1fr;
        gap:6px;
        padding:6px 16px 8px;
      }
      .top-left{flex-wrap:wrap;font-size:12px;}
      .top-right{justify-content:flex-start;}
      .nav-white{
        flex-direction:column;
        align-items:flex-start;
        padding:8px 16px 10px;
      }
      .main-menu{
        flex-wrap:wrap;
        gap:14px;
        margin-top:4px;
        font-size:12px;
      }
      main{
        grid-template-columns:1fr;
        padding:calc(var(--header-h) + 12px) 10px 40px;
      }
      .sidebar{
        position:static;
        margin-bottom:10px;
        border-radius:10px;
      }
      .grid{grid-template-columns:repeat(2,minmax(0,1fr));}
      .foot-wrap{grid-template-columns:1fr 1fr;}
    }
    @media(max-width:560px){
      .grid{grid-template-columns:1fr;}
      .foot-wrap{grid-template-columns:1fr;}
    }
	
	.search-wrap{
	  position:relative;
	  width:100%;
	  max-width:420px;
	}
	
	.search-wrap input{
	  width:100%;
	  height:30px;
	  border-radius:999px;
	  border:none;
	  padding:0 34px 0 14px; /* espacio para la lupa a la derecha */
	  font-size:13px;
	  outline:none;
	  color:#111;
	}
	
	.search-btn{
	  position:absolute;
	  right:6px;
	  top:50%;
	  transform:translateY(-50%);
	  width:20px;
	  height:20px;
	  border:none;
	  background:transparent;
	  padding:0;
	  cursor:pointer;
	  display:flex;
	  align-items:center;
	  justify-content:center;
	}
	
	.search-btn img{
	  max-width:100%;
	  max-height:100%;
	  display:block;
	}

	.loading{
	  display:none;
	  padding:40px 0;
	  text-align:center;
	  font-size:13px;
	  color:#6b7280;
	}
	.loading.visible{
	  display:block;
	}
	.loading-spinner{
	  width:62px;
	  height:62px;
	  margin:0 auto 8px;
	  border-radius:999px;
	  border:3px solid #e5e7eb;
	  border-top-color:var(--mamey);
	  animation:spin .7s linear infinite;
	}
	@keyframes spin{
	  to{transform:rotate(360deg);}
	}
	
  </style>

  <!-- SweetAlert2 -->
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>

<header>
  <div class="topbar">
    <div class="top-left">
      <span>📞 (809) 533-9616</span>
      <span>✉️ info@supermercadodragondeoro.com</span>
    </div>
    <div class="top-search">
      <div class="search-wrap">
        <input type="search" id="q" placeholder="Buscar" aria-label="Buscar productos">
        <button type="button" id="btnBuscar" class="search-btn">
          <img src="images/lupa.png" alt="Buscar">
        </button>
      </div>
    </div>

    <div class="top-right">
      <a href="#" aria-label="Facebook">f</a>
      <a href="#" aria-label="Instagram">◎</a>
    </div>
  </div>

  <div class="nav-white">
    <div class="logo-wrap">
      <img src="images/logo_dragon1.png" alt="Supermercado Dragón de Oro">
    </div>
        
    <nav class="main-menu">
      <a href="index" class="activo">Inicio</a>
      <a href="#">Nosotros</a>
      <a href="#">Ofertas</a>
      <a href="#">Contactos</a>
    
      <?php if (!$isLogged): ?>
        <!-- Usuario NO logueado: mostrar Ingresar / Registrarme -->
        <div class="cuenta-wrap">
          <button class="btn-cuenta" id="btnCuenta" aria-haspopup="true" aria-expanded="false">
            Mi Cuenta ▾
          </button>
          <div class="dropdown" id="menuCuenta">
            <a href="login">Ingresar</a>
            <div class="divider"></div>
            <a href="registro">Registrarme</a>
          </div>
        </div>
      <?php else: ?>
        <!-- Usuario logueado: mostrar nombre + Cerrar sesión -->
        <div class="cuenta-wrap">
          <button class="btn-cuenta" id="btnCuenta" aria-haspopup="true" aria-expanded="false">
            <?= htmlspecialchars('Hola, ' . $nombreCliente) ?> ▾
          </button>
          <div class="dropdown" id="menuCuenta">
            <a href="logout">Cerrar sesión</a>
          </div>
        </div>
      <?php endif; ?>

        <div class="cart-mini-wrap" onclick="window.location.href='carrito'">
          <img src="images/carrito_compra4.png" alt="Carrito de compras">
          <div>
            <div class="cart-mini-label">Carrito</div>
            <div class="cart-mini-count" id="cartMiniCount">0</div>
            <div class="cart-mini-total" id="cartMiniTotal">RD$ 0.00</div>
          </div>
        </div>    
    </nav>
  </div>
</header>

<main>
  	<aside class="sidebar">
   	 	<h3>Categorías</h3>
    	<ul class="categorias" id="listaCategorias"></ul>
  	</aside>
    <section>
      <div class="toolbar">
        <h2 id="tituloCategoria">Productos</h2>
        <small id="totalProductos"></small>
      </div>
    
      <!-- LOADER -->
      <div id="loadingProductos" class="loading">
        <div class="loading-spinner"></div>
        Cargando productos...
      </div>
    
      <!-- GRID -->
      <div class="grid" id="gridProductos"></div>
    </section>

</main>

<footer>
  <div class="foot-wrap">
    <div>
      <div class="foot-title">Dragón de Oro</div>
      <div style="line-height:1.6;color:#cbd5e1;">
        Desde 1989 trabajamos para brindar excelencia y atención a nuestros clientes.
      </div>
    </div>
    <div class="foot-links">
      <div class="foot-title">Enlaces directos</div>
      <a href="index">Inicio</a>
      <a href="#">Nosotros</a>
      <a href="#">Ofertas</a>
      <a href="#">Contactos</a>
    </div>
    <div class="boletin">
      <div class="foot-title">Suscribirme al boletín</div>
      <input type="text" placeholder="Nombre completo">
      <input type="email" placeholder="Correo electrónico">
      <button class="btn-sub">Suscribirme</button>
    </div>
    <div>
      <div class="foot-title">Contactos</div>
      <div style="font-size:13px;color:#cbd5e1;line-height:1.7;">
        Av. Rómulo Betancourt 1351, Santo Domingo<br>
        (809) 533-9616<br>
        info@supermercadodragondeoro.com
      </div>
      <div class="foot-title" style="margin-top:12px;">Redes Sociales</div>
      <div>Facebook · Instagram</div>
    </div>
  </div>
  <div class="foot-copy">© 2025 Supermercado Dragón de Oro. Todos los derechos reservados.</div>
</footer>

<script>
  const API = {
    categorias: 'api/division.php',
    productos:  'api/productos.php'
  };

  // Estado de login desde PHP
  const IS_LOGGED = <?php echo $isLogged ? 'true' : 'false'; ?>;

  // Keys carrito
  const CART_ITEMS_KEY = 'cart_items_super';
  const CART_COUNT_KEY = 'cart_count_super';
  const CART_TOTAL_KEY = 'cart_total_super';

  const cartMiniCountEl = document.getElementById('cartMiniCount');
  const cartMiniTotalEl = document.getElementById('cartMiniTotal');

  const parseJSON = (v, def) => {
    try { return JSON.parse(v); } catch(e){ return def; }
  };

  const getItems = () => parseJSON(localStorage.getItem(CART_ITEMS_KEY), []);
  const saveItems = (items) => localStorage.setItem(CART_ITEMS_KEY, JSON.stringify(items || []));

  const getCartCount = () => parseInt(localStorage.getItem(CART_COUNT_KEY) || '0', 10);
  const getCartTotal = () => parseFloat(localStorage.getItem(CART_TOTAL_KEY) || '0');

  const formatMoney = (n) =>
    'RD$ ' + Number(n).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');

  function recalcFromItems() {
    const items = getItems();
    let cant = 0;
    let total = 0;
    items.forEach(it => {
      const q = Number(it.qty) || 0;
      const p = Number(it.precio) || 0;
      cant  += q;
      total += q * p;
    });
    localStorage.setItem(CART_COUNT_KEY, String(cant));
    localStorage.setItem(CART_TOTAL_KEY, String(total.toFixed(2)));
    if (cartMiniCountEl) cartMiniCountEl.textContent = cant;
    if (cartMiniTotalEl) cartMiniTotalEl.textContent = formatMoney(total);
  }

  function clearCart() {
    localStorage.setItem(CART_ITEMS_KEY, '[]');
    localStorage.setItem(CART_COUNT_KEY, '0');
    localStorage.setItem(CART_TOTAL_KEY, '0');
    recalcFromItems();
  }

  // Si NO está logueado, carrito siempre en cero
  if (!IS_LOGGED) {
    clearCart();
  } else {
    recalcFromItems();
  }

  // Añadir producto al carrito
  function addToCart(prod) {
    const items = getItems();
    const idx = items.findIndex(i => i.id === prod.id);
    if (idx >= 0) {
      items[idx].qty = (Number(items[idx].qty) || 0) + 1;
    } else {
      items.push({
        id: prod.id,
        titulo: prod.titulo,
        precio: Number(prod.precio) || 0,
        imagen: prod.imagen || 'images/logo_dragon1.png',
        qty: 1
      });
    }
    saveItems(items);
    recalcFromItems();
  }

  // Dropdown Mi Cuenta
  const btnCuenta = document.getElementById('btnCuenta');
  const menuCuenta = document.getElementById('menuCuenta');
  if (btnCuenta && menuCuenta) {
    btnCuenta.addEventListener('click', () => {
      const show = menuCuenta.style.display !== 'block';
      menuCuenta.style.display = show ? 'block' : 'none';
      btnCuenta.setAttribute('aria-expanded', show ? 'true' : 'false');
    });
    document.addEventListener('click', e => {
      if (!menuCuenta.contains(e.target) && !btnCuenta.contains(e.target)) {
        menuCuenta.style.display = 'none';
        btnCuenta.setAttribute('aria-expanded', 'false');
      }
    });
  }

	const listaCategorias = document.getElementById('listaCategorias');
	const grid = document.getElementById('gridProductos');
	const tituloCategoria = document.getElementById('tituloCategoria');
	const totalProductos = document.getElementById('totalProductos');

	const inputQ = document.getElementById('q');
	const btnBuscar = document.getElementById('btnBuscar');

	const loadingProductos = document.getElementById('loadingProductos');
	
	function setLoading(isLoading){
	  if (isLoading){
		loadingProductos.classList.add('visible');
		grid.style.opacity = '0';
	  } else {
		loadingProductos.classList.remove('visible');
		grid.style.opacity = '1';
	  }
	}
	
	inputQ.addEventListener('input', cargarProductos);
	
	// Buscar al presionar Enter
	inputQ.addEventListener('keydown', (e) => {
	  if (e.key === 'Enter') {
		e.preventDefault();
		cargarProductos();
	  }
	});
	
	// Buscar al hacer click en la lupa
	if (btnBuscar) {
	  btnBuscar.addEventListener('click', () => {
		cargarProductos();
		inputQ.focus();
	  });
	}

  let categorias = [];
  let categoriaActiva = 0;
  let cacheProductos = [];

  async function cargarCategorias(){
    const r = await fetch(API.categorias);
    categorias = await r.json();
    renderCategorias();
  }

  function renderCategorias(){
    listaCategorias.innerHTML = '';

    const liAll = document.createElement('li');
    const aAll = document.createElement('a');
    aAll.textContent = 'Todas';
    aAll.href = '#';
    if (categoriaActiva === 0) aAll.classList.add('active');
    aAll.onclick = e => { e.preventDefault(); categoriaActiva = 0; cargarProductos(); };
    liAll.appendChild(aAll);
    listaCategorias.appendChild(liAll);

    categorias.forEach(c => {
      const li = document.createElement('li');
      const a = document.createElement('a');
      a.textContent = c.nombre;
      a.href = '#';
      if (categoriaActiva === Number(c.id)) a.classList.add('active');
      a.onclick = e => { e.preventDefault(); categoriaActiva = Number(c.id); cargarProductos(); };
      li.appendChild(a);
      listaCategorias.appendChild(li);
    });
  }

	async function cargarProductos(){
	  const q = encodeURIComponent(inputQ.value.trim());
	  const cat = categoriaActiva ? `&cat=${categoriaActiva}` : '';
	  const url = `${API.productos}?limit=60${cat}${q ? `&q=${q}` : ''}`;
	
	  setLoading(true);
	  try {
		const r = await fetch(url);
		cacheProductos = await r.json();
		renderProductos();
	  } catch (e) {
		console.error(e);
		grid.innerHTML = `
		  <div style="grid-column:1/-1;font-size:13px;color:#b91c1c;">
			Ocurrió un error al cargar los productos. Intenta nuevamente.
		  </div>`;
	  } finally {
		setLoading(false);
	  }
	}


  function renderProductos(){
    grid.innerHTML = '';
    cacheProductos.forEach(p => {
      const card = document.createElement('article');
      card.className = 'card';

      const imgA = document.createElement('a');
      imgA.href = `producto.php?id=${encodeURIComponent(p.id)}`;
      imgA.className = 'img';
      imgA.innerHTML = `<img src="${p.imagen || ''}" alt="${p.titulo}">`;
	
		const body = document.createElement('div');
		body.className = 'body';
				
		const existenciaTxt = (p.existencia || p.existencia === 0)
		  ? (p.existencia > 0
			  ? `Existencia: ${p.existencia}`
			  : 'Existencia: 0')
		  : '';
		
		body.innerHTML = `
		  <a class="titulo" href="producto.php?id=${encodeURIComponent(p.id)}">${p.titulo}</a>
		  
		  <div style="
			display:flex;
			align-items:center;
			justify-content:space-between;
			margin-top:4px;
		  ">
			<div class="precio" style="margin:0;">
			  $${Number(p.precio).toLocaleString('es-DO')}
			</div>
			<div style="
			  font-size:12px;
			  color:${p.existencia > 0 ? '#16a34a' : '#dc2626'};
			  font-weight:700;
			">
			  ${existenciaTxt}
			</div>
		  </div>
		
		  <div style="font-size:11px;color:#6b7280">${p.unidad || ''}</div>
		`;

      const actions = document.createElement('div');
      actions.className = 'acciones-card';

      const btnVer = document.createElement('a');
      btnVer.className = 'btn-detalle';
      btnVer.href = `producto.php?id=${encodeURIComponent(p.id)}`;
      btnVer.textContent = 'Ver';

      const btnAdd = document.createElement('button');
      btnAdd.className = 'btn-agregar';
      btnAdd.textContent = 'Agregar';

      btnAdd.onclick = () => {
        if (!IS_LOGGED) {
          Swal.fire({
            icon: 'warning',
            title: 'Inicia sesión para continuar',
            text: 'Para agregar productos al carrito debes iniciar sesión.',
            confirmButtonText: 'Ir a Ingresar',
            confirmButtonColor: '#e1552f',
            showCancelButton: true,
            cancelButtonText: 'Cancelar'
          }).then((result) => {
            if (result.isConfirmed) {
              window.location.href = 'login.php';
            }
          });
          return;
        }

        addToCart({
          id: p.id,
          titulo: p.titulo,
          precio: p.precio,
          imagen: p.imagen
        });

        Swal.fire({
          icon: 'success',
          title: 'Producto agregado',
          showConfirmButton: false,
          timer: 900
        });
      };

      actions.append(btnVer, btnAdd);
      body.appendChild(actions);
      card.append(imgA, body);
      grid.append(card);
    });

    const nombre = categoriaActiva === 0
      ? 'Productos'
      : (categorias.find(c => Number(c.id) === categoriaActiva)?.nombre || 'Productos');

    tituloCategoria.textContent = nombre;
    totalProductos.textContent = `${cacheProductos.length} artículo(s)`;
  }

  if (inputQ) {
    inputQ.addEventListener('input', cargarProductos);
  }

  (async () => {
    await cargarCategorias();
    await cargarProductos();
  })();
</script>




<script>
btnAdd.onclick = () => {
  if (!IS_LOGGED) {
    Swal.fire({
      icon: 'warning',
      title: 'Inicia sesión para continuar',
      text: 'Para agregar productos al carrito debes iniciar sesión.',
      confirmButtonText: 'Ir a Ingresar',
      confirmButtonColor: '#e1552f',
      showCancelButton: true,
      cancelButtonText: 'Cancelar'
    }).then((result) => {
      if (result.isConfirmed) {
        window.location.href = 'login';
      }
    });
    return;
  }

  // Si está logueado
  setCart(getCart() + 1);
  Swal.fire({
    icon: 'success',
    title: 'Producto agregado',
    showConfirmButton: false,
    timer: 900
  });
};
</script>	  

</body>
</html>
