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

<style>
.crd img {
    height: 100%;
}

.have li {
    color: #fff;
    font-size: 12px;
    text-transform: capitalize;
    font-family: 'Poppins';
    width: 100%;
}

span i {
    margin-right: 5px;
}

.crd img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.main-modal .box-one {
    padding: 45px 0px;
}

a:hover {
    color: #ffffff;
}
.poster {
    width: 100%;
    background: #07041c;
    margin-top: 38px;
    margin-bottom: 15px;
    color: #fff;
    padding: 15px;
    outline: none;
    border: 1px solid #877d7d;
    height: 62px;

    
}
.main-modal .ep {
    color: #fff;
    font-size: 30px;
    margin-top: 40px;
}
.James-pend {
    height: 450px;
     overflow-y: unset; 
    overflow-x: hidden;
}
</style>



<main>

    <section class='watch_now_main_section'>
        <div class="container">
            <div class='flex_heading'>
                <h3 class='series_name'>
                    YOUR VIDEO NAME
                </h3>
                <p>
                    60 MINUTES | 2022-12-30 | Adult | usa
                </p>
            </div>
        </div>
    </section>

    <section class='video_main_section mt-3'>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-sm-12 col-md-10">
                    <div class="col-12">
                        <video autoplay="autoplay" id="myVideo" controlsList="nodownload" controls autoplay>
                            <source src="{{ asset('assets/admin/uploads/teaser/video/'.$video->teaser_video) }}" class='img-fluid'>
                        </video>
                    </div>

                    <div class="col-12">
                        <div class='flex_dire'>
                            <div class="d-flex" style="width: 50%;">
                                <h6>Actor : </h6>
                                <p>&nbsp; {!! $video->actor_name !!} </p>
                            </div>
                            <div class="add-to-cart-button"><a href="javascript:void(0)" class="theDifanchor addToCart" data-id="{{ $video->id }}"> Add to cart </a></div>
                         
                        </div>

                        <div class='flex_dire'>
                            <h6>Description :{!! $video->description !!} </h6>
                        </div>

                        <div class='flex_dire'>
                            <p>
                            
                            </p>
                        </div>
                    </div>

                     <div class="col-12 main-modal">
                        <div class="box-one">
                            <div class="row">
                                <div class="col-12 col-sm-12 col-md-10 col-lg-10 col-xl-10">
                                    <div class="slecting-text">
                                        <div class="ab">
                                            
                                            <!--<h4 class="blue">98% Match</h4>-->
                                            <!--<h4 class="year">2022</h4>-->
                                            <h6 class="plus">{{ getCounter($video->id) }}</h6>
                                            <!--<h4 class="e-six">6 James</h4>-->
                                            <!--<h6 class="hd">HD</h6>-->
                                            <div class="like" >
                                                <input type="checkbox" hidden="" class="input-assumpte"
                                                    id="input-confidencial">
                                                <label for="input-confidencial" class="heartlabel" id="saveLikeDislike" data-type="like" data-feed="{{ $video->id }}">
                                                    <i class="fa-solid fa-thumbs-up heartlabel"></i>
                                                </label>
                                            </div>
                                            <a href="#commentSec">
                                                <div class="comment">
                                                    <i class="fa-solid fa-message"></i>
                                                </div>
                                            </a>
                                        </div>
                                        
                                        <!--<div class="rank">-->
                                        <!--    <h6 class="red-box">TOP <br>10</h6>-->
                                        <!--    <h4 class="r-t">Lorem ipsum dolor sit amet, consetetur sadipscing</h4>-->
                                        <!--</div>-->
                                        
                                    </div>
                                    
                                </div>
                            </div>
                            
                            <!--<div class="box-two">-->
                            <!--    <div class="epi-d">-->
                            <!--        <h1 class="ep">Tags</h1>-->
                            <!--    </div>-->
                            <!--</div>-->
                            
                            <!--<div class="sumry d-flex">-->
                            <!--    <a href="javascript:;" class="Summary-para">Solo</a>-->
                            <!--    <a href="javascript:;" class="Summary-para">threesome</a>-->
                            <!--    <a href="javascript:;" class="Summary-para">Female-Female</a>-->
                            <!--    <a href="javascript:;" class="Summary-para">Creampie</a>-->
                            <!--    <a href="javascript:;" class="Summary-para">Squirt</a>-->
                            <!--    <a href="javascript:;" class="Summary-para">Pregnant</a>-->
                            <!--</div>-->

                            <div class="" id="commentSec">
                                <div class="epi-d">
                                    <h1 class="ep">Post Comment</h1>
                                </div>
                               <form action="{{ route('post-comment') }}" method="post" enctype="multipart/form-data"> 
                                @csrf
                                <div class="row">
                                    <div class="col-12 col-lg-12">
                                        <!--<h3>Your Name<h3/> <br>-->
                                        <input class="poster" name="name" type="text" placeholder="Enter your name"/>
                                        <input class="poster" name="video_id" value="{{ $video->id }}" type="hidden" placeholder="Enter your name"/>
                                    </div>
                                    <!--<div class="col-12 col-lg-6">-->
                                        <!--<h3>Your Image<h3/> <br>-->
                                    <!--    <input type="file" name="image" class="poster"/>-->
                                    <!--</div>-->
                                </div>
                                <textarea name="description" id="" cols="10" rows="3"></textarea>
                                <div class="text-end">
                                    <input type="submit" class="btn btnn" value="Post"  style="width: 200px;"/>
                                </div>
                                </form>    
                                
                                
                            </div>



                            <div class="epi-d">
                                <h1 class="ep pb-3 pt-1">Comments</h1>
                            </div>
                            <div class="James-pend">

                            @if($comments)
                                @foreach($comments as $comment)
                                    <div class="episb">
                                    <div class="row">
                                        
                                        <!--<div class="col-2">-->
                                        <!--    <div class="vedio-img" onclick="myFun('images/modl-vid.mp4')">-->
                                        <!--        <img class="epi-mg img-fluid" src="{{-- asset('assets/front/user-images/'.$comment->image) --}}" alt="">-->
                                        <!--    </div>-->
                                        <!--</div>-->
                                        
                                        <div class="col-10 col-sm-12 col-md-9">
                                            <div class="epi-det">
                                                <h4 class="epi-num">{{ ucfirst($comment->name) }}</h4>
                                                @if($errors->has('name'))
                                                      <div class="text-danger">{{ $errors->first('name') }}</div>
                                                @endif
                                            </div>
                                            <p class="det-ep">{{ ucfirst($comment->description) }}
                                            </p>
                                             @if($errors->has('description'))
                                                <div class="text-danger">{{ $errors->first('description') }}</div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                            @endif    
                               
                                
                                <div class="row">
                                    <div class="col-12">
                                        <!--<button class="btn load">Load More</button>-->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> 

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

    
    
</main>



@section('script')

<script>
        document.addEventListener("DOMContentLoaded", function () {
            // Get a reference to the video element
            var video = document.getElementById("myVideo");

            // Pause the video when the page loads
            video.pause();
        });
    </script>
    

<script>

   $(document).on('click','#saveLikeDislike',function(){
    var _feed = $(this).data('feed');
    var _type=$(this).data('type');
   
    var vm=$(this);
    // Run Ajax
    $.ajax({
        url:"{{ url('save-like') }}",
        type:"post",
        dataType:'json',
        data:{
            post:_feed,
            type:_type,
            _token:"{{ csrf_token() }}"
        },
        beforeSend:function(){
            vm.addClass('disabled');
        },
        success:function(res){
            
            if(res.bool==true){            
               
               location.reload();
               var _prevCount=$("."+_type+"-count").text();
              
            }else if(res.bool==false){              
            
               toastr.error(res.error);
            }
        }   
    });
});

    $(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);
                  $('#cart-count').text(data.qty);
                }    
                else if(data.error == true)
                {
                    toastr.error(data.msg);
                }
            },error: function() {
                
                toastr.error('Something went wrong, please try again.');
            }
        
                
            });
            
        });
        
    });

</script>




@endsection
@endsection