@extends('frontend.layouts.app')
@section('title')
    About Us
@endsection
@section('content')
		<div class="pageInerBnrSec__wr">
			<div class="container position-relative z-1">
				<div class="pageInerBnrBox aspect-lg-unset">
					<picture class="inrBnrFigure">
						<img src="{{uploaded_asset(get_setting('about_us_section_one_image'), 'images/about-banner-bg.jpg')}}" loading="lazy" class="img-fluid" alt="inner-banner-bg" width="1680" height="1120">
					</picture>
					<div class="inrBnrBlock align-items-sm-end align-items-center">
						<div class="inrBnrContentBlock text-center text-lg-start">
							<h2 class="inrBnrBlockTitle">{{get_setting('about_sec_one_banner_title')}}</h2>
							<div class="inrBnrContent">
								<p>{{get_setting('about_sec_one_banner_sub_title')}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="aboutUsSec__wr aspect-lg-unset mt-lg-n32px pt-lg-80px-plus-32px mt-sm-n4 pt-lg-48px-plus-24px pt-5 pb-lg-80px pb-5">
			<picture class="aboutUsBgOvrlayFigure__wr">
				<img src="images/overlay-tri-angle-bg.jpg" loading="lazy" class="img-fluid" alt="overlay-tri-angle-bg" width="2560" height="1707">
			</picture>
			<div class="container position-relative">
				<div class="aboutUsContentBlock text-center text-lg-start">
					<div class="aboutUsContentHead mb-lg-40px mb-4">
						<h2 class="aboutUsContentHeadTitle">{{get_setting('about_sec_one_heading_first')}}<span>{{get_setting('about_sec_one_heading_second')}}</span></h2>
					</div>
					<div class="aboutUsContent">
						<h6 class="aboutUsContentSubTitle">{{get_setting('about_sec_one_sub_heading')}}</h6>
						{!! get_setting('about_sec_one_desc') !!}
					</div>
				</div>
			</div>
		</div>
		<div class="abtCounterSec__wr bg-secondary text-white py-lg-80px py-5">
			<span class="abtCounterOvrlayElmnt d-none d-lg-block">
				<img src="images/why-cta-overlay-shape.png" loading="lazy" class="img-fluid" alt="home-banner-overlay-shape" width="" height="">
			</span>
			<div class="container position-relative">
				<div class="row row-gap-4 gx-lg-5vw justify-content-lg-center align-items-lg-center">
					<div class="col-xxl-5 col-lg-6 col-12">
						<div class="abtCounterContentBlock text-center text-lg-start">
							<div class="abtCounterContentHead">
								<h2 class="abtCounterContentHeadTitle">{{get_setting('about_sec_tow_title')}}</h2>
							</div>
							<div class="abtCounterContent">
								{!! get_setting('about_sec_tow_desc') !!} 
							</div>
						</div>
					</div>
					<div class="col-xxl-5 col-lg-6 col-12">
						<div class="abtCounterParent">
							<div class="row g-0">
								@if (loopType(json_decode(get_setting('about_sec_tow_block_count_value'), true)))
                                    @foreach (json_decode(get_setting('about_sec_tow_block_count_value'), true) as $key => $value)
										<div class="col-6">
											<div class="abtCounterBlock">
												<div class="abtCounterNumBlock">
													<span class="count start">{{$value}}</span>
													<span>{{ getLoopSetting('about_sec_tow_block_count_symbol', $key) }}</span>
												</div>
												<p>{{ getLoopSetting('about_sec_tow_block_count_title', $key) }}</p>
											</div>
										</div>
									@endforeach
								@endif
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="abtMisionSec__wr py-lg-80px py-5">
			<div class="container position-relative">
				<div class="row row-gap-4 justify-content-center align-items-lg-stretch">
					@if (loopType(json_decode(get_setting('about_sec_three_title'), true)))
                        @foreach (json_decode(get_setting('about_sec_three_title'), true) as $key => $value)
							<div class="col-lg-4 col-sm-6 col-12">
								<div class="abtMVBlock text-center text-lg-start">
									<div class="abtMVIconBlock mb-lg-4 mb-3">
										<span class="abtMVIcon">
											<img src="{{uploaded_asset( getLoopSetting('about_sec_three_icon', $key), 'images/resource-icon-1.png')}}" loading="lazy" class="img-fluid" alt="resource-icon" width="40" height="40">
										</span>
									</div>
									<div class="abtMVContentBlock">
										<h2 class="abtMVTitle">{{ $value }}</h2>
										<div class="abtMVContent">
											{!! getLoopSetting('about_sec_three_desc', $key) !!}
										</div>
									</div>
								</div>
							</div>
						@endforeach
					@endif
				</div>
			</div>
		</div>
		<div class="abtWhySec__wr bg-secondary text-white py-lg-80px py-5">
			<div class="container">
				<div class="row row-gap-4 align-items-end mb-lg-64px mb-sm-40px mb-4">
					<div class="col-lg-auto col-12">
						<div class="abtWhySecHead text-center text-lg-start">
							<h2 class="abtWhySecHeadTitle mb-0">{{get_setting('about_us_section_four_title')}}</h2>
						</div>
					</div>
					<div class="col-lg col-12">
						<div class="abtWhySecHeadContent w-100 mw-lg-612px ms-lg-auto text-center text-lg-start">
							{!! get_setting('about_us_section_four_description') !!}
						</div>
					</div>
				</div>
				<div class="row row-gap-4 gx-xxl-64px justify-content-center">
					@if (loopType(json_decode(get_setting('about_sec_four_icon'), true)))
                        @foreach (json_decode(get_setting('about_sec_four_icon'), true) as $key => $value)
							<div class="col-lg-4 col-sm-6 col-12">
								<div class="abtWhyBlock text-center">
									<picture class="abtWhyBlockFigure mb-lg-4 mb-3">
										<img src="{{uploaded_asset($value, 'images/about-why-bg-1.jpg')}}" loading="lazy" class="img-fluid" alt="about-why-bg" width="900" height="600">
									</picture>
									<div class="abtWhyContent">
										{!! getLoopSetting('about_sec_four_desc', $key) !!}
									</div>
								</div>
							</div>
						@endforeach
					@endif
				</div>
			</div>
		</div>
		<div class="teamSec__wr py-lg-80px py-5">
			<div class="container position-relative">
				<div class="hmReviewSecHead text-center text-lg-start mb-lg-40px mb-4">
					<div class="row row-gap-4 align-items-lg-center">
						<div class="col-lg col-12">
							<h2 class="teamSecHeadTitle">{{get_setting('about_us_section_five_title')}}</h2>
						</div>
						<div class="col-lg-auto col-12 d-lg-block d-none">
							<div class="teamSecHeadOwlBtns">
								<div id="teamSliderNav" class="owl-nav"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="teamSliderParent">
					<div class="owl-carousel owl-theme teamSlider__wr">
						@if($team_members->isNotEmpty())
							@foreach($team_members as $team)
								<div class="item">
									<div class="teamSliderBlock text-center">
										<picture class="teamSliderFigure">
											<img src="{{uploaded_asset($team->image, 'assets/frontend/images/team-bg-1.jpg')}}" loading="lazy" class="img-fluid" alt="team-bg" width="900" height="600">
										</picture>
										<div class="teamSliderContent">
											<span class="teamMembName">{{strtoupper($team->name)}}</span>
											<span class="teamMembDesg">{{strtoupper($team->designation)}}</span>
										</div>
									</div>
								</div>
							@endforeach
						@endif
    				</div>
				</div>
			</div>
		</div>
		@include('frontend.partials.enquiry')
@endsection
@section('script')
	<script>
		$(document).ready(function(){
			$('.teamSlider__wr').owlCarousel({
				items: 3,
			    loop:true,
			    stagePadding: 10,
			    autoplay: false,
				autoplayTimeout: 5000,
			    autoplayHoverPause: true,
			    margin: 12,
			    nav: true,
			    navContainer: '#teamSliderNav',
			    navText: [ '<span class="fa-solid fa-chevron-left"></span>', '<span class="fa-solid fa-chevron-right"></span>' ],
			    dots: false,
			    responsive:{
			        0:{
			            items:1,
			            navContainer: false,
			            nav:true
			        },
			        576:{
			            items:2,
			            navContainer: false,
			            nav:true
			        },
			        992:{
			            items:4,
			            navContainer: '#teamSliderNav',
			            nav:true
			        }
			    }
			});
			// PHONE NUMBER COUNTRY CODES
	        const mobileNumbr = document.querySelector(".contactNumber__wr");
	        // const practitionerSignUpModalTel = document.querySelector(".phoneNumber__wr");
	        window.intlTelInput(mobileNumbr, {
	            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js",
	            // option to hide the flags - must be used with separateDialCode, or allowDropdown=false
	            showFlags: false,
	            // display the country dial code next to the selected flag
	            separateDialCode: true,
	        });
	        function counter() {
			    $(".count").each(function() {
			        if ($(this).hasClass("start")) {
			            var elementTop = $(this).offset().top;
			            var elementBottom = elementTop + $(this).outerHeight();
			            var windowTop = $(window).scrollTop();
			            var windowBottom = windowTop + $(window).height();

			            if (elementBottom > windowTop && elementTop < windowBottom) {
			                var decimalPlaces;
			                if ($(this).text() % 1 === 0) {
			                    decimalPlaces = 0;
			                } else {
			                    decimalPlaces = $(this).text().toString().split(".")[1].length;
			                }

			                $(this).removeClass("start");
			                $(this).animate({
			                    Counter: $(this).text()
			                }, {
			                    duration: 4000,
			                    easing: "swing",
			                    step: function(value) {
			                        $(this).text(value.toFixed(decimalPlaces).toLocaleString("en"));
			                    }
			                });
			            }
			        }
			    });
			}
		});
	</script>
@endsection