@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->video @endphp
        <meta property="og:description" content="{{ trim(strip_tags($video->description)) }}">
        <meta property="og:image" content="{{$video->landscape_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->landscape_thumbnail}}">
    @elseif(isset($currentUpcomingVideo[0]))
        @php $video = $currentUpcomingVideo[0]->video @endphp
        <meta property="og:description" content="{{ trim(strip_tags($video->description)) }}">
        
        <meta property="og:image" content="{{$video->landscape_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->landscape_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: 75px !important;*/
            /*height:50px !important;*/
             width: 90px !important;
            height:50px !important;
            /*border:2px solid gold !important;*/
             position:absolute;
            top:0;
            right:10px;
        }
        
        .live_streaming_btn_section_2{
            /*width: 75px !important;*/
            /*height:50px !important;*/
            width: 90px !important;
            height:80px !important;
            /*border:2px solid gold !important;*/
             position:absolute;
            top:55px;
            right:10px;
        }
    }
    
    @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;
        }
    }
    
    @media (min-width : 992px) {
        .live_streaming_btn_section{
            /* original width: 150px; */
            width: 180px !important;
            height:100px !important;
            /*border:2px solid gold !important;*/
             position:absolute;
            top:0;
            right:10px;
        }
        
        .live_streaming_btn_section_2{
            /* original width: 150px; */
            width: 180px !important;
            height:100px !important;
            /*border:2px solid gold !important;*/
             position:absolute;
            top:0;
            right:200px;
        }
    }
    
    .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;
    }
    
    /* @media (max-width:1024px)
        {
            .slide-image{
                width: 300px!important;
                height: 150px!important;
            }
        } */
        
        
    /* 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 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;
        }
    }
</style>
@endsection
@section('content')

<div id="vid-loader-preloader"> <div class="custom-loading-spinner"></div> </div>
<div id="error-500-view" style="display:none;"> 
    <div class="flex-container">
      <div class="text-center">
        <h1 class="err-500-view-h1">
          <span class="fade-in" id="spndigit1">5</span>
          <span class="fade-in" id="spndigit2">0</span>
          <span class="fade-in" id="spndigit3">0</span>
        </h1>
        <h3 class="fadeIn err-500-view-h3">INTERNAL SERVER ERROR</h3>
        <button type="button" name="button"class="err-500-view-btn"> <a href="{{ route('home') }}"> Return To Home </a> </button>
      </div>
    </div>
</div>

<main id="js-livebroadcasts-partial-target" class="main-content-partial-section">
   <!--Main_Slider-->
    <div class="bg-gray-1100 pt-80">
        {{-- test place --}}
            <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 channels
                </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 channels
                   
                </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>
    </div>
        {{-- for mobile --}}
</div>
         <div class="container mx-auto px-md-6 px-xl-7 px-wd-6">
              {{--check for live events --}}
              @if(isset($livestreamingevents) ) 
                  @if($livestreamingevents->count() > 0)
                      <input type="hidden" id="lst-presence-on-off" value="on">
                       @php 
                          $streamprotocol = "https";
                          $streamprotocolconnector = "://";
                          $streamserver = "verityplus.live/";
                          $streampath = "hls/";
                          $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}{$streamchannel}/{$streamkey}{$streamformat}"; 
                        @endphp 
                        
                          
                      
                      <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="https://verityplus.live/hls/streamchannel2/veritystreamchannel2.m3u8" type="application/vnd.apple.mpegurl" />--}}
                            <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
                            });
                   
                    </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>
                      </div>
                      
                      <h6 class="text-white font-weight-semi-bold font-secondary category-page-subtitle-slide 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->start_time}}</li>
                          <li>
                              @if(isset($livestreamingevents->getRating))
                                  <img id="gt_rating_img" style="height: 40px!important;
                                  width: auto!important; margin-top:-10px;
                                  " src="{{url('ratings'.'/'.$livestreamingevents->getRating->image)}}">
                              @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>
                      
                  @endif
              @else
              <input type="hidden" id="lst-presence-on-off" value="off">
              {{--continue with normal exec logic--}} 
              @if(isset($currentUpcomingPlayingVideo))
              @php $video = $currentUpcomingPlayingVideo->video; @endphp
               
              <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>
          <!-- <input class="btn" type="button" value="Replace Message" onclick='getMessage()'> -->
          

          @elseif(isset($currentUpcomingVideo[0]))
              @php $video = $currentUpcomingVideo[0]->video; @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;">

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

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

              @endif

              <!-- <source src="{{$currentUpcomingVideo[0]->video_path}}" id="upcoming-video-live-video-src" type="video/mp4"> -->
          </video>
          <!-- <div class="container" > -->
          
          <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>
          
          <!-- <input class="btn" type="button" value="Replace Message" onclick='getMessage()'> -->
          <button id="playBtn" class="btn23" style="display:none" onclick='getMessage()'>
              <i class="fa fa-play text-red"></i>
          </button>

          @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
          
          @if(isset($video))
          
              <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>
                  
                  
              </div>
              
              <h6 class="font-size-24 text-white font-weight-semi-bold 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>
                      @if(isset($video->getRating->image))
                          <img id="gt_rating_img" style="height: 40px!important;
                          width: auto!important; margin-top:-10px;
                          " src="{{url('ratings'.'/'.$video->getRating->image)}}">
                      @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
              @endif
          </div>
    </div>
    <!--end-->
    {{-- slider end--}}
    <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($videos)!= 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">
                                {{-- @if(isset($videos))
                                        @foreach($videos as $item)
                                            <div class="col-6 col-lg-2 pr-0" style="float: left;">
                                                <div class="img-container mb-2 product media-scale-transform">
                                                    <a href="{{route('front.singleVideoPage', $item->slug)}}" onclick="return false;">
                                <img class="img-fluid img-news" src="{{url('video-thumbnail')}}/{{$item->thumbnail}}" alt="Image-Description">
                                <p class="video-title-without-hover">
                                    <i class="fa fa-play"></i> {{$item->title}}
                                </p>
                                <div class="overlay">
                                    <span style="bottom:0;">
                                        <div class="content_play">
                                            <div class="content-title text-light-white-1300 font-size-11">
                                                <i class="fa fa-play" aria-hidden="true"></i>
                                                {{$item->title}}
                                            </div>
                                            <p class="video-subtitle">{{Str::words($item->sub_title,6)}}</p>
                                        </div>
                                        <div class="description text-light-white-1300 font-size-11 pt-2">
                                            {{\Carbon\Carbon::parse($item->date)->format('d M, Y')}}
                                          
                                            
                                        </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
                                    </span>
                                </div>
                                </a>
                            </div>
                        </div>
                        @endforeach
                        @endif --}}
                                              <style>

    .vedio_symbol {
        width: 100%;
        justify-content: left;
        top: 20%;
        left: 50%;
        font-size: 13px;

    }

    /* .live-broadcast-subscription-or-free-button
    {
        margin-top:4px;
    } */

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

/* .page-item:last-child .page-link :hover{
background-color:red;
 background: red!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-color: transparent; */
        background: #DFA326;
        border-radius: 15%!important;
    }
    .pagination li a.page-link{
        color: #fff !important;
        /* background: transparent; */
         /* background: #000; */
         background-color: transparent;
        font-size: 22px;
        font-weight: 600;
        line-height: 38px;
        height: 40px;
        width: 40px;
        /* font-family: "Merriweather', serif" */
        padding: 0;
        margin: 0 5px;
        border: none;
        /* border-radius: 50%; */
        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-color: transparent; */
        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->video)
                                            @php $item = $videoitem->video; @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>
  </div>
</main>
<!-- 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 type="text/javascript" src="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials.min.js"></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";
    });
   
   //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");

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

    vid.currentTime += sites
    var curplaytime = vid.currentTime;
    
    console.log('sites' + sites)
    console.log('curplaytime' + curplaytime)

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

    };

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

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

        }, false);


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

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


    };

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

        // }, false);
        var enddatetime = new Date().getTime();
        var difference = enddatetime - startdatetime
        difference = Math.floor((difference) / (1000));
        vid.style.display = 'block';
        vidImg.style.display = 'none';
        playBtn.style.display = 'none';
        vid.play()
        vid.currentTime += difference;
    }

    setInterval(function() {
        var channel_id_input = document.getElementById('channel_id_input').value;
        
        $.ajax({
            type: "GET",
            url: `/ajax/checkUpcomingVideoExtended/${channel_id_input}`,
            success: function(data) {
                console.log(`here is your data: ${data}`);
                if (data != '#') {
                    $('#upcoming-video-live-video-src').attr('src', data.video_path);
                    var video = $('#upcoming-video-live-video')[0];
                    video.load();
                    video.play();

                }
                if (data == '##') {
                    $('#upcoming-video-live-video-src').attr('src', '');
                    var video = $('#upcoming-video-live-video')[0];
                    video.load();
                    video.play();
                    location.reload();
                }
                if (data == 'lv#started') {
                    location.reload();
                }
                if (data == 'lv#ended') {
                    location.reload();
                }
            }
        });

    }, 1000); //time in milliseconds


    setInterval(function() {
        var vid1 = document.getElementById("upcoming-video-live-video");
        console.log('duration'+vid1.duration / 2)
        console.log('play time'+vid1.currentTime)

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

                url: "{{route('front.uploadVideoView', '')}}" + "/" + currentVideoId,
                success: function(data) {
                    console.log('datadatadata  live if' + data);

                }
            });
        }

    }, 1000);


</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");
    console.log(`here are your total pages : ${pages.length}`);
    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');
    //console.log(videoDescriptionElement);
    
    // Check if the element is found
    if (videoDescriptionElement) {
        
        var videoDescriptionText = $(".video-description").text();
        
        console.log(`here is the db retrieved text ${videoDescriptionText}`);
        
      // Find the first <p> element inside .video-description
      var firstParagraph = videoDescriptionElement.querySelector('p:first-of-type');
      //console.log(firstParagraph);
    
      // Check if the first <p> element is found
      if (firstParagraph) {
         //console.log('element found!');
         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); 

          console.log('element not found 222!'); 
          //document.getElementById('readmoretextid').style.display = "none";
      }
    }

    if(elementexists == true){
        console.log("element exists");
        var isTruncated = isTextTruncated(paragraphElement);
        if (isTruncated == false) {
            document.getElementById('readmoretextid').style.display = "none";
        }
    } else {  console.log("element doesn't exist"); }
    
    // Access the <p> element inside the <videodescription> element
    // var paragraphElement = document.querySelector('.readmoreptext');
    // console.log(paragraphElement);
    
    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