@extends('front.layout')
@section('custom-style')
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2.0/daterangepicker.css" />

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials.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">
    
<!-- Add the fb:app_id meta tag -->
<meta property="fb:app_id" content="1035694597639141">

<!-- Twitter Card meta tag -->
<meta name="twitter:card" content="summary" />

@if(isset($currentUpcomingPlayingVideo))
    @php $video = $currentUpcomingPlayingVideo->ls_videos @endphp
    <meta property="og:description" content="{{ trim(strip_tags($video->description)) }}">
    <meta property="og:image" content="{{$video->thumbnail}}">

    <meta property="og:image:alt" content="{{$video->slug}}">
    <meta property="og:url" content="https://verity.live/{{$display_device}}/video/{{$video->slug}}">
    <meta property="og:type" content="video.movie">
    <meta property="og:video" content="https://verity.live/{{$display_device}}/video/{{$video->slug}}">
    
    <meta name="twitter:image" content="{{$video->thumbnail}}">

@elseif(isset($currentUpcomingVideo[0]))
    @php $video = $currentUpcomingVideo[0]->ls_videos @endphp
    <meta property="og:description" content="{{ trim(strip_tags($video->description)) }}">

    <meta property="og:image" content="{{$video->thumbnail}}">

    <meta property="og:image:alt" content="{{$video->slug}}">
    <meta property="og:url" content="https://verity.live/{{$display_device}}/video/{{$video->slug}}">
    <meta property="og:type" content="video.movie">
    <meta property="og:video" content="https://verity.live/{{$display_device}}/video/{{$video->slug}}">

    <meta name="twitter:image" content="{{$video->thumbnail}}">

@else
    <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">

    <!-- 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">
@endif

    <!-- Optional OG meta tags -->
    <meta property="og:site_name" content="Verity.live">
    <meta property="og:locale" content="en_us">
    <!-- OG meta tags -->

    <style>
        .ranges {
            display: none;
        }
    
    
        .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;*/
            font-size: 3em;
            padding: 5px 25px;
            /*padding: 8px 20px*/
            border: none;
            cursor: pointer;
            border-radius: 5px;
            text-align: center;
        }
    
    
        .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(1.2) !important;
            transition: .3s !important;
            border-radius: 2px;
        }
    
        .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;
        }
    
        .col-lg-2 {
            padding: 0px 5px !important;
        }
    
        .mb-2 {
            margin-bottom: 0px !important;
        }
    
        .select-date input {
            position: relative;
            height: 35px;
            border-radius: 5px;
            border: none;
            padding: 5px 10px;
        }
    
        .select-date input:focus {
            box-shadow: 0 0 0 1px #24baef;
            background-color: #DFA326 !important;
        }
    
        .select-date .daterange {
            background: transparent;
            color: white;
            border: 1px solid;
            margin: 0 5px;
        }
    
        .select-date .input-icon {
            position: absolute;
            font-family: 'FontAwesome';
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            color: white;
            background: none;
        }
    
        .text-white{
            font-size:0.75rem!important;
            color:#fff!important;
        }
    
    .video-description, .video-description div, .video-description p {
        color: #F4F4F4 !important;
        font-size: 12px;
    }
    
        /* audio::-webkit-media-controls-timeline,
    video::-webkit-media-controls-timeline {
        display: none;
    } */
        /* audio::-webkit-media-controls, */
        /* video::-webkit-media-controls {
        display: block;
    } */
        video::-webkit-media-controls-play-button {}
    
        video::-webkit-media-controls-volume-slider {}
    
        video::-webkit-media-controls-mute-button {}
    
        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;
        }
    
        @media (min-width:1025px) {
            .slide-image {
                width: 711px !important;
                height: 400px !important;
                margin-top: 100px;
            }
        }
    
        @media (max-width:768px) {
            .gird-view-videos .item {
                width: 100%;
                float: none !important;
                margin: 0px;
            }
             .height-150 {
                height: 200px;
            }
        }
    
        /* iPads (landscape) ----------- */
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    
            /* Styles */
            .item {
                width: 48% !important;
                float: left !important;
                margin: 5px;
            }
        }
    
        /* iPads (portrait) ----------- */
        @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
            .item {
                width: 48% !important;
                float: left !important;
                margin: 5px;
            }
        }
        
        .live_streaming_section{
            width:100%;
        }
        
        #live_streaming_btn{
          -webkit-animation: glowing 1500ms infinite;
          -moz-animation: glowing 1500ms infinite;
          -o-animation: glowing 1500ms infinite;
          animation: glowing 1500ms infinite;
        }
        
    @keyframes shadowAnimation {
        0% {
            -webkit-filter: drop-shadow(0px 0px 18px rgba(255, 0, 0, 0.9));
            filter: drop-shadow(0px 0px 18px rgba(255, 0, 0, 0.9));
        }
        50% {
            -webkit-filter: drop-shadow(0px 0px 45px rgba(255, 0, 51, 0.8));
            filter: drop-shadow(0px 0px 45px rgba(255, 0, 51, 0.8));
        }
        100% {
            -webkit-filter: drop-shadow(0px 0px 18px rgba(255, 0, 0, 0.9));
            filter: drop-shadow(0px 0px 18px rgba(255, 0, 0, 0.9));
        }
    }
        
        .live_streaming_section{
            position:relative;
        }
        
        @media (max-width:767px) {
            .live_streaming_btn_section{
                width: 90px !important;
                height:50px !important;
                position:absolute;
                top:0;
                right:10px;
            }
            
            .live_streaming_btn_section_2{
                width: 90px !important;
                height:80px !important;
                 position:absolute;
                top:55px;
                right:10px;
            }
            
            .live_streaming_btn_section_3{
                width: 50px !important;
                height:50px !important;
                position:absolute;
                top:18px;
                left:-10px;
            }
        }
        
        @media only screen and (min-width : 577px) and (max-width : 768px) {
            .live_streaming_btn_section_3{
                width: 50px !important;
                height:50px !important;
                position:absolute;
                top:160px;
                right:30px;
            }
        }
        
        @media only screen and (min-width : 768px) and (max-width : 991px) {
            .live_streaming_btn_section{
                width: 150px !important;
                height:100px !important;
                position:absolute;
                top:0;
                right:10px;
            }
            
            .live_streaming_btn_section_2{
                width: 150px !important;
                height:100px !important;
                position:absolute;
                top:0;
                right:170px;
            }
            
            .live_streaming_btn_section_3{
               display:none !important;
            }
        }
        
        @media (min-width : 992px) {
            .live_streaming_btn_section{
                width: 180px !important;
                position:absolute;
                top:0;
                right:10px;
            }
            
            .live_streaming_btn_section_2{
                width: 180px !important;
                height:100px !important;
                position:absolute;
                top:0;
                right:200px;
            }
            
            .live_streaming_btn_section_3{
               display:none !important;
            }
        }
        
        .responsive-live-satreaming-icon-display{
            width:100%;
            height:100%;
            max-width:100% !important;
            max-height:100% !important;
            animation: shadowAnimation 0.8s infinite;
           -webkit-animation: shadowAnimation 0.8s infinite;
          -moz-animation:  shadowAnimation 0.8s infinite;
          -o-animation:  shadowAnimation 0.8s infinite;
          animation:  shadowAnimation 0.8s infinite;
        }
        
    
        /* read more/less css styling */
        .video-description{
            --line-clamp: 3;
        }
        
        .video-description p:first-of-type{
          display: -webkit-box;
          -webkit-line-clamp: var(--line-clamp);
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .read-more__checkbox {
          clip: rect(0 0 0 0);
          clip-path: inset(100%);
          height: 1px;
          overflow: hidden;
          position: absolute;
          white-space: nowrap;
          width: 1px;
        }
        
        .read-more__checkbox ~ .read-more__label {
          cursor: pointer;
          font-size: 1em;
          font-weight: 700;
          text-decoration: underline;
          transform:translateY(-10px);
        }
        
        /* Focus and hover styles for accessibility! */
        .read-more__checkbox:focus ~ .read-more__label {
          border-bottom:1px solid #fff;
          /*box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);*/
        }
        
        .read-more__checkbox:hover ~ .read-more__label {
          text-decoration: none;
        }
        
        .read-more__checkbox ~ .read-more__label::before {
          content: attr(data-read-more);
        }
        
        .read-more__checkbox:checked ~ .read-more__label::before {
          content: attr(data-read-less);
        }
        
        .read-more__checkbox:checked ~ .readmoreptext{
          --line-clamp: none;
          -webkit-line-clamp: var(--line-clamp);
        }
        
        /* read more/less css styling */
    </style>
    
    <style>
         /*additional styling - for the social share modal*/
        .single-player-vid-details-container{
            position:relative;
        }
        
        .socialsharesection{
            position:absolute;
            top:0;
            width:100%;
        }
        
        .responsive-media-social-share-icon{
            Width:100%;
            height:100%;
        }
        
        .socialshareiconbtn-btn{
            width:100px;
            height:100px;
            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;
              }
            }
            
        /* change the twitter logo to X */
        
        .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://about.twitter.com/content/dam/about-twitter/x/brand-toolkit/logo-black.png.twimg.1920.png');*/
            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;
                  left:0 !important;
             }
              
             .socialshareiconbtn-btn{
                width:70px;
                height:70px;
                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{
                /*background-color: #16202A !important;*/
                /*color: #fff;*/
                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;
             }
             
             .container .btn23 {
                 padding: 5px 20px!important;
                 font-size:2em !important;
             }
             
            /*.socialshareiconbtn-btn{*/
            /*  width:100% !important;*/
            /*  justify-content:center !important;*/
            /*}*/
            
            #com_soon_placement{
                display:none !important;
            }
        }
        
        /*additional styling */
        #vid-loader-preloader{
          position: fixed;
          left: 0;
          top: 0;
          z-index: 999;
          width: 100%;
          height: 100%;
          overflow: visible;
          /* You can change the background color and image URL here.  This solution works with animated .svg and animated .gif */
          //background: #ffffff url('https://gist.githubusercontent.com/condensed-io/d4da34ecfdeda137ad4787fbd244ed27/raw/b96d939e9baf98ff79394c11af83c10a6acdd241/pac.svg') no-repeat center center;
          display:none;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .custom-loading-spinner{
          width: 100px;
          height: 100px;
          border-radius: 50%;
          border: 10px solid #ddd;
          border-top-color: orange;
          animation: loading 1s linear infinite;
        }
        
        @keyframes loading {
          to {
            transform: rotate(360deg);
          }
        }
        
        .channels-programs-title{
            color:#DFA326 !important;
        }
        
       @media(max-width:575px){
           .displaychannelshousesection{
               display:flex !important;
               flex-wrap:wrap;
               padding:0 !important;
           }
           
            .displaychannelitem{
               margin:3px 5px!important;
               width:30% !important;
               height:50px !important;
                 border-radius:5px;
           }
           
            .active-displaychannelitem{
               box-shadow: 0 4px 11px rgba(36, 186, 239, .35);
               box-shadow: 0 0 10px 5px #dfa326;
           }
           
           .displaychannelitem-img{
               width:100% !important;
               height:50px !important;
           }
           
            .displaychannelitem-img img{
               width:100% !important;
               height:100% !important;
            }
       }
       
       @media(min-width:576px){
             #com_soon_placement_2{
                display:none !important;
            }
       }
       
       @media(min-width:992px){
           .displaychannelshousesection{
               display:flex !important;
               flex-wrap:wrap;
               padding:0 !important;
           }
           
            .displaychannelitem{
               margin:5px 10px!important;
               width:15% !important;
               height:75px !important;
               border-radius:5px;
           } 
           
           .active-displaychannelitem{
               box-shadow: 0 4px 11px rgba(36, 186, 239, .35);
               box-shadow: 0 0 10px 5px #dfa326;
           }
           
           .displaychannelitem-img{
               width:100% !important;
               height:150px !important;
               border-radius:inherit;
           }
           
            .displaychannelitem-img img{
               width:100% !important;
               height:100% !important;
               border-radius:inherit;
            }
            
        .dpcustompardisplay{
            padding-bottom:3vh;
        }
       } 
       
         
        .main-content-partial-section{
            min-height:100vh;
            background-color:#000F1E;
        }
        
        .no-overflow-body {
          overflow: hidden;
        }
        
        /* 500 error page */
        #error-500-view .flex-container {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
          color: white;
          animation: colorSlide 15s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
        }
        
        #error-500-view .flex-container .text-center {
            text-align: center;
        }
        
        .err-500-view-h3{
          margin: 10px;
          cursor: default;
        }
        
        .err-500-view-h3 {
            color: white !important;
            animation: fadeIn 2s ease infinite;
        }
          
        .err-500-view-h1{
          color: white !important;
          font-size: 8em;
          transition: font-size 200ms ease-in-out;
          border-bottom: 1px dashed white;
          animation: fadeIn 2s ease infinite;
        }
        
        #spndigit1{
            animation-delay: 200ms;
        }
        
        #spndigit2{
            animation-delay: 300ms;
        }
        
        #spndigit3{
            animation-delay: 400ms;
        }
        
        .err-500-view-btn {
          border: 1px solid white;
          background: transparent !important;
          outline: none;
          padding: 10px 20px;
          font-size: 1.1rem;
          font-weight: bold;
          color: white;
          text-transform: uppercase;
          transition: background-color 200ms ease-in;
          margin: 20px 0;
        }
        
        .err-500-view-btn:hover{
            background-color: white;
            color: #555 !important;
            cursor: pointer;
        }
        
        @keyframes colorSlide {
          0% { background-color: #152a68; }
          25% { background-color: royalblue; }
          50% { background-color: seagreen; }
          75% { background-color: tomato; }
          100% { background-color: #152a68; }
        }
        
        @keyframes fadeIn {
          from {
            opacity: 0;
          };
          100% {
            opacity: 1;
          }
        }
        /* 500 error page */
    </style>
    
    <style>
       .vjs-big-play-button{
           top: calc(50% - 0.8em) !important;
           left:calc(50% - 1.5em) !important;
       }
       
        @media (max-width:576px) {
            #my-video{
                width:100% !important;
                height:27vh !important;
            }
            
        }
        
        @media(min-width:576px){
            .custom-mb-btn-placement-block{display:none !important;}
        }
        
        @media only screen (min-width: 577px) and (max-width:768px) { 
            #my-video{
                width:100% !important;
                height:40vh !important;
            }
            
        }
        
        @media only screen (min-width: 769px) and (max-width:991px) {
            #my-video{
                width:100% !important;
            }
        }
        
        @media only screen (min-width: 992px) and (max-width:1199px) {
            #my-video{
                width:100% !important;
            }
        }
        
        @media(min-width:1200px){
             #buy_sub_mob_view_btn{display:none !important;}
        }
    </style>
    
    <style>
    @media(max-width:575px) {
        .category-page-subtitle-slide-custom-mb-title{
            margin-top:6vh !important;

        }
    }
    
    @media(min-width:576px){
        .com_soon-dp-btn{
            transform: translateX(0) !important;
        }
    }
    
    .img-rating-specific-block{
        transform: translateY(-5px) !important;
    }
    </style>
@endsection
@section('content')


<!-- Main page -->
<main id="js-livebroadcasts-partial-target" class="main-content-partial-section">
    <!--Main_Slider-->

       
        <div class="bg-gray-1100 pt-80">

            <!-- channels display section -->
                <div class="container mx-auto px-md-6 px-xl-7 px-wd-6 pb-0 pt-1">
                    <div class="pb-0">
                        <input type="hidden" id="channel_id_input" value="{{$activebroadcastchannel->id}}">
        
                        {{-- for desktop --}}
                        <div class="tv-programs border-g-1200-op mb-1 pb-0 d-none d-xl-block">
                            <div class="home-section mb-3 displaychannelssection dpcustompardisplay" id="sports">
                                <div class="font-size-20 font-weight-bold mb-3 mx-0 text-golden font-secondary channels-programs-title">
                                    Select Channel
                                </div>
                                <div class="gird-view-videos w-100 displaychannelshousesection">
                                    @if(isset($livebroadcastchannels))
                                        @foreach($livebroadcastchannels as $channel)
                                                @if($channel->id === $activebroadcastchannel->id)
                                                    <a href="{{ url('dp/live-broadcast/channel-'.$channel->id) }}"> <div class="item landscape-type-item mx-2 displaychannelitem active-displaychannelitem">
                                                @else 
                                                    <a href="{{ url('dp/live-broadcast/channel-'.$channel->id) }}"> <div class="item landscape-type-item mx-2 displaychannelitem">
                                                @endif
                                                    
                                                    <div class="featured_img height-100 img-container mb-2 product displaychannelitem-img" style="height:90px !important;">
                                                        <img class="" src="{{$channel->channel_thumbnail}}" alt="Image-Description">
                                                        <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>
                                                                        {{$channel->channel_name}}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </a>
                                        </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                        {{-- for desktop --}}
        
                        {{-- for mobile --}}
                        <div class="tv-programs border-g-1200-op mb-1 pb-0 d-block d-xl-none">
                            <div class="home-section mb-1 displaychannelssection" id="sports">
                                <div class="font-size-20 font-weight-bold mb-3 mx-0 text-golden font-secondary channels-programs-title">
                                    Select Channel
                                </div>
                                <div class="gird-view-videos w-100 displaychannelshousesection">
                                    @if(isset($livebroadcastchannels))
                                        @foreach($livebroadcastchannels as $channel)
                                            @if($channel->id === $activebroadcastchannel->id)
                                            <a href="{{ url('mb/live-broadcast/channel-'.$channel->id) }}"> <div class="item landscape-type-item mx-2 displaychannelitem active-displaychannelitem">
                                            @else
                                            <a href="{{ url('mb/live-broadcast/channel-'.$channel->id) }}"> <div class="item landscape-type-item mx-2 displaychannelitem">
                                            @endif
                                    
                                                <div class="featured_img height-150 img-container mb-2 product displaychannelitem-img">
                                                    <img class="" src="{{$channel->channel_thumbnail}}" alt="Image-Description">
                                                    <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>
                                                                    {{$channel->channel_name}}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                </a>
                                        </div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                        </div>
                    {{-- for mobile --}}
        
                    </div>
                </div>
            <!-- channels display section -->

            <!-- videos display section -->
                <div class="container mx-auto px-md-6 px-xl-7 px-wd-6">
                    {{--deals with livestream display logic --}}
                    @if(isset($livestreamingevents) && $livestreamingevents->count() > 0) 

                        <!-- #case 1 - live stream event is a Pay Per View -->
                            @if($playing_video_subscription == 'Pay per view set up')

                                <!-- #case 1.1 - live stream event is a Pay Per View & user has viewing rights -->
                                    @if($user_view_rights_on_playing_video == 1)
                                        <input type="hidden" id="lst-presence-on-off" value="on">
                                        @php 
                                            $streamprotocol = "https";
                                            $streamprotocolconnector = "://";
                                            $streamserver = "verityplus.live/";
                                            $streampath = "hls/streamchannel{$activebroadcastchannel->id}";
                                            $streamchannel = $live_stream_creds->stream_channel;
                                            $streamkey = $live_stream_creds->streamkey;
                                            $streamformat = ".m3u8";
                                            $streamthumbnail = "https://verity-tv-storage.s3-accelerate.amazonaws.com/video-thumbnail/{$livestreamingevents->thumbnail}";
                                            $streamurl = "{$streamprotocol}{$streamprotocolconnector}{$streamserver}{$streampath}/{$streamkey}{$streamformat}"; 
                                        @endphp 
                                        
                                        <!-- *live stream event has not yet started -->
                                            @if($livestreamingevents->date = now()->format('Y-m-d') && $livestreamingevents->start_time > now()->format('H:i:s'))
                                                <div id="lst-video-placement-container" style="height:auto;padding:0.5vh 0px !important;margin-left:0;margin-right:0;">
                                                    <video
                                                    id="my-video"
                                                    class="video-js"
                                                    controls
                                                    preload="auto"
                                                    width="100%"
                                                    height="704"
                                                    data-setup='{"poster": "{{$streamthumbnail}}"}' style="width:100%!important; object-fit: fill;">
                                                    <source src="" type="application/vnd.apple.mpegurl" />
                                                    
                                                        <p class="vjs-no-js">
                                                            To view this video please enable JavaScript, and consider upgrading to a
                                                            web browser that
                                                            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                        </p>
                                                    </video>
                                                    <script>
                                                        videojs('my-video', {
                                                            overrideNative: true,
                                                            errorDisplay: false,
                                                            autoplay: false
                                                        });
                                                    </script>
                                                </div>
                                        <!-- *live stream event has not yet started -->

                                        <!-- *live stream event has started or is starting now -->
                                            @elseif($livestreamingevents->date = now()->format('Y-m-d') && $livestreamingevents->start_time <= now()->format('H:i:s'))
                                                <div id="lst-video-placement-container" style="height:auto;padding:0.5vh 0px !important;margin-left:0;margin-right:0;">
                                                    <video
                                                    id="my-video"
                                                    class="video-js"
                                                    controls
                                                    autoplay
                                                    preload="auto"
                                                    width="100%"
                                                    height="704"
                                                    data-setup='{"poster": "{{$streamthumbnail}}"}' style="width:100%!important; object-fit: fill;">
                                                    <source src="{{$streamurl}}" type="application/vnd.apple.mpegurl" />
                                                    
                                                    <p class="vjs-no-js">
                                                        To view this video please enable JavaScript, and consider upgrading to a
                                                        web browser that
                                                        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                    </p>
                                                    </video>
                                                    <script>
                                                    videojs('my-video', {
                                                        overrideNative: true, // <-- this fixes Android Chrome
                                                        errorDisplay: false,
                                                        autoplay: true,
                                                    });
                                                    </script>
                                                </div>

                                                <div class="live_streaming_layout_placement mb-0">
                                                    <div class="live_streaming_section p-2 pb-0 my-0 d-flex justify-content-end">
                                                        <div class="live_streaming_btn_section" style="width:20%;">
                                                            <img src="{{url('front/assets/img/live-streaming-icon-4.png')}}" alt="live-streaming" class="responsive-live-satreaming-icon-display">
                                                        </div>
                                                        <div class="live_streaming_btn_section_2 d-flex justify-content-end" style="width:20%;">
                                                            <button type="button" class="btn btn-primary socialshareiconbtn-btn p-0" data-bs-toggle="modal" data-bs-target="#sharemodal">
                                                                <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>
                                                        <div class="live_streaming_btn_section_3 d-flex justify-content-end" style="width:80% !important;">
                                                            <div class="in_div pl-2" style="width:100% !important;height:100% important;"> 
                                                                @if(isset($livestreamingevents->getRating->image))
                                                                    <img style="height: 30px!important;
                                                                    width: auto!important; margin-top:-5px;
                                                                    " src="{{url('ratings'.'/'.$livestreamingevents->getRating->image)}}">
                                                                @endif
                                                                @if(isset($livestreamingevents->getRating))
                                                                    <span style="font-size:0.7em;"> {{ $livestreamingevents->getRating->description }} </span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            
                                                <h6 class="text-white font-weight-semi-bold font-secondary category-page-subtitle-slide category-page-subtitle-slide-custom-mb-title mt-1 mb-3 mb-md-1">
                                                    <span id="upc_video_title" style="font-size:1.5em;"> {{$livestreamingevents->title}} </span>
                                                </h6>
                                            
                                                <p id="vid_cat_sub_title" class="category-page-subtitle-slide" style="font-size:0.9em;">{{Str::words($livestreamingevents->sub_title)}}</p>
                    
                                                <ul class="list-unstyled nav nav-meta font-secondary pt-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">
                                                    <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1"></li>
                                                    <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->start_time}}</li>
                                                    <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->end_time}}</li>
                                                    <li class="d-none d-md-block img-rating-specific-block">
                                                        @if(isset($livestreamingevents->getRating))
                                                            <img id="gt_rating_img" style="height: 30px!important;
                                                            width: auto!important; margin-top:-5px;
                                                            " src="{{url('ratings'.'/'.$livestreamingevents->getRating->image)}}">
                                                        @endif
                                                    </li>
                                                    
                                                    <li class="d-none d-md-block img-rating-specific-block">
                                                        @if(isset($livestreamingevents->getRating))
                                                            {{$livestreamingevents->getRating->description}}
                                                        @endif
                                                    </li>
                                                </ul>
                                            
                                                <div class="video-description">
                                                    <input id="read-more-checkbox" type="checkbox" class="read-more__checkbox" aria-hidden="true">
                                                    {!! $livestreamingevents->description !!}
                                                    <label for="read-more-checkbox" id="readmoretextid" class="read-more__label" data-read-more="Read more" data-read-less="See less" aria-hidden="true"></label>
                                                </div>
                                        <!-- *live stream event has started or is starting now -->
                                            @endif
                                        
                                    @endif
                                <!-- #case 1.1 - live stream event is a Pay Per View & user has viewing rights -->

                                <!-- #case 1.2 - live stream event is a Pay Per View but user is either logged out(2) or user has no viewing rights(0) -->
                                    @if($user_view_rights_on_playing_video == 0 || $user_view_rights_on_playing_video == 2)
                                        <input type="hidden" id="lst-presence-on-off" value="on">
                                        @php 
                                            $streamprotocol = "https";
                                            $streamprotocolconnector = "://";
                                            $streamserver = "verityplus.live/";
                                            $streampath = "hls/streamchannel{$activebroadcastchannel->id}";
                                            $streamchannel = $live_stream_creds->stream_channel;
                                            $streamkey = $live_stream_creds->streamkey;
                                            $streamformat = ".m3u8";
                                            $streamthumbnail = "https://verity-tv-storage.s3-accelerate.amazonaws.com/video-thumbnail/{$livestreamingevents->thumbnail}";
                                            $streamurl = "{$streamprotocol}{$streamprotocolconnector}{$streamserver}{$streampath}/{$streamkey}{$streamformat}"; 
                                        @endphp 

                                        <!-- *live stream event has not yet started -->
                                            @if($livestreamingevents->date = now()->format('Y-m-d') && $livestreamingevents->start_time > now()->format('H:i:s'))
                                                    <div id="lst-video-placement-container" style="height:auto;padding:0.5vh 0px !important;margin-left:0;margin-right:0;">
                                                        <video
                                                        id="my-video"
                                                        class="video-js"
                                                        controls
                                                        preload="auto"
                                                        width="100%"
                                                        height="704"
                                                        data-setup='{"poster": "{{$streamthumbnail}}"}' style="width:100%!important; object-fit: fill;">
                                                        <source src="" type="application/vnd.apple.mpegurl" />
                                                        
                                                            <p class="vjs-no-js">
                                                                To view this video please enable JavaScript, and consider upgrading to a
                                                                web browser that
                                                                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                            </p>
                                                        </video>
                                                        <script>
                                                            videojs('my-video', {
                                                                overrideNative: true,
                                                                errorDisplay: false,
                                                                autoplay: false
                                                            });
                                                        </script>
                                                    </div>

                                                    @if($user_view_rights_on_playing_video == 2)
                                                        <button id="com_soon_placement_3" class="btn btn-xs btn-warning com_soon-dp-btn d-none d-xl-block mx-auto"> <a href="{{route('front.userLogin')}}" class="text-dark"> You need to be logged in to view</a> </button>
                                                    @else
                                                        <button id="com_soon_placement_3" class="btn btn-xs btn-warning com_soon-dp-btn d-none d-xl-block mx-auto"> <a href="{{route('front.getSubscription')}}" class="text-dark"> Click to buy a subscription to view</a> </button>
                                                    @endif
                                        <!-- *live stream event has not yet started -->

                                        <!-- *live stream event has started or is starting now -->
                                            @elseif($livestreamingevents->date = now()->format('Y-m-d') && $livestreamingevents->start_time <= now()->format('H:i:s'))
                                                <div id="lst-video-placement-container" style="height:auto;padding:0.5vh 0px !important;margin-left:0;margin-right:0;">
                                                    <video
                                                    id="my-video"
                                                    class="video-js"
                                                    controls
                                                    autoplay
                                                    preload="auto"
                                                    width="100%"
                                                    height="704"
                                                    data-setup='{"poster": "{{$streamthumbnail}}"}' style="width:100%!important; object-fit: fill;">
                                                    <source src="" type="application/vnd.apple.mpegurl" />
                                                    
                                                    <p class="vjs-no-js">
                                                        To view this video please enable JavaScript, and consider upgrading to a
                                                        web browser that
                                                        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                    </p>
                                                    </video>
                                                    <script>
                                                    videojs('my-video', {
                                                        overrideNative: true, // <-- this fixes Android Chrome
                                                        errorDisplay: false,
                                                        autoplay: false,
                                                    });
                                                    </script>
                                                </div>
                                                
                                                @if($user_view_rights_on_playing_video == 2)
                                                    <button id="com_soon_placement_3" class="btn btn-xs btn-warning com_soon-dp-btn d-none d-xl-block mx-auto"> <a href="{{route('front.userLogin')}}" class="text-dark"> You need to be logged in to view</a> </button>
                                                @else
                                                    <button id="com_soon_placement_3" class="btn btn-xs btn-warning com_soon-dp-btn d-none d-xl-block mx-auto"> <a href="{{route('front.getSubscription')}}" class="text-dark"> Click to buy a subscription to view</a> </button>
                                                @endif

                                                <div class="live_streaming_layout_placement mb-0">
                                                    <div class="live_streaming_section p-2 pb-0 my-0 d-flex justify-content-end">
                                                        <div class="live_streaming_btn_section" style="width:20%;">
                                                            <img src="{{url('front/assets/img/live-streaming-icon-4.png')}}" alt="live-streaming" class="responsive-live-satreaming-icon-display">
                                                        </div>
                                                        <div class="live_streaming_btn_section_2 d-flex justify-content-end" style="width:20%;">
                                                            <button type="button" class="btn btn-primary socialshareiconbtn-btn p-0" data-bs-toggle="modal" data-bs-target="#sharemodal">
                                                                <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>
                                                        <div class="live_streaming_btn_section_3 d-flex justify-content-end" style="width:80% !important;">
                                                            <div class="in_div pl-2" style="width:100% !important;height:100% important;"> 
                                                                @if(isset($livestreamingevents->getRating->image))
                                                                    <img style="height: 30px!important;
                                                                    width: auto!important; margin-top:-5px;
                                                                    " src="{{url('ratings'.'/'.$livestreamingevents->getRating->image)}}">
                                                                @endif
                                                                @if(isset($livestreamingevents->getRating))
                                                                    <span style="font-size:0.7em;"> {{ $livestreamingevents->getRating->description }} </span>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            
                                                <h6 class="text-white font-weight-semi-bold font-secondary category-page-subtitle-slide category-page-subtitle-slide-custom-mb-title mt-1 mb-3 mb-md-1">
                                                    <span id="upc_video_title" style="font-size:1.5em;"> {{$livestreamingevents->title}} </span>
                                                </h6>
                                            
                                                <p id="vid_cat_sub_title" class="category-page-subtitle-slide" style="font-size:0.9em;">{{Str::words($livestreamingevents->sub_title)}}</p>
                    
                                                <ul class="list-unstyled nav nav-meta font-secondary pt-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">
                                                    <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->date}}</li>
                                                    <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->start_time}}</li>
                                                    <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->end_time}}</li>
                                                    <li class="d-none d-md-block img-rating-specific-block">
                                                        @if(isset($livestreamingevents->getRating))
                                                            <img id="gt_rating_img" style="height: 30px!important;
                                                            width: auto!important; margin-top:-5px;
                                                            " src="{{url('ratings'.'/'.$livestreamingevents->getRating->image)}}">
                                                        @endif
                                                    </li>
                                                    
                                                    <li class="d-none d-md-block img-rating-specific-block">
                                                        @if(isset($livestreamingevents->getRating))
                                                            {{$livestreamingevents->getRating->description}}
                                                        @endif
                                                    </li>
                                                </ul>
                                            
                                                <div class="video-description">
                                                    <input id="read-more-checkbox" type="checkbox" class="read-more__checkbox" aria-hidden="true">
                                                    {!! $livestreamingevents->description !!}
                                                    <label for="read-more-checkbox" id="readmoretextid" class="read-more__label" data-read-more="Read more" data-read-less="See less" aria-hidden="true"></label>
                                                </div>
                                        <!-- *live stream event has started or is starting now -->
                                            @endif

                                    @endif          
                                <!-- #case 1.2 - live stream event is a Pay Per View but user is either logged out(2) or has no viewing rights(0) -->
                            @endif
                        <!-- #case 1 - live stream event is a Pay Per View -->

                        <!-- #case 2 - live stream event is a Free View or it is not set -->
                            @if($playing_video_subscription == 'Free view' || $playing_video_subscription == 'not set')
                                <input type="hidden" id="lst-presence-on-off" value="on">
                                @php 
                                    $streamprotocol = "https";
                                    $streamprotocolconnector = "://";
                                    $streamserver = "verityplus.live/";
                                    $streampath = "hls/streamchannel{$activebroadcastchannel->id}";
                                    $streamchannel = $live_stream_creds->stream_channel;
                                    $streamkey = $live_stream_creds->streamkey;
                                    $streamformat = ".m3u8";
                                    $streamthumbnail = "https://verity-tv-storage.s3-accelerate.amazonaws.com/video-thumbnail/{$livestreamingevents->thumbnail}";
                                    $streamurl = "{$streamprotocol}{$streamprotocolconnector}{$streamserver}{$streampath}/{$streamkey}{$streamformat}"; 
                                @endphp  
                                
                                <!-- #case 2.1 - live stream event is a Free View & anyone can watch it -->

                                    <!-- *live stream event has not yet started -->
                                        @if($livestreamingevents->date = now()->format('Y-m-d') && $livestreamingevents->start_time > now()->format('H:i:s'))
                                            <div id="lst-video-placement-container" style="height:auto;padding:0.5vh 0px !important;margin-left:0;margin-right:0;">
                                                <video
                                                id="my-video"
                                                class="video-js"
                                                controls
                                                preload="auto"
                                                width="100%"
                                                height="704"
                                                data-setup='{"poster": "{{$streamthumbnail}}"}' style="width:100%!important; object-fit: fill;">
                                                <source src="" type="application/vnd.apple.mpegurl" />
                                                
                                                    <p class="vjs-no-js">
                                                        To view this video please enable JavaScript, and consider upgrading to a
                                                        web browser that
                                                        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                    </p>
                                                </video>
                                                <script>
                                                    videojs('my-video', {
                                                        overrideNative: true,
                                                        errorDisplay: false,
                                                        autoplay: false
                                                    });
                                                </script>
                                            </div>
                                    <!-- *live stream event has not yet started -->

                                    <!-- *live stream event has started or is starting now -->
                                        @elseif($livestreamingevents->date = now()->format('Y-m-d') && $livestreamingevents->start_time <= now()->format('H:i:s'))
                                            <div id="lst-video-placement-container" style="height:auto;padding:0.5vh 0px !important;margin-left:0;margin-right:0;">
                                                <video
                                                id="my-video"
                                                class="video-js"
                                                controls
                                                autoplay
                                                preload="auto"
                                                width="100%"
                                                height="704"
                                                data-setup='{"poster": "{{$streamthumbnail}}"}' style="width:100%!important; object-fit: fill;">
                                                <source src="{{$streamurl}}" type="application/vnd.apple.mpegurl" />
                                                
                                                <p class="vjs-no-js">
                                                    To view this video please enable JavaScript, and consider upgrading to a
                                                    web browser that
                                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                                </p>
                                                </video>
                                                <script>
                                                videojs('my-video', {
                                                    overrideNative: true, // <-- this fixes Android Chrome
                                                    errorDisplay: false,
                                                    autoplay: true,
                                                });
                                                </script>
                                            </div>

                                            <div class="live_streaming_layout_placement mb-0">
                                                <div class="live_streaming_section p-2 pb-0 my-0 d-flex justify-content-end">
                                                    <div class="live_streaming_btn_section" style="width:20%;">
                                                        <img src="{{url('front/assets/img/live-streaming-icon-4.png')}}" alt="live-streaming" class="responsive-live-satreaming-icon-display">
                                                    </div>
                                                    <div class="live_streaming_btn_section_2 d-flex justify-content-end" style="width:20%;">
                                                        <button type="button" class="btn btn-primary socialshareiconbtn-btn p-0" data-bs-toggle="modal" data-bs-target="#sharemodal">
                                                            <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>
                                                    <div class="live_streaming_btn_section_3 d-flex justify-content-end" style="width:80% !important;">
                                                        <div class="in_div pl-2" style="width:100% !important;height:100% important;"> 
                                                            @if(isset($livestreamingevents->getRating->image))
                                                                <img style="height: 30px!important;
                                                                width: auto!important; margin-top:-5px;
                                                                " src="{{url('ratings'.'/'.$livestreamingevents->getRating->image)}}">
                                                            @endif
                                                            @if(isset($livestreamingevents->getRating))
                                                                <span style="font-size:0.7em;"> {{ $livestreamingevents->getRating->description }} </span>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        
                                            <h6 class="text-white font-weight-semi-bold font-secondary category-page-subtitle-slide category-page-subtitle-slide-custom-mb-title mt-1 mb-3 mb-md-1">
                                                <span id="upc_video_title" style="font-size:1.5em;"> {{$livestreamingevents->title}} </span>
                                            </h6>
                                        
                                            <p id="vid_cat_sub_title" class="category-page-subtitle-slide" style="font-size:0.9em;">{{Str::words($livestreamingevents->sub_title)}}</p>
                
                                            <ul class="list-unstyled nav nav-meta font-secondary pt-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">
                                                <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->date}}</li>
                                                <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->start_time}}</li>
                                                <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->end_time}}</li>
                                                <li class="d-none d-md-block img-rating-specific-block">
                                                    @if(isset($livestreamingevents->getRating))
                                                        <img id="gt_rating_img" style="height: 30px!important;
                                                        width: auto!important; margin-top:-5px;
                                                        " src="{{url('ratings'.'/'.$livestreamingevents->getRating->image)}}">
                                                    @endif
                                                </li>
                                                
                                                <li class="d-none d-md-block img-rating-specific-block">
                                                    @if(isset($livestreamingevents->getRating))
                                                        {{$livestreamingevents->getRating->description}}
                                                    @endif
                                                </li>
                                            </ul>
                                        
                                            <div class="video-description">
                                                <input id="read-more-checkbox" type="checkbox" class="read-more__checkbox" aria-hidden="true">
                                                {!! $livestreamingevents->description !!}
                                                <label for="read-more-checkbox" id="readmoretextid" class="read-more__label" data-read-more="Read more" data-read-less="See less" aria-hidden="true"></label>
                                            </div>
                                    <!-- *live stream event has started or is starting now -->
                                        @endif

                                <!-- #case 2.1 - live stream event is a Free View & anyone can watch it -->
                            @endif
                        <!-- #case 2 - live stream event is a Free View or it is not set -->

                    {{--@endif (ending) --}}
                    {{--deals with livestream display logic --}}


                    {{--deals with pre-recorded videos display logic --}}
                    @elseif(isset($currentUpcomingPlayingVideo))
                        @php 
                            $video = $currentUpcomingPlayingVideo->ls_videos; 
                        @endphp

                        <!-- #case 1 - pre-recorded video is a Pay Per View -->
                        @if($playing_video_subscription == 'Pay per view set up')

                            <!-- #case 1.1 - pre-recorded video is a Pay Per View & user has viewing rights -->
                                @if($user_view_rights_on_playing_video == 1)
                                    <video id="upcoming-video-live-video" loop autoplay muted poster="{{$video->thumbnail}}" style="width:100%!important;object-fit: contain;" oncontextmenu="return false;" loop playsinline controls preload="metadata">
                                        <source src="{{$video->video_path}}" id="upcoming-video-live-video-src" type="video/mp4">
                                    </video>

                                    <div id="upcoming-video-live-video-img" class="img-containercustom container p-0" style="display:none;position:relative;"> 
                                        <img id="upcoming-video-live-video-img-custom" style="/* display:none; */margin:0 !important;" class="container" src="{{$video->thumbnail}}"> 
                                        <button id="playBtn" class="btn23" style="display:none;" onclick='getMessage()'>
                                            <i class="fa fa-play text-red"></i>
                                        </button>
                                    </div>

                                    <div class="live_streaming_layout_placement mb-0">
                                        <div class="live_streaming_section p-2 pb-0 my-0 d-flex justify-content-end">
                                            <div class="live_streaming_btn_section" style="width:20%;">
                                                <img src="{{url('front/assets/img/live-streaming-icon-4.png')}}" alt="live-streaming" class="responsive-live-satreaming-icon-display">
                                            </div>
                                            <div class="live_streaming_btn_section_2 d-flex justify-content-end" style="width:20%;">
                                                <button type="button" class="btn btn-primary socialshareiconbtn-btn p-0" data-bs-toggle="modal" data-bs-target="#sharemodal">
                                                    <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>
                                            <div class="live_streaming_btn_section_3 d-flex justify-content-end" style="width:80% !important;">
                                                <div class="in_div pl-2" style="width:100% !important;height:100% important;"> 
                                                    @if(isset($video->getRating->image))
                                                        <img style="height: 30px!important;
                                                        width: auto!important; margin-top:-5px;
                                                        " src="{{url('ratings'.'/'.$video->getRating->image)}}">
                                                    @endif
                                                    @if(isset($video->getRating))
                                                        <span style="font-size:0.7em;"> {{ $video->getRating->description }} </span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <h6 class="font-size-24 text-white font-weight-semi-bold category-page-subtitle-slide-custom-mb-title font-secondary mt-1 mb-3 mb-md-1">
                                        <span id="upc_video_title" style="font-size:1.5em;"> {{$video->title}} </span>
                                        @if(!isset($video->video_path))
                                        <button id="com_soon_placement" class="btn btn-xs btn-warning">Coming Soon</button>
                                        @endif
                                    </h6>
        
                                    <p id="vid_cat_sub_title" class="category-page-subtitle-slide" style="font-size:0.9em;">{{Str::words($video->sub_title)}}</p>
                                    <ul class="list-unstyled nav nav-meta font-secondary pt-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">
                                        <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$video->created_at->format('d M, Y')}}</li>
                                        <li id="vid_li_2" class="text-white flex-shrink-0 flex-shrink-md-1">{{$video->duration}}</li>
                                        <li id="vid_li_2" class="text-white flex-shrink-0 flex-shrink-md-1">{{$currentUpcomingPlayingVideo->start_time}}</li>
                                        <li id="vid_li_2" class="text-white flex-shrink-0 flex-shrink-md-1">{{$currentUpcomingPlayingVideo->end_time}}</li>
                                        <li class="d-none d-md-block img-rating-specific-block">
                                            @if(isset($video->getRating->image))
                                                <img id="gt_rating_img" style="height: 30px!important;
                                                width: auto!important; margin-top:-5px;
                                                " src="{{url('ratings'.'/'.$video->getRating->image)}}">
                                            @endif
                                        </li>
                                        <li class="d-none d-md-block img-rating-specific-block">
                                            @if(isset($video->getRating))
                                                {{$video->getRating->description}}
                                            @endif
                                        </li>
                                    </ul>
        
                                    <div class="video-description">
                                        <input id="read-more-checkbox" type="checkbox" class="read-more__checkbox" aria-hidden="true">
                                        {!! $video->description !!}
                                        <label for="read-more-checkbox" id="readmoretextid" class="read-more__label" data-read-more="Read more" data-read-less="See less" aria-hidden="true"></label>
                                    </div>
        
                                    @if(!isset($video->video_path))
                                        <button id="com_soon_placement_2" class="btn btn-xs btn-warning">Coming Soon</button>
                                    @endif
                                @endif
                            <!-- #case 1.1 - pre-recorded video is a Pay Per View & user has viewing rights -->

                            <!-- #case 1.2 - pre-recorded video is a Pay Per View but user is either logged out(2) or user has no viewing rights(0) -->
                                @if($user_view_rights_on_playing_video == 0 || $user_view_rights_on_playing_video == 2)
                                    <video id="upcoming-video-live-video" loop autoplay muted poster="{{$video->thumbnail}}" style="width:100%!important;object-fit: contain;" oncontextmenu="return false;" loop playsinline controls preload="metadata">
                                        <source src="" id="upcoming-video-live-video-src" type="video/mp4">
                                    </video>

                                    <div id="upcoming-video-live-video-img" class="img-containercustom container p-0" style="display:none;position:relative;"> 
                                        <img id="upcoming-video-live-video-img-custom" style="/* display:none; */margin:0 !important;" class="container" src="{{$video->thumbnail}}"> 
                                        <button id="playBtn" class="btn23" style="display:none;" onclick='getMessage()'>
                                            <i class="fa fa-play text-red"></i>
                                        </button>
                                    </div>

                                    <div class="live_streaming_layout_placement mb-0">
                                        <div class="live_streaming_section p-2 pb-0 my-0 d-flex justify-content-end">
                                            <div class="live_streaming_btn_section" style="width:20%;">
                                                <img src="{{url('front/assets/img/live-streaming-icon-4.png')}}" alt="live-streaming" class="responsive-live-satreaming-icon-display">
                                            </div>
                                            <div class="live_streaming_btn_section_2 d-flex justify-content-end" style="width:20%;">
                                                <button type="button" class="btn btn-primary socialshareiconbtn-btn p-0" data-bs-toggle="modal" data-bs-target="#sharemodal">
                                                    <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>
                                            <div class="live_streaming_btn_section_3 d-flex justify-content-end" style="width:80% !important;">
                                                <div class="in_div pl-2" style="width:100% !important;height:100% important;"> 
                                                    @if(isset($video->getRating->image))
                                                        <img style="height: 30px!important;
                                                        width: auto!important; margin-top:-5px;
                                                        " src="{{url('ratings'.'/'.$video->getRating->image)}}">
                                                    @endif
                                                    @if(isset($video->getRating))
                                                        <span style="font-size:0.7em;"> {{ $video->getRating->description }} </span>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <h6 class="font-size-24 text-white font-weight-semi-bold category-page-subtitle-slide-custom-mb-title font-secondary mt-1 mb-3 mb-md-1">
                                        <span id="upc_video_title" style="font-size:1.5em;"> {{$video->title}} </span>
                                        @if(!isset($video->video_path))
                                        <button id="com_soon_placement" class="btn btn-xs btn-warning">Coming Soon</button>
                                        @endif
                                    </h6>
        
                                    <p id="vid_cat_sub_title" class="category-page-subtitle-slide" style="font-size:0.9em;">{{Str::words($video->sub_title)}}</p>
                                    <ul class="list-unstyled nav nav-meta font-secondary pt-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">
                                        <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$video->created_at->format('d M, Y')}}</li>
                                        <li id="vid_li_2" class="text-white flex-shrink-0 flex-shrink-md-1">{{$video->duration}}</li>
                                        <li id="vid_li_2" class="text-white flex-shrink-0 flex-shrink-md-1">{{$currentUpcomingPlayingVideo->start_time}}</li>
                                        <li id="vid_li_2" class="text-white flex-shrink-0 flex-shrink-md-1">{{$currentUpcomingPlayingVideo->end_time}}</li>
                                        <li class="d-none d-md-block img-rating-specific-block">
                                            @if(isset($video->getRating->image))
                                                <img id="gt_rating_img" style="height: 30px!important;
                                                width: auto!important; margin-top:-5px;
                                                " src="{{url('ratings'.'/'.$video->getRating->image)}}">
                                            @endif
                                        </li>
                                        <li class="d-none d-md-block img-rating-specific-block">
                                            @if(isset($video->getRating))
                                                {{$video->getRating->description}}
                                            @endif
                                        </li>
                                    </ul>
        
                                    <div class="video-description">
                                        <input id="read-more-checkbox" type="checkbox" class="read-more__checkbox" aria-hidden="true">
                                        {!! $video->description !!}
                                        <label for="read-more-checkbox" id="readmoretextid" class="read-more__label" data-read-more="Read more" data-read-less="See less" aria-hidden="true"></label>
                                    </div>
        
                                    @if(!isset($video->video_path))
                                        <button id="com_soon_placement_2" class="btn btn-xs btn-warning">Coming Soon</button>
                                    @endif

                                    @if($user_view_rights_on_playing_video == 2)
                                        <button id="com_soon_placement_3" class="btn btn-xs btn-warning com_soon-dp-btn d-none d-xl-block mx-auto"> <a href="{{route('front.userLogin')}}" class="text-dark"> You need to be logged in to view</a> </button>
                                    @else
                                        <button id="com_soon_placement_3" class="btn btn-xs btn-warning com_soon-dp-btn d-none d-xl-block mx-auto"> <a href="{{route('front.getSubscription')}}" class="text-dark"> Click to buy a subscription to view</a> </button>
                                    @endif
                                @endif
                            <!-- #case 1.2 - pre-recorded video is a Pay Per View but user is either logged out(2) or user has no viewing rights(0) -->

                        @endif
                        <!-- #case 1 - pre-recorded video is a Pay Per View -->  

                        <!-- #case 2 - pre-recorded video is a Free View, it's missing subscription or it is not set -->
                            @if($playing_video_subscription == 'Free view' || $playing_video_subscription == 'not set' || $playing_video_subscription == 'Pay per view set up missing subscription')
                                <video id="upcoming-video-live-video" loop autoplay muted poster="{{$video->thumbnail}}" style="width:100%!important;object-fit: contain;" oncontextmenu="return false;" loop playsinline controls preload="metadata">
                                    @if($playing_video_subscription == 'not set' || $playing_video_subscription == 'Pay per view set up missing subscription')
                                        <source src="" id="upcoming-video-live-video-src" type="video/mp4">
                                    @else
                                        <source src="{{$video->video_path}}" id="upcoming-video-live-video-src" type="video/mp4">
                                    @endif
                                </video>

                                <div id="upcoming-video-live-video-img" class="img-containercustom container p-0" style="display:none;position:relative;"> 
                                    <img id="upcoming-video-live-video-img-custom" style="/* display:none; */margin:0 !important;" class="container" src="{{$video->thumbnail}}"> 
                                    <button id="playBtn" class="btn23" style="display:none;" onclick='getMessage()'>
                                        <i class="fa fa-play text-red"></i>
                                    </button>
                                </div>

                                <div class="live_streaming_layout_placement mb-0">
                                    <div class="live_streaming_section p-2 pb-0 my-0 d-flex justify-content-end">
                                        <div class="live_streaming_btn_section" style="width:20%;">
                                            <img src="{{url('front/assets/img/live-streaming-icon-4.png')}}" alt="live-streaming" class="responsive-live-satreaming-icon-display">
                                        </div>
                                        <div class="live_streaming_btn_section_2 d-flex justify-content-end" style="width:20%;">
                                            <button type="button" class="btn btn-primary socialshareiconbtn-btn p-0" data-bs-toggle="modal" data-bs-target="#sharemodal">
                                                <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>
                                        <div class="live_streaming_btn_section_3 d-flex justify-content-end" style="width:80% !important;">
                                            <div class="in_div pl-2" style="width:100% !important;height:100% important;"> 
                                                @if(isset($video->getRating->image))
                                                    <img style="height: 30px!important;
                                                    width: auto!important; margin-top:-5px;
                                                    " src="{{url('ratings'.'/'.$video->getRating->image)}}">
                                                @endif
                                                @if(isset($video->getRating))
                                                    <span style="font-size:0.7em;"> {{ $video->getRating->description }} </span>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <h6 class="font-size-24 text-white font-weight-semi-bold category-page-subtitle-slide-custom-mb-title font-secondary mt-1 mb-3 mb-md-1">
                                    <span id="upc_video_title" style="font-size:1.5em;"> {{$video->title}} </span>
                                    @if(!isset($video->video_path))
                                    <button id="com_soon_placement" class="btn btn-xs btn-warning">Coming Soon</button>
                                    @endif
                                </h6>

                                <p id="vid_cat_sub_title" class="category-page-subtitle-slide" style="font-size:0.9em;">{{Str::words($video->sub_title)}}</p>
                                <ul class="list-unstyled nav nav-meta font-secondary pt-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">
                                    <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$video->created_at->format('d M, Y')}}</li>
                                    <li id="vid_li_2" class="text-white flex-shrink-0 flex-shrink-md-1">{{$video->duration}}</li>
                                    <li id="vid_li_2" class="text-white flex-shrink-0 flex-shrink-md-1">{{$currentUpcomingPlayingVideo->start_time}}</li>
                                    <li id="vid_li_2" class="text-white flex-shrink-0 flex-shrink-md-1">{{$currentUpcomingPlayingVideo->end_time}}</li>
                                    <li class="d-none d-md-block img-rating-specific-block">
                                        @if(isset($video->getRating->image))
                                            <img id="gt_rating_img" style="height: 30px!important;
                                            width: auto!important; margin-top:-5px;
                                            " src="{{url('ratings'.'/'.$video->getRating->image)}}">
                                        @endif
                                    </li>
                                    <li class="d-none d-md-block img-rating-specific-block">
                                        @if(isset($video->getRating))
                                            {{$video->getRating->description}}
                                        @endif
                                    </li>
                                </ul>

                                <div class="video-description">
                                    <input id="read-more-checkbox" type="checkbox" class="read-more__checkbox" aria-hidden="true">
                                    {!! $video->description !!}
                                    <label for="read-more-checkbox" id="readmoretextid" class="read-more__label" data-read-more="Read more" data-read-less="See less" aria-hidden="true"></label>
                                </div>

                                @if(!isset($video->video_path))
                                    <button id="com_soon_placement_2" class="btn btn-xs btn-warning">Coming Soon</button>
                                @endif
                            @endif
                        <!-- #case 2 - pre-recorded video is a Free View, it's missing subscription or it is not set -->

                    {{--@endif (ending)--}}
                    {{--deals with pre-recorded videos display logic --}}
                    
                    {{--deals with upcoming videos display logic --}}
                    @elseif(isset($currentUpcomingVideo) && $currentUpcomingVideo->count() > 0)
                    
                        @php $video = $currentUpcomingVideo->ls_videos;  @endphp

                        <video id="upcoming-video-live-video" loop autoplay muted poster="{{$video->thumbnail}}" style="width:100%!important; object-fit: fill;max-height:720px !important;" oncontextmenu="return false;" loop playsinline controls preload="metadata" controlsList="nodownload noremoteplayback" style="border:2px solid red !important;">
                            <!-- <source src="{{$currentUpcomingVideo->video_path}}" id="upcoming-video-live-video-src" type="video/mp4"> -->
                            <source src="" id="upcoming-video-live-video-src" type="video/mp4">
                        </video>
    
                        <div id="upcoming-video-live-video-img" class="img-containercustom container p-0" style="display:none;position:relative;"> 
                            <img id="upcoming-video-live-video-img" style="display:none;margin:0 !important;" class="container" src="{{$video->thumbnail}}">
                            <button id="playBtn" class="btn23" style="display:none" onclick='getMessage()'>
                                <i class="fa fa-play text-red"></i>
                            </button>
                        </div>
            
                        <button id="playBtn" class="btn23" style="display:none" onclick='getMessage()'>
                            <i class="fa fa-play text-red"></i>
                        </button>
                    {{--@endif (ending)--}}
                    {{--deals with upcoming videos display logic --}}

                    {{--deals with when there is no video to display logic --}}
                    @else
                        @php 
                            $novideodisplaythumbnail = "https://verity-tv-storage.s3-accelerate.amazonaws.com/video-thumbnail/9E3KRs1b42V5Z4u9kMOavoXsTeIqhLq1KdRveXFm.jpg"; 
                        @endphp
                        <video poster="{{$novideodisplaythumbnail}}" id="upcoming-video-live-video" style="width:100%!important; object-fit: contain;" oncontextmenu="return false;" loop playsinline controls preload="metadata">
                            <source src="" id="upcoming-video-live-video-src" type="video/mp4">
                        </video>
                    @endif
                    {{--deals with when there is no video to display logic --}}
                </div>
            <!-- videos display section -->
        </div>

        <div class="bg-gray-1100 space-1" style="margin-top:-40px;">
            <div class="bg-gray-1100 space-1">
                <div class="container mx-auto px-md-6 px-xl-7 px-wd-6 pb-3 pt-1">
                    <div class="pb-2">
        
                        <div class="tv-programs border-g-1200-op mb-1 pb-3">
                            @if(Route::is('front.livebroadcastvideos_partial'))
                            @php $date = (isset($_GET['date'])) ? $_GET['date'] : ''; @endphp
                            <form class="select-date d-none d-xl-inline-block position-relative mb-3"
                                action="{{ url('dp/live-broadcast-test') }}" method="GET">
                                <input type="text" autocomplete="off"
                                    class="daterange m-0 py-2 pl-3 font-size-10 w-180rem bg-transparent" name="date"
                                    value="{{ $date }}" placeholder="Select Date" />
                                <button class="btn bg-white py-1 ml-2 text-uppercase" type="submit"
                                    name="submit">SUBMIT</button>
                            </form>
                            <form class="select-date d-inline-block d-xl-none position-relative mb-3"
                                action="{{ url('mb/live-broadcast-test') }}" method="GET">
                                <input type="text" autocomplete="off"
                                    class="daterange m-0 py-2 pl-3 font-size-10 w-180rem bg-transparent" name="date"
                                    value="{{ $date }}" placeholder="Select Date" />
                                <button class="btn bg-white py-1 ml-2 text-uppercase" type="submit"
                                    name="submit">SUBMIT</button>
                            </form>
        
                            @endif
                            @if(count($all_program_lineups) > 0)
                            <div class="home-section mb-3 displaychannelssection" id="sports">
                                <div class="font-size-20 font-weight-bold mb-3 mx-0 text-golden font-secondary d-none"
                                    style="display:none !important;">
                                    Broadcast channels
                                </div>
                                <div class="gird-view-videos w-100 displaychannelshousesection d-none"
                                    style="display:none !important;">
                                    @if(isset($livebroadcastchannels))
                                    @foreach($livebroadcastchannels as $channel)
                                    <div class="item landscape-type-item mx-2 displaychannelitem"
                                        onclick="fetchLiveBroadcasts({{$channel->id}}, 1)">
                                        <div class="featured_img height-150 img-container mb-2 product displaychannelitem-img">
                                            <img class="" src="{{$channel->channel_thumbnail}}" alt="Image-Description">
                                            <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>
                                                            {{$channel->channel_name}}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    @endif
                                </div>
        
                                <header id="current_news"
                                    class="mt-2 d-md-flex align-items-center justify-content-between mb-5 w-100 pt-5">
                                    <div
                                        class="font-size-15 font-weight-bold mb-3 mb-md-0 text-golden font-secondary channels-programs-title">
                                        @if(isset($activebroadcastchannel) && !empty($activebroadcastchannel))
                                        Program Lineup - {{ $activebroadcastchannel->channel_name }}
                                        @else
                                        Program Lineup
                                        @endif
        
                                    </div>
                                    <div class="d-none d-lg-block border-top col p-0 mx-3 border-gray-6830"></div>
                                </header>
                            </div>
                            @endif
                            <div class="tab-content">
                                <div class="row no-gutters">
                                    <style>
                                        .vedio_symbol {
                                            width: 100%;
                                            justify-content: left;
                                            top: 20%;
                                            left: 50%;
                                            font-size: 13px;
                                        }
        
                                        .pagination {
                                            font-family: 'Merriweather', serif;
                                            display: inline-flex;
                                        }
        
                                        a.page-link {
                                            font-family: 'open sans', sans-serif;
                                            font-weight: 400 !important;
                                            font-size: 18px !important;
                                        }
        
                                        .pagination li a.page-link:hover {
                                            background: #DFA326;
                                            border-radius: 15% !important;
                                        }
        
                                        .pagination li:first-child a.page-link:hover {
                                            background: #DFA326;
                                            border-radius: 15% !important;
                                        }
        
                                        .pagination li:last-child a.page-link:hover {
                                            background: #DFA326;
                                            border-radius: 15% !important;
                                        }
        
                                        .pagination li a.page-link {
                                            color: #fff !important;
                                            background-color: transparent;
                                            font-size: 22px;
                                            font-weight: 600;
                                            line-height: 38px;
                                            height: 40px;
                                            width: 40px;
                                            padding: 0;
                                            margin: 0 5px;
                                            border: none;
                                            border-radius: 50%;
                                            display: block;
                                            overflow: hidden;
                                            position: relative;
                                            z-index: 1;
                                            transition: all 0.5s ease 0.2s;
                                        }
        
                                        .pagination li a.page-link:focus,
                                        .pagination li.active a.page-link {
                                            color: #fff !important;
                                            background: #FD1600;
                                            box-shadow: 0 0 10px -2px rgba(0, 0, 0, 0.3);
                                        }
        
                                        .pagination li:first-child a.page-link,
                                        .pagination li:last-child a.page-link {
                                            background: transparent;
                                        }
        
                                        .pagination li.disabled {
                                            cursor: not-allowed;
                                            opacity: .5;
                                        }
        
                                        .pagination li i {
                                            font-family: 'FontAwesome';
                                            font-size: 40px;
                                            color: #fff;
                                        }
        
                                        @media(max-width:767px) {
                                            .item.landscape-type-item {
                                                margin-bottom: 2vh !important;
                                            }
                                        }
                                    </style>
        
                                    <!--Dakar Daily Section Start-->
                                    @if(isset($all_program_lineups))
                                    <!--Dakar Daily Section Start-->
                                    <div class="w-100">
                                        <div class="border-g-1200-op mb-1">
        
                                            <div>
                                                <div class="dark">
                                                    @if(isset($all_program_lineups))
                                                    @if(isset($display_device) && $display_device === "mb")
                                                    @php
                                                    $groupedVideos = $all_program_lineups->chunk(3);
                                                    @endphp
                                                    @elseif(isset($display_device) && $display_device === "dp")
                                                    @php
                                                    $groupedVideos = $all_program_lineups->chunk(9);
                                                    @endphp
                                                    @else
                                                    @php
                                                    $groupedVideos = $all_program_lineups->chunk(5);
                                                    @endphp
                                                    @endif
                                                    <div class="col-lg-12 px-2">
                                                        <div class="row mx-n2 media-wrap-row-video-section">
                                                            @foreach($groupedVideos as $group)
                                                            <div
                                                                class="gird-view-videos w-100 live-broadcast-related-videos-section">
        
                                                                @foreach($group as $videoitem)
        
                                                                @if($videoitem->ls_videos)
                                                                @php $item = $videoitem->ls_videos; @endphp
                                                                <div
                                                                    class="item landscape-type-item live-broadcast-related-videos-section-video-container">
                                                                    <div
                                                                        class="featured_img height-150 img-container mb-2 product">
                                                                        <img class="img-fluid img-news image"
                                                                            src="{{$item->thumbnail}}" alt="Image-Description">
        
                                                                        <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($videoitem->date)->format('d
                                                                                    M, Y')}}
                                                                                    ({{\Carbon\Carbon::parse($videoitem->start_time)->format('H:i')}}
                                                                                    -
                                                                                    {{\Carbon\Carbon::parse($videoitem->end_time)->format('H:i')}})
                                                                                    @if(isset($item->getRating->image))
                                                                                    <img style="height: 18px!important; width:auto!important; float:rigth!important; vertical-align:middle; display:inline;"
                                                                                        src="{{url('ratings'.'/'.$item->getRating->image)}}">
                                                                                    @endif
                                                                                    @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&nbsp;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>
                                                                    </div>
                                                                </div>
                                                                @else
                                                                @php
                                                                $item = $videoitem;
                                                                $streamthumbnail =
                                                                "https://verity-tv-storage.s3-accelerate.amazonaws.com/video-thumbnail/{$item->thumbnail}";
                                                                @endphp
                                                                <div
                                                                    class="item landscape-type-item live-broadcast-related-videos-section-video-container">
                                                                    <div
                                                                        class="featured_img height-150 img-container mb-2 product">
                                                                        <img class="img-fluid img-news image"
                                                                            src="{{ $streamthumbnail }}"
                                                                            alt="Image-Description">
        
                                                                        <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->getRating->image))
                                                                                    <img style="height: 18px!important; width:auto!important; float:rigth!important; vertical-align:middle; display:inline;"
                                                                                        src="{{url('ratings'.'/'.$item->getRating->image)}}">
                                                                                    @endif
                                                                                    @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&nbsp;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>
                                                                    </div>
                                                                </div>
                                                                @endif
                                                                @endforeach
                                                            </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                    {{-- pagination links --}}
                                                    <div class="d-flex justify-content-center flex-wrap mt-5 d-none">
                                                        <div class="live-broadcast-related-videos-section-pagination">
                                                            <button class="live-broadcast-related-videos-section-arrow"
                                                                id="live-broadcast-related-videos-section-prevPage" disabled>
                                                                ← <span
                                                                    class="live-broadcast-related-videos-section-nav-text">PREV</span>
                                                            </button>
                                                            <div
                                                                class="live-broadcast-related-videos-section-custom-pagination">
                                                                @foreach($groupedVideos as $group)
                                                                @if($loop->first)
                                                                <div
                                                                    class="live-broadcast-related-videos-section-page-number live-broadcast-related-videos-section-active ">
                                                                    {{ $loop->iteration }}</div>
                                                                @else
                                                                <div class="live-broadcast-related-videos-section-page-number"
                                                                    onclick="testfunc1y()">{{ $loop->iteration }}</div>
                                                                @endif
                                                                @endforeach
                                                            </div>
                                                            <button class="live-broadcast-related-videos-section-arrow"
                                                                id="live-broadcast-related-videos-section-nextPage">
                                                                <span
                                                                    class="live-broadcast-related-videos-section-nav-text">NEXT</span>
                                                                →
                                                            </button>
                                                        </div>
                                                    </div>
                                                    {{-- pagination links --}}
                                                    @endif
        
                                                    <style>
                                                        /* temporary styling here - will move later */
                                                        .live-broadcast-related-videos-section {
                                                            border: none !important;
                                                        }
        
                                                        .live-broadcast-related-videos-section-pagination {
                                                            display: flex;
                                                            align-items: center;
                                                            justify-content: center;
                                                        }
        
                                                        .live-broadcast-related-videos-section-custom-pagination {
                                                            text-align: center;
                                                            margin-top: 0;
                                                            display: flex;
                                                            align-items: center;
                                                            justify-content: center;
                                                        }
        
                                                        .live-broadcast-related-videos-section-pages {
                                                            display: flex;
                                                            align-items: center;
                                                            justify-content: space-between;
                                                            max-width: 100%;
                                                            width: 200px;
                                                        }
        
                                                        .live-broadcast-related-videos-section-page-number {
                                                            cursor: pointer;
                                                            background-color: #DFA326;
                                                            color: #111111;
                                                            border-radius: 5px;
                                                            height: 30px;
                                                            width: 30px;
                                                            margin: 0 5px;
                                                            display: flex;
                                                            align-items: center;
                                                            justify-content: center;
                                                            transition: 0.4s ease;
                                                        }
        
                                                        .live-broadcast-related-videos-section-active {
                                                            font-size: 1.3em;
                                                            height: 30px;
                                                            width: 30px;
                                                            background-color: #0057b3;
                                                            color: white;
                                                        }
        
                                                        .live-broadcast-related-videos-section-arrow {
                                                            width: 120px;
                                                            padding: 8px 16px;
                                                            background-color: #ffffff00;
                                                            color: #0057b3;
                                                            border: none;
                                                            cursor: pointer;
                                                            margin: 0 5px;
                                                            display: flex;
                                                            align-items: center;
                                                            justify-content: space-between;
                                                        }
        
                                                        .live-broadcast-related-videos-section-arrow:hover {
                                                            color: #0056b3;
                                                        }
        
                                                        .live-broadcast-related-videos-section-arrow:disabled {
                                                            background-color: #ffffff00;
                                                            color: #ccc;
                                                            cursor: not-allowed;
                                                        }
        
                                                        #live-broadcast-related-videos-section-prevPage {
                                                            margin-right: 20px;
                                                        }
        
                                                        #live-broadcast-related-videos-section-nextPage {
                                                            margin-left: 20px;
                                                        }
        
                                                        .live-broadcast-related-videos-section-arrow {
                                                            font-size: 1.2em;
                                                        }
        
                                                        .live-broadcast-related-videos-section-nav-text {
                                                            font-size: 0.7em;
                                                            letter-spacing: 0.3em;
                                                        }
                                                    </style>
        
        
                                                </div>
                                            </div>
        
        
                                        </div>
                                    </div>
                                    <!--Dakar Section End-->
                                    @endif
                                    <!--Dakar Section End-->
        
                                </div>
                            </div>
        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <!--Main_Slider-->
</main>
<!-- Main page -->


<!-- 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 video</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 -->

<input type="hidden" id="view-device-input" value="{{ $display_device }}">
@endsection

@section('custom-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>
<!--<script src="https://kit.fontawesome.com/7368c40b21.js" 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/script.js') }}"></script>
<!-- jsSocials scripts -->

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
{{-- //auto play upcoming video, checking every time --}}
<script>

// Wait for the entire page to load
document.addEventListener("DOMContentLoaded", function () {
    // Hide the loader
     document.querySelector('#vid-loader-preloader').style.display ="none";
});


//auto-reload function for new videos or live stream events
setInterval(function() {
    var channel_id_input = document.getElementById('channel_id_input').value;
    
    $.ajax({
        type: "GET",
        url: `/ajax/checkUpcomingVideoExtended/${channel_id_input}`,
        success: function(data) {
            
           data == '##' ? location.reload() : null; 
        }
    });

}, 1000);


//set the activePageChannel
let pageActiveChannel;

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");

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


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

function getMessage() {
   
    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;
}

}




// ol auto-register view function
// setInterval(function() {
//     var vid1 = document.getElementById("upcoming-video-live-video");


//     if ((vid1.duration / 2 < vid1.currentTime) && (isViewUploded == false)) {
//         isViewUploded = true
//         $.ajax({
//             type: "GET",

//             url: "{{route('front.uploadVideoView', '')}}" + "/" + currentVideoId,
//             success: function(data) {

//             }
//         });
//     }

// }, 1000);


//new view register function

//set counter for VD & LS views
var sites               = {!!$videoForwordTime!!};
var currentVideoId      = {!!$currentVideoId!!};

var vidCounter          = 0;
var lsVidDuration       = {!!$livestreamingevents_duration!!};
var lsVidId             = {!!$livestream_video_id!!};


//increment vid counter function
function incrementVidCounterDuration(){
    vidCounter++;
}


//increment vidCounterDuration every second as long as the video is playing
setInterval(function() {

    var vdVid = document.getElementById("upcoming-video-live-video");
    var lsVid  = document.getElementById("my-video");
    var videoType = "undefined";

    //set whether video is VD or LS
    videoType = vdVid ? "VD" : (lsVid ? "LS" : undefined);

    //logic for if video is VD
    if(videoType == "VD") {
        
        //increment video view counter
        !vdVid.paused && incrementVidCounterDuration();
         
        //check if video view counter is on/past 80% of video duration
        if (vidCounter >= 0.8 * vdVid.duration) {
            $.ajax({
                type: "GET",
    
                url: "{{route('front.uploadVDVideoView', '')}}" + "/" + currentVideoId,
                success: function(data) {

                    //(video view registered, reset video view counter)
                    vidCounter = 0;
                }
            });
        }

    } 
    else if(videoType == "LS") {

        var videoObj = videojs("my-video");

        //USING .paused() function of videojs, if not paused, increment video view counter
        !videoObj.paused() && incrementVidCounterDuration();
       
        //check if ls video view counter is on/past 80% of ls video duration
        if (vidCounter >= 0.8 * lsVidDuration) {
            $.ajax({
                type: "GET",
    
                url: "{{route('front.uploadLSVideoView', '')}}" + "/" + lsVidId,
                success: function(data) {

                    //(LS video view registered, reset video view counter)
                    vidCounter = 0;
                }
            });
        }
    }

}, 1000);
//new view register function
</script>

<script>

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

        //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 type="text/javascript">
//pagination functions
const pages = document.querySelectorAll(".live-broadcast-related-videos-section");
const pageNumbers = document.querySelectorAll(".live-broadcast-related-videos-section-page-number");
const prevButton = document.getElementById("live-broadcast-related-videos-section-prevPage");
const nextButton = document.getElementById("live-broadcast-related-videos-section-nextPage");
let currentPage = 0;
                
function showPage(pageNumber) {
    pages.forEach((page, index) => {
        if (index === pageNumber) {
            page.style.display = "block";
        } else {
            page.style.display = "none";
        }
    });
}

function updateButtons() {
    prevButton.disabled = currentPage === 0;
    nextButton.disabled = currentPage === pages.length - 1;
}

function setActive() {
    pageNumbers.forEach((page, index) => {
        if(currentPage === index) {
            page.classList.add("live-broadcast-related-videos-section-active");
        } else {
            page.classList.remove("live-broadcast-related-videos-section-active");
        }
    });
}
            
pageNumbers.forEach((page, index) => {
    page.addEventListener("click", function () {
        showPage(index);
        currentPage = index;
        updateButtons();
        setActive();
    });
});
            
prevButton.addEventListener("click", function () {
    if (currentPage > 0) {
        currentPage--;
        showPage(currentPage);
        updateButtons();
        setActive();
    }
});

nextButton.addEventListener("click", function () {
    if (currentPage < pages.length - 1) {
        currentPage++;
        showPage(currentPage);
        updateButtons();
        setActive();
    }
});
            
showPage(currentPage);
updateButtons();


//read more/less 
var elementexists = false;
 
// Retrieve the <videodescription> element by class name
var videoDescriptionElement = document.querySelector('.video-description');

// Check if the element is found
if (videoDescriptionElement) {
    
      var videoDescriptionText = $(".video-description").text();
    
      // Find the first <p> element inside .video-description
      var firstParagraph = videoDescriptionElement.querySelector('p:first-of-type');
    
      // Check if the first <p> element is found
      if (firstParagraph) {
    
         elementexists = true;
         
        // Append the class 'readmoreptext' to the first <p> element
        firstParagraph.classList.add('readmoreptext');
        
      } else {
      
       
        
      // Create a new <p> element with the specified class and set the text content
    // var paragraphElement = $("<p>").addClass("readmoreptext").text(videoDescriptionText);
    var paragraphElement = `<p class='readmoreptext'>${videoDescriptionText}</p>`;
    
    // Additional HTML content
    var additionalHtml1 = "<input id='read-more-checkbox' type='checkbox' class='read-more__checkbox' aria-hidden='true'>";
    var additionalHtml2 = "<label for='read-more-checkbox' id='readmoretextid' class='read-more__label' data-read-more='Read more' data-read-less='See less' aria-hidden='true'></label>";

    // Concatenate the HTML strings
    var combinedHtml = additionalHtml1 + paragraphElement + additionalHtml2;

    // Append the <p> element to the document body or any other container
    $(".video-description").html(combinedHtml);
      //document.getElementById('readmoretextid').style.display = "none";
  }
}

if(elementexists == true){
    var isTruncated = isTextTruncated(paragraphElement);
    if (isTruncated == false) {
        document.getElementById('readmoretextid').style.display = "none";
    }
}

function isTextTruncated(element) {
    return element.scrollHeight > element.clientHeight;
}


//add ripple effect to button when clicked
$(".copy-link-section-btn").click(function() {
  $(this).addClass('clickedbtn1');
  setTimeout(() => {
    $(this).removeClass('clickedbtn1');
  }, 1000);
});

    
//copy link 
function copyLink() {
     var pageUrl = window.location.href;
     
    // Get the text field
    var copyTextInput = document.getElementById("cpLinkInput");
    copyTextInput.value = pageUrl;

    // Select the text field
    copyTextInput.select();
    copyTextInput.setSelectionRange(0, 99999); // For mobile devices

    // Copy the text inside the text field
    navigator.clipboard.writeText(copyTextInput.value);
    
    // Alert the user
   $("#copy-link-button-text").text("Link Copied!");
}
</script>
@endsection