@foreach ($common_categories as $category)
    @php
        $cat_level = 1;
    @endphp
    @if ($category->activeChilds->count() > 0)
        @php
            $cat_level = 1;
        @endphp
        @foreach ($category->activeChilds as $hassubchild)
            @if ($hassubchild->activeChilds->count() > 0)
                @php
                    $cat_level = 2;
                @endphp
            @endif
        @endforeach
    @endif
    @if ($category->parent_id == 0)
        <span>

            @if ($category->activeChilds->count() > 0)
                <div class="header-nav-item {{ $category->activeChilds->count() > 0 ? 'dropdown-toggle' : '' }} "
                    data-bs-toggle="dropdown">{{ $category->name }}</div>
                <div class="dropdown-menu megamenu p-2 {{ $cat_level == 2 ? 'two-level' : 'one-level' }}">
                    <div class="row">
                        <div class="col">
                            @foreach ($category->activeChilds as $sub)
                                <li id="nav-main-{{ $sub->id }}" class="nav-main" data-id="{{ $sub->id }}">
                                    <a class="dropdown-item" href="#">{{ $sub['name'] }}
                                        <i class="bo bi-arrow-right"></i>
                                    </a>
                                </li>
                            @endforeach
                        </div>
                        @if ($sub->activeChilds->count() > 0)
                            <div class="col">
                                <div id="nav-main-body-{{ $sub->id }}">
                                    @foreach ($sub->activeChilds as $subchild)
                                        <li><a class="dropdown-item" href="#">{{ $subchild['name'] }}
                                                <i class="bo bi-arrow-right"></i></a></li>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <div class="d-none">
                            <div id="nav-main-info-1" class="pt-2 pe-2">
                                <img src="/assets/img/demo/methanol.png" alt="img" class="navbar-content-img">
                                <h1 class="navbar-content-title">Methanol</h1>
                                <p class="navbar-content-p">
                                    Methanol is an organic chemical compound and the
                                    simplest aliphatic alcohol, with the chemical formula
                                    CH₃OH. It is a light, volatile, colorless and flammable
                                    liquid with a distinctive alcoholic odour similar to that
                                    of ethanol
                                </p>
                            </div>
                            <div id="nav-main-info-2" class="pt-2 pe-2">
                                <img src="/assets/img/demo/methanol.png" alt="img" class="navbar-content-img">
                                <h1 class="navbar-content-title">Ethanol</h1>
                                <p class="navbar-content-p">
                                    Ethanol is an organic chemical compound and the
                                    simplest aliphatic alcohol, with the chemical formula
                                    CH₃OH. It is a light, volatile, colorless and flammable
                                    liquid with a distinctive alcoholic odour similar to that
                                    of ethanol
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            @else
                <div class="dropdown-item header-nav-item" type="button" data-bs-toggle="dropdown">
                    {{ $category['name'] }}
                </div>
            @endif
        </span>
    @endif
@endforeach