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

	@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['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
	<!--====== BANNER PART ENDS ======-->

	<!--====== FIND SPACE PART START ======-->
	@if (isset($dataArr['custom_fields']['editor_3']))
	<section class="space-to-make-area pt-60 pb-60">
		{!! $dataArr['custom_fields']['editor_3']['value'] !!}
		<div class="shape-pattern">
			<x-img src="{{asset('themes/frontend/assets/images/shape-pattern.png')}}" alt="{{ env('APP_NAME') }}" />
		</div>
		<div class="shape-pattern-2">
			<x-img src="{{asset('themes/frontend/assets/images/we-know-line.png')}}" alt="{{ env('APP_NAME') }}" />
		</div>
	</section>
	@endif
	<!--====== FIND SPACE PART ENDS ======-->

	@if(isset($dataArr['custom_fields']['moduleDropdown_9']) && $dataArr['custom_fields']['moduleDropdown_9'] && $dataArr['custom_fields']['moduleDropdown_9']['value'])
	<section class="team-area team-page gallery-area py-5">
		<div class="container">
			<div class="gallery-itmes">
				<div class="row no-gutters gallery-active">
					@php
					$galleryDataRow = $dataArr['custom_fields']['moduleDropdown_9']['value'][0]['gallerydata'];
					@endphp

					@if($galleryDataRow && $galleryDataRow->count()>0)
						@foreach($galleryDataRow as $record)
							<div class="col-lg-3">
								<a href="{{ $record->external_link ??'javascript:void(0)' }}" target="_blank">
									<div class="gallery-thumb">							
										<x-img src="{{ $record->media->getModuleVars()['media_folder'].$record->media['path'] }}" alt="{{ $record->media['alt'] }}" />						
									</div>
								</a>	
							</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>
    $(function() {
		//===== 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,
					}
				}
			]
		}); 

    });	
</script>
@endpush