
@php
    $currentCurrency = Countries()->where('id', session('currency_id', 1))->first();
@endphp
                        
<div class="py-2 bg-black rtl"  style="direction: rtl;">
    <div class="container">    
        <div class="row">
    
            <div class="col-6 d-flex justify-content-center justify-content-md-start gap-md-2">
                <a target="_blank" href="{{ setting('tiktok') }}" class="text-white"><i class="text-white fa-brands fa-tiktok ms-3 fs-5"></i></a>
                <a target="_blank" href="{{ setting('snapchat') }}" class="text-white"><i class="text-white fa-brands fa-snapchat ms-3 fs-5"></i></a>
                <a target="_blank" href="{{ setting('facebook') }}" class="text-white"><i class="text-white fa-brands fa-square-facebook ms-3 fs-5"></i></a>
                <a target="_blank" href="{{ setting('instagram') }}" class="text-white"><i class="text-white fa-brands fa-square-instagram ms-3 fs-5"></i></a>
            </div>
    
            <div class="col-6 d-flex justify-content-center justify-content-md-end px-0" style="font-size: 15px;">
                <div>
                    <a href="tel:{{ setting('phone') }}" class="header-contact-item fw-medium text-white mx-3 text-decoration-none">
                        <i class="fa-solid fa-phone-volume text-white"></i>
                        <small>{{ setting('phone') }}</small>
                    </a>
                </div>
                <div>
                    <a href="mailto:{{ setting('email') }}" class="header-contact-item fw-medium text-white mx-3 text-decoration-none px-0  d-none d-md-block">
                        <i class="fa-solid fa-envelope-open-text text-white "></i>
                        <small>{{ setting('email') }}</small>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    h6,
    .dropdown-item {
        display: -webkit-box;
    }
    #breadcrumb{
        direction: ltr;
    }
    .header .item-right a,
    .header .item-left a{
        color: #000;
    }
    .border-bottom{
        border-bottom: 2px solid #000 !important;
    }
    .responsive-width {
        width: 100%;
    }
    
    @media (min-width: 768px) {
        .responsive-width {
            width: auto;
        }
    }
    .header a,.header .title{
        color: black !important;
    }
</style>

<header class="header py-0">
    <div class="container">
        <div class="">
           <div class="row d-flex justify-content-center align-items-center">
               
                <!-- mobile menu trigger -->
                <div class="col d-flex align-items-center justify-content-start">
                    <div class="mobile-menu-trigger">
                        <span></span>
                    </div>
                </div>
                
                <div class="col d-flex align-items-center justify-content-center">
                    <a href="{{ route('client.home') }}">
                        <img loading="lazy" src="{{ asset(setting('logo')) }}" alt="Logo" class="logo-w">
                    </a>
                </div>
                 <style>
                   .logo-w {
                      max-width: 100px;
                    }


                    @media (min-width: 992px) {
                      .logo-w {
                        max-width: 140px;
                      }
                    }

                </style>
                
                <div class="col d-flex align-items-center justify-content-end">
                    
                    <a href="#" class="mx-2 d-none d-md-flex">
                        <img src="{{ asset($currentCurrency->image) }}" alt="{{ $currentCurrency->title() }}" class="rounded-circle" style="width: 30px; height: 30px; object-fit: cover;"  data-bs-toggle="modal" data-bs-target="#currencyModal">
                    </a>
                    
                    <a href="#search" class="mx-2">
                        <i class="fa-solid fa-magnifying-glass" style="padding-top: 3px;"></i>
                    </a>
                    
                    
                    <a href="{{ route('client.cart') }}" class="mx-2 position-relative">
                        @if(cart_count())
                            <small class="bg-danger text-white rounded-circle" style="position: absolute;right: 0px;top: -14px;padding: 0px 4px 1px 4px;">
                                {{ cart_count() }}
                            </small>
                        @endif
                        <i class="fa-solid fa-cart-shopping" style="padding-top: 3px;"></i>
                    </a>

                    
                    
                    <div class="mx-2 d-none d-md-flex">
                        <a href="{{ !auth('client')->check() ?  route('client.login') : route('client.profile') }}">
                            <i class="fa-solid fa-user" style="padding-top: 3px;"></i>
                        </a> 
                    </div>
                    <div class="mx-2 d-none d-md-flex"  role="button">
                        <a href="{{ route('lang',lang('ar') ? 'en' : 'ar') }}">
                            <span class="text-black">{{ lang('ar') ? 'English' : 'العربية' }}</span>
                        </a>
                    </div>

                </div>
                
           </div>
           <!-- menu start here -->
            <div class="header-item item-center">
                <div class="menu-overlay"></div>
                <nav class="menu">
                     <div class="mobile-menu-head">
                        <div class="go-back"><i class="fa fa-angle-left"></i></div>
                        <div class="current-menu-title"></div>
                        <div class="mobile-menu-close">&times;</div>
                     </div>
                    <ul class="menu-main">
                        <li>
                           <a href="{{ route('client.home') }}">@lang('trans.home')</a>
                        </li>
                    
                        <li class="menu-item-has-children">
                           <a href="#" class="lg-category" data-href="#"><img src="{{ asset($currentCurrency->image) }}" alt="" style="width: 30px;" class="me-1"> {{ $currentCurrency->{'currancy_code_'.lang()} }}  {{ $currentCurrency->{'title_'.lang()} }}<i class="fa fa-angle-down"></i></a>
                           <div class="sub-menu mega-menu mega-menu-column-4">
                                @foreach(Countries() as $Country)
                                    <div class="list-item">
                                        <a href="{{ route('setCurrency', $Country->id) }}">
                                            <h4 class="title"><img loading="lazy" src="{{ asset($Country->image) }}"  alt="{{ $Country->title() }}"  style="width: 30px;" class="mx-2">{{ $Country->{'currancy_code_'.lang()} }}  {{ $Country->{'title_'.lang()} }}</h4>
                                        </a>
                                    </div>
                                @endforeach
                           </div>
                        </li>
                        
                        
                        <li>
                           <a href="{{ route('client.cart') }}">@lang('trans.cart') (<span>{{ cart_count() }}</span>)</a>
                        </li>
                        
                        @if(auth('client')->check())
                            <li>
                               <a href="{{ route('client.profile') }}">@lang('trans.profile')</a>
                            </li>
                        @else
                            <li>
                               <a href="{{ route('client.login') }}">@lang('trans.login')</a>
                            </li>
                            <li>
                               <a href="{{ route('client.register') }}">@lang('trans.register')</a>
                            </li>
                        @endif
                    
                        <li>
                           <a href="{{ route('client.about') }}">@lang('trans.about')</a>
                        </li>
                        <li>
                           <a href="{{ route('client.privacy') }}">@lang('trans.privacy')</a>
                        </li>
                        <li>
                           <a href="{{ route('client.terms') }}">@lang('trans.terms')</a>
                        </li>
                        <li>
                           <a href="{{ route('client.contact') }}">@lang('trans.contact_us')</a>
                        </li>
                    
                        {{-- Language Switcher --}}
                        <li class="mb-5">
                           <a href="{{ route('lang', lang('ar') ? 'en' : 'ar') }}">
                               {{ lang('ar') ? 'English' : 'العربية' }}
                           </a>
                        </li>
                    </ul>

                  </nav>
            </div>
        </div>
    </div>
</header>

<div class="container">
	<header class="d-flex flex-wrap align-items-center justify-content-center d-none d-md-block">
		<ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
			<li><a href="{{ route('client.home') }}" class="nav-link px-2 text-black {{ Route::is('client.home') ? 'border-bottom' : '' }}">@lang('trans.home')</a></li>
			<li><a href="{{ route('client.about') }}" class="nav-link px-2 text-black {{ Route::is('client.about') ? 'border-bottom' : '' }}">@lang('trans.about_us')</a></li>
			<li><a href="{{ route('client.products') }}" class="nav-link px-2 text-black {{ Route::is('client.products') ? 'border-bottom' : '' }}">@lang('trans.products')</a></li>
			<li><a href="{{ route('client.contact') }}" class="nav-link px-2 text-black {{ Route::is('client.contact') ? 'border-bottom' : '' }}">@lang('trans.contact_us')</a></li>
		</ul>
	</header>
</div>

<div class="modal fade" id="currencyModal" tabindex="-1" aria-labelledby="currencyModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content shadow-sm border-0 rounded-3">
            <div class="modal-header border-0 bg-primary text-white">
                <h5 class="modal-title" id="currencyModalLabel">@lang('trans.SELECTYOURCURRANCY')</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" style="margin: inherit;"></button>
            </div>
            <div class="modal-body p-0">
                <ul class="list-group list-group-flush" style="max-height: 400px; overflow-y: auto;">
                    @foreach(Countries() as $Country)
                    <li class="list-group-item list-group-item-action d-flex align-items-center gap-2">
                        <a href="{{ route('setCurrency', $Country->id) }}" class="d-flex align-items-center text-decoration-none text-dark w-100">
                            <img src="{{ asset($Country->image) }}" alt="" class="mx-3 rounded-circle" style="width: 30px; height: 30px; object-fit: cover;">
                            <span class="fw-semibold">{{ $Country->{'currancy_code_'.lang()} }}</span>
                            <span class="fw-semibold mx-3">{{ $Country->{'title_'.lang()} }}</span>
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
</div>

@push('js')
    <script>
    
        $(document).on("click", ".lg-category", function () {
            if($(window).width() > 980) {
                window.location.href = $(this).attr('data-href');
            }
        });
        
    </script>
@endpush




<form action="{{ route('client.products') }}" method="GET">
    @csrf
    <div id="search-box">
        <div class="container">
           <a class="close" href="#close"></a>
           <div class="search-main">
              <div class="search-inner">
                 <input name="title" type="text" id="inputSearch" placeholder="" required value="{{ request('title') }}">
                 <span class="search-info">Hit enter to search or ESC to close</span>
              </div>
           </div>
        </div>
     </div>     
</form>

@push('js')
    <script>
        $(document).on("click", ".list-group-item .toggle", function () {
            $(this).parent().find('ul').toggleClass('d-none');
        });

        $('a[href="#search"]').click(function() {
            event.preventDefault()
            $("#search-box").addClass("-open");
            setTimeout(function() {
                inputSearch.focus();
            }, 800);
        });

        $('a[href="#close"]').click(function() {
            event.preventDefault()
            $("#search-box").removeClass("-open");
        });

        $(document).keyup(function(e) {
            if (e.keyCode == 27) {
                $("#search-box").removeClass("-open");
            }
        });
    </script>
@endpush

@push('js')
    <style>
        #search-box {
            visibility: hidden;
            position: absolute;
            height: 100%;
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999999999;
        }
        
        #search-box .container {
            display: table;
            width: 100%;
            height: 100%;
        }
        
        #search-box .container .close {
            position: absolute;
            right: 32px;
            top: 32px;
            width: 32px;
            height: 32px;
            opacity: 0.3;
        }
        
        #search-box .container .close:hover {
            opacity: 1;
        }
        
        #search-box .container .close:before,
        #search-box .container .close:after {
            position: absolute;
            left: 15px;
            content: " ";
            height: 33px;
            width: 2px;
            background-color: white;
        }
        
        #search-box .container .close:before {
            transform: rotate(45deg);
        }
        
        #search-box .container .close:after {
            transform: rotate(-45deg);
        }
        
        #search-box .container .search-main {
            display: table-cell;
            vertical-align: middle;
        }
        
        #search-box .container .search-main .search-inner {
            width: 80%;
            margin: 0 auto;
        }
        
        #search-box .container .search-main form {
            position: relative;
        }
        
        #search-box .container .search-main input {
            background: transparent;
            border: none;
            box-shadow: none;
            padding: 12px 74px 12px 0;
            font-size: 72px;
            height: 84px;
            border-bottom: 2px solid white;
            display: block;
            color: white;
            margin-bottom: 0;
            width: 100%;
            transform: scale3d(0, 1, 1);
            transform-origin: 0% 50%;
            transition: transform 3s;
        }
        
        #search-box .container .search-main input:focus {
            outline: none;
        }
        
        #search-box .container .search-main button {
            border: 0;
            left: auto;
            outline: none;
            padding: 0;
            position: absolute;
            right: 0;
            top: 0.3em;
            bottom: 0.3em;
            background: transparent;
            font-size: 43px;
        }
        
        #search-box .container .search-main .search-info {
            display: block;
            color: white;
            text-align: right;
            float: right;
            margin-top: 4px;
        }
        
        #search-box.-open {
            background: rgba(0, 0, 0, 0.8);
            visibility: visible;
            animation: fadein 0.8s;
        }
        
        #search-box.-open .container .search-main input {
            transform: scale3d(1, 1, 1);
            transition-duration: 1s;
        }
        
        @keyframes fadein {
            from {
                opacity: 0;
            }
        
            to {
                opacity: 1;
            }
        }
    </style>
@endpush