@extends('front.layout.app')
@section('content')

<style>
   .cat .slick-initialized .slick-slide {
    padding: 20px;
}
.cat .slick-slide img.img-fluid , .trending .slick-slide img.img-fluid {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.about p {
    
    font-size: 22px;
}
.test22::after, .test22::before{
    content: unset;
}
.xyzanchor{
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    color: #fff;
    font-weight: 400;
    background-color: #ffab00;
    padding: 10px 25px;
    font-weight: 600;
    outline: none;
    border: 0;
}

.crd{
    position: relative;
}

.crd .new_vid {
    position: absolute;
    left: -49px;
    top: 24px;
    width: 200px;
    height: 38px;
    background: #ffa700;
    color: #000;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    rotate: -40deg;
}


</style>

<main>
    <section class="banner-section">
        <div class="slider-main">
            <div class="banner-slide">
                <div class="items">
                    <div class="slide">
                        <img src="{{ asset('assets/admin/uploads/home_page/'.$home->home_banner_image) }}" class="img-fluid" alt="">
                        <div class="pos">
                            <div class="container">
                                <div class="con">
                                    <h1>{!! $home->home_banner_title !!} </h1>
                                    <h2>{!! $home->home_banner_heading_two !!}</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="moon">
        <section class="about">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-12 col-lg-5">
                        <h3 class="stroke">{!! $home->home_section_two_heading !!}</h3>
                        <p>
                             {!! $home->home_section_two_content !!}
                        </p>
                        <!--<button class="btn btnn">LEARN MORE</button>-->
                    </div>
                    <div class="col-12 col-lg-5">
                        <div class="img-div">
                            <img src="{{ asset('assets/admin/uploads/home_page/'.$home->home_section_two_image) }}" class="img-fluid" alt="">
                        </div>
                    </div>
                </div>

            </div>
        </section>

        <section class="cat" id="Categories">
            <div class="txt">
                <h3 class="stroke">{!! $home->section_three_heading !!}</h3>
            </div>

            <div class="container">
                
                        <div class="box">
                            <div class="container">
                                <div class="row gy-4">
                                <div class="cat-slide">

                                @if(count($categories) > 0)
                                    @foreach($categories as $cate) 
                                    <div class="">
                                        <a href="{{ url('category/'.$cate->categories_slug) }}">
                                            <div class="ct">
                                            @if($cate->flag == 'coming soon')   
                                            
                                            @else 

                                                <img src="{{ asset('assets/admin/uploads/categories/'.$cate->category_image) }}" class="img-fluid" alt="">
                                            @endif
                                                <div class="con">
                                                    <h1>{{ ucfirst($cate->categories_name) }}</h1>
                                                    @if($cate->flag == 'coming soon')    
                                                            <h2>Coming Soon</h2>
                                                    @endif
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                    @endforeach
                                @endif  

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


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


    </div>

    <section class="have">
        <div class="container">
            <div class="row">
                <div class="havei">
                    <img src="{{ asset('assets/admin/uploads/home_page/'.$home->section_four_image) }}" class="img-fluid" alt="">
                    <div class="con">
                        <h1 class="stroke w-100">{!! $home->section_four_title !!}</h1>
                        <h1 class="stroke stroke2 w-100">{!! $home->section_four_heading !!}</h1>
                        <!--<button class="btn btnn">Buy Now</button>-->
                    </div>
                </div>

                <div class="txt" id="TopTrending">
                    <h3 class="stroke strokes">{!! $home->section_five_heading !!}</h3>
                </div>

                <div class="trending">
                    @if(count($topTrending) > 0)
                    @foreach($topTrending as $topTrend)  
                        <div class="newcrd h-100">
                            <div class="crd">
                                @if($topTrend->flag == 'set_top_trending')
                                     <div class="new_vid">Top Trending</div>
                                 @endif
                                <img src="{{asset('assets/admin/uploads/video/'.$topTrend->thumbnail)}}" class="img-fluid" alt="">
                                <div class="con2 con">
                                    <a href="{{ url('video/'.$topTrend->id) }}">
                                        <div href="" class="playBtn"></div>
                                    </a>
                                </div>
                            </div>
                            <ul>
                                <li>{{$topTrend->actor_name}} <i class="fa-brands fa-youtube"></i></li>
                                <li style="display: flex; justify-content: end;"><span> <span>$</span>{{$topTrend->price}}</span>
                                    
                                </li>
                            </ul>
                            <ul>
                                <li class="d-flex justify-content-between">
                                    <a href="{{ url('video/'.$topTrend->id) }}" style="width:100%;">
                                        <h3 >{!! $topTrend->title !!}</h3>
                                    </a> 
                                </li>
                            </ul>
                             <div class="platter"><a href="javascript:;" class="theDifanchor addToCart" data-id="{{ $topTrend->id }}"> Add to cart </a></div>
                        </div>
                    @endforeach
                    @endif
                        

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

    <section class="test">
        <div class="txt">
            <h3 class="stroke strokes">{!! $home->section_six_heading !!}</h3>
        </div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-11">
                    <div class="testislider">
                    @if($testimonials)
                       @foreach($testimonials as $testimonial) 
                        <div class="">
                            <div class="tes">
                                <img src="{{asset('assets/front/images/quote.png')}}" class="img-fluid quote" alt="">
                                <p>
                                    {!!  $testimonial->content!!}
                                </p>
                                <h3>{!!  ucfirst($testimonial->name) !!}</h3>
                                
                                <!--<div class="stars">-->
                                
                                <!--@if($testimonial->ratting == 1)-->
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                <!--@endif-->
                                 
                                <!--@if($testimonial->ratting == 2)-->
                                
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                    
                                <!--@endif  -->
                                
                                <!--@if($testimonial->ratting == 3)-->
                                 
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                    
                                <!--@endif-->
                                
                                <!--@if($testimonial->ratting == 4)-->
                                 
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                    
                                <!--@endif    -->
                                
                                <!--@if($testimonial->ratting == 5)-->
                                    
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                <!--    <i class="fa-sharp fa-solid fa-star"></i>-->
                                    
                                <!--@endif    -->
                                
                                <!--</div>-->
                                
                                <!--<div class="av">-->
                                <!--    <img src="{{-- asset('assets/admin/uploads/testimonials/'.$testimonial->image) --}}" class="av" alt="">-->
                                <!--</div>-->
                                
                            </div>
                        </div>
                      @endforeach
                    @endif   
                    </div>
                </div>
                                    
            </div>
            <div class="text-center mt-5 pt-5" style="padding-top: 70px !important;">
                                        <a href="{{ url('recent-uploads/#theSwiper') }}" class="btn btnn xyzanchor" style="width: 200px;">Add Reviews</a>
                                    </div>
    </section>
    
  

</main>

<div id="age-verification" >
  <div class="age-verification-main">
    <span class="age-title">Are you 18 + older?</span>
    <span class="age-main-text">You must be of legal age to view our website. Due to legal requirements you must verify your age.</span>
    
    <button class="age-button age-yes" onclick="ageVerificationConfirm()">I am over 18</button>
    <button class="age-button age-no" onclick="ageVerificationFailed()">Exit</button>

    
  </div>
</div>




@section('script')
    

<script>
    
    $(document).ready(function(){
        $('.addToCart').on('click',function(e){
            e.preventDefault();
            var video_id = $(this).data('id');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
            url: "{{ route('add.to.cart') }}", 
            method: 'POST',
            data:{video_id:video_id},
            success: function(data){
                
                if(data.success == true)
                {
                  toastr.success(data.msg);
                }    
                window.location.reload();
            },error: function() {
                
                toastr.error('Something went wrong, please try again.');
            }
        
                
            });
            
        });
        
    });
    
    
    
</script>


@endsection
@endsection