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

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

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials-theme-classic.css" />

<!-- OG meta tags -->
<meta property="og:title" content="Verity TV">

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

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

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

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

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

@elseif(isset($currentUpcomingVideo))
@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}}">

@else
<meta property="og:description" content="Verity TV is a subscription-based streaming and live broadcast service that allows our members to watch TV shows, documentaries, Political and Society related features from around Africa without commercials on an internet-connected device">

<meta property="og:image" content="https://verity.live/public/setting-images/og-tag-logo.png">

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

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

<!-- Optional OG meta tags -->
<meta property="og:site_name" content="Verity.live">
<meta property="og:locale" content="en_us">
<!-- OG meta tags -->
@endsection
@section('content')

<style>
     /*page loader */
     #loader {
        height: 100vh;
        width: 100%;
        background-color: #000F1E;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999999999;
        position: fixed;
        top: 0;
        left: 0;
        overflow: hidden;
    }

    .loader {
        width: 48px;
        height: 48px;
        border: 3px dotted #FFF;
        border-style: solid solid dotted dotted;
        border-radius: 50%;
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        animation: rotation 2s linear infinite;
    }

    .loader::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border: 3px dotted #FF3D00;
        border-style: solid solid dotted;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        animation: rotationBack 1s linear infinite;
        transform-origin: center center;
    }

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes rotationBack {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(-360deg);
        }
    }

    .dp-none {
        display: none !important;
    }
</style>
<!-- page loader -->
<div id="loader" class="loader-wrapper">
    <span class="loader"></span>
</div>
<!-- page loader -->

<!-- Main page -->
<main id="js-livebroadcasts-partial-target" class="main-content-partial-section" style="display:none;">
    <!--Main_Slider-->
    <style>
        .main-footer, .ranges {
            display: none;
        }


        .container .btn23 {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            color: white;
            font-size: 3em;
            padding: 5px 25px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            text-align: center;
        }


        .slider-category-text,
        .slider-duration-text {
            font-size: 12px;
        }

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

        .media-scale-transform:hover {
            transform: scale(1.2) !important;
            transition: .3s !important;
            border-radius: 2px;
        }

        .overlay:hover {
            border-radius: 5px !important;
        }

        .media-wrap-row-video-section {
            flex-wrap: nowrap;
        }

        .font-size-20 {
            margin-left: 15px;
        }

        .video-title-without-hover {
            position: relative;
            bottom: 40px !important;
            left: 10px;
            font-size: 12px;
            font-weight: 700;
            color: #fff;

        }

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

        .overlay {
            height: auto !important;
        }

        .col-lg-2 {
            padding: 0px 5px !important;
        }

        .mb-2 {
            margin-bottom: 0px !important;
        }

        .select-date input {
            position: relative;
            height: 35px;
            border-radius: 5px;
            border: none;
            padding: 5px 10px;
        }

        .select-date input:focus {
            box-shadow: 0 0 0 1px #24baef;
            background-color: #DFA326 !important;
        }

        .select-date .daterange {
            background: transparent;
            color: white;
            border: 1px solid;
            margin: 0 5px;
        }

        .select-date .input-icon {
            position: absolute;
            font-family: 'FontAwesome';
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 18px;
            color: white;
            background: none;
        }

        .text-white {
            font-size: 0.75rem !important;
            color: #fff !important;
        }

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

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

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

        /* change the twitter logo to X */

        .jssocials-share.jssocials-share-twitter .jssocials-share-link {
            background-color: black !important;
        }

        i.fa.fa-twitter.jssocials-share-logo:before {
            content: "";
            display: inline-block;
            width: 15px;
            height: 15px;
            /*background-image: url('https://about.twitter.com/content/dam/about-twitter/x/brand-toolkit/logo-black.png.twimg.1920.png');*/
            background-image: url('https://verity.live/public/front/assets/img/x-share-icon-logo-letter-tr.png');
            background-size: cover;
        }

        @media(max-width: 575px) {

            .socialsharesection {
                margin: 0 !important;
                left: 0 !important;
            }

            .socialshareiconbtn-btn {
                width: 70px;
                height: 70px;
                border-radius: 100% !important;
                background-color: transparent !important;
                overflow: hidden !important;
            }

            .sharemodaldivparel {
                padding: 0 !important;
                overflow: hidden !important;

            }

            .sharemodaldiv {
                margin-left: 0px !important;
                margin-bottom: 0 !important;
                width: 100% !important;
                position: fixed !important;
                left: 0 !important;
                bottom: 0 !important;
                border-bottom-left-radius: 0 !important;
                border-bottom-left-radius: 0 !important;
                transition: none !important;
                transition-property: none !important;
            }

            .modal-content {
                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;
        }

        .custom-loading-spinner {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 10px solid #ddd;
            border-top-color: orange;
            animation: loading 1s linear infinite;
        }

        @keyframes loading {
            to {
                transform: rotate(360deg);
            }
        }

        .channels-programs-title {
            color: #DFA326 !important;
        }

        @media(max-width:575px) {
            .displaychannelshousesection {
                display: flex !important;
                flex-wrap: wrap;
                padding: 0 !important;
            }

            .displaychannelitem {
                margin: 3px 5px !important;
                width: 30% !important;
                height: 50px !important;
                border-radius: 5px;
            }

            .active-displaychannelitem {
                box-shadow: 0 4px 11px rgba(36, 186, 239, .35);
                box-shadow: 0 0 10px 5px #dfa326;
            }

            .displaychannelitem-img {
                width: 100% !important;
                height: 50px !important;
            }

            .displaychannelitem-img img {
                width: 100% !important;
                height: 100% !important;
            }
        }

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

        @media(min-width:992px) {
            .displaychannelshousesection {
                display: flex !important;
                flex-wrap: wrap;
                padding: 0 !important;
            }

            .displaychannelitem {
                margin: 5px 10px !important;
                width: 15% !important;
                height: 75px !important;
                border-radius: 5px;
            }

            .active-displaychannelitem {
                box-shadow: 0 4px 11px rgba(36, 186, 239, .35);
                box-shadow: 0 0 10px 5px #dfa326;
            }

            .displaychannelitem-img {
                width: 100% !important;
                height: 150px !important;
                border-radius: inherit;
            }

            .displaychannelitem-img img {
                width: 100% !important;
                height: 100% !important;
                border-radius: inherit;
            }

            .dpcustompardisplay {
                padding-bottom: 3vh;
            }
        }

        .main-content-partial-section {
            min-height: 100vh;
            background-color: #000F1E;
        }

        .no-overflow-body {
            overflow: hidden;
        }

        /* 500 error page */
        #error-500-view .flex-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: white;
            animation: colorSlide 15s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
        }

        #error-500-view .flex-container .text-center {
            text-align: center;
        }

        .err-500-view-h3 {
            margin: 10px;
            cursor: default;
        }

        .err-500-view-h3 {
            color: white !important;
            animation: fadeIn 2s ease infinite;
        }

        .err-500-view-h1 {
            color: white !important;
            font-size: 8em;
            transition: font-size 200ms ease-in-out;
            border-bottom: 1px dashed white;
            animation: fadeIn 2s ease infinite;
        }

        #spndigit1 {
            animation-delay: 200ms;
        }

        #spndigit2 {
            animation-delay: 300ms;
        }

        #spndigit3 {
            animation-delay: 400ms;
        }

        .err-500-view-btn {
            border: 1px solid white;
            background: transparent !important;
            outline: none;
            padding: 10px 20px;
            font-size: 1.1rem;
            font-weight: bold;
            color: white;
            text-transform: uppercase;
            transition: background-color 200ms ease-in;
            margin: 20px 0;
        }

        .err-500-view-btn:hover {
            background-color: white;
            color: #555 !important;
            cursor: pointer;
        }

        @keyframes colorSlide {
            0% {
                background-color: #152a68;
            }

            25% {
                background-color: royalblue;
            }

            50% {
                background-color: seagreen;
            }

            75% {
                background-color: tomato;
            }

            100% {
                background-color: #152a68;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            ;

            100% {
                opacity: 1;
            }
        }

        /* 500 error page */

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

        @media (max-width:576px) {
            #my-video {
                width: 100% !important;
                height: 27vh !important;
            }

        }

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

        @media only screen 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-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: 1.1em !important;
                height: 27px !important;
                width: 27px !important;
            }

        }

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

        .img-rating-specific-block {
            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: 1.3em;
            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.6em;
            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>
<script>
    window.addEventListener('load', function () {
        document.querySelector('.loader-wrapper').style.display = 'none';
        document.querySelector('.main-content-partial-section').style.display = 'block';
        // document.querySelector('.main-footer').classList.remove('dp-none');
    });
</script>

    <!-- Orientation message block -->
    <div class="orientation-message-block">
        <h2>Please rotate your device <i class="bi bi-arrow-repeat"></i></h2>
    </div>
    <!-- Orientation message block -->

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

        <!-- channels display section -->
        <div class="container mx-auto px-md-6 px-xl-7 px-wd-6 pb-0 pt-1">
            <div class="pb-0">
                <input type="hidden" id="channel_id_input" value="{{$activebroadcastchannel->id}}">

                {{-- for desktop --}}
                <div class="tv-programs border-g-1200-op mb-1 pb-0 d-none d-xl-block">
                    <div class="home-section mb-3 displaychannelssection dpcustompardisplay" id="sports">
                        <div class="font-size-20 font-weight-bold mb-3 mx-0 text-golden font-secondary channels-programs-title d-flex align-items-center">
                            Select Channel
                            <span class="d-inline-block mx-2 p-0 border-line-div" style="border-bottom:1px solid #4D4333; flex: 1;"></span>
                        </div>
                        <div class="gird-view-videos w-100 displaychannelshousesection">
                            @if(isset($livebroadcastchannels))
                            @foreach($livebroadcastchannels as $channel)
                            @if($channel->id === $activebroadcastchannel->id)
                            <a href="{{ url('dp/live-broadcast/channel-'.$channel->id) }}" style="border-radius:10px !important;">
                                <div class="item landscape-type-item mx-2 displaychannelitem active-displaychannelitem" style="border-radius:10px !important;">
                                    @else
                                    <a href="{{ url('dp/live-broadcast/channel-'.$channel->id) }}" style="border-radius:10px !important;">
                                        <div class="item landscape-type-item mx-2 displaychannelitem" style="border-radius:10px !important;">
                                            @endif

                                            <div class="featured_img height-100 img-container mb-2 product displaychannelitem-img" style="height:90px !important;border-radius:10px !important;">
                                                <img class="" src="@if($display_device === 'mb') {{$channel->channel_thumbnail_potrait}} @else {{$channel->channel_thumbnail}} @endif" alt="Image-Description">
                                                <div class="overlay-1">
                                                    <div class="text top-63">
                                                        <div class="content_play">

                                                            <div class="content-title text-white font-size-11">
                                                                <i class="fa fa-play" aria-hidden="true"></i>
                                                                {{$channel->channel_name}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                    </a>
                                </div>
                                @endforeach
                                @endif
                        </div>
                    </div>
                </div>
                {{-- for desktop --}}

                {{-- for mobile --}}
                <style>
                    @media(max-width:575px) {
                        .featured-channel-height {
                            height: 40px !important;
                            margin-bottom: 0 !important;
                        }

                        .active-displaychannelitem {
                            height: 40px !important;
                        }

                        .content-title-sp-mb {
                            font-size: 8px !important;
                        }

                        .item-landscape-type-sp-mb,
                        .channel-container-sp-mb {
                            margin-bottom: 0 !important;
                        }

                        .sp-mb-mrg-class {
                            margin-top: -10px !important;
                        }

                        .pr-lineup-border-line {
                            transform: translateY(-8px);
                        }
                    }
                </style>
                <div class="tv-programs border-g-1200-op mb-1 pb-0 d-block d-xl-none">
                    <div class="home-section mb-1 displaychannelssection" id="sports">
                        <div class="font-size-20 font-weight-bold mb-3 mx-0 text-golden font-secondary channels-programs-title d-flex align-items-center" style="font-size:16px !important;">
                            Select Channel
                            <span class="d-inline-block mx-2 p-0 border-line-div" style="border-bottom:1px solid #4D4333; flex: 1;"></span>
                        </div>
                        <div class="gird-view-videos w-100 displaychannelshousesection">
                            @if(isset($livebroadcastchannels))
                            @foreach($livebroadcastchannels as $channel)
                            @if($channel->id === $activebroadcastchannel->id)
                            <a href="{{ url('mb/live-broadcast/channel-'.$channel->id) }}" class="channel-container-sp-mb" style="border-radius:40px !important;">
                                <div class="{{ in_array($loop->iteration, [4, 5, 6]) ? 'sp-mb-mrg-class' : '' }} item-landscape-type-sp-mb item landscape-type-item mx-2 displaychannelitem active-displaychannelitem" style="border-radius:40px !important;">
                                    @else
                                    <a href="{{ url('mb/live-broadcast/channel-'.$channel->id) }}" class="channel-container-sp-mb" style="border-radius:40px !important;">
                                        <div class="{{ in_array($loop->iteration, [4, 5, 6]) ? 'sp-mb-mrg-class' : '' }} item-landscape-type-sp-mb item landscape-type-item mx-2 displaychannelitem" style="border-radius:40px !important;">
                                            @endif

                                            <div class="featured-channel-height featured_img height-150 img-container mb-2 product displaychannelitem-img" style="border-radius:40px !important;">
                                                <img class="" src="@if($display_device === 'mb') {{$channel->channel_thumbnail_potrait}} @else {{$channel->channel_thumbnail}} @endif" alt="Image-Description">
                                                <div class="overlay-1">
                                                    <div class="text top-63">
                                                        <div class="content_play">

                                                            <div class="content-title-sp-mb content-title text-white font-size-11">
                                                                <i class="fa fa-play" aria-hidden="true"></i>
                                                                {{$channel->channel_name}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                    </a>
                                </div>
                                @endforeach
                                @endif
                        </div>
                    </div>
                </div>
                {{-- for mobile --}}

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

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

            <!-- #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" style="padding:0.5vh 0px !important;margin-left:0;margin-right:0;height:720px !important;;">
                <video
                    id="my-video"
                    class="video-js"
                    controls
                    preload="auto"
                    width="100%"
                    height="704"
                    data-setup='{"poster": "{{$streamthumbnail}}"}' style="width:100%!important; object-fit: fill;">
                    <source src="" type="application/vnd.apple.mpegurl" />

                    <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a
                        web browser that
                        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                    </p>
                </video>
                <script>
                    videojs('my-video', {
                        overrideNative: true,
                        errorDisplay: false,
                        autoplay: false
                    });
                </script>
            </div>
            <style>
                .vjs-poster {
                    background-size: cover !important;
                    background-position: center !important;
                }
            </style>
            <!-- *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="padding:0.5vh 0px !important;margin-left:0;margin-right:0;object-fit:cover !important;height:720px !important;">
                    <video
                        id="my-video"
                        class="video-js"
                        controls
                        autoplay
                        preload="auto"
                        width="100%"
                        height="704"
                        data-setup='"poster": "{{$streamthumbnail}}"}' style="width:100%!important;height:100% !important;object-fit:cover !important;">
                        <source src="{{$streamurl}}" type="application/vnd.apple.mpegurl" />

                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a
                            web browser that
                            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                        </p>
                    </video>
                    <script>
                        videojs('my-video', {
                            overrideNative: true, // <-- this fixes Android Chrome
                            errorDisplay: false,
                            autoplay: true,
                        });
                    </script>
                </div>



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

                <h6 class="text-white font-weight-semi-bold font-secondary category-page-subtitle-slide category-page-subtitle-slide-custom-mb-title mt-1 mb-3 mb-md-1">
                    <span id="upc_video_title" style="font-size:1.5em;"> {{$livestreamingevents->title}} </span>
                </h6>

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

                <ul class="list-unstyled nav nav-meta font-secondary pt-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">
                    <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->date}}</li>
                    <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->start_time}}</li>
                    <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->end_time}}</li>
                    <li class="d-none d-md-block img-rating-specific-block">
                        @if(isset($livestreamingevents->getRating))
                        <img id="gt_rating_img" style="height: 30px!important;
                                                            width: auto!important; margin-top:-5px;
                                                            " src="{{url('ratings'.'/'.$livestreamingevents->getRating->image)}}">
                        @endif
                    </li>

                    <li class="d-none d-md-block img-rating-specific-block">
                        @if(isset($livestreamingevents->getRating))
                        {{$livestreamingevents->getRating->description}}
                        @endif
                    </li>
                </ul>

                <div class="video-description">
                    <input id="read-more-checkbox" type="checkbox" class="read-more__checkbox" aria-hidden="true">
                    {!! $livestreamingevents->description !!}
                    <label for="read-more-checkbox" id="readmoretextid" class="read-more__label" data-read-more="Read more" data-read-less="See less" aria-hidden="true"></label>
                </div>
                <!-- *live stream event has started or is starting now -->
                @endif

                @endif
                <!-- #case 1.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" style="height:auto;padding:0.5vh 0px !important;margin-left:0;margin-right:0;">
                    <video
                        id="my-video"
                        class="video-js"
                        controls
                        preload="auto"
                        width="100%"
                        height="704"
                        data-setup='{"poster": "{{$streamthumbnail}}"}' style="width:100%!important; object-fit: fill;">
                        <source src="" type="application/vnd.apple.mpegurl" />

                        <p class="vjs-no-js">
                            To view this video please enable JavaScript, and consider upgrading to a
                            web browser that
                            <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                        </p>
                    </video>
                    <script>
                        videojs('my-video', {
                            overrideNative: true,
                            errorDisplay: false,
                            autoplay: false
                        });
                    </script>
                </div>

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

                <!-- *live stream event has started or is starting now -->
                @elseif($livestreamingevents->date = now()->format('Y-m-d') && $livestreamingevents->start_time <= now()->format('H:i:s'))
                    <div id="lst-video-placement-container" style="height:auto;padding:0.5vh 0px !important;margin-left:0;margin-right:0;">
                        <video
                            id="my-video"
                            class="video-js"
                            controls
                            autoplay
                            preload="auto"
                            width="100%"
                            height="704"
                            data-setup='{"poster": "{{$streamthumbnail}}"}' style="width:100%!important; object-fit: fill;">
                            <source src="" type="application/vnd.apple.mpegurl" />

                            <p class="vjs-no-js">
                                To view this video please enable JavaScript, and consider upgrading to a
                                web browser that
                                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                            </p>
                        </video>
                        <script>
                            videojs('my-video', {
                                overrideNative: true, // <-- this fixes Android Chrome
                                errorDisplay: false,
                                autoplay: false,
                            });
                        </script>
                    </div>

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

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

                    <h6 class="text-white font-weight-semi-bold font-secondary category-page-subtitle-slide category-page-subtitle-slide-custom-mb-title mt-1 mb-3 mb-md-1">
                        <span id="upc_video_title" style="font-size:1.5em;"> {{$livestreamingevents->title}} </span>
                    </h6>

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

                    <ul class="list-unstyled nav nav-meta font-secondary pt-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">
                        <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->date}}</li>
                        <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->start_time}}</li>
                        <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->end_time}}</li>
                        <li class="d-none d-md-block img-rating-specific-block">
                            @if(isset($livestreamingevents->getRating))
                            <img id="gt_rating_img" style="height: 30px!important;
                                                            width: auto!important; margin-top:-5px;
                                                            " src="{{url('ratings'.'/'.$livestreamingevents->getRating->image)}}">
                            @endif
                        </li>

                        <li class="d-none d-md-block img-rating-specific-block">
                            @if(isset($livestreamingevents->getRating))
                            {{$livestreamingevents->getRating->description}}
                            @endif
                        </li>
                    </ul>

                    <div class="video-description">
                        <input id="read-more-checkbox" type="checkbox" class="read-more__checkbox" aria-hidden="true">
                        {!! $livestreamingevents->description !!}
                        <label for="read-more-checkbox" id="readmoretextid" class="read-more__label" data-read-more="Read more" data-read-less="See less" aria-hidden="true"></label>
                    </div>
                    <!-- *live stream event has started or is starting now -->
                    @endif

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

                    <!-- #case 2 - live stream event is a Free View or it is not set -->
                    @if($playing_video_subscription == 'Free view' || $playing_video_subscription == 'not set')
                    <input type="hidden" id="lst-presence-on-off" value="on">
                    @php
                    $streamprotocol = "https";
                    $streamprotocolconnector = "://";
                    //$streamserver = "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" style="height:auto;padding:0.5vh 0px !important;margin-left:0;margin-right:0;">
                        <video
                            id="my-video"
                            class="video-js"
                            controls
                            preload="auto"
                            width="100%"
                            height="704"
                            data-setup='{"poster": "{{$streamthumbnail}}"}' style="width:100%!important; object-fit: fill;">
                            <source src="" type="application/vnd.apple.mpegurl" />

                            <p class="vjs-no-js">
                                To view this video please enable JavaScript, and consider upgrading to a
                                web browser that
                                <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                            </p>
                        </video>
                        <script>
                            videojs('my-video', {
                                overrideNative: true,
                                errorDisplay: false,
                                autoplay: false
                            });
                        </script>
                    </div>
                    <!-- *live stream event has not yet started -->

                    <!-- *live stream event has started or is starting now -->
                    @elseif($livestreamingevents->date = now()->format('Y-m-d') && $livestreamingevents->start_time <= now()->format('H:i:s'))
                        <div id="lst-video-placement-container" style="height:auto;padding:0.5vh 0px !important;margin-left:0;margin-right:0;">
                            <video
                                id="my-video"
                                class="video-js"
                                controls
                                autoplay
                                preload="auto"
                                width="100%"
                                height="704"
                                data-setup='{"poster": "{{$streamthumbnail}}"}' style="width:100%!important; object-fit: fill;">
                                <source src="{{$streamurl}}" type="application/vnd.apple.mpegurl" />

                                <p class="vjs-no-js">
                                    To view this video please enable JavaScript, and consider upgrading to a
                                    web browser that
                                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                                </p>
                            </video>
                            <script>
                                videojs('my-video', {
                                    overrideNative: true, // <-- this fixes Android Chrome
                                    errorDisplay: false,
                                    autoplay: true,
                                });
                            </script>
                        </div>

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

                        <h6 class="text-white font-weight-semi-bold font-secondary category-page-subtitle-slide category-page-subtitle-slide-custom-mb-title mt-1 mb-3 mb-md-1">
                            <span id="upc_video_title" style="font-size:1.5em;"> {{$livestreamingevents->title}} </span>
                        </h6>

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

                        <ul class="list-unstyled nav nav-meta font-secondary pt-3 mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->date}}</li>
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->start_time}}</li>
                            <li id="vid_li_1" class="text-white flex-shrink-0 flex-shrink-md-1">{{$livestreamingevents->end_time}}</li>
                            <li class="d-none d-md-block img-rating-specific-block">
                                @if(isset($livestreamingevents->getRating))
                                <img id="gt_rating_img" style="height: 30px!important;
                                                        width: auto!important; margin-top:-5px;
                                                        " src="{{url('ratings'.'/'.$livestreamingevents->getRating->image)}}">
                                @endif
                            </li>

                            <li class="d-none d-md-block img-rating-specific-block">
                                @if(isset($livestreamingevents->getRating))
                                {{$livestreamingevents->getRating->description}}
                                @endif
                            </li>
                        </ul>

                        <div class="video-description">
                            <input id="read-more-checkbox" type="checkbox" class="read-more__checkbox" aria-hidden="true">
                            {!! $livestreamingevents->description !!}
                            <label for="read-more-checkbox" id="readmoretextid" class="read-more__label" data-read-more="Read more" data-read-less="See less" aria-hidden="true"></label>
                        </div>
                        <!-- *live stream event has started or is starting now -->
                        @endif

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

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


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

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

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

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

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

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

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

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

                        @if(!isset($video->video_path))
                        <button id="com_soon_placement_2" class="btn btn-xs btn-warning">Coming Soon</button>
                        @endif
                        @endif
                        <!-- #case 1.1 - pre-recorded video is a Pay Per View & user has viewing rights -->

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

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

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

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

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

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

                        @if(!isset($video->video_path))
                        <button id="com_soon_placement_2" class="btn btn-xs btn-warning">Coming Soon</button>
                        @endif

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

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

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

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

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

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

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

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

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

                        {{--@endif (ending)--}}
                        {{--deals with pre-recorded videos display logic --}}

                        {{--deals with upcoming videos display logic --}}
                        @elseif(isset($currentUpcomingVideo))

                        @php $video = $currentUpcomingVideo->ls_videos; @endphp

                        <video id="upcoming-video-live-video" loop autoplay muted poster="{{optional($video)->thumbnail}}" style="width:100%!important; object-fit: fill;max-height:720px !important;" oncontextmenu="return false;" loop playsinline controls preload="metadata" controlsList="nodownload noremoteplayback">
                            <source src="" id="upcoming-video-live-video-src" type="video/mp4">
                        </video>

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

                        <button id="playBtn" class="btn23" style="display:none" onclick='getMessage()'>
                            <i class="fa fa-play text-red"></i>
                        </button>
                        {{--@endif (ending)--}}
                        {{--deals with upcoming videos display logic --}}


                        {{--deals with 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" loop autoplay muted poster="{{$streamthumbnail}}" style="width:100%!important; object-fit: fill;max-height:720px !important;" 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" style="width:100%!important; object-fit: contain;" oncontextmenu="return false;" loop playsinline controls preload="metadata">
                            <source src="" id="upcoming-video-live-video-src" type="video/mp4">
                        </video>
                        @endif
                        {{--deals with when there is no video to display logic --}}
        </div>
        <!-- videos display section -->
    </div>

    <div class="bg-gray-1100 space-1" style="margin-top:-40px;">
        <div class="bg-gray-1100 space-1">
            <div class="container mx-auto px-md-6 px-xl-7 px-wd-6 pb-3 pt-1">
                <div class="pb-2">

                    <div class="tv-programs border-g-1200-op mb-1 pb-3">
                        @if(Route::is('front.livebroadcastvideos_partial'))
                        @php $date = (isset($_GET['date'])) ? $_GET['date'] : ''; @endphp
                        <form class="select-date d-none d-xl-inline-block position-relative mb-3"
                            action="{{ url('dp/live-broadcast-test') }}" method="GET">
                            <input type="text" autocomplete="off"
                                class="daterange m-0 py-2 pl-3 font-size-10 w-180rem bg-transparent" name="date"
                                value="{{ $date }}" placeholder="Select Date" />
                            <button class="btn bg-white py-1 ml-2 text-uppercase" type="submit"
                                name="submit">SUBMIT</button>
                        </form>
                        <form class="select-date d-inline-block d-xl-none position-relative mb-3"
                            action="{{ url('mb/live-broadcast-test') }}" method="GET">
                            <input type="text" autocomplete="off"
                                class="daterange m-0 py-2 pl-3 font-size-10 w-180rem bg-transparent" name="date"
                                value="{{ $date }}" placeholder="Select Date" />
                            <button class="btn bg-white py-1 ml-2 text-uppercase" type="submit"
                                name="submit">SUBMIT</button>
                        </form>

                        @endif
                        @if(count($all_program_lineups) > 0)
                        <div class="home-section mb-3 displaychannelssection" id="sports">
                            <div class="font-size-20 font-weight-bold mb-3 mx-0 text-golden font-secondary d-none"
                                style="display:none !important;">
                                Broadcast channels
                            </div>
                            <div class="gird-view-videos w-100 displaychannelshousesection d-none"
                                style="display:none !important;">
                                @if(isset($livebroadcastchannels))
                                @foreach($livebroadcastchannels as $channel)
                                <div class="item landscape-type-item mx-2 displaychannelitem"
                                    onclick="fetchLiveBroadcasts({{$channel->id}}, 1)">
                                    <div class="featured_img height-150 img-container mb-2 product displaychannelitem-img">
                                        <img class="" src="{{$channel->channel_thumbnail}}" alt="Image-Description">
                                        <div class="overlay-1">
                                            <div class="text top-63">
                                                <div class="content_play">

                                                    <div class="content-title text-white font-size-11">
                                                        <i class="fa fa-play" aria-hidden="true"></i>
                                                        {{$channel->channel_name}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                                @endif
                            </div>

                            <header id="current_news"
                                class="mt-2 d-md-flex align-items-center justify-content-between mb-5 w-100 pt-5 d-flex">
                                <div
                                    class="font-size-15 font-weight-bold mb-3 mb-md-0 text-golden font-secondary channels-programs-title">
                                    @if(isset($activebroadcastchannel) && !empty($activebroadcastchannel))
                                    Program Lineup - {{ $activebroadcastchannel->channel_name }}
                                    @else
                                    Program Lineup
                                    @endif

                                </div>
                                <div class="d-block border-top col p-0 mx-3 border-gray-6830 pr-lineup-border-line"></div>
                            </header>
                        </div>
                        @endif
                        <div class="tab-content">
                            <div class="row no-gutters">


                                <!--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-2">
                                                    <div class="row mx-n2 media-wrap-row-video-section">

                                                        @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">
                                                            <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}}" alt="Image-Description">
                                                                    @endif
                                                                    src="{{$item->thumbnail}}" alt="Image-Description">

                                                                    <div class="overlay-1">
                                                                        <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">
                                                                                    Subscription
                                                                                </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 }}" alt="Image-Description">
                                                                    @endif
                                                                    src="{{ $streamthumbnail }}"
                                                                    alt="Image-Description">

                                                                    <div class="overlay-1">
                                                                        <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($item->date)->format('d
                                                                                    M, Y')}}
                                                                                <div class="d-block d-sm-none mobile-line-break"></div>
                                                                                ({{\Carbon\Carbon::parse($item->start_time)->format('H:i')}}
                                                                                -
                                                                                {{\Carbon\Carbon::parse($item->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">
                                                                                    Subscription
                                                                                </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 px-0 mt-5">
                                                    <!-- <div class="live-broadcast-related-videos-section-pagination"> -->
                                                        <button class="live-broadcast-related-videos-section-arrow p-0 mx-2"
                                                            id="live-broadcast-related-videos-section-prevPage" disabled>
                                                            ← PREV <span
                                                                class="live-broadcast-related-videos-section-nav-text d-none">PREV</span>
                                                        </button>
                                                        <div
                                                            class="live-broadcast-related-videos-section-custom-pagination xcv">
                                                            @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 my-1">{{ $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 d-none">NEXT</span>
                                                            NEXT →
                                                        </button>
                                                    <!-- </div> -->
                                                </div>
                                                {{-- pagination links --}}
                                                @endif




                                            </div>
                                        </div>


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

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--Main_Slider-->
</main>
<!-- Main page -->


<!-- Social Share Modal -->
<div class="modal sharemodaldivparel" id="sharemodal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog sharemodaldiv">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Share video</h5>
                <button type="button" class="btn-close border-0 outline-0" data-bs-dismiss="modal" style="background-color:transparent !important;"> <i class="fa fa-times" aria-hidden="true"></i> </button>
            </div>
            <div class="modal-body p-0">
                <div class="copy-link-section text-dark w-100 border-bottom p-3 mx-0 my-2">
                    <button type="button" class="btn d-flex flex-direction-column flex-wrap justify-content-center align-items-center mb-2 copy-link-section-btn" onclick="copyLink()"> <i class="fa fa-link" aria-hidden="true"></i> </button>
                    <span id="copy-link-button-text" class="d-block text-secondary mb-0 pl-0"> copy link </span>
                </div>
                <div id="share" class="p-3"></div>
            </div>
            <div class="modal-footer d-none">
                <button type="button" class="btn btn-danger d-none d-sm-block" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<input type="text" id="cpLinkInput" class="d-none" value="">
<!-- Social Share Modal -->

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



@endsection

@section('custom-script')

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!--<script src="https://kit.fontawesome.com/7368c40b21.js" crossorigin="anonymous"></script>-->

<!-- jsSocials scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials.min.js"></script>
<!--<script src="{{ asset('jsSocials/jsSocials.min.js') }}"></script>-->
<script src="{{ asset('jsSocials/script.js') }}"></script>
<!-- jsSocials scripts -->

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
{{-- //auto play upcoming video, checking every time --}}
<script>
    // Wait for the entire page to load
    document.addEventListener("DOMContentLoaded", function() {
      
        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();
                    }
                }
            });
        }, 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