<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<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="{{ $settings['meta_description'] }} - {{ $meta_description ?? ($title ?? '') }}" />
    <meta name="keywords" content="{{ $settings['keywords'] }} , {{  $keywords ??  ($title ?? '') }}" />

    <title>{{ $settings['website_name'] }} - {{ ($title ?? '') }}</title>

    <link rel="shortcut icon" href="{{ getImage($settings['website_logo']) }}" type="image/x-icon" />
    
    {{-- Start Theme CSS Files --}}
    <!--Css Files & Libraries-->
    @if ('en' == $lang)
        <!--With ltr -->
        <link rel="stylesheet" href="{{ asset('assets/web/css/lib/bootstrap-ltr.min.css') }}"/>
    @else        
        <!--With RTL -->
        <link rel="stylesheet" href="{{ asset('assets/web/css/lib/bootstrap-rtl.min.css') }}"/>
    @endif

    <link href="https://fonts.googleapis.com/css2?family=Marcellus&family=Poppins:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/animate.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/all.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/owl.carousel.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/owl.theme.default.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/jquery.fancybox.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/swiper.min.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/web/css/styles.css') }}" />
    @if ('ar' == $lang)
        <!--With RTL -->
        <link rel="stylesheet" href="{{ asset('assets/web/css/style_ar.css') }}" />
    @endif
    {{-- End Theme CSS Files --}}

    {{-- Must Be Called  --}}
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">


</head>

<body>
    @include('web.layouts.header')
    
    <main>
        @yield('content')
    </main>

    @include('web.layouts.footer')

    <script src="{{ asset('assets/web/js/lib/jquery-3.0.0.min.js') }} "></script>
    <script src="{{ asset('assets/web/js/lib/jquery-migrate-3.0.0.min.js') }} "></script>
    <script src="{{ asset('assets/web/js/lib/popper.min.js') }} "></script>
    <script src="{{ asset('assets/web/js/lib/bootstrap.min.js') }} "></script>
    <script src="{{ asset('assets/web/js/lib/wow.min.js') }} "></script>
    <script src="{{ asset('assets/web/js/lib/jquery.fancybox.js') }} "></script>
    <script src="{{ asset('assets/web/js/lib/owl.carousel.min.js') }} "></script>
    <script src="{{ asset('assets/web/js/lib/swiper.min.js') }} "></script>
    <script src="{{ asset('assets/web/js/lib/jquery.waypoints.min.js') }}"></script>
    <script src="{{ asset('assets/web/js/lib/jquery.counterup.js') }}"></script>
    <script src="{{ asset('assets/web/js/main.js') }} "></script>


    {{-- Must Be Called  --}}
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>
    <script src="{{ asset('assets/web/js/lib/axios.min.js') }}"></script>
    <script>
        axios.defaults.headers.common = {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        };
    </script>
    <script src="{{ asset('assets/web/js/actions.js') }}"></script>

    @yield('content_js')
</body>

</html>
