<?php $__env->startSection('content'); ?>
<style>
    .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        transition: all 0.3s ease-in-out;
    }

   

    .carousel-item img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .custom-btn {
        background-color: #E43D12;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .custom-btn:hover {
        background-color: #c03410;
    }

    .page-link {
        color: #e43d12 !important;
    }

    .active>.page-link,
    .page-link.active {
        background-color: #e43d12 !important;
        border-color: #e43d12 !important;
        color: #fff !important;
    }
.nav-l{
    background: #fcece7;
    border-radius: 5px;
    padding: 1px;
    
}
.nav-l a.nav-link {
    padding: 4px 0px;
    font-size: 17px;
    text-transform: capitalize;
}
.con-fix{
    padding: 30px 37px 30px !important;
}
.con-fix2{
    padding: 0px 37px 30px !important;
}
.row {
    margin: 0;
}

button.btn.btn-primary {
    height: 38px;
    background: #e43d12;
    border: none;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        gap: 10px;
    }
}
    @media (max-width: 767px) {
        .custom-btn {
            padding: 8px 16px;
            font-size: 14px;
        }

        .col-4 {
            flex: 0 0 100%;
            max-width: 100%;
            margin-bottom: 15px;
        }
    }
    @media (max-width: 576px) {
    .carousel-caption-custom.xx {
        padding: 15px;
        bottom: 60%;
   
    }
    .con-fix2{
    padding: 0px 10px 30px !important;
}
    
}
</style>


<?php if(isset($latestBlogs) && count($latestBlogs) > 0): ?>
<section class="carousel-section">
    <div id="imageCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <?php $__currentLoopData = $latestBlogs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $blog): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <button type="button" data-bs-target="#imageCarousel" data-bs-slide-to="<?php echo e($index); ?>" 
                class="<?php echo e($index === 0 ? 'active' : ''); ?>" aria-label="Slide <?php echo e($index + 1); ?>"></button>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        <div class="carousel-inner">
            <?php $__currentLoopData = $latestBlogs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $blog): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="carousel-item <?php echo e($key === 0 ? 'active' : ''); ?>">
                <img src="<?php echo e(asset('storage/' .$blog->image ?? 'default-image.jpg')); ?>" alt="<?php echo e($blog->title); ?>">
                <div class="carousel-caption-custom">
                    <h2 class="mb-4"><?php echo e($blog->title); ?></h2>
                    <a href="<?php echo e(route('blogsVaritaion', $blog->slug)); ?>" class="custom-btn">Know More</a>
                </div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>
<?php else: ?>
<section class="carousel-section" style="background-image: url('<?php echo e(asset('frontend/Images/categorybanner.jpg')); ?>');
background-size: cover;
background-position: center;
height: 400px;">
    <div class="carousel-caption-custom xx">
        <?php if(request('search')): ?>
        <h2 style="text-transform: uppercase;">Search Results</h2>
   
        <?php elseif(isset($category)): ?>
        <h2 style="text-transform: uppercase;"><?php echo e($category->name); ?></h2>
        <p style="text-transform: capitalize;">
            <?php echo e($category->description); ?>

        </p>
        <?php else: ?>
        <h2 style="text-transform: uppercase;">Coming Soon</h2>
        <p style="text-transform: capitalize;">
            We are working on this section, please check back later.
        <?php endif; ?>
    </div>
</section>
<?php endif; ?>


<?php if(isset($categories) && count($categories) > 0): ?>
<section class="px-1 d-none d-lg-block">
    <nav class="navbar navbar-expand-lg navbar-light con-fix">
        <div class="collapse navbar-collapse justify-content-between" id="navbarNav">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item nav-l">
                    <a class="nav-link active" aria-current="page" href="<?php echo e(route('blogs')); ?>">All</a>
                </li>

                <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <?php if($category->subCategories->count()): ?>
                <li class="nav-item dropdown nav-l">
                    <a class="nav-link dropdown-toggle" href="<?php echo e(route('blogsVaritaion', $category->slug)); ?>">
                        <?php echo e($category->name); ?> +
                    </a>
                    <ul class="dropdown-menu">
                        <?php $__currentLoopData = $category->subCategories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $subCategory): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <li><a class="dropdown-item" href="<?php echo e(route('blogsVaritaion', $subCategory->slug)); ?>"><?php echo e($subCategory->name); ?></a></li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </li>
                <?php else: ?>
                <li class="nav-item nav-l">
                    <a class="nav-link" href="<?php echo e(route('blogsVaritaion', $category->slug)); ?>"><?php echo e($category->name); ?></a>
                </li>
                <?php endif; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </ul>

            <form method="GET" action="<?php echo e(route('blogs')); ?>" class="mb-4">
                <div class="input-group">
                    <input type="text" name="search" class="form-control" placeholder="Search blogs..." value="<?php echo e(request()->input('search')); ?>">
                    <button class="btn btn-primary" type="submit">Search</button>
                </div>
            </form>
            
        </div>
    </nav>
</section>


<?php endif; ?>


<?php if(isset($allBlogs) && count($allBlogs) > 0): ?>
<section class="px-1">
    <form method="GET" action="<?php echo e(route('blogs')); ?>" class="mb-4 d-block d-lg-none px-2 mt-4">
        <div class="input-group">
            <input type="text" name="search" class="form-control" placeholder="Search blogs..." value="<?php echo e(request()->input('search')); ?>">
            <button class="btn btn-primary" type="submit">Search</button>
        </div>
    </form>
    <div class="row con-fix2">
        <?php $__currentLoopData = $allBlogs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $blog): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <div class="col-lg-4 col-md-6 col-sm-12 mb-4 ">
            <a href="<?php echo e(route('blogsVaritaion', $blog->slug)); ?>" style="text-decoration: none;">
                <div class="blog-card">
                    <div class="blog-card-img">
                        <img src="<?php echo e(asset('storage/' . $blog->image)); ?>" alt="<?php echo e($blog->title); ?>">
                    </div>
                    <div class="blog-card-body">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="badge"><?php echo e(strtoupper($blog->topic)); ?></span>
                            <span class="time"><?php echo e($blog->reding_time); ?> mins 🕘</span>
                        </div>
                        <h5 class="blog-card-title"><?php echo e($blog->title); ?></h5>
                    </div>
                </div>
            </a>
        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>
    
        <?php echo e($allBlogs->links()); ?>

    
</section>
<?php endif; ?>




<script>
    document.querySelectorAll('.nav-item.dropdown').forEach(item => {
        item.addEventListener('mouseover', () => item.querySelector('.dropdown-menu')?.classList.add('show'));
        item.addEventListener('mouseleave', () => item.querySelector('.dropdown-menu')?.classList.remove('show'));
    });
</script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('frontend.layout.appLayout', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/html/brandsignages/resources/views/frontend/blogs/index.blade.php ENDPATH**/ ?>