@php
$firstSubmenu = true;
@endphp
<nav x-bind:class="{'flex': open, '': !open}" class="hidden md:flex mt-4 font-bold text-sm">
    <div class="flex-row md:flex items-center w-full">


        <div x-on:click.away="open = false" x-data="{ open: true }">
            <button x-on:click="open = !open"
                onclick="document.getElementById('openstart').dispatchEvent(new CustomEvent('open-me', { detail: {}}));"
                class="flex lg:mx-2 mx-1 p-2 font-bold items-center rounded-lg hover:text-gray-900
            hover:bg-gray-200 whitespace-nowrap">
                <img class="h-4 mt-1 mx-2" src="/svgs-new1400/list-tree.svg">
                <span> دسته بندی </span>
                <svg fill="currentColor" viewBox="0 0 20 20" x-bind:class="{'rotate-180': open, 'rotate-0': !open}"
                    class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1">
                    <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 x-show="open"
                class="w-full p-2 bg-white border-t border-solid border-gray-100 absolute shadow-xl z-50">
                <div class=" w-full justify-start mx-2">


                    @can('admin-hidden-navbar')
                    @php
                    $product_navbar_sel = $setting->show_hidden_data == true ?
                    $product_navbar_all :
                    $product_navbar ;



                    @endphp
                    @else
                    @php $product_navbar_sel = $product_navbar; @endphp
                    @endcan

                    @foreach($product_navbar_sel as $product_navbar_item)
                    @if(count( $product_navbar_item["items"]) == 0)

                    @else

                    @php $showSubMenu = false; @endphp

                    @if( $product_navbar_item["permission"] !== null && $product_navbar_item["permission"] != '' )

                    @can($product_navbar_item["permission"])
                    @php $showSubMenu = true; @endphp
                    @endcan

                    @else
                    @php $showSubMenu = true; @endphp
                    @endif

                    @if($showSubMenu)

                    @if($firstSubmenu == true)
                    @php $firstSubmenu = false; @endphp
                    <div id="openstart" x-on:click.away="open = false" class=" md:flex" x-data="{ open: true }"
                        x-on:open-me="open=true">
                        <button x-on:click="$dispatch('open-me')"
                            x-bind:class="{'bg-gray-100': open, 'bg-transparent': !open}"
                            class="block w-48 h-12 px-4 py-2 m-2 text-sm font-semibold rounded-lg text-right md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none focus:shadow-outline">
                            @else
                            <div x-on:click.away="open = false" class=" md:flex" x-data="{ open: true }">
                                <button x-on:click="open = !open"
                                    x-bind:class="{'bg-gray-100': open, 'bg-transparent': !open}"
                                    class="block  w-48 h-12 px-4 py-2 m-2 text-sm font-semibold rounded-lg text-right md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none focus:shadow-outline">
                                    @endif


                                    <span> {{ $product_navbar_item["title"] }} </span>
                                    <svg fill="currentColor" viewBox="0 0 20 20"
                                        x-bind:class="{'rotate-90': open, 'rotate-0': !open}"
                                        class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1">
                                        <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 x-show="open"
                                    class="right-48 md:absolute top-2 left-0 bg-white mr-3 rounded-br-lg min-h-full border-r">
                                    <div class="w-full flex flex-wrap justify-start mx-2">

                                        @foreach($product_navbar_item["items"] as $product_navbar_item2)
                                        <ul class="px-4 w-full sm:w-1/2 md:w-1/4 pb-6 pt-6 lg:pt-3">
                                            <a href="{{ $product_navbar_item2['link'] }}"
                                                class=" block p-2 text-sm text-blue-500 rounded-md hover:text-gray-700 hover:bg-blue-50">
                                                {{ $product_navbar_item2["title"] }}
                                            </a>

                                            @foreach($product_navbar_item2["items"] as
                                            $product_navbar_item3)

                                            <li>
                                                <a href="{{ $product_navbar_item3['link'] }}"
                                                    class="block flex px-6 py-1 items-center text-sm rounded-md hover:text-gray-800 hover:bg-blue-50">
                                                    <div class="w-2 h-2 ml-3 bg-blue-100 rounded-full"></div>
                                                    {{
                                                    $product_navbar_item3["title"] }}
                                                </a>
                                            </li>
                                            @endforeach
                                        </ul>

                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            @endif

                            @endif
                            @endforeach

                    </div>
                </div>
            </div>






            @can('admin-hidden-navbar')
            @php $top_navbar_sel = $setting->show_hidden_data == true ? $top_navbar_all : $top_navbar ; @endphp
            @else
            @php $top_navbar_sel = $top_navbar; @endphp
            @endcan

            @foreach($top_navbar_sel as $top_navbar_item)
            @if(count($top_navbar_item["items"]) == 0)

            @if( $top_navbar_item["permission"] !== null && $top_navbar_item["permission"] != '' )
            @can($top_navbar_item["permission"])


            <a title="{{ $top_navbar_item['title'] }}"
                class="flex lg:mx-4 mx-1 p-2 items-center rounded-lg hover:text-gray-900 hover:bg-gray-200 whitespace-nowrap "
                href="{{ $top_navbar_item['link'] }}">{{
                $top_navbar_item['title'] }}</a>

            @endcan
            @else

            <a title="{{ $top_navbar_item['title'] }}"
                class="flex lg:mx-4 mx-1 p-2 items-center rounded-lg hover:text-gray-900 hover:bg-gray-200 whitespace-nowrap "
                href="{{ $top_navbar_item['link'] }}">{{
                $top_navbar_item['title'] }}</a>

            @endif


            @else
            @if($top_navbar_item["col"] == false)





            <div x-on:click.away="open = false" class="relative" x-data="{ open: true }">
                <button x-on:click="open = !open"
                    class="flex flex-row p-2  w-full items-center rounded-lg hover:text-gray-900 hover:bg-gray-200 font-bold whitespace-nowrap">

                    {{ $top_navbar_item["title"] }}

                    <svg fill="currentColor" viewBox="0 0 20 20" x-bind:class="{'rotate-180': open, 'rotate-0': !open}"
                        class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1">
                        <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 x-show="open" x-transition:enter="transition ease-out duration-100"
                    x-transition:enter-start="transform opacity-0 scale-95"
                    x-transition:enter-end="transform opacity-100 scale-100"
                    x-transition:leave="transition ease-in duration-75"
                    x-transition:leave-start="transform opacity-100 scale-100"
                    x-transition:leave-end="transform opacity-0 scale-95"
                    class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48">
                    <div class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800">


                        @foreach($top_navbar_item["items"] as $top_navbar_item2 )

                        @if( $top_navbar_item2["permission"] !== null && $top_navbar_item2["permission"] != '' )

                        @can($top_navbar_item2["permission"])

                        <a title="{{ $top_navbar_item2['title'] }}"
                            class="block px-4 py-1 items-center rounded-lg hover:text-gray-900 hover:bg-gray-200  "
                            href="{{ $top_navbar_item2['link'] }}">{{
                            $top_navbar_item2['title'] }}</a>

                        @endcan
                        @else

                        <a title="{{ $top_navbar_item2['title'] }}"
                            class="block px-4 py-1 items-center rounded-lg hover:text-gray-900 hover:bg-gray-200  "
                            href="{{ $top_navbar_item2['link'] }}">{{
                            $top_navbar_item2['title'] }}</a>

                        @endif


                        @endforeach



                    </div>
                </div>
            </div>


            @else


            <!-- تجهیزات -->

            <div x-on:click.away="open = false" class="relative" x-data="{ open: true }">
                <button x-on:click="open = !open"
                    class="flex lg:mx-2 mx-1 p-2 font-bold items-center rounded-lg hover:text-gray-900 hover:bg-gray-200 whitespace-nowrap">
                    <img class="h-4 mt-1 mx-2" src="/svgs-new1400/list-tree.svg">
                    <span> تجهیزات </span>
                    <svg fill="currentColor" viewBox="0 0 20 20" x-bind:class="{'rotate-180': open, 'rotate-0': !open}"
                        class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1">
                        <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 x-show="open"
                    class="relative md:absolute right-0 w-full mt-2 origin-top-right rounded-md md:shadow-lg md:w-72 bg-gray-50 md:bg-white">
                    <div class="p-2 rounded-md md:shadow ">


                        @foreach($top_navbar_item["items"] as $top_navbar_item2 )

                        <div x-on:click.away="open = false" class="relative" x-data="{ open: true }">
                            <button x-on:click="open = !open"
                                class="block w-full px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg text-right md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
                                <span>{{ $top_navbar_item2['title'] }}</span>
                                <svg fill="currentColor" viewBox="0 0 20 20"
                                    x-bind:class="{'rotate-180': open, 'rotate-0': !open}"
                                    class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1">
                                    <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>

                            @if(isset($top_navbar_item2["items"]))
                            <div x-show="open" class="relative md:flex right-0  mt-2 origin-top-right rounded-md ">
                                <div class="p-2 rounded-md w-full">

                                    @foreach($top_navbar_item2["items"] as $top_navbar_item3 )


                                    <a class=" block px-4 py-2 mt-2 text-sm  bg-transparent rounded-lg  md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
                                        href="{{ $top_navbar_item3['link'] }}">
                                        {{ $top_navbar_item3['title'] }}
                                    </a>

                                    @endforeach




                                </div>
                            </div>
                            @endif
                        </div>
                        @endforeach


                    </div>
                </div>
            </div>




            @endif
            @endif


            @endforeach







            {{-- <a href="#"
                class="flex lg:mx-4 mx-1 p-2 items-center rounded-lg hover:text-gray-900 hover:bg-gray-200 whitespace-nowrap ">
                <img class="h-4 mt-1 mx-2" src="/svgs-new1400/box-dollar.svg"> ارز دولتی /
                سهمیه‌ایی</a>
            <a href="#"
                class="flex lg:mx-4  mx-1 p-2 items-center rounded-lg hover:text-gray-900 hover:bg-gray-200 whitespace-nowrap">
                <img class="h-4 mt-1 mx-2" src="/svgs-new1400/face-mask.svg"> اقلام حفاظتی
                کرونا</a>
            <a href="#"
                class="flex lg:mx-4  mx-1 p-2 items-center rounded-lg hover:text-gray-900 hover:bg-gray-200 whitespace-nowrap">
                <img class="h-4 mt-1 mx-2" src="/svgs-new1400/badge-percent.svg"> تخفیف روز</a> --}}


        </div>
        <div class=" md:flex items-center ml-6 justify-end relative">
            {{-- <a href="#" class="p-1 rounded-lg hover:text-gray-900 hover:bg-gray-200 justify-center items-center">
                <img class="h-6 px-1 " src="/svgs-new1400/retweet.svg">
            </a> --}}

            <a href="/profile/wishlist" class="p-1 rounded-lg hover:text-gray-900 hover:bg-gray-200">
                <img class="h-6 px-1 " src="/svgs-new1400/heart.svg">
            </a>

            @php $currentUserNotificationsCount = getCurrentUserNotificationsCount(); @endphp
            <a href="/profile/notifications" data-count="{{ $currentUserNotificationsCount }}"
                class="p-1 rounded-lg hover:text-gray-900 hover:bg-gray-200  " title="اعلان‌ها">

                @if($currentUserNotificationsCount!=0)
                <span
                    class="absolute flex top-0 left-6 w-4 h-4 bg-red-500 text-white rounded-full text-xs justify-center">
                    {{ $currentUserNotificationsCount }}
                </span>
                @endif
                <img class="h-6 px-1" src="/svgs-new1400/bell.svg">
            </a>
        </div>
</nav>