<div class="shop-category oc" style="text-align:center;">
    <div class="container">
        
        <h3 class="title col-md-12 text-left" style="margin-bottom:0;"><span><?php echo e(setting('TOP_CAT') ?? 'Top Categories'); ?></span>
            <button id="cat_row_more">View All</button>
        </h3>
        
        
        <div id="cat_row" class="cat-row cat_row_hide">
            <?php $__currentLoopData = $categories_f; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e(route('category.product', $category->slug)); ?>" class="cat-item">
                    
                        <div class="thumbnail">
                            <img src="<?php if(file_exists(public_path() . '/uploads/category/' . $category->cover_photo)): ?><?php echo e(asset('uploads/category/' . $category->cover_photo)); ?><?php else: ?><?php echo e(asset('/icon/no-img-cat.png')); ?><?php endif; ?>"
                                alt="<?php echo e($category->name); ?>"
                                onerror="this.onerror=null; this.src='<?php echo e(asset('/icon/no-img-cat.png')); ?>';">
                        </div>
                        <h3><?php echo e($category->name); ?></h3>
                    
                </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php $__currentLoopData = $mini_f; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e(route('miniCategory.product', $category->slug)); ?>" class="cat-item">
                    
                        <div class="thumbnail">
                            <img src="<?php if(file_exists(public_path() . '/uploads/mini-category/' . $category->cover_photo)): ?><?php echo e(asset('uploads/mini-category/' . $category->cover_photo)); ?><?php else: ?><?php echo e(asset('/icon/no-img-cat.png')); ?><?php endif; ?>"
                                alt="<?php echo e($category->name); ?>"
                                onerror="this.onerror=null; this.src='<?php echo e(asset('/icon/no-img-cat.png')); ?>';">
                        </div>
                        <h3><?php echo e($category->name); ?></h3>
                    
                </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            <?php $__currentLoopData = $sub_f; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href="<?php echo e(route('subCategory.product', $category->slug)); ?>" class="cat-item">
                    
                        <div class="thumbnail">
                            <img src="<?php if(file_exists(public_path() . '/uploads/sub category/' . $category->cover_photo)): ?><?php echo e(asset('uploads/sub category/' . $category->cover_photo)); ?><?php else: ?><?php echo e(asset('/icon/no-img-cat.png')); ?><?php endif; ?>"
                                alt="<?php echo e($category->name); ?>"
                                onerror="this.onerror=null; this.src='<?php echo e(asset('/icon/no-img-cat.png')); ?>';">
                        </div>
                        <h3><?php echo e($category->name); ?></h3>
                    
                </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>


        <?php $__env->startPush('css'); ?>
            <style>
                #cat_row {
                    position: relative;
                    /* margin-top: 1.2rem; */
                    /* margin-bottom: 1.2rem; */
                    margin: .8rem 0;
                    display: grid;
                    gap: 0.5rem; /* Dynamicable */
                    grid-template-columns: repeat(<?php echo e(setting('default_home_top_cat_row_count_desktop') ?? 7); ?>, minmax(auto, 1fr));
                }
                .cat_row_hide {
                    height: <?php echo e(setting('home_top_cat_section_height') ?? '270px'); ?> !important; /* Dynamicable */
                    overflow: hidden;
                }
                @media (max-width: 767px) {
                    #cat_row {
                        grid-template-columns: repeat(<?php echo e(setting('default_home_top_cat_row_count_phone') ?? 3); ?>, minmax(auto, 1fr));
                    }
                    #cat_row.cat_row_hide {
                        height: <?php echo e(setting('home_top_cat_section_height_mobile') ?? '245px'); ?> !important; /* Dynamicable */
                    }
                }
                #cat_row .cat-item{
                    /* all:unset; */
                    width: 100%;
                    height: fit-content;
                }
                .shop-category .cat-row .cat-item img {
                    height: 70px; /* Dynamically changeable */
                    padding-bottom: 0;
                }
                .shop-category .cat-row .cat-item h3 {
                    padding-top: .9rem;
                }
                
                #cat_row_more {
                    float: right;
                    font-size: 16px;
                    color: #007bff;
                    text-decoration: none;
                    background-color: transparent;
                    outline: none;
                }
                .shop-brand .title {
                    text-align: left;
                }
            </style>
        <?php $__env->stopPush(); ?>
        <?php $__env->startPush('internal_js'); ?>
            $(document).ready(function(){
            $('#cat_row_more').click(function(){
            $('#cat_row').toggleClass('cat_row_hide');
            });
            });
        <?php $__env->stopPush(); ?>

    </div>
</div><?php /**PATH /home/apleusbj/shopping.apleefix.com/resources/views/frontend/partial/index/top_categories.blade.php ENDPATH**/ ?>