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

// AJUSTA AQUÍ el nombre de la variable de sesión según tu sistema de login:
$isLogged = isset($_SESSION['id_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;
    }
    *{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:14px;font-weight:500;
      text-transform:uppercase;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{
      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:uppercase;
      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:#111;
    }
    .cart-mini-count{
      font-size:12px;
      font-weight:700;
      color:var(--mamey);
    }

    main{
      display:grid;
      grid-template-columns:260px 1fr;
      gap:16px;
      max-width:1300px;
      margin:0 auto;
      padding:calc(var(--header-h) + 18px) 16px 48px;
    }

    .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;
    }
    .sidebar h3{
      margin:0 0 6px 4px;
      padding:0;
      background:transparent;
      border:none;
      font-size:14px;
      font-weight:700;
      color:#4b5563;
      text-transform:uppercase;
    }
    .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:14px;
      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;
      transition:box-shadow .18s,transform .18s;
      box-shadow:0 6px 10px rgba(15,23,42,.06);
    }
    .card:hover{
      box-shadow:0 16px 66px rgba(15,23,42,.12);
      transform:translateY(-4px);
    }

    .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;}
    }
  </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">
      <input type="search" id="q" placeholder="Buscar" aria-label="Buscar productos" style="width:50%">
    </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.php" class="activo">Inicio</a>
      <a href="#">Nosotros</a>
      <a href="#">Ofertas</a>
      <a href="#">Contactos</a>

      <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>

      <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"></div>
          <div class="cart-mini-count" id="cartMiniCount">0</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>
    <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.php">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/categorias.php',
    categorias: 'api/division.php',
    productos:  'api/productos.php'
  };

  const CART_KEY = 'cart_count_super';
  const cartMiniCountEl = document.getElementById('cartMiniCount');
  const getCart = () => parseInt(localStorage.getItem(CART_KEY) || '0', 10);
  const setCart = n => {
    localStorage.setItem(CART_KEY, String(n));
    cartMiniCountEl.textContent = n;
  };
  setCart(getCart());

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

  const btnCuenta = document.getElementById('btnCuenta');
  const menuCuenta = document.getElementById('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');

  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}` : ''}`;
    const r = await fetch(url);
    cacheProductos = await r.json();
    renderProductos();
  }

  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';
      body.innerHTML = `
        <a class="titulo" href="producto.php?id=${encodeURIComponent(p.id)}">${p.titulo}</a>
        <div class="precio">$${Number(p.precio).toLocaleString('es-DO')}</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';

      // 🔐 Control de login + SweetAlert2
      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, aquí sigue el comportamiento normal
        setCart(getCart() + 1);
        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)`;
  }

  inputQ.addEventListener('input', cargarProductos);

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