<section class="best-mobile-section new-bg">
    <div class="container">
        <div class="row g-3">
            <div class="col-12 col-lg-10 col-xxl-8 mx-auto">
                <div class="best-mobile-content text-center">
                    <div class="best-mobile-div">
                        <h1 class="best-mobile-title"> YahLove <span class="showcase-span"> Products</span>
                        </h1>
                        <p class="best-mobile-para">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="new-bg py-5">
    <div class="container">
        <div class="row">
            <!-- sidebar -->
            <div class="col-lg-4">
                <!-- Toggle button -->
                <button class="btn filter-btn mb-3 w-100 d-lg-none collapsed" id="filterButton" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span>Show filter</span>
                </button>
                <!-- Collapsible wrapper -->
                <div class="collapse card d-lg-block mb-5" id="navbarSupportedContent">
                    <div class="accordion" id="accordionPanelsStayOpenExample">
                        <?php
                          foreach($categories as $catid => $category) {
                            $subcategories = $category['subcategories'];
                        ?>
                        <div class="accordion-item">
                            <h5 class="accordion-header" id="headingOne">
                                <a class="accordion-header" href="<?=base_url('site/products/1/'.$catid)?>">
                                    <?=$category['title']?>
                                </a>
                            </h5>
                            <?php
                              if(count($subcategories)) {
                            ?>
                            <div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" style="">
                                <div class="accordion-body">
                                    <ul class="list-unstyled">
                                        <?php
                                          foreach($subcategories as $subcatid => $subcategory) {
                                        ?>
                                        <li><a href="<?=base_url('site/products/1/'.$catid."/".$subcatid)?>" class="text-dark active"><?=$subcategory['title']?></a></li>
                                        <?php
                                          }
                                        ?>
                                    </ul>
                                </div>
                            </div>
                            <?php
                              }
                            ?>
                        </div>
                        <?php
                          }
                        ?>
                    </div>
                </div>
            </div>
            <!-- sidebar -->
            <!-- content -->
            <div class="col-lg-8">

                <div class="row">
                    <?php
                      foreach($products as $id => $product) {
                    ?>
                    <div class="col-lg-6 col-md-6 col-sm-6 d-flex">
                        <div class="card w-100 my-2 shadow-2-strong">
                            <a href="<?=base_url()?>site/productdetails/<?=$id?>">
                                <img src="<?=$product['url']?>" class="card-img-top">
                            </a>
                            <div class="card-body d-flex flex-column">
                                <h4 class="me-1 name-title"><?=$product['name']?></h4>
                                <h5 class="mb-1 me-1 card-title price-title">$<?=$product['price']?></h5>
                                <p class="card-text"><?=$product['shortDescription']?></p>
                                <div class="d-flex align-items-end pt-3 px-0 pb-0 mt-auto">
                                    <a href="<?=base_url()?>site/addtocart/<?=$id?>">
                                        <button class="read-more-btn buy mt-0">Add To Cart</button>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <?php
                      }
                    ?>

                </div>
                <!-- Pagination -->
                <nav aria-label="Page navigation example" class="d-flex justify-content-center mt-5">
                    <ul class="pagination">
                        <?php
                        
                        if($page > 1) {
                            $previousPage = $page -1; 
                    ?>
                        <li class="page-item">
                            <a class="page-link" href="<?=base_url()?>site/products/1" aria-label="First">
                                << </a>
                        </li>

                        <li class="page-item">
                            <a class="page-link" href="<?=base_url()?>site/products/<?=$previousPage?>" aria-label="Previous">
                                < </a>
                        </li>

                        <?php
                        }
                    ?>
                        <?php
                        for($i=1; $i<=$totalPages; $i++) {
                    ?>
                        <li class="page-item<?=$i==$page?' active':''?>"><a class="page-link" href="<?=base_url()?>site/products/<?=$i?>"><?=$i?></a></li>
                        <?php
                        }
                    ?>
                        <?php
                        if($page < $totalPages) {
                            $nextPage = $page + 1; 
                    ?>
                        <li class="page-item">
                            <a class="page-link" href="<?=base_url()?>site/products/<?=$nextPage?>">
                                >
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="<?=base_url()?>site/products/<?=$totalPages?>">
                                >>
                            </a>
                        </li>
                        <?php
                        }
                    ?>
                    </ul>
                </nav>
                <!-- Pagination -->
            </div>




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