<!-- Header Center
    ============================================= -->
    <header id="header" class="center-header">
    <div class="container">
        <div class="row">
        <div id="main-menu-trigger" style="display:flex;">
            <div class="_menu">
                <i class="fa fa-bars"></i>
            </div>
            <div class="_cart" style="margin-left:10px;">
                <a href="{{ route("cart") }}" style="color:black"><i class="fa fa-shopping-cart"></i> <span style="position: absolute;font-size: 10px;color: #FFF;text-shadow: 1px 1px 1px rgb(0 0 0 / 20%);width: 16px;height: 16px;
                    line-height: 16px;
                    text-align: center;
                    background-color: #c59d5f;
                    border-radius: 50%;
                ">{{countItemInCart()}}</span></a>
            </div>
        </div>
        <!-- Logo============================================= -->
        <div id="logo">
            <a href="{{ route("home") }}" class="light-logo">
                <img src="{{ asset("img/logo/logo_white.png") }}" alt="Logo" style="width:50px;height:50px;">
            </a>
            <a href="{{ route("home") }}" class="dark-logo">
                <img src="{{ asset("img/logo/logo_black.png") }}" alt="Logo" style="width:40px;height:40px;">
            </a>
        </div>
        <!-- #logo end -->
        <!-- Primary Navigation ============================================= -->
        <nav id="main-menu" class="dark menu-center" style="display:none;">
            <ul>
            <li><a href="{{ route("home") }}">Home</a></li>
            <li><a href="{{ route("menu") }}">Menu</a></li>
            <li><a href="{{ route("contact") }}">Contact</a></li>
            @guest
                @if (Route::has('register'))
                    <li><a href="{{ route('register') }}">{{ __('Register') }}</a></li>
                @endif
                @if (Route::has('login'))
                    <li><a href="{{ route('login') }}">{{ __('Login') }}</a></li>
                @endif
            @else
            <li>
                @if (Auth::user()->user_group == '1')
                    <a href="{{ route("admin") }}">{{ Auth::user()->first_name .' '. Auth::user()->last_name }}</a>
                @endif
                @if (Auth::user()->user_group == '2')
                    <a href="{{ route("dashboard") }}">{{ Auth::user()->first_name .' '. Auth::user()->last_name }}</a>
                @endif
            <li>
                <a class="dropdown-item" href="{{ route('logout') }}"
                onclick="event.preventDefault();
                              document.getElementById('logout-form').submit();">
                              {{ __('Logout') }}
                </a>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                    @csrf
                </form>
            </li>

            @endguest
            </ul>
            <!-- Top Cart ============================================= -->
            <div id="shop_cart" >
                <a href="{{ route("cart") }}" id="shop_tigger"><i class="fa fa-shopping-cart"></i><span>{{countItemInCart()}}</span></a>
            </div>
            <!-- End shop cart -->
            <div class="search_form" style="position: relative;float: right;margin-top: 10px;">
                <form action="{{ route("search") }}" class="search_form_submit" method="GET">
                    <div id='input_group'>
                        <label id='label' for="input">
                            <i class="fa fa-search js_submit_search" style="color:black;font-size:20px;"></i>
                        </label>
                        <input id='input' type="text" name="q" class="form-control" style="color:black" placeholder="Search food.">
                    </div>
                </form>
            </div>
        </nav>
        <!-- #main-menu end -->
        </div>
    </div>
    </header>
    <!-- End header -->
