Recursive for all null parent

@extends('frontend.master')

@section('content')
    @php


        function categoryTree($id)
            {
                $data='';
                $all_childs = \App\Models\Category::where('parent_id', $id)->get();
                if(!empty($all_childs))
                {

                    echo "<ul>";
                    foreach ($all_childs as $child)
                    {
                      $innerChild = \App\Models\Category::where('parent_id', $child->id)->get();
                      if($innerChild->count() > 0){

                        echo '<li>';
                            echo  '<a href="#">';
                            echo'<div class="cat-nav-title">' . $child->name.' > </div>';
                            //echo '<div class="cat-nav-icon"> <i class = "fa fa-chevron-right"> </i></div>';
                            echo  '</a>';

                                categoryTree($child->id);

                        echo '</li>';


                      }
                      else{

                        echo "<li> <a href='#'>";
                        echo $child->name .' '. $child->id ;
                        echo "</a></li>";

                        }

                        categoryTree($child->id);
                    }
                    echo "</ul>";
                }

            }

    @endphp
    <!-- main -->
    <main>
        <section class="post-an-ad pt-30 pb-30">
            <div class="container mb-40">
                <div class="section-title text-center pt-30">
                    <h4 class="border-bottom text-capitalize">Post an ad</h4>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="post-ad-sidenav-area">
                            <div id="accordion">
                                <div class="card">
                                    <div class="card-header" id="headingOne">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link collapsed acc-header-btn" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false"
                                                    aria-controls="collapseOne">
                                                <i class="fa fa-folder"></i> Manage My Ads
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
                                        <ul class="my-account-list">
                                            <li><a href="#">All Ads <span class="badge badge-main">10</span></a></li>
                                            <li><a href="#">Current Ads <span class="badge badge-main">08</span></a></li>
                                            <li><a href="#">Expired Ads <span class="badge badge-main">02</span></a></li>
                                            <li><a href="#">Pending Ads <span class="badge badge-main">05</span></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingTwo">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link collapsed acc-header-btn" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false"
                                                    aria-controls="collapseTwo">
                                                <i class="fa fa-bullhorn"></i> Posts Your Ads
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                                        <div class="">
                                            <ul class="acc-sub-ul nav nav-tabs" role="tablist">
                                                <li class="acc-sub-li nav-item">
                                                    <a class="acc-sub-link nav-link" href="#addItemTabLink" role="tab" data-toggle="tab">
                                                        <i class="fa fa-plus"></i> Add New Ad
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingThree">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link collapsed acc-header-btn" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
                                                    aria-controls="collapseThree">
                                                <i class="fa fa-user"></i> My Profile
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                                        <ul class="my-account-list">
                                            <li><a href="#">Item 1</a></li>
                                            <li><a href="#">Item 2</a></li>
                                            <li><a href="#">Item 3</a></li>
                                            <li><a href="#">Item 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingFour">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link collapsed acc-header-btn" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false"
                                                    aria-controls="collapseFour">
                                                <i class="fa fa-users"></i> My Business
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
                                        <ul class="my-account-list">
                                            <li><a href="#">Item 1</a></li>
                                            <li><a href="#">Item 2</a></li>
                                            <li><a href="#">Item 3</a></li>
                                            <li><a href="#">Item 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingFive">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link collapsed acc-header-btn" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false"
                                                    aria-controls="collapseFive">
                                                <i class="fa fa-heart"></i> Favourite
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion">
                                        <ul class="my-account-list">
                                            <li><a href="#">Item 1</a></li>
                                            <li><a href="#">Item 2</a></li>
                                            <li><a href="#">Item 3</a></li>
                                            <li><a href="#">Item 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingSix">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link collapsed acc-header-btn" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false"
                                                    aria-controls="collapseSix">
                                                <i class="fab fa-facebook-messenger"></i> Message
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordion">
                                        <ul class="my-account-list">
                                            <li><a href="#">Item 1</a></li>
                                            <li><a href="#">Item 2</a></li>
                                            <li><a href="#">Item 3</a></li>
                                            <li><a href="#">Item 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingSeven">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link collapsed acc-header-btn" data-toggle="collapse" data-target="#collapseSeven" aria-expanded="false"
                                                    aria-controls="collapseSeven">
                                                <i class="fa fa-envelope"></i> Email
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseSeven" class="collapse" aria-labelledby="headingSeven" data-parent="#accordion">
                                        <ul class="my-account-list">
                                            <li><a href="#">Item 1</a></li>
                                            <li><a href="#">Item 2</a></li>
                                            <li><a href="#">Item 3</a></li>
                                            <li><a href="#">Item 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingEight">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link collapsed acc-header-btn" data-toggle="collapse" data-target="#collapseEight" aria-expanded="false"
                                                    aria-controls="collapseEight">
                                                <i class="fa fa-lock"></i> My Alert
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseEight" class="collapse" aria-labelledby="headingEight" data-parent="#accordion">
                                        <ul class="my-account-list">
                                            <li><a href="#">Item 1</a></li>
                                            <li><a href="#">Item 2</a></li>
                                            <li><a href="#">Item 3</a></li>
                                            <li><a href="#">Item 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingNine">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link collapsed acc-header-btn" data-toggle="collapse" data-target="#collapseNine" aria-expanded="false"
                                                    aria-controls="collapseNine">
                                                <i class="fa fa-chart-line"></i> Report &amp; Voucher
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseNine" class="collapse" aria-labelledby="headingNine" data-parent="#accordion">
                                        <ul class="my-account-list">
                                            <li><a href="#">Item 1</a></li>
                                            <li><a href="#">Item 2</a></li>
                                            <li><a href="#">Item 3</a></li>
                                            <li><a href="#">Item 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="card">
                                    <div class="card-header" id="headingTen">
                                        <h5 class="mb-0">
                                            <button class="btn btn-link collapsed acc-header-btn" data-toggle="collapse" data-target="#collapseTen" aria-expanded="false"
                                                    aria-controls="collapseTen">
                                                <i class="fa fa-comments"></i> Manage My Review
                                            </button>
                                        </h5>
                                    </div>
                                    <div id="collapseTen" class="collapse" aria-labelledby="headingTen" data-parent="#accordion">
                                        <ul class="my-account-list">
                                            <li><a href="#">Item 1</a></li>
                                            <li><a href="#">Item 2</a></li>
                                            <li><a href="#">Item 3</a></li>
                                            <li><a href="#">Item 4</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane fade in" id="addItemTabLink">
                                <div class="menu">
                                    <ul>
                                        @foreach ($parent_categories as $category)
                                            <li>
                                                <a href="#">
                                                    <div class="inner-nav">
                                                        <div class="cat-nav-title">{{$category->name}} orko</div>
                                                        <div class="cat-nav-icon"><i class="fa fa-chevron-right"></i></div>
                                                    </div>
                                                </a>
                                                {{categoryTree($category->id)}}


                                            </li>
                                        @endforeach

                                        <li>
                                            <a href="#">
                                                <div class="inner-nav">
                                                    <div class="cat-nav-title">Motors Bikes</div>
                                                    <div class="cat-nav-icon"><i class="fa fa-chevron-right"></i></div>
                                                </div>
                                            </a>
                                            <ul>
                                                <li><a href="#">
                                                        <div class="inner-nav">
                                                            <div class="cat-nav-title">125cc</div>
                                                            <div class="cat-nav-icon"><i class="fa fa-chevron-right"></i></div>
                                                        </div>
                                                    </a>
                                                    <ul>
                                                        <li><a href="#">Hero</a></li>
                                                        <li><a href="#">Bajaj</a></li>
                                                        <li><a href="#">Yamaha</a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="#">150cc</a></li>
                                                <li><a href="#">200cc</a></li>
                                            </ul>
                                        </li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </main>

    <!-- end main -->
@endsection

@section('after_scripts')
    <script>
        $(document).ready(function () {
            collectorium('.collectorium-js');
        });
    </script>
@stop