@extends('frontend.layout.master')
@section('title', $pageTitle)
@section('content')

@php
use Illuminate\Support\Str;
@endphp

<?php

$social = \App\Helper\frontend\socialInformation::SocialInfo();
?>

    <!-- banner -->

        <section>
			<div class="banner_div_1">
				<div class="banner_div_2">
				    <div class="swiper bannerSlider">
                        <div class="swiper-wrapper">
                            @foreach($allbanner as $gtt)
                            <div class="swiper-slide">
                                <img src="{{ url('/') }}/{{$gtt->image}}" class="banner_img_1">
                            </div>
                            @endforeach
                        </div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                    
					<!--<div class="owl-carousel owl-theme owl-loaded" id="slider">-->
				 <!--       <div class="owl-stage-outer">-->
				 <!--           <div class="owl-stage">-->
					<!--		    @foreach($allbanner as $gtt)-->
				 <!--               <div class="owl-item">-->
				 <!--                   <img src="{{ url('/') }}/{{$gtt->image}}" class="banner_img_1">-->
				 <!--               </div>-->
					<!--	        @endforeach	-->
				 <!--           </div>-->
				 <!--       </div>-->
				 <!--   </div>-->
				 
				</div>
			</div>
		</section>

	<!-- /banner -->

	<!-- BEST SELLING -->

		<section>
			<div class="best_selling_div_1">
				<div class="container-fluid">
					<div class="best_selling_div_2">
						<div class="best_selling_div_3">
							<p class="fullbody_p_1">BEST SELLING</p>
							<p class="fullbody_p_2" style="border-bottom: 2px solid #5e5e5e;">RESISTANCE WORKOUTS</p>
						</div>
						<div class="best_selling_div_4">
						    
						    <div class="swiper bestSelling">
                                <div class="swiper-wrapper">
                                    
                                    @foreach($allproduct as $prtd)
                                    <div class="swiper-slide">
                                        <div class="best_selling_div_5">
						                    <a href="{{ route('product_details', ['slug' => $prtd->product_slug]) }}">
						                    	<img src="{{$prtd->product_image}}" class="best_selling_img_1">
									        	<div class="best_selling_div_7">
									        		<p class="best_selling_p_1">{{$prtd->product_name}}</p>
									        		<div class="best_selling_div_10">
									        			<ul class="best_selling_ul_1">
									        				<li class="best_selling_li_1">
									        					<i class="fa fa-star" aria-hidden="true"></i>
									        				</li>
									        				<li class="best_selling_li_1">
									        					<i class="fa fa-star" aria-hidden="true"></i>
									        				</li>
									        				<li class="best_selling_li_1">
									        					<i class="fa fa-star" aria-hidden="true"></i>
									        				</li>
									        				<li class="best_selling_li_1">
									        					<i class="fa fa-star" aria-hidden="true"></i>
									        				</li>
									        				<li class="best_selling_li_1">
									        					<i class="fa fa-star-half-o" aria-hidden="true"></i>
									        				</li>
									        			</ul>
									        		</div>
									        		<div class="best_selling_div_8">
									        			<p class="best_selling_p_2">INR. {{$prtd->product_orgprice}}</p>
									        			<p class="best_selling_p_3">INR. {{$prtd->product_saleprice}}</p>
									        		</div>
									        		<div class="best_selling_div_9">
									        			<!-- <button class="best_selling_btn_2">ADD TO CART</button> -->
										        		<button class="best_selling_btn_2">BUY NOW</button>
										        		<!--  <button class="best_selling_btn_2">
										        			<i class="fa fa-heart-o" aria-hidden="true"></i>
										        		</button>  -->
									        		</div>
									        	</div>
						                    </a>
								        </div>
                                    </div>
                                    @endforeach
                                    
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
						</div>
						<div class="best_selling_div_6 text-center">
						    <a href="{{route('products')}}">	
    						    <button class="btn btn-3 hover-border-1">
    								<span class="fullbody_btn_1">View More</span>
    							</button> 
							</a>
						</div>
					</div>
				</div>
			</div>
		</section>

	<!-- /BEST SELLING -->

	<!-- MOST POPULAR -->

		<section>
			<div class="best_selling_div_1">
				<div class="container-fluid">
					<div class="best_selling_div_2">
						<div class="best_selling_div_3">
							<p class="fullbody_p_1">MOST POPULAR</p>
							<p class="fullbody_p_2" style="border-bottom: 2px solid #5e5e5e;">NEW ARRIVALS</p>
						</div>
						<div class="best_selling_div_4">
						    
						    <div class="swiper mostPopular">
                                <div class="swiper-wrapper">
                                    
                                    @foreach($newproduct as $newpr)
                                    <div class="swiper-slide">
                                        <div class="best_selling_div_5">
												<a href="{{ route('product_details', ['slug' => $newpr->product_slug]) }}">
									        		<img src="{{ url('/') }}/{{$newpr->product_image}}" class="best_selling_img_1">
									        		<div class="best_selling_div_7">
									        			<p class="best_selling_p_1">{{$newpr->product_name}}</p>
									        			<div class="best_selling_div_10">
									        				<ul class="best_selling_ul_1">
									        					<li class="best_selling_li_1">
									        						<i class="fa fa-star" aria-hidden="true"></i>
									        					</li>
									        					<li class="best_selling_li_1">
									        						<i class="fa fa-star" aria-hidden="true"></i>
									        					</li>
									        					<li class="best_selling_li_1">
									        						<i class="fa fa-star" aria-hidden="true"></i>
									        					</li>
									        					<li class="best_selling_li_1">
									        						<i class="fa fa-star" aria-hidden="true"></i>
									        					</li>
									        					<li class="best_selling_li_1">
									        						<i class="fa fa-star-half-o" aria-hidden="true"></i>
									        					</li>
									        				</ul>
									        			</div>
									        			<div class="best_selling_div_8">
									        				<p class="best_selling_p_2">INR. {{$newpr->product_orgprice}}</p>
									        				<p class="best_selling_p_3">INR. {{$newpr->product_saleprice}}</p>
									        			</div>
									        			<div class="best_selling_div_9">
									        				<!-- <button class="best_selling_btn_2">ADD TO CART</button> -->
										        			<button class="best_selling_btn_2">BUY NOW</button>
										        			<!--  <button class="best_selling_btn_2">
										        				<i class="fa fa-heart-o" aria-hidden="true"></i>
										        			</button>  -->
									        			</div>
									        		</div>
									        	</a>
								        </div>
                                    </div>
                                    @endforeach
                                    
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                            
						</div>
						<div class="best_selling_div_6 text-center">
							<!-- <button class="best_selling_btn_1 fullbody_btn_1">View More</button> -->
							<a href="{{route('products')}}">
							    <button class="btn btn-3 hover-border-1">
								    <span class="fullbody_btn_1">View More</span>
							    </button>
							</a>
						</div>
					</div>
				</div>
			</div>
		</section>

	<!-- /MOST POPULAR -->

	<!-- HAPPY CUSTOMERS -->

		<section>
			<div class="happy_customer_div_1">
				<div class="container-fluid">
					<div class="happy_customer_div_2">
						<p class="fullbody_p_2">OVER 100,000 HAPPY CUSTOMERS</p>
						<div class="happy_customer_div_3">
							<div class="row">
								<div class="col-lg-4 col-md-4 col-sm-4 col-6 m-auto px-1">
									<div class="happy_customer_div_4 text-center">
										<img src="{{ url('/') }}/frontend/img/happy-customer.jpg" class="happy_customer_img_1">
										<p class="happy_customer_p_1">RATED 4 STARS AND UP</p>
										<p class="happy_customer_p_2">From <b>2000+</b> Verified Reviews</p>
									</div>
								</div>
								<div class="col-lg-4 col-md-4 col-sm-4 col-6 m-auto px-1">
									<div class="happy_customer_div_4 text-center">
										<img src="{{ url('/') }}/frontend/img/happy-customer-2.jpg" class="happy_customer_img_1">
										<p class="happy_customer_p_1">100% MONEYBACK GUARANTEE</p>
										<p class="happy_customer_p_2">30 day Risk Free Moneyback Guarantee</p>
									</div>
								</div>
								<div class="col-lg-4 col-md-4 col-sm-4 col-6 m-auto px-1">
									<div class="happy_customer_div_4 text-center">
										<img src="{{ url('/') }}/frontend/img/happy-customer-3.jpg" class="happy_customer_img_1">
										<p class="happy_customer_p_1">CASH ON DELIVERY</p>
										<p class="happy_customer_p_2">COD Available across India</p>
									</div>
								</div>
							</div>
						</div>
					</div>	
				</div>
			</div>
		</section>

	<!-- /HAPPY CUSTOMERS -->

	<!-- BEST SELLING -->

		<section>
			<div class="best_selling_div_1">
				<div class="container-fluid">
					<div class="best_selling_div_2">
						<div class="best_selling_div_3">
							<p class="fullbody_p_1">BEST SELLING</p>
							<p class="fullbody_p_2" style="border-bottom: 2px solid #5e5e5e;">BEST PRODUCTS</p>
						</div>
						<div class="best_selling_div_4">
						    
						    <div class="swiper bestProducts">
                                <div class="swiper-wrapper">
                                    
                                    @foreach($bestproduct as $bestpp)
                                    <div class="swiper-slide">
                                        <div class="best_selling_div_5">
												<a href="{{ route('product_details', ['slug' => $bestpp->product_slug]) }}">
									        		<img src="{{ url('/') }}/{{$bestpp->product_image}}" class="best_selling_img_1">
									        		<div class="best_selling_div_7">
									        			<p class="best_selling_p_1">{{$bestpp->product_name}}</p>
									        			<div class="best_selling_div_10">
											        		<ul class="best_selling_ul_1">
											        			<li class="best_selling_li_1">
											        				<i class="fa fa-star" aria-hidden="true"></i>
											        			</li>
											        			<li class="best_selling_li_1">
											        				<i class="fa fa-star" aria-hidden="true"></i>
											        			</li>
											        			<li class="best_selling_li_1">
											        				<i class="fa fa-star" aria-hidden="true"></i>
											        			</li>
											        			<li class="best_selling_li_1">
											        				<i class="fa fa-star" aria-hidden="true"></i>
											        			</li>
											        			<li class="best_selling_li_1">
											        				<i class="fa fa-star-half-o" aria-hidden="true"></i>
											        			</li>
											        		</ul>
											        	</div>
									        			<div class="best_selling_div_8">
									        				<p class="best_selling_p_2">INR. {{$bestpp->product_orgprice}}</p>
									        				<p class="best_selling_p_3">INR. {{$bestpp->product_saleprice}}</p>
									        			</div>
									        			<div class="best_selling_div_9">
										        			<button class="best_selling_btn_2">BUY NOW</button>
									        			</div>
									        		</div>
									        	</a>
								        </div>
                                    </div>
                                    @endforeach
                                    
                                </div>
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
						    
						</div>
					</div>
				</div>
			</div>
		</section>

	<!-- /BEST SELLING -->

	<!-- READY TO SWEAT? -->

		<section>
			<div class="ready_div_1 text-center" style="background-image: url({{ url('/') }}/frontend/img/sweat.jpg);"> 
				<div class="ready_div_2">
					<h1 class="ready_h_1">READY TO SWEAT?</h1>
				</div>
			</div>
		</section>

	<!-- /READY TO SWEAT? -->

	<!-- 4devide banner -->

		<section>
			<div class="sub_banner_div_1">
				<div class="container-fluid">
					<div class="sub_banner_div_2">
						<div class="row">
							<div class="col-lg-3 col-md-6 col-sm-6 col-6" style="padding: 0px 7px;">
								<div class="sub_banner_div_3" style="background-image: url({{ url('/') }}/frontend/img/1_300x.jpg);">
									<div class="sub_banner_div_4">
										<p class="sub_banner_p_1">RESISTANCE WORKOUT</p>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-6 col-sm-6 col-6" style="padding: 0px 7px;">
								<div class="sub_banner_div_3" style="background-image: url({{ url('/') }}/frontend/img/2_300x.jpg);">
									<div class="sub_banner_div_4">
										<p class="sub_banner_p_1">GYM GLOVES</p>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-6 col-sm-6 col-6" style="padding: 0px 7px;">
								<div class="sub_banner_div_3" style="background-image: url({{ url('/') }}/frontend/img/3_300x.jpg);">
									<div class="sub_banner_div_4">
										<p class="sub_banner_p_1">SKIPPING ROPES</p>
									</div>
								</div>
							</div>
							<div class="col-lg-3 col-md-6 col-sm-6 col-6" style="padding: 0px 7px;">
								<div class="sub_banner_div_3" style="background-image: url({{ url('/') }}/frontend/img/4_300x.jpg);">
									<div class="sub_banner_div_4">
										<p class="sub_banner_p_1">YOGA ACCESSORIES</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

	<!-- /4devide banner -->

	<!-- blog -->

		<section>
			<div class="blog_home_div_1">
				<div class="container-fluid">
					<div class="blog_home_div_2">
						<div class="best_selling_div_3">
							<p class="fullbody_p_1">OUR BLOG</p>
							<p class="fullbody_p_2" style="border-bottom: 2px solid #5e5e5e;">LETEST BLOGS</p>
						</div><br>
						<div class="row">
							@foreach($allblog as $blg)
							<div class="col-lg-4 col-md-4 col-sm-6 col-12 m-auto">
								<div class="blog_home_div_3">
									<div class="blog_home_div_5">
										<div class="hover06 column">
											<div>
											    <figure>
											    	<img src="{{ url('/') }}/{{$blg->image}}" class="blog_home_img_1">
											    </figure>
											</div>
										</div>
									</div>
									<div class="blog_home_div_4">
										<div class="row">
											<div class="col-6" style="padding: 0px;">
												<p class="blog_home_p_1">{{ $blg->created_at->format('jS F Y') }}</p>
											</div>
											<!-- <div class="col-6" style="padding: 0px;">
												<p class="blog_home_p_1 text-right">Name loren ipsam</p>
											</div> -->
										</div>
										<a href="{{ route('blog_page_details', ['slug' => $blg->blog_slug]) }}">
											<p class="blog_home_p_2">
											{{$blg->title}}
											</p>
										</a>
									</div>
								</div>
							</div>
							@endforeach
							<!-- <div class="col-lg-4 col-md-4 col-sm-6 col-12">
								<div class="blog_home_div_3">
									<div class="blog_home_div_5">
										<div class="hover06 column">
											<div>
											    <figure>
											    	<img src="{{ url('/') }}/frontend/img/blog-2.jpg" class="blog_home_img_1">
											    </figure>
											</div>
										</div>
									</div>
									<div class="blog_home_div_4">
										<div class="row">
											<div class="col-6" style="padding: 0px;">
												<p class="blog_home_p_1">22nd November 2022</p>
											</div>
											<div class="col-6" style="padding: 0px;">
												<p class="blog_home_p_1 text-right">Name loren ipsam</p>
											</div>
										</div>
										<a href="#">
											<p class="blog_home_p_2">
												How Corporates can gift good health to their employees
											</p>
										</a>
									</div>
								</div>
							</div>
							<div class="col-lg-4 col-md-4 col-sm-6 col-12">
								<div class="blog_home_div_3">
									<div class="blog_home_div_5">
										<div class="hover06 column">
											<div>
											    <figure>
											    	<img src="{{ url('/') }}/frontend/img/blog-3.jpg" class="blog_home_img_1">
											    </figure>
											</div>
										</div>
									</div>
									<div class="blog_home_div_4">
										<div class="row">
											<div class="col-6" style="padding: 0px;">
												<p class="blog_home_p_1">22nd November 2022</p>
											</div>
											<div class="col-6" style="padding: 0px;">
												<p class="blog_home_p_1 text-right">Name loren ipsam</p>
											</div>
										</div>
										<a href="#">
											<p class="blog_home_p_2">
												10 Super Effective Abs Workout With Resistance Bands
											</p>
										</a>
									</div>
								</div>
							</div> -->
						</div><br>

						<div class="best_selling_div_6 text-center">
							<!-- <button class="best_selling_btn_1 fullbody_btn_1">View More</button> -->
							<a href="{{route('blog_page')}}">
								<button class="btn btn-3 hover-border-1">
									<span class="fullbody_btn_1">View More blogs</span>
								</button>
							</a>
						</div>
					</div>
				</div>
			</div>
		</section>

	<!-- /blog -->

	<!-- contant from -->

		<section>
			<div class="home_contant_div_1">
				<div class="container-fluid">
					<div class="home_contant_div_2">
						<div class="best_selling_div_3">
							<p class="fullbody_p_1">CONTACT US</p>
							<p class="fullbody_p_2" style="border-bottom: 2px solid #5e5e5e;">GET IN TOUCH WITH US</p>
						</div>
						<div class="home_contant_div_3">
						@if(Session::has('toast'))
                                <div class="alert alert-success">
                                    {{ Session::get('toast')['message'] }}
                                </div>
                            @endif
							<form action="{{route('save_home_form')}}" method="post">
								@csrf
								<div class="home_contant_div_4">
									<div class="row">
										<div class="col-lg-6 col-md-6 col-12 home_contant_div_6">
											<div class="home_contant_div_5">
												<label class="home_contant_label">Name</label>
												<input type="text" name="name" class="home_contant_input_1">
												@error('name')
                                                <div class="text-danger">{{ $message }}</div>
                                        @enderror
											</div>
										</div>
										<div class="col-lg-6 col-md-6 col-12 home_contant_div_7">
											<div class="home_contant_div_5">
												<label class="home_contant_label">Email</label>
												<input type="text" name="email" class="home_contant_input_1">
												@error('email')
                                                <div class="text-danger">{{ $message }}</div>
                                        @enderror
											</div>
										</div>
									</div>
									<label class="home_contant_label">Message</label>
									<textarea name="message" rows="8" class="home_contant_input_1"></textarea><br><br>
									@error('message')
                                                <div class="text-danger">{{ $message }}</div>
                                        @enderror
									<div class="best_selling_div_6 text-center">
										<button type="submit" name="submit" class="btn btn-3 hover-border-1">
											<span class="fullbody_btn_1">Submit</span>
										</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</section>

	<!-- contant from -->
	
	<script>
        var swiper = new Swiper(".bannerSlider", {
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            autoplay: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            }
        });
    </script>
    
    <script>
        var swiper = new Swiper(".bestSelling", {
            slidesPerView: 4,
            spaceBetween: 20,
            loop: true,
            autoplay: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                100: {
                  slidesPerView: 2,
                  spaceBetween: 10
                },
                768: {
                  slidesPerView: 3,
                  spaceBetween: 10
                },
                1024: {
                  slidesPerView: 4,
                  spaceBetween: 10
                },
                1280: {
                  slidesPerView: 4,
                  spaceBetween: 10
                }
            }
        });
    </script>
    
    <script>
        var swiper = new Swiper(".mostPopular", {
            slidesPerView: 4,
            spaceBetween: 20,
            loop: true,
            autoplay: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                100: {
                  slidesPerView: 2,
                  spaceBetween: 10
                },
                768: {
                  slidesPerView: 3,
                  spaceBetween: 10
                },
                1024: {
                  slidesPerView: 4,
                  spaceBetween: 10
                },
                1280: {
                  slidesPerView: 4,
                  spaceBetween: 10
                }
            }
        });
    </script>
    
    <script>
        var swiper = new Swiper(".bestProducts", {
            slidesPerView: 4,
            spaceBetween: 20,
            loop: true,
            autoplay: true,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            breakpoints: {
                100: {
                  slidesPerView: 2,
                  spaceBetween: 10
                },
                768: {
                  slidesPerView: 3,
                  spaceBetween: 10
                },
                1024: {
                  slidesPerView: 4,
                  spaceBetween: 10
                },
                1280: {
                  slidesPerView: 4,
                  spaceBetween: 10
                }
            }
        });
    </script>

@endsection

