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



<style>
    .crd {
    height: 240px;
}
</style>




<main>
   
    <section class="main-banner">
        <div class="banner-img">
            @if($category->flag == 1)
                <div class="img-main">
                    <img class="img-fluid" src="{{ asset('assets/admin/uploads/categories/categoy-banner/'.$category->banner_image) }}" alt="">
                </div>
                <div class="content">
                    <h2 data-aos="fade-left" data-aos-delay="200" data-aos-duration="1500">{{ strip_tags($category->banner_title) }}</span></h2> 
                    <p data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500">{{ strip_tags($category->banner_heading) }}</p>
                </div>
             @else
                <div class="img-main">
                    <img class="img-fluid" src="{{ asset('assets/admin/uploads/categories/categoy-banner/'.$category->banner_image) }}" alt="">
                </div>
                <div class="content">
                     <h2 data-aos="fade-left" data-aos-delay="200" data-aos-duration="1500">{{ strip_tags($category->banner_title) }}</span></h2> 
                    
                    <p data-aos="fade-right" data-aos-delay="200" data-aos-duration="1500">{!! $category->banner_heading !!}</p>
                </div>
            @endif
        </div>
    </section>
    
    <section class="have py-5">
        <div class="container">
            <div class="row gy-5">
                @if($videos)
                @foreach($videos as $video)  
                    <div class="col-12 col-lg-3 col-md-4 panel">
                        <div class="newcrd h-100">
                        <div class="crd">
                            <img src="{{asset('assets/admin/uploads/video/'.$video->thumbnail)}}" class="img-fluid" alt="">
                            <div class="con2 con">
                                <a href="{{ url('video/'.$video->video_id) }}">
                                    <div href="" class="playBtn"></div>
                                </a>
                            </div>
                        </div>
                        <ul>
                            <li class="lis1">{{$video->actor_name}}<i class="fa-brands fa-youtube"></i></li>
                            <li class="lis2" 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 style="display: unset;">
                            <li class="d-flex justify-content-between">
                                <a href="{{ url('video/'.$video->id) }}" style="width:100%;">
                                    <h3>{!! $video->title  !!}...</h3>
                                </a> 
                                <!--<i class="fa-regular fa-ellipsis-vertical"></i>-->
                            </li>
                        </ul>
                        <div class="platter"><a href="javascript:void(0)" class="theDifanchor addToCart" data-id="{{ $video->video_id }}"> Add to cart </a></div>
                        </div>
                    </div>
                @endforeach
                @endif
                <div class="col-12">
                    <button class="btn load">Load More</button>
                </div>
            </div>
        </div>
    </section>
</main>

@section('script')

<script>
    
   
        
        $('.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){
                console.log("data==>", 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