<?php
require('connection.inc.php');
require('security.php');
error_reporting(E_ALL);
ini_set('display_errors', 1);


$wishlist_product_ids = [];

if (isset($_SESSION['user_id'])) {
    $user_id = $_SESSION['user_id'];
    $wishlist_sql = "SELECT product_id FROM wishlist WHERE user_id = $user_id";
    $wishlist_result = mysqli_query($conn, $wishlist_sql);
    while ($row = mysqli_fetch_assoc($wishlist_result)) {
        $wishlist_product_ids[] = $row['product_id'];
    }
}

// Fetch all non-deleted blogs
$blog_result = $conn->query("SELECT * FROM blogs WHERE deleted_at IS NULL ORDER BY created_at DESC LIMIT 2");


?>
<!doctype html>
<html class="no-js" lang="zxx">
   

<head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <title>Loveberi</title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <!-- Place favicon.ico in the root directory -->
      <link rel="shortcut icon" type="image/x-icon" href="assets/img/allnew/logo.png">

      <!-- CSS here -->
      <link rel="stylesheet" href="assets/css/bootstrap.min.css">
      <link rel="stylesheet" href="assets/css/animate.css">
      <link rel="stylesheet" href="assets/css/swiper-bundle.css">
      <link rel="stylesheet" href="assets/css/slick.css">
      <link rel="stylesheet" href="assets/css/magnific-popup.css">
      <link rel="stylesheet" href="assets/css/spacing.css">
      <link rel="stylesheet" href="assets/css/meanmenu.css">
      <link rel="stylesheet" href="assets/css/nice-select.css">
      <link rel="stylesheet" href="assets/css/fontawesome.min.css">
      <link rel="stylesheet" href="assets/css/icon-dukamarket.css">
      <link rel="stylesheet" href="assets/css/main.css">
      
   </head>
   <body>
<style>
.tpproduct__shopping-wishlist.wishlist-active i {
    color: red;
}

.custom-tab-btn {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 12px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  border: 2px solid transparent;
}
.custom-tab-btn:hover {
  background-color: #e2f1ff;
  border-color: #007bff;
  color: #007bff;
}

.custom-feature-box img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px auto 0;
}

.custom-feature-box {
  background: #eaf7ff;
  padding: 30px;
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  text-align: center;
  font-weight: 500;
  font-size: 16px;
}

.custom-tab-content {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {opacity: 0; transform: translateY(10px);}
  to {opacity: 1; transform: translateY(0);}
}

    .img-box__thumb img {
    width: 100%;
    border-radius: 15px !important;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
    .tpslider {
        padding-top: 50px;
        height: 217px !important;
    }
    .secondary-sliderbg .tpslider {
    width: -89%;
    margin: 15px !important;
    /* padding: 257px; */
    /* padding-top: 30px; */
    /* background-position: top; */
    background-repeat: no-repeat;
    background-size: contain !important;
    border-radius: 20px !important;
}
}
.secondary-sliderbg .tpslider {
    width: -89%;
    /* height: 100%; */
    margin: 50px !important;
    padding: 257px;
    padding-top: 30px;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover !important;
    border-radius: 20px !important;
}
.carousel {
  position: relative;
  max-width: 100%;
  margin: 30px;
  overflow: hidden;
  border-radius: 10px;
}

.carousel-container {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  transition: opacity 0.5s ease-in-out;
  display: none;
}

.carousel-slide.active {
  display: block;
}

.carousel img {
  width: 100%;
  height: auto;
  display: block;
  background-size: cover !important;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 12px;
  color: white;
  background: rgba(0,0,0,0.5);
  border: none;
  font-size: 18px;
  border-radius: 50%;
  z-index: 1;
}

.prev { left: 10px; }
.next { right: 10px; }

.row {
    --bs-gutter-x: 10px !important;
    --bs-gutter-y: 0;
    display: flex
;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}

@media (min-width: 1200px) {
    .container1 {
        max-width: 1547px;
        margin-top: 60px;
    }
}


 .form-select.weight-select {
   background-color: #f9f9f9;
   padding: 0px 14px;
   border-radius: 6px;
   font-size: 14px;
}

.nice-select:after {
    content: unset;
}

.mt-60{
    margin-top: 60px !important;
}

@media(max-width: 768px){
    .msize{
        height: 300px !important;
    }
}
</style>
      <!-- Scroll-top -->
      <button class="scroll-top scroll-to-target" data-target="html">
         <i class="icon-chevrons-up"></i>
      </button>
      <!-- Scroll-top-end-->

      <!-- header-area-start -->
   <?php 
   include 'header.php'
   ?>
      <!-- header-area-end -->

      <main>

         <!-- slider-area-start -->
         <!--<section class="slider-area tpslider-delay secondary-sliderbg">-->
         <!--   <div class="swiper-container slider-active">-->
         <!--      <div class="swiper-wrapper">-->
         <!--         <div class="swiper-slide">-->
         <!--            <div class="tpslider pt-90 pb-0 grey-bg tpslider__bg2" data-background="assets/img/allnew/bannerrr1.png">-->
                        
         <!--            </div>-->
         <!--         </div>-->
         <!--         <div class="swiper-slide">-->
         <!--            <div class="tpslider pt-90 pb-0 grey-bg tpslider__bg2" data-background="assets/img/allnew/banerr2.png">-->
                        
         <!--            </div>-->
         <!--         </div>-->
         <!--      </div>-->
         <!--      <div class="slider-pagination"></div>-->
         <!--   </div>-->

         <!--</section>-->
        <section class="carousel">
  <div class="carousel-container">
    <div class="carousel-slide active">
      <picture>
        <source media="(max-width: 768px)" srcset="assets/img/allnew/phoneblueberry1.jpg">
        <img src="assets/img/allnew/banerr2.png" alt="Slide 1">
      </picture>
    </div>
    <div class="carousel-slide">
      <picture>
        <source media="(max-width: 768px)" srcset="assets/img/allnew/phoneraspberries1.jpg">
        <img src="assets/img/allnew/bannerrr1.png" alt="Slide 2">
      </picture>
    </div>
  </div>
  <button class="prev">&#10094;</button>
  <button class="next">&#10095;</button>
</section>

         <!-- slider-area-end -->

         <!-- img-box-area-start -->
         <section class="img-box-area ">
            <div class="container container1">
               <div class="row">
                   <?php
                   // Fetch all categories where deleted_at IS NULL
                    $sql = "SELECT * FROM categories WHERE deleted_at IS NULL";
                    $query = mysqli_query($conn, $sql);
                    
                    // Check if any categories are found
                    if (mysqli_num_rows($query) > 0) {
                        while ($row = mysqli_fetch_assoc($query)) {
                            // Assuming your category table has a field 'image' storing the image filename
                            $categorySlug = $row['category_url_name'];
                            $image = $row['category_img'];
                    ?>
                      <div class="col-lg-3 col-md-6 col-sm-6">
                        <a href="category.php/<?php echo $categorySlug; ?>">
                         <div class="img-box__wrapper text-center mb-30">
                            <div class="img-box__thumb mb-30">
                                <img src="admin/<?php echo htmlspecialchars($image); ?>" alt="">
                            </div>
                         </div>
                         </a>
                      </div>
                  <?php
                }   
                } else {
                    echo "No categories found.";
                }
                ?>
               </div>
            </div>
         </section>
         <!-- img-box-area-end -->

         <!-- product-area-start -->
         <section class="weekly-product-area whight-product tpproduct__padding pt-75 pb-75 pl-65 pr-65 fix">
            <div class="container-fluid">
               <div class="row">
                  <div class="col-lg-12 text-center">
                     <div class="tpsection mb-20">
                        <h4 class="tpsection__sub-title">~ Special Products ~</h4>
                        <h4 class="tpsection__title">Offer For Delicious Berries</h4>
                        <h5>Our product, from delicious berries to delicious tropical treats, is a blast of flavor, freshness, and healthy nourishment.</h5>
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-lg-12">
                     <div class="tpnavtab__area pb-40">
                       
                        <div class="tab-content" id="nav-tabContent">
                           <div class="tab-pane fade show active" id="nav-all" role="tabpanel" aria-labelledby="nav-all-tab" tabindex="0">
                              <div class="tpproduct__arrow p-relative">
                                 <div class="swiper-container tpproduct-active-4 tpslider-bottom p-relative">
                                    <div class="swiper-wrapper">
                                        <?php

                                          // 2. Fetch all products
                                        $product_sql = "SELECT * FROM products WHERE deleted_at IS NULL AND product_status = 1 ORDER BY product_id DESC";
                                        $product_query = mysqli_query($conn, $product_sql);
                                        
                                        $products = [];
                                        while ($row = mysqli_fetch_assoc($product_query)) {
                                            $products[$row['product_id']] = $row;
                                        }
                                        
                                        // 3. Fetch one image for each product
                                        $image_sql = "SELECT product_id, MIN(product_img) AS product_img FROM product_imgs WHERE deleted_at IS NULL GROUP BY product_id";
                                        $image_query = mysqli_query($conn, $image_sql);
                                        
                                        $product_images = [];
                                        while ($img = mysqli_fetch_assoc($image_query)) {
                                            $product_images[$img['product_id']] = $img['product_img'];
                                        }
                                        
                                        // 4. Fetch all units
                                        $unit_sql = "SELECT * FROM product_units WHERE deleted_at IS NULL";
                                        $unit_query = mysqli_query($conn, $unit_sql);
                                        
                                        $product_units = [];
                                        while ($unit = mysqli_fetch_assoc($unit_query)) {
                                            $product_units[$unit['product_id']][] = $unit;
                                        }
                                        ?>
                                        <?php foreach ($products as $product_id => $product) { ?>
                                            <div class="swiper-slide">
                                                <div class="tpproduct p-relative">
                                                    <div class="tpproduct__thumb p-relative text-center">
                                                        <a href="product-details.php/<?php echo urlencode($product['product_url_name']); ?>">
                                                            <img src="admin/<?php echo htmlspecialchars($product_images[$product_id] ?? 'default.jpg'); ?>" alt="<?php echo htmlspecialchars($product['product_name']); ?>">
                                                        </a>
                                                        <div class="tpproduct__shopping">
                                                        <?php
                                                            $is_wishlisted = in_array($product_id, $wishlist_product_ids);
                                                            $wishlist_class = $is_wishlisted ? 'wishlist-active' : '';
                                                        ?>
                                                       <a class="tpproduct__shopping-wishlist <?php echo $wishlist_class; ?>" 
                                                        href="javascript:void(0);" 
                                                        onclick="addOrRemoveFromWishlist(<?php echo $product_id; ?>)">
                                                            <?php if ($is_wishlisted): ?>
                                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon-heart-filled" viewBox="0 0 24 24" fill="red" width="20" height="20">
                                                                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5
                                                                            2 5.42 4.42 3 7.5 3c1.74 0 3.41 0.81 4.5 2.09
                                                                            C13.09 3.81 14.76 3 16.5 3
                                                                            19.58 3 22 5.42 22 8.5
                                                                            c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                                                                </svg>
                                                            <?php else: ?>
                                                                <i class="icon-heart icons"></i>
                                                            <?php endif; ?>
                                                        </a>

                                                        



                                                        </div>
                                                    </div>
                                            
                                                    <div class="tpproduct__content">
                                                        <h4 class="tpproduct__title">
                                                            <a href="product-details.php/<?php echo urlencode($product['product_url_name']); ?>">
                                                                <?php echo htmlspecialchars($product['product_name']); ?>
                                                            </a>
                                                        </h4>
                                            
                                                        <div class="tpproduct__rating mb-5">
                                                            <a href="#"><i class="icon-star_outline1"></i></a>
                                                            <a href="#"><i class="icon-star_outline1"></i></a>
                                                            <a href="#"><i class="icon-star_outline1"></i></a>
                                                            <a href="#"><i class="icon-star_outline1"></i></a>
                                                            <a href="#"><i class="icon-star_outline1"></i></a>
                                                        </div>
                                            
                                                        <!-- Weight Selector -->
                                                        <div class="mb-10 w-100">
                                                            <label for="weightSelect<?php echo $product_id; ?>" class="form-label fw-semibold mb-2" style="font-size: 14px;">Select Weight</label>
                                                            <select id="weightSelect<?php echo $product_id; ?>" class="form-select weight-select w-100" onchange="updatePrice(this, <?php echo $product_id; ?>)">
                                                            <?php
                                                            if (isset($product_units[$product_id])) {
                                                                foreach ($product_units[$product_id] as $unit) {
                                                            ?>
                                                                <option value="<?php echo htmlspecialchars($unit['unit_id']); ?>"
                                                                        data-price="<?php echo htmlspecialchars($unit['unit_price']); ?>"
                                                                        data-old="<?php echo htmlspecialchars($unit['unit_price'] * 1.2); ?>">
                                                                    <?php echo htmlspecialchars($unit['unit_name']) . ' - ₹' . htmlspecialchars($unit['unit_price']); ?>
                                                                </option>
                                                            <?php
                                                                }
                                                            }
                                                            ?>
                                                        </select>
                                                        </div>
                                            
                                                        <!-- Price -->
                                                      <?php 
                                                        // Check if product has units
                                                        if (isset($product_units[$product_id]) && !empty($product_units[$product_id])) {
                                                            $first_unit_price = $product_units[$product_id][0]['unit_price'];
                                                        } else {
                                                            $first_unit_price = 0; // No unit, default to 0
                                                        }
                                                        ?>
                                                        <div class="tpproduct__price mt-60">
                                                            <span id="currentPrice<?php echo $product_id; ?>" class="current-price">₹<?php echo number_format((float)$first_unit_price, 2); ?></span>
                                                            <del id="oldPrice<?php echo $product_id; ?>" class="old-price">₹<?php echo number_format((float)($first_unit_price * 1.2), 2); ?></del>
                                                        </div>

                                                    </div>
                                            
                                                    <div class="">
                                                        <div class="tpproduct__hover-btn d-flex justify-content-center mb-10">
                                                        <a class="tp-btn-2" href="javascript:void(0);" onclick="addToCart(this, <?php echo $product_id; ?>)">
                                                            Add to cart
                                                        </a>



                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        <?php } ?>
                                    </div>
                                 </div>
                                 <div class="tpproduct-btn">
                                    <div class="tpprduct-arrow tpproduct-btn__prv4"><a href="#"><i class="icon-chevron-left"></i></a></div>
                                    <div class="tpprduct-arrow tpproduct-btn__nxt4"><a href="#"><i class="icon-chevron-right"></i></a></div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
               <div class="row">
                  <div class="col-lg-12">
                     <div class="tpproduct__all-item text-center">
                        <span>Discover thousands of other quality products. 
                           <a href="product.php">Shop All Products <i class="icon-chevrons-right"></i></a>
                        </span>
                     </div>
                  </div>
               </div>
            </div>
         </section>
         <!-- product-area-end -->

         <!-- product-feature-area-start -->
        <!-- Start: Custom Feature Section -->

        <div class="row">
                  <div class="col-lg-12 text-center">
                     <div class="tpsection mb-20">
                        <h4 class="tpsection__sub-title">~ Premium Picks ~</h4>
                        <h4 class="tpsection__title">Limited-Time Berry Specials</h4>
                        <h5>From berrylicious bites to tropical treats, our products are a flavorful fusion of freshness and feel-good nourishment.</h5>
                     </div>
                  </div>
               </div>

<section class="custom-feature-section pt-80 pb-20">


<div class="container">
    <!-- Tab Buttons -->
    <div class="row text-center mb-4">
        <?php
        $categoryTabs = "SELECT * FROM categories WHERE deleted_at IS NULL";
        $tabsResult = $conn->query($categoryTabs);
        $tabIndex = 1;
        while ($tab = $tabsResult->fetch_assoc()) {
        ?>
            <div class="col-md-3">
                <div class="custom-tab-btn" onclick="showCustomTab(<?php echo $tabIndex; ?>)">
                    <?php echo htmlspecialchars($tab['category_name']); ?>
                </div>
            </div>
        <?php $tabIndex++; } ?>
    </div>
<div class="row text-center mb-4">
    <!-- Tab Content -->
    <?php
    $tabsResult->data_seek(0); // reset
    $tabIndex = 1;
    while ($tab = $tabsResult->fetch_assoc()) {
        $category_id = $tab['category_id'];

        // Fetch products for this category
        $product_sql = "SELECT * FROM products WHERE deleted_at IS NULL AND product_status = 1 AND category_id = $category_id ORDER BY product_id DESC";
        $product_query = mysqli_query($conn, $product_sql);

        // Prepare arrays
        $products = [];
        while ($row = mysqli_fetch_assoc($product_query)) {
            $products[$row['product_id']] = $row;
        }

        // Fetch product images (only one per product)
        $image_sql = "SELECT product_id, MIN(product_img) AS product_img FROM product_imgs WHERE deleted_at IS NULL GROUP BY product_id";
        $image_query = mysqli_query($conn, $image_sql);
        $product_images = [];
        while ($img = mysqli_fetch_assoc($image_query)) {
            $product_images[$img['product_id']] = $img['product_img'];
        }

        // Fetch all units
        $unit_sql = "SELECT * FROM product_units WHERE deleted_at IS NULL";
        $unit_query = mysqli_query($conn, $unit_sql);
        $product_units = [];
        while ($unit = mysqli_fetch_assoc($unit_query)) {
            $product_units[$unit['product_id']][] = $unit;
        }
        ?>
        <div id="custom-content-<?php echo $tabIndex; ?>" class="custom-tab-content row" style="display: none;">
    <?php foreach ($products as $product_id => $product) { ?>
        <div class="col-md-4 mb-4"> <!-- One column per product -->
            <div class="tpproduct__content">
                <div class="tpproduct p-relative">
                    <div class="tpproduct__thumb p-relative text-center">
                        <a href="product-details.php/<?php echo urlencode($product['product_url_name']); ?>">
                            <img src="admin/<?php echo htmlspecialchars($product_images[$product_id] ?? 'default.jpg'); ?>" alt="<?php echo htmlspecialchars($product['product_name']); ?>">
                        </a>
                        <div class="tpproduct__shopping">
                        <?php
                        $is_wishlisted = in_array($product_id, $wishlist_product_ids);
                        $wishlist_class = $is_wishlisted ? 'wishlist-active' : '';
                        ?>
                        <a class="tpproduct__shopping-wishlist <?php echo $wishlist_class; ?>" 
                        href="javascript:void(0);" 
                        onclick="addOrRemoveFromWishlist(<?php echo $product_id; ?>)">
                        <?php if ($is_wishlisted): ?>
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon-heart-filled" viewBox="0 0 24 24" fill="red" width="20" height="20">
                            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5
                                    2 5.42 4.42 3 7.5 3c1.74 0 3.41 0.81 4.5 2.09
                                    C13.09 3.81 14.76 3 16.5 3
                                    19.58 3 22 5.42 22 8.5
                                    c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                        </svg>
                        <?php else: ?>
                        <i class="icon-heart icons"></i>
                        <?php endif; ?>
                        </a>
                    </div>
                    </div>

                    <div class="tpproduct__content">
                        <h4 class="tpproduct__title">
                            <a href="product-details.php/<?php echo urlencode($product['product_url_name']); ?>">
                                <?php echo htmlspecialchars($product['product_name']); ?>
                            </a>
                        </h4>

                        <div class="tpproduct__rating mb-5">
                            <i class="icon-star_outline1"></i>
                            <i class="icon-star_outline1"></i>
                            <i class="icon-star_outline1"></i>
                            <i class="icon-star_outline1"></i>
                            <i class="icon-star_outline1"></i>
                        </div>

                        <div class="mb-10 w-100">
                            <label for="weightSelect<?php echo $product_id; ?>" class="form-label fw-semibold mb-2" style="font-size: 14px;">Select Weight</label>
                            <select id="weightSelect<?php echo $product_id; ?>" class="form-select weight-select w-100" onchange="updatePrice(this, <?php echo $product_id; ?>)">
                            <?php
                            if (isset($product_units[$product_id])) {
                            foreach ($product_units[$product_id] as $unit) {
                            ?>
                            <option value="<?php echo htmlspecialchars($unit['unit_id']); ?>"
                                data-price="<?php echo htmlspecialchars($unit['unit_price']); ?>"
                                data-old="<?php echo htmlspecialchars($unit['unit_price'] * 1.2); ?>">
                                <?php echo htmlspecialchars($unit['unit_name']) . ' - ₹' . htmlspecialchars($unit['unit_price']); ?>
                            </option>
                            <?php
                            }
                            }
                            ?>
                            </select>
                        </div>

                        <?php
                        $first_price = isset($product_units[$product_id][0]['unit_price']) ? $product_units[$product_id][0]['unit_price'] : 0;
                        ?>
                        <div class="tpproduct__price mt-60">
                            <span id="currentPrice<?php echo $product_id; ?>" class="current-price">₹<?php echo number_format($first_price, 2); ?></span>
                            <del id="oldPrice<?php echo $product_id; ?>" class="old-price">₹<?php echo number_format($first_price * 1.2, 2); ?></del>
                        </div>
                    </div>

                    <div class="tpproduct__hover-btn d-flex justify-content-center mb-10">
                    <a class="tp-btn-2" href="javascript:void(0);" onclick="addToCart(this, <?php echo $product_id; ?>)">
                                                            Add to cart
                                                        </a>
                    </div>
                </div>
            </div>
        </div>
    <?php } ?>
</div>

        <?php $tabIndex++;
    } ?>
</div>
</div>

</section>

         <section>
        
         </section>
         <!-- blog-area-start -->


        <section class="blog-area pt-10 pb-50 grey-bg">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 text-center">
                        <div class="tpsection mb-35">
                            <h4 class="tpsection__sub-title">~ Read Our Blog ~</h4>
                            <h4 class="tpsection__title">Our Latest Post</h4>

                        </div>
                    </div>
                </div>

                <div class="container">
                    <div class="row">
                        <?php while ($blog = $blog_result->fetch_assoc()): ?>
                        <div class="col-sm">
                            <div class="tpblog__item">
                                <div class="tpblog__thumb fix">
                                    <a href="blog-details.php/<?= urlencode($blog['blog_url_name']) ?>"><img class="msize"
                                            src="admin/<?= htmlspecialchars($blog['blog_img']) ?> "
                                            alt="<?= htmlspecialchars($blog['blog_name']) ?>" height="450px"></a>
                                </div>
                                <div class="tpblog__wrapper"><h4 class="tpblog__title"><a href="blog-details.php/<?= urlencode($blog['blog_url_name']) ?>"> <?= htmlspecialchars($blog['blog_name']) ?></a>
                                    </h4>
                                    <p><?= mb_substr(strip_tags($blog['blog_description']), 0, 70) ?>...</p>
                                    <div class="tpblog__details">
                                        <a href="blog-details.php/<?= urlencode($blog['blog_url_name']) ?>">Continue reading <i
                                                class="icon-chevrons-right"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php endwhile; ?>

                    </div>
                </div>


            </div>
        </section>
         <!-- blog-area-end -->

         <!-- feature-area-start -->
         <!-- <section class="feature-area mainfeature__bg theme-bg-2 pt-50 pb-40">
            <div class="container">
               <div class="mainfeature__border pb-15">
                  <div class="row row-cols-lg-5 row-cols-md-3 row-cols-2">
                     <div class="col">
                        <div class="mainfeature__item text-center mb-30">
                           <div class="mainfeature__icon">
                              <img src="assets/img/icon/feature-icon-1.svg" alt="">
                           </div>
                           <div class="mainfeature__content">
                              <h4 class="mainfeature__title">Fast Delivery</h4>
                              <p>Across West & East India</p>
                           </div>
                        </div>
                     </div>
                     <div class="col">
                        <div class="mainfeature__item text-center mb-30">
                           <div class="mainfeature__icon">
                              <img src="assets/img/icon/feature-icon-2.svg" alt="">
                           </div>
                           <div class="mainfeature__content">
                              <h4 class="mainfeature__title">safe payment</h4>
                              <p>100% Secure Payment</p>
                           </div>
                        </div>
                     </div>
                     <div class="col">
                        <div class="mainfeature__item text-center mb-30">
                           <div class="mainfeature__icon">
                              <img src="assets/img/icon/feature-icon-3.svg" alt="">
                           </div>
                           <div class="mainfeature__content">
                              <h4 class="mainfeature__title">Online Discount</h4>
                              <p>Add Multi-buy Discount </p>
                           </div>
                        </div>
                     </div>
                     <div class="col">
                        <div class="mainfeature__item text-center mb-30">
                           <div class="mainfeature__icon">
                              <img src="assets/img/icon/feature-icon-4.svg" alt="">
                           </div>
                           <div class="mainfeature__content">
                              <h4 class="mainfeature__title">Help Center</h4>
                              <p>Dedicated 24/7 Support </p>
                           </div>
                        </div>
                     </div>
                     <div class="col">
                        <div class="mainfeature__item text-center mb-30">
                           <div class="mainfeature__icon">
                              <img src="assets/img/icon/feature-icon-5.svg" alt="">
                           </div>
                           <div class="mainfeature__content">
                              <h4 class="mainfeature__title">Curated items</h4>
                              <p>From Handpicked Sellers</p>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </section> -->
         <!-- feature-area-end -->

      </main>

      <!-- footer-area-start -->
      <?php 
      include 'footer.php'
      ?>
      <!-- footer-area-end -->
      <script>
        function updatePrice(selectElement, productId) {
            var selectedOption = selectElement.options[selectElement.selectedIndex];
            var newPrice = selectedOption.getAttribute('data-price');
            var newOldPrice = selectedOption.getAttribute('data-old');
        
            // Find the price elements and update
            var currentPriceElement = document.querySelector('#currentPrice' + productId);
            var oldPriceElement = document.querySelector('#oldPrice' + productId);
        
            if (currentPriceElement && oldPriceElement) {
                currentPriceElement.textContent = '₹' + parseFloat(newPrice).toFixed(2);
                oldPriceElement.textContent = '₹' + parseFloat(newOldPrice).toFixed(2);
            }
        }
</script>

     <script>
  function showCustomTab(index) {
    for (let i = 1; i <= 4; i++) {
      document.getElementById('custom-content-' + i).style.display = 'none';
    }
    document.getElementById('custom-content-' + index).style.display = 'flex';
  }

  window.onload = function() {
    showCustomTab(1); // Open the first tab by default
  };
</script>
<script>
let slideIndex = 0;
const slides = document.querySelectorAll('.carousel-slide');
const nextBtn = document.querySelector('.next');
const prevBtn = document.querySelector('.prev');

function showSlide(index) {
  slides.forEach((slide, i) => {
    slide.classList.remove('active');
    if (i === index) {
      slide.classList.add('active');
    }
  });
}

nextBtn.addEventListener('click', () => {
  slideIndex = (slideIndex + 1) % slides.length;
  showSlide(slideIndex);
});

prevBtn.addEventListener('click', () => {
  slideIndex = (slideIndex - 1 + slides.length) % slides.length;
  showSlide(slideIndex);
});

// Optional: Auto slide
setInterval(() => {
  slideIndex = (slideIndex + 1) % slides.length;
  showSlide(slideIndex);
}, 4000);

// Initial display
showSlide(slideIndex);
</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
   $(document).ready(function () {
      $('.weight-select').on('change', function () {
         const selected = $(this).find(':selected');
         const newPrice = selected.data('price');
         const newOldPrice = selected.data('old');

         const productBox = $(this).closest('.tpproduct');
         productBox.find('.current-price').text(`₹${newPrice}.00`);
         productBox.find('.old-price').text(`₹${newOldPrice}.00`);
      });
   });
</script>

<!-- add to cart script -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
function addToCart(button, productId) {
    const parent = button.closest('.tpproduct');
    const selectEl = parent.querySelector(`#weightSelect${productId}`);
    const unitId = selectEl ? selectEl.value : null;

    if (!unitId) {
        Swal.fire({
            icon: 'warning',
            title: 'Please select a unit',
            text: 'You must choose a unit to add the product to cart.',
        });
        return;
    }

    fetch("add-to-cart.php", {
        method: "POST",
        headers: {
            "Content-Type": "application/x-www-form-urlencoded",
        },
        body: `product_id=${productId}&unit_id=${unitId}`
    })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'success') {
            Swal.fire({
                icon: 'success',
                title: 'Added to cart!',
                text: 'Product has been added to your cart.',
                timer: 2000,
                showConfirmButton: false
            });
        } else if (data.status === 'login_required') {
            // Redirect to login with message parameter
            window.location.href = "log-in.php?message=login_required";
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Something went wrong. Please try again.',
            });
        }
    });
}

</script>

<!-- add to wishlist script -->

<script>
function addOrRemoveFromWishlist(productId) {
    fetch('add-to-wishlist.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'product_id=' + encodeURIComponent(productId)
    })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'added') {
            Swal.fire('Added!', 'Product added to wishlist.', 'success').then(() => {
                location.reload();
            });
        } else if (data.status === 'removed') {
            Swal.fire('Removed!', 'Product removed from wishlist.', 'success').then(() => {
                location.reload();
            });
        } else if (data.status === 'login_required') {
            // Redirect to login with message parameter
            window.location.href = "log-in.php?message=login_required";
        } else {
            Swal.fire('Error', 'Something went wrong.', 'error');
            return;
        }

        // Toggle heart icon style
        document.querySelectorAll(`[onclick="addOrRemoveFromWishlist(${productId})"]`).forEach(el => {
            el.classList.toggle('wishlist-active');
        });
    })
    .catch(err => {
        console.error(err);
        Swal.fire('Error', 'Network error. Try again later.', 'error');
    });
}

</script>




      <!-- JS here -->
      <script src="assets/js/jquery.js"></script>
      <script src="assets/js/waypoints.js"></script>
      <script src="assets/js/bootstrap.bundle.min.js"></script>
      <script src="assets/js/swiper-bundle.js"></script>
      <script src="assets/js/nice-select.js"></script>
      <script src="assets/js/slick.js"></script>
      <script src="assets/js/magnific-popup.js"></script>
      <script src="assets/js/counterup.js"></script>
      <script src="assets/js/wow.js"></script>
      <script src="assets/js/isotope-pkgd.js"></script>
      <script src="assets/js/imagesloaded-pkgd.js"></script>
      <script src="assets/js/countdown.js"></script>
      <script src="assets/js/ajax-form.js"></script>
      <script src="assets/js/parallax-effect.min.js"></script>
      <script src="assets/js/meanmenu.js"></script>
      <script src="assets/js/main.js"></script>
   </body>


</html>
