@extends('front.layout')
@section('custom-style')
<style>
    /* .slider-video
    {
        display : none;
    } */ 

    .owl-item .vedio_symbol {
        margin-top: 5%!important;
    }
    
    .container .btn23 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        /* background-color: #555; */
        color: white;
        font-size: 16px;
        padding: 12px 24px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        text-align: center;
    }

    video::-webkit-media-controls-timeline {
        display: none
    }

    video::-webkit-media-controls-current-time-display {
        display: none
    }

    video::-webkit-media-controls-time-remaining-display {
        display: none;
    }
    
    .top-video-slider-thumbnail
    {
        background-size: 100% auto;
        background-position:center;
    }
    /*.home-slider{height: 100vh;min-height: 700px;}*/
    /*.home-slider .bg-img-hero{height: 100vh !important;}*/


    @-webkit-keyframes slideIn {
        0% {
            transform: translateY(-50px);
        }
        100% {
            transform: translateY(0);
        }
    }

    @keyframes slideIn {
        0% {
            transform: translateY(-50px);
        }
        100% {
            transform: translateY(0);
        }
    }

    .vedio_symbol .fa-thumbs-up,
    .vedio_symbol .fa-thumbs-down,
    .vedio_symbol .fa-eye {
        font-size: 10px!important;
    }
    .vedio_symbol .fa-play {
    font-size: 10px!important;
    }
    .owl-item .vedio_symbol i {
    margin-left: 5px!important;
    /* margin-right: 2px!important; */
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) and (orientation : portrait){
.height-280 {
    height: 320px;
    padding:5px;
}
.height-150 {
    height: 120px;
}
 .height-200 {
    height: 200px;
     padding: 5px!important;
}

.video-size {
    width: 100%;
    height: 100%;
}
.btn-primary {

    width:200px!important
}
.slider-video-title-text {
    font-size: 25px;
    font-weight: 900;
}
}
@media only screen and (max-width: 600px) and (orientation : landscape){
 .height-200 {
    height: 200px;
    padding: 5px!important;
}
.video-size {
    width: 100%;
    height: 100%;
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.video-size {
    width: 100%;
    height: 100%;
}
   .height-200 {
    height: 200px;
    padding: 5px!important;
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.video-size {
    width: 100%;
    height: 100%;
}
 .height-200 {
    height: 150px;

}
}
@media only screen and (min-width: 992px) {
    .video-size {
    width: 100%;
    height: auto;
}

 .height-200 {
    height: 150px;

}
.height-280 {
    height: 280px;
}
.height-150 {
    height: 150px;
}
.btn-primary {

    width:auto
}
.slider-video-title-text {
    font-size: 35px;
    font-weight: 900;
}
}

body {
	padding: 0;
	margin: 0;
	position: relative;
	/*background: url("https://images.unsplash.com/photo-1569973560851-8c4563f4c3c8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80")
		no-repeat center center;*/
	background: none !important;
	background-size: cover;
	height: auto;
	font-family: "Raleway", sans-serif;
	/* overflow-y: hidden; */
}

.content1 {
	max-width: auto;
	margin: 0 auto;
	top: 35%;
	position: relative;

}


/* additional styling */
.mb-link, .mb-link-2{
    color: #DFA326 !important;
    margin:bottom:0 !important;
}

#upcoming-video-live-video{
    height:270px;
}

#live_streaming_btn{
  -webkit-animation: glowing 1500ms infinite;
  -moz-animation: glowing 1500ms infinite;
  -o-animation: glowing 1500ms infinite;
  animation: glowing 1500ms infinite;
}

@-webkit-keyframes glowing {
   0% { background-color: #FF0000; box-shadow: 0 0 3px #FF0000; }
  50% { background-color: #FF0011; box-shadow: 0 0 40px #FF0011; }
  100% { background-color: #FF0000; box-shadow: 0 0 3px #FF0000; }
}

@-moz-keyframes glowing {
  0% { background-color: #FF0000; box-shadow: 0 0 3px #FF0000; }
  50% { background-color: #FF0011; box-shadow: 0 0 40px #FF0011; }
  100% { background-color: #FF0000; box-shadow: 0 0 3px #FF0000; }
}

@-o-keyframes glowing {
  0% { background-color: #FF0000; box-shadow: 0 0 3px #FF0000; }
  50% { background-color: #FF0011; box-shadow: 0 0 40px #FF0011; }
  100% { background-color: #FF0000; box-shadow: 0 0 3px #FF0000; }
}

@keyframes glowing {
  0% { background-color: #FF0000; box-shadow: 0 0 3px #FF0000; }
  50% { background-color: #FF0011; box-shadow: 0 0 40px #FF0011; }
  100% { background-color: #FF0000; box-shadow: 0 0 3px #FF0000; }
}

.padcase{
    padding-top:120px !important;
}

#homepage_video_text_section{
    transition:0.3s;
    margin-top:30vh !important;
}

#homepage_video_text_section h1{
    width:50%;

}

/* Small devices (767px and down) */
@media (max-width: 767px) {
    .mb-link{
        margin-bottom:0px !important;
        /*margin-top:-15px !important;*/
    }
    
    .mb-link-2{
        margin-top:0px !important;
        margin-bottom:0px !important;
    }
    
    #live_tv_broadcast{
         margin-bottom:0px !important;
    }
    
    #upcoming-video-live-video{
        height:180px;
    }
    
    #current_news{
        margin-top:0px !important;
        margin-bottom:0px !important;
    }
    
    .shows_section{
        padding:0px !important;
    }
    
    .livestream_section{
       padding-top:0; 
    }
    
    #watch_now_link{
        /*width:45% !important;*/
        width:45% !important;
        max-width:200px;
        padding:10px 10px!important;
        /*text-align:left !important;*/
        border:2px solid red !important;
    }
    
    #watch_now_section{
        width:auto !important;
        /*border:2px solid green !important;*/
    }
    
    #homepage_video_text_section{
        margin-top:36vh !important;
        /*transform:translateY(25vh);*/
        transition:0.3s;
        display:flex;
        flex-diretion:row !important;
        align-items:center;
        overflow:hidden !important;
        background-color:#DFA326;
        /*border:2px solid red !important;*/
    }
    
    #homepage_video_text_section h1{
        width:50%;
        height:100%;
        text-align:center !important;
        line-height:22px !important;
        /*border:2px solid red !important;*/
    }
    
    #homepage_video_text_section h1 a{
        color:rgba(0,0,0,.8) !important;
        display:block;
    }
    
    #watch_now_sectio{
        width:48%;
        margin-left:1%;
        margin-right:1%;
        height:100%;
    }
    
    #watch_now_link{
        width:100% !important;
        margin:0 !important;
    }
    
    #video_title_text{
        font-size: 0.4em !important;
       
        /*color: green !important;*/
    }
    
    #watch_now_link{
       z-index:9999 !Important;
    }
    
    #item_shows_section{
        /*margin-bottom:10vh !Important;*/
        /*border:2px solid red !important;*/
    }
}

</style>

<style>
    .slider-category-text, .slider-duration-text
        {
            font-size: 12px;
        }
        .slider-video-title-text
        {
            font-size: 35px;
            font-weight: 900;
        }
        .media-scale-transform:hover
        {
            transform: scale(0.9)!important;
            transition: .3s !important;

        }
        .overlay:hover
        {
            border-radius: 5px!important;
        }
        /* .media-wrap-row-video-section
        {
            flex-wrap: nowrap;
        } */
        .font-size-20
        {
            margin-left:15px;
        }
        .video-title-without-hover
        {
            position: relative;
            bottom: 40px!important;
            left: 10px;
            font-size: 12px;
            font-weight: 700;
            color:#fff;

        }
        .media-scale-transform:hover .video-title-without-hover
        {
            display: none!important;
        }
        .overlay
        {
            height: auto!important;
        }

        /* .item:hover .landscape-videos
        {
            height:280px!important;

        } */

        .item:hover .text-landscape
        {
            /* display: none; */
            margin-top: 50px!important;
            overflow: visible!important;
            z-index: 99999!important;
        }
        .item:hover .vedio_symbol_landscape
        {
            margin-top: 15px!important;
            padding-bottom: 25px!important;
        }
</style>
@endsection
@section('content')
    <!--slider section start-->
        <section >
        <div class="home-slider position-relative overflow-hidden">
            <div id="sliderSyncingNav" class="js-slick-carousel slick" data-hs-slick-carousel-options='{
                        "dots": true,
                        "dotsClass": "d-xl-none slick-pagination mb-3 position-absolute right-0 left-0 bottom-0 ",
                        "infinite": false,
                        "asNavFor": "#sliderSyncingThumb"
                    }'>
                @if(isset($data['sliders']))
                    @foreach($data['sliders'] as $slider)
                        <div id="slider_display_section" class="bg-img-hero d-flex align-items-center min-h-676rem slider-gradient top-video-slider-thumbnail"
                             style="background-image: url({{$slider->slider_image}});background-color: black;">
                             @if(isset($slider->getVideo->trailer_path))
                                <video id="slider-video-{{ $slider->id }}" loop autoplay muted style="flex:0;min-width:100%;position:absolute;top: 0;"class="video-size slidertopflash">
                                    <source id="top-slider-video-src-{{ $slider->id }}" src="@if($loop->iteration == 1) {{ $slider->getVideo->trailer_path }} @endif" type="video/mp4">
                                </video>
                            @endif
                            <div id="homepage_video_text_section" class="mx-3 mx-md-5 mx-lg-10 col-xl-5 px-0 mt" style="border-radius:5px !important;">
                                <div class="mb-3 pb-1">
                                    <ul class="list-unstyled nav nav-meta nav-meta__white">
                                        @if(isset($slider->getVideo->getCategories))
                                            <li class="">
                                                @foreach($slider->getVideo->getCategories as $sliderVideoCategory)
                                                    @if(isset($sliderVideoCategory->getCategory->name))
                                                        <a href="#" class="slider-category-text d-none">
                                                            {{$sliderVideoCategory->getCategory->name}}
                                                        </a>
                                                        @if(!$loop->last)
                                                            ,&nbsp;
                                                        @endif
                                                    @endif

                                                @endforeach
                                            </li>
                                        @endif
                                        @if(isset($slider->getVideo->duration))
                                            <li class=" slider-duration-text d-none">
                                                {{$slider->getVideo->duration}}
                                            </li>
                                        @endif

                                    </ul>
                                </div>

                                @if(isset($slider->getVideo->title))
                                    <h1 class="display-12 text-lh-1dot1 mb-sm-3 mb-md-6 max-w-565">
                                        <a id="video_title_text" href="#" class="h-w-primary slider-video-title-text">
                                            {{$slider->getVideo->title}}
                                        </a>
                                    </h1>
                                <div id="watch_now_sectio" class="d-block d-md-flex flex-md-row">
                                    <a id="watch_now_link" href="{{route('front.singleVideoPage', ['device'=> 'dp', 'slug' => $slider->getVideo->slug])}}" class="btn btn-primary py-2 px-sm-0 px-md-6 py-md-3 btn-sm mb-3 mb-md-0 d-none d-xl-block">
                                        <i class="fa fa-play text-red" style="padding-right:5px;"></i> WATCH NOW
                                    </a>
                                      <a id="watch_now_link" href="{{route('front.singleVideoPage', ['device'=> 'mb', 'slug' => $slider->getVideo->slug])}}" class="btn btn-primary py-2 px-sm-0 px-md-6 py-md-3 btn-sm mb-3 mb-md-0 d-block d-xl-none">
                                        <i class="fa fa-play text-red" style="padding-right:5px;"></i> WATCH NOW
                                    </a>
                                   
{{--   <a href="#" class="btn btn-outline-light ml-md-4 px-6 py-3d btn-sm">--}}
{{--   + PLAYLIST--}}
{{--                                                                  </a>--}}

                                </div>
                                @endif

                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
            <div
                class="d-none d-xl-flex justify-content-center position-xl-absolute col-xl-7 col-wd-8 right-0 bottom-0 mb-xl-10 pb-xl-1 thumbnailWrap">
                <div id="sliderSyncingThumb"
                     class="js-slick-carousel slick u-slick-bordered-primary slick-gutters-1 slick-transform-off"
                     data-hs-slick-carousel-options='{
                            "infinite": true,
                            "slidesToShow": {{count($data['sliders'])}},
                            "isThumbs": true,
                            "asNavFor": "#sliderSyncingNav",
                            "responsive": [{
                                "breakpoint": 1199,
                                "settings": {
                                    "slidesToShow": 2
                                },
                                "breakpoint": 768,
                                "settings": {
                                    "slidesToShow": 2
                                }
                            }]
                        }'>
                    @if(isset($data['sliders']))
                        @foreach($data['sliders'] as $slider)
                            <div class="my-1d position-relative" style="cursor: pointer;">
                                <div class="thumb-img slider_thumbnail" onclick="changeSliderVideo({{ $slider->id }})">
                                    <img class="img-fluid" src="{{$slider->slider_thumbnail}}"
                                         alt="Image Description">
                                </div>
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>

    </section>
    <!--slider section end-->


    <!--Live Events Section Start-->
    <div id="live_streaming_section_display" class="bg-gray-1100 space-1 livestream_section">
            <button id="live_streaming_btn" class="btn btn-primary p-3" type="button" style="width:94% !important;margin:0 3%;background-color:red;color:#fff;font-size:1.5em;display:flex !important;justify-content:center;align-items:center !important;">  
             <a href="{{ url('mb/live-broadcast') }}" class="d-flex d-xl-none" style="justify-content:center;align-items:center !important">
                <p style="padding:0 !important;margin:0 !important;padding-right:5px !important;"> Live Streaming </p>
                <svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512" fill="#DFA356"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9V168c0-8.7 4.7-16.7 12.3-20.9z"/>
                </svg>
            </a>
            
            <a href="{{ url('dp/live-broadcast') }}" class="d-none d-xl-flex" style="justify-content:center;align-items:center !important">
                <p style="padding:0 !important;margin:0 !important;padding-right:5px !important;"> Live Streaming </p>
                <svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512" fill="#DFA356"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9V168c0-8.7 4.7-16.7 12.3-20.9z"/>
                </svg>
            </a> 
            
         
            </button>
    <!--    <div class="container mx-auto pt-4 pb-1" style="border:3px solid red !Important;">-->
    <!--            <div class="d-block" style="border:2px solid pink !important;">-->
    <!--              <button class="btn btn-primary w-100" type="button" style="border;2px solid green;">Button</button>-->
    <!--            </div>-->
    <!--        <div class="home-section" id="tvprograms">-->
    <!--            <header id="live_tv_broadcast"-->
    <!--                    class="d-md-flex align-items-center justify-content-between mb-4 pb-1 w-100">-->
    <!--                <div class="font-size-30 font-weight-bold mb-3 mb-md-0 text-golden font-secondary">Live Streaming -->
    <!--                </div>-->
    <!--                <div class="d-none d-md-block border-top col p-0 ml-3 border-gray-6830"></div>-->
    <!--            </header>-->

                <!--Products Slider-->

                <!--end-->

    <!--            <div class="tab-content">-->
    <!--                <div class="tab-pane fade show active dark" id="pills-one-code-features-example2"-->
    <!--                     role="tabpanel" aria-labelledby="pills-one-code-features-example2-tab">-->
    <!--                    <div class="row mx-n2">-->
    <!--                        <div class="col-lg-5 px-2">-->
    <!--                            <div class="product mb-5 position-relative mb-lg-0">-->
    <!--                                <div class="mr-1">-->
    <!--                                    @if(isset($currentUpcomingPlayingVideo))-->
    <!--                                    @php $videoLive = $currentUpcomingPlayingVideo; @endphp-->
                                        <!--<video id="upcoming-video-live-video" poster="{{$currentUpcomingPlayingVideo->thumbnail}}" style="width:100%!important; height:315px!important;"  oncontextmenu="nodownload" loop muted playsinline autoplay controls >-->
                                        <!--    <source src="{{$currentUpcomingPlayingVideo->video_path}}" id="upcoming-video-live-video-src" type="video/mp4">-->
                                        <!--</video>-->

    <!--                                     <video id="upcoming-video-live-video" loop autoplay muted controls poster="{{$currentUpcomingPlayingVideo->thumbnail}}" style="width:100%!important;" oncontextmenu="nodownload" loop muted playsinline autoplay controls>-->
    <!--                                        <source src="{{$currentUpcomingPlayingVideo->video_path}}" id="upcoming-video-live-video-src" type="video/mp4">-->

    <!--                                        @if($currentUpcomingPlayingVideo->ppv_listing_type == 'Free View')-->
    <!--                                        <source src="{{$currentUpcomingPlayingVideo->video_path}}" id="upcoming-video-live-video-src" type="video/mp4">-->

    <!--                                        @else-->
    <!--                                        <source src="" id="upcoming-video-live-video-src" type="video/mp4">-->

    <!--                                        @endif-->

    <!--                                    </video>-->
    <!--                                     <img id="upcoming-video-live-video-img" style="display:none" class="container" src="{{$currentUpcomingPlayingVideo->thumbnail}}">-->
                                        <!-- <input class="btn" type="button" value="Replace Message" onclick='getMessage()'> -->
    <!--                                    <button id="playBtn" class="btn23" style="display:none" onclick='getMessage()'>-->
    <!--                                        <i class="fa fa-play text-red" style="font-size: 48px"></i>-->
    <!--                                    </button>-->


    <!--                                    @elseif(isset($data['currentUpcomingVideo'][0]))-->
    <!--                                    @php $videoLive = $data['currentUpcomingVideo'][0]; @endphp-->
    <!--                                     <video id="upcoming-video-live-video" poster="{{$data['currentUpcomingVideo'][0]->thumbnail}}" style="width:100%!important;"  oncontextmenu="nodownload" loop playsinline controls preload="metadata">-->
    <!--                                            <source src="" id="upcoming-video-live-video-src" type="video/mp4">-->
    <!--                                    </video>-->


    <!--<video id="upcoming-video-live-video" loop autoplay muted controls poster="{{$data['currentUpcomingVideo'][0]->thumbnail}}" style="width:100%!important; height:315px!important;--webkit-media-controls-current-time-display:none;" oncontextmenu="nodownload" loop playsinline autoplay controls preload="metadata">-->

    <!--                                        @if($data['currentUpcomingVideo'][0]->ppv_listing_type == 'Free View')-->
    <!--                                        <source src="{{$data['currentUpcomingVideo'][0]->video_path}}" id="upcoming-video-live-video-src" type="video/mp4">-->

    <!--                                        @else-->
    <!--                                        <source src="" id="upcoming-video-live-video-src" type="video/mp4">-->

    <!--                                        @endif-->

    <!--                                    </video>-->

    <!--                                    <img id="upcoming-video-live-video-img" style="display:none" class="container" src="{{$data['currentUpcomingVideo'][0]->thumbnail}}">-->
                                        <!-- <input class="btn" type="button" value="Replace Message" onclick='getMessage()'> -->
    <!--                                    <button id="playBtn" class="btn23" style="display:none" onclick='getMessage()'>-->
    <!--                                        <i class="fa fa-play text-red" style="font-size: 48px"></i>-->
    <!--                                    </button>-->


    <!--                                    @else-->
    <!--                                    <video poster="#" id="upcoming-video-live-video" style="width:100%!important;"  oncontextmenu="nodownload" loop playsinline controls preload="metadata">-->
    <!--                                        <source src="" id="upcoming-video-live-video-src" type="video/mp4">-->
    <!--                                    </video>-->
    <!--                                    @endif-->
    <!--                                    {{-- showing live broadcast video detail --}}-->
    <!--                                    @if(isset($videoLive))-->
    <!--                                        <h6 class="font-size-16 text-white font-weight-semi-bold font-secondary mb-3 mb-md-1" id="video-title-and-sub-title">-->
    <!--                                            {{$videoLive->title}} - {{Str::words($videoLive->sub_title)}}-->
    <!--                                            {{-- @if(!isset($videoLive->video_path))-->
    <!--                                            <button class="btn btn-xs btn-warning">Coming Soon</button>-->
    <!--                                            @endif --}}-->
    <!--                                        </h6>-->
    <!--                                            {{-- <p class="category-page-subtitle-slide">{{Str::words($videoLive->sub_title)}}</p> --}}-->
    <!--                                        <ul class="list-unstyled nav nav-meta font-secondary pt-0 mb-0 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">-->
    <!--                                            <li class="text-white flex-shrink-0 flex-shrink-md-1" id="current-upcomming-video-date">{{\Carbon\Carbon::parse($videoLive->date)->format('d M, Y')}}</li>-->
    <!--                                            @if(isset($videoLive->duration))-->
    <!--                                                <li class="text-white flex-shrink-0 flex-shrink-md-1" id="current-upcomming-video-duration">{{$videoLive->duration}}</li>-->
    <!--                                            @endif-->

    <!--                                            <li>-->
    <!--                                                @if(isset($videoLive->getRating->image))-->
    <!--                                                    <img id="current-upcomming-video-rating-image" style="height: 20px!important;-->
    <!--                                                    width: auto!important;-->
    <!--                                                    " src="{{url('ratings'.'/'.$videoLive->getRating->image)}}">-->
    <!--                                                @endif-->
    <!--                                            </li>-->
    <!--                                        </ul>-->
    <!--                                        {{-- <div class="video-description">{!! $videoLive->description !!}</div> --}}-->
    <!--                                    @endif-->
    <!--                                    {{--  @if(get_setting('live_streaming_code'))-->
    <!--                                            {!! get_setting('live_streaming_code')->value !!}-->
    <!--                                    @else-->
    <!--                                        <iframe width="100%" height="315" src="https://www.youtube.com/embed/vejH7xVsLFk" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>-->
    <!--                                    @endif  --}}-->
    <!--                                </div>-->
    <!--                            </div>-->
    <!--                        </div>-->

    <!--                        <div class="col-lg-7 px-2">-->
    <!--                            <div class="row mx-n2">-->
    <!--                                @if(isset($data['liveTVBroadcastVideos']))-->
    <!--                                    @foreach($data['liveTVBroadcastVideos'] as $item)-->
    <!--                                    @if($loop->iteration > 1)-->
    <!--                                        <div class="col-6 col-lg-4 px-2">-->

    <!--                                            <div class="featured_img img-container mb-2 product height-150">-->
    <!--                                                <a href="{{route('front.singleVideoPage', ['device'=> 'dp', 'slug' => $item->slug])}}" onclick="return false;">-->
    <!--                                                    <img class="img-fluid img-news image" src="{{$item->thumbnail}}" alt="Image-Description">-->
                                                        <!--<div class="position-absolute pt-0">-->
                                                        <!--    <p class="video-title-without-hover">-->
                                                        <!--        {{-- <i class="fa fa-play"></i>  --}}-->
                                                        <!--        {{$item->title}}-->
                                                        <!--    </p>-->
                                                        <!--</div>-->
    <!--                                                    <div class="overlay-1">-->
    <!--                                                        <div class="text top-63">-->
    <!--                                                            <div class="content_play">-->

    <!--                                                                <div class="content-title text-white font-size-11">-->
    <!--                                                                    <i class="fa fa-play" aria-hidden="true"></i>-->
    <!--                                                                    {{$item->title}}-->
    <!--                                                                </div>-->
    <!--                                                                <p class="video-subtitle" style="font-size: 8px;padding: 0px;background: transparent;">-->
    <!--                                                                    {{Str::words($item->sub_title,6)}}-->

    <!--                                                                </p>-->
    <!--                                                            </div>-->
    <!--                                                            {{--  <div class="description text-light-white-1300 font-size-11 pt-2">-->
    <!--                                                                {{ strip_tags(html_entity_decode(Str::words($item->description,10))) }}-->
    <!--                                                            </div>  --}}-->
    <!--                                                            <div class="description text-light-white-1300 font-size-11 pt-2">-->
    <!--                                                                {{\Carbon\Carbon::parse($item->date)->format('d M, Y')}}-->
    <!--                                                                ({{\Carbon\Carbon::parse($item->start_time)->format('H:i')}} - {{\Carbon\Carbon::parse($item->end_time)->format('H:i')}})-->

    <!--                                                                @if(isset($item->ppv_listing_type))-->
    <!--                                                                    @if($item->ppv_listing_type == 'Free View')-->
    <!--                                                                    <span class="live-broadcast-subscription-or-free-button free-view-button">-->
    <!--                                                                        Free View-->
    <!--                                                                    </span>-->
    <!--                                                                    @elseif($item->ppv_listing_type == 'Pay Per View')-->
    <!--                                                                    <span class="live-broadcast-subscription-or-free-button subscription-view-button">-->
    <!--                                                                        Subscription-->
    <!--                                                                    </span>-->
    <!--                                                                    @endif-->
    <!--                                                                @endif-->
    <!--                                                            </div>-->
    <!--                                                            @if(isset($item->duration))-->
    <!--                                                                <div class="action">-->
    <!--                                                                    <p class="icon-title text-white font-size-10 pt-2">-->
    <!--                                                                        <i class="fa fa-clock" aria-hidden="true"></i>-->
    <!--                                                                        {{$item->duration}}, {{$item->created_at->format('d M, Y')}}-->
    <!--                                                                    </p>-->
    <!--                                                                </div>-->
    <!--                                                            @endif-->



    <!--                                                        </div>-->
    <!--                                                    </div>-->
    <!--                                                </a>-->
    <!--                                            </div>-->
    <!--                                        </div>-->
    <!--                                    @endif-->
    <!--                                    @endforeach-->
    <!--                                @endif-->
    <!--                            </div>-->
    <!--                        </div>-->

    <!--                    </div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->
    </div>
    <!--Live Events End-->

    <!--Shows Section Start-->


    <!--overlay-->

    <div class="bg-gray-1100 space-1">
        <div class="container mx-auto p-0 pb-3 pt-1 px-2 px-lg-5 px-xxl-0">
            @if(get_setting('home_page_section'))
                @php
                $homeContent = get_setting('home_page_section')->value;
                $homeContentArray = explode(',', $homeContent);
                @endphp

                @foreach($homeContentArray as $homeContentSingle)
                    @if(get_design_option($homeContentSingle) == 'Verticle')
                        @include('front.home-page.home-page-section', ['slug'=> $homeContentSingle])
                    @elseif(get_design_option($homeContentSingle) == 'Horizontal')
                        @include('front.home-page.home-videos-landscape', ['slug'=> $homeContentSingle])
                    @endif 
                @endforeach


            @else
                @php $videoCategories = ['current-news', 'exclusives', 'highlights-opinion', 'full-interviews', 'documentaries']; @endphp
                @foreach($videoCategories as $categorySlug)
                    @if(get_design_option($categorySlug) == 'Horizontal')
                        @include('front.home-page.home-videos-landscape', ['slug'=> $categorySlug])
                    @elseif(get_design_option($categorySlug) == 'Verticle')
                        @include('front.home-page.home-page-section', ['slug'=> $categorySlug])
                    @endif
                @endforeach
            @endif

        </div>
    </div>
    
   
    </main>
@endsection

@section('custom-script')

    <script defer src="{{url('front/assets/js/custom-js.js')}}"></script> 
    <script defer src="{{url('front/assets/js/owl.carousel.js')}}"></script>
    
    <script>
        @if(isset($currentUpcomingPlayingVideo))
        setTimeout( function()
            {
                // Set video element to variable
                var video = document.getElementById('upcoming-video-live-video');
                video.currentTime = {{$videoForwordTime}};


        }, 5000);//time in milliseconds
        @endif

    </script>

    {{-- script for slider video change --}}
    <script>
        function changeSliderVideo(topSliderId)
        {
            var videosSrc = [];
            @foreach ($data['sliders'] as $slider)
                // $("#slider-video-{{ $slider->id }}").css('display', 'none');
                @isset($slider->getVideo->trailer_path)
                    var videoChangeSlider = $("#slider-video-{{ $slider->id }}")[0];
                    videoChangeSlider.pause();
                    $("#top-slider-video-src-{{ $slider->id }}").attr('src', '#')
                    videoChangeSlider.load();
                    videosSrc[{{ $slider->id }}] = "@if(isset($slider->getVideo->trailer_path)){{ $slider->getVideo->trailer_path }}@endif";
                @endif
                
            @endforeach

            setTimeout(function() {
                // console.log(videosSrc[id]);
                var videoCurrentSlide = $('#slider-video-'+topSliderId)[0];
                if(videoCurrentSlide != undefined)
                {
                    $('#top-slider-video-src-'+topSliderId).attr('src', videosSrc[topSliderId])
                    // console.log(video);
                    videoCurrentSlide.load();
                    videoCurrentSlide.play();
                    videoCurrentSlide.muted = false;
                }

            }, 1000);

        }
    </script>

    {{-- pause video onscroll --}}
    <script>

        // var videos = document.getElementsByTagName("video");
        var videos = [];

        @foreach ($data['sliders'] as $slider)
            
                var videoScroll = $("#slider-video-{{ $slider->id }}")[0];
                videos[{{ $loop->iteration }}] = videoScroll;
        @endforeach



        function checkScroll() {
            var fraction = 0.3; // Play when 80% of the player is visible.

            for(var i = 1; i <= videos.length; i++) {

                var videoOnScroll = videos[i];
                if(videoOnScroll != undefined)
                {
                    // console.log(video);

                    var x = videoOnScroll.offsetLeft, y = videoOnScroll.offsetTop, w = videoOnScroll.offsetWidth, h = videoOnScroll.offsetHeight, r = x + w, //right
                        b = y + h, //bottom
                        visibleX, visibleY, visible;

                        visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
                        visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

                        visible = visibleX * visibleY / (w * h);

                        if (visible > fraction) {
                            // videoOnScroll.play();
                            // videoOnScroll.muted = false;
                            
                            videoOnScroll.muted = true;
                            videoOnScroll.play();
                            
                            //console.log("player visible");
                            
                        } else {
                            
                            videoOnScroll.muted = true;
                            videoOnScroll.pause();
                            
                             //console.log("player not visible");
                        }
                        // else {
                        //    // videoOnScroll.muted = true;
                        //     //videoOnScroll.pause();
                        // }
                }


            }

            //for live vroadcast
            var liveBroadcast = $('#upcoming-video-live-video')[0];
            if(liveBroadcast != undefined)
            {
                var xLive = liveBroadcast.offsetLeft, yLive = liveBroadcast.offsetTop, wLive = liveBroadcast.offsetWidth, hLive = liveBroadcast.offsetHeight, rLive = xLive + wLive, //right
                bLive = yLive + hLive, //bottom
                visibleXLive, visibleYLive, visibleLive;

                visibleXLive = Math.max(0, Math.min(wLive, window.pageXOffset + window.innerWidth - xLive, rLive - window.pageXOffset));
                visibleYLive = Math.max(0, Math.min(hLive, window.pageYOffset + window.innerHeight - yLive, bLive - window.pageYOffset));

                visibleLive = visibleXLive * visibleYLive / (wLive * hLive);

                if (visibleLive > fraction) {
                    liveBroadcast.muted = false;
                } else {
                    liveBroadcast.muted = true;
                }
            }


        }

        window.addEventListener('scroll', checkScroll, false);
        window.addEventListener('resize', checkScroll, false);

    </script>


    <script>
  var startdatetime = 0;
    var vidImg = document.getElementById("upcoming-video-live-video-img");
    var playBtn = document.getElementById("playBtn");


    var vid = document.getElementById("upcoming-video-live-video");
    var sites = {!!$videoForwordTime!!};

    vid.currentTime += sites
    var curplaytime = vid.currentTime;
    vid.onpause = function() {
        // alert("The video has been paused"+curplaytime);
        startdatetime = new Date().getTime();
        vid.style.display = 'none';
        vidImg.style.display = 'block';
        playBtn.style.display = 'block';

    };

         vid.onplay = function() {

        var enddatetime = new Date().getTime();
        var difference = enddatetime - startdatetime
        difference = Math.floor((difference) / (1000));

        vid.addEventListener('loadedmetadata', function() {
            this.currentTime = 40;

        }, false);


        console.log("The video has been playdd" + difference + '-' + curplaytime + '-' + enddatetime)

        // difference = difference / 60 / 60 / 1000;
        // alert("The video has been playdd"+difference+'-'+curplaytime+'-'+enddatetime);


    };

    function getMessage() {
        //        document.getElementById("upcoming-video-live-video").addEventListener('loadedmetadata', function() {
        //   this.currentTime = 40;

        // }, false);
        var enddatetime = new Date().getTime();
        var difference = enddatetime - startdatetime
        difference = Math.floor((difference) / (1000));
        vid.style.display = 'block';
        vidImg.style.display = 'none';
        playBtn.style.display = 'none';
        vid.play()
        vid.currentTime += difference;
    }
    // page loader
    $(window).on('load',function(){
	setTimeout(function(){ // allowing 3 secs to fade out loader
	$('.page-loader').fadeOut('slow');
	},100);
});
    </script>
    
    <script>
        //start and stop video playback when mouse hover over trailer
     	var temp;
        
     	function onMouseOverTrailer(id, trailerId)
        {
            temp = $(id).children("div").children("div.overlay-1").children("div.video-wrapper").children("video")[0];
            temp.muted = true;
            temp.play();
            
            //debug
            //alert(`video playback started`);
        }
    
    
        function onMouseLeaveTrailer(id)
        {
            temp = $(id).children("div").children("div.overlay-1").children("div.video-wrapper").children("video")[0];
            temp.pause();
            temp.currentTime=0;
            
            //debug
            //alert(`video playback paused and reset`);
        }
        
        
        
          //stop video playback when trailer leaves viewport (crucial for mobile screens)
        $(window).on('scroll', function() {
            $("video").each(function(){
                var video = $(this)[0];
                var videoTop = $(video).offset().top;
                var videoBottom = videoTop + $(video).height();
                var windowTop = $(window).scrollTop();
                var windowBottom = windowTop + $(window).height();
                
                var videoClass = video.classList.value;
                var containsSliderTopFlash = video.classList.contains("slidertopflash");

                //Log or use the results as needed
                if (containsSliderTopFlash) {
                    console.log("skipping");
                    return; // Skip to the next iteration
                }
                        
                
                // Check if the video is the closest one to the top of the viewport
                var isClosestToTop = videoTop >= windowTop && videoTop < windowBottom;
                
                // Check if the video is in the viewport
                if (!isClosestToTop) {
                    if (!video.paused) {
                        
                        video.pause();
                        video.currentTime = 0;
                    }
                }

                
            });
        });
        
        
        // stop video playback when trailer is swapped out by next trailer in the caurosel -leaves viewport (crucial for mobile screens)
        $('.owl-carousel').on('changed.owl.carousel', function(event) {
            //console.log("swapped");
            $("video").each(function(){
                var video = $(this)[0];
                
                //stop all playing videos except the flash video
                stopAllVideos();
            });
        });
        
        
        function stopAllVideos() {
            var allVideos = document.querySelectorAll('video');
        
            allVideos.forEach(function(video) {
                
                var videoClass = video.classList.value;
                var containsSliderTopFlash = video.classList.contains("slidertopflash");

                // Log or use the results as needed
                if (containsSliderTopFlash) {
                    return; // Skip to the next iteration
                }
                
                video.pause();
                video.currentTime = 0;
            });
        }
        
         //custom video play pause stop functions
        //pause any playing video(except the selcted one) before play start
        // $(document).ready(function(){
        //     // Add an event listener to all videos to detect when they start playing.
        //     $("video").each(function(){
        //         var video = $(this)[0];
        //         video.addEventListener("playing", function() {
        //             // Stop all other videos.
        //             $("video").each(function(){
        //                 // if($(this)[0] != video)
        //                 //     // var otherVideo = $(this)[0];
        //                 //     // otherVideo.currentTime = 0; // Set playback position to the beginning
        //                 //     // otherVideo.pause();
        //                 //     // $(this)[0].currentTime = 0;
        //                 //     //$(this)[0].pause();
                            
        //                 //     var otherVideo = $(this)[0];
        //                 //     // Check if the video is currently playing before attempting to pause
        //                 //     if (!otherVideo.paused) {
        //                 //         otherVideo.currentTime = 0; // Set playback position to the beginning
        //                 //         otherVideo.pause();
        //                 //     }
                        
        //                 if (this !== video && this instanceof HTMLVideoElement) {
        //                     var otherVideo = this;
        //                     // Check if the video is currently playing before attempting to pause
        //                     if (!otherVideo.paused) {
        //                         otherVideo.currentTime = 0; // Set playback position to the beginning
        //                         otherVideo.pause();
        //                     }
        //                 }
                            
        //             });
        //         }, true);
        //     });
        // }); 
        
        function likeDislikeVideo(action, id)
        {
            likeDislikeURL = "{{route('front.ajaxLikeDislikeVideo', ['', ''])}}"+"/"+action+"/"+id;
            $.ajax({
                type: "GET",
                url: likeDislikeURL,
                success: function(data)
                {
                    if(action == 'like')
                    {
                        $('.like-video-counter-'+id).html(data);
                    }

                    if(action == 'dislike')
                    {
                        $('.dislike-video-counter-'+id).html(data);
                    }

                }
            });
        }
        
        
        setInterval(function() {
        console.log('interval');
        $.ajax({
                type: "GET",
                url: "{{route('front.ajaxCheckUpcomingVideo')}}", //this is only changes
                success: function(data) {
                    if (data != '#') {
                        // console.log(data);
                        $('#video-title-and-sub-title').html(data.title+' - '+data.sub_title);
                        $('#current-upcomming-video-date').html(data.date);
                        $('#current-upcomming-video-rating-image').attr('src', data.rating_image);
                        $('#current-upcomming-video-duration').html(data.duration);
                        // current-upcomming-video-rating-image
                        $('#upcoming-video-live-video-src').attr('src', data.video_path);
                        var video = $('#upcoming-video-live-video')[0];
                        video.load();
                        video.play();
    
                    }
                    if (data == '##') {
                        // console.log(data);
                        $('#upcoming-video-live-video-src').attr('src', '');
                        var video = $('#upcoming-video-live-video')[0];
                        video.load();
                        video.play();
                        location.reload();
    
                    }
                }
            });
    
        }, 1000); //time in milliseconds
        
        
        
        if(document.getElementById("slider_display_section")) {
            // document.getElementById("slider_display_section").classList.add("padcase");
        } else {
            document.getElementById("live_streaming_section_display").classList.add("padcase");
        }
        
        
        // Get all elements with the specified class name
        var elements = document.getElementsByClassName("font-size-30 font-weight-bold mb-3 mb-md-0 text-golden font-secondary");
        
        // Add the "mb-link" class to each element
        for (var i = 0; i < elements.length; i++) {
          elements[i].classList.add("mb-link-2");
        }
</script>
   

@endsection