@php
  $generalInfo = DB::table('settings')->where('id',1)->first();
@endphp

<header class="position-fixed w-100 oshan-menu-fixed" id="header-hide">
    <nav class="navbar navbar-light navbar-expand-lg bg-white bg-faded osahan-menu">
        <div class="container">
            <a class="navbar-brand logo-width" href="{{url('/')}}"> 
            @if($generalInfo->preloader_image)
                <img src="{{url('/')}}/uploads/{{$generalInfo->preloader_image}}" alt="logo">
            @else
                <img src="{{url('/')}}/assets/frontend/img/Saj-Logo-01.png" alt="logo">
            @endif
            </a>
            <button class="navbar-toggler navbar-toggler-white" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="navbar-collapse" id="navbarNavDropdown">
            <div class="navbar-nav mt-2 mt-lg-0 margin-auto top-categories-search-main">
                <div class="top-categories-search">
                    <div class="input-group">
                    <input class="form-control" placeholder="Search for jewelery" id="globalsearchkey" @if(Request::segment(1)=='search') value="{{Request::segment(2)}}" @endif aria-label="Search for jewelery" type="text">
                    <span class="input-group-btn">
                    <button class="btn btn-secondary" type="button" onclick="globalSearch()"><i class="mdi mdi-file-find"></i> Search</button>
                    </span>
                    </div>
                </div>
            </div>
        <div class="my-2 my-lg-0">
            
            
          <ul class="list-inline main-nav-right">
            <li class="list-inline-item cart-btn d-none d-md-inline-block">
               
                               <i class="mdi mdi-cellphone"></i><a href="tel:@if($generalInfo) {{isset($contact_no[$i])?$contact_no[$i]:'0422 223 2710'}}  @endif">@if($contact_no[$i]) {{isset($contact_no[$i])?$contact_no[$i]:'0422 223 2710'}} @endif</a>
                          </li>
            <li class="list-inline-item cart-btn d-none d-md-inline-block">
              <a href="mailto:@if($generalInfo) {{isset($generalInfo->email)?$generalInfo->email:'contact@shriarthijewellery.com'}} @endif" class="btn btn-link"><i class="mdi mdi-email"></i> @if($generalInfo) {{isset($generalInfo->email)?$generalInfo->email:'contact@shriarthijewellery.com'}} @endif</a>
            </li>
            @if(Auth::check())
              <li class="list-inline-item dropdown osahan-top-dropdown">
                  <a class="btn btn-theme-round dropdown-toggle dropdown-toggle-top-user" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      
                      @if(isset(Auth::user()->profile_picture))
    @php 
        $profileimg = url('/')."/uploads/members/".Auth::user()->profile_picture;
        if(Auth::user()->sm!='') {
            $profileimg = Auth::user()->profile_picture;
        } 
    @endphp
    <img src="{{$profileimg}}">
@else 
    <img src="{{url('/')}}/assets/frontend/img/user.png">
@endif
                  
                  <strong>Hi</strong>@if(Auth::user()->name!="") {{Auth::user()->name}} @else User @endif
                  </a>
                  <div class="dropdown-menu dropdown-menu-right dropdown-list-design">
                  <a href="{{url('/')}}/user_profile" class="dropdown-item"><i aria-hidden="true" class="mdi mdi-account-outline"></i> My Profile</a>
                  <a href="{{url('/')}}/mychit" class="dropdown-item"><i aria-hidden="true" class="mdi mdi-format-list-bulleted"></i> My Gold Saving </a>
                  <a href="{{url('/')}}/myorders" class="dropdown-item"><i aria-hidden="true" class="mdi mdi-format-list-bulleted"></i> Order List</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="javascript::void(0)" data-confirm='Are you sure you want to logout?'><i class="mdi mdi-lock"></i> Logout</a>
                  </div>
              </li>
            @else
            <li class="list-inline-item" data-toggle="tooltip" data-placement="bottom" title="Login/Sign Up">
                <a href="#" data-target="#login-example-modal" data-toggle="modal" class="btn btn-link login-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="36" height="36" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
                    viewBox="0 0 916 1791"
                     xmlns:xlink="http://www.w3.org/1999/xlink">
                     <defs>
                      <style type="text/css">
                        .fil0 {fill:#282828}
                        .fil1 {fill:#4A3A2B}
                        .fil6 {fill:#81071E}
                        .fil2 {fill:#D69747}
                        .fil5 {fill:#D89D01}
                        .fil3 {fill:#E1AB63}
                        .fil4 {fill:yellow}
                      </style>
                     </defs>
                     <g id="Layer_x0020_1">
                      <metadata id="CorelCorpID_0Corel-Layer"/>
                      <rect class="fil0" width="916" height="1682" rx="439" ry="464"/>
                      <path class="fil1" d="M439 0l20 0 0 1682 -20 0c-241,0 -439,-198 -439,-439l0 -804c0,-241 198,-439 439,-439z"/>
                      <path class="fil2" d="M439 0l37 0c135,0 256,61 336,157l0 361c6,-2 12,-3 18,-3 36,0 66,30 66,67 0,37 -30,67 -66,67 -6,0 -13,-1 -19,-3 -15,163 -145,293 -308,308l0 93c39,8 76,27 106,57l138 138c130,130 -6,359 -58,501l-214 0c-11,1 -23,1 -35,0l-222 0c-47,-142 -175,-374 -49,-501l138 -138c30,-30 67,-49 106,-57l0 -93c-162,-15 -293,-144 -308,-306 -4,0 -8,1 -12,1 -36,0 -66,-30 -66,-67 0,-37 30,-67 66,-67 3,0 7,0 10,1l0 -359c81,-96 202,-157 336,-157z"/>
                      <path class="fil3" d="M439 0l12 0 0 1744c-3,0 -7,-1 -11,-1l-222 0c-47,-142 -175,-374 -49,-501l138 -138c30,-30 67,-49 106,-57l0 -93c-162,-15 -293,-144 -308,-306 -4,0 -8,1 -12,1 -36,0 -66,-30 -66,-67 0,-37 30,-67 66,-67 3,0 7,0 10,1l0 -359c81,-96 202,-157 336,-157z"/>
                      <g id="_2544544105664">
                       <path class="fil4" d="M77 643l0 0c6,0 11,5 11,11l0 87 -23 0 0 -87c0,-6 5,-11 12,-11z"/>
                       <path class="fil4" d="M55 771l43 0 0 43c0,12 -10,21 -21,21l0 0c-12,0 -22,-9 -22,-21l0 -43z"/>
                       <circle class="fil5" cx="77" cy="755" r="28"/>
                      </g>
                      <g id="_2544544106496">
                       <path class="fil4" d="M843 643l0 0c6,0 11,5 11,11l0 87 -23 0 0 -87c0,-6 6,-11 12,-11z"/>
                       <path class="fil4" d="M821 771l43 0 0 43c0,12 -9,21 -21,21l0 0c-12,0 -22,-9 -22,-21l0 -43z"/>
                       <circle class="fil5" cx="843" cy="755" r="28"/>
                      </g>
                      <path class="fil4" d="M462 691c18,0 33,15 33,33 0,18 -15,33 -33,33 -15,0 -28,-10 -32,-24l18 -5c2,6 8,10 14,10 8,0 14,-6 14,-14 0,-8 -6,-14 -14,-14 -2,0 -5,0 -7,1l-9 -16c5,-3 10,-4 16,-4z"/>
                      <circle class="fil6" cx="455" cy="426" r="23"/>
                      <path class="fil1" d="M439 0l37 0c135,0 256,61 336,157l-17 292c-189,3 -283,-56 -336,-164 -43,167 -200,184 -367,167l9 -293c81,-97 203,-159 338,-159z"/>
                      <path class="fil0" d="M459 0l17 0c135,0 256,61 336,157l14 292c-207,27 -331,-34 -367,-164l0 2 0 -287z"/>
                      <polygon class="fil4" points="405,1220 303,1108 344,1075 460,1185 "/>
                      <path class="fil6" d="M748 1598c-16,41 -42,110 -56,146l-83 -1 -134 0c-11,1 -23,1 -35,0l-222 0c-47,-142 -175,-374 -49,-501l134 -134 484 196c32,88 9,188 -39,294z"/>
                      <polygon class="fil4" points="550,1041 9,1427 146,1791 868,1278 "/>
                      <polygon class="fil6" points="127,1742 27,1475 593,1073 826,1247 "/>
                     </g>
                    </svg>   
                </a>
            </li>
            @endif
            <li class="list-inline-item cart-btn" data-toggle="tooltip" data-placement="bottom" title="My Jewel Box">
                <a href="#" data-toggle="offcanvas" class="btn btn-link">
                    <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="36" height="36" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
                    viewBox="0 0 6840 7539"
                     xmlns:xlink="http://www.w3.org/1999/xlink">
                    <defs>
                      <style type="text/css">
                        .fil-1 {fill:#194F69}
                        .fil-0 {fill:#286E88}
                        .fil-3 {fill:#BFCBD7}
                        .fil-2 {fill:#EBEEF3}
                        .fil-7 {fill:#FF0066}
                        .fil-5 {fill:#FF6600}
                        .fil-6 {fill:#FFCC00}
                        .fil-4 {fill:yellow}
                      </style>
                     </defs>
                     <g id="Layer_x0020_1">
                      <metadata id="CorelCorpID_0Corel-Layer"/>
                      <g id="_2542702232352">
                       <rect class="fil-0" y="5443" width="6840" height="2096"/>
                       <polygon class="fil-1" points="6840,5443 0,5443 1105,3912 480,643 927,0 5929,0 6393,625 5804,3876 "/>
                       <polygon class="fil-0" points="927,0 480,643 6393,643 5929,0 "/>
                       <polygon class="fil-2" points="1731,3912 730,5234 6125,5234 5125,3876 5607,1018 1284,1018 "/>
                       <polygon class="fil-3" points="5127,3880 5125,3876 5607,1018 1284,1018 1726,3880 "/>
                       <g>
                        <path class="fil-4" d="M1967 4031c369,1118 2375,1451 2922,-7 -244,1635 -2866,1282 -2922,7z"/>
                        <path class="fil-5" d="M1967 3913c369,1118 2375,1450 2922,-7 -244,1635 -2866,1282 -2922,7z"/>
                        <ellipse class="fil-4" cx="3428" cy="4907" rx="239" ry="298"/>
                        <ellipse class="fil-6" cx="3428" cy="4907" rx="175" ry="218"/>
                        <ellipse class="fil-7" cx="3428" cy="4907" rx="103" ry="128"/>
                       </g>
                      </g>
                     </g>
                    </svg>  
                    @php 
                        $total_price = 0; $cart_count =0;
                        if(session('cart')) {
                          if(count(session('cart'))>0) {
                            foreach (session('cart') as $item)
                            { 
                              $unit_price = $item['unit_price'] * $item['quantity'];
                              $total_price = $total_price + $unit_price;
                            }
                            $cart_count = count(session('cart'));
                          }    
                        }
                    @endphp  
                    <small class="cart-value cartProductCount">{{$cart_count}}</small>
                </a>
            </li>
          </ul>
        </div>
        </div>
        </div>
        </nav>
        <nav class="navbar navbar-expand-lg navbar-light bg-white osahan-menu-2 pad-none-mobile">
        <div class="container">
        <div class="collapse navbar-collapse" id="navbarText">
        <span class="dis-scroll" title="Scroll Left" id="slideleft"><i class="fas fa-chevron-left fa-2x"></i></span> <!-- text-dark -->   
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0 margin-auto scroll-menu" id="mobile-navigation" style="max-width: calc(100vw - 97px); overflow:hidden;scroll-behavior: smooth;">
        <li class="nav-item mr-0 mr-lg-3 mb-0 mb-lg-2">
        <a class="nav-link badge badge-light shop" href="{{url('/')}}">Home</a>
        </li>

        @php
            $main_menu = DB::table('website_menu')->where('status','1')->orderBy('id','ASC')->get()->toArray();
        @endphp

        @foreach($main_menu as $key=>$item)
            @php
                $submenus = DB::table('jewellery_type')->where('menu_id',$item->id)->where('status','1')->orderBy('id','ASC')->get()->toArray();
            @endphp

            <li class="nav-item dropdown mr-0 mr-lg-3 mb-0 mb-lg-2 has-megamenu">
                <a class="nav-link badge badge-light @if(count($submenus)>0) dropdown-toggle @endif" href="{{url('/')}}/shop/{{$item->id}}" @if(count($submenus)>0) data-toggle="dropdown" @endif>{{$item->menu_name}}</a>
                @if(count($submenus)>0)
                <div class="dropdown-menu megamenu" role="menu">
                    <div class="row m-0">
                        <div class="col-md-5 mt-3 order-lg-2"> 
                            <div class="col-megamenu">
                                <h6 class="title">Style you wish for</h6>
                                <div class="row">
                                    <div class="col-md-12">
                                        <ul class="list-unstyled column-split">
                                          @foreach($submenus as $subkey=>$subitem)
                                            <li class="mt-2"><a href="{{url('/')}}/shop/style/{{$item->id}}/{{$subitem->id}}"><img src="{{url('/')}}/uploads/jewels_images/{{$subitem->jewel_category_images}}" alt="" width="60" height="60"> {{$subitem->jewellery_type}}</a></li>
                                          @endforeach
                                        </ul>  
                                    </div>
                                </div>
                            </div> 
                        </div>
                        <div class="col-md-2 mt-3 order-lg-3">
                            <div class="col-megamenu">
                            <h6 class="title">Metal Type</h6>
                                @php
                                    $metals = DB::table('metal')->where('status','1')->orderBy('id','ASC')->get()->toArray();
                                @endphp
                                <ul class="list-unstyled">
                                  @foreach($metals as $key=>$metal_item)
                                    <li class="p-2"><a href="{{url('/')}}/shop/metal/{{$item->id}}/{{$metal_item->id}}"> {{$metal_item->metal}}</a></li>
                                  @endforeach
                                </ul>
                            </div> 
                        </div>
                        <div class="col-md-2 mt-3 order-lg-4">
                            <div class="col-megamenu">
                            <h6 class="title">See Jewels</h6>
                                <ul class="list-unstyled">
                                    <li class="p-2"><a href="{{url('/')}}/shop/price/{{$item->id}}/1">Under <i class="fa fa-rupee-sign"></i> 10k</a></li>
                                    <li class="p-2"><a href="{{url('/')}}/shop/price/{{$item->id}}/2"><i class="fa fa-rupee-sign"></i> 10k - <i class="fa fa-rupee-sign"></i> 20k</a></li>
                                    <li class="p-2"><a href="{{url('/')}}/shop/price/{{$item->id}}/3"><i class="fa fa-rupee-sign"></i> 20k - <i class="fa fa-rupee-sign"></i> 30k</a></li>
                                    <li class="p-2"><a href="{{url('/')}}/shop/price/{{$item->id}}/4">Above <i class="fa fa-rupee-sign"></i> 30k</a></li>
                                    <li class="p-2"><a class="badge badge-danger p-2" href="{{url('/')}}/shop/{{$item->id}}">View all {{$item->menu_name}}&nbsp;<i class="fa fa-arrow-right"></i></a></li>
                                </ul>
                            </div>  
                        </div>    
                        <div class="col-md-3 mt-3 order-lg-1">
                            <div class="col-megamenu">
                                @if($item->banner_images) 
                                  <img class="img-fluid" src="{{url('/')}}/uploads/banner_images/{{ $item->banner_images }}" alt=""> 
                                  @if($item->menu_name=='Ring')
                                    <div class="text-center mt-3"><a class="font-weight-bold text-danger" href="{{url('/')}}/ring-size-calculator" class="mt-3">Ring Size Calculator </a></div>
                                  @endif
                                @endif
                            </div> 
                        </div>
                    </div>
                </div> 
                @endif
            </li>
        @endforeach

        <li class="nav-item mr-0 mr-lg-3 mb-0 mb-lg-2">
        <a class="nav-link badge badge-light" href="{{url('/shop')}}">All Jewellery</a>
        </li>
        <li class="nav-item mr-0 mr-lg-3 mb-0 mb-lg-2">
        <a class="nav-link badge badge-light" href="#">Try Jewellery</a>
        </li>
        <li class="nav-item mr-0 mr-lg-3 mb-0 mb-lg-2">
        <a class="nav-link badge badge-light" href="{{url('/chits')}}">Gold Saving Scheme</a>
        </li>
        <li class="nav-item mr-0 mr-lg-3 mb-0 mb-lg-2">
        <a class="nav-link badge badge-light" href="{{url('/about-us')}}">About SAJ</a>
        </li>
        <li class="nav-item mr-3 mb-0 mb-lg-2">
        <a class="nav-link badge badge-light" href="{{url('/contact-us')}}">Contact Us</a>
        </li>
        </ul>
        <span class="dis-scroll" title="Scroll Right" id="slideright"><i class="fas fa-chevron-right fa-2x"></i></span> <!-- text-dark -->
        </div>
        </div>
        </nav>
</header>

<!-- <a href="{{ url('/') }}/chits" class="position-fixed btn btn-primary chit-button">
    Go to<br>Chit
    <span><img src="{{ url('/') }}/assets/frontend/img/gold-coin.gif" width="100px" height="100px"></span>
</a> -->
<style>
@media screen and (max-width: 1366px) {
    .top-categories-search .form-control {
        min-width: 202px!important;
    }
}

    .dis-scroll {
        display: none;
        color: #001e38;
        cursor: pointer;
        background-color: #fff;
        padding: 2px;
    }
    .dis-scroll i {
        color: #001e38;
        font-size: 15px;
        top: -3px;
        position: relative;
    }
    @media screen and (min-width: 992px){
        .dis-scroll {
            display: block;
        }
    }
    @media screen and (max-width: 991px){
        .dis-scroll {
            display: block;
        }
        .osahan-menu-2 .nav-link {
            color: #333 !important;
            font-size: 14px;
            padding: 8px 14px !important;
            text-transform: uppercase;
            white-space: nowrap !important;
            display: flex;
            align-items: center;
            min-width: 120px;
            justify-content: center;
            border-radius: 0px !important;
        }
    }
</style>
<script>
    window.onresize = reportWindowSize;
    $( document ).ready(function() {
        reportWindowSize();
    });
    function reportWindowSize(e){
    const buttonRight = document.getElementById('slideright');
    const buttonLeft = document.getElementById('slideleft');
    const scrollMenu = document.getElementsByClassName('scroll-menu')[0];
        console.log(scrollMenu)
    if(scrollMenu.scrollWidth > scrollMenu.offsetWidth){
        buttonRight.onclick = function () {
          scrollMenu.scrollLeft += 400;
        };
        buttonLeft.onclick = function () {
          scrollMenu.scrollLeft -= 400;
        };
        $("#slideright").show();
        $("#slideleft").show();
    }
    else{
        console.log('Came')
        $("#slideright").hide();
        $("#slideleft").hide();
    }
    }
</script>