{{-- @foreach (Cart::content() as $item)
    {{dd($item->productData)}}
@endforeach --}}

<header class="version_1">
    <div class="layer"></div><!-- Mobile menu overlay mask -->
    <div class="main_header">
        <div class="container">
            <div class="row small-gutters">
                <div class="col-xl-2 col-lg-3 d-lg-flex align-items-center">
                    <div id="logo">
                        <a href="{{ route('home') }}">
                            <img src="{{ asset('logo-rectangule.png') }}" alt=""
                                width="150" height="65" class="main-logo">
                            </a>
                    </div>
                </div>
                <nav class="col-xl-8 col-lg-8">
                    <a class="open_close" href="javascript:void(0);">
                        <div class="hamburger hamburger--spin">
                            <div class="hamburger-box">
                                <div class="hamburger-inner"></div>
                            </div>
                        </div>
                    </a>
                    <!-- Mobile menu button -->
                    <div class="main-menu">
                        <div id="header_menu">
                            {{-- <a href="{{ route('home') }}">
                                <img src="{{ asset('logo-rectangule.png') }}" alt=""
                                width="150" height="65" class="main-logo">
                                </a> --}}
                            <a href="#" class="open_close" id="close_in"><i class="ti-close"></i></a>
                        </div>
                        <ul>
                            <li>
                                <a href="{{ route('home') }}">Home</a>
                            </li>
                            <li class="submenu">
                                <a href="javascript:void(0);" class="show-submenu-mega">Products</a>
                                <ul>
                                    @foreach ($globalCategories as $category)
                                        <li>
                                            <a
                                                href="{{ route('product.all') }}?category={{ $category->category_slug }}">{{ $category->category_title }}</a>
                                        </li>
                                    @endforeach
                                </ul>
                                <!-- /menu-wrapper -->
                            </li>
                            <li>
                                <a href="{{ route('pages.all', 'clip-calculator') }}">Clip Calculator</a>
                            </li>
                            <li>
                                <a href="{{ route('pages.all', 'become-a-distributor') }}">Become a Distributor</a>
                            </li>
                            <li>
                                <a href="{{ route('pages.all', 'where-to-buy') }}">Where To Buy</a>
                            </li>
                            <li>
                                <a href="{{ route('pages.all', 'contact-us') }}">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                    <!--/main-menu -->
                </nav>
                <div class="col-xl-2 col-lg-2 d-lg-flex align-items-center justify-content-end text-end">
                    <a class="phone_top" href="tel://+1(855)9252337"><strong><span>Need Help?</span>+1 (855)
                            925-2337</strong></a>
                </div>
            </div>
            <!-- /row -->
        </div>
    </div>
    <!-- /main_header -->

    <div class="main_nav Sticky">
        <div class="container">
            <div class="row small-gutters">
                <div class="col-xl-3 col-lg-3 col-md-3">
                    {{-- <nav class="categories">
                        <ul class="clearfix">
                            <li><span>
                                    <a href="#">
                                        <span class="hamburger hamburger--spin">
                                            <span class="hamburger-box">
                                                <span class="hamburger-inner"></span>
                                            </span>
                                        </span>
                                        Categories
                                    </a>
                                </span>
                                <div id="menu">
                                    <ul>
                                        @foreach ($globalCategories as $category)
                                            <li>
                                                <span>
                                                    <a href="{{ route('product.all') }}?category={{ $category->category_slug }}">
                                                        {{$category->category_title}}
                                                    </a>
                                                </span>
                                                @if ($category->childs)
                                                    <ul>
                                                        @foreach ($category->childs as $child)
                                                            <li>
                                                                <a href="{{ route('product.all') }}?category={{ $child->category_slug }}">
                                                                    {{ $child->category_title }}
                                                                </a>
                                                            </li>
                                                        @endforeach

                                                    </ul>
                                                @endif
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            </li>
                        </ul>
                    </nav> --}}
                </div>
                <div class="col-xl-6 col-lg-7 col-md-6 d-none d-md-block">
                    <form method="GET" action="{{ route('product.all') }}">
                        <div class="custom-search-input">
                            <input type="text" placeholder="Search all products" name="term">
                            <button type="submit"><i class="header-icon_search_custom"></i></button>
                        </div>
                    </form>
                </div>
                <div class="col-xl-3 col-lg-2 col-md-3">
                    <ul class="top_tools">
                        <li>
                            <div class="dropdown dropdown-cart">
                                <a href="{{ route('cart.index') }}"
                                    class="cart_bt"><strong>{{ Cart::count() <= 99 ? Cart::count() : '99+' }}</strong></a>
                                <div class="dropdown-menu">
                                    <ul>

                                        @foreach (Cart::content() as $item)
                                            <li>
                                                <a
                                                    href="{{ route('product.single', $item->productData->product_slug) }}"
                                                    >
                                                    <figure>
                                                        @if (count($item->productData->images) > 0)
                                                            <img src="{{ asset('storage/' . $item->productData->images[0]->file) }}"
                                                                data-src="{{ asset('storage/' . $item->productData->images[0]->file) }}"
                                                                alt="" width="50" height="50"
                                                                class="lazy">
                                                        @else
                                                            <img src="" data-src="" alt=""
                                                                width="50" height="50" class="lazy">
                                                        @endif
                                                    </figure>
                                                    <strong>
                                                        <span>{{ $item->name }}</span>{{ formatMoney($item->price, true) }}
                                                        x {{ $item->qty }}un
                                                    </strong>

                                                    @foreach ($item->options as $key => $variation)
                                                        <strong>
                                                            <span>{{ $key }}</span>{{ $variation }}
                                                        </strong>
                                                    @endforeach

                                                </a>
                                                <a href="{{ route('cart.remove', $item->rowId) }}" class="action"><i
                                                        class="ti-trash"></i></a>
                                            </li>
                                        @endforeach

                                    </ul>
                                    @if (Cart::count() > 0)

                                        <div class="total_drop">
                                            <div class="clearfix">
                                                <strong>Total</strong><span>{{ formatMoney(Cart::subtotal(), true) }}</span>
                                            </div>
                                            <a href="{{ route('cart.index') }}" class="btn_1 outline">View Cart</a>
                                        </div>
                                    @else
                                        <div class="alert alert-info">Your shopping cart is empty. <a href="{{route('product.all')}}">Click here to go shopping!</a></div>
                                    @endif
                                </div>
                            </div>
                            <!-- /dropdown-cart-->
                        </li>
                        <li>
                            <div class="dropdown dropdown-access">
                                <a href="#" class="access_link"><span>Account</span></a>
                                <div class="dropdown-menu">
                                    @guest
                                    <a href="{{ route('customer.login') }}" class="btn_1">Sign In or Sign Up</a>
                                    @endguest
                                    @auth
                                        Hi, {{Auth::user()->customer_name}}. Welcome Back!
                                        <ul>
                                            <li>
                                                <a href="{{ route('customer.home') }}"><i class="ti-package"></i>My Orders</a>
                                            </li>
                                            {{-- <li>
                                                <a href="#"><i class="ti-user"></i>My Profile</a>
                                            </li> --}}
                                            <li>
                                                <a href="{{ route('customer.logout') }}"><i class="ti-power-off"></i>Logout</a>
                                            </li>
                                        </ul>
                                    @endauth

                                </div>
                            </div>
                            <!-- /dropdown-access-->
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /row -->
        </div>
        <div class="search_mob_wp">
            <input type="text" class="form-control" placeholder="Search products">
            <input type="submit" class="btn_1 full-width" value="Search">
        </div>
        <!-- /search_mobile -->
    </div>
    <!-- /main_nav -->
</header>



<!-- /header -->

{{--
<!-- header -->
<header class="header-1 light-head">
    <div class="sticky">
        <div class="container">

            <!-- Logo -->
            <div class="logo"> <a href="{{ route('home') }}"><img class="img-responsive"
                        src="{{ asset('template/images/logos/logo-light.png') }}" alt="" style="width:180px;"></a>
            </div>
            <nav class="navbar ownmenu">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#nav-open-btn" aria-expanded="false"> <span class="sr-only">Toggle
                            navigation</span> <span class="icon-bar"><i class="fa fa-navicon"></i></span>
                    </button>
                </div>

                <!-- NAV -->
                <div class="collapse navbar-collapse" id="nav-open-btn">
                    <ul class="nav">
                        <li class="dropdown"> <a href="{{ route('product.all') }}" class="dropdown-toggle">Products</a>
                            <ul class="dropdown-menu">
                                @foreach ($globalCategories as $category)
                                    <li>
                                        <a href="{{ route('product.all') }}?category={{ $category->category_slug }}">
                                            {{ $category->category_title }}
                                        </a>
                                    </li>
                                    @if ($category->childs)
                                        @foreach ($category->childs as $child)
                                            <li style="margin-left: 15px">
                                                <a
                                                    href="{{ route('product.all') }}?category={{ $child->category_slug }}">
                                                    {{ $child->category_title }}
                                                </a>
                                            </li>
                                        @endforeach
                                    @endif
                                @endforeach
                            </ul>
                        </li>

                        <li class="dropdown"> <a href="#." class="dropdown-toggle" data-toggle="dropdown">View
                                Resources</a>
                            <ul class="dropdown-menu">
                                <li> <a href="{{ route('pages.all', 'register-your-purchase') }}">Warranty</a> </li>
                                <li> <a href="{{ route('pages.all', 'installation-maintenance') }}">Installation &Maintenance</a> </li>
                                <li> <a href="{{ route('pages.all', 'flooring-faqs') }}">Flooring FAQs</a></li>
                                <li> <a href="{{ route('pages.all', 'technical-documents') }}">Technical Documents</a></li>
                                <li> <a href="{{ route('pages.all', 'digital-catalog') }}">Digital Catalog</a></li>
                            </ul>
                        </li>

                        <li> <a href="{{ route('pages.all', 'visualizer') }}">Visualizer </a> </li>
                        <li> <a href="{{ route('pages.all', 'where-to-buy') }}">Where to Buy</a> </li>
                        <li> <a href="{{ route('pages.all', 'contact-us') }}">Contact US </a> </li>
                    </ul>
                </div>

                <!-- Nav Right -->
                <div class="nav-right">
                    <ul class="navbar-right">

                        <!-- USER INFO -->
                        <li class="dropdown user-acc">
                            @if (Auth::check())
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"><i
                                        class="icon-user"></i> </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <h6>HELLO, {{ Auth::user()->customer_name }}!</h6>
                                    </li>
                                    <li><a href="{{ route('cart.index') }}">MY CART</a></li>
                                    <li><a href="{{ route('customer.home') }}">MY ORDERS</a></li>
                                    <li><a href="{{ route('customer.logout') }}">LOG OUT</a></li>
                                </ul>
                            @else
                                <a href="{{ route('customer.login') }}" class="dropdown-toggle" role="button">
                                    <i class="icon-user"></i>
                                </a>
                            @endif
                        </li>
                        <!-- USER BASKET -->
                        <li class="dropdown user-basket" id="cart-section"> <a href="#" class="dropdown-toggle"
                                data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"><i
                                    class="icon-basket-loaded"></i> </a>
                            <ul class="dropdown-menu" id="cart-section-list">

                                @foreach (Cart::content() as $cart)
                                    <li>
                                        <div class="media-left">
                                            <div class="cart-img">
                                                <a href="#">
                                                    @if (count($cart->productData->images) > 0)
                                                        <img class="media-object img-responsive"
                                                            src="{{ asset('storage/' . $cart->productData->images[0]->file) }}"
                                                            alt="...">
                                                    @else
                                                        <img />
                                                    @endif
                                                </a>
                                            </div>
                                        </div>
                                        <div class="media-body">
                                            <h6 class="media-heading">{{ $cart->name }}</h6>
                                            <span class="price"></span> <span class="qty">QTY: 01</span>
                                        </div>
                                    </li>
                                @endforeach

                                @if (Cart::content()->count() > 0)
                                    <a style="background-color: #1b1f49 !important; color: #fff!important;"
                                        href="{{ route('cart.index') }}" class="btn">VIEW
                                        SAMPLES</a>
                                @else
                                    <div class="alert alert-warning">Empty Order</div>
                                @endif
                            </ul>
                        </li>

                        <!-- SEARCH BAR -->
                        <li class="dropdown"> <a href="javascript:void(0);" class="search-open"><i
                                    class=" icon-magnifier"></i></a>
                            <div class="search-inside animated bounceInUp"> <i class="icon-close search-close"></i>
                                <div class="search-overlay"></div>
                                <div class="position-center-center">
                                    <div class="search">
                                        <form method="GET" action="{{ route('product.all') }}">
                                            <input name="term" type="search" placeholder="Search Shop">
                                            <button type="submit"><i class="icon-check"></i></button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</header> --}}