@php
    $menus = [
        'ダッシュボード' => 'design.dashboard',
        '仕入業務' => [
         //   '発注点管理' => '',
         //   '発注勧告' => '',
            '入荷状況' => 'design.orders',
            '支払買掛' => 'design.payments',
            '空容器返送' => 'design.container-returns',
        ],
        '売上業務業務' => [
            '売上明細' => 'design.sales',
            '見積' => 'design.estimate',
            '配送管理'=> 'design.delivery',
            '請求買掛' => 'design.deposits',
            '空容器回収' => 'design.container-pickups',

        ],
        '在庫管理業務' => [
            '在庫管理' => 'design.inventory',
            '在庫過不足' => 'design.inventory-diff',
        ],
        '管理営業支援業務' => [],
        'マスタ管理' => [
            '取引ログ' => 'design.data-management',
            '取引先管理'  => '',
            '商品管理' => 'design.item-master',
            'その他マスタ管理' => '',],
    ];
@endphp

<nav
    x-cloak
    x-data="{'showMenu':true}"
    class="bg-white border-gray-200 px-4 lg:px-6">
    <div
        x-show="showMenu && window.self === window.top "
        class="flex flex-wrap justify-between items-center mx-auto h-[4rem]">
        <div class="flex items-center h-full">
            <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>
            @if($title)
                <div class="font-bold flex items-center text-primary-500 px-2 mx-4 py-0">
                    {{$title}}

                   <x-design.buttons.bookmark />
                </div>
            @endif
        </div>
        <div class="flex items-center lg:order-2  hidden">
            <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 lg:flex 2xl:w-auto lg:order-1" id="mobile-menu-2">
            <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-6 space-x-0 lg:mt-0">
                @foreach($menus as $parent => $children)
                    <li>
                        @if(is_array($children) && count($children) > 0 )
                            @php
                                $is_current_parent = false;
                            @endphp
                            @php
                                $current_url = \Illuminate\Support\Facades\Route::currentRouteName();
                            @endphp
                            <button type="button" id="dropdown-button-{{$loop->index}}"
                                    data-dropdown-toggle="dropdown-{{$loop->index}}"
                                    class="flex items-center justify-center border-gray-100 rounded-lg p-3 hover:text-blue-600 @if(in_array($current_url, $children)) bg-primary-50 text-primary-700 @else text-neutral-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="{{ $children ? route($children) : ''  }}"
                               class="flex items-center justify-center border-gray-100 rounded-lg p-3 hover:text-blue-600 @if(request()->routeIs($children)) bg-primary-50 text-primary-700 @else text-neutral-700 @endif">
                                {{$parent}}
                            </a>
                        @endif
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
    <div  x-show="showMenu && window.self === window.top ">
        <livewire:menu-bookmark-manager/>
    </div>
</nav>