@php
    function renderMenu($menuItems, $menuId, $parentSlug = '')
    {
        $output = '';

        if ($parentSlug === '') {
            $output .= '<ul class="side-nav-menu-list" id="' . $menuId . '">';
        } else {
            $output .= '<ul class="side-nav-menu-list sub-menu collapse " id="' . $menuId . '"> ';
        }

        foreach ($menuItems as $menuItem) {
            $hasSubmenu = isset($menuItem['submenu']);

            $collapseId = $hasSubmenu ? "{$parentSlug}-" . Str::slug($menuItem['title']) . '-collapse' : '';

            $itemHref = ' href="' . (isset($menuItem['href']) ? $menuItem['href'] : '#'.$collapseId) . '"';

            $output .= '<li class="side-nav-menu-item">';
            $output .=
                '<a ' .
                $itemHref .
                ' class="side-nav-menu-item-container ' .
                ($hasSubmenu ? 'has-submenu collapsed' : '') .
                '"';

            if ($hasSubmenu) {
                $output .= ' data-bs-toggle="collapse"  aria-expanded="false"';
            }



            $output .= '>';
            if ($parentSlug === '') {
                $output .= '<span class="side-nav-menu-item-icon">';
                $output .= $menuItem['icon']; // Assuming icon is provided as SVG in the array
                $output .= '</span>';
            }
            $output .= '<span class="side-nav-menu-item-title">' . $menuItem['title'] . '</span>';
            $output .= '</a>';

            if ($hasSubmenu) {
                $output .= renderMenu(
                    $menuItem['submenu'],
                    $collapseId,
                    $parentSlug . '-' . Str::slug($menuItem['title']),
                );
            }

            $output .= '</li>';
        }

        $output .= '</ul>';

        return $output;
    }
@endphp


<div class="side-nav">
    <div class="side-nav-head">

        <div class="side-nav-logo">
            <img src="{{ $bannerLogo }}" alt="Logo Large" width="185" height="44" class="logo-large">
            <img src="{{ asset('images/logo-icon.png') }}" alt="Logo Icon" width="30" height="44" class="logo-small">
        </div>

        <div class="side-nav-toggle-btn">
            <i class="icon-navbar"></i>
        </div>
    </div>
    <div class="side-nav-main">
        {!! renderMenu($menuItems, 'side-nav-menu-list-main') !!}
    </div>
</div>