<div class="header-category-menu" style="float:left;">
    <ul class="mega">
        <style>
            .pnc {
                position: absolute;
                right: 5px;
                font-size: 22px;
                top: 0;
                border-left: 1px solid gainsboro;
                padding: 10px 10px;
            }

            @media(max-width:550px) {
                .pro ul {
                    background: #f1f1f1 !important;
                }

                .pro ul li img {
                    display: block !important;
                }

                .pro ul li {
                    display: inline-block !important;
                    text-align: center;
                    margin: 1px;
                    padding: 5px;
                    border-radius: 5px;
                }

                .f-li {
                    background: #f1f1f1 !important;
                    opacity: 0.8;
                }

                .f-li.active {
                    background: white !important
                }
            }
        </style>
        <?php $__currentLoopData = \App\Models\Category::where('status',1)->orderBy('pos','asc')->get(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
        <li class="f-li">
            <?php if($category->sub_categories->count() > 0): ?>
            <a href="javascript:void(0)">

                <?php else: ?>
                <a href="<?php echo e(route('category.product',$category->slug)); ?>">
                    <?php endif; ?>
                    <img style="width: 22px;height: 22px;margin-right: 10px;display: inline-block;"
                        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')); ?>';"><?php echo e($category->name); ?></a>
                <?php if($category->sub_categories->count() > 0): ?>
                <ul class="pro">
                    <?php $__currentLoopData = $category->sub_categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $sub_category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li>
                        <?php if($sub_category->miniCategory->count() > 0): ?>
                        <a href="javascript:void(0)" style="padding:15px !important;position:relative">
                            <i class="icon-right icofont icofont-simple-down pnc"></i>
                            <?php else: ?>
                            <a style="padding:15px !important"
                                href="<?php echo e(route('subCategory.product', $sub_category->slug)); ?>">
                                <?php endif; ?>

                                <?php echo e($sub_category->name); ?>

                            </a>
                            <?php if($sub_category->miniCategory->count() > 0): ?>

                            <ul class="sub-cat scat" style="background: #dcdcdc;">
                                <?php $__currentLoopData = $sub_category->miniCategory; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $miniCategory): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                <li>
                                    <?php if($miniCategory->extraCategory->count() > 0): ?>
                                    <a href="javascript:void(0)">
                                        <?php else: ?>
                                        <a href="<?php echo e(route('miniCategory.product', $miniCategory->slug)); ?>">
                                            <?php endif; ?>

                                            <img style="width: 22px;height: 22px;margin-right: 10px;display: inline-block;"
                                                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($miniCategory->name); ?>"
                                                onerror="this.onerror=null; this.src='<?php echo e(asset('/icon/no-img-cat.png')); ?>';">
                                            <?php echo e($miniCategory->name); ?>

                                        </a>
                                        <?php if($miniCategory->extraCategory->count() > 0): ?>
                                        <ul class="sub-cat mcat">
                                            <p class="cback"><span id="sub-close"><?php echo e($category->name); ?>/
                                                    <?php echo e($sub_category->name); ?></span></p>
                                            <?php $__currentLoopData = $miniCategory->extraCategory; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $extraCategory): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <li><a href="<?php echo e(route('extraCategory.product', $extraCategory->slug)); ?>">
                                                    <img style="width: 22px;height: 22px;margin-right: 10px;display: inline-block;"
                                                        src="<?php if(file_exists(public_path() . '/uploads/extra-category/'.$category->cover_photo)): ?><?php echo e(asset('uploads/extra-category/'.$category->cover_photo)); ?><?php else: ?><?php echo e(asset('/icon/no-img-cat.png')); ?><?php endif; ?>"
                                                        alt="<?php echo e($extraCategory->name); ?>"
                                                        onerror="this.onerror=null; this.src='<?php echo e(asset('/icon/no-img-cat.png')); ?>';">
                                                    <?php echo e($extraCategory->name); ?>

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

    </ul>

    <style>
        .mo-f-category {
            position: absolute;
            top: 0 !important;
            width: 80% !important;
            background: transparent !important;
            left: 90px;
            z-index: 99;
            text-align: left;
        }

        .shop-category.tf .cat-row .cat-item {
            width: 30%;
            display: inline-block !important;
            text-align: center;
            background: #fff;
            text-align: center;
            padding: 15px 0;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            margin: 1% 1% 0 0;
            border-radius: 5px;
            text-decoration: none;
            float: none
        }

        .cvc {
            padding: 10px;
            text-align: left;
            color: black;
            border-bottom: 1px solid gainsboro !important;
            display: block;
        }
    </style>
    <div class="shop-category mo-f-category tf" style="padding-bottom: 20px;text-align: center;">
        <div class="" style="padding-right:10px">
            <div class="cat-rows">
                <?php $__currentLoopData = App\Models\SubCategory::where('status', true)->inRandomOrder()->take(21)->get(); $__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 cvc">
                    <div class="">
                        <?php echo e($category->name); ?>

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

    <style>
        .submenu:hover ul {
            display: block;
            left: 0;
            top: 45px;
            border: none;
        }
        @media(max-width: 767px) {
            .sub-cat{
                display: grid;
                grid-template-columns: repeat(3, 1fr);
            }
            .sub-cat>li>a{
                display: flex !important;
                align-items: center;
                flex-direction: column;
            }
            header .main-menu .nav-bar .header-category-menu ul li:last-child a{
                border-bottom: none !important;
            }
        }
        @media(max-width: 1000px) {
            .authpro {
                text-align: center;
                display: block;
                border-bottom: 1px solid gainsboro;
                padding-top: 15px;
            }
        }
    </style>

    <script>
        (function ($, window) {
            $(document).ready(function () {
                // mobile-menu-show


                // submenu arrow-icon-add-auto
                $('ul').parent('li').prepend(
                    '<div style="position: absolute;right: 0;top: 10px;color: #666;" class="aroow2 icon-right icofont icofont-simple-right"></div>'
                    );


                $('ul.mega li.f-li').unbind('click').click(function (e) {
                    // submenu-dropdown
                    if ($('ul.mega li.f-li').children('ul').show()) {
                        $('ul.mega li.f-li').children('ul').hide();
                        $('ul.mega li.f-li').removeClass('active');
                    }
                    $('.mo-f-category').hide();
                    $(this).children('ul').toggle();
                    $(this).addClass('active')
                    e.stopPropagation();
                    // e.preventDefault();
                });
                $('ul.mega li.f-li ul li').unbind('click').click(function (e) {
                    // submenu-dropdown
                    $(this).children('ul').toggle();
                    e.stopPropagation();
                    // e.preventDefault();
                });


            });

        })(jQuery, window);
    </script><?php /**PATH /home/apleusbj/public_html/resources/views/components/superCategoryComponent.blade.php ENDPATH**/ ?>