@extends('front.layout')
@section('custom-style')
    <link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
    
    <link type="text/css" rel="stylesheet"
        href="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials-theme-classic.css" />

    <!-- OG meta tags -->
    <meta property="og:title" content="Verity TV">
    <meta property="og:description"
        content="Verity TV is a subscription-based streaming and live broadcast service that allows our members to watch TV shows, documentaries, Political and Society related features from around Africa without commercials on an internet-connected device">
    <meta property="og:image" content="https://verity.live/public/setting-images/og-tag-logo.png">

    <meta property="og:image:alt" content="verity.live">
    <meta property="og:url" content="https://verity.live/">
    <meta property="og:type" content="website">

    <!-- Add the fb:app_id meta tag -->
    <meta property="fb:app_id" content="1035694597639141">

    <!-- Twitter Card meta tag -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:image" content="https://verity.live/public/setting-images/og-tag-logo.png">

    <!-- Optional OG meta tags -->
    <meta property="og:site_name" content="Verity.live">
    <meta property="og:locale" content="en_us">
    <!-- OG meta tags -->
    
    @endsection
@section('content')
    
    <style>body{background-color:red !important;}.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%);color:#fff;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}@-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}@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%}}@media only screen and (min-width:600px){.video-size{width:100%;height:100%}.height-200{height:200px;padding:5px!important}}@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:red !Important;background-color:red !important;background-size:cover;height:auto;font-family:"Raleway",sans-serif}.content1{max-width:auto;margin:0 auto;top:35%;position:relative}.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:red;box-shadow:0 0 3px red}50%{background-color:#F01;box-shadow:0 0 40px #F01}100%{background-color:red;box-shadow:0 0 3px red}}@-moz-keyframes glowing{0%{background-color:red;box-shadow:0 0 3px red}50%{background-color:#F01;box-shadow:0 0 40px #F01}100%{background-color:red;box-shadow:0 0 3px red}}@-o-keyframes glowing{0%{background-color:red;box-shadow:0 0 3px red}50%{background-color:#F01;box-shadow:0 0 40px #F01}100%{background-color:red;box-shadow:0 0 3px red}}@keyframes glowing{0%{background-color:red;box-shadow:0 0 3px red}50%{background-color:#F01;box-shadow:0 0 40px #F01}100%{background-color:red;box-shadow:0 0 3px red}}#homepage_video_text_section{transition:0.3s;margin-top:30vh!important}#homepage_video_text_section h1{width:50%}@media (max-width:767px){.mb-link{margin-bottom:0px!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;max-width:200px;padding:10px 10px!important;border:2px solid red!important}#watch_now_section{width:auto!important}#homepage_video_text_section{margin-top:36vh!important;transition:0.3s;display:flex;flex-diretion:row!important;align-items:center;overflow:hidden!important;background-color:#DFA326}#homepage_video_text_section h1{width:50%;height:100%;text-align:center!important;line-height:22px!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}#watch_now_link{z-index:9999 !Important}}.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(.9)!important;transition:.3s!important}.overlay:hover{border-radius:5px!important}.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 .text-landscape{margin-top:50px!important;overflow:visible!important;z-index:99999!important}.item:hover .vedio_symbol_landscape{margin-top:15px!important;padding-bottom:25px!important}.btn-primary{width:auto}body{padding:0;margin:0;position:relative;background:none!important;background-size:cover;height:auto;font-family:"Raleway",sans-serif}.content1{max-width:auto;margin:0 auto;top:35%;position:relative}.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:red;box-shadow:0 0 3px red}50%{background-color:#F01;box-shadow:0 0 40px #F01}100%{background-color:red;box-shadow:0 0 3px red}}@-moz-keyframes glowing{0%{background-color:red;box-shadow:0 0 3px red}50%{background-color:#F01;box-shadow:0 0 40px #F01}100%{background-color:red;box-shadow:0 0 3px red}}@-o-keyframes glowing{0%{background-color:red;box-shadow:0 0 3px red}50%{background-color:#F01;box-shadow:0 0 40px #F01}100%{background-color:red;box-shadow:0 0 3px red}}@keyframes glowing{0%{background-color:red;box-shadow:0 0 3px red}50%{background-color:#F01;box-shadow:0 0 40px #F01}100%{background-color:red;box-shadow:0 0 3px red}}#homepage_video_text_section{transition:0.3s;margin-top:30vh!important}#homepage_video_text_section h1{width:50%}@media (max-width:767px){.mb-link{margin-bottom:0px!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;max-width:200px;padding:10px 10px!important;border:2px solid red!important}#watch_now_section{width:auto!important}#homepage_video_text_section{margin-top:36vh!important;transition:0.3s;display:flex;flex-diretion:row!important;align-items:center;overflow:hidden!important;background-color:#DFA326}#homepage_video_text_section h1{width:50%;height:100%;text-align:center!important;line-height:22px!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}#watch_now_link{z-index:9999 !Important}}.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(.9)!important;transition:.3s!important}.overlay:hover{border-radius:5px!important}.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 .text-landscape{margin-top:50px!important;overflow:visible!important;z-index:99999!important}.item:hover .vedio_symbol_landscape{margin-top:15px!important;padding-bottom:25px!important}.single-player-vid-details-container{position:relative}.socialsharesection{position:relative;top:0;width:100%}.responsive-media-social-share-icon{Width:100%;height:100%}.socialshareiconbtn-btn{width:120px;height:120px;border-radius:50%!important;background-color:transparent!important;overflow:hidden!important}.copy-link-section-btn{width:70px;height:70px;border-radius:100%;background-color:ghostwhite!important}.copy-link-section-btn i{font-size:2em;color:rgba(0,0,0,.7)}.copy-link-section-btn:hover,.copy-link-section-btn:active,.copy-link-section-btn:focus{background-color:#DFA326!important}.clickedbtn1{box-shadow:0 0 0 8px transparent;animation:pulse1 1s;animation-iteration-count:4}@keyframes pulse1{from{box-shadow:0 0 0 0 green}}.jssocials-share.jssocials-share-twitter .jssocials-share-link{background-color:black!important}i.fa.fa-twitter.jssocials-share-logo:before{content:"";display:inline-block;width:15px;height:15px;background-image:url('https://verity.live/public/front/assets/img/x-share-icon-logo-letter-tr.png');background-size:cover}@media(max-width:575px){.socialsharesection{margin:0!important}.socialshareiconbtn-btn{width:90px!important;height:90px!important;border-radius:100%!important;background-color:transparent!important;overflow:hidden!important}.sharemodaldivparel{padding:0!important;overflow:hidden!important}.sharemodaldiv{margin-left:0px!important;margin-bottom:0!important;width:100%!important;position:fixed!important;left:0!important;bottom:0!important;border-bottom-left-radius:0!important;border-bottom-left-radius:0!important;transition:none!important;transition-property:none!important}.modal-content{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}.copy-link-section-btn{width:70px;height:70px;border-radius:100%;background-color:ghostwhite!important}.copy-link-section-btn i{font-size:2em;color:rgba(0,0,0,.7)}.copy-link-section-btn:hover,.copy-link-section-btn:active,.copy-link-section-btn:focus{background-color:#DFA326!important}.clickedbtn1{box-shadow:0 0 0 8px transparent;animation:pulse1 1s;animation-iteration-count:4}@keyframes pulse1{from{box-shadow:0 0 0 0 green}}.jssocials-share{display:block!important;margin-bottom:2vh!important}.jssocials-shares{display:flex}}@media(max-width:576px){#header{top:0!important}.dpcustomhighlightsblockcontainer{margin-top:2vh!important}#homepage_video_text_section{margin-top:32vh!important}}@media(max-width:768px){#slider_display_section{background-size:cover!important}.dark-mobile-background{background-color:black!important}.mb_slider_display_section{min-height:20vh !Important;height:40vh!important;background-size:cover;background-position:center}.mb_slider_display_section video{object-fit:fill}#slider_display_section:last-of-type{display:none!important}}@media(min-width:991px){.dpcustomhighlightsblockcontainer{margin-top:2vh!important}}.pb-4:nth-child(2){border:2px solid red!important}#video_title_text:hover{color:#dfa326; transition:0.2s ease;}</style>

    <style>
        body{
            background: #000F1E !important;
            background-color: #000F1E !important;
        }
        @media(min-width:992px){ .orientation-message-block{ display:none !important;} }
        @media(orientation: portrait){ .orientation-message-block{display:none !important;} }
        @media (orientation: landscape) and (max-width: 991px) {
            .orientation-message-block{
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100vh;
              background-color: #dfa326;
              z-index: 999999999999; /* Set a higher value for the z-index */
              
              display:flex;
              justify-content:center;
              align-items:center;
            }
            
            .orientation-message-block h2{
                color:#ffffff !important;
                font-size: 1.5em;
                font-weight:700 !important;
            }
        }
        @media(min-width: 576px){ .mb_section_vids_homepage_display_section{display:none !important;} }
        @media(max-width: 575px){ .dp_section_vids_homepage_display_section{display:none !important;} .mb-cat-title-text{font-size:16px !important;} .hmpg-border-line{transform:translateY(-3px); }
    </style>
    
    <!-- Orientation message block-->
        <div class="orientation-message-block">
            <h2>Please rotate your device <i class="bi bi-arrow-repeat"></i> </h2>
        </div>
    <!-- Orientation message block-->
    
    <!--slider section start-->
    <section id="top-flash-slider-player" style="position:relative !important;">
        <div class="home-slider 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)
                    <style>
                        @media(min-width:768px){
                            .mb_slider_display_section{display:none; !important;}
                        }
                        @media(max-width:767px){
                            .dp2_slider_display_section{display:none; !important;}
                        }
                    </style>
                        <!-- Mobile slider -->
                            <div id="slider_display_section" class="bg-img-hero d-flex d-md-none align-items-center min-h-676rem slider-gradient top-video-slider-thumbnail mb_slider_display_section"
                            style="/*-- (pull from cdn resource) background-image: url({{ 'https://' .$slider->slider_image }}); --*/ background-image: url({{ $slider->slider_image }});position:relative !important;">
                                      
                                <!-- Video display -->
                                @if (isset($slider->getVideo->trailer_path))
                                    <video autoplay muted loop id="slider-video-{{ $slider->id }}" class="slidertopflash" style="width:100% !important;height:100% !important;">
                                        <source id="top-slider-video-src-{{ $slider->id }}" src="@if ($loop->iteration == 1) {{ $slider->getVideo->trailer_path }} @endif" type="video/mp4">
                                    </video>
                                @endif
                                <!-- Video display -->
                                
                                <!-- Watch now link and video title display -->
                                    <div class="d-flex p-0 px-2 align-items-center" style="border-radius:5px !important;width:96%;left:2%;background-color:transparent !important;position:absolute !important;bottom:5% !important;z-index:999 !important;align-items:center !important;">
                              
                                        @if (isset($slider->getVideo->title))
                                           <h1 style="margin:0 !important;padding:0 !important;color:#fff;font-size:12px !important;line-height:1.2 !important;" class="w-50 text-center">
                                                {{ $slider->getVideo->title }}
                                           </h1>
                                       
                                        
                                        <div class="d-flex w-50 my-0 py-0">
                                            <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" style="font-size:12px !important;">
                                                <i class="fa fa-play text-red" style="padding-right:5px;"></i> WATCH NOW
                                            </a>
                                        </div>
                                        @endif
                                    </div>
                                <!-- Watch now link and video title display -->
                                
                                
                            </div>
                        <!-- Mobile slider -->
                        
                        <!-- Desktop slider -->
                           <div id="slider_display_section" class="bg-img-hero d-flex align-items-center min-h-676rem slider-gradient top-video-slider-thumbnail d-none d-md-flex dp2_slider_display_section"
                             style="/*-- (pull from cdn resource) background-image: url({{ 'https://'.$slider->slider_thumbnail}}); */ background-image: url({{ $slider->slider_thumbnail}});background-color: black;max-height:90vh !important;">
                                
                                @if(isset($slider->getVideo->trailer_path))
                                    <video autoplay muted loop id="slider-video-{{ $slider->id }}" style="min-width:100%;width:100% !important;height:100% !important;" class="slidertopflash">
                                        <source id="top-slider-video-src-{{ $slider->id }}" src="@if($loop->iteration == 1) {{ $slider->getVideo->trailer_path }} @endif" type="video/mp4">
                                    </video>
                                @endif
                                
                                <!-- Watch now link and video title display -->
                                    <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;position:absolute !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" style="width:80% !important;">
                                                <a id="video_title_text" href="#" style="display:inline-block;width:100%;font-size:0.7em !important;line-height:1.2 !important;">
                                                    {{$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" style="border:2px solid red;">
                                                    <i class="fa fa-play text-red" style="padding-right:5px;"></i> WATCH NOW
                                                </a>
                                            </div>
                                        @endif
                                </div>
                                <!-- Watch now link and video title display -->
                            </div>
                        <!-- Desktop slider -->
                    @endforeach
                @endif
            </div>
            
            <!-- Desktop slider thumbnail display on the left -->
                <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>
            <!-- Desktop slider thumbnail display on the left -->
        </div>
    </section>
    <!--slider section end-->
    
    <!--Shows Section Start-->


    <!--overlay-->

    <div id="body-content-block" class="bg-gray-1100 space-1 single-player-vid-details-container">

        <div class="socialsharesection d-flex justify-content-center px-3 mb-0 mb-md-3" >
            <button type="button" class="btn btn-primary socialshareiconbtn-btn p-0" data-bs-toggle="modal"
                data-bs-target="#sharemodal" style="border:2px solid red !important;">
                <img src="{{ url('front/assets/img/media-share-icon-tr.png') }}" alt="share-across-social-media"
                    class="responsive-media-social-share-icon m-0">
            </button>
        </div>
        
        <!--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-0" type="button" style="width:94% !important;margin:0 3%;background-color:red;color:#fff;font-size:1.5em;display:flex !important;align-items:center !important;">
                    <a href="{{ url('mb/live-broadcast/channel-1') }}" class="w-100 p-3 d-flex d-xl-none "
                        style="justify-content:center;align-items:center !important;font-size:16px !important;">
                        {{-- <p style="padding:0 !important;margin:0 !important;padding-right:5px !important;"> Live Streaming </p> --}}
                        Live Streaming
                        <svg style="margin-left:5px !important;" 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/channel-1') }}" class="w-100 p-3 pb-1 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>
        <!--Live Events End-->

        <div class="container mx-auto mt-1 p-0 pb-3 pt-2 px-2 px-lg-5 px-xxl-0">

            <!-- Social Share Modal -->
            <div class="modal sharemodaldivparel" id="sharemodal" data-bs-backdrop="static" data-bs-keyboard="false"
                tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                <div class="modal-dialog sharemodaldiv">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">Share website</h5>
                            <button type="button" class="btn-close border-0 outline-0" data-bs-dismiss="modal"
                                style="background-color:transparent !important;"> <i class="fa fa-times"
                                    aria-hidden="true"></i> </button>
                        </div>
                        <div class="modal-body p-0">
                            <div class="copy-link-section text-dark w-100 border-bottom p-3 mx-0 my-2">
                                <button type="button"
                                    class="btn d-flex flex-direction-column flex-wrap justify-content-center align-items-center mb-2 copy-link-section-btn"
                                    onclick="copyLink()"> <i class="fa fa-link" aria-hidden="true"></i> </button>
                                <span id="copy-link-button-text" class="d-block text-secondary mb-0 pl-0"> copy link
                                </span>
                            </div>
                            <div id="share" class="p-3"></div>
                        </div>
                        <div class="modal-footer d-none">
                            <button type="button" class="btn btn-danger d-none d-sm-block"
                                data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
            <input type="text" id="cpLinkInput" class="d-none" value="">
            <!-- Social Share Modal -->
            
            <!-- Styles for potrait & landscape bvideos display -->
                <style>
                    /*-- potrait --*/
                        .vedio_symbol .fa-play{font-size:14px;border:1px solid #ED3833;border-radius:100%;background:#ED3833;padding:6px 7px 6px 9px}.vedio_symbol .fa-thumbs-up,.vedio_symbol .fa-thumbs-down,.vedio_symbol .fa-eye{font-size:14px;border:1px solid #BF8433;border-radius:100%;background:#BF8433;padding:6px 7px}.vedio_symbol{width:100%;justify-content:left;top:42%;left:50%;font-size:13px}.vedio_symbol i{margin-left:5px!important;margin-right:2px!important}@media(max-width:767px){.gird-view-videos{flex-direction:column;padding:0!important}.video-item{width:100%!important;padding:10px 0 !imortant;margin:0 !imortant}.item video-item{width:100%;margin-left:0px!important;margin-right:0px!important;border-radius:5px!important}#item_video_item{margin-left:0px!important}.img-container:hover{transform:scale(.8)!important;transition:ease all 1s!important;transition-property:none!important;z-index:1111}}@media screen and (min-width:768px) and (max-width:991px){.gird-view-videos{flex-direction:row;flex-wrap:wrap}.video-item{width:48%!important;padding:10px 0 !imortant;margin:10px 5px !imortant}.item video-item{width:48%;margin-left:1%!important;margin-right:1%!important;border-radius:5px!important}#item_video_item{margin-left:0px!important}}}.mb-link,.mb-link-2{color:#DFA326!important;margin:bottom:0!important}#upcoming-video-live-video{height:270px}#img_frame{height:280px !Important}#video_frame{height:150px !Important;width:100%}.item .shows_section{padding:0 !Important}@media only screen and (max-width:767px){.mb-link{margin-bottom:1vh!important}.mb-link-2{margin-top:0px!important;margin-bottom:1vh!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}#img_frame{height:380px !Important;border:2px solid pink}#video_frame{width:100%!important;height:100% !Important;margin:0!important;object-fit:fill!important}.item .shows_section{padding:20px 0}}.mb-link,.mb-link-2{color:#DFA326!important;margin:bottom:0!important}#upcoming-video-live-video{height:270px}#img_frame{height:280px !Important}#video_frame{height:150px !Important;width:100%}.item .shows_section{padding:0 !Important}@media only screen and (max-width:767px){#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}#img_frame{height:380px !Important}#video_frame{width:100%!important;height:150px !Important;margin:0!important;object-fit:fill!important}.item .shows_section{padding:20px 0}.video-wrapper{max-width:100%!important;height:55%;padding:0!important;overflow:hidden!important;border:2px solid transparent!important}#video_frame,.homepage-video-player{width:98%!important;height:100%!important;margin:0 1%!important;object-fit:fill!important;border:2px solid transparent!important}}.mobile-carousel-container{position:relative;overflow:hidden;width:96%;max-width:100%;margin:2vh auto 4vh auto;border-radius:5px;touch-action:pan-y}.mobile-carousel-content{display:flex;transition:transform 0.5s ease;width:100%;margin:0 auto!important}.mobile-carousel-item{width:100%;flex:0 0 auto}.mobile-carousel-object{width:100%!important;height:380px!important;display:flex;flex-direction:column!important;background:#EDEDED;position:relative}.mobile-thumbnail-cover-image{width:100%;height:380px}.mobile-video-container,.mobile-video-details-container{width:100%;height:50%;margin:0;padding:0}.mobile-video-container{position:relative!important;width:100%!important;height:0!important;padding-top:56.25%!important;background:orange!important}.mobile-carousel-video-player{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:100%!important}.mobile-video-container{height:50%;background-color:#dfa356}.mobile-video-details-container{height:50%;background:rgba(0,0,.7)}.mobile-video-container video{width:100%;height:100%;max-height:calc(380px / 2);object-fit:contain;display:block}.mobile-video-details-container{width:100%;height:100%}.mobile-carousel-btn-prev-btn{position:absolute;top:50%;transform:translateY(-50%);cursor:pointer;font-size:24px;color:#fff;background-color:rgba(0,0,0,.5);padding:10px;border:none;outline:none;left:10px}.mobile-carousel-btn-next-btn{position:absolute;top:50%;transform:translateY(-50%);cursor:pointer;font-size:24px;color:#fff;background-color:rgba(0,0,0,.5);padding:10px;border:none;outline:none;right:10px;z-index:11}.mobile-video-stats-display{width:98%;height:40%;padding:5px;margin:0 auto;display:flex;flex-wrap:wrap}.mobile-vid-stats{display:flex;align-items:center;margin:0;border:1px solid orange}.mobile-link-btn{width:20px;height:20px border-radius:50%;background-color:red}.vid-stats,.vid-subscription{display:flex;align-items:center;margin:0}.vid-stats{width:70%}.vid-subscription{width:30%}.vid-info{width:100%;padding:10px;margin:5px 0}.vid-stats button{width:30px;height:30px;border-radius:50%;margin:0 5px;display:flex;align-items:center;justify-content:center;background-color:red;cursor:pointer}.vid-subscription button{width:auto;height:auto;border-radius:5px;margin:0 5px;padding:5px;display:flex;align-items:center;justify-content:center;background-color:darkblue;color:#fff}.video-name{margin:5px;padding:5px;color:#fff}.vid-tag{width:auto;height:auto;border-radius:10px;margin:0 5px;padding:5px}.video-desc{width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 5px;padding:5px;color:#fff}.video-time{width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 5px;padding:5px;color:#fff;font-size:.8em}.displayvideoontouch{display:none;transition:0.3s ease}.mb-btn-link{width:25px;height:25px;border-radius:50%;margin:0 5px;background-color:red}.media-scale-transform:hover{transform:scale(1)!important;transition:13s!important}@media(min-width:768px){.media-wrap-row-video-section .owl-item:hover .item:not(.landscape-type-item){-ms-transform:none;-webkit-transform:none;transform:none;-webkit-transform:none;transform:none;-webkit-transition:none;-o-transition:none;transition:none;-webkit-perspective:none;perspective:none}}
                    
                    /*-- landscape --*/
                        .vidplaybtn{-webkit-animation:glowing 1500ms infinite;-moz-animation:glowing 1500ms infinite;-o-animation:glowing 1500ms infinite;animation:glowing 1500ms infinite}@media(min-width:768px){.item.landscape-type-item{}}@-webkit-keyframes glowing{0%{background-color:red;box-shadow:0 0 3px red}50%{background-color:#F01;box-shadow:0 0 40px #F01}100%{background-color:red;box-shadow:0 0 3px red}}@-moz-keyframes glowing{0%{background-color:red;box-shadow:0 0 3px red}50%{background-color:#F01;box-shadow:0 0 40px #F01}100%{background-color:red;box-shadow:0 0 3px red}}@-o-keyframes glowing{0%{background-color:red;box-shadow:0 0 3px red}50%{background-color:#F01;box-shadow:0 0 40px #F01}100%{background-color:red;box-shadow:0 0 3px red}}@keyframes glowing{0%{background-color:red;box-shadow:0 0 3px red}50%{background-color:#F01;box-shadow:0 0 40px #F01}100%{background-color:red;box-shadow:0 0 3px red}}@media(min-width:768px){.vidplaybtn{width:40px!important;height:40px!important;margin-right:10px!important;right:5px!important;border:1px solid #dfa356!important}.vidplaybtn i{margin:0 !Important;margin-top:2px!important;padding:0 !Important;font-size:35px!important}}
                </style>
            <!-- Styles for potrait & landscape bvideos display -->

            @php
                $totalvidscount = 0;
            @endphp

            
            @if (get_setting('home_page_section'))
            
                @php
                    $homeContent = get_setting('home_page_section')->value;
                    $homeContentArray = explode(',', $homeContent);
                @endphp


                @foreach ($homeContentArray as $homeContentSingle)
                    
                    @php
                        $totalvidscount += 10000; // Increment by 10,000 in each iteration
                    @endphp
                    
                    {{-- Desktop orientation --}}
                        @if(get_design_option_dp($homeContentSingle) == 'Verticle')
                            @include('front.home-page.home-page-section-mod', [
                                'slug' => $homeContentSingle,
                                'vidcount' => $totalvidscount,
                            ])
                        @elseif(get_design_option_dp($homeContentSingle) == 'Horizontal')
                            @include('front.home-page.home-videos-landscape-mod', ['slug' => $homeContentSingle])
                        @endif
                    {{-- Desktop orientation --}}
                    
                    {{-- Mobile orientation --}}
                        @if(get_design_option_mb($homeContentSingle) == 'Verticle') 
                            @include('front.home-page.home-page-section-mb-mod', [
                                'slug' => $homeContentSingle,
                                'vidcount' => $totalvidscount,
                            ])
                        @elseif(get_design_option_mb($homeContentSingle) == 'Horizontal') 
                            @include('front.home-page.home-videos-landscape-mb-mod', ['slug' => $homeContentSingle])
                        @endif
                    {{-- Mobile orientation --}}
                    
                @endforeach
                
            @else
                @php $videoCategories = ['current-news', 'exclusives', 'highlights-opinion', 'full-interviews', 'documentaries'];  @endphp

                @foreach ($videoCategories as $categorySlug)
                    @php
                        $totalvidscount += 10000; // Increment by 10,000 in each iteration
                    @endphp
                    
                    {{-- Desktop orientation --}}
                        @if(get_design_option_dp($categorySlug) == 'Verticle')
                            @include('front.home-page.home-page-section-mod', [
                                'slug' => $categorySlug,
                                'vidcount' => $totalvidscount,
                            ])
                        @elseif(get_design_option_dp($categorySlug) == 'Horizontal')
                            @include('front.home-page.home-videos-landscape-mod', ['slug' => $categorySlug])
                        @endif
                    {{-- Desktop orientation --}}
                    
                    {{-- Mobile orientation --}}
                        @if(get_design_option_mb($categorySlug) == 'Verticle') 
                            @include('front.home-page.home-page-section-mb-mod', [
                                'slug' => $categorySlug,
                                'vidcount' => $totalvidscount,
                            ])
                        @elseif(get_design_option_mb($categorySlug) == 'Horizontal') 
                            @include('front.home-page.home-videos-landscape-mb-mod', ['slug' => $categorySlug])
                        @endif
                    {{-- Mobile orientation --}}
                    
                @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 src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script>

    <!-- jsSocials scripts -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="{{ asset('jsSocials/jsSocials.min.js') }}"></script>
    <script src="{{ asset('jsSocials/homescript.js') }}"></script>
    <!-- jsSocials scripts -->
    
    <script>
        //add ripple effect to button when clicked
       
        function displayclickedanim(){
            $(".vidplaybtn").click(function() {
              $(this).addClass('clickedbtn');
              
            });
        }
    </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);

        }

    {{-- pause video onscroll --}}

        // 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 broadcast
            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;
                }
            }


        }
        
        // Select all video elements with the class name 'slidertopflash'
        var videoSliders = document.querySelectorAll('.slidertopflash');

        function checkScrollSingleSlider() {
            
            var fraction = 0.3; // Play when 80% of the player is visible.
            
            videoSliders.forEach(function(videoSlider) {
                
                var x = videoSlider.offsetLeft, y = videoSlider.offsetTop, w = videoSlider.offsetWidth, h = videoSlider.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) {
                        
                        //video is visible
                        videoSlider.muted = false;
                        videoSlider.play();
                        
                    } else {
                        
                        //video is not visible
                        videoSlider.muted = true;
                        videoSlider.pause();
                
                    }
            });
            
            
        }
        
        window.addEventListener('scroll', checkScrollSingleSlider, false);
        window.addEventListener('resize', checkScrollSingleSlider, 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");
        }
        
        //set marginTop for mobile slider
        var header      = document.getElementById("header");
        var topFlash    = document.getElementById("top-flash-slider-player");
        var headerHeight= header.offsetHeight;
        
        if(window.innerWidth < 768) {
            header.classList.add("dark-mobile-background"), 
            topFlash.style.marginTop = headerHeight + "px";
        }

</script>

    {{-- missing added in --}}
    <script>
        // Touch event handling
          var touchStartY;
        
          document.querySelectorAll('.mobile-carousel-container').forEach(container => {
            container.addEventListener('touchstart', (e) => {
              touchStartY = e.touches[0].clientX;
            });
            
            container.addEventListener('touchend', (e) => {
              const touchEndX = e.changedTouches[0].clientX;
              const touchDifference = touchEndX - touchStartY;
        
              if (Math.abs(touchDifference) > 50) {
                if (touchDifference > 0) {
                  customPrevSlide(container.id);
                } else {
                  customNextSlide(container.id);
                }
              }
            });
          });
          
          
    //mobile carousel functions here - move next
    function customNextSlide(containerId) {
        console.log('function fired');
        
        var selectmode = "default";
        
        if (selectmode === "default") {
            
              const container = document.getElementById(containerId);
              const currentIndex = parseInt(container.dataset.currentIndex || '0');
              const items = container.querySelectorAll('.mobile-carousel-item');
              const totalItems = items.length;
        
              let newIndex = (currentIndex + 1) % totalItems;
              container.dataset.currentIndex = newIndex.toString();
              
               // Check if newIndex is within a valid range
                if (newIndex >= 0 && newIndex < totalItems) {
                  // Retrieve the DOM element of the current item
                  const currentItem = items[currentIndex];
                
                  // Access the grandchild with class 'mobile-video-thumbnail-object'
                  const grandchild = currentItem.querySelector('.mobile-video-thumbnail-object');
                
                  // Check if the grandchild exists before applying styles
                  if (grandchild) {
                      
                        grandchild.classList.remove('displayvideoontouch');
                  }
                  
                  // Access the previous video element
                  const previousVideo = currentItem.querySelector('.mobile-carousel-video-player');
                 
                 //check if video is on/playing, if so, stop it
                 if (!previousVideo.paused) {
                     
                    // If playing, pause the video
                    previousVideo.pause();
                    previousVideo.currentTime = 0;
                  }

                }
              
              //before updating caurosel, pause all other vids (except top flash)
                //pauseAllVideos(containerId);
              
              //update carousel
              updateCarousel(container);
        } else {
            console.log(`selct mode this : ${selectmode}`);
        }
    }
    
    
    function customPrevSlide(containerId) {
         console.log('function fired');
         
         var selectmode = "default";
         
        if (selectmode === "default") {
            
              console.log("default mode");
            
              const container = document.getElementById(containerId);
              const currentIndex = parseInt(container.dataset.currentIndex || '0');
              const items = container.querySelectorAll('.mobile-carousel-item');
              const totalItems = items.length;
        
              let newIndex = (currentIndex - 1 + totalItems) % totalItems;
              container.dataset.currentIndex = newIndex.toString();
              
              
              // Check if newIndex is within a valid range
                if (newIndex >= 0 && newIndex < totalItems) {
                  // Retrieve the DOM element of the current item
                  const currentItem = items[currentIndex];
                
                  // Access the grandchild with class 'mobile-video-thumbnail-object'
                  const grandchild = currentItem.querySelector('.mobile-video-thumbnail-object');
                
                  // Check if the grandchild exists before applying styles
                  if (grandchild) {
                      
                        grandchild.classList.remove('displayvideoontouch');
                  }
                  
                  // Access the previous video element
                  const previousVideo = currentItem.querySelector('.mobile-carousel-video-player');
                 
                 //check if video is on/playing, if so, stop it
                 if (!previousVideo.paused) {
                     
                    // If playing, pause the video
                    previousVideo.pause();
                    previousVideo.currentTime = 0;
                  }

                }
              
              //before updating caurosel, pause all other vids (except top flash)
                //pauseAllVideos(containerId);
              
              //update carousel
              updateCarousel(container);
        } else {
            console.log(`selct mode this : ${selectmode}`);
        }
    }
    
    //mobile carousel functions here - update caurosel
    function updateCarousel(container) {
      console.log("start of firing !");
      
      var currentIndex = parseInt(container.dataset.currentIndex || '0');
       console.log(`current index is ${currentIndex}`);
      var carouselContent = container.querySelector('.mobile-carousel-content');
      var newTransformValue = -currentIndex * 100 + '%';
      console.log(newTransformValue);
      carouselContent.style.transform = 'translateX(' + newTransformValue + ')';
      console.log("fired !");
    }
    
    
    function displayVideoOnTouch(thumbnailObjectId) {
        
       var thumbnailObject = document.getElementById(thumbnailObjectId);
       thumbnailObject.classList.add('displayvideoontouch');
    }
    
    function playAssociatedVideo(thumbnailObjectId) {
        // Construct the video element selector based on the provided thumbnailObjectId
        var videoElementSelector = '#' + thumbnailObjectId + '-video';
    
        // Get the video element using the selector
        var videoElement = $(videoElementSelector)[0]; // [0] is used to get the DOM element from the jQuery object
    
        // Check if the video element exists
        if (videoElement) {
            // Autoplay the video (consider browser restrictions)
            videoElement.play();
        }
    }
    
    //check for user touch on the thumbnail video, if so play video
    let touchStartZ;
    
    $(document).ready(function () {
        $('.mobile-video-thumbnail-object').on('touchstart', function (e) {
            
            // Prevent the default behavior of the touch event
            e.preventDefault();
    
            // Store the initial touch position
            touchStartZ = e.touches[0].clientX;
        });
    
        $('.mobile-video-thumbnail-object').on('touchend', function (e) {
            // Prevent the default behavior of the touch event
            e.preventDefault();
    
            // Calculate the touch difference
            const touchEndX = e.changedTouches[0].clientX;
            const touchDifference = touchEndX - touchStartZ;
    
            // Check if it's a tap (not a swipe)
            if (Math.abs(touchDifference) < 50) {
                // Display and play the video
                const thumbnailObjectId = $(this).attr('id');
                //alert(thumbnailObjectId);
                displayVideoOnTouch(thumbnailObjectId);
                playAssociatedVideo(thumbnailObjectId);
            }
        });
    });
    
    
    // check for mobile carousel container is out of viewport, if so , return on the video thumbnails
    $(window).on('scroll', function () {
        $(".mobile-carousel-container").each(function () {
            var carouselContainer = $(this);
    
            var carouselContainerTop = carouselContainer.offset().top;
            var carouselContainerBottom = carouselContainerTop + carouselContainer.height();
            var windowTop = $(window).scrollTop();
            var windowBottom = windowTop + $(window).height();
    
            var carouselContainerClass = carouselContainer.attr('class');
    
            // Check if the video is in the viewport
            if (carouselContainerBottom > windowTop && carouselContainerTop < windowBottom) {
                // Do nothing if in the viewport
            } else {
                // If out of the viewport, find the grandchild with class 'video-thumbnail-object'
                var videoThumbnailObject = carouselContainer.find('.mobile-video-thumbnail-object');
    
                // Check if it has the class 'displayvideoontouch'
                if (videoThumbnailObject.hasClass('displayvideoontouch')) {
                    // Remove the class 'displayvideoontouch'
                    videoThumbnailObject.removeClass('displayvideoontouch');
                }
            }
        });
    });
    
    function pauseAllVideos(carouselContainerId) {
        $("video").each(function(){
            var video = $(this)[0]; 
            
             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
            }

            video.pause();
            video.currentTime = 0;
        });
    }
    
    // Function to handle multiple mobile carousel video playbacks
    function mobileCarouselMultipleVideoPlaybacks(currentVideoPlaybackId) {
        
        // Iterate over each mobile carousel video
        $(".mobile-carousel-video-player").each(function() {
            
            // Retrieve the ID of the current video
            var currentVideoId = $(this).attr('id');
    
            // Exclude the current video the user has selected to play
            if (currentVideoId === currentVideoPlaybackId) {
                return; // Skip to the next iteration
            }
    
            // Check if the video is not paused
            if ($(this).prop('paused') === false) {
                // Pause the video and reset its playback position
                this.pause();
                this.currentTime = 0;
            }
        });
    }
    
    function reEngageMobileVideoCarouselThumbnails(mobilecarouselthumbnailobjectclassname = "mobile-video-thumbnail-object") {
        // Use the parameter directly instead of creating an unnecessary variable
        $(`.${mobilecarouselthumbnailobjectclassname}`).each(function() {
            // "this" refers to the current element in the loop
            let $this = $(this);
            let searchedClassName = "displayvideoontouch"; // Remove the space at the beginning
    
            if ($this.hasClass(searchedClassName)) {
                $this.removeClass(searchedClassName);
            }
        });
    }

    
    
    $(document).ready(function() {
        $('.mobile-carousel-video-player').on('play', function() {

            var currentVideoPlaybackId = $(this).attr('id');
            mobileCarouselMultipleVideoPlaybacks(currentVideoPlaybackId);
        });
    });

    
    //listen to clicks outside carousel container
    document.addEventListener('DOMContentLoaded', function () {
        // Add a click event listener to the whole page
        document.body.addEventListener('click', function (e) {
            
            // alert("click registered");
            if (!e.target.closest('.mobile-carousel-video-player')) {
                // Pause all videos
                // alert("click outside vid player");
                 mobileCarouselMultipleVideoPlaybacks('');
                 reEngageMobileVideoCarouselThumbnails();
           } else {
                // alert("click inside vid player");
           }
        });
    });

    </script>
    

@endsection