@php
    $menus = [
        'Home'=> \App\Enums\WebRoute::SAMPLE_HOME->value,
        'Class' => [
            'Action' => \App\Enums\WebRoute::ACTION_RESULT_SAMPLE->value,
        ],
        'Datatable' => [
            '商品登録' => 'design.item-master',
            ],

        'Input' => [
            '空容器回収' => 'design.container-pickups',

        ],
    ];
@endphp

<nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5">
    <div class="flex flex-wrap justify-between items-center mx-auto">
        <a href="https://flowbite.com" class="flex items-center">
            <img src="https://flowbite.com/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo"/>
            <span class="self-center text-xl font-semibold whitespace-nowrap">BoozeCore</span>
        </a>
        <div class="flex items-center lg:order-2">
            <form id="search-form" class="hidden mr-3 w-full lg:inline-block">
                <label for="search-bar"
                       class="mb-2 text-sm font-medium text-gray-900 sr-only">Search</label>
                <div class="relative">
                    <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                        <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                    </div>
                    <input type="search" id="search-bar"
                           class="block py-2 px-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500"
                           placeholder="Search" required>
                </div>
            </form>
            <button type="button"
                    class="flex mx-3 text-sm bg-gray-800 rounded-full md:mr-0 focus:ring-4 focus:ring-gray-300"
                    id="user-menu-button" aria-expanded="false" data-dropdown-toggle="dropdown-user">
                <span class="sr-only">Open user menu</span>
                <div
                    class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-gray-100 rounded-full">
                    <span class="font-medium text-gray-600">JS</span>
                </div>
            </button>
            <div
                class="hidden z-50 my-4 w-56 text-base list-none bg-white rounded divide-y divide-gray-100 shadow"
                id="dropdown-user">
                <div class="py-3 px-4">
                    <span class="block text-sm font-semibold text-gray-900">name</span>
                    <span
                        class="block text-sm font-light text-gray-500 truncate">name@r-nexus.net</span>
                </div>
                <ul class="py-1 font-light text-gray-500" aria-labelledby="dropdown">
                    <li>
                        <form method="POST" action="{{ route('logout') }}" x-data>
                            @csrf

                            <x-dropdown-link href="{{ route('logout') }}"
                                             @click.prevent="$root.submit();">
                                {{ __('Log Out') }}
                            </x-dropdown-link>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
        <div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
            <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
                @foreach($menus as $parent => $children)
                    <li>
                        @if(is_array($children) && count($children) > 0 )
                            @php
                                $is_current_parent = false;
                            @endphp
                            @foreach($children as $child => $url)
                                @php
                                    $is_current_parent = request()->routeIs($url);
                                @endphp
                            @endforeach
                            <button type="button" id="dropdown-button-{{$loop->index}}"
                                    data-dropdown-toggle="dropdown-{{$loop->index}}"
                                    class="flex items-center justify-center border-gray-100 hover:text-blue-600 p-0 @if($is_current_parent) text-blue-700 @else text-gray-700 @endif">
                                {{$parent}}
                                <svg class="ml-1 w-5 h-5 lg:w-4 lg:h-4" fill="currentColor" viewBox="0 0 20 20"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd"
                                          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                          clip-rule="evenodd"></path>
                                </svg>
                            </button>
                            <div id="dropdown-{{$loop->index}}"
                                 class="hidden z-10 bg-white rounded divide-y divide-gray-100 shadow">
                                <ul class="py-1 text-sm font-light text-gray-500"
                                    aria-labelledby="dropdown-button">
                                    @foreach($children as $child => $url)
                                        <li>
                                            <a href="{{ $url ? route($url) : ''  }}"
                                               class="flex items-center py-2 px-4 w-full hover:text-blue-600 @if(request()->routeIs($url)) text-blue-700 @endif">
                                                <i class="fa fa-laptop"></i>
                                                {{$child}}
                                            </a>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @else
                            <a href="{{route($children)}}"
                               class="block text-gray-700 border-gray-100 hover:text-blue-600 p-0">
                                {{$parent}}
                            </a>
                        @endif
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</nav>