@if($displayMenu)

    <nav class="nav-top">
        <div>
            <ul class="ul-main">
                {{--            <li><a href="{{ route('home') }}" id="home-button" class="btn_nav">Home</a></li>--}}
                @if(!empty($menu))
                    @foreach($menu as $menuId=>$menuGroup)
                        <li class="relative">
                            @if(array_key_exists('submenu', $menuGroup) && !empty($menuGroup['submenu']))
                                <button class="menu-button btn_nav">{{ __('menu.'.$menuGroup['route']) }}</button>
                                <ul class="submenu hidden absolute top-7">
                                    @foreach($menuGroup['submenu'] as $subMenuId=>$subMenuRoute)
                                        <li><a href="{{ route($menuGroup['route'].'.'.$subMenuRoute) }}">{{ __('menu.'.$subMenuRoute) }}</a></li>
                                    @endforeach
                                </ul>
                            @else
                                <a href="{{ route($menuGroup['route']) }}">{{ __('menu.'.$menuGroup['route']) }}</a>
                            @endif
                        </li>
                    @endforeach
                @endif
            </ul>

            <span class="flex items-center space-x-2">
            <button id="filter-button" class="btn_search1">
                <div class="icon_search absolute top-1 left-2"></div>{{ __('filters.search') }}
            </button>
{{--            <a href="{{ route('logout') }}" class="btn_login1">--}}
                {{--                <div class="icon_login absolute top-1 left-2"></div>{{ __('main.logout') }}--}}
                {{--            </a>--}}
        </span>
        </div>
    </nav>

    {{-- --- MENU MOBILNE --------------------------------------------------------------------------------------------- --}}

    <nav class="nav-top-mobile">
        <div x-data="{
        menuOpen: false,
        submenus: {},
        toggleSubmenu(key) {
            this.submenus[key] = !this.submenus[key];
        }
    }" class="lg:hidden">
            <button @click="menuOpen = !menuOpen" class="p-2 text-white bg-gray-800 rounded">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path :class="{ 'hidden': menuOpen, 'block': !menuOpen }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                    <path :class="{ 'block': menuOpen, 'hidden': !menuOpen }" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                </svg>
            </button>

            <!-- Menu -->
            <div x-show="menuOpen" class="mt-2 space-y-2 p-2 rounded shadow">
                {{--            <a href="{{ route('home') }}" class="block px-4 py-2 bg-slate-500 text-gray-100 hover:bg-slate-600 rounded-md">Home</a>--}}


                @if(!empty($menu))

                    @foreach($menu as $menuId=>$menuGroup)
                        @if(array_key_exists('submenu', $menuGroup) && !empty($menuGroup['submenu']))
                            <div>
                                <button @click="toggleSubmenu({{ $menuId }})" class="flex items-center justify-between w-full px-4 py-2 bg-slate-500 text-gray-100 hover:bg-slate-600 rounded-md">
                                    {{ __('menu.'.$menuGroup['route']) }}
                                    <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path x-show="!submenus['{{ $menuId }}']" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 9l6 6 6-6"/>
                                        <path x-show="submenus['{{ $menuId }}']" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 15l-6-6-6 6"/>
                                    </svg>
                                </button>
                                <!-- Submenu -->
                                <div x-show="submenus['{{ $menuId }}']" x-transition class="ml-4 mt-2 space-y-1">
                                    @foreach($menuGroup['submenu'] as $subMenuId=>$subMenuRoute)
                                        <a href="{{ route($menuGroup['route'].'.'.$subMenuRoute) }}" class="block px-4 py-2 bg-slate-500 text-gray-100 hover:bg-slate-600 rounded-md">{{ __('menu.'.$subMenuRoute) }}</a>
                                    @endforeach
                                </div>
                            </div>
                        @else
                            <a href="{{ route($menuGroup['route']) }}" class="flex items-center justify-between w-full px-4 py-2 bg-slate-500 text-gray-100 hover:bg-slate-600 rounded-md">{{ __('menu.'.$menuGroup['route']) }}</a>
                        @endif
                    @endforeach
                @endif
                <div class="flex justify-center items-center space-x-4 py-2">
                                    <button id="filter-button2" class="btn_search1 relative">
                                        <div class="icon_search absolute top-1 left-2"></div>
                                        {{ __('filters.search') }}
                                    </button>

                    <form action="{{ route('logout') }}" method="post">
                        @csrf
                        <button type="submit" class="btn_login1 relative">
                            <div class="icon_login absolute top-1 left-2"></div>
                            {{ __('main.logout') }}
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </nav>

@else

    <div class="py-4"></div>

@endif





{{--
<nav class="nav-top" id="mobile-menu">
    <div>
        <ul class="ul-main">
            <li><a href="{{ route('home') }}" id="home-button" class="btn_nav">Home</a></li>
            @if(!empty($menu))
                @foreach($menu as $menuId=>$menuGroup)
                    <li class="relative">
                        @if(!empty($menuGroup['submenu']))
                            <button class="menu-button btn_nav">{{ __('menu.'.$menuGroup['route']) }}</button>
                            <ul class="submenu hidden absolute top-8">
                                @foreach($menuGroup['submenu'] as $subMenuId=>$subMenuRoute)
                                    <li><a href="{{ route($menuGroup['route'].'.'.$subMenuRoute) }}">{{ __('menu.'.$subMenuRoute) }}</a></li>
                                @endforeach
                            </ul>
                        @else
                            <a href="{{ route($menuGroup['route']) }}}" id="home-button">{{ __('menu.'.$menuGroup['route']) }}</a>
                        @endif

                    </li>
                @endforeach
            @endif
        </ul>
        <span class="flex items-center space-x-2">
            <button id="filter-button" class="btn_search1">
                <div class="icon_search absolute top-1 left-2"></div>{{ __('main.filters.search') }}
            </button>

            <form action="{{ route('logout') }}" method="post">
                <button href="" class="btn_login1">@csrf
                    <div class="icon_login absolute top-1 left-2"></div>{{ __('main.logout') }}
                </button>
            </form>
        </span>
    </div>
</nav>
--}}