@extends('front.layout-ref')

@section('csrf_token')
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection

@section('custom_og_meta')
@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))
    @php    $video = $currentUpcomingVideo->ls_videos @endphp
    <meta property="og:description" content="{{ trim(strip_tags(optional($video)->description)) }}">

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

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

    <meta name="twitter:image" content="{{optional($video)->thumbnail}}">
@endif
@endsection

@section('ls_scripts')
<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>
@endsection

@section('content')
<style>
    .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;
    }

    .video-description,
    .video-description div,
    .video-description p {
        color: #F4F4F4 !important;
        font-size: 12px;
    }

    video::-webkit-media-controls-timeline,
    video::-webkit-media-controls-current-time-display,
    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;
        }
    }

    .nav-meta {
        font-size: .933rem
    }

    .nav-meta li+li::before {
        content: '|';
        padding: 0 10px
    }

    .nav-meta li+li::before {
        content: '|';
        padding: 0 10px
    }

    /* iPads (landscape) ----------- */
    @media (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 (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 (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 (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;
    }

    .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 */

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



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

        .modal-content {
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

        .copy-link-section-btn {
            width: 70px;
            height: 70px;
            border-radius: 100%;
            background-color: ghostwhite !important;
        }

        .copy-link-section-btn i {
            font-size: 2em;
            color: rgba(0, 0, 0, .7);
        }

        .copy-link-section-btn:hover,
        .copy-link-section-btn:active,
        .copy-link-section-btn:focus {
            background-color: #DFA326 !important;
        }

        .clickedbtn1 {
            box-shadow: 0 0 0 8px transparent;
            animation: pulse1 1s;
            animation-iteration-count: 4;
        }

        @keyframes pulse1 {
            from {
                box-shadow: 0 0 0 0 green;
            }
        }

        .jssocials-share {
            display: block !important;
            margin-bottom: 2vh !important;
        }

        .jssocials-shares {
            display: flex;
        }

        .container .btn23 {
            padding: 5px 20px !important;
            font-size: 2em !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;
    }



    .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 */

    .vjs-big-play-button {
        top: calc(50% - 0.8em) !important;
        left: calc(50% - 1.5em) !important;
    }

    @media (max-width:576px) {
        .sm-cs-container {
            padding-left: 0px !Important;
            padding-right: 0px !Important;
        }

        .live_streaming_layout_placement,
        .category-page-subtitle-slide text-white,
        .cs-nav-meta,
        .video-description {
            padding-left: 10px !Important;
            padding-right: 15px !Important;
        }

        video {
            width: 100% !important;
            height: 30vh !important;
        }

        .my-video-dimensions {
            width: 100%;
            height: 30vh !Important;
        }

        .my-video-dimensions.vjs-fluid {
            padding-top: 0% !important;
        }

    }

    @media(min-width:576px) {
        .custom-mb-btn-placement-block {
            display: none !important;
        }
    }

    @media only screen and (min-width: 577px) and (max-width:768px) {
        #my-video {
            width: 100% !important;
            height: 40vh !important;
        }
    }

    @media only screen and (min-width: 769px) and (max-width:991px) {
        #my-video {
            width: 100% !important;
        }
    }

    @media only screen and (min-width: 992px) and (max-width:1199px) {
        #my-video {
            width: 100% !important;
        }
    }

    @media(min-width:1200px) {
        #buy_sub_mob_view_btn {
            display: none !important;
        }
    }

    @media(max-width:575px) {
        .category-page-subtitle-slide text-white-custom-mb-title {
            margin-top: 6vh !important;
        }

        .live-broadcast-related-videos-section-page-number {
            height: 25px !important;
            width: 25px !important;

        }

        .live-broadcast-related-videos-section-active {
            font-size: 0.7em !important;
            height: 27px !important;
            width: 27px !important;
        }

    }

    @media(min-width:576px) {
        .com_soon-dp-btn {
            transform: translateX(0) !important;
        }
    }

    .img-rating-specific-block text-white {
        transform: translateY(-5px) !important;
    }

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

    /* 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: 0.7em;
        height: 30px;
        width: 30px;
        background-color: #0057b3;
        color: white;
    }



    .live-broadcast-related-videos-section-arrow {
        background-color: #ffffff00;
        color: #0057b3;
        border: none;
        cursor: pointer;
    }

    .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: 12px;
        }

        #live-broadcast-related-videos-section-nextPage {
            margin-left: 12px;
        } */

    .live-broadcast-related-videos-section-arrow {
        font-size: 1em;
    }

    .live-broadcast-related-videos-section-nav-text {
        font-size: 0.7em;
        letter-spacing: 0.3em;
    }

    /*styling the live streaming thumbnail to fill thw whole video width container 100% */
    .vjs-poster {
        background-size: cover !important;
        background-position: center !important;
    }

    /*styling the live streaming thumbnail to fill thw whole video width container 100% */


    @media(min-width:992px) {
        .orientation-message-block {
            display: none !important;
        }
    }

    @media(orientation: portrait) {
        .orientation-message-block {
            display: none !important;
        }
    }

    @media (orientation: landscape) and (max-width: 991px) {
        .orientation-message-block {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: #dfa326;
            z-index: 999999999999;
            /* Set a higher value for the z-index */

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .orientation-message-block h2 {
            color: #ffffff !important;
            font-size: 1.5em;
            font-weight: 700 !important;
        }
    }
</style>
<style>

    @media(min-width: 1200px) {

        .my-video-dimensions {
           width: 100% !important;
           height: 720px !important;
         }
   
         .my-video-dimensions.vjs-fluid {
           padding-top: 56.25%;
        }
      }
</style>
<main class="container-fluid main-content-ls-section py-2 py-xl-5 px-0 px-xl-3">
    <!-- channels display section -->
    <div class="container-xxl px-0 px-xl-2 py-2 pt-2 pt-xl-5 mt-xl-2" style="max-width: 1776px;">

        <!-- channel id -->
        <input type="hidden" id="channel_id_input" value="{{$activebroadcastchannel->id}}">

        <div class="channels-list-display py-0 d-block">
            <div class="channel-heading-container d-flex align-items-center p-0 m-0">
                <h4 class="h4 fw-bold channel-heading accent-color p-3 m-0">Select Channel</h4>
                <div class="border-line-div p-0 flex-fill"> </div>
            </div>

            <div class="channel-list-container p-0 mx-0 mt-0 mb-3 my-xl-0">
                <div class="container-xxl py-1 py-xl-1 px-3" style="max-width: 1776px;">
                    <div class="row p-0 px-2 m-0">
                        @isset($livebroadcastchannels)
                                            @foreach($livebroadcastchannels as $channel)
                                                                <div class="col-4 col-lg-2 p-1 p-lg-2 mb-1">
                                                                    @php 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            if ($display_device == 'mb') {
                                                                            $dp_dev = 'mb';
                                                                            $channel_thumbnail = $channel->channel_thumbnail_potrait;
                                                                        } else {
                                                                            $dp_dev = 'dp';
                                                                            $channel_thumbnail = $channel->channel_thumbnail;
                                                                        }

                                                                        ($channel->id == $activebroadcastchannel->id) ? $channel_display_class = "active-display-channel-item" : $channel_display_class = '';
                                                                    @endphp
                                                                    <a href="{{route('front.upcomingVideos', ['device' => $dp_dev, 'channelno' => "channel-$channel->id"])}}"
                                                                        class="{{$channel_display_class}} channel-display-container d-block text-decoration-none p-0 m-0 position-relative">
                                                                        <img class="w-100 h-100"
                                                                            src="@if($display_device === 'mb')  {{$channel->channel_thumbnail_potrait}} @else {{$channel->channel_thumbnail}} @endif"
                                                                            alt="{{$channel->channel_name}}">

                                                                        <div
                                                                            class="channel-details-overlay w-100 d-flex align-items-end py-3 position-absolute bottom-0">
                                                                            <div
                                                                                class="channel-details-container d-flex align-items-center px-2  text-white font-size-11">
                                                                                <i class="fa fa-play" aria-hidden="true"></i>
                                                                                <span class="ps-1">{{$channel->channel_name}}</span>
                                                                            </div>
                                                                        </div>
                                                                    </a>
                                                                </div>
                                            @endforeach
                        @endisset
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- channels display section -->

    <!-- videos display section -->
    <div class="container-xxl px-0 px-xl-2 py-0" style="max-width: 1776px;">
        {{--livestream display logic --}}
        @if(isset($livestreamingevents))
            <!-- #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 = "1677306836.rsc.cdn77.org/";
                        $streamserver = "verity.live/";
                        $streampath = "streams/hls/";
                        $streamchannel = $live_stream_creds->stream_app;
                        $streamkey = $live_stream_creds->streamkey;
                        $streamformat = ".m3u8";
                        // $streamthumbnail = "https://1309607084.rsc.cdn77.org/video-thumbnail/{$livestreamingevents->thumbnail}";
                        $streamthumbnail = $livestreamingevents->thumbnail;
                        $streamurl = "{$streamprotocol}{$streamprotocolconnector}{$streamserver}{$streampath}{$streamchannel}/{$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" class="lst-video-placement-container p-0 mx-0">
                            <video id="my-video" class="video-js" controls preload="auto"
                                data-setup='{"poster": "{{$streamthumbnail}}"}'>
                                <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" class="lst-video-placement-container p-0 mx-0">
                            <video id="my-video" class="video-js" controls autoplay preload="auto"
                                data-setup='"poster": "{{$streamthumbnail}}"}'>
                                <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="container-fluid d-flex d-sm-none p-0 m-0">
                        <div class="row py-2 px-0" style="width:100% !important;">
                            <div class="col-4 px-2 py-0 m-0 text-white d-flex align-items-center">
                                {{-- sm devices ratings badge --}}
                                @isset($livestreamingevents->getRating->image)
                                    <img class="ps-2" height="30" src="{{url('ratings' . '/' . $livestreamingevents->getRating->image)}}">
                                @endisset

                                @isset($livestreamingevents->getRating)
                                    <span class="ps-3" style="font-size:0.7em;"> {{ $livestreamingevents->getRating->description }} </span>
                                @endisset
                            </div>
                            <div class="col-4 p-0 py-0 m-0 d-flex justify-content-center align-items-center">
                                 {{-- sm devices like/dislike buttons --}}
                                
                                    <button id="like-reaction-btn" type="button" class="btn btn-primary ls-likeiconbtn-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="like">
                                        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                    </button>
                                    <button id="dislike-reaction-btn" type="button" class="btn btn-primary ls-dislikeicon-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="dislike">
                                        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                    </button>
                                
                            </div>
                            <div class="col-4 px-0 pe-1 py-0 m-0 d-flex justify-content-end">
                                  {{-- sm devices share button --}}
                                <button class="sm_ls_share_section btn btn-primary p-0 d-flex justify-content-center align-items-centerborder"  data-bs-toggle="modal" data-bs-target="#socialShareModal">
                                    <img src="{{url('front/assets/img/media-share-icon-tr.png')}}">
                                </button>
                            </div>
                        </div>
                    </div>
                   
                    <h6 class="cs-video-title fw-bold accent-color ps-2 d-block position relative">
                        {{$livestreamingevents->title}}
                    </h6>

                    <p class="p6 fw-lighter cs-video-sub-title text-white ps-2 d-block">
                        {{Str::words($livestreamingevents->sub_title)}}
                    </p>

                    <p id="vid_cat_sub_title" class="category-page-subtitle-slide text-white d-none" style="font-size:0.9em;">
                        {{Str::words($livestreamingevents->sub_title)}}
                    </p>

                    <ul
                        class="list-unstyled nav nav-meta cs-nav-meta font-secondary ps-0 pt-0 pt-sm-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap" style="font-size:0.8em;">
                        <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">
                        {{ \Carbon\Carbon::parse($livestreamingevents->date)->format('d M, Y') }}                        </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 text-white">
                            @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 text-white">
                            @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" style="color:#DFA326;"></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 = "1677306836.rsc.cdn77.org/";
                        $streamserver = "verity.live/";
                        $streampath = "streams/hls/";
                        $streamchannel = $live_stream_creds->stream_app;
                        $streamkey = $live_stream_creds->streamkey;
                        $streamformat = ".m3u8";
                        // $streamthumbnail = "https://1309607084.rsc.cdn77.org/video-thumbnail/{$livestreamingevents->thumbnail}";
                        $streamthumbnail = "$livestreamingevents->thumbnail";
                        $streamurl = "{$streamprotocol}{$streamprotocolconnector}{$streamserver}{$streampath}{$streamchannel}/{$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" class="lst-video-placement-container p-0 mx-0">
                            <video id="my-video" class="video-js" controls preload="auto"
                                data-setup='{"poster": "{{$streamthumbnail}}"}'>
                                <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-block mx-auto">
                                <a href="{{route('front.userLogin')}}" class="text-dark text-decoration-none font-size-14"> 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-block mx-auto">
                                <a href="{{route('front.getSubscription')}}" class=" text-decoration-none text-dark font-size-14"> 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-block mx-auto">
                                <a href="{{route('front.userLogin')}}" class="text-dark text-decoration-none font-size-14"> 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-block mx-auto">
                                <a href="{{route('front.getSubscription')}}" class=" text-decoration-none text-dark font-size-14"> Click to
                                    buy a subscription to view</a>
                            </button>
                        @endif

                        <div class="container-fluid d-flex d-sm-none p-0 m-0">
                        <div class="row py-2 px-0" style="width:100% !important;">
                            <div class="col-4 px-2 py-0 m-0 text-white d-flex align-items-center">
                                {{-- sm devices ratings badge --}}
                                @isset($livestreamingevents->getRating->image)
                                    <img class="ps-2" height="30" src="{{url('ratings' . '/' . $livestreamingevents->getRating->image)}}">
                                @endisset

                                @isset($livestreamingevents->getRating)
                                    <span class="ps-3" style="font-size:0.7em;"> {{ $livestreamingevents->getRating->description }} </span>
                                @endisset
                            </div>
                            <div class="col-4 p-0 py-0 m-0 d-flex justify-content-center align-items-center">
                                 {{-- sm devices like/dislike buttons --}}
                                
                                    <button id="like-reaction-btn" type="button" class="btn btn-primary ls-likeiconbtn-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="like">
                                        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                    </button>
                                    <button id="dislike-reaction-btn" type="button" class="btn btn-primary ls-dislikeicon-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="dislike">
                                        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                    </button>
                                
                            </div>
                            <div class="col-4 px-0 pe-1 py-0 m-0 d-flex justify-content-end">
                                  {{-- sm devices share button --}}
                                <button class="sm_ls_share_section btn btn-primary p-0 d-flex justify-content-center align-items-centerborder"  data-bs-toggle="modal" data-bs-target="#socialShareModal">
                                    <img src="{{url('front/assets/img/media-share-icon-tr.png')}}">
                                </button>
                            </div>
                        </div>
                    </div>
                   
                    <h6 class="cs-video-title fw-bold accent-color ps-2 d-block">
                        {{$livestreamingevents->title}}
                    </h6>

                    <p class="p6 fw-lighter cs-video-sub-title text-white ps-2 d-block">
                        {{Str::words($livestreamingevents->sub_title)}}
                    </p>

                    <p id="vid_cat_sub_title" class="category-page-subtitle-slide text-white d-none" style="font-size:0.9em;">
                        {{Str::words($livestreamingevents->sub_title)}}
                    </p>

                    <ul
                        class="list-unstyled nav nav-meta cs-nav-meta font-secondary ps-0 pt-0 pt-sm-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap" style="font-size:0.8em;">
                        <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">
                        {{ \Carbon\Carbon::parse($livestreamingevents->date)->format('d M, Y') }}                        </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 text-white">
                            @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 text-white">
                            @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" style="color:#DFA326;"></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 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 = "1677306836.rsc.cdn77.org/";
                    $streamserver = "verity.live/";
                    $streampath = "streams/hls/";
                    $streamchannel = $live_stream_creds->stream_app;
                    $streamkey = $live_stream_creds->streamkey;
                    $streamformat = ".m3u8";
                    //$streamthumbnail = "https://1309607084.rsc.cdn77.org/video-thumbnail/{$livestreamingevents->thumbnail}";
                    $streamthumbnail = "$livestreamingevents->thumbnail";
                    $streamurl = "{$streamprotocol}{$streamprotocolconnector}{$streamserver}{$streampath}{$streamchannel}/{$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" class="lst-video-placement-container p-0 mx-0">
                        <video id="my-video" class="video-js" controls preload="auto"
                            data-setup='{"poster": "{{$streamthumbnail}}"}'>
                            <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" class="lst-video-placement-container p-0 mx-0">
                        <video id="my-video" class="video-js" controls autoplay preload="auto" width="100"
                            data-setup='{"poster": "{{$streamthumbnail}}"}'>
                            <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="container-fluid d-flex d-sm-none p-0 m-0">
                        <div class="row py-2 px-0" style="width:100% !important;">
                            <div class="col-4 px-2 py-0 m-0 text-white d-flex align-items-center">
                                {{-- sm devices ratings badge --}}
                                @isset($livestreamingevents->getRating->image)
                                    <img class="ps-2" height="30" src="{{url('ratings' . '/' . $livestreamingevents->getRating->image)}}">
                                @endisset

                                @isset($livestreamingevents->getRating)
                                    <span class="ps-3" style="font-size:0.7em;"> {{ $livestreamingevents->getRating->description }} </span>
                                @endisset
                            </div>
                            <div class="col-4 p-0 py-0 m-0 d-flex justify-content-center align-items-center">
                                 {{-- sm devices like/dislike buttons --}}
                                
                                    <button id="like-reaction-btn" type="button" class="btn btn-primary ls-likeiconbtn-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="like">
                                        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                    </button>
                                    <button id="dislike-reaction-btn" type="button" class="btn btn-primary ls-dislikeicon-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="dislike">
                                        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                    </button>
                            </div>
                            <div class="col-4 px-0 pe-1 py-0 m-0 d-flex justify-content-end">
                                  {{-- sm devices share button --}}
                                <button class="sm_ls_share_section btn btn-primary p-0 d-flex justify-content-center align-items-centerborder"  data-bs-toggle="modal" data-bs-target="#socialShareModal">
                                    <img src="{{url('front/assets/img/media-share-icon-tr.png')}}">
                                </button>
                            </div>
                        </div>
                    </div>
                   
                    <h6 class="cs-video-title fw-bold accent-color ps-2 mt-3 d-block position-relative" style="margin-top:30px !important;">
                        {{$livestreamingevents->title}}
                    </h6>


                    {{-- desktop share & like/dislike sections --}}
                    <div class="container-fluid text-white p-2 m-0 position-relative d-none d-xl-flex">
                        <div class="row p-2 py-0 m-0 w-100 position-absolute text-white" style="top:-40px !important;">
                                <div class="col-4">
                                 
                                </div>
                                <div class="col-4 p-0 py-0 m-0 d-flex justify-content-center align-items-center">
                                    {{-- sm devices like/dislike buttons --}}
                                    
                                        <button id="like-reaction-btn" type="button" class="btn btn-primary ls-likeiconbtn-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="like">
                                            <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                        </button>
                                        <button id="dislike-reaction-btn" type="button" class="btn btn-primary ls-dislikeicon-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="dislike">
                                            <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                        </button>
                                </div>
                                <div class="col-4 px-0 pe-1 py-0 m-0 d-flex justify-content-end" style="padding-right:250px !important;">
                                    {{-- sm devices share button --}}
                                    <button class="sm_ls_share_section btn btn-primary p-0 d-flex justify-content-center align-items-centerborder"  data-bs-toggle="modal" data-bs-target="#socialShareModal">
                                        <img src="{{url('front/assets/img/media-share-icon-tr.png')}}">
                                    </button>
                                </div>
                        </div>
                    </div>
                    {{-- desktop share & like/dislike sections --}}

                    <p class="p6 fw-lighter cs-video-sub-title text-white ps-2 d-block">
                        {{Str::words($livestreamingevents->sub_title)}}
                    </p>

                    <p id="vid_cat_sub_title" class="category-page-subtitle-slide text-white d-none" style="font-size:0.9em;">
                        {{Str::words($livestreamingevents->sub_title)}}
                    </p>

                    <ul
                        class="list-unstyled nav nav-meta cs-nav-meta font-secondary ps-0 pt-0 pt-sm-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap" style="font-size:0.8em;">
                        <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">
                        {{ \Carbon\Carbon::parse($livestreamingevents->date)->format('d M, Y') }}                        </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 text-white">
                            @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 text-white">
                            @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" style="color:#DFA326;"></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
            {{--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')
                    desputed here

                    <!-- #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" class="upcoming-video-live-video" loop autoplay muted
                            poster="{{$video->thumbnail}}" 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 py-4 d-none">
                            <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 border-0 socialshareiconbtn-btn p-0"
                                        data-bs-toggle="modal" data-bs-target="#socialShareModal">
                                        <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" 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;color:#fff;"> {{ $video->getRating->description }} </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="container-fluid d-flex d-sm-none p-0 m-0">
                            <div class="row py-2 px-0" style="width:100% !important;">
                                <div class="col-4 px-2 py-0 m-0 text-white d-flex align-items-center">
                                    {{-- sm devices ratings badge --}}
                                    @isset($video->getRating->image)
                                        <img class="ps-2" height="30" src="{{url('ratings' . '/' . $video->getRating->image)}}">
                                    @endisset

                                    @isset($video->getRating)
                                        <span class="ps-3" style="font-size:0.7em;"> {{ $video->getRating->description }} </span>
                                    @endisset
                                </div>
                                <div class="col-4 p-0 py-0 m-0 d-flex justify-content-center align-items-center">
                                 {{-- sm devices like/dislike buttons --}}
                                
                                        <button id="like-reaction-btn" type="button" class="btn btn-primary ls-likeiconbtn-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="like">
                                            <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                        </button>
                                        <button id="dislike-reaction-btn" type="button" class="btn btn-primary ls-dislikeicon-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="dislike">
                                            <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                        </button>
                                </div>
                                <div class="col-4 px-0 pe-1 py-0 m-0 d-flex justify-content-end">
                                    {{-- sm devices share button --}}
                                    <button class="sm_ls_share_section btn btn-primary p-0 d-flex justify-content-center align-items-centerborder"  data-bs-toggle="modal" data-bs-target="#socialShareModal">
                                        <img src="{{url('front/assets/img/media-share-icon-tr.png')}}">
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <h6 class="cs-video-title fw-bold accent-color ps-2 d-flex justify-content-center align-items-center d-sm-none">
                            {{$video->title}}
                            @if(!isset($video->video_path))
                                <button id="com_soon_placement" class="btn btn-xs btn-warning">Coming Soon</button>
                            @endif
                        </h6>
                        
                        <p class="p6 fw-lighter cs-video-sub-title text-white ps-2 d-block">
                            {{Str::words($video->sub_title)}}
                        </p>
                       
                        <p id="vid_cat_sub_title" class="category-page-subtitle-slide text-white text-white" style="font-size:0.9em;">
                            {{Str::words($video->sub_title)}}
                        </p>

                        <ul
                            class="list-unstyled nav nav-meta cs-nav-meta font-secondary ps-0 pt-0 pt-sm-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap" style="font-size:0.8em;">
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">
                            {{ date('d M, Y', strtotime($video->date)) }}
                            </li>
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$video->duration}}
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$currentUpcomingPlayingVideo->start_time}}
                            </li>
                            <li id="vid_li_1" 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 text-white">
                                @if(isset($video->getRating))
                                    <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 text-white">
                                @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" style="color:#DFA326;"></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" class="upcoming-video-live-video" loop autoplay muted
                            poster="{{$video->landscape_thumbnail}}" oncontextmenu="return false;">
                            <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 py-4 d-none">
                            <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 border-0 socialshareiconbtn-btn p-0"
                                        data-bs-toggle="modal" data-bs-target="#socialShareModal">
                                        <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" 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;color:#fff;"> {{ $video->getRating->description }} </span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="container-fluid d-flex d-sm-none p-0 m-0">
                            <div class="row py-2 px-0" style="width:100% !important;">
                                <div class="col-4 px-2 py-0 m-0 text-white d-flex align-items-center">
                                    {{-- sm devices ratings badge --}}
                                    @isset($video->getRating->image)
                                        <img class="ps-2" height="30" src="{{url('ratings' . '/' . $video->getRating->image)}}">
                                    @endisset

                                    @isset($video->getRating)
                                        <span class="ps-3" style="font-size:0.7em;"> {{ $video->getRating->description }} </span>
                                    @endisset
                                </div>
                                <div class="col-4 p-0 py-0 m-0 d-flex justify-content-center align-items-center">
                                 {{-- sm devices like/dislike buttons --}}
                                
                                        <button id="like-reaction-btn" type="button" class="btn btn-primary ls-likeiconbtn-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="like">
                                            <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                        </button>
                                        <button id="dislike-reaction-btn" type="button" class="btn btn-primary ls-dislikeicon-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="dislike">
                                            <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                        </button>
                                </div>
                                <div class="col-4 px-0 pe-1 py-0 m-0 d-flex justify-content-end">
                                    {{-- sm devices share button --}}
                                    <button class="sm_ls_share_section btn btn-primary p-0 d-flex justify-content-center align-items-centerborder"  data-bs-toggle="modal" data-bs-target="#socialShareModal">
                                        <img src="{{url('front/assets/img/media-share-icon-tr.png')}}">
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <h6 class="cs-video-title fw-bold accent-color ps-2 d-flex justify-content-center align-items-center d-sm-none">
                            {{$video->title}}
                            @if(!isset($video->video_path))
                                <button id="com_soon_placement" class="btn btn-xs btn-warning">Coming Soon</button>
                            @endif
                        </h6>
                        
                        <p class="p6 fw-lighter cs-video-sub-title text-white ps-2 d-block">
                            {{Str::words($video->sub_title)}}
                        </p>
                       
                        <p id="vid_cat_sub_title" class="category-page-subtitle-slide text-white text-white" style="font-size:0.9em;">
                            {{Str::words($video->sub_title)}}
                        </p>

                        <ul
                            class="list-unstyled nav nav-meta cs-nav-meta font-secondary ps-0 pt-0 pt-sm-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap" style="font-size:0.8em;">
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">
                            {{ date('d M, Y', strtotime($video->date)) }}
                            </li>
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$video->duration}}
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$currentUpcomingPlayingVideo->start_time}}
                            </li>
                            <li id="vid_li_1" 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 text-white">
                                @if(isset($video->getRating))
                                    <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 text-white">
                                @if(isset($video->getRating))
                                    {{$video->getRating->description}}
                                @endif
                            </li>
                        </ul>

                       
                        <p id="vid_cat_sub_title" class="category-page-subtitle-slide text-white text-white" style="font-size:0.9em;">
                            {{Str::words($video->sub_title)}}
                        </p>

                        <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" style="color:#DFA326;"></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-block mx-auto">
                                <a href="{{route('front.userLogin')}}" class="text-dark text-decoration-none font-size-14"> 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-block mx-auto">
                                <a href="{{route('front.getSubscription')}}" class=" text-decoration-none text-dark font-size-14"> 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) -->

                    <!-- #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" class="upcoming-video-live-video" loop autoplay muted
                            poster="{{$video->landscape_thumbnail}}" oncontextmenu="return false;">
                            <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 d-none">
                            <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" 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>
                        
                        <div class="container-fluid d-flex d-sm-none p-0 m-0">
                            <div class="row py-2 px-0" style="width:100% !important;">
                                <div class="col-4 px-2 py-0 m-0 text-white d-flex align-items-center">
                                    {{-- sm devices ratings badge --}}
                                    @isset($video->getRating->image)
                                        <img class="ps-2" height="30" src="{{url('ratings' . '/' . $video->getRating->image)}}">
                                    @endisset

                                    @isset($video->getRating)
                                        <span class="ps-3" style="font-size:0.7em;"> {{ $video->getRating->description }} </span>
                                    @endisset
                                </div>
                                <div class="col-4 p-0 py-0 m-0 d-flex justify-content-center align-items-center">
                                 {{-- sm devices like/dislike buttons --}}
                                
                                        <button id="like-reaction-btn" type="button" class="btn btn-primary ls-likeiconbtn-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="like">
                                            <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                        </button>
                                        <button id="dislike-reaction-btn" type="button" class="btn btn-primary ls-dislikeicon-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="dislike">
                                            <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                        </button>
                                </div>
                                <div class="col-4 px-0 pe-1 py-0 m-0 d-flex justify-content-end">
                                    {{-- sm devices share button --}}
                                    <button class="sm_ls_share_section btn btn-primary p-0 d-flex justify-content-center align-items-centerborder"  data-bs-toggle="modal" data-bs-target="#socialShareModal">
                                        <img src="{{url('front/assets/img/media-share-icon-tr.png')}}">
                                    </button>
                                </div>
                            </div>
                        </div>

                        <h6 class="cs-video-title fw-bold accent-color ps-2 d-flex justify-content-center align-items-center d-sm-none">
                            {{$video->title}}
                            @if(!isset($video->video_path))
                                <button id="com_soon_placement" class="btn btn-xs btn-warning">Coming Soon</button>
                            @endif
                        </h6>
                        
                        <p class="p6 fw-lighter cs-video-sub-title text-white ps-2 d-block">
                            {{Str::words($video->sub_title)}}
                        </p>

                        <p id="vid_cat_sub_title" class="category-page-subtitle-slide text-white" style="font-size:0.9em;">
                            {{Str::words($video->sub_title)}}
                        </p>

                        <ul
                            class="list-unstyled nav nav-meta cs-nav-meta font-secondary ps-0 pt-0 pt-sm-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap" style="font-size:0.8em;">
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">
                            {{ date('d M, Y', strtotime($video->date)) }}
                            </li>
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$video->duration}}
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$currentUpcomingPlayingVideo->start_time}}
                            </li>
                            <li id="vid_li_1" 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 text-white">
                                @if(isset($video->getRating))
                                    <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 text-white">
                                @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" style="color:#DFA326;"></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
                <!-- #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" class="upcoming-video-live-video" loop autoplay muted
                        poster="{{$video->thumbnail}}" 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 py-4 d-none">
                        <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 border-0 socialshareiconbtn-btn p-0"
                                    data-bs-toggle="modal" data-bs-target="#socialShareModal">
                                    <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" 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;color:#fff;"> {{ $video->getRating->description }} </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="container-fluid d-flex d-sm-none p-0 m-0">
                            <div class="row py-2 px-0" style="width:100% !important;">
                                <div class="col-4 px-2 py-0 m-0 text-white d-flex align-items-center">
                                    {{-- sm devices ratings badge --}}
                                    @isset($video->getRating->image)
                                        <img class="ps-2" height="30" src="{{url('ratings' . '/' . $video->getRating->image)}}">
                                    @endisset

                                    @isset($video->getRating)
                                        <span class="ps-3" style="font-size:0.7em;"> {{ $video->getRating->description }} </span>
                                    @endisset
                                </div>
                                <div class="col-4 p-0 py-0 m-0 d-flex justify-content-center align-items-center">
                                 {{-- sm devices like/dislike buttons --}}
                                
                                        <button id="like-reaction-btn" type="button" class="btn btn-primary ls-likeiconbtn-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="like">
                                            <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                        </button>
                                        <button id="dislike-reaction-btn" type="button" class="btn btn-primary ls-dislikeicon-btn outline-0 d-flex justify-content-center align-items-center text-white p-0 my-0 mx-2" data-reaction="dislike">
                                            <i class="fa fa-thumbs-up" aria-hidden="true"></i>
                                        </button>
                                </div>
                                <div class="col-4 px-0 pe-1 py-0 m-0 d-flex justify-content-end">
                                    {{-- sm devices share button --}}
                                    <button class="sm_ls_share_section btn btn-primary p-0 d-flex justify-content-center align-items-centerborder"  data-bs-toggle="modal" data-bs-target="#socialShareModal">
                                        <img src="{{url('front/assets/img/media-share-icon-tr.png')}}">
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <h6 class="cs-video-title fw-bold accent-color ps-2 d-flex justify-content-center align-items-center d-sm-none">
                            {{$video->title}}
                            @if(!isset($video->video_path))
                                <button id="com_soon_placement" class="btn btn-xs btn-warning">Coming Soon</button>
                            @endif
                        </h6>
                    
                        <p class="p6 fw-lighter cs-video-sub-title text-white ps-2 d-block">
                            {{Str::words($video->sub_title)}}
                        </p>
                   
                    <p id="vid_cat_sub_title" class="category-page-subtitle-slide text-white text-white" style="font-size:0.9em;">
                        {{Str::words($video->sub_title)}}
                    </p>

                    <ul
                            class="list-unstyled nav nav-meta cs-nav-meta font-secondary ps-0 pt-0 pt-sm-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap" style="font-size:0.8em;">
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">
                            {{ date('d M, Y', strtotime($video->date)) }}
                            </li>
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$video->duration}}
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$currentUpcomingPlayingVideo->start_time}}
                            </li>
                            <li id="vid_li_1" 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 text-white">
                                @if(isset($video->getRating))
                                    <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 text-white">
                                @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" style="color:#DFA326;"></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 -->

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

            <video id="upcoming-video-live-video" class="upcoming-video-live-video" loop autoplay muted
                poster="{{$video->landscape_thumbnail}}" oncontextmenu="return false;">
                <source src="" id="upcoming-video-live-video-src" type="video/mp4">
            </video>

            <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 upcoming live events display logic --}}
        @elseif(isset($upcominglivestreamingevents))
                <input type="hidden" id="lst-presence-on-off" value="on">
                @php
                    $streamprotocol = "https";
                    $streamprotocolconnector = "://";
                    //$streamserver = "1677306836.rsc.cdn77.org/";
                    $streamserver = "verity.live/";
                    $streampath = "streams/hls/";
                    $streamchannel = $upcoming_live_stream_creds->stream_channel;
                    $streamkey = $upcoming_live_stream_creds->streamkey;
                    $streamformat = ".m3u8";
                    //$streamthumbnail = "https://1309607084.rsc.cdn77.org/video-thumbnail/{$upcominglivestreamingevents->thumbnail}";
                    $streamthumbnail = "$upcominglivestreamingevents->thumbnail";
                    $streamurl = "{$streamprotocol}{$streamprotocolconnector}{$streamserver}{$streampath}{$streamchannel}/{$streamkey}{$streamformat}";
                @endphp



                <video id="upcoming-video-live-video" class="upcoming-video-live-video" loop autoplay muted
                    poster="{{$streamthumbnail}}" oncontextmenu="return false;">
                    <source src="" id="upcoming-video-live-video-src" type="video/mp4">
                </video>
                {{--deals with upcoming live events display logic --}}

                {{--deals with when there is no video to display logic --}}
        @else
            @if(get_live_stream_setting('no_programme_display'))
                @php
                    $novideodisplaythumbnail = url('setting-images') . '/' . get_live_stream_setting('no_programme_display')->value;
                @endphp
            @else
                @php
                    $novideodisplaythumbnail = "";
                @endphp
            @endif
            <video poster="{{$novideodisplaythumbnail}}" id="upcoming-video-live-video" class="upcoming-video-live-video"
                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 -->

    <!--Program Line up display-->
    <div class="container-fluid py-2" style="max-width: 1776px;">
        <div class="channel-heading-container d-flex align-items-center p-0 m-0 mt-xl-3">
            <h4 class="h4 fw-bold channel-heading accent-color p-0 m-0 me-2">
                @if(isset($activebroadcastchannel) && !empty($activebroadcastchannel))
                    Program Lineup - {{ $activebroadcastchannel->channel_name }}
                @else
                    Program Lineup
                @endif
            </h4>
            <div class="border-line-div p-0 flex-fill"> </div>
        </div>
        <div class="tab-content py-0">
            <div class="row no-gutters py-0">

                <!--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(10);
                                                                                        @endphp
                                                                @else
                                                                                        @php
                                                                                            $groupedVideos = $all_program_lineups->chunk(5);
                                                                                        @endphp
                                                                @endif
                                                                <div class="col-lg-12 px-0">
                                                                    <div class="row mx-n2 media-wrap-row-video-section" style="margin-left:0 !important;margin-right:0 !important">

                                                                        @foreach($groupedVideos as $group)
                                                                                                <div id="gird-view-videos-mb"
                                                                                                    class="gird-view-videos-mb gird-view-videos w-100 live-broadcast-related-videos-section px-0">
                                                                                                    <style>
                                                                                                        @media(max-width:575px) {
                                                                                                            .live-broadcast-related-videos-section-video-container-mb {
                                                                                                                width: 31% !important;
                                                                                                                margin: 0.5vh 0.7% !important;
                                                                                                                display: inline-block !important;
                                                                                                            }

                                                                                                            .featured_img_sp_mb {
                                                                                                                height: 120px !important;
                                                                                                            }

                                                                                                            .description-sp-mb {
                                                                                                                font-size: 8px !important;
                                                                                                            }
                                                                                                        }
                                                                                                    </style>
                                                                                                    @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 live-broadcast-related-videos-section-video-container-mb">
                                                                                                                                        <div
                                                                                                                                            class="featured_img_sp_mb featured_img height-150 img-container mb-2 product">
                                                                                                                                            <img class="img-fluid img-news image" @if($display_device == 'mb')
                                                                                                                                            src="{{$item->potrait_thumbnail}}" @else
                                                                                                                                            src="{{$item->landscape_thumbnail}}" @endif
                                                                                                                                                alt="Image-Description">

                                                                                                                                            <div class="overlay-1 program-lineup-overlay-1 w-100 h-100 position-absolute top-0">
                                                                                                                                                <div class="text top-63">
                                                                                                                                                    <div class="d-none d-sm-block 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-sp-mb description text-light-white-1300 font-size-11 pt-2">
                                                                                                                                                        {{\Carbon\Carbon::parse($videoitem->date)->format('d
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            M, Y')}}
                                                                                                                                                        <div class="d-block d-sm-none mobile-line-break">
                                                                                                                                                        </div>
                                                                                                                                                        ({{\Carbon\Carbon::parse($videoitem->start_time)->format('H:i')}}
                                                                                                                                                        -
                                                                                                                                                        {{\Carbon\Carbon::parse($videoitem->end_time)->format('H:i')}})
                                                                                                                                                        @if(isset($item->getRating->image))
                                                                                                                                                            <img class="d-none d-sm-inline-block"
                                                                                                                                                                style="height: 18px!important; width:auto!important; float:rigth!important; vertical-align:middle; display:inline;"
                                                                                                                                                                src="{{url('ratings' . '/' . $item->getRating->image)}}">
                                                                                                                                                        @endif
                                                                                                                                                        <div class="d-block d-sm-none mobile-line-break">
                                                                                                                                                        </div>
                                                                                                                                                        @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">
                                                                                                                                                                    Pay Per View
                                                                                                                                                                </span>
                                                                                                                                                            @endif
                                                                                                                                                        @endif
                                                                                                                                                    </div>
                                                                                                                                                    @if(isset($item->duration))
                                                                                                                                                        <div class="action">
                                                                                                                                                            <p
                                                                                                                                                                class="d-none d-sm-inline-block description-sp-mb 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://1309607084.rsc.cdn77.org/video-thumbnail/{$item->thumbnail}";

                                                                                                                                                                $streamthumbnail =
                                                                                                                                                                    "{$item->thumbnail}";

                                                                                                                                                                //$potraitstreamthumbnail =
                                                                                                                                                                //"https://1309607084.rsc.cdn77.org/video-thumbnail/{$item->potrait_thumbnail}";

                                                                                                                                                                $potraitstreamthumbnail = "{$item->potrait_thumbnail}";
                                                                                                                                                            @endphp
                                                                                                                                                            <div
                                                                                                                                                                class="item landscape-type-item live-broadcast-related-videos-section-video-container live-broadcast-related-videos-section-video-container-mb">
                                                                                                                                                                <div
                                                                                                                                                                    class="featured_img_sp_mb featured_img height-150 img-container mb-2 product">
                                                                                                                                                                    <img class="img-fluid img-news image" @if($display_device == 'mb')
                                                                                                                                                                        src="{{ $potraitstreamthumbnail }}"
                                                                                                                                                                    @endif
                                                                                                                                                                    src="{{ $streamthumbnail }}"
                                                                                                                                                                    alt="Image-Description">

                                                                                                                                                                    <div
                                                                                                                                                                        class="overlay-1 program-lineup-overlay-1 w-100 h-100 position-absolute top-0">
                                                                                                                                                                        <div class="text top-63">
                                                                                                                                                                            <div class="d-none d-sm-block 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-sp-mb description text-light-white-1300 font-size-11 pt-2">
                                                                                                                                                                                {{\Carbon\Carbon::parse($videoitem->date)->format('d
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    M, Y')}}
                                                                                                                                                                                <div class="d-block d-sm-none mobile-line-break">
                                                                                                                                                                                </div>
                                                                                                                                                                                ({{\Carbon\Carbon::parse($videoitem->start_time)->format('H:i')}}
                                                                                                                                                                                -
                                                                                                                                                                                {{\Carbon\Carbon::parse($videoitem->end_time)->format('H:i')}})
                                                                                                                                                                                @if(isset($item->getRating->image))
                                                                                                                                                                                    <img class="d-none d-sm-inline-block"
                                                                                                                                                                                        style="height: 18px!important; width:auto!important; float:rigth!important; vertical-align:middle; display:inline;"
                                                                                                                                                                                        src="{{url('ratings' . '/' . $item->getRating->image)}}">
                                                                                                                                                                                @endif
                                                                                                                                                                                <div class="d-block d-sm-none mobile-line-break">
                                                                                                                                                                                </div>
                                                                                                                                                                                @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">
                                                                                                                                                                                            Pay Per View
                                                                                                                                                                                        </span>
                                                                                                                                                                                    @endif
                                                                                                                                                                                @endif
                                                                                                                                                                            </div>
                                                                                                                                                                            @if(isset($item->duration))
                                                                                                                                                                                <div class="action">
                                                                                                                                                                                    <p
                                                                                                                                                                                        class="d-none d-sm-inline-block description-sp-mb 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-1">
                                                                                            <div
                                                                                                class="live-broadcast-related-videos-section-pagination justify-content-start justify-content-sm-center">
                                                                                                <button class="live-broadcast-related-videos-section-arrow p-0 mx-2"
                                                                                                    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 p-0 mx-2"
                                                                                                    id="live-broadcast-related-videos-section-nextPage">
                                                                                                    <span class="live-broadcast-related-videos-section-nav-text">NEXT
                                                                                                        →</span>
                                                                                                </button>
                                                                                            </div>
                                                                                        </div>
                                                                                        {{-- pagination links --}}
                                        @endif




                                    </div>
                                </div>


                            </div>
                        </div>
                        <!--Dakar Section End-->
                @endif
                <!--Dakar Section End-->

            </div>
        </div>
    </div>
    <!--Program Line up display-->
</main>

<script>
    // Wait for the entire page to load
    document.addEventListener("DOMContentLoaded", function () {

        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 == '##') {

                        location.reload();
                    }
                    if (data == 'lv#started') {
                        location.reload();
                    }
                    if (data == 'lv#ended') {
                        location.reload();
                    }
                }, 
                error: function (jqXHR, textStatus, errorThrown) {
                    // Log the error details
                    console.error("AJAX request failed!");
                    console.error("Status: " + textStatus);
                    console.error("Error: " + errorThrown);

                    // Optionally show an error message to the user
                    console.error("Something went wrong. Please try again later.");
                }
            });
        }, 1000); //time in milliseconds
    });



    //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 = null;
    var currentVideoId = null;
    var videoPlayTimeSeconds = null;
    var liveEventPlayTimeSeconds = null;
    var currentLSVideoId = null
    vid.currentTime += sites
    var curplaytime = vid.currentTime;

    console.log('sites' + sites)
    console.log('curplaytime' + curplaytime)


    //view uploading functionality
    let viewedTime;
    let totalViewedTime = 0;
    let isBuffering = false;

    player.on('play', function () {
        if (!isBuffering) {
            viewedTime = Date.now();
        }
    });

    player.on('pause', function () {
        if (!isBuffering) {
            calculateViewingTime();
        }
    });

    player.on('waiting', function () { // 'waiting' event is triggered when the player is buffering
        if (!isBuffering) {
            calculateViewingTime();
            isBuffering = true;
        }
    });

    player.on('playing', function () { // 'playing' event is triggered when buffering ends and the video resumes
        if (isBuffering) {
            viewedTime = Date.now(); // Reset the time when buffering ends
            isBuffering = false;
        }
    });

    player.on('ended', function () {
        calculateViewingTime();
    });

    function calculateViewingTime() {

        let currentTime = Date.now();
        let elapsedTime = (currentTime - viewedTime) / 1000; // Convert milliseconds to seconds
        totalViewedTime += elapsedTime;

        let elapsedminutes = Math.floor(totalViewedTime / 60);
        let elapsedseconds = Math.floor(totalViewedTime % 60);

        // console.log(`Total Viewed Time: ${minutes} minute(s) and ${seconds} second(s)`);
    }



    //upload live stream view if => 80% of live stream duration 
    setInterval(function () {

        //check if it's pre-recorded video or live stream event
        if (!currentLSVideoId) {

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

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

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

                    }
                });
            }
        } else {
            let programTotalTime = liveEventPlayTimeSeconds;
            let programValidViewCountTime = programTotalTime * 0.79;

            if ((totalViewedTime < programValidViewCountTime) && (isViewUploded == false)) {

                isViewUploded = true
                $.ajax({
                    type: "GET",

                    url: "{{route('front.uploadLSVideoView', '')}}" + "/" + currentLSVideoId,
                    success: function (data) {
                        console.log('datadatadata  live if' + data);
                    }
                });
            }
        }
    }, 1000);
</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;
        pageNumberstoDislay();
    }

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

    function pageNumberstoDislay() {

        let activePageNumber = currentPage + 1,
            totalpageNumbers = pages.length;

        (activePageNumber === 0) ? activePageNumber = 0 + 1 : activePageNumber;

        //return array of pages to display
        let prevPageOne = activePageNumber - 1;
        let prevPageTwo = activePageNumber - 2;
        let nextPageOne = activePageNumber + 1;
        let toDisplayPageNUmbers;

        //if activePageNumber is the first, second page
        if (activePageNumber === 1) {
            prevPageOne = nextPageOne + 1;
            prevPageTwo = prevPageOne + 1;
        }
        if (activePageNumber === 2) {
            prevPageTwo = nextPageOne + 1;
        }

        //if activePageNumber is the last page
        if (activePageNumber === pages.length) {
            nextPageOne = prevPageTwo - 1;
        }

        (prevPageOne < 1) ? prevPageOne = 0 : prevPageOne;
        (prevPageTwo < 1) ? prevPageTwo = 0 : prevPageTwo;
        (nextPageOne < 1) ? nextPageOne = 0 : nextPageOne;

        toDisplayPageNumbers = [activePageNumber, prevPageOne, prevPageTwo, nextPageOne];

        pageNumbers.forEach((page, index) => {
            (toDisplayPageNumbers.indexOf(index + 1) === -1) ? page.style.display = "none" : page.style.display = "flex";
        });

    }

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

        // 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) {
        var isTruncated = isTextTruncated(paragraphElement);
        if (isTruncated == false) {
            document.getElementById('readmoretextid').style.display = "none";
        }
    }
    // 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