@extends('themes.frontend.layouts.app')
@section('slick') @stop
@section('wow') @stop
@section('magnific-popup') @endsection
@section('validate') @stop
@section('flatpickr') @stop

@if (isset($dataArr['meta_title']))
@section('page-title'){{ $dataArr['meta_title'] }}@stop
@else
@section('page-title'){{ $dataArr['title'] }}@stop
@endif
@if (isset($dataArr['meta_key']))
@section('meta-keywords'){{ $dataArr['meta_key'] }}@stop
@endif
@if (isset($dataArr['meta_descp']))
@section('meta-description'){{ $dataArr['meta_descp'] }}@stop
@endif
@if (isset($dataArr['image_path']))
@section('meta-image'){{ $dataArr['image_path'] }}@stop
@endif
@if ($dataArr['full_url'])
@section('cur-url'){{ $dataArr['full_url'] }}@stop
@endif

@section('content')

<!--====== BANNER PART START ======-->
@if(isset($dataArr['custom_fields']['moduleDropdown_10']) && $dataArr['custom_fields']['moduleDropdown_10'] && $dataArr['custom_fields']['moduleDropdown_10']['value'])
<section class="banner-slide banner-slide-2">
	@php
	$galleryDataRow = $dataArr['custom_fields']['moduleDropdown_10']['value'][0]['gallerydata'];
	@endphp

	@if($galleryDataRow && $galleryDataRow->count()>0)
	@foreach($galleryDataRow as $record)
	<div class="banner-area bg_cover d-flex align-items-center" style="background-image: url({{ $record->media->getModuleVars()['media_folder'].$record->media['path'] }});">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-lg-9">
				</div>
			</div>
		</div>
	</div>
	@endforeach
	@endif
</section>
@else
<!-- START:Single Banner  -->
@if (isset($dataArr['image_path']) && $dataArr['image_path'])
<div class="headerwrapper">
	<div>
		<div id="myCarousel" class="carousel slide" data-ride="carousel">
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<x-img src="{{ $dataArr['image_path'] }}" class="w-100 slide-desktop" alt="{{ $dataArr['image_alt'] }}" title="{{ $dataArr['image_title'] }}" />
				</div>
			</div>
		</div>
	</div>
</div>
@endif
<!-- END:Single Banner  -->
@endif
<!--====== BANNER PART ENDS ======-->

<!--====== SUB PART START ======-->
@if (isset($dataArr['custom_fields']['editor_11']) && isset($dataArr['custom_fields']['editor_11']['value']) && $dataArr['custom_fields']['editor_11']['value'] !='<p><br></p>')
<section class="services-box-area pt-30">
	<div class="container">
		{!! $dataArr['custom_fields']['editor_11']['value'] !!}
	</div>
	<div class="services-pattern">
		<x-img src="{{asset('themes/frontend/assets/images/services-pattern.png')}}" />
	</div>
</section>
@endif
<!--====== SUB PART ENDS ======-->

<!--====== FIND SPACE PART START ======-->

@if (isset($dataArr['custom_fields']['editor_12']) && isset($dataArr['custom_fields']['editor_12']['value']) && $dataArr['custom_fields']['editor_12']['value'] !='<p><br></p>')
<section class="space-to-make-area pt-30 pb-60">
	<div class="container">
		{!! $dataArr['custom_fields']['editor_12']['value'] !!}
	</div>
	<div class="shape-pattern">
		<x-img src="{{asset('themes/frontend/assets/images/shape-pattern.png')}}" />
	</div>
	<div class="shape-pattern-2">
		<x-img src="{{asset('themes/frontend/assets/images/we-know-line.png')}}" />
	</div>
</section>
@endif

<!--====== FIND SPACE PART ENDS ======-->

@if($homeProducts && count($homeProducts)>0)
<section class="team-area team-page">
	<div class="container">
		@if (isset($dataArr['custom_fields']['text_13']) && isset($dataArr['custom_fields']['text_13']['value']) && $dataArr['custom_fields']['text_13']['value'])
		<div class="contact-info-content">
			<h2 class="title">{!! $dataArr['custom_fields']['text_13']['value'] !!}</h2>
		</div>
		@endif

		<div class="row justify-content-center">
			@if($homeProducts && count($homeProducts)>0)
				@foreach($homeProducts as $product)
					<div class="col-lg-3 col-md-6 col-sm-7">
						<x-link url="{{ route('web.product.index', $product['slug']) }}">
							<div class="team-item mt-30">
								<div class="team-thumb">
									@if($product['coverfile'])
										<x-img src="{{ $defDataArr['media_folder_product'].$product['coverfile']['file'] }}" alt="{!! $product['coverfile']['title'] !!}" title="{!! $product['coverfile']['alt'] !!}" />
									@else
										@if (isset($optsDbArr['media_folder']) && isset($optsDbArr['logo']))
										<x-img src="{{ $optsDbArr['media_folder'] . $optsDbArr['logo'] }}" alt="logo" />
										@endif
									@endif
								</div>
								<div class="team-content text-center">
									<h4 class="title">{{ $product->title }}</h4>
								</div>
							</div>
						</x-link>
					</div>
				@endforeach
			@else 
				<div class="col-lg-12 col-md-12 col-sm-12">No new product are found.</div>
			@endif
		</div>

	</div>
</section>
@endif

<!--====== JOIN COMMUNITY PART START ======-->
<!--@if (isset($dataArr['custom_fields']['editor_15']) && isset($dataArr['custom_fields']['editor_15']['value']) && $dataArr['custom_fields']['editor_15']['value'] !='<p><br></p>')
<div class="trusted-area bg_cover pt-120 pb-120" style="background-image: url({{asset('themes/frontend/assets/images/trusted-bg.jpg')}});">
	<div class="container">
		<div class="row justify-content-center">
			<div class="col-lg-9">
				<div class="trusted-item text-center">
					{!! $dataArr['custom_fields']['editor_15']['value'] !!}
				</div>
			</div>
		</div>
	</div>
</div>
@endif-->
<!--====== JOIN COMMUNITY PART ENDS ======-->

<section class="benefits-area">
	<div class="container">
	@if (isset($dataArr['custom_fields']['editor_15']) && isset($dataArr['custom_fields']['editor_15']['value']) && $dataArr['custom_fields']['editor_15']['value'] !='<p><br></p>')
	<div class="row justify-content-center">
			<div class="col-lg-12 text-left">			
					{!! $dataArr['custom_fields']['editor_15']['value'] !!}
			</div>
		</div>
		@endif
		<div class="row">
			<div class="col-lg-7">
				<div class="benefits-thumb write-massage-area" style="background: #fff;">
					<div class="write-massage-content">    
						@include('themes.frontend.pages.partials._contact-form',['route'=> route('web.contact.quick-contact-save') ])
					</div>
				</div>
			</div>
			<div class="col-lg-5">
			<img src="{{asset('themes/frontend/assets/images/book-now-right.png')}}">
			</div>
		</div>
	</div>
</section>

<section class="pricing-area pb-4" id="portfolio">
	<div class="pricing-title-area">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-lg-6">
					@if (isset($dataArr['custom_fields']['text_16']) && isset($dataArr['custom_fields']['text_16']['value']) && $dataArr['custom_fields']['text_16']['value'])
						<div class="trusted-item text-center">
                            <h3 class="title text-white">{!! $dataArr['custom_fields']['text_16']['value'] !!}</h3>
                        </div>
					@endif
				</div>
			</div>
		</div>
		<div class="pricing-pattern">
			<img src="{{asset('themes/frontend/assets/images/pricing-pattern.png')}}" style="filter: opacity(0.07);" />			
		</div>
		<div class="pricing-logo">
			<img src="{{asset('themes/frontend/assets/images/pricing-logo.png')}}" style="filter: opacity(0.07);" />
		</div>
	</div>

	@if(isset($dataArr['custom_fields']['moduleDropdown_17']) && $dataArr['custom_fields']['moduleDropdown_17'] && $dataArr['custom_fields']['moduleDropdown_17']['value'])
	<div class="gallery-area gallery-page pb-5 animated wow fadeInDown">
		<div class="container">
			<div class="gallery-itmes">

				@php
				$galleryRow = $dataArr['custom_fields']['moduleDropdown_17']['value'];
				@endphp

				@if($galleryRow && $galleryRow->count()>0)
				<div class="portfolio-nav portfolio-page-nav mb-40">
					<ul>
						<li data-filter="*" class="active">All</li>
						@foreach($galleryRow as $gallery)
						<li data-filter=".{{ $gallery->slug }}">{!! $gallery->title !!}</li>
						@endforeach
					</ul>
				</div>

				<div class="row portfolio-items portfolio-filter">
					@foreach($galleryRow as $gallery)
					@foreach($gallery['gallerydata'] as $record)
					<div class="col-lg-3 col-md-6 col-sm-6 filter-item {{ $gallery->slug }}">
						<div class="portfolio-item">
							<div class="gallery-thumb mt-10">
								<x-img src="{{ $record->media->getModuleVars()['media_folder'].$record->media['path'] }}" alt="{{ $record->media['alt'] }}" />
								@if(!empty($record->mediabig['path']))
								<a class="main-btn image-popup" href="{{ $record->media->getModuleVars()['media_folder'].$record->mediabig['path'] }}"><i class="flaticon-plus"></i></a>
								@else
								<a class="main-btn image-popup" href="{{ $record->media->getModuleVars()['media_folder'].$record->media['path'] }}"><i class="flaticon-plus"></i></a>
								@endif
							</div>
						</div>
					</div>
					@endforeach
					@endforeach
				</div>
				@endif

			</div>
		</div>
		<!--<div class="pricing-item-area"><div class="pricing-dot">
                <img src="{{asset('themes/frontend/assets/images/pricing-dot.png')}}" alt="pricing">
            </div></div>-->
	</div>
	@endif

</section>

@if(!empty($testimonials) && $testimonials)
<section class="testimonial-area">
	<div class="container">
		<div class="row testimonial-active">
			@foreach($testimonials as $testimonial)
			<div class="col-lg-4">
				<div class="testimonial-item text-center">
					<p>{{ $testimonial->descp }}</p>
					<h4 class="title">{{ $testimonial->name }}</h4>
					<span>{{ $testimonial->designation }}</span>
					@if(!empty($testimonial->media['path']))
					<x-img src="{{ $testimonial->media->getModuleVars()['media_folder'].$testimonial->media['path'] }}" alt="{{ $testimonial->media['alt'] }}" />
					@endif
					<div class="icon">
						<x-img src="{{asset('themes/frontend/assets/images/quote-icon.png')}}" alt="{{ env('APP_NAME') }}" />
					</div>
				</div>
			</div>
			@endforeach
		</div>
	</div>
	<div class="testimonial-pattern">
		<x-img src="{{asset('themes/frontend/assets/images/services-pattern.png')}}" alt="{{ env('APP_NAME') }}" />
	</div>
</section>
@endif


@if(isset($dataArr['custom_fields']['moduleDropdown_9']) && $dataArr['custom_fields']['moduleDropdown_9'] && $dataArr['custom_fields']['moduleDropdown_9']['value'])
<section class="gallery-area">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="gallery-title text-center">
					<h3 class="title">Instagram</h3>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid p-0">
		<div class="gallery-itmes">
			@php
			$galleryDataRow = $dataArr['custom_fields']['moduleDropdown_9']['value'][0]['gallerydata'];
			@endphp
			<div class="row no-gutters gallery-active">
				@if($galleryDataRow && $galleryDataRow->count()>0)
				@foreach($galleryDataRow as $record)
				<div class="col-lg-3">
					<div class="gallery-thumb">
						<x-img src="{{ $record->media->getModuleVars()['media_folder'].$record->media['path'] }}" alt="{{ $record->media['alt'] }}" />
						@if(!empty($record->mediabig['path']))
						<a class="main-btn image-popup" href="{{ $record->media->getModuleVars()['media_folder'].$record->mediabig['path'] }}"><i class="flaticon-plus"></i></a>
						@else
						<a class="main-btn image-popupX" href="{{ $record->media->getModuleVars()['media_folder'].$record->media['path'] }}"><i class="flaticon-plus"></i></a>
						@endif
					</div>
				</div>
				@endforeach
				@else
				<div class="col-lg-12">
					<p>No Gallery image is available </p>
				</div>
				@endif
			</div>
		</div>
	</div>
</section>
@endif

@stop


@push('scripts')
<script>
	// Form submit.
	$(function() {
		//===== banner animation slick slider
		function mainSlider() {
			var BasicSlider = $('.banner-slide');
			BasicSlider.on('init', function(e, slick) {
				var $firstAnimatingElements = $('.banner-area:first-child').find('[data-animation]');
				doAnimations($firstAnimatingElements);
			});

			BasicSlider.on('beforeChange', function(e, slick, currentSlide, nextSlide) {
				var $animatingElements = $('.banner-area[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
				doAnimations($animatingElements);
			});

			BasicSlider.slick({
				autoplay: true,
				autoplaySpeed: 10000,
				dots: false,
				fade: true,
				arrows: true,
				prevArrow: '<span class="prev"><i class="flaticon-arrow"></i></span"></i></span>',
				nextArrow: '<span class="next"><i class="flaticon-right-arrow"></i></span>',
				responsive: [{
					breakpoint: 768,
					settings: {
						arrows: false
					}
				}]
			});

			function doAnimations(elements) {
				var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
				elements.each(function() {
					var $this = $(this);
					var $animationDelay = $this.data('delay');
					var $animationType = 'animated ' + $this.data('animation');
					$this.css({
						'animation-delay': $animationDelay,
						'-webkit-animation-delay': $animationDelay
					});
					$this.addClass($animationType).one(animationEndEvents, function() {
						$this.removeClass($animationType);
					});
				});
			}
		}
		mainSlider();

		//===== testimonial slide slick slider
		$('.testimonial-active').slick({
			dots: false,
			infinite: true,
			autoplay: true,
			autoplaySpeed: 2000,
			arrows: false,
			speed: 1000,
			slidesToShow: 1,
			slidesToScroll: 1,
			centerMode: true,
			centerPadding: '0px',
			responsive: [{
					breakpoint: 1600,
					settings: {
						slidesToShow: 1,
					}
				}, {
					breakpoint: 1200,
					settings: {
						slidesToShow: 2,
					}
				},
				{
					breakpoint: 992,
					settings: {
						slidesToShow: 2,
					}
				},
				{
					breakpoint: 768,
					settings: {
						slidesToShow: 1,
						dots: false,
					}
				},
				{
					breakpoint: 576,
					settings: {
						slidesToShow: 1,
						dots: false,
					}
				}
			]

		});

		//===== Instagram slide slick slider
		$('.gallery-active').slick({
			dots: false,
			infinite: true,
			autoplay: true,
			autoplaySpeed: 2000,
			arrows: false,
			speed: 1000,
			slidesToShow: 5,
			slidesToScroll: 1,
			responsive: [{
					breakpoint: 1600,
					settings: {
						slidesToShow: 5,
					}
				}, {
					breakpoint: 1200,
					settings: {
						slidesToShow: 4,
					}
				},
				{
					breakpoint: 992,
					settings: {
						slidesToShow: 4,
					}
				},
				{
					breakpoint: 768,
					settings: {
						slidesToShow: 2,
						dots: false,
					}
				},
				{
					breakpoint: 576,
					settings: {
						slidesToShow: 1,
						dots: false,
					}
				}
			]
		});

		//Portfolio Isotope
		portfolioIsotope();


	});



	// ===== 08. Portfolio Isotope
	function portfolioIsotope() {
		$('#portfolio').imagesLoaded(function() {
			var items = $('.portfolio-filter').isotope({
				itemSelector: '.filter-item',
				percentPosition: true,
				masonry: {
					columnWidth: 1,
				},
			});
			// items on button click
			$('.portfolio-nav ul').on('click', 'li', function() {
				var filterValue = $(this).attr('data-filter');
				items.isotope({
					filter: filterValue
				});
			});
			// menu active class
			$('.portfolio-nav li').on('click', function(event) {
				$(this).siblings('.active').removeClass('active');
				$(this).addClass('active');
				event.preventDefault();
			});
		});
	}
</script>
@endpush