@foreach ($menus as $menu)
    {{-- Services menu with nested services list --}}
    @if ($menu->isServicesMenu && $menu->headerServices && $menu->headerServices->isNotEmpty())
        <li class="nav-item dropdown">
            <a class="nav-link d-flex align-items-center justify-content-between dropdown-toggle-btn" role="button"
                data-bs-toggle="dropdown" aria-expanded="false">
                {{ $menu->name ?? 'Services' }}
                <i class="fa-solid fa-angle-right ms-2"></i>
            </a>

            <ul class="dropdown-menu border-0 shadow">
                @foreach ($menu->headerServices as $service)
                    <li class="dropdown-submenu">
                        <a class="dropdown-item d-flex align-items-center justify-content-between text-wrap"
                            href="{{ $service->link }}">
                            {{ $service->name }}
                            <i class="fa-solid fa-angle-right ms-2"></i>
                        </a>

                        @if ($service->relationLoaded('children') && $service->children && $service->children->isNotEmpty())
                            <ul class="dropdown-menu border-0 shadow">
                                @foreach ($service->children as $child)
                                    <li>
                                        <a class="dropdown-item text-wrap" href="{{ $child->link }}">
                                            {{ $child->name }}
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </li>
                @endforeach

                <li>
                    <hr class="dropdown-divider" />
                </li>
                <li>
                    <a class="dropdown-item fw-medium" href="{{ Path::AppUrl('services') }}">
                        {{ __('website.view_all_services') }}
                    </a>
                </li>
            </ul>
        </li>

        {{-- Menu with children (normal submenu) --}}
    @elseif ($menu->relationLoaded('children') && $menu->children && $menu->children->isNotEmpty())
        <li class="nav-item dropdown">
            <a class="nav-link d-flex align-items-center justify-content-between" role="button" data-bs-toggle="dropdown"
                aria-expanded="false">
                {{ $menu->name }}
                <i class="fa-solid fa-angle-right ms-2"></i>
            </a>
            <ul class="dropdown-menu border-0 shadow">
                @foreach ($menu->children as $child)
                    <li>
                        <a class="dropdown-item" href="{{ $child->link }}">{{ $child->name }}</a>
                    </li>
                @endforeach
            </ul>
        </li>

        {{-- Simple link menu item --}}
    @else
        <li class="nav-item">
            <a class="nav-link" href="{{ $menu->link }}">{{ $menu->name }}</a>
        </li>
    @endif
@endforeach