@foreach ($items as $item)
    @php
        $children = $item['items'] ?? [];
        $hasChildren = count($children) > 0;
        $active = $item['active'] ?? false;

        $isFaIcon = !empty($item['icon']) && !in_array($item['icon'], ['menu-icon-backend', 'menu-icon-frontend', 'menu-icon-content']);

    @endphp

    @if ($level === 0 && ($item['icon'] ?? '') === 'menu-icon-frontend')
        @continue
    @endif

    @if ($level === 0)
        <li @if($hasChildren) x-data="{ open: @js($active) }" @endif>
            <a href="{{ $hasChildren ? '#' : ($item['url'] ?? '#') }}"
                @if($hasChildren) @click.prevent="open = !open" @endif
                class="menu-item group {{ $active ? 'menu-item-active' : 'menu-item-inactive' }} min-h-[48px] lg:min-h-[auto]">

                @if (($item['icon'] ?? null) === 'menu-icon-backend')
                    <svg class="{{ $active ? 'menu-item-icon-active' : 'menu-item-icon-inactive' }}" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5ZM2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM7 6C6.44772 6 6 6.44772 6 7V17C6 17.5523 6.44772 18 7 18H17C17.5523 18 18 17.5523 18 17V7C18 6.44772 17.5523 6 17 6H7ZM8 12V8H16V12H8ZM8 14H16V16H8V14Z" fill="currentColor" />
                    </svg>
                @elseif (($item['icon'] ?? null) === 'menu-icon-frontend')
                    <svg class="{{ $active ? 'menu-item-icon-active' : 'menu-item-icon-inactive' }}" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM4 12C4 13.2 4.3 14.3 4.8 15.3C5.5 13.9 6.8 12.9 8.4 12.5C8.1 11.9 8 11.2 8 10.5C8 9.1 8.9 7.9 10.2 7.5C9.8 7 9.6 6.5 9.5 5.9C7.5 6.8 6 8.8 6 11C6 11.3 6 11.7 6.1 12C5.2 12.5 4.5 13.2 4 14.1C4 13.4 4 12.7 4 12ZM12 20C13.3 20 14.5 19.6 15.5 18.9C15.4 18.3 15 17.7 14.2 17.4C13.5 17.1 12.6 17 11.6 17.3C10.4 17.6 9.6 18.5 9.4 19.5C10.2 19.8 11.1 20 12 20ZM12 4C9.4 4 7.1 5.4 5.7 7.5C6.2 7.9 7 8.2 7.9 8C8.6 7.8 9.1 7.1 9.2 6.3C9.3 5.6 9 5 8.6 4.6C9.7 4.2 10.8 4 12 4ZM15.2 5.1C15.3 5.5 15.4 6 15.4 6.5C15.4 7.6 14.9 8.6 14 9.2C13.7 9.4 13.4 9.7 13.2 10.1C12.9 10.7 13 11.4 13.5 11.9C13.9 12.3 14.5 12.4 15.1 12.3C16.2 12.1 17.3 12.8 17.8 13.8C18.3 13 18.6 12.1 18.8 11.1C19 10.1 19 9 18.9 8C17.9 6.5 16.2 5.5 14.4 5.1C14.6 5.1 14.9 5.1 15.2 5.1ZM12 14C10.4 14 9.1 15.1 8.8 16.6C9 16.4 9.4 16.2 9.9 16.1C10.8 15.9 11.8 16 12.6 16.4C13.3 16.7 13.8 17.2 14 17.9C15.2 17 16 15.6 16 14C16 13.9 16 13.7 16 13.6C15.6 13.2 15 13 14.4 13.1C13.5 13.3 12.7 13.6 12 14Z" fill="currentColor" />
                    </svg>
                @elseif (($item['icon'] ?? null) === 'menu-icon-content')
                    <svg class="{{ $active ? 'menu-item-icon-active' : 'menu-item-icon-inactive' }}" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4 5C4 4.44772 4.44772 4 5 4H9.58579C9.851 4 10.1054 4.10536 10.2929 4.29289L12 6H19C19.5523 6 20 6.44772 20 7V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
                        <path d="M4 10H20" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                    </svg>
                @elseif ($isFaIcon)
                    <i class="{{ $item['icon'] }} {{ $active ? 'text-brand-500 dark:text-brand-400' : 'text-gray-500 group-hover:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-300' }}"></i>
                @endif

                <span class="menu-item-text" :class="sidebarToggle ? 'lg:hidden' : ''">
                    {{ $item['label'] }}
                </span>

                @if ($hasChildren)
                    <svg class="menu-item-arrow" :class="[open ? 'menu-item-arrow-active' : 'menu-item-arrow-inactive', sidebarToggle ? 'lg:hidden' : '']" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4.79175 7.39584L10.0001 12.6042L15.2084 7.39585" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                @endif
            </a>

            @if ($hasChildren)
                <div class="overflow-hidden transform translate" :class="open ? 'block' : 'hidden'">
                    <ul :class="sidebarToggle ? 'lg:hidden' : 'flex'" class="flex flex-col gap-1 mt-2 menu-dropdown pl-9">
                        @include('backend.layouts.partials.sidebar-dynamic-items', ['items' => $children, 'level' => $level + 1])
                    </ul>
                </div>
            @endif
        </li>
    @else
        <li @if($hasChildren) x-data="{ open: @js($active) }" @endif class="sidebar-child-li">
            <a href="{{ $hasChildren ? '#' : ($item['url'] ?? '#') }}"
                @if($hasChildren) @click.prevent="open = !open" @endif
                class="menu-dropdown-item group {{ $active ? 'menu-dropdown-item-active' : 'menu-dropdown-item-inactive' }} min-h-[44px] lg:min-h-[auto]">
                <span class="mr-2 inline-flex h-4 w-4 items-center justify-center">
                    @if ($isFaIcon)
                        <i class="{{ $item['icon'] }} sidebar-fa-icon"></i>
                    @elseif (!empty($item['icon']))
                        @if ($item['icon'] === 'menu-icon-backend')
                            <svg class="h-4 w-4" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 4C4.44772 4 4.44772 4 5 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5ZM2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5ZM7 6C6.44772 6 6 6.44772 6 7V17C6 17.5523 6.44772 18 7 18H17C17.5523 18 18 17.5523 18 17V7C18 6.44772 17.5523 6 17 6H7ZM8 12V8H16V12H8ZM8 14H16V16H8V14Z" fill="currentColor"/></svg>
                        @elseif ($item['icon'] === 'menu-icon-frontend')
                            <svg class="h-4 w-4" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM4 12C4 13.2 4.3 14.3 4.8 15.3C5.5 13.9 6.8 12.9 8.4 12.5C8.1 11.9 8 11.2 8 10.5C8 9.1 8.9 7.9 10.2 7.5C9.8 7 9.6 6.5 9.5 5.9C7.5 6.8 6 8.8 6 11C6 11.3 6 11.7 6.1 12C5.2 12.5 4.5 13.2 4 14.1C4 13.4 4 12.7 4 12ZM12 20C13.3 20 14.5 19.6 15.5 18.9C15.4 18.3 15 17.7 14.2 17.4C13.5 17.1 12.6 17 11.6 17.3C10.4 17.6 9.6 18.5 9.4 19.5C10.2 19.8 11.1 20 12 20ZM12 4C9.4 4 7.1 5.4 5.7 7.5C6.2 7.9 7 8.2 7.9 8C8.6 7.8 9.1 7.1 9.2 6.3C9.3 5.6 9 5 8.6 4.6C9.7 4.2 10.8 4 12 4ZM15.2 5.1C15.3 5.5 15.4 6 15.4 6.5C15.4 7.6 14.9 8.6 14 9.2C13.7 9.4 13.4 9.7 13.2 10.1C12.9 10.7 13 11.4 13.5 11.9C13.9 12.3 14.5 12.4 15.1 12.3C16.2 12.1 17.3 12.8 17.8 13.8C18.3 13 18.6 12.1 18.8 11.1C19 10.1 19 9 18.9 8C17.9 6.5 16.2 5.5 14.4 5.1C14.6 5.1 14.9 5.1 15.2 5.1ZM12 14C10.4 14 9.1 15.1 8.8 16.6C9 16.4 9.4 16.2 9.9 16.1C10.8 15.9 11.8 16 12.6 16.4C13.3 16.7 13.8 17.2 14 17.9C15.2 17 16 15.6 16 14C16 13.9 16 13.7 16 13.6C15.6 13.2 15 13 14.4 13.1C13.5 13.3 12.7 13.6 12 14Z" fill="currentColor"/></svg>
                        @elseif ($item['icon'] === 'menu-icon-content')
                            <svg class="h-4 w-4" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 5C4 4.44772 4.44772 4 5 4H9.58579C9.851 4 10.1054 4.10536 10.2929 4.29289L12 6H19C19.5523 6 20 6.44772 20 7V19C20 19.5523 19.5523 20 19 20H5C4.44772 20 4 19.5523 4 19V5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><path d="M4 10H20" stroke="currentColor" stroke-width="1.5"/></svg>
                        @endif
                    @else
                        @if ($level === 1)<i class="fa-solid fa-circle sidebar-fa-icon" style="font-size: 6px;"></i>@else<i class="fa-regular fa-circle sidebar-fa-icon" style="font-size: 8px;"></i>@endif
                    @endif
                </span>
                <span>{{ $item['label'] }}</span>
                @if ($hasChildren)
                    <svg class="ml-auto w-4 h-4 transition-transform" :class="open ? 'rotate-180' : ''" viewBox="0 0 20 20" fill="none">
                        <path d="M6 8L10 12L14 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                @endif
            </a>

            @if ($hasChildren)
                <div x-show="open" x-collapse class="overflow-hidden">
                    <ul class="ml-4 mt-1 space-y-1">
                        @include('backend.layouts.partials.sidebar-dynamic-items', ['items' => $children, 'level' => $level + 1])
                    </ul>
                </div>
            @endif
        </li>
    @endif
@endforeach