<?php $__env->startSection('content'); ?>

<section class="page-header d-flex align-items-center text-white"
         style="background: url('<?php echo e(asset('frontend/assets/images/he-1.png')); ?>') no-repeat center center; background-size: cover;">
    <div class="container text-center mt-5">
        <h1 class="fw-bold">Children’s Emotional & Bedtime Stories</h1>

        <nav aria-label="breadcrumb" class="mt-1">
            <ol class="breadcrumb justify-content-center bg-transparent mb-0">
                <li class="breadcrumb-item">
                    <a href="<?php echo e(route('index')); ?>" class="text-white text-decoration-none">
                        Home
                    </a>
                </li>
                <li class="breadcrumb-item active text-white" aria-current="page">
                    Kids’ Bedtime
                </li>
            </ol>
        </nav>
    </div>
</section>

    <section id="popular-books" class="bookshelf">
		<div class="container">
			<div class="row">
				<div class="col-md-12">

					<div class="section-header align-center pt-5">

						<h2 class="section-title">Kids’ Bedtime Stories</h2>
					</div>

                    <form method="GET" action="<?php echo e(route('public-popular')); ?>" class="mb-5 search-bar">
                        <div class="input-group">
                            <input type="text" name="search" class="form-control"
                                placeholder="Search by title..."
                                value="<?php echo e(request('search')); ?>">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-search me-1"></i> Search
                            </button>
                        </div>
                    </form>

					<ul class="tabs">

                        <!-- All Tab -->
                        <li data-tab-target="#all-genre" class="active tab">
                            All book
                        </li>


                        <!-- Dynamic Category Tabs (Only First 3) -->
                        <?php $__currentLoopData = $catagories->take(3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $catagory): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li data-tab-target="#category-<?php echo e($catagory->id); ?>" class="tab">
                                <?php echo e($catagory->title); ?>

                            </li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>


                        <?php if($catagories->count() > 3): ?>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle px-4 py-2 mx-2 bg-light shadow-sm"
                                style="border-radius:50px;"
                                data-bs-toggle="dropdown"
                                href="#"
                                role="button">
                                    More
                                </a>

                                <ul class="dropdown-menu shadow border-0">
                                    <?php $__currentLoopData = $catagories->skip(3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $catagory): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <li>
                                            <a class="dropdown-item"
                                            data-tab-target="#category-<?php echo e($catagory->id); ?>">
                                                <?php echo e($catagory->title); ?>

                                            </a>
                                        </li>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                </ul>
                            </li>
                        <?php endif; ?>

                    </ul>
                    <div class="tab-content">

                        
                        <div id="all-genre" data-tab-content class="active">
                            <div class="row">
                                <?php $__currentLoopData = $populars; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $popular): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                                    <div class="col-md-4">
                                        <a href="<?php echo e($popular->amazon_link); ?>" class="text-decoration-none text-dark">
                                            <div class="product-item">
                                                <figure class="product-style">
                                                    <img src="<?php echo e(asset($popular->image)); ?>"
                                                        alt="<?php echo e($popular->alt_text); ?>"
                                                        class="product-item">
                                                </figure>
                                                 </a>

                                                <figcaption>
                                                    <h3><?php echo e($popular->title); ?></h3>
                                                    <span><?php echo e($popular->author); ?></span>
                                                    
                                                </figcaption>
                                            </div>

                                    </div>

                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                            </div>
                        </div>


                        
                        <?php $__currentLoopData = $catagories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $catagory): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                            <div id="category-<?php echo e($catagory->id); ?>" data-tab-content>
                                <div class="row">

                                    <?php $__currentLoopData = $populars->where('category_id', $catagory->id); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $popular): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                                        <div class="col-md-4">
                                            <a href="<?php echo e($popular->amazon_link); ?>" class="text-decoration-none text-dark">
                                                <div class="product-item">
                                                    <figure class="product-style">
                                                        <img src="<?php echo e(asset($popular->image)); ?>"
                                                            alt="<?php echo e($popular->alt_text); ?>"
                                                            class="product-item">
                                                    </figure>
                                                </a>

                                                    <figcaption>
                                                        <h3><?php echo e($popular->title); ?></h3>
                                                        <span><?php echo e($popular->author); ?></span>
                                                        
                                                    </figcaption>
                                                </div>

                                        </div>

                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                                </div>
                            </div>

                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                    </div>

				</div>

			</div>
		</div>
	</section>
      <div class="mt-3 p-5">
                    <?php echo e($populars->appends(request()->query())->links()); ?>

            </div>



<?php $__env->stopSection(); ?>

<?php echo $__env->make('frontend.layouts', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH D:\laragon\www\bookFire\resources\views/frontend/pages/popular.blade.php ENDPATH**/ ?>