
<div class="navs-container">

    <!-- top_nav -->
    <div class="top_nav">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-6">
                    <div class="p">
                        {!! $header->description !!}
                    </div>
                </div>
                <div class="col-6">
                    <div class="social_links d-flex align-items-center justify-content-end">
                        <span class="txt fw-bold me-3"> {{__('web.follow_us')}} : </span>
                        @if($settings['whatsapp'])
                            <a target="_blank" href="https://api.whatsapp.com/send/?phone={{$settings['whatsapp']}}&text&type=phone_number&app_absent=0"><i class="fab fa-whatsapp"></i></a>
                        @endif
                        @if($settings['instagram'])
                            <a target="_blank" href="{{$settings['instagram']}}"><i class="fab fa-instagram"></i></a>
                        @endif
                        @if($settings['twitter'])
                            <a target="_blank" href="{{$settings['twitter']}}"><i class="fab fa-twitter"></i></a>
                        @endif
                        @if($settings['telegram'])
                            <a target="_blank" href="{{$settings['telegram']}}"><i class="fab fa-telegram-plane"></i></a>
                        @endif
                        @if($settings['facebook'])
                            <a target="_blank" href="{{$settings['facebook']}}"><i class="fab fa-facebook-f"></i></a>
                        @endif
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- middle_nav -->
    <div class="middle_nav">
        <div class="container">
            <div class="inner">
                <div class="row align-items-center">
                    <div class="col-lg-4 col-6">
                        <div class="d-flex align-items-center">
                            <div class="dropdown">
                                <button class=" dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                    <img src="{{url('')}}/assets/web/images/icons/user.svg" class="icon icon_user me-2" alt="" /> {{__('web.profile')}}
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                    @if(auth()->user())
                                        <li><a class="dropdown-item" href="{{route('web.profile')}}"> {{__('web.profile')}} </a></li>
                                        <li><a class="dropdown-item" href="{{route('web.logout')}}"> {{__('web.logout')}} </a></li>
                                    @else
                                        <li><a class="dropdown-item" href="{{route('web.login')}}"> {{__('web.login')}} </a></li>
                                        <li><a class="dropdown-item" href="{{route('web.regist')}}"> {{__('web.regist')}} </a></li>
                                    @endif
                                </ul>
                            </div>
                            <div class="dropdown ms-4">
                                <button class=" dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                    <img src="{{url('')}}/assets/web/images/icons/{{getCurrentLocale() == 'ar'? 'flag-ar.svg' : 'flag-en.svg'}}" class="icon icon_flag me-2" alt="" /> {{__('web.languages.'.currentLanguage()->local) }}
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                    <li><a class="dropdown-item" href="{{LaravelLocalization::getLocalizedUrl('ar')}}"> العربية   </a></li>
                                    <li><a class="dropdown-item" href="{{LaravelLocalization::getLocalizedUrl('en')}}"> English   </a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-6 order_md_1">
                        <a href="{{route('web.home')}}"> <img src="{{url('')}}/assets/web/images/logo.svg" class="logo" alt="" /> </a>
                    </div>
                    
                    <div class="col-lg-4 col-12">
                        <div class="nav_end d-flex align-items-center justify-content-end">
                            <a href="{{route('web.favorite')}}" class="nav_link">
                                <img src="{{url('')}}/assets/web/images/icons/heart.svg" alt="" />
                            </a>
                            <a href="#" class="nav_link" id="searchToggler">
                                <img src="{{url('')}}/assets/web/images/icons/search.svg" alt="" />
                            </a>
                            <a href="{{route('cart.index')}}" class="nav_link">
                                <img src="{{url('')}}/assets/web/images/icons/cart.svg" alt="" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Start main-nav-->
    <nav class="navbar navbar-expand-lg navbar-light ">
        <div class="container">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link {{\Request::route()?->getName() == 'web.home' ? 'active' : ''}}" aria-current="page" href="{{route('web.home')}}"> {{__('web.home')}}  </a>
                    </li>
                    <li class="nav-item has_dropdown">
                        <a class="nav-link {{\Request::route()?->getName() == 'web.product' ? 'active' : ''}}" href="{{route('web.product')}}">{{__('web.categories')}} </a>
                        <div class="drop_down">
                            @foreach($main_categories as $row)
                            <a href="{{route('web.product').'?category_id='.$row->id}}">   {{$row->title}}    </a>
                            @endforeach
                        </div>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{\Request::route()?->getName() == 'web.aboutus' ? 'active' : ''}}" href="{{route('web.aboutus')}}">{{__('web.aboutus')}}</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link {{\Request::route()?->getName() == 'contactus.index' ? 'active' : ''}}" href="{{route('contactus.index')}}"> {{__('web.contactus')}}</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
            <!-- Start search-wrapper -->
        <div class="search-wrapper">
            <div class="search-inner">
                <div class="container">
                    <div class="col-lg-10 mx-auto">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h6 class="title"> {{__('web.search_in')}}</h6>
                            <button class="close-butn" id="dismissSearch"><i class="fas fa-times"></i></button>
                        </div>
                        <form method='get' action="{{route('web.search')}}">
                            <div class="form-group mb-0">
                                <input class="form-control" name="search" placeholder="{{__('web.write_here')}} ..."/>
                                <button class="submit-butn"> <i class="fa-regular fa-magnifying-glass"></i> </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="overlay"></div>
        </div>
</div>
