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

<style>
#commentSec h1.ep {
    color: #fff;
    margin-bottom: 22px;
}
.posi-set h2 {
    color: #fff;
    font-size: 15px;
    position: absolute;
    right: 29px;
    top: 50%;
    transform: translateY(-50%);
}
input.poster {
    width: 100%;
    background: #07041c;
    margin-top: 18px;
    margin-bottom: 15px;
    color: #fff;
    padding: 20px;
    outline: none;
    border: 1px solid #837b7b;
}
 /* the slides */
  .slick-slide {
      margin: 0 17px;
  }

  /* the parent */
  .slick-list {
      margin: 0 -17px;
  }
  .contact .con-main .new-love .txt {
    padding: 0;
    margin: 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;
}
.wrapper {
  position: relative;
  display: inline-block;
  border: none;
  font-size: 14px;
}

.wrapper input {
  border: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  opacity: 0;
}

.wrapper label {
  position: relative;
  float: right;
  color: #C8C8C8;
}

.wrapper label:before {
  margin: 5px;
  content: "\f005";
  font-family: FontAwesome;
  display: inline-block;
  font-size: 18px;
  color: #ccc;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.wrapper input:checked ~ label:before {
  color: #FFC107;
}

.wrapper label:hover ~ label:before {
  color: #ffdb70;
}

.wrapper label:hover:before {
  color: #FFC107;
}
    
}
</style>
<main>

    <section class="main-banner">
        <div class="banner-img">
            <div class="img-main">
                <img class="img-fluid" src="{{ asset('assets/admin/uploads/recent_upload_page/'.$about->banner_image) }}" alt="">
            </div>

            <div class="content">
                <h2 data-aos="fade-left" data-aos-delay="200" data-aos-duration="1500">{!! $about->banner_heading !!}</h2>
                <p data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500">{!! $about->banner_title !!}</p>
            </div>
        </div>
    </section>

    <section class="contact">
        <section class="about">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-12 col-lg-5">
                        <h3 class="stroke">{!! $about->section_title !!}</h3>
                        <p>
                            {!! $about->section_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/recent_upload_page/'.$about->section_image) }}" class="img-fluid" alt="">
                        </div>
                    </div>
                </div>

            </div>
        </section>
        
        <div class="container">

            <div class="row justify-content-center">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="row">
                        <div class="con-main">
                            <div class="con-ti text-center" data-aos="zoom-in-up" data-aos-delay="0"
                                data-aos-duration="1000">
                                <!-- <h3>GET IN TOUCH WITH US</h3> -->
                                 <!--{!! $about->section_two_text_one !!}-->
                            </div>
                            <div class="con-ti text-center" data-aos="zoom-in-up" data-aos-delay="0"
                                data-aos-duration="1000">
                                <!--{!! $about->section_two_text_two !!}-->
                            </div>


                            <div class="new-love">
                                <div class="txt" data-aos="fade-right" data-aos-delay="0" data-aos-duration="1000">
                                    <h3>{!! $about->section_two_text_three !!}</h3>
                                    <h5>{!! $about->section_two_text_four !!}</h5>
                                </div>

                                <div class="img">

                                    <!--<div class="row px-0 justify-content-center">-->
                                    <!--    <div class="col-12">-->
                                    <!--        <div class="icon">-->
                                    <!--            <span class="icn1"> <i class="fa-solid fa-arrow-down-long"></i></span>-->
                                    <!--            <span class="icn2"><i class="fa-solid fa-plus"></i></span>-->
                                    <!--        </div>-->
                                    <!--    </div>-->
                                    <!--</div>-->
                                    
                                    
                                    
                                    
                                    
                                    
                                    <section class="have my-5 py-5 havinnng">
                                    <div class="container">
                                        
                                        <div class="slider-rev cat-slide">
                                            
                                            @if(!empty($videos))
                                                @foreach($videos as $video)
                                                
                                                    <div class="newcrd h-100">
                                                    <div class="crd">
                                                        @if($video->recent_upload == 'set_recent_upload')
                                                            <div class="new_vid">Recent Upload</div>
                                                        @endif
                                                        <img src="{{ asset('assets/admin/uploads/video/'.$video->thumbnail) }}" class="img-fluid" alt="">
                                                        <div class="con2 con">
                                                            <a href="{{url('video/'.$video->id)}}">
                                                                <div href="" class="playBtn"></div>
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <ul>
                                                        <li>{{ $video->actor_name }}<i class="fa-brands fa-youtube"></i></li>
                                                        <li style="display: flex; justify-content: end;"><span><span>$</span>{{ $video->price }}</span>
                                                            <!--<span><i class="fa-solid fa-thumbs-up"></i> 5.6k</span>-->
                                                        </li>
                                                    </ul>
                                                    <ul>
                                                        <li class="d-flex justify-content-between">
                                                            <a href="{{url('video/'.$video->id)}}" style="width:100%;">
                                                                <h3>{{ $video->title }}</h3>
                                                            </a> 
                                                          
                                                        </li>
                                                    </ul>
                                                    <div class="platter"><a href="javascript:void(0)" class="theDifanchor addToCart" data-id="{{ $video->id }}"> Add to cart </a></div>
                                                </div>
                                                
                                                @endforeach
                                            
                                            @endif    
                                                
                                        </div>
                                        
                                    </div>
                                </section>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <section id="theSwiper" class="py-4"></section>

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

        </div>
    </section>
    
    
    
    <div class="container mb-5 pb-5" >
        <div class="row justify-content-center">
            <div class="col-lg-7 col-12 ">
                <div class="" id="commentSec">
                    <div class="epi-d">
                        <h1 class="ep">Add Testimonial</h1>
                    </div>
                       <form action="{{ url('testimonial-save') }}" method="post" enctype="multipart/form-data"> 
                            @csrf
                            <div class="row">
                                <div class="col-12 col-lg-12">
                                    <input class="poster" name="name" type="text" placeholder="Enter your name">
                                    @error('name')
                                        <div class="alert alert-danger">{{ $message }}</div>
                                    @enderror
                                    <!--<div style="position: relative;" class="posi-set"> <h2>Add your profile picture</h2></h2><input class="poster pro-img-us" name="image" type="file"></div>-->
                                    
                                </div>
                            </div>
                            <textarea name="description" id="" cols="10" rows="3" spellcheck="false"></textarea>
                            @error('description')
                                        <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                            
                            <div class="row">
                                  
                                <div class="col-12 col-lg-6">
                                    <div class="text-start">
                                        <input type="submit" class="btn btnn" value="Post" style="width: 200px;">
                                    </div>
                                </div>
                            </div>
                       </form>    
                    </div>
                </div>
            </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