<header class="header-area">
    {{-- <div class="header-top black-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-4 col-md-4 col-12 col-sm-4">
                    @auth
                        <div class="welcome-area">
                            <p>Welcome {{ Auth::user()->name }} </p>
                        </div>
                    @endauth
                </div>
                <div class="col-lg-8 col-md-8 col-12 col-sm-8">
                    <div class="account-curr-lang-wrap f-right">
                        <ul>
                            <li class="top-hover"><a href="#">Language: (ENG) <i class="ion-chevron-down"></i></a>
                                <ul>
                                    <li><a href="#">Bangla </a></li>
                                    <li><a href="#">Arabic</a></li>
                                    <li><a href="#">Hindi </a></li>
                                    <li><a href="#">Spanish</a></li>
                                </ul>
                            </li>
                            <li class="top-hover"><a href="#">Currency: (USD) <i class="ion-chevron-down"></i></a>
                                <ul>
                                    <li><a href="#">Taka (BDT)</a></li>
                                    <li><a href="#">Riyal (SAR)</a></li>
                                    <li><a href="#">Rupee (INR)</a></li>
                                    <li><a href="#">Dirham (AED)</a></li>
                                </ul>
                            </li>
                            <li class="top-hover"><a href="#">Setting <i class="ion-chevron-down"></i></a>
                                <ul>
                                    <li><a href="{{ route('wishlist') }}">Wishlist </a></li>
                                    <li><a href="{{ route('loginRegisterForm') }}">Login</a></li>
                                    <li><a href="{{ route('loginRegisterForm') }}">Register</a></li>
                                    <li><a href="my-account.html">my account</a></li>
                                    @auth
                                        <li><a href="{{ route('logout') }}">Logout</a></li>
                                    @endauth
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div> --}}
    @if (Session::has('toastr'))
        {!! Toastr::message() !!}
    @endif
    <div class="header-middle">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-4 col-12 col-sm-4">
                    <div class="logo">
                        <a href="{{ route('home') }}">
                            <img alt="" src="assets/img/logo/logo-3.png">
                        </a>
                    </div>
                </div>
                <div class="col-lg-9 col-md-8 col-12 col-sm-8" style="align-self:center">
                    <div class="header-middle-right f-right">
                        <div class="header-login">
                            @auth
                                <div class="header-icon-style">
                                    <i class="icon-user icons"></i>
                                </div>
                                <div class="login-text-content">
                                    <p>Welcome ! <br><span>{{ Auth::user()->name }}</span></p>
                                </div>
                            @endauth
                            @guest
                                <a href="{{ route('loginRegisterForm') }}">
                                    <div class="header-icon-style">
                                        <i class="icon-user icons"></i>
                                    </div>
                                    <div class="login-text-content">
                                        <p>Register <br> or <span>Sign in</span></p>
                                    </div>
                                </a>
                            @endguest
                        </div>
                        <div class="header-wishlist">
                            <a href="{{ route('cart.index') }}">
                                <div class="header-icon-style">
                                    <i class="icon-handbag icons"></i>
                                </div>
                                <div class="wishlist-text">
                                    <p>Your <br> <span>Cart</span></p>
                                </div>
                            </a>
                        </div>
                        @auth
                            <div class="header-wishlist">
                                <a href="{{ route('logout') }}">
                                    <div class="header-icon-style">
                                        <i class="icon-lock icons"></i>
                                    </div>
                                    <div class="wishlist-text">
                                        <p><span>Logout</span></p>
                                    </div>
                                </a>
                            </div>
                        @endauth
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="header-bottom transparent-bar black-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-12">
                    <div class="main-menu">
                        <nav>
                            <ul>
                                <li><a href="{{ route('home') }}">Home</a></li>
                                <li><a href="{{ route('about-us') }}">about</a></li>
                                <li class="mega-menu-position top-hover"><a href="{{ route('shop.index') }}">shop <i
                                            class="ion-chevron-down"></i></a>
                                    <ul class="mega-menu">
                                        @forelse($categories as $index => $category)
                                            <li>
                                                <ul>
                                                    <li class="mega-menu-title">
                                                        @if ($index > 3)
                                                            <a href="#"
                                                                style="margin-top: 20px;color:red">{{ $category->CategoryName }}</a>
                                                        @else
                                                            <a href="#"
                                                                style="color:red">{{ $category->CategoryName }}</a>
                                                        @endif
                                                    </li>
                                                    @foreach ($category->dishes->take(8) as $dish)
                                                        @php
                                                            $queryParams = ['dish_id' => $dish->DishID];
                                                            $url = route('shop.detail') . '?' . http_build_query($queryParams);
                                                        @endphp
                                                        <li><a href="{{ $url }}">{{ $dish->DishName }}</a>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </li>
                                        @empty
                                            No Categories
                                        @endforelse
                                    </ul>
                                </li>
                                {{-- <li><a href="{{ route('blog.index') }}">Blog</a></li> --}}
                                {{-- <li class="top-hover"><a href="#">pages <i class="ion-chevron-down"></i></a>
                                    <ul class="submenu">
                                        <li><a href="about-us.html">about us </a></li>
                                        <li><a href="{{route('shop.index')}}">shop Grid</a></li>
                                        <li><a href="shop-list.html">shop list</a></li>
                                        <li><a href="{{route('shop.detail')}}">product details</a></li>
                                        <li><a href="cart-page.html">cart page</a></li>
                                        <li><a href="checkout.html">checkout</a></li>
                                        <li><a href="wishlist.html">wishlist</a></li>
                                        <li><a href="my-account.html">my account</a></li>
                                        <li><a href="login-register.html">login / register</a></li>
                                        <li><a href="contact.html">contact</a></li>
                                        <li><a href="testimonial.html">Testimonials</a></li>
                                    </ul>
                                </li> --}}
                                <li><a href="{{ route('contact-us') }}">contact us</a></li>
                                @auth
                                    <li><a href="{{ route('order.index') }}">my orders</a></li>
                                @endauth
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- mobile-menu-area-start -->
    <div class="mobile-menu-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="mobile-menu">
                        <nav id="mobile-menu-active">
                            <ul class="menu-overflow" id="nav">
                                <li><a href="{{ route('home') }}">Home</a></li>
                                <li><a href="{{ route('about-us') }}">about</a></li>
                                <li class="mega-menu-position top-hover"><a href="{{ route('shop.index') }}">shop <i
                                            class="ion-chevron-down"></i></a>
                                    <ul class="mega-menu">
                                        @forelse($categories as $index => $category)
                                            <li>
                                                <ul>
                                                    <li class="mega-menu-title">
                                                        @if ($index > 3)
                                                            <a href="#"
                                                                style="margin-top: 20px;color:red">{{ $category->CategoryName }}</a>
                                                        @else
                                                            <a href="#"
                                                                style="color:red">{{ $category->CategoryName }}</a>
                                                        @endif
                                                    </li>
                                                    @foreach ($category->dishes->take(8) as $dish)
                                                        <li><a
                                                                href="{{ route('shop.index') }}">{{ $dish->DishName }}</a>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            </li>
                                        @empty
                                            No Categories
                                        @endforelse
                                    </ul>
                                </li>
                                {{-- <li><a href="{{ route('blog.index') }}">Blog</a></li> --}}
                                {{-- <li class="top-hover"><a href="#">pages <i class="ion-chevron-down"></i></a>
                                    <ul class="submenu">
                                        <li><a href="about-us.html">about us </a></li>
                                        <li><a href="{{route('shop.index')}}">shop Grid</a></li>
                                        <li><a href="shop-list.html">shop list</a></li>
                                        <li><a href="{{route('shop.detail')}}">product details</a></li>
                                        <li><a href="cart-page.html">cart page</a></li>
                                        <li><a href="checkout.html">checkout</a></li>
                                        <li><a href="wishlist.html">wishlist</a></li>
                                        <li><a href="my-account.html">my account</a></li>
                                        <li><a href="login-register.html">login / register</a></li>
                                        <li><a href="contact.html">contact</a></li>
                                        <li><a href="testimonial.html">Testimonials</a></li>
                                    </ul>
                                </li> --}}
                                <li><a href="{{ route('contact-us') }}">contact us</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- mobile-menu-area-end -->
</header>
