How to use nested foreach loop in laravel for populating submenus?

I need to populate the menubar submenus using Laravel. Menus are populating but submenus are not working.

This is my blade file.

@foreach($categories as $c)    
  <li class="nav-item hs-has-mega-menu u-header__nav-item"
           data-event="hover"
           data-animation-in="slideInUp"
           data-animation-out="fadeOut"
           data-position="left">
           <a id="basicMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">{{ $c ['cat_name'] }}</a>

            <div class="hs-mega-menu vmm-tfw u-header__sub-menu" aria-labelledby="basicMegaMenu">
                <div class="row">
                    <div class="row u-header__mega-menu-wrapper">
                         <ul id="sidebarNav1" class="list-unstyled dropdown-list">
                             <!-- Menu List -->
                             @foreach($category->categories as $z)
                                <li>
                                    <a class="dropdown-item" href="#">{{ $z ['cat_name'] }}<span class="text-gray-25 font-size-12 font-weight-normal"> (56)</span>
                                    </a>
                                </li>
                             @endforeach
                             <!-- End Menu List -->
                        </ul>
                   </div>
                 </div>
             </div>
        </li>
  @endforeach

This is my controller.

HomeController

 public function landing_page()
    {
        $categories = Category::all();
     
        $products = Product::get();
        return view ('index',compact('products','categories'));
    }

This is my category model.

class Category extends Model
{
    public function products()
    {
       return $this->hasMany(Product::class);
    }
    
    public function parent()
    {
        return $this->belongsTo(self::class);
    }
    
    public function children()
    {
        return $this->hasMany(self::class, 'parent_id');
    }
}

Can anyone please guide me to sort out this?

Answer

try this 1st get all ParentCatrgory then on loop u can call single ParentCatrgory childs

HomeController

public function landing_page()
{
    $categories = Category::where('parent_id',0)->with('children')->get(); // all parent category
    
    $products = Product::get();
    return view ('index',compact('products','categories'));
}

@foreach($categories as $category)    
  <li class="nav-item hs-has-mega-menu u-header__nav-item"
           data-event="hover"
           data-animation-in="slideInUp"
           data-animation-out="fadeOut"
           data-position="left">
           <a id="basicMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">{{ $category['cat_name'] }}</a>

            <div class="hs-mega-menu vmm-tfw u-header__sub-menu" aria-labelledby="basicMegaMenu">
                <div class="row">
                    <div class="row u-header__mega-menu-wrapper">
                         <ul id="sidebarNav1" class="list-unstyled dropdown-list">
                             <!-- Menu List -->
                             @foreach($category->children as $childrenCategory)
                                <li>
                                    <a class="dropdown-item" href="#">{{ $childrenCategory['cat_name'] }}<span class="text-gray-25 font-size-12 font-weight-normal"> (56)</span>
                                    </a>
                                </li>
                             @endforeach
                             <!-- End Menu List -->
                        </ul>
                   </div>
                 </div>
             </div>
        </li>
  @endforeach