@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="banner-effect mb-10" href="{{ $ps->big_save_banner_link }}">
								<img src="{{asset('assets/images/'.$ps->big_save_banner)}}" alt="">
							</a>
							</div>
							<div class="ads">
							<a class="banner-effect" 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>	

	
	
	
<section class="productSection common--section">
			<div class="container">
				<header class="text-center">
					<h2 class="font-bk">Our Products</h2>									
				</header>	
				<div class="innersection">
				<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="new-tab" data-toggle="tab" href="#new" role="tab" aria-controls="new" aria-selected="true">News.</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="offer-tab" data-toggle="tab" href="#offer" role="tab" aria-controls="offer" aria-selected="false">Offers.</a>
  </li>  
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="new" role="tabpanel" aria-labelledby="new-tab">
	  <div class="row">
  @foreach($feature_products as $prod)
			@include('includes.product.slider-new-product')			
	@endforeach
	</div>
  </div>
  <div class="tab-pane fade" id="offer" role="tabpanel" aria-labelledby="offer-tab">
  <div class="row">
  @foreach($feature_products as $prod)
			@include('includes.product.top-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 class="banner-effect" 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

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

	{{-- Slider buttom Category Start --}}
	<section class="slider-buttom-category common--section d-none d-md-block">
		<div class="container">
		<header class="text-center">
					<h2 class="font-bk">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 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