<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="keyword" content="">
    <meta name="csrf_token" content="{{ csrf_token() }}">
    <!--Page Name-->
    <title> {{__('web.project')}} | {{$title ?? ''}}</title>
    <!--Page Icon-->
    <link rel="shortcut icon" href="{{url('')}}/assets/web/images/logo.svg" type="image/x-icon"/>
    <!--Bootstrap with RTL-->
    @if(getCurrentLocale() == 'ar')
     <link rel="stylesheet" href="{{url('')}}/assets/web/css/lib/bootstrap.rtl.css">
    <!--Bootstrap with LTR-->
    @else
    <link rel="stylesheet" href="{{url('')}}/assets/web/css/lib/bootstrap.min.css">
     @endif
    <!-- Bootstrap icons  -->
    <link rel="stylesheet" href="{{url('')}}/assets/web/css//lib/bootstrap-icons.css">
    <!-- Fontawosome icons  -->
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />    Css Files & Libraries -->
    <!-- Font & Libraries  -->
    <!--<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap" rel="stylesheet">-->
    <!--<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">-->
    <!--<link href="https://fonts.googleapis.com/css2?family=Alexandria:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">-->
    <!--<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">-->
    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="{{url('')}}/assets/web/css//lib/animate.css">
    <link rel="stylesheet" href="{{url('')}}/assets/web/css/lib/jquery.fancybox.css">
    <link rel="stylesheet" href="{{url('')}}/assets/web/css/lib/swiper.min.css">
    <link rel="stylesheet" href="{{url('')}}/assets/web/css/lib/jquery-ui.min.css">
    <link rel="stylesheet" href="{{url('')}}/assets/web/css/lib/price_range_style.css">
    <link rel="stylesheet" href="{{url('')}}/assets/web/css/lib/all.min.css">
    <link rel="stylesheet" href="{{url('')}}/assets/web/css/style.css">
    <link rel="stylesheet" href="{{url('')}}/assets/web/css/media.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <link  rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <!--With LTR -->
    @if(getCurrentLocale() == 'ar')
     <link rel="stylesheet" href="{{url('')}}/assets/web/css/style-ar.css">
    @endif
    <script type='text/javascript' src='https://platform-api.sharethis.com/js/sharethis.js#property=6450fdf526ac6d001952ae30&product=inline-share-buttons' async='async'></script>
</head>

<body>

    <div class="loader">
        <div id="loop" class="center"></div>
        <div id="bike-wrapper" class="center">
            <div id="bike" class="centerBike"></div>
        </div>
    </div>

@include('web.layouts.menu')
<!-- Modal -->
@yield('content')

@include('web.layouts.footer')
<!--Js Files & Libraries-->
<script src="{{url('')}}/assets/web/js/lib/jquery4.js"></script>
<script src="{{url('')}}/assets/web/js/lib/jquery-ui.min.js"></script>
<script src="{{url('')}}/assets/web/js/lib/popper.js"></script>
<script src="{{url('')}}/assets/web/js/lib/bootstrap.bundle.min.js"></script>
<script src="{{url('')}}/assets/web/js/lib/jquery.fancybox.js"></script>
<script src="{{url('')}}/assets/web/js/lib/swiper.js"></script>
<script src="{{url('')}}/assets/web/js/lib/wow.min.js"></script>
<script src="{{url('')}}/assets/web/js/lib/back-to-top.js"></script>
<script src="{{url('')}}/assets/web/js/lib/price_range_script.js"></script>
<script src="{{url('')}}/assets/web/js/lib/360deg.js"></script>
<script src="{{url('')}}/assets/web/js/main.js"></script>

@yield('inject_js')
<script>
    let url_fetch_countries = "{{route('fetch.cities')}}";
    let url_fetch_cities = "{{route('fetch.areas')}}";
    let url_fetch_favorite = "{{route('product.favorite')}}";
    let url_fetch_product_search = "{{route('search')}}";
    let url_delete_cart = "{{url(getCurrentLocale().'/cart/delete')}}";
</script>
@if(Session::has('error'))
    <script>
        setTimeout(
            function()
            {
                toasterError({!! json_encode(Session::get('error')) !!});
            }, 500);
    </script>
@endif
<script src="{{url('')}}/assets/web/js/custom/formAction.js"></script>
<script src="{{url('')}}/assets/web/js/custom/relatedAction.js"></script>
<script src="{{url('')}}/assets/web/js/custom/response.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
    $(window).on( "load" ,function () {
        $(".loader").fadeOut(1000);
    });
</script>
<script>
    var swiper = new Swiper('.brands_sec .brandsSwiper', {
        // loop: true,
        // centeredSlides: true,
        speed: 1000,
        slidesPerView: 2,
        spaceBetween: 15,
        autoplay: {
            delay: 2500,
        },
        navigation: {
            nextEl: '.brands_sec .swiper-button-next',
            prevEl: '.brands_sec .swiper-button-prev',
        },
        pagination: {
            el: '.brands_sec .swiper-pagination',
            clickable: true
        },
        breakpoints: {
            640: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            768: {
                slidesPerView: 3,
                spaceBetween: 20,
            },
            1024: {
                slidesPerView: 5,
                spaceBetween: 20,
            },
        }
    });
</script>
<script>
    if("{{session('success_alert')}}"){
        toasterSuccess("{{session('success_alert')}}");
    }

    if("{{session('error_alert')}}"){
        toasterError("{{session('error_alert')}}");
    }

    if("{{session('info_alert')}}"){
        toasterInfo("{{session('info_alert')}}");
    }

    function btnLoader(btn){
        btn.prop("disabled", true);
        btn.html('<span><img src="{{ asset('assets/admin/images/loading.gif') }}" width="20" alt="photo"></span> {{ __('main.please_wait') }}');
    }

    let doc = $(document);
    doc.on('submit', '.form-submit-loader', function(e) {
        let ele = $(this),
            submitBtn = ele.find(':submit');
        btnLoader(submitBtn);
    });
</script>

<script>
    // toggle saerch 
    // $(".search_box .form").hide();
    // $(".search_icon_btn").on("click", function(){
    //     $(this).find(".fa-search").toggleClass("fa-times");
    //     $(".search_box .form").fadeToggle();
    // })
</script>
<script>
    setTimeout(
        function()
        {
            calculateCart()
        }, 1000);
    function calculateCart()
{
    $.ajax
    ({
        url : "{{route('calculateCart')}}",
        type: 'GET',
        data: '',
        success:function(data)
        {
            if(data.count == 0)
            {
                $('#txt').hide()
                $('#cart_count').hide()
            }
            else
            {
                $('#txt').show()
                $('#cart_count').show()
            }
            $('#cart_txt').html(data.count+' | '+data.total)
            $('#cartProducts').html(data.carts)
        }
    })
}
</script>

</body>

</html>
