<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" 
	class="dark"
	data-theme-color="{{ $theme_style }}"
>
<head>
	
	<!-- PAGE TITLE HERE -->
	<title>{{ !empty($seoMeta['title']) ? $seoMeta['title'] : config('Site.title') }}</title>

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    {{-- Meta Tags --}}
    @include('elements.meta')
    {{-- Meta Tags --}}

	<!-- MOBILE SPECIFIC -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="canonical" href="{{ url()->current() }}" />

    <!-- FAVICONS ICON -->
    <link rel="icon" type="image/png" sizes="32x32" href="{{ $site_favicon }}">

	<!-- STYLESHEETS -->
	<link rel="stylesheet" href="{{ theme_asset('icons/font-awesome/css/all.min.css') }}">
	<link rel="stylesheet" href="{{ theme_asset('icons/line-awesome/css/line-awesome.min.css') }}">
	<link rel="stylesheet" href="{{ theme_asset('vendor/animate/animate.min.css') }}">
	<link rel="stylesheet" href="{{ theme_asset('vendor/swiper/swiper-bundle.min.css') }}">
	<link rel="stylesheet" href="{{ theme_asset('vendor/lightgallery/dist/css/lightgallery-bundle.css') }}">
	<link rel="stylesheet" href="{{ theme_asset('css/style.css') }}">
	<link rel="stylesheet" href="{{ theme_asset('css/custom.css') }}">
	<link rel="stylesheet" href="{{ asset('css/default-element.css') }}">

	<!-- Google Fonts -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Manrope:wght@200..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Protest+Riot&display=swap" rel="stylesheet">
</head>
<body class="selection:bg-primary selection:text-white">
	@if ($page_loading_on)

	 <div class="preloader-wrapper w-screen h-screen z-999999 fixed top-0 left-0 dark:bg-secondary bg-white" id="loading-area">
		@if(!empty(config('ThemeOptions.preload_image')))
			@if (is_file(storage_path('app/public/theme-options/'.config('ThemeOptions.preload_image'))))
			<img class="rotate-360" src="{{ asset('storage/theme-options/'.config('ThemeOptions.preload_image')) }}" alt="">
			@endif
		@else
		<div class="preloader">
			<div class="dot dot-1"></div>
			<div class="dot dot-2"></div>
			<div class="dot dot-3"></div>
		</div>
		@endif
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
			<defs>
			<filter id="goo">
				<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
				<feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 21 -7"/>
			</filter>
			</defs>
		</svg>
	</div>
	@endif

	<div class="page-wraper">

		<!-- header -->
		@if (!empty($header_style))
			@include('elements/header/'.$header_style)
		@endif
		<!-- header END -->
		<div id="smooth-wrapper">
            <div id="smooth-content">
				<div class="page-content">

					@yield('content')

					<!-- Footer -->
					@if(!empty($footer_on))
						@include('elements/footer/'.$footer_style)
					@endif
					<!-- Footer END-->
				
				</div>
			</div>
		</div>


		{{-- <button class="scroltop fa fa-chevron-up" ></button> --}}

	</div>

	<div id="videoDialog" class="dialog hidden fixed z-9999 left-0 top-0 size-full overflow-auto bg-black/80 items-center justify-center h-screen">
        <div class="dialog-content m-auto md:p-50 rounded-lg md:w-[80%] max-w-1200 relative max-md:h-400 overflow-hidden">
            <span id="closeBtn" class="close absolute top-0 right-0 text-white/80 text-2xxl font-bold cursor-pointer size-40 flex items-center justify-center">
                <i class="fa-solid fa-xmark"></i>
            </span>
            <div id="videoContainer"></div>
        </div>
    </div>

	<button id="scrollProgress" title="Scroll to top"
		class="fixed z-999 right-20 bottom-20 size-40 rounded-full dark:bg-white dark:text-black bg-bodybg text-white cursor-pointer opacity-0 pointer-events-none duration-500 flex items-center justify-center">
		<span class="icon text-xs relative z-1"><i class="fa-solid fa-chevron-up"></i></span>
		<svg class="absolute top-0 left-0 -rotate-90" width="40" height="40">
			<circle class="dark:stroke-black stroke-white" cx="20" cy="20" r="17" stroke="#000" stroke-width="2" fill="none"
				stroke-linecap="round" stroke-dasharray="100.53" stroke-dashoffset="100.53"></circle>
		</svg>
	</button>


	<!-- JAVASCRIPT FILES ========================================= -->
	<script>
		var dynamicDate = "{{ $comingsoon_launch_date ?? date('Y-m-d', strtotime('+1 day')) }}";
		var baseUrl = '{{ url('/') }}';
	</script>
	<script src="{{ theme_asset('js/jquery.min.js') }}"></script>
	@stack('inline-scripts')
	<script src="{{ theme_asset('vendor/gsap/gsap.min.js') }}"></script>
	<script src="{{ theme_asset('vendor/gsap/MotionPathPlugin.min.js') }}"></script>
	<script src="{{ theme_asset('vendor/gsap/ScrollTrigger.min.js') }}"></script>
	<script src="{{ theme_asset('vendor/gsap/ScrollSmoother.js') }}"></script>
	<script src="{{ theme_asset('vendor/gsap/Draggable.min.js') }}"></script>
	<script src="{{ theme_asset('vendor/gsap/InertiaPlugin.min.js') }}"></script>
	<script src="{{ theme_asset('vendor/SplitText/SplitText.min.js') }}"></script>
	<script src="{{ theme_asset('vendor/swiper/swiper-bundle.min.js') }}"></script>
	<script src="{{ theme_asset('vendor/apexchart/apexcharts.min.js') }}"></script>
	<script src="{{ theme_asset('vendor/masonry/masonry-4.2.2.js') }}"></script>
	<script src="{{ theme_asset('vendor/matter/matter.js') }}"></script>
	<script src="{{ theme_asset('vendor/lightgallery/dist/lightgallery.min.js') }}"></script>
	<script src="{{ theme_asset('vendor/lightgallery/dist/plugins/thumbnail/lg-thumbnail.min.js') }}"></script>
	<script src="{{ theme_asset('vendor/lightgallery/dist/plugins/zoom/lg-zoom.min.js') }}"></script>
	<script src="{{ theme_asset('vendor/three/three.js') }}"></script>
    <script src="{{ theme_asset('vendor/hovereffect/hover-effect.js') }}"></script>
	<script src="{{ theme_asset('js/throwable.js') }}"></script>
	<script src="{{ theme_asset('js/animation.js') }}"></script>
	<script src="{{ theme_asset('js/chart.js') }}"></script>
	<script src="{{ theme_asset('js/custom.carousel.js') }}"></script>
	<script src="{{ theme_asset('js/dz.carousel.js') }}"></script>
	<script src="{{ theme_asset('js/custom.js') }}"></script>

	<script src="{{ theme_asset('js/w3cms_frontend.min.js') }}"></script> <!-- W3cms_Frontend JS -->

	@stack('inline-swiper')

</body>
</html>
