@extends('layouts.front')

@section('content')

	@if($ps->slider == 1)

		@if(count($sliders))
			@include('includes.slider-style')
		@endif
	@endif

	@if($ps->slider == 1)
		<!-- Hero Area Start -->
		<section class="hero-area homeSlider">
			<div class="container">
				<div class="row no-gutters">
					<div class="homeSlider__left">
					@if($ps->slider == 1)
				@if(count($sliders))
					<div class="hero-area-slider">
						<div class="slide-progress"></div>
						<div class="intro-carousel">
							@foreach($sliders as $data)
								<div class="intro-content {{$data->position}}" style="background-image: url({{asset('assets/images/sliders/'.$data->photo)}})">																		
									<div class="slider-content">
										<!-- layer 1 -->
										<div class="layer-1">
											<h4 style="font-size: {{$data->subtitle_size}}px; color: {{$data->subtitle_color}}" class="subtitle subtitle{{$data->id}}" data-animation="animated {{$data->subtitle_anime}}">{{$data->subtitle_text}}</h4>
											<h2 style="font-size: {{$data->title_size}}px; color: {{$data->title_color}}" class="title title{{$data->id}}" data-animation="animated {{$data->title_anime}}">{{$data->title_text}}</h2>
										</div>
										<!-- layer 2 -->
										<div class="layer-2">
											<p style="font-size: {{$data->details_size}}px; color: {{$data->details_color}}"  class="text text{{$data->id}}" data-animation="animated {{$data->details_anime}}">{{$data->details_text}}</p>
										</div>
										<!-- layer 3 -->
										<div class="layer-3">
											<a href="{{$data->link}}" target="_blank" class="mybtn1"><span>{{ $langg->lang25 }} <i class="fas fa-chevron-right"></i></span></a>
										</div>
									</div>																			
								</div>
							@endforeach
						</div>
					</div>
				@endif
			@endif
					</div>
					<div class="homeSlider__right">
						<div class="ads">
					<a class=" mb-10" href="{{ $ps->big_save_banner_link }}">
								<img src="{{asset('assets/images/'.$ps->big_save_banner)}}" alt="">
							</a>
							</div>
							<div class="ads">
							<a  href="{{ $ps->big_save_banner_link1 }}">
								<img src="{{asset('assets/images/'.$ps->big_save_banner1)}}" alt="">
							</a>
                       </div>
					</div>
				</div>
			</div>
			
		</section>
		<!-- Hero Area End -->
	@endif
	</section>	

@if($ps->service == 1)
{{-- Info Area Start --}}
<section class="serviceSection">
		<div class="container">
				@foreach($services->chunk(5) as $chunk)					
							<div class="info-big-box">
								<div class="row">
									@foreach($chunk as $service)
										<div class="col-6 col-sm-4 col-md-3 col-xl-3">
											<div class="info-box">
												<div class="icon">
													<img src="{{ asset('assets/images/services/'.$service->photo) }}">
												</div>
												<div class="info">
													<div class="details">
														<h4 class="title">{{ $service->title }}</h4>
														<p class="text">
															{!! $service->details !!}
														</p>
													</div>
												</div>
											</div>
										</div>
									@endforeach
								</div>
							</div>						
				@endforeach
		</div>
	</section>
	{{-- Info Area End  --}}
	@endif

	@if($ps->flash_deal == 1)
		
		<section class="dealSection common--section">
			<div class="container">
				<header>
					<h2>Deal of the day</h2>
					<a href="https://apnadukandar.codiantprod.com/category">View All</a>				
				</header>				
				<div class="flash-deals">
					<div class="flas-deal-slider">
						@foreach($discount_products as $prod)
							@include('includes.product.flash-product')
						@endforeach
					</div>
				</div>					
			</div>
		</section>
	
	@endif	
	
	@if($ps->bottom_small == 1)
		<!-- Banner Area One Start -->
		<section class="topsmallbanners common--section">
			<div class="container">
				@foreach($bottom_small_banners->chunk(3) as $chunk)
					<div class="row">
						@foreach($chunk as $img)
							<div class="col-sm-4 col-6 col-md-4">
								
									<a href="{{ $img->link }}" target="_blank">
										<img class="img-fluid" src="{{asset('assets/images/banners/'.$img->photo)}}" alt="">
									</a>
								
							</div>
						@endforeach
					</div>
				@endforeach
			</div>
		</section>
		<!-- Banner Area One Start -->
	@endif

	<section class="downloadSection common--section">
		<div class="container">
			<div class="downloadSection__inner">
				<div class="row align-items-center">
					<div class="col-md-6">
					<div class="downloadSection__left text-center">
						<img src="{{asset('assets/images/safe_delivery.png')}}" alt="safe_delivery" class="img-fluid">
					</div>
				</div>
				<div class="col-md-6">
					<div class="downloadSection__right">
						<h3>Download Apnadukan App Now!</h3>
                        <p>Shopping fastly and easily more with our app. Get a link to download the app on your phone</p>
                        <form action="{{route('front.subscribe')}}" id="subscribeform" method="POST">
					    {{csrf_field()}}					
	                    <div class="form-group d-flex">						
	                        <input type="email" name="email" class="form-control"  placeholder="Your email" required="" />
	                        <button id="sub-btn" class="btn btn-primary submitBtn" type="submit">	                        
	                         Subscribe
	                        </button>
	                    </div>
	                    </form>

	                    <ul class="list-inline mb-0">
	                    	<li class="list-inline-item">
	                    		<a href="javascript:void(0)">
	                    			<img src="{{asset('assets/images/google-play.png')}}" alt="google play image" class="img-fluid">
	                    		</a>
	                    	</li>
	                    	<li class="list-inline-item">
	                    		<a href="javascript:void(0)">
	                    			<img src="{{asset('assets/images/app-store.png')}}" alt="app-store image" class="img-fluid">
	                    		</a>
	                    	</li>
	                    </ul>
					</div>
				</div>
				</div>
			</div>
		</div>
	</section>
	
<section class="productSection common--section tabssection">
			<div class="container">
				<header>
					<h2>Grocery</h2>
					<ul class="nav nav-tabs" id="categorySliderTabs" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="new-tab" data-toggle="tab" href="#newarrival" role="tab" aria-controls="new" aria-selected="true">New Arrivals
</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="best-tab" data-toggle="tab" href="#bestseller" role="tab" aria-controls="seller" aria-selected="false">Best Seller</a>
  </li>  
  <li class="nav-item">
    <a class="nav-link" id="popular-tab" data-toggle="tab" href="#mostpopular" role="tab" aria-controls="popular" aria-selected="false">Most Popular</a>
  </li>  
  <li class="nav-item">
    <a class="nav-link"  href="https://apnadukandar.codiantprod.com/category/Grocery">View All</a>
  </li>  
</ul>									
				</header>	
				<div class="innersection">
				
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="newarrival" role="tabpanel" aria-labelledby="new-tab">
	 
	  <div class="trending-item-slider">
							@foreach($feature_products as $prod)
								@include('includes.product.slider-product')
							@endforeach
						</div>
	
  </div>
  <div class="tab-pane fade" id="bestseller" role="tabpanel" aria-labelledby="best-tab">
  <div class="trending-item-slider">
							@foreach($feature_products as $prod)
								@include('includes.product.slider-product')
							@endforeach
						</div>
  </div>
  <div class="tab-pane fade" id="mostpopular" role="tabpanel" aria-labelledby="popular-tab">
  <div class="trending-item-slider">
							@foreach($feature_products as $prod)
								@include('includes.product.slider-product')
							@endforeach
						</div>
  </div>

</div>
				</div>			
			</div>
</section>

<section class="productSection common--section tabssection">
			<div class="container">
				<header>
					<h2>Fruits & Vegetables</h2>
					<ul class="nav nav-tabs" id="categorySliderTabs01" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="new-tab01" data-toggle="tab" href="#newarrival01" role="tab" aria-controls="new" aria-selected="true">New Arrivals
</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="best-tab01" data-toggle="tab" href="#bestseller01" role="tab" aria-controls="seller" aria-selected="false">Best Seller</a>
  </li>  
  <li class="nav-item">
    <a class="nav-link" id="popular-tab01" data-toggle="tab" href="#mostpopular01" role="tab" aria-controls="popular" aria-selected="false">Most Popular</a>
  </li>  
  <li class="nav-item">
    <a class="nav-link"  href="https://apnadukandar.codiantprod.com/category/Fruits-and-Vegetables">View All</a>
  </li>  
</ul>									
				</header>	
				<div class="innersection">
				
<div class="tab-content" id="myTabContent01">
  <div class="tab-pane fade show active" id="newarrival01" role="tabpanel" aria-labelledby="new-tab01">
	 
	  <div class="trending-item-slider">
	  @foreach($best_products as $prod)
								@include('includes.product.home-product')
							@endforeach
						</div>
	
  </div>
  <div class="tab-pane fade" id="bestseller01" role="tabpanel" aria-labelledby="best-tab01">
  <div class="trending-item-slider">
  @foreach($best_products as $prod)
								@include('includes.product.home-product')
							@endforeach	
						</div>
  </div>
  <div class="tab-pane fade" id="mostpopular01" role="tabpanel" aria-labelledby="popular-tab01">
  <div class="trending-item-slider">
  @foreach($best_products as $prod)
								@include('includes.product.home-product')
							@endforeach
						</div>
  </div>

</div>
				</div>			
			</div>
</section>


<section class="productSection common--section tabssection">
			<div class="container">
				<header>
					<h2>Health and Personal Care</h2>
					<ul class="nav nav-tabs" id="categorySliderTabs02" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="new-tab02" data-toggle="tab" href="#newarrival02" role="tab" aria-controls="new" aria-selected="true">New Arrivals
</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="best-tab02" data-toggle="tab" href="#bestseller02" role="tab" aria-controls="seller" aria-selected="false">Best Seller</a>
  </li>  
  <li class="nav-item">
    <a class="nav-link" id="popular-tab02" data-toggle="tab" href="#mostpopular02" role="tab" aria-controls="popular" aria-selected="false">Most Popular</a>
  </li>  
  <li class="nav-item">
    <a class="nav-link"  href="https://apnadukandar.codiantprod.com/category/Health-and-Personal-Care">View All</a>
  </li>  
</ul>									
				</header>	
				<div class="innersection">
				
<div class="tab-content" id="myTabContent02">
  <div class="tab-pane fade show active" id="newarrival02" role="tabpanel" aria-labelledby="new-tab02">
	 
	  <div class="trending-item-slider">
	  @foreach($top_products as $prod)
								@include('includes.product.top-product')
							@endforeach	
						</div>
	
  </div>
  <div class="tab-pane fade" id="bestseller02" role="tabpanel" aria-labelledby="best-tab02">
  <div class="trending-item-slider">
  @foreach($top_products as $prod)
								@include('includes.product.top-product')
							@endforeach
						</div>
  </div>
  <div class="tab-pane fade" id="mostpopular02" role="tabpanel" aria-labelledby="popular-tab02">
  <div class="trending-item-slider">
  @foreach($top_products as $prod)
								@include('includes.product.top-product')
							@endforeach	
						</div>
  </div>

</div>
				</div>			
			</div>
</section>

@if($ps->featured_category == 1)

{{-- Slider buttom Category Start --}}
<section class="slider-buttom-category common--section ">
	<div class="container">
	<header>
				<h2 >Top Categories Of The Month</h2>								
			</header>	
		<div class="row">
			@foreach($categories->where('is_featured','=',1) as $cat)
				<div class="col-xl-2 col-lg-3 col-md-4">
					<a href="{{ route('front.category',$cat->slug) }}" class="single-category">
					<div class="right">
							<img src="{{asset('assets/images/categories/'.$cat->image) }}" alt="">
						</div>
						<div class="left">
							<h5 class="title">
								{{ $cat->name }}
							</h5>
							<p class="count">
								{{ count($cat->products) }} {{ $langg->lang4 }}
							</p>
						</div>							
					</a>
				</div>
			@endforeach
		</div>
	</div>
</section>
{{-- Slider buttom banner End --}}

@endif

<section class="productSection common--section tabssection">
			<div class="container">
				<header>
					<h2>Clothings</h2>
					<ul class="nav nav-tabs" id="categorySliderTabs03" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="new-tab03" data-toggle="tab" href="#newarrival03" role="tab" aria-controls="new" aria-selected="true">New Arrivals
</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="best-tab03" data-toggle="tab" href="#bestseller03" role="tab" aria-controls="seller" aria-selected="false">Best Seller</a>
  </li>  
  <li class="nav-item">
    <a class="nav-link" id="popular-tab03" data-toggle="tab" href="#mostpopular03" role="tab" aria-controls="popular" aria-selected="false">Most Popular</a>
  </li>  
  <li class="nav-item">
    <a class="nav-link"  href="https://apnadukandar.codiantprod.com/category/Clothes">View All</a>
  </li>  
</ul>									
				</header>	
				<div class="innersection">
				
<div class="tab-content" id="myTabContent03">
  <div class="tab-pane fade show active" id="newarrival03" role="tabpanel" aria-labelledby="new-tab03">
	 
	  <div class="trending-item-slider">
	  @foreach($sale_products as $prod)
								@include('includes.product.cloths')
							@endforeach
						</div>
	
  </div>
  <div class="tab-pane fade" id="bestseller03" role="tabpanel" aria-labelledby="best-tab03">
  <div class="trending-item-slider">
  @foreach($sale_products as $prod)
								@include('includes.product.cloths')
							@endforeach
						</div>
  </div>
  <div class="tab-pane fade" id="mostpopular03" role="tabpanel" aria-labelledby="popular-tab03">
  <div class="trending-item-slider">
  @foreach($sale_products as $prod)
								@include('includes.product.cloths')
							@endforeach
						</div>
  </div>

</div>
				</div>			
			</div>
</section>

<section class="productSection common--section tabssection">
			<div class="container">
				<header>
					<h2>Footwear</h2>
					<ul class="nav nav-tabs" id="categorySliderTabs04" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="new-tab04" data-toggle="tab" href="#newarrival04" role="tab" aria-controls="new" aria-selected="true">New Arrivals
</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="best-tab04" data-toggle="tab" href="#bestseller04" role="tab" aria-controls="seller" aria-selected="false">Best Seller</a>
  </li>  
  <li class="nav-item">
    <a class="nav-link" id="popular-tab04" data-toggle="tab" href="#mostpopular04" role="tab" aria-controls="popular" aria-selected="false">Most Popular</a>
  </li>  
  <li class="nav-item">
    <a class="nav-link"  href="https://apnadukandar.codiantprod.com/category/Footwear">View All</a>
  </li>  
</ul>									
				</header>	
				<div class="innersection">
				
<div class="tab-content" id="myTabContent04">
  <div class="tab-pane fade show active" id="newarrival04" role="tabpanel" aria-labelledby="new-tab04">
	 
	  <div class="trending-item-slider">
	  @foreach($big_products as $prod)
								@include('includes.product.home-product')
							@endforeach
						</div>
	
  </div>
  <div class="tab-pane fade" id="bestseller04" role="tabpanel" aria-labelledby="best-tab04">
  <div class="trending-item-slider">
  @foreach($big_products as $prod)
								@include('includes.product.home-product')
							@endforeach
						</div>
  </div>
  <div class="tab-pane fade" id="mostpopular04" role="tabpanel" aria-labelledby="popular-tab04">
  <div class="trending-item-slider">
  @foreach($big_products as $prod)
								@include('includes.product.home-product')
							@endforeach	
						</div>
  </div>

</div>
				</div>			
			</div>
</section>








@if($ps->small_banner == 1)

		<!-- Banner Area One Start -->
		<section class="banner-section freshcoffeeSection common--section">
			<div class="container">
				<!-- <header class="text-center">
					<h2 class="font-bk">Fresh and tasty coffee</h2>									
				</header> -->
				@foreach($top_small_banners->chunk(2) as $chunk)
					<div class="row">
						@foreach($chunk as $img)
							<div class="col-sm-6">								
									<a  href="{{ $img->link }}" target="_blank">
										<img src="{{asset('assets/images/banners/'.$img->photo)}}" alt="">
									</a>								
							</div>
						@endforeach
					</div>
				@endforeach
			</div>
		</section>
		<!-- Banner Area One Start -->
	@endif
@if($ps->featured == 1)
		<!-- Trending Item Area Start -->
		<section  class="trending">
			<div class="container">
				<div class="row">
					<div class="col-lg-12 remove-padding">
						<div class="section-top">
							<h2 class="section-title">
								{{ $langg->lang26 }}
							</h2>
							{{-- <a href="#" class="link">View All</a> --}}
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-lg-12 remove-padding">
						<div class="trending-item-slider">
							@foreach($feature_products as $prod)
								@include('includes.product.slider-product')
							@endforeach
						</div>
					</div>

				</div>
			</div>
		</section>
		<!-- Tranding Item Area End -->
	@endif



	


	<section id="extraData">
		<div class="text-center">
			<img src="{{asset('assets/images/'.$gs->loader)}}">
		</div>
	</section>
	<!-- <section class="aboutSection common--section">
		<div class="container">
			<div class="row">
				<div class="col-md-5 col-lg-4">
					<div class="d-flex flex-column justify-content-center h-100	">
						<header class="mb-0">
							<h2 class="font-bk">About Beanite</h2>
						</header>
						<p>{!! $gs->footer !!}</p>
						@foreach(DB::table('pages')->where('header','=',1)->get() as $data)								
								<a href="{{ route('front.page',$data->slug) }}">Read More</a>
							@endforeach
						
					</div>
				</div>
				<div class="col-md-6 col-lg-7 offset-md-1">
					<img class="img-fluid" src="{{asset('assets/images/aboutimg.jpg')}}" />
				</div>
			</div>
		</div>
	</section> -->


@endsection

@section('scripts')
	<script>
        $(window).on('load',function() {

            setTimeout(function(){

                $('#extraData').load('{{route('front.extraIndex')}}');

            }, 500);
        });

       function playVideo(){
      if($(".video").get(0).paused){        
        $(".video").get(0).play();
        }else{       
        $(".video").get(0).pause();
        }
      console.log("working");
    };

	</script>
@endsection