@extends('front.layout.app')
@section('content')
<style>
    .crd {
    height: 240px;
}
.crd .img-fluid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*filter: blur(4px);*/
}

.fancybox-iframe {
    /* left: 0; */
    /* position: absolute; */
    /* top: 0; */
    width: 100%;
    height: 555px;
}
.fancybox-slide--iframe .fancybox-content  {
    width: 1448px;
    height: 555px !important;
}
.pre {
    font-size: 35px;
    text-align: center;
    text-transform: capitalize;
    font-family: 'Poppins';
    margin-top: 82px;
}
.fancybox-content {
    background: #ffab00 !important;
}
</style>

<main>
<!--<section class="main-banner katie">-->
<!--        <div class="banner-img">-->
<!--            <div class="img-box">-->
<!--                <img class="img-fluid" src="{{asset('assets/admin/uploads/teaser_page/'.$teaser->banner_image) }}" alt="">-->
<!--            </div>-->
<!--            <div class="content">-->
<!--                {!! $teaser->banner_heading !!}-->
                <!-- <h2 data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">TEAS<span>ER'S</span></h2> -->
<!--                <p data-aos="fade-right" data-aos-delay="200" data-aos-duration="1000">{!! $teaser->banner_title !!}</p>-->
<!--            </div>-->
<!--        </div>-->
<!--    </section>-->

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

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

    <section class="have my-5 py-5">
    <div class="container">

<div class="row gy-5">
    
    
    
    @if($teasers)
        @foreach($teasers as $teaser)
        
            <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/'.$teaser->thumbnail) }}" class="img-fluid" alt="">
                        <div class="con2 con">
                            <!--<a href="{{-- url('teaser_video_detail/'.$teaser->teasers_id ) --}}">-->
                            <!--<a href="javascript:void(0);" data-id="{{ $teaser->id }}" class="open-fancybox" ><div class="playBtn" ></div> </a>-->
                            
                            <a href="{{url('video/'.$teaser->id)}}"><div class="playBtn" ></div> </a>
                            
                            <!--<div id="text-container" style="display: none;">-->
                            <!--    <p> Comming Soon .</p>-->
                            <!--</div>-->
                            <!-- <a class="d-block" data-fancybox=""  data-type="video"  href="">-->
                            <!--    <div href="{{-- url('teaser_video_detail/'.$teaser->teasers_id ) --}}" class="playBtn"></div>-->
                            <!--</a>-->
                            
                        </div>
                    </div>
                    <ul>
                        <li><i class="fa-brands fa-youtube"></i></li>
                        
                                <li style="display: flex;
                                justify-content: end;"><span><span>$</span>{{ $teaser->price }}</span>
                                                   
                                </li>
                    </ul>
                    <ul>
                        <li class="d-flex justify-content-between">
                            <a href="{{-- url('teaser_video_detail/'.$teaser->id ) --}}">
                                @if(empty($teaser->video))
                                     <!--<h3 class="label label-default w-100"> Coming Soon </h3>-->
                                    <!--<h3>Coming Soon</h3>-->
                                @else
                                    
                                    <h3>{!! $teaser->title !!}</h3>
                                @endif
                            </a>
                           
                        </li>
                    </ul>
                    <div class="platter"><a href="javascript:void(0)" class="theDifanchor addToCart"  data-id="{{ $teaser->id }}"> Add to cart </a></div>
                </div>
            </div>
            
        @endforeach
    @endif
    
   

<section class="pagi5867">
    <div class="pagination d-flex justify-content-center">
       {{ $teasers->links() }}
        
    </div>
</section>

</div>
</div>


    </section>



</main>

@section('script')
    
<script>
$(document).ready(function() {
    $('.open-fancybox').on('click', function() {
        var id = $(this).data('id');
       
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: "{{url('get-teaser-video')}}", 
            method: 'POST',
            data:{id:id},
            success: function(data) {
               
               if(data == "Coming Soon")
               {
                    var stringText = "coming soon.";
                    var iframeContent = '<!DOCTYPE html><html><body><pre class="pre">' + stringText + '</pre></body></html>';
                    
                   $.fancybox.open({
                    content: iframeContent,
                    type: 'html',
                    
                    opts: {
                      width: 400, // Example: set the width
                      height: 300, //
                     
                    },
                    
                });
                
               }else{
                  
                   $.fancybox.open({
                    src: data, 
                    type: 'video',
                  
                    opts: {
                        
                      
                    }
                });
                
                
               }
            },  error: function() {
                console.log('AJAX request failed.');
            }
        });
    });
});
</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);
                  $('#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