@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;
}

.fancybox-slide--video .fancybox-content {
    background: #000 !important;
}

</style>

<main>

    <section class="main-banner">
        <div class="banner-img">
            <div class="img-main">
                <img class="img-fluid" src="https://fitkatiekarr.com/assets/admin/uploads/teaser_page/750ef1f34a2972d4e216215463f4a960.png" alt="">
            </div>

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

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

<div class="row gy-5">
    
    
    
    @if($bundle)
        @foreach($bundle->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('teaser_video_detail/'.$video->teasers_id ) --}}">-->
                            <!--<a href="javascript:void(0);" data-id="{{ $video->id }}" class="open-fancybox" ><div class="playBtn" ></div> </a>-->
                            
                            <a href="{{url('video/'.$video->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/'.$video->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>{{ $video->price }}</span>
                                                   
                                </li>
                    </ul>
                    <ul>
                        <li class="d-flex justify-content-between">
                            <a href="{{-- url('teaser_video_detail/'.$video->id ) --}}">
                                @if(empty($video->video))
                                     <!--<h3 class="label label-default w-100"> Coming Soon </h3>-->
                                    <!--<h3>Coming Soon</h3>-->
                                @else
                                    
                                    <h3>{!! $video->title !!}</h3>
                                @endif
                            </a>
                           
                        </li>
                    </ul>
                    <!--<div class="platter"><a href="javascript:void(0)" class="theDifanchor addToCart"  data-id="{{ $video->id }}"> Add to cart </a></div>-->
                </div>
            </div>
            
        @endforeach
    @endif
    
   

<section class="pagi5867">
    <div class="pagination d-flex justify-content-center">
       
        
    </div>
</section>

</div>
</div>


    </section>



</main>

@section('script')
    

@endsection 
@endsection