<section>
   <div class="container">
      <div class="row">
         <div class="india-lead">
            <h1 class="india-lead-heading">Top Leading Coupons &amp; Deals Marketplace</h1>
         </div>
      </div>
   </div>
</section>
<?php
$sqlc = "SELECT * FROM banner_master WHERE slider_type='discount_banner' AND activestatus='1' ORDER BY rowId ASC";
$myq = $conn->query($sqlc);
$mydar = $myq->fetchAll();

$rows_fou = $myq->rowCount();
?>

<section class="bg-primary-gradient py-4">
    <div class="container">
        <div class="row">
            <div class="bottom-line">
                <h2 class="h5 mb-4">Discounts Offers of the Day</h2>
            </div>
        </div>
        <!--Popular Stores Section Begin-->
        <div class="row align-items-center">
            <div class="col-md-12">
                <!-- Carousel Begin -->
                <div id="popularoffer" class="carousel slide" data-bs-ride="carousel">
                    <!-- Indicators/dots -->
                    <div class="carousel-indicators">
                        <?php for ($i = 0; $i < ceil(count($mydar) / 3); $i++) : ?>
                            <button type="button" data-bs-target="#popularoffer" data-bs-slide-to="<?= $i ?>" <?= ($i === 0) ? 'class="active"' : '' ?>></button>
                        <?php endfor; ?>
                    </div>
                    <!-- The slideshow/carousel -->
                    <div class="carousel-inner">
                        <?php
                        $loop_count = 0; // Initialize loop count

                        foreach ($mydar as $rowcon) {
                            $rowId = $rowcon['rowId'];
                            $banner_path = $rowcon['banner_path'];
                            $activestatus = $rowcon['activestatus'];
                            $banner = $rowcon['banner'];
                            $title = $rowcon['title'];
                            $activestatus_ch = ($banner == 1) ? 'active' : '';

                            if ($loop_count % 3 == 0) {
                                echo '<div class="carousel-item ' . $activestatus_ch . '"><div class="row">';
                            }
                        ?>
                            <!--col-4 col-lg-4 Begin-->
                            <div class="col-4 col-lg-4 col-sm-12">
                                <a class="text-decoration-none" href="./discount-off/<?= urlencode($rowId) ?>" target="_blank">
                                    <div class="popular-offer cursor-pointer">
                                        <article class="card border-0">
                                            <div class="position-relative">
                                                <img src="<?= $banner_path ?>" alt="<?= $title ?>" title="<?= $title ?>" class="img-fluid card-img-top">
                                            </div>
                                            <div class="card-body">
                                                <div class="row align-items-baseline">
                                                    <div class="col-md-12">
                                                        <h3 class="h6 mb-2 fw-bold text-truncate">
                                                            <?= $title ?>
                                                        </h3>
                                                    </div>
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                </a>
                            </div>
                            <!--col-4 col-lg-4 End-->

                        <?php
                            if ($loop_count % 3 == 2 || $loop_count == count($mydar) - 1) {
                                echo '</div></div>';
                            }

                            $loop_count++;
                        }
                        ?>
                    </div>
                    <!-- Left and right controls/icons -->
                    <button class="carousel-control-prev" type="button" data-bs-target="#popularoffer" data-bs-slide="prev">
                        <span class="carousel-box-left"><span class="carousel-control-prev-icon"></span></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#popularoffer" data-bs-slide="next">
                        <span class="carousel-box-right"><span class="carousel-control-next-icon"></span></span>
                    </button>
                </div>
                <!--Carousal End-->
            </div>
        </div>
        <!--Popular Stores Section End-->
    </div>
</section>
