<?php 
include 'includes/header.php';
include 'includes/db.php';
$sliders = mysqli_query($conn,"SELECT * FROM sliders WHERE status=1 ORDER BY position ASC");
?>

<div class="carousel-inner">
<?php $i=0; while($s=mysqli_fetch_assoc($sliders)){ ?>
<div class="carousel-item <?= $i==0?'active':'' ?>">
    <div class="single-slide1" style="background-image:url('uploads/<?= $s['image'] ?>');">
        <div class="container">
            <div class="main-content-banner">

                <div class="slider-content">
                    <span><?= $s['title'] ?></span>
                    <h3><?= $s['subtitle'] ?></h3>
                    <p><?= $s['description'] ?></p>
                    <a class="krb-btn" href="<?= $s['button_link'] ?>">
                        <?= $s['button_text'] ?>
                    </a>
                </div>

                <div class="right-sidebanner">
                    <img src="uploads/<?= $s['front_image'] ?>" class="moving-image">
                </div>

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

                            
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>

    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleRide" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

        <!-- Begin Special Product Area -->
     <div class="special-product_area position-relative">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title_area">
                    <span>Special Offer Limited Time</span>
                    <h3>Deal Of The Day</h3>
                </div>

                <div class="special-product_slider krb-slick-slider slider-navigation_style-1 img-hover-effect_area"
                    data-slick-options='{
                        "slidesToShow": 2,
                        "arrows" : true,
                        "autoplay": true,
                        "autoplaySpeed": 2000
                    }'
                    data-slick-responsive='[
                        {"breakpoint":768, "settings": {"slidesToShow": 1}}
                    ]'>

                <?php
$deals = mysqli_query($conn,"SELECT * FROM products WHERE tags LIKE '%Deals%' ORDER BY position ASC");

while($p = mysqli_fetch_assoc($deals)){

    $price = $p['price'];
    $oldPrice = $price + ($price * 0.10); // 10% hike
    $endDate = date("Y/m/d", strtotime("+3 days"));

    if(!empty($p['gallery_images'])){
        $imgs = explode('|',$p['gallery_images']);
        $primary = $imgs[0];
        $secondary = $imgs[1] ?? $imgs[0];
    } else {
        $primary = $p['main_image'];
        $secondary = $p['main_image'];
    }
?>
<div class="slide-item">
    <div class="inner-slide">
        <div class="single-product">
            <div class="product-img">
                <a href="product-details.php?id=<?= $p['id'] ?>">
                    <img class="primary-img" src="uploads/products/<?= $primary ?>" alt="">
                    <img class="secondary-img" src="uploads/products/<?= $secondary ?>" alt="">
                </a>
                <div class="sticker-area-2">
                    <span class="sticker-2">-10%</span>
                    <span class="sticker">Deal</span>
                </div>
            </div>

            <div class="product-content">
                <div class="product-desc_info">

                    <!-- ✅ COUNTER -->
                    <div class="krb-countdown_area">
                        <span class="product-offer">Hurry up! Offer ends in:</span>
                        <div class="countdown-wrap">
                            <div class="countdown item-4"
                                 data-countdown="<?= $endDate ?>"
                                 data-format="short">
                                <div class="countdown__item">
                                    <span class="countdown__time daysLeft"></span>
                                    <span class="countdown__text daysText"></span>
                                </div>
                                <div class="countdown__item">
                                    <span class="countdown__time hoursLeft"></span>
                                    <span class="countdown__text hoursText"></span>
                                </div>
                                <div class="countdown__item">
                                    <span class="countdown__time minsLeft"></span>
                                    <span class="countdown__text minsText"></span>
                                </div>
                                <div class="countdown__item">
                                    <span class="countdown__time secsLeft"></span>
                                    <span class="countdown__text secsText"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <h6 class="product-name">
                        <a href="product-details.php?id=<?= $p['id'] ?>">
                            <?= $p['product_name'] ?>
                        </a>
                    </h6>

                    <div class="price-box">
                        <span class="new-price new-price-2">$<?= number_format($price,2) ?></span>
                        <span class="old-price">$<?= number_format($oldPrice,2) ?></span>
                    </div>

                    <div class="add-actions">
    <ul>
        <li>
            <a class="krb-add_cart"
               href="http://localhost/Krb-demo-2/product-details.php?id=<?= $p['id'] ?>">
               <i class="ion-bag"></i> Buy Now
            </a>
        </li>
        <li class="quick-view-btn">
            <a href="http://localhost/Krb-demo-2/product-details.php?id=<?= $p['id'] ?>">
                <i class="ion-android-open"></i>
            </a>
        </li>
    </ul>
</div>

                </div>
            </div>

        </div>
    </div>
</div>
<?php } ?>


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

            <div>
                <div class='ripple-background'>
                    <div class='circle xxlarge shade1'></div>
                    <div class='circle xlarge shade2'></div>
                    <div class='circle large shade3'></div>
                    <div class='circle mediun shade4'></div>
                    <div class='circle small shade5'></div>
                  </div>
            </div>
        </div>
        <!-- Special Product Area End Here -->

        <!-- Begin krb's Banner Area -->
        <div class="krb-banner_area @@bgColor">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="banner-item img-hover_effect">
                            <div class="banner-img-1"></div>
                            <div class="banner-content">
                                <span class="offer">Get 20% off your order</span>
                                <h3>Gold Detectors</h3>
                                <p>Your Source for Advanced Metal Detecting Technology</p>
                                <div class="krb-btn-ps_left">
                                    <a class="krb-btn" href="#!">Shop Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="banner-item img-hover_effect">
                            <div class="banner-img-1 banner-img-2"> </div>
                            <div class="banner-content">
                                <span class="offer">Save $120 when you buy</span>
                                <h3>Metal Detectors</h3>
                                <p>Your Source for Advanced Metal Detecting Technology</p>
                                <div class="krb-btn-ps_left">
                                    <a class="krb-btn" href="#!">Shop Now</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- krb's Banner Area End Here -->

        <!-- Begin krb's Product Area -->
        <div class="krb-product_area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="section-title_area">
                            <span>Top New On This Week</span>
                            <h3>New Arrivals Products</h3>
                        </div>
                        <div class="product-slider krb-slick-slider slider-navigation_style-1 img-hover-effect_area"
                            data-slick-options='{
                        "slidesToShow": 6,
                        "arrows" : true,
                        "autoplay": true,
                        "autoplaySpeed": 2000
                        }' data-slick-responsive='[
                                                {"breakpoint":1501, "settings": {"slidesToShow": 4}},
                                                {"breakpoint":1200, "settings": {"slidesToShow": 3}},
                                                {"breakpoint":992, "settings": {"slidesToShow": 2}},
                                                {"breakpoint":767, "settings": {"slidesToShow": 1}},
                                                {"breakpoint":480, "settings": {"slidesToShow": 1}}
                                            ]'>
                         <?php
$newArrivals = mysqli_query($conn,"SELECT * FROM products WHERE tags LIKE '%New Arrival%' ORDER BY position ASC");

while($p = mysqli_fetch_assoc($newArrivals)){
?>
<div class="product-slide_item">
    <div class="inner-slide">
        <div class="single-product">
            <div class="product-img">
                <a href="product-details.php?id=<?= $p['id'] ?>">
                    <img class="primary-img" src="uploads/products/<?= $p['main_image'] ?>" alt="">
                    <img class="secondary-img" src="uploads/products/<?= $p['main_image'] ?>" alt="">
                </a>
                <div class="sticker">
                    <span class="sticker">New</span>
                </div>
                <div class="add-actions">
                    <ul>
                        <li><a class="krb-add_cart" href="#"><i class="ion-bag"></i></a></li>
                     
                        <li class="quick-view-btn">
                            <a href="product-details.php?id=<?= $p['id'] ?>"><i class="ion-android-open"></i></a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="product-content">
                <div class="product-desc_info">
                    <div class="rating-box">
                        <ul>
                            <li><i class="ion-android-star"></i></li>
                            <li><i class="ion-android-star"></i></li>
                            <li><i class="ion-android-star"></i></li>
                            <li class="silver-color"><i class="ion-android-star"></i></li>
                            <li class="silver-color"><i class="ion-android-star"></i></li>
                        </ul>
                    </div>

                    <h6>
                        <a class="product-name" href="product-details.php?id=<?= $p['id'] ?>">
                            <?= $p['product_name'] ?>
                        </a>
                    </h6>

                   <div class="price-box">
    <?php
    $oldPrice = $p['price'];
    $newPrice = $oldPrice + ($oldPrice * 0.10);
    ?>
    <span class="new-price">$<?= number_format($newPrice, 2) ?></span>
    <span class="old-price">$<?= number_format($oldPrice, 2) ?></span>
</div>

                </div>
            </div>

        </div>
    </div>
</div>
<?php } ?>


                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- krb's Product Area End Here -->

        <!-- Begin krb's Banner Two Area -->
        <div class="krb-banner_area krb-banner_area-2">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-4 col-md-6">
                        <div class="banner-item img-hover_effect">
                            <a href="#!">
                                <img class="img-full" src="assets/images/shop/bg1.jpg" alt="krb's Banner">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="banner-item img-hover_effect">
                            <a href="#!">
                                <img class="img-full" src="assets/images/shop/bg1.jpg" alt="krb's Banner">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6">
                        <div class="banner-item img-hover_effect">
                            <a href="#!">
                                <img class="img-full" src="assets/images/shop/bg1.jpg" alt="krb's Banner">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- krb's Banner Two Area End Here -->

        <!-- Begin krb's Best Selling Product Area -->
       <div class="best-selling-product_area">
    <div class="container-fluid">
        <div class="section-title_area">
            <span>Top Best Selling On This Week</span>
            <h3>Best Selling Products</h3>
        </div>
        <div class="row no-gutters">
            <div class="col-xl-12 col-md-8 col-sm-8">
                <div class="best-selling_slider krb-slick-slider slider-navigation_style-1 img-hover-effect_area"
                    data-slick-options='{
                        "slidesToShow": 5,
                        "arrows" : true,
                        "rows": 2,
                        "autoplay": true,
                        "autoplaySpeed": 2000
                    }'
                    data-slick-responsive='[
                        {"breakpoint":1501, "settings": {"slidesToShow": 4}},
                        {"breakpoint":1200, "settings": {"slidesToShow": 2}},
                        {"breakpoint":768, "settings": {"slidesToShow": 1, "rows": 1}},
                        {"breakpoint":575, "settings": {"slidesToShow": 1, "rows": 2}}
                    ]'>

                   <?php
$bestSellers = mysqli_query($conn,"SELECT * FROM products WHERE tags LIKE '%Best Seller%' ORDER BY position ASC");
while($p = mysqli_fetch_assoc($bestSellers)){
    $img = $p['main_image'];
?>
<div class="product-slide_item">
    <div class="inner-slide">
        <div class="single-product">
            <div class="product-img">
                <a href="product-details.php?id=<?= $p['id'] ?>">
                    <img class="primary-img" src="uploads/products/<?= $img ?>" alt="">
                    <img class="secondary-img" src="uploads/products/<?= $img ?>" alt="">
                </a>
                <div class="sticker">
                    <span class="sticker">Best</span>
                </div>
                <div class="add-actions">
                    <ul>
                        <li><a class="krb-add_cart" href="#"><i class="ion-bag"></i></a></li>
                      
                        <li class="quick-view-btn">
                            <a href="product-details.php?id=<?= $p['id'] ?>">
                                <i class="ion-android-open"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="product-content">
                <div class="product-desc_info">
                    <div class="rating-box">
                        <ul>
                            <li><i class="ion-android-star"></i></li>
                            <li><i class="ion-android-star"></i></li>
                            <li><i class="ion-android-star"></i></li>
                            <li class="silver-color"><i class="ion-android-star"></i></li>
                            <li class="silver-color"><i class="ion-android-star"></i></li>
                        </ul>
                    </div>

                    <h6>
                        <a class="product-name" href="product-details.php?id=<?= $p['id'] ?>">
                            <?= $p['product_name'] ?>
                        </a>
                    </h6>

                    <?php
$oldPrice = $p['price'];
$newPrice = $oldPrice + ($oldPrice * 0.10); // 10% hike
?>

<div class="price-box">
    <span class="new-price">$<?= number_format($newPrice, 2) ?></span>
    <span class="old-price">$<?= number_format($oldPrice, 2) ?></span>
</div>

                </div>
            </div>

        </div>
    </div>
</div>
<?php } ?>

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

        <!-- krb's Best Selling Product Area End Here -->

        <!-- Begin Featured Categories Area -->
        <div class="featured-categories_area">
            <div class="container-fluid">
                <div class="section-title_area">
                    <span>Top Featured Collections</span>
                    <h3>Featured Categories</h3>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="featured-categories_slider krb-slick-slider slider-navigation_style-1"
                            data-slick-options='{
                        "slidesToShow": 4,
                        "spaceBetween": 30,
                        "arrows" : true,
                        "autoplay": true,
                        "autoplaySpeed": 2000
                       }' data-slick-responsive='[
                                             {"breakpoint":1599, "settings": {"slidesToShow": 3}},
                                             {"breakpoint":1200, "settings": {"slidesToShow": 2}},
                                             {"breakpoint":768, "settings": {"slidesToShow": 1}}
                                         ]'>
          <?php
$categories = mysqli_query($conn,"SELECT * FROM masters WHERE type='category' AND status=1 ORDER BY position ASC");

while($c = mysqli_fetch_assoc($categories)){
    $catName = $c['name'];

    // total product count for category
    $countRes = mysqli_query($conn,"
        SELECT COUNT(*) AS total 
        FROM products 
        WHERE categories LIKE '%$catName%'
    ");
    $countRow = mysqli_fetch_assoc($countRes);
    $count = $countRow['total'];

    // get first 8 products
    $products = mysqli_query($conn,"
        SELECT id, product_name, main_image 
        FROM products 
        WHERE categories LIKE '%$catName%' 
        ORDER BY position ASC 
        LIMIT 8
    ");

    // get first product image for category image
    $firstProduct = mysqli_fetch_assoc($products);
    if(!$firstProduct) continue; // skip empty categories

    $catImage = $firstProduct['main_image'];
?>
<div class="slide-item">
    <div class="slide-inner">

        <!-- CATEGORY IMAGE (FROM PRODUCT MAIN IMAGE) -->
        <div class="slide-image_area">
            <a href="products.php?category[]=<?= urlencode($catName) ?>">
                <img src="uploads/products/<?= $catImage ?>" alt="<?= $catName ?>">
            </a>
        </div>

        <!-- CATEGORY CONTENT -->
        <div class="slide-content_area">
            <h3>
                <a href="products.php?category[]=<?= urlencode($catName) ?>">
                    <?= $catName ?>
                </a>
            </h3>

            <span>(<?= $count ?> Products)</span>

            <!-- PRODUCTS BELOW CATEGORY -->
            <ul class="product-item">
                <?php 
                // show first product already fetched
                $productsList = mysqli_query($conn,"
                    SELECT id, product_name, main_image 
                    FROM products 
                    WHERE categories LIKE '%$catName%' 
                    ORDER BY position ASC 
                    LIMIT 8
                ");

                while($p = mysqli_fetch_assoc($productsList)){ ?>
                <li>
                    <a href="product-details.php?id=<?= $p['id'] ?>">
                       
                        <?= $p['product_name'] ?>
                    </a>
                </li>
                <?php } ?>
            </ul>

            <div class="krb-btn-ps_left">
                <a class="krb-btn" href="products.php?category[]=<?= urlencode($catName) ?>">
                    Read More
                </a>
            </div>
        </div>

    </div>
</div>
<?php } ?>


                           
                           
                           
                           
                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Featured Categories Area End Here -->

        <?php
$brands = mysqli_query($conn,"SELECT * FROM masters 
WHERE type='brand' AND status=1 
ORDER BY position ASC");
?>

<div class="krb-brand_area">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="section-title_area">
                    <span>Top Quality Partner</span>
                    <h3>Shop By Brands</h3>
                </div>

                <div class="brand-slider krb-slick-slider img-hover-effect_area" 
                     data-slick-options='{
                        "slidesToShow": 6,
                        "autoplay": true,
                        "autoplaySpeed": 2000
                     }' 
                     data-slick-responsive='[
                        {"breakpoint":1200, "settings": {"slidesToShow": 5}},
                        {"breakpoint":992, "settings": {"slidesToShow": 3}},
                        {"breakpoint":767, "settings": {"slidesToShow": 3}},
                        {"breakpoint":577, "settings": {"slidesToShow": 2}},
                        {"breakpoint":321, "settings": {"slidesToShow": 1}}
                     ]'>

                    <?php while($b = mysqli_fetch_assoc($brands)){ ?>
                    <div class="slide-item">
                        <div class="inner-slide">
                            <div class="single-product">
                                <a href="products.php?brand[]=<?= urlencode($b['name']) ?>">
                                    <img src="uploads/<?= $b['image'] ?>" 
                                         alt="<?= $b['name'] ?>" 
                                         style="max-height:80px; object-fit:contain;">
                                </a>
                            </div>
                        </div>
                    </div>
                    <?php } ?>

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


        <!-- Begin krb's Shipping Area -->
        <div class="krb-shipping_area py-5">
            <div class="container-fluid py-5">
                <div class="shipping-nav">
                    <div class="inside-row1">
                        <div class="shipping-grid col">
                            <div class="shipping-item">
                                <div class="shipping-icon">
                                    <i class="ion-ios-paperplane-outline"></i>
                                </div>
                                <div class="shipping-content">
                                    <h6>Free Shipping</h6>
                                    <p>Free shipping on all orders</p>
                                </div>
                            </div>
                        </div>
                        <div class="shipping-grid col">
                            <div class="shipping-item">
                                <div class="shipping-icon">
                                    <i class="ion-ios-help-outline"></i>
                                </div>
                                <div class="shipping-content">
                                    <h6>Support 24/7</h6>
                                    <p>Contact us 24 hours a day</p>
                                </div>
                            </div>
                        </div>
                        <div class="shipping-grid col">
                            <div class="shipping-item">
                                <div class="shipping-icon">
                                    <i class="ion-ios-refresh-empty"></i>
                                </div>
                                <div class="shipping-content">
                                    <h6>100% Money Back</h6>
                                    <p>You have 30 days to Return</p>
                                </div>
                            </div>
                        </div>
                        <div class="shipping-grid col">
                            <div class="shipping-item">
                                <div class="shipping-icon">
                                    <i class="ion-ios-undo-outline"></i>
                                </div>
                                <div class="shipping-content">
                                    <h6>90 Days Return</h6>
                                    <p>If goods have problems</p>
                                </div>
                            </div>
                        </div>
                        <div class="shipping-grid col">
                            <div class="shipping-item">
                                <div class="shipping-icon">
                                    <i class="ion-ios-locked-outline"></i>
                                </div>
                                <div class="shipping-content last-child">
                                    <h6>Payment Secure</h6>
                                    <p>We ensure secure payment</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- krb's Shipping Area End Here -->

    
<?php include 'includes/footer.php'?>