<?php
include "db.php";

/* Categories */
$cats = $pdo->query("SELECT * FROM categories ORDER BY id ASC")->fetchAll();

/* Product sections */
$bestSelling = $pdo->query("SELECT * FROM products WHERE product_tag='best' LIMIT 6")->fetchAll();
$topRated = $pdo->query("SELECT * FROM products WHERE product_tag='top' LIMIT 6")->fetchAll();
$recommended = $pdo->query("SELECT * FROM products WHERE product_tag='recommended' LIMIT 6")->fetchAll();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Organic Grocery</title>

<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap" rel="stylesheet">

<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:'Lora',serif}
body{background:#EDF6E8;color:#1f2937}

/* ===== SLIDER ===== */
.banner-slider{width:100%;overflow:hidden;position:relative}
.banner-slides{display:flex;transition:.6s}
.banner-slide{min-width:100%}
.banner-slide img{width:100%;display:block}
.banner-dots{position:absolute;bottom:14px;width:100%;display:flex;justify-content:center;gap:10px}
.banner-dots span{width:10px;height:10px;background:#ddd;border-radius:50%}
.banner-dots .active{background:#F2C94C}

/* ===== SECTION HEADING ===== */
.section{padding:48px 16px}
.section h2{
  text-align:center;
  font-size:26px;
  color:#2F6B2F;
  margin-bottom:28px;
}

/* ===== CATEGORIES ===== */
.categories{background:#EAF5E3;padding:40px 16px}
.categories-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:22px;
}
.category-card{
  background:#fff;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  overflow:hidden;
  text-decoration:none;
}
.category-img{
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}
.category-img img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.category-title{
  padding:14px;
  text-align:center;
  font-weight:600;
  color:#2F6B2F;
}

/* ===== PRODUCTS ===== */
.products-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,240px));
  gap:26px;
  justify-content:center;
}
.product-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.1);
  padding:16px;
  text-align:center;
}
.product-card img{
  width:100%;
  height:170px;
  object-fit:contain;
  margin-bottom:10px;
}
.product-card h4{
  font-size:16px;
  margin-bottom:8px;
}

/* VARIANT */
.variant{
  width:100%;
  padding:9px;
  border-radius:8px;
  border:1px solid #cbd5e1;
  margin-bottom:8px;
}

/* PRICE */
.price{
  font-weight:700;
  color:#E6B800;
  margin-bottom:10px;
}

/* ADD CART */
.add-cart{
  width:100%;
  padding:11px;
  border:none;
  border-radius:10px;
  background:#6FB23F;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

/* ===== MOBILE ===== */
@media(max-width:768px){
  .categories-grid{
    display:flex;
    overflow-x:auto;
    gap:14px;
  }
  .category-card{flex:0 0 46%}
  .categories-grid::-webkit-scrollbar{display:none}
  .products-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
</style>
</head>

<body>

<?php include "header.php"; ?>

<!-- SLIDER -->
<div class="banner-slider">
  <div class="banner-slides" id="slides">
    <div class="banner-slide"><img src="https://grocery.quickbizsolutions.in/media/saiorganics.png"></div>
    <div class="banner-slide"><img src="https://grocery.quickbizsolutions.in/media/saiorganics.png"></div>
    <div class="banner-slide"><img src="https://grocery.quickbizsolutions.in/media/saiorganics.png"></div>
  </div>
  <div class="banner-dots" id="dots">
    <span class="active"></span><span></span><span></span>
  </div>
</div>

<!-- CATEGORIES -->
<section class="categories">
  <div class="categories-grid">
    <?php foreach($cats as $c){ ?>
    <a href="products.php?category=<?= $c['id'] ?>" class="category-card">
      <div class="category-img">
        <img src="assets/images/categories/<?= $c['image'] ?>">
      </div>
      <div class="category-title"><?= $c['category_name'] ?></div>
    </a>
    <?php } ?>
  </div>
</section>

<?php
function productSection($title,$products,$pdo){
  if(!$products) return;
?>
<section class="section">
  <h2><?= $title ?></h2>
  <div class="products-grid">
    <?php foreach($products as $p){
      $stmt=$pdo->prepare("SELECT * FROM product_variants WHERE product_id=?");
      $stmt->execute([$p['id']]);
      $vars=$stmt->fetchAll();
    ?>
    <div class="product-card">
      <img src="assets/images/products/<?= $p['image'] ?>">
      <h4><?= $p['product_name'] ?></h4>

      <select class="variant" onchange="this.nextElementSibling.innerHTML='&#8377;'+this.value">
        <?php foreach($vars as $v){ ?>
          <option value="<?= $v['price'] ?>" data-weight="<?= $v['weight'] ?>">
            <?= $v['weight'] ?> – &#8377;<?= $v['price'] ?>
          </option>
        <?php } ?>
      </select>

      <div class="price">&#8377;<?= $vars[0]['price'] ?></div>

      <button class="add-cart"
        onclick="addHomeCart(
          '<?= $p['id'] ?>',
          '<?= $p['product_name'] ?>',
          this)">
        Add to Cart
      </button>
    </div>
    <?php } ?>
  </div>
</section>
<?php } ?>

<?php productSection("Best Selling",$bestSelling,$pdo); ?>
<?php productSection("Top Rated",$topRated,$pdo); ?>
<?php productSection("Recommended",$recommended,$pdo); ?>

<script>
let i=0;
const slides=document.getElementById("slides");
const dots=document.querySelectorAll(".banner-dots span");
setInterval(()=>{
  i=(i+1)%dots.length;
  slides.style.transform=`translateX(-${i*100}%)`;
  dots.forEach(d=>d.classList.remove("active"));
  dots[i].classList.add("active");
},4000);

function addHomeCart(pid,name,btn){
  let card=btn.closest(".product-card");
  let sel=card.querySelector("select");
  let weight=sel.options[sel.selectedIndex].dataset.weight;
  let price=sel.value;
  let img=card.querySelector("img").src;

  let fd=new FormData();
  fd.append("product_id",pid);
  fd.append("product_name",name);
  fd.append("weight",weight);
  fd.append("price",price);
  fd.append("image",img);

  fetch("cart_handler.php",{method:"POST",body:fd})
    .then(r=>r.text())
    .then(c=>document.querySelector(".cart-count").innerText=c);
}
</script>

</body>
</html>
