<?php
include "db.php";

/* ================= REVIEWS LOGIC (NEW) ================= */
if(isset($_POST['save_review'])){
  $name    = trim($_POST['name']);
  $rating  = (int)$_POST['rating'];
  $message = trim($_POST['message']);

  if($name && $rating && $message){
    $stmt = $pdo->prepare(
      "INSERT INTO reviews (name, rating, message, status)
       VALUES (?, ?, ?, 0)"
    );
    $stmt->execute([$name, $rating, $message]);
    $review_success = true;
  }
}

$reviews = $pdo->query("
  SELECT name, rating, message
  FROM reviews
  WHERE status = 1
  ORDER BY id DESC
")->fetchAll();
/* ================= END REVIEWS LOGIC ================= */

/* 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);
  }
}

/* ================= REVIEWS CSS (SCOPED) ================= */
.pro-reviews{padding:50px 16px}

.pro-reviews h2{
  text-align:center;
  color:#6fb23f;
  margin-bottom:24px;
}

.pro-reviews .review-cards{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.pro-reviews .review-cards::-webkit-scrollbar{display:none}

.pro-reviews .review-card{
  min-width:240px;
  max-width:240px;
  background:#fff;
  border-radius:14px;
  padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.1);
  scroll-snap-align:start;
  flex-shrink:0;
}

.pro-reviews .review-stars{
  color:#6fb23f;
  font-size:16px;
}

.pro-reviews .review-text{
  font-size:14px;
  line-height:1.6;
  margin-top:6px;
  word-break:break-word;
}

.pro-reviews .review-name{
  margin-top:10px;
  font-weight:600;
  color:#4e8f2c; /* dark shade of #6fb23f */
}

/* REVIEW FORM */
.review-btn{
  display:block;
  margin:28px auto;
  padding:10px 26px;
  border:none;
  border-radius:999px;
  background:#6fb23f;
  color:#fff;
  font-weight:600;
}

.review-form{
  max-width:360px;
  margin:20px auto;
  background:#fff;
  padding:20px;
  border-radius:14px;
  display:none;
}

.review-form textarea,
.review-form input{
  width:100%;
  padding:10px;
  margin-bottom:10px;
  border-radius:8px;
  border:1.5px solid #6fb23f;
}

.rating-stars{
  display:flex;
  flex-direction:row-reverse;
  justify-content:center;
  gap:6px;
  margin-bottom:10px;
}

.rating-stars input{display:none}

.rating-stars label{
  font-size:22px;
  color:#dff0d3; /* light green */
  cursor:pointer;
}

.rating-stars input:checked ~ label,
.rating-stars label:hover,
.rating-stars label:hover ~ label{
  color:#6fb23f;
}


/* ===== FORCE GREEN TEXT (#6fb23f) ===== */

/* Section headings */
.section h2,
.pro-reviews h2{
  color:#6fb23f !important;
}

/* Product names */
.product-card h4{
  color:#6fb23f !important;
}

/* Category names */
.category-title{
  color:#6fb23f !important;
}

/* Review names */
.review-name{
  color:#6fb23f !important;
}

/* Optional: stars also green */
.review-stars{
  color:#6fb23f !important;
}


body, * {
  font-family: 'Lora', serif !important;
}


/* ================= END REVIEWS CSS ================= */
</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); ?>

<!-- ================= REVIEWS SECTION ================= -->
<section class="pro-reviews">
  <h2>Customer Reviews</h2>

  <div class="review-cards" id="reviewScroll">
    <?php foreach($reviews as $r){ ?>
      <div class="review-card">
        <div class="review-stars"><?= str_repeat("★",$r['rating']) ?></div>
        <div class="review-text"><?= htmlspecialchars($r['message']) ?></div>
        <div class="review-name">— <?= htmlspecialchars($r['name']) ?></div>
      </div>
    <?php } ?>
  </div>

  <button class="review-btn" onclick="toggleReviewForm()">Write a review</button>

  <form method="post" class="review-form" id="reviewForm">
    <div class="rating-stars">
      <input type="radio" name="rating" value="5" id="rv5"><label for="rv5">★</label>
      <input type="radio" name="rating" value="4" id="rv4"><label for="rv4">★</label>
      <input type="radio" name="rating" value="3" id="rv3"><label for="rv3">★</label>
      <input type="radio" name="rating" value="2" id="rv2"><label for="rv2">★</label>
      <input type="radio" name="rating" value="1" id="rv1"><label for="rv1">★</label>
    </div>
    <textarea name="message" placeholder="Write your review..." required></textarea>
    <input name="name" placeholder="Your name" required>
    <button type="submit" name="save_review" class="review-btn">Submit</button>
  </form>
</section>
<!-- ================= END REVIEWS SECTION ================= -->

<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);
}

function toggleReviewForm(){
  const f=document.getElementById("reviewForm");
  f.style.display = f.style.display==="block" ? "none" : "block";
}

/* AUTO SCROLL REVIEWS */
const box=document.getElementById("reviewScroll");
let pos=0;
if(box){
  setInterval(()=>{
    pos+=260;
    if(pos>=box.scrollWidth-box.clientWidth){pos=0}
    box.scrollTo({left:pos,behavior:"smooth"});
  },3500);
}
</script>

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

</body>
</html>
