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

<!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">-->

<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" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelementplayer.css">
<link rel="stylesheet" href="{{url('front/video-player/dist/jump-forward/jump-forward.css')}}">
<link rel="stylesheet" href="{{url('front/video-player/dist/skip-back/skip-back.css')}}">
<link rel="stylesheet" href="{{url('front/video-player/dist/speed/speed.css')}}">

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

@if(isset($video->description) && $video->description !== "")
    <meta property="og:description" content="{{ trim(strip_tags($video->description)) }}">
@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">
@endif

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

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

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

<!-- Twitter Card meta tag -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="{{$video->landscape_thumbnail}}">

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




<style>
    .pagination {
        font-family: 'Merriweather', serif !important;
        display: inline-flex;
    }

    a.page-link {
        font-family: 'open sans', sans-serif;
        font-weight: 400 !important;
        font-size: 18px !important;
    }

    /* .page-item:last-child .page-link :hover{
background-color:red;
 background: red!important;
} */
    .pagination li a.page-link:hover {
        background: #DFA326;
        border-radius: 15% !important;

    }

    .pagination li:first-child a.page-link:hover {
        background: #DFA326;
        border-radius: 15% !important;
    }

    .pagination li:last-child a.page-link:hover {
        /* background-color: transparent; */
        background: #DFA326;
        border-radius: 15% !important;
    }

    .pagination li a.page-link {
        color: #fff !important;
        /* background: transparent; */
        /* background: #000; */
        background-color: transparent;
        font-size: 20px;
        font-weight: 600;
        line-height: 38px;
        height: 40px;
        width: 40px;
        /* font-family: "Merriweather', serif" */
        padding: 0;
        margin: 0 5px;
        border: none;
        /* border-radius: 50%; */
        border-radius: 50%;
        display: block;
        overflow: hidden;
        position: relative;
        z-index: 1;
        transition: all 0.5s ease 0.2s;
    }

    .button {
        width: 19%;
        height: 50px;
        border-radius: 5px;
        border: none;
        color: white;

        font-size: .75rem;
        float: left;
        margin: 5px;
        font-weight: 600;
        /* font-family: "open sans, sans-serif" */
        /* background-color: #2e343a;
  border-color:none */

    }

    .button:hover {
        background-color: #dfa326 !important;
        color: #000f1e
    }

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

    .breadcrumb {
        margin-top: 20px;
    }

    #player1,
    #player1_html5 {
        width: 100% !important;
        object-fit: contain;
        /*height: 500px;*/
        height: auto;
    }

    .pt-80 {
        padding-top: 4rem !important;
    }

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

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

    .live_streaming_section {
        position: relative;
    }

    @media (max-width:767px) {
        .live_streaming_btn_section_2 {
            width: 80px !important;
            height: 80px !important;
            position: absolute;
            top: -30px;
            right: 10px;
        }

        .live_streaming_btn_section_3 {
            width: 100px !important;
            height: 80px !important;
            position: absolute;
            top: -30px;
            right: calc(50% - 50px);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #mob_rating_div {
            max-width: 150px !important;
            left: -15px !important;
        }

        .likeiconbtn-btn {
            width: 80;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            outline: none;
            background-color: transparent !important;
            overflow: hidden !important;
            box-shadow: none !important;
            z-index: 9999 !important;
        }

        .wrapper-icon-cirlce {
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            outline: none;
            border-radius: 50% !important;
            border: 2px solid #fff;
            background-color: transparent;
            overflow: hidden !important;
        }

        .active-wrapper-icon-circle {
            border: none;
            background-color: #DFA324 !important;
        }

        .wrapper-icon-cirlce i {
            font-size: 1em;
            display: block;
        }

        #dislike-wrapper-icon-circle i {
            margin-left: 10px;
            transform: rotate(180deg);
        }

        #dislike-wrapper-icon-circle {
            margin-left: 10px;
        }
    }

    .likeiconbtn-btn:active,
    .likeicon-btn:focus {
        background-color: transparent !important;
    }

    @media only screen and (min-width : 768px) and (max-width : 991px) {
        .live_streaming_btn_section_2 {
            width: 100px !important;
            height: 100px !important;
            position: absolute;
            top: 0;
            right: 10px;
        }

        .live_streaming_btn_section_3 {
            width: 100px !important;
            height: 100px !important;
            position: absolute;
            top: 0;
            right: 100px;
        }

        .likeiconbtn-btn {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            outline: none;
            background-color: transparent !important;
            overflow: hidden !important;
            box-shadow: none !important;
            z-index: 9999 !important;

        }

        .wrapper-icon-cirlce {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            outline: none;
            border-radius: 50% !important;
            border: 2px solid #fff;
            background-color: transparent !important;
            overflow: hidden !important;
        }

        .active-wrapper-icon-circle {
            border: none;
            background-color: #DFA324 !important;
        }

        .wrapper-icon-cirlce i {
            font-size: 1.4em;
            display: block;
        }

        #dislike-wrapper-icon-circle i {
            transform: rotate(180deg);
        }
    }

    @media (min-width : 992px) {

        .live_streaming_btn_section_2 {
            width: 100px !important;
            height: 100px !important;
            position: absolute;
            top: 0;
            right: 10px;
        }

        .live_streaming_btn_section_3 {
            width: 120px !important;
            height: 100px !important;
            position: absolute;
            top: 0;
            right: calc(50% - 60px);
        }

        .likeiconbtn-btn {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            outline: none;
            background-color: transparent !important;
            overflow: hidden !important;
            box-shadow: none !important;
            z-index: 9999 !important;

        }

        .wrapper-icon-cirlce {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            outline: none;
            border-radius: 50% !important;
            border: 2px solid #fff;
            background-color: transparent;
            overflow: hidden !important;
        }

        .active-wrapper-icon-circle {
            border: none;
            background-color: #DFA324 !important;
        }

        .wrapper-icon-cirlce i {
            font-size: 1.4em;
            display: block;
        }

        #dislike-wrapper-icon-circle i {
            transform: rotate(180deg);
        }
    }

    /* read more/less css styling */
    .video-description {
        --line-clamp: 3;
    }

    .video-description p:first-of-type {
        display: -webkit-box;
        -webkit-line-clamp: var(--line-clamp);
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .read-more__checkbox {
        clip: rect(0 0 0 0);
        clip-path: inset(100%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .read-more__checkbox~.read-more__label {
        cursor: pointer;
        font-size: 1em;
        font-weight: 700;
        text-decoration: underline;
        transform: translateY(-10px);
    }

    /* Focus and hover styles for accessibility! */
    .read-more__checkbox:focus~.read-more__label {
        border-bottom: 1px solid #fff;
        /*box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);*/
    }

    .read-more__checkbox:hover~.read-more__label {
        text-decoration: none;
    }

    .read-more__checkbox~.read-more__label::before {
        content: attr(data-read-more);
    }

    .read-more__checkbox:checked~.read-more__label::before {
        content: attr(data-read-less);
    }

    .read-more__checkbox:checked~.readmoreptext {
        --line-clamp: none;
        -webkit-line-clamp: var(--line-clamp);
    }

    /* read more/less css styling */

    .single-video-page-details {
        margin-top: 30px;
    }

    .list-unstyled {
        padding-top: 20px;
    }

    /*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) {

        .container {
            padding-left: 0px !important;
            padding-right: 0px !important;
        }

        .single-video-page-details,
        .sm-breadcrumb {
            padding-left: 15px !important;
            padding-right: 15px !important;
        }

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

        .my-video {
            borderL px colif red;
            ,
        }

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

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

        }

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

        .modal-content {
            /*background-color: #16202A !important;*/
            /*color: #fff;*/
            border-bottom-left-radius: 0 !important;
            border-bottom-right-radius: 0 !important;
        }

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

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

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

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

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

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

        .jssocials-shares {
            display: flex;
        }

        /*.socialshareiconbtn-btn{*/
        /*  width:100% !important;*/
        /*  justify-content:center !important;*/
        /*}*/
    }

    /*additional styling */

    @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;
            position: relative;
        }

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

    @media screen and (min-width: 576px) and (max-width:768px) {
        .gird-view-videos .item {
            width: 100% !important;
            float: none !important;
            margin: 0px !important;
        }
    }

    /* iPads (landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

        /* Styles */
        .item {
            width: 48% !important;
            float: left !important;
            margin: 5px;
        }
    }

    /* iPads (portrait) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
        .item {
            width: 48% !important;
            float: left !important;
            margin: 5px;
        }
    }


    @media (max-width:768px) {
        .button {
            width: 100% !important;
            float: none;
            margin-bottom: 10px !important;
            margin-top: 10px !important;
            margin-left: 0px !important;
            margin-right: 0px !important
                /* background-color: #2e343a;
  border-color:none */

        }
    }


    @media (min-width:768px) {
        .button {
            width: 47% !important;
            margin-bottom: 10px !important;
            margin-top: 10px !important;
            /* background-color: #2e343a;
  border-color:none */

        }

        /*-- potrait --*/
        .vedio_symbol .fa-play {
            font-size: 30px !important;
        }

        .vedio_symbol .fa-thumbs-up,
        .vedio_symbol .fa-thumbs-down,
        .vedio_symbol .fa-eye {
            font-size: 30px !important;
        }
    }


    @media (min-width:1100px) {
        .button {
            width: 19% !important;
            margin-bottom: 10px !important;
            margin-top: 10px !important;
            /* background-color: #2e343a;
  border-color:none */

        }


    }

    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
        .flex-nowrap {
            -ms-flex-wrap: nowrap !important;
            flex-wrap: wrap !important;
        }
    }

    @media only screen and (min-width: 992px) {
        .flex-nowrap {
            -ms-flex-wrap: nowrap !important;
            flex-wrap: wrap !important;
        }

        #player1,
        #player1_html5 {
            width: 100% !important;
            object-fit: contain;
            height: auto;
        }

        .episode-display-btn {
            width: 18% !important;
            margin: 2vh 1% !important;
        }
    }

    @media(max-width:576px) {
        .media-wrapper {
            display: block !important;
            width: 100% !important;
            max-height: 30vh;
            padding: 0 !important;
            margin: 0 !important;
            overflow: hidden !important;
        }

        .media-wrapper div:first-child {
            height: 100% !important;
            margin: 0 !important;
        }

        video {
            height: 100% !important;
        }

        .pr-lineup-border-line {
            transform: translateY(-8px);
        }

        .mb-category-rel-vids-title {
            font-size: 16px !important;
        }

        .vjs-poster {
            width: 100%;
            height: 100% !important;
        }
    }

    @media(min-width:1199px) {
        .media-wrapper {
            max-height: 720px;
            overflow: hidden !important;
            /* border:3px solid red; */
        }

        video {
            height: 720px;
            object-fit: fill !important;
            /* border:3px solid yellow; */
        }

        .video-lg-fullscreen {
            height: 100% !important;
            border: 5px solid pink !important;
        }
    }

    .video-lg-fullscreen {
        height: 100% !important;
    }
</style>
<style>
    @media(min-width:992px) {
        .orientation-message-block {
            display: none !important;
        }

        .sp-video-item {
            width: 19.48% !important;
            /* width: 238.08px !important;  */
            /* height:398.35px !important; */
            margin-right: 3px !important;
            margin-left: 3px !important;
        }
    }

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

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

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

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

    @media (orientation: landscape) and (max-width: 991px) and (min-height: 576px) {
        .orientation-message-block {
            display: none !important;
        }
    }

    /*landscape-orientation-message-block*/
    @media(orientation: landscape) and (max-width:992px) and (max-height: 576px) {
        .landscape-orientation-video-play-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: #000F1E;
            z-index: 999999999999;
            /* Set a higher value for the z-index */
            display: flex;
            justify-content: center;
            align-items: center;
            background-size: 100% 100%;
            background-position: center;
        }

        .landscape-orientation-video-play-screen .fullscreen_btn {
            width: auto;
            height: auto;
            /* background-color: #ED3833; */
            display: flex;
            justify-content: center;
            align-items: center;
            /* border-radius: 50%; */
            border: none;
            outline: none;

            background-color: rgba(0, 0, 0, 0);
            border: 1px solid rgb(255, 255, 255);
            padding: 15px 40px;
            border-radius: 10px;
            animation: shadow-pulse 1.5s infinite;
        }

        .landscape-orientation-video-play-screen .fullscreen_btn i {
            color: #ffffff;
            font-size: 1.5em;
        }

        @keyframes shadow-pulse {
            0% {
                box-shadow: 0 0 0 0px rgba(230, 51, 46, 0.4);
            }

            100% {
                box-shadow: 0 0 7px 25px rgba(230, 51, 46, 0);
            }
        }


        /* hide entire page */
        header,
        footer {
            display: none !important;
        }

        /* hide entire page */
    }

    @media not all and (orientation: landscape) and (max-width:992px) and (max-height: 576px) {
        .landscape-orientation-video-play-screen {
            display: none !important;
        }
    }

    /*landscape-orientation-message-block*/

    /* additional pagination styling */

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

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

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

        .live-broadcast-related-videos-section-custom-pagination {
            width: 48% !important;
            flex-wrap: wrap;
            flex-shrink: 0 !important;
        }

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

        .live-broadcast-related-videos-section-page-number,
        .live-broadcast-related-videos-second-section-page-number {
            margin-bottom: 5px !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;
        }

        #sharemodal {
            z-index: 9999 !important;
        }
    }

    /* temporary styling here - will move later */
    .live-broadcast-related-videos-section,
    .live-broadcast-related-videos-second-section {
        border: none !important;
    }

    .live-broadcast-related-videos-section-pagination {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .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,
    .live-broadcast-related-videos-second-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,
    .live-broadcast-related-videos-second-section-active {
        font-size: 1.3em;
        height: 30px;
        width: 30px;
        background-color: #0057b3;
        color: white;
    }



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

    .live-broadcast-related-videos-section-arrow:hover,
    .live-broadcast-related-videos-second-section-arrow:hover {
        color: #0056b3;
    }

    .live-broadcast-related-videos-section-arrow:disabled,
    .live-broadcast-related-videos-second-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,
    .live-broadcast-related-videos-second-section-arrow {
        font-size: 1em;
    }

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

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

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

    /*additional pagination styling */

    /* acive-selected-video-thumbnail-buttons */


    .non-active-video-episode-thumbnail-btn {
        border: none;
        color: #fff;
    }

    .active-video-episode-thumbnail-btn {
        outline: 0.1px solid #DFA323;
        border-radius: 5px;
        color: #DFA323;
    }

    .ep-counter-text-display {
        font-weight: 400;
        position: absolute;
        bottom: -40px;
        text-align: center;
        width: 100%;
    }

    @media(max-width: 575px) {
        .ep-counter-text-display {
            font-weight: 400 !important;
            position: absolute;
            bottom: -40px;
            left: 0;
            font-size: 0.8em;
            text-align: center;
        }

        .video-js .vjs-control-bar {
            height: 30px !important;
        }

        .vjs-loading-spinner {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -10px 0 0 -10px;
            opacity: 0.85;
            text-align: left;
            border: 6px solid rgba(43, 51, 63, 0.7);
            box-sizing: border-box;
            background-clip: padding-box;
            width: 20px !important;
            height: 20px !important;
            border-radius: 10px;
            visibility: hidden;
        }

        video {
            object-fit: fill;
        }

        /* Styles when the video is in fullscreen mode */
        .vjs-tech:fullscreen {
            object-fit: contain !important;
        }
    }


    /*acive-selected-video-thumbnail-buttons */

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

    @media screen and (orientation: portrait) and (max-width: 575px) {

        .portrait-mode-video {
            object-fit: contain;
        }
    }

    @media screen and (orientation: landscape) and (max-width: 575px) {

        video,
        .portrait-mode-video {
            object-fit: fill !important;
        }
    }

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

    .login-message {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 10%;
        left: 0;
        z-index: 99999999999999;
        display: none;
    }

    .featured-text {
        width: auto;
        height: auto;
        padding: 10px 20px;
        color: #fff;
        background: #303841;
        border-radius: 30px;
    }

    .vidplaybtn {
        -webkit-animation: glowing 1500ms infinite;
        -moz-animation: glowing 1500ms infinite;
        -o-animation: glowing 1500ms infinite;
        animation: glowing 1500ms infinite
    }

    @-webkit-keyframes glowing {
        0% {
            background-color: red;
            box-shadow: 0 0 3px red
        }

        50% {
            background-color: #F01;
            box-shadow: 0 0 40px #F01
        }

        100% {
            background-color: red;
            box-shadow: 0 0 3px red
        }
    }

    @-moz-keyframes glowing {
        0% {
            background-color: red;
            box-shadow: 0 0 3px red
        }

        50% {
            background-color: #F01;
            box-shadow: 0 0 40px #F01
        }

        100% {
            background-color: red;
            box-shadow: 0 0 3px red
        }
    }

    @-o-keyframes glowing {
        0% {
            background-color: red;
            box-shadow: 0 0 3px red
        }

        50% {
            background-color: #F01;
            box-shadow: 0 0 40px #F01
        }

        100% {
            background-color: red;
            box-shadow: 0 0 3px red
        }
    }

    @keyframes glowing {
        0% {
            background-color: red;
            box-shadow: 0 0 3px red
        }

        50% {
            background-color: #F01;
            box-shadow: 0 0 40px #F01
        }

        100% {
            background-color: red;
            box-shadow: 0 0 3px red
        }
    }

    @media(min-width:768px) {
        .vidplaybtn {
            width: 40px !important;
            height: 40px !important;
            margin-right: 10px !important;
            right: 5px !important;
            border: 1px solid #dfa356 !important
        }

        .vidplaybtn i {
            margin: 0 !Important;
            margin-top: 2px !important;
            padding: 0 !Important;
            font-size: 35px !important
        }
    }

    @media(max-width:575px) {
        .play-icon-overlay {
            width: 100%;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: calc(50% - 15px);
            z-index: 1000;
        }

        .play-icon-overlay i {
            font-size: 3.5em;
            color: #ffffff;
            opacity: 0.7;
        }
    }

    @media(min-width:576px) {
        .play-icon-overlay {
            display: none;
        }
    }

    .overlay-1 {
        background-image: none !important;
        background-color: black !important;
    }
</style>
@endsection
@section('content')

<script>
    window.addEventListener('load', function () {
        document.querySelector('.loader-wrapper').style.display = 'none';
        document.querySelector('.content-main-block').style.display = 'block';
    });
</script>
<!-- page loader -->
<div id="loader" class="loader-wrapper">
    <span class="loader"></span>
</div>
<!-- page loader -->

<!-- login message -->
<div id="loginmessage" class="login-message">
    <span class="featured-text"> Sign in to save your preferences </span>
</div>
<!-- page loader -->

<!-- landscape-orientation-message-block -->
<div id="landscape-orientation-video-play-screen" class="landscape-orientation-video-play-screen"
    style="background-image: url({{$video->landscape_thumbnail}});">
    <button id="fullscreenbtn" class="fullscreen_btn" onclick="openFullScreen()">
        <i class="fa fa-play" aria-hidden="true"></i>
    </button>
</div>

<!-- landscape-orientation-message-block -->
<main id="content" class="content-main-block" style="display:none;">
    <div class="bg-gray-1100 pt-80">
        <div class="container mx-auto px-md-6 px-xl-7 px-wd-6">
            <nav aria-label="breadcrumb" class="pt-3 pt-md-0 sm-breadcrumb">
                <ol class="breadcrumb dark font-size-1" style="align-items:center;">
                    <li class="breadcrumb-item"><a href="{{url('/')}}" class="text-gray-1300"
                            style="color:#dfa326 !important;">Home</a></li>
                    <li class="breadcrumb-item text-white active" aria-current="page" style="color:#dfa326 !important;">
                        {{$video->slug}}
                    </li>
                </ol>
            </nav>
            <div class="media-wrapper w-100"
                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"
                    data-setup='{"poster": "{{$video->landscape_thumbnail}}"}'
                    style="width:100%!important;height:720px;">
                    @if(isset($video->video_path))
                        <source id="video_src" src="{{ $video->video_path }}" type="video/mp4">
                    @else
                        <source id="video_src" src="" type="video/mp4">
                    @endif
                    <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>
            <div class="d-md-flex align-items-center justify-content-between single-video-page-details">
                <div class="container-fluid single-player-vid-details-container px-3">
                    <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_2 d-flex justify-content-end">
                                <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:20%;">

                                <button id="like-reaction-btn" type="button" class="btn btn-primary likeiconbtn-btn p-0"
                                    data-reaction="like" style="z-index:99999;">
                                    <span id="like-wrapper-icon-circle" class="wrapper-icon-cirlce"> <i
                                            class="fa fa-thumbs-up" aria-hidden="true" style="margin:0;padding:0;"></i>
                                    </span>
                                    <span class="d-none like-video-counter-0">
                                        0
                                    </span>
                                </button>
                                <button id="dislike-reaction-btn" type="button"
                                    class="btn btn-primary likeiconbtn-btn p-0" data-reaction="dislike"
                                    style="z-index:99999;">
                                    <span id="dislike-wrapper-icon-circle" class="wrapper-icon-cirlce"> <i
                                            class="fa fa-thumbs-up" aria-hidden="true" style="margin:0;padding:0;"></i>
                                    </span>
                                    <span class="d-none like-video-counter-0">
                                        0
                                    </span>
                                </button>
                            </div>

                            <div id="mob_rating_div" class="live_streaming_btn_section_3 d-flex justify-content-end"
                                style="width:80% !important;">
                                <div class="in_div pl-3" style="width:100% !important;height:100% important;">
                                    @if(isset($video->getRating->image))
                                        <img style="height: 30px!important;
                                                                                                                                                                                                                            width: auto!important; margin-top:-5px;
                                                                                                                                                                                                                            "
                                            id="specific_video_rating_image_mb"
                                            src="{{url('ratings' . '/' . $video->getRating->image)}}">
                                    @endif
                                    @if(isset($video->getRating))
                                        <span style="font-size:0.7em;" id="specific_rating_description_mb">
                                            {{ $video->getRating->description }} </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <h6
                        class="font-size-24 text-white font-weight-semi-bold font-secondary mb-3 mb-md-1 pt-4 specific-video-title-span-coming-soon-block">
                        <span style="font-size:16px;color:#dfa326 !important;margin-right:5px;"
                            id="video_title_input_block"> {{strtoupper($video->title)}} </span>
                        @if(!isset($video->video_path))
                            <button class="btn btn-xs btn-warning ms-1" id="video_coming_soon_input_block">Coming
                                Soon</button>
                        @endif
                    </h6>


                    <p class="category-page-subtitle-slide" style="font-size:0.8em;" id="video_sub_title_input_block">
                        {{Str::words($video->sub_title)}}
                    </p>
                    <ul
                        class="list-unstyled nav nav-meta font-secondary mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">
                        <li class="text-white flex-shrink-0 flex-shrink-md-1" id="video_created_at_input_block">
                            {{$video->created_at->format('d M, Y')}}
                        </li>
                        <li class="text-white flex-shrink-0 flex-shrink-md-1" id="video_duration_input_block">
                            {{$video->duration}}
                        </li>
                        <li class="text-white flex-shrink-0 flex-shrink-md-1">
                            @if(isset($video->getCategories))
                                @foreach($video->getCategories as $category)
                                    @if(isset($category->getCategory->name))
                                        <a href="{{route('front.getVideosByCategory', ['device' => 'dp', 'slug' => $category->getCategory->slug])}}"
                                            class="d-none d-xl-inline-block">
                                            {{$category->getCategory->name}}
                                        </a>
                                        <a href="{{route('front.getVideosByCategory', ['device' => 'mb', 'slug' => $category->getCategory->slug])}}"
                                            class="d-inline-block d-xl-none">
                                            {{$category->getCategory->name}}
                                        </a>
                                        @if(!$loop->last)
                                            <span>,</span>
                                        @endif

                                    @endif

                                @endforeach
                            @endif
                        </li>
                        <li class="d-none d-md-block">
                            @if(isset($video->getRating->image))
                                <img id="specific_video_rating_image"
                                    style="height: 30px!important;
                                                                                                                                                                                                                    width: auto!important; margin-top:-5px;
                                                                                                                                                                                                                    "
                                    src="{{url('ratings' . '/' . $video->getRating->image)}}">
                            @endif

                            @php
                                $main_video_rating_img = '';
                                $main_video_rating_img_description = '';

                                if (isset($video->getRating->image)) {
                                    $temp_main_video_rating_image = "https://verity.live/ratings/{$video->getRating->image}";
                                    $main_video_rating_img = $temp_main_video_rating_image;

                                    $main_video_rating_img_description = $video->getRating->description;
                                } else {

                                    $main_video_rating_img = '';
                                    $main_video_rating_img_description = '';
                                }

                                $retrieved_video_description = strip_tags($video->description);
                                $decoded_video_description = htmlspecialchars_decode($retrieved_video_description);

                            @endphp
                        </li>
                        <li class="d-none d-md-block" id="specific_rating_description">
                            @if(isset($video->getRating))
                                {{ $video->getRating->description }}
                            @endif
                        </li>
                    </ul>
                    <div class="video-description" id="specific_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>
                    <div class="tab-content">

                        <div class="row no-gutters">


                            <!--Dakar Daily Section Start-->
                            @if (isset($combinedVideoEpisodesCol))
                                                <!--Dakar Daily Section Start-->
                                                <div class="w-100">
                                                    <div class="border-g-1200-op mb-1">

                                                        <div>
                                                            <div class="dark">
                                                                @if (isset($combinedVideoEpisodesCol))
                                                                                                    @if (isset($display_device) && $display_device === 'mb')
                                                                                                                                        @php
                                                                                                                                            $groupedVideos = $combinedVideoEpisodesCol->chunk(3);
                                                                                                                                            $groupIterationCount = 3;
                                                                                                                                        @endphp
                                                                                                    @elseif(isset($display_device) && $display_device === 'dp')
                                                                                                                                        @php
                                                                                                                                            $groupedVideos = $combinedVideoEpisodesCol->chunk(10);
                                                                                                                                            $groupIterationCount = 9;
                                                                                                                                        @endphp
                                                                                                    @else
                                                                                                                                        @php
                                                                                                                                            $groupedVideos = $combinedVideoEpisodesCol->chunk(5);
                                                                                                                                            $groupIterationCount = 5;
                                                                                                                                        @endphp
                                                                                                    @endif
                                                                                                    <div class="col-lg-12 px-1">
                                                                                                        <div class="row media-wrap-row-video-section">
                                                                                                            @php        $groupCount = 0; @endphp
                                                                                                            @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 mx-0"
                                                                                                                                                    style="padding-left:5px !important;">
                                                                                                                                                    @foreach ($group as $videoitem)
                                                                                                                                                                                            @if ($videoitem instanceof App\Models\Video)
                                                                                                                                                                                                                                    @php 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                $item = $videoitem;
                                                                                                                                                                                                                                        if ($item->ppv_listing_type == 'Pay Per View' && $video_subscription_status == 'not-subscribed') {
                                                                                                                                                                                                                                            $item->video_path = '';
                                                                                                                                                                                                                                        }
                                                                                                                                                                                                                                    @endphp
                                                                                                                                                                                                                                    <div id="video_content_main-video_{{$item->id}}"
                                                                                                                                                                                                                                        class="item landscape-type-item live-broadcast-related-videos-section-video-container live-broadcast-related-videos-section-video-container-mb video-episode-thumbnail-btn active-video-episode-thumbnail-btn mb-4 mt-lg-3"
                                                                                                                                                                                                                                        onclick='getMessage(this, `main-video`, `{{$item->id}}`, `{{$item->video_path}}`, `{{$item->landscape_thumbnail}}`, `{{$item->title}}`, `{{$item->sub_title}}`, `{{$item->created_at->format("d M, Y")}}`, `{{$item->duration}}`, `{{$main_video_rating_img}}`, `{{$main_video_rating_img_description}}`, `{{$decoded_video_description}}`, `{{$item->ppv_listing_type}}`)'
                                                                                                                                                                                                                                        style="position:relative;margin-bottom:20px !important;">
                                                                                                                                                                                                                                        <div
                                                                                                                                                                                                                                            class="featured_img_sp_mb featured_img height-150 img-container mb-0 product d-block">
                                                                                                                                                                                                                                            <div class="play-icon-overlay">
                                                                                                                                                                                                                                                <i class="fa fa-play-circle-o"
                                                                                                                                                                                                                                                    aria-hidden="true"></i>
                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                            <img class="img-fluid img-news image" @if ($display_device == 'mb') src="{{ $item->thumbnail }}"
                                                                                                                                                                                                                                            alt="episode-thumbnail"> @endif
                                                                                                                                                                                                                                            src="{{ $item->landscape_thumbnail }}"
                                                                                                                                                                                                                                            alt="episode-thumbnail">

                                                                                                                                                                                                                                            <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 d-flex justify-content-between style="
                                                                                                                                                                                                                                                            position:relative;">
                                                                                                                                                                                                                                                            <span> {{$item->title}} </span>
                                                                                                                                                                                                                                                            <button type="button" class="vidplaybtn"
                                                                                                                                                                                                                                                                style="background-color:red;width:50px;height:50px;border-radius:50%;display:flex !important;align-items:center;justify-content:center;margin-right:20px;border:none !important;outline none !important;position:absolute;top:0;right:5px;">
                                                                                                                                                                                                                                                                <i class="bi bi-play-fill"
                                                                                                                                                                                                                                                                    style="font-size:40px;color:#fff;"></i>

                                                                                                                                                                                                                                                            </button>
                                                                                                                                                                                                                                                        </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">

                                                                                                                                                                                                                                                        <div
                                                                                                                                                                                                                                                            class="d-block d-sm-none mobile-line-break">
                                                                                                                                                                                                                                                        </div>

                                                                                                                                                                                                                                                        @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>
                                                                                                                                                                                                                                        <p class="p5 ep-counter-text-display">Episode
                                                                                                                                                                                                                                            {{ $loop->iteration }}
                                                                                                                                                                                                                                        </p>
                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                            @else
                                                                                                                                                                                                                                    @php
                                                                                                                                                                                                                                        $item = $videoitem;
                                                                                                                                                                                                                                        if ($item->ppv_listing_type == 'Pay Per View' && $video_subscription_status == 'not-subscribed') {
                                                                                                                                                                                                                                            $item->video_path = '';
                                                                                                                                                                                                                                        }

                                                                                                                                                                                                                                    @endphp
                                                                                                                                                                                                                                    @if($display_device == 'mb')
                                                                                                                                                                                                                                                                        @php
                                                                                                                                                                                                                                                                            $item_thumbnail = $item->potrait_thumbnail;
                                                                                                                                                                                                                                                                        @endphp
                                                                                                                                                                                                                                    @else
                                                                                                                                                                                                                                                                        @php
                                                                                                                                                                                                                                                                            $item_thumbnail = $item->thumbnail;
                                                                                                                                                                                                                                                                        @endphp
                                                                                                                                                                                                                                    @endif
                                                                                                                                                                                                                                    <div id="video_content_episode_{{$item->id}}"
                                                                                                                                                                                                                                        class="item landscape-type-item live-broadcast-related-videos-section-video-container live-broadcast-related-videos-section-video-container-mb video-episode-thumbnail-btn mb-4 mt-lg-3"
                                                                                                                                                                                                                                        onclick='getMessage(this, `episode`, `{{$item->id}}`, `{{$item->video_path}}`, `https://verity-tv-storage.s3-accelerate.amazonaws.com/video-thumbnail/{{$item->thumbnail}}`, `{{$item->title}}`, `{{$item->sub_title}}`, `{{$item->created_at->format("d M, Y")}}`, `{{$item->duration}}`, `{{$main_video_rating_img}}`, `{{$main_video_rating_img_description}}`, `{{$decoded_video_description}}`, `{{$item->ppv_listing_type}}`)'
                                                                                                                                                                                                                                        style="position:relative;margin-bottom:25px !important;">
                                                                                                                                                                                                                                        <div
                                                                                                                                                                                                                                            class="featured_img_sp_mb featured_img height-150 img-container mb-0 product d-block">
                                                                                                                                                                                                                                            <div class="play-icon-overlay">
                                                                                                                                                                                                                                                <i class="fa fa-play-circle-o"
                                                                                                                                                                                                                                                    aria-hidden="true"></i>
                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                            <img class="img-fluid img-news image"
                                                                                                                                                                                                                                                src="{{ $item_thumbnail }}" alt="episode-thumbnail">

                                                                                                                                                                                                                                            <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 d-flex justify-content-between"
                                                                                                                                                                                                                                                            style="position:relative;">
                                                                                                                                                                                                                                                            <span> {{$item->title}} </span>
                                                                                                                                                                                                                                                            <button type="button" class="vidplaybtn"
                                                                                                                                                                                                                                                                style="background-color:red;width:50px;height:50px;border-radius:50%;display:flex !important;align-items:center;justify-content:center;margin-right:20px;border:none !important;outline none !important;position:absolute;top:0;right:5px;">
                                                                                                                                                                                                                                                                <i class="bi bi-play-fill"
                                                                                                                                                                                                                                                                    style="font-size:40px;color:#fff;"></i>

                                                                                                                                                                                                                                                            </button>
                                                                                                                                                                                                                                                        </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">

                                                                                                                                                                                                                                                        <div
                                                                                                                                                                                                                                                            class="d-block d-sm-none mobile-line-break">
                                                                                                                                                                                                                                                        </div>

                                                                                                                                                                                                                                                        @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 ($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
                                                                                                                                                                                                                                                    </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>
                                                                                                                                                                                                                                        <p class="p5 fw-bold ep-counter-text-display">Episode
                                                                                                                                                                                                                                            {{ ($groupCount * $groupIterationCount) + $loop->iteration }}
                                                                                                                                                                                                                                        </p>
                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                            @endif
                                                                                                                                                    @endforeach
                                                                                                                                                </div>
                                                                                                                                                @php            $groupCount++; @endphp
                                                                                                            @endforeach
                                                                                                        </div>
                                                                                                    </div>
                                                                                                    {{-- pagination links --}}
                                                                                                    <div class="d-flex justify-content-center flex-wrap mt-5">
                                                                                                        <div
                                                                                                            class="live-broadcast-related-videos-section-pagination justify-content-start justify-content-sm-center">
                                                                                                            <button class="live-broadcast-related-videos-section-arrow p-0 mx-2"
                                                                                                                id="live-broadcast-related-videos-section-prevPage" disabled>
                                                                                                                <span class="live-broadcast-related-videos-section-nav-text">←
                                                                                                                    PREV</span>
                                                                                                            </button>
                                                                                                            <div
                                                                                                                class="live-broadcast-related-videos-section-custom-pagination">
                                                                                                                @foreach ($groupedVideos as $group)
                                                                                                                    @if ($loop->first)
                                                                                                                        <div
                                                                                                                            class="live-broadcast-related-videos-section-page-number live-broadcast-related-videos-section-active ">
                                                                                                                            {{ $loop->iteration }}
                                                                                                                        </div>
                                                                                                                    @else
                                                                                                                        <div class="live-broadcast-related-videos-section-page-number"
                                                                                                                            onclick="testfunc1y()">{{ $loop->iteration }}</div>
                                                                                                                    @endif
                                                                                                                @endforeach
                                                                                                            </div>
                                                                                                            <button class="live-broadcast-related-videos-section-arrow p-0 mx-2"
                                                                                                                id="live-broadcast-related-videos-section-nextPage">
                                                                                                                <span
                                                                                                                    class="live-broadcast-related-videos-section-nav-text">NEXT
                                                                                                                    →</span>
                                                                                                            </button>
                                                                                                        </div>
                                                                                                    </div>
                                                                                                    {{-- pagination links --}}
                                                                @endif
                                                            </div>
                                                        </div>


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

                        </div>
                    </div>


                    <!-- Social Share Modal -->
                    <div class="modal sharemodaldivparel" id="sharemodal" data-bs-dismiss="modal"
                        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 -->

                    <div class="container d-flex justify-content-center flex-wrap pt-3"
                        style="display:none !important;">
                        {!! $video->video_part->links() !!}
                    </div>

                </div>

            </div>

        </div>
    </div>


    {{-- Video player END--}}

    <div class="bg-gray-1100 space-1" style="padding-top:0 !important;">
        <div class="bg-gray-1100 space-1">
            <div class="container mx-auto px-md-6 px-xl-7 px-wd-6 pb-3 pt-0">
                <!-- <div class="container px-md-5 mb-1 container mx-auto pt-4 pb-1"> -->
                <div class="pb-4">
                    <div class="border-g-1200-op mb-1 pb-3">
                        <div class="home-section" id="sports">
                            <header id="current_news"
                                class="d-flex align-items-center justify-content-between mb-5 w-100">
                                <div class="font-size-20 font-weight-bold mb-3 mb-md-0 text-golden font-secondary mb-category-rel-vids-title"
                                    style="color:#dfa326 !important;">
                                    Related Videos
                                </div>
                                <div class="d-block border-top col p-0 mx-3 border-gray-6830 pr-lineup-border-line">
                                </div>
                            </header>
                        </div>
                        <div class="tab-content">
                            <div class="row no-gutters">
                                @if(isset($relatedVideos))
                                    @include('front.design.video-grid-portrait', ['videos' => $relatedVideos, 'pagination' => true])
                                    {{-- @include('front.video.video-portrait', ['videos'=> $relatedVideos]) --}}
                                @endif
                            </div>

                        </div>
                        {{-- ========================================================--}}


                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@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 src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelement-and-player.min.js"></script>
<script src="{{url('front/video-player/dist/jump-forward/jump-forward.js')}}"></script>
<script src="{{url('front/video-player/dist/skip-back/skip-back.js')}}"></script>
<script src="{{url('front/video-player/dist/speed/speed.js')}}"></script>
<script>

    let player = videojs('my-video');

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

    let playingVideoId, playingVideoType;
    playingVideoId = null;
    MainplayingVideoId = null;
    playingVideoType = 'main-video';
    userAuthStatus = null;
    videoUserSubscritionStatus = null;



    //program duration
    player.on('loadedmetadata', () => {

        programDuration = player.duration();
    });


    //fallback incase 'loadedmetadata' event fails to fire
    player.on('canplay', () => {

        if (!programDuration) { programDuration = player.duration(); }
    });


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

    player.on('pause', function () {
        videoPlayerPausedDisplay();
        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);

    }

    function resetVideoViewVars() {

        viewedTime, totalViewedTime, programDuration = 0;
        isBuffering = false;
    }


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

        let programValidViewCountTime = programDuration * 0.79;

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

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

                url: `/ajax/uploadRegularVideoView/${playingVideoType}/${playingVideoId}`,
                success: () => { console.log('view captured'); }
            });
        }
    }, 1000);


    //VARS DEFINITIONS                                                                    
    let videoParts = null;
    let currentEpisodeVideoIndex = 0;

    var mediaElements = $('#player1');
    var vidPlayer = document.getElementById("my-video");
    var isViewUploded = false

    var videoId = ;

    //Upload view if video current time is more than half played
    // setInterval(function () {
    //     if ((vidPlayer.duration * 0.79 < vidPlayer.currentTime) && (isViewUploded == false)) {
    //         isViewUploded = true
    //         $.ajax({
    //             type: "GET",

    //             url: "{{route('front.uploadVideoView', '')}}" + "/" + videoId,
    //             success: function (data) { console.log('view captured function 2');}
    //         });
    //     }
    // }, 1000);

    //to-be refactored
    for (var i = 0, total = mediaElements.length; i < total; i++) {
        var features = ['playpause', 'current', 'progress', 'duration', 'volume', 'skipback', 'jumpforward', 'speed', 'fullscreen'];
    }

    $(window).on('keydown', function (event) {
        if (event.keyCode == 123) {
            // alert('Entered F12');
            return false;
        } else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
            // alert('Entered ctrl+shift+i')
            return false; //Prevent from ctrl+shift+i
        } else if (event.ctrlKey && event.keyCode == 73) {
            // alert('Entered ctrl+shift+i')
            return false; //Prevent from ctrl+shift+i
        } else if (event.ctrlKey && event.keyCode == 117) {
            // alert('Entered ctrl+u');
            return false; //Prevent from ctrl+shift+i
        }
    });


    //Relaed-videos playback functions
    function onMouseOverTrailer(id, trailerId) {
        var el = $('#related-video-' + id)[0];
        stopAllOtherVideos(id);
        el.muted = true;
        el.play();
    }

    function onMouseLeaveTrailer(id) {
        var el = $('#related-video-' + id)[0];
        el.pause();
        el.currentTime = 0;
    }

    //stop video playback when trailer leaves viewport (crucial for mobile screens)
    $(window).on('scroll', function () {
        $("video").each(function () {
            var video = $(this)[0];
            var videoTop = $(video).offset().top;
            var videoBottom = videoTop + $(video).height();
            var windowTop = $(window).scrollTop();
            var windowBottom = windowTop + $(window).height();

            if (video.id == "my-video_html5_api") {
                return;
            }

            var videoClass = video.classList.value;

            // Check if the video is the closest one to the top of the viewport
            var isClosestToTop = videoTop >= windowTop && videoTop < windowBottom;

            // Check if the video is in the viewport
            if (!isClosestToTop) {
                if (!video.paused) {

                    console.log('pausing video');
                    video.pause();
                    // video.currentTime = 0;
                }
            }


        });
    });

    function stopAllOtherVideos(id) {
        var allVideos = document.querySelectorAll('video');

        allVideos.forEach(function (video) {

            var videoClass = video.classList.value;
            var videoId = 'related-video-' + id;

            if (!video.id == videoId) {
                video.pause();
                video.currentTime = 0;
            }


        });
    }

    function stopAllOtherVideosWithId(videoId) {
        var allVideos = document.querySelectorAll('video');

        allVideos.forEach(function (video) {

            if (!(video.id == videoId)) {
                video.pause();
                video.currentTime = 0;
            }
        });
    }

    var allVideos = document.querySelectorAll('video');

    allVideos.forEach(function (video) {

        video.addEventListener('play', function () {
            stopAllOtherVideosWithId(video.id);
        })
    });

    //Add an event listener to detect when the user has scrolled away from the video element
    $(window).on('scroll', function () {
        $("video").each(function () {
            var video = $(this)[0];
            var videoTop = $(video).offset().top;
            var videoBottom = videoTop + $(video).height();
            var windowTop = $(window).scrollTop();
            var windowBottom = windowTop + $(window).height();

            // Check if the video is in the viewport
            if (videoBottom > windowTop && videoTop < windowBottom) {

            } else {
                // Video is out of the viewport, stop and reset playback
                if (!video.paused) {
                    console.log('pausing video function 2');
                    video.pause();
                    video.currentTime = 0;
                }
            }
        });
    });
    //Related videos playback functions

    //function: Like/dislike video function
    function likeDislikeVideo(action, id) {
        likeDislikeURL = "{{route('front.ajaxLikeDislikeVideo', ['', ''])}}" + "/" + action + "/" + id;
        $.ajax({
            type: "GET",
            url: likeDislikeURL,
            success: function (data) {
                if (action == 'like') {
                    $('.like-video-counter-' + id).html(data);
                }

                if (action == 'dislike') {
                    $('.dislike-video-counter-' + id).html(data);
                }

            }
        });
    }

    //function: pause video on scroll
    var videoOnScroll = $('#my-video_html5_api')[0];

    function checkScroll() {
        var fraction = 0.3; // Play when 80% of the player is visible.
        if (videoOnScroll != undefined) {
            var x = videoOnScroll.offsetLeft,
                y = videoOnScroll.offsetTop,
                w = videoOnScroll.offsetWidth,
                h = videoOnScroll.offsetHeight,
                r = x + w, //right
                b = y + h, //bottom
                visibleX, visibleY, visible;

            visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
            visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

            visible = visibleX * visibleY / (w * h);

            if (visible > fraction) {
                if (!videoOnScroll.muted) {
                    // Video is already unmuted by the user
                    videoOnScroll.play();
                } else {
                    // Video is muted, mute and autoplay
                    videoOnScroll.muted = true;
                    videoOnScroll.load();
                    videoOnScroll.play();
                }
                //videoOnScroll.muted = true;
                // videoOnScroll.load();
                // videoOnScroll.play();
                //videoOnScroll.muted = false;
            } else {
                if (!videoOnScroll.muted) {
                    videoOnScroll.pause();
                } else {
                    videoOnScroll.muted = true;
                    videoOnScroll.pause();
                }
            }
        }
    }

    window.addEventListener('scroll', checkScroll, false);
    window.addEventListener('resize', checkScroll, false);
    //function: pause video on scroll

    //Auto-play to next episode on video end
    function getMessage(element, video_type, video_id, video_path, thumbnail, title, sub_title, created_at, duration, rating_img_path, rating_description, video_description, ppv_listing_type) {

        if (ppv_listing_type == 'Pay Per View') {

            if (videoUserSubscritionStatus == 'not-subscribed') {
                window.location.href = 'https://verity.live/get-subscription';
            }
        }
        //alert(element, video_path, thumbnail, title, sub_title, created_at, duration, rating_img_path, rating_description, video_description);

        // Get all elements with the specified class name
        let elements = document.getElementsByClassName('video-episode-thumbnail-btn');
        let vidSource;

        // Iterate through the elements and apply the no-border style
        for (let i = 0; i < elements.length; i++) {
            if (elements[i].classList.contains('active-video-episode-thumbnail-btn')) {
                elements[i].classList.remove('active-video-episode-thumbnail-btn');
            }
            if (!elements[i].classList.contains('non-active-video-episode-thumbnail-btn')) {
                elements[i].classList.add('non-active-video-episode-thumbnail-btn');
            }
        }


        //set video poster and  source
        element.classList.remove('non-active-video-episode-thumbnail-btn');
        element.classList.add('active-video-episode-thumbnail-btn');

        vidSource = (video_type == "main-video") ? video_path : `https://verity-tv-storage.s3-accelerate.amazonaws.com/uploaded-video/${video_path}`;


        //video view capture configuration
        resetVideoViewVars();

        player.ready(function () {
            try {
                // Set the poster image
                player.poster(thumbnail);

                // Set the new video source
                player.src({
                    type: 'video/mp4',
                    src: vidSource
                });

                // Pause the video (if needed)
                player.pause();


            } catch (error) {
            }
        });

        playingVideoId = video_id;
        playingVideoType = video_type;

        initiateVideoReactionUI(playingVideoId, playingVideoType);

        //check and set the episode number
        let episodeNumber = videoParts.indexOf(vidSource);

        if (episodeNumber !== -1) {
            currentEpisodeVideoIndex = episodeNumber;
        }

        //hide/display the coming soon block
        var videoComingSoonBlock = document.getElementById('video_coming_soon_input_block');

        if (videoComingSoonBlock) {
            if (!video_path == "") {
                videoComingSoonBlock.style = 'display:none';
            } else {
                videoComingSoonBlock.style = 'display:inline-block';
            }
        } else {
            // If it doesn't exist, create and insert it after the span
            var newButton = document.createElement('button');
            newButton.className = 'btn btn-xs btn-warning ms-1';
            newButton.id = 'video_coming_soon_input_block';
            newButton.textContent = 'Coming Soon';

            // Find the parent h6 element
            var parentH6 = document.querySelector('.specific-video-title-span-coming-soon-block');

            // Insert the new button after the span
            parentH6.insertBefore(newButton, document.getElementById('video_title_input_block').nextSibling);

            if (!video_path == "") {
                newButton.style = 'display:none';
            } else {
                newButton.style = 'display:inline-block';
            }
        }

        //set video title, sub_title, created_at and duration block, 
        var videoTitle = document.getElementById('video_title_input_block');
        var videoSubTitle = document.getElementById('video_sub_title_input_block');
        var videoDate = document.getElementById('video_created_at_input_block');
        var videoDuration = document.getElementById('video_duration_input_block');
        var videoRatingImg = document.getElementById('specific_video_rating_image');
        var videoRatingImgMb = document.getElementById('specific_video_rating_image_mb');
        var videoRatingDesc = document.getElementById('specific_rating_description');
        var videoRatingDescMb = document.getElementById('specific_rating_description_mb');
        var videoDesc = document.getElementById('specific_video_description');

        videoTitle.innerHTML = title;
        videoSubTitle.innerHTML = sub_title;
        videoDate.innerHTML = created_at;
        videoDuration.innerHTML = duration;


        videoRatingImg.src = rating_img_path;
        videoRatingImgMb.src = rating_img_path;
        videoRatingDesc.innerHTML = rating_description;
        videoRatingDescMb.innerHTML = rating_description;

        var videoDescFullElement = `<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" style="color:#dfa326 !important;" data-read-more="Read more" data-read-less="See less" aria-hidden="true"></label>`;
        videoDesc.innerHTML = videoDescFullElement;

        applyReadMoreLess();

    }

    // Add event listener to detect when the current video ends
    var singlePlayervideoElement = document.getElementById('my-video');
    singlePlayervideoElement.addEventListener("ended", playNextVideo);

    // Function to play the next video
    function playNextVideo() {

        //check if episode is not the last
        if (currentEpisodeVideoIndex < videoParts.length) {
            document.getElementById(`playBtn-${currentEpisodeVideoIndex}`).click();
            currentEpisodeVideoIndex++;
        }
    }
    //Auto-play to next episode on video end


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

    //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();
        }
    });
    //function: pagination functions

    //function: apply the read more/less text
    function applyReadMoreLess() {
        //get the text description content and wrap the text inside a p class
        var videoDescription = document.getElementById("specific_video_description");

        // Get the text content from the div
        var videoDescriptiontextContent = videoDescription.innerText;
        var textLength = videoDescriptiontextContent.length;

        // Replace the videoDescription Element with the following content in the following order
        var videoDescModifiedFullElement = `<input id="read-more-checkbox" type="checkbox" class="read-more__checkbox" aria-hidden="true"> <p class="readmoreptext"> ${videoDescriptiontextContent}</p>  <label for="read-more-checkbox" id="readmoretextid" class="read-more__label" style="color:#dfa326 !important;" data-read-more="Read more" data-read-less="See less" aria-hidden="true"></label>`;
        videoDescription.innerHTML = videoDescModifiedFullElement;

        if (textLength < 1) {
            var videoDescModifiedFullElement = ``;
            videoDescription.innerHTML = videoDescModifiedFullElement;
        }
    }


    //(2)pagination functions for related videos 
    const relatedVideospages = document.querySelectorAll(".live-broadcast-related-videos-second-section");
    const relatedVideospageNumbers = document.querySelectorAll(".live-broadcast-related-videos-second-section-page-number");
    const relatedVideosprevButton = document.getElementById("live-broadcast-related-videos-second-section-prevPage");
    const relatedVideosnextButton = document.getElementById("live-broadcast-related-videos-second-section-nextPage");
    let relatedVideoscurrentPage = 0;

    function relatedVideosshowPage(pageNumber) {
        relatedVideospages.forEach((page, index) => {
            if (index === pageNumber) {
                page.style.display = "block";
            } else {
                page.style.display = "none";
            }
        });
    }

    function relatedVideosupdateButtons() {
        relatedVideosprevButton.disabled = relatedVideoscurrentPage === 0;
        relatedVideosnextButton.disabled = relatedVideoscurrentPage === relatedVideospages.length - 1;
        relatedVideospageNumberstoDislay();
    }

    function relatedVideossetActive() {
        relatedVideospageNumbers.forEach((page, index) => {
            if (relatedVideoscurrentPage === index) {
                page.classList.add("live-broadcast-related-videos-second-section-active");
            } else {
                page.classList.remove("live-broadcast-related-videos-second-section-active");
            }
        });
    }

    function relatedVideospageNumberstoDislay() {

        let relatedVideosactivePageNumber = relatedVideoscurrentPage + 1,
            relatedVideostotalpageNumbers = relatedVideospages.length;

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

        //return array of pages to display
        let relatedVideosprevPageOne = relatedVideosactivePageNumber - 1;
        let relatedVideoprevPageTwo = relatedVideosactivePageNumber - 2;
        let relatedVideosnextPageOne = relatedVideosactivePageNumber + 1;
        let relatedVideostoDisplayPageNumbers;

        //if relatedVideosactivePageNumber is the first, second page
        if (relatedVideosactivePageNumber === 1) {
            relatedVideosprevPageOne = relatedVideosnextPageOne + 1;
            relatedVideoprevPageTwo = relatedVideosprevPageOne + 1;
        }
        if (relatedVideosactivePageNumber === 2) {
            relatedVideoprevPageTwo = relatedVideosnextPageOne + 1;
        }

        //if relatedVideosactivePageNumber is the last page
        if (relatedVideosactivePageNumber === relatedVideospages.length) {
            relatedVideosnextPageOne = relatedVideoprevPageTwo - 1;
        }

        (relatedVideosprevPageOne < 1) ? relatedVideosprevPageOne = 0 : relatedVideosprevPageOne;
        (relatedVideoprevPageTwo < 1) ? relatedVideoprevPageTwo = 0 : relatedVideoprevPageTwo;
        (relatedVideosnextPageOne < 1) ? relatedVideosnextPageOne = 0 : relatedVideosnextPageOne;

        relatedVideostoDisplayPageNumbers = [relatedVideosactivePageNumber, relatedVideosprevPageOne, relatedVideoprevPageTwo, relatedVideosnextPageOne];

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

    }

    relatedVideospageNumbers.forEach((page, index) => {
        page.addEventListener("click", function () {
            relatedVideosshowPage(index);
            relatedVideoscurrentPage = index;
            relatedVideosupdateButtons();
            relatedVideossetActive();
        });
    });

    relatedVideosprevButton.addEventListener("click", function () {
        if (relatedVideoscurrentPage > 0) {
            relatedVideoscurrentPage--;
            relatedVideosshowPage(relatedVideoscurrentPage);
            relatedVideosupdateButtons();
            relatedVideossetActive();
        }
    });

    relatedVideosnextButton.addEventListener("click", function () {
        if (relatedVideoscurrentPage < relatedVideospages.length - 1) {
            relatedVideoscurrentPage++;
            relatedVideosshowPage(relatedVideoscurrentPage);
            relatedVideosupdateButtons();
            relatedVideossetActive();
        }

    });
    //function: relatedVideospagination functions


    //CALLING FUNCTIONS
    applyReadMoreLess();
    showPage(currentPage);
    updateButtons();
    relatedVideosshowPage(relatedVideoscurrentPage);
    relatedVideosupdateButtons();

    const video = document.getElementById('my-video_html5_api');
    const fullscreenBtn = document.querySelector('.vjs-fullscreen-control');

    // Listen for fullscreen change events
    document.addEventListener('fullscreenchange', () => {

        const videoElement = document.getElementById('my-video_html5_api');


        if (document.fullscreenElement) {
            if (document.fullscreenElement.id == "my-video") {

                if (!videoElement.classList.contains('portrait-mode-video')) {
                    videoElement.classList.add('portrait-mode-video');
                }

                videoElement.style.height = "";

            }
        }

        else {

            if (videoElement.classList.contains('portrait-mode-video')) {
                videoElement.classList.remove('portrait-mode-video');
            }

            videoElement.style.height = "720px";

            //handle user going back while in landscape mobile mode
            if (window.innerWidth > window.innerHeight) {


                if (!player.paused()) {
                    player.pause();
                    landscapeOrientationChangeSmDisplay();
                    document.getElementsByTagName('body')[0].style.overflow = "auto";
                }
            }
        }

    });


    //video player display for on pause
    function videoPlayerPausedDisplay() {

        const playBtns = document.getElementsByClassName('vjs-big-play-button');
        const playerControlBars = document.getElementsByClassName('vjs-control-bar');
        const playBtn = playBtns[0];
        const playerControlBar = playerControlBars[0];

        playBtn.style.display = "block";
        playerControlBar.style.display = "none";
    }

    //video player display for in playing state
    function videoPlayerPlayingDisplay() {

        const playBtns = document.getElementsByClassName('vjs-big-play-button');
        const playerControlBars = document.getElementsByClassName('vjs-control-bar');
        const playBtn = playBtns[0];
        const playerControlBar = playerControlBars[0];

        playBtn.style.display = "none";
        playerControlBar.style.display = "flex";
    }


    function handleSmDevicesOrientationChange() {

        const videoElement = $('#my-video_html5_api')[0];

        if (window.innerWidth < window.innerHeight) {
            // console.log('event fired & player is in landscape');

            // landscape
            if (!player.isFullscreen()) {
                // console.log('player is not in fullscreen');

                if (!videoElement.paused) {
                    videoElement.muted = true;
                    videoElement.pause();
                    console.log('player paused');
                } else {
                    // console.log('doing it'); 

                }

                landscapeOrientationChangeSmDisplay();
                document.getElementsByTagName('body')[0].style.overflow = "hidden";
            } else {
                // console.log('player is in fullscreen');
            }

        } else {
            console.log('event fired & player is in portrait');
            //potrait
            landscapeOrientationChangeSmDisplayExitFullScreen();
            document.getElementsByTagName('body')[0].style.overflow = "auto";
        }
    }

    //enter fullscreen mode through a user initiated action/gesture
    function openFullScreen() {

        player.requestFullscreen();
        player.autoplay('muted');
    }


    window.addEventListener('orientationchange', handleSmDevicesOrientationChange);

    function landscapeOrientationChangeSmDisplay() {

        let displayScreen = document.querySelector('.landscape-orientation-video-play-screen');
        let posterURL = extractPlayerPoster();

        displayScreen.style.backgroundImage = posterURL;
        displayScreen.style.display = "flex";
    }


    function landscapeOrientationChangeSmDisplayExitFullScreen() {


        let displayScreen = document.querySelector('.landscape-orientation-video-play-screen');
        displayScreen.style.display = "none";
    }

    function removeLandscapeOrientationChangeSmDisplay() {

        let displayScreen = document.querySelector('.landscape-orientation-video-play-screen');
        displayScreen.style.display = "none";
    }

    //extract the main player background image
    function extractPlayerPoster() {

        let videoPlayerPosterElements = document.getElementsByClassName('vjs-poster');
        let videoPlayerPosterEl = videoPlayerPosterElements[0];
        let style = window.getComputedStyle(videoPlayerPosterEl);
        let videoPlayerPoster = style.backgroundImage;

        return videoPlayerPoster;
    }



    /* save playback data */
    function saveVideoPlayData(videoId, activeVideoContentId, videoType, currTime) {
        const videoPlaybackData = { 'playingMainVideoId': videoId, 'activeContentId': activeVideoContentId, 'type': videoType, 'lastPlayback': currTime, 'timestamp': Date.now() };
        localStorage.setItem(`video-${videoId}`, JSON.stringify(videoPlaybackData));
    }


    function retrieveVideoPlayData(videoId) {

        const savedVideoPlaybackData = localStorage.getItem(`video-${videoId}`);
        if (savedVideoPlaybackData) {
            try {
                return JSON.parse(savedVideoPlaybackData);
            } catch (error) {
                return null;
            }
        }
        return null;
    }

    function manageVideoPlayDataStorage() {
        const maxSavedVideoPlaybackDataEntries = 100; //limit number of saved video playback records entries
        const maxSavedVideoPlaybackDataKeys = Object.keys(localStorage).filter(key => key.startsWith('video-'));

        if (maxSavedVideoPlaybackDataKeys.length >= maxSavedVideoPlaybackDataEntries) {

            maxSavedVideoPlaybackDataKeys.sort((a, b) => localStorage.getItem(a).timestamp - localStorage.getItem(b).timestamp);
            localStorage.removeItem(keys[0]); //remove the oldest entry
        }
    }


    player.ready(function () {
        let savedPlaybackTime = localStorage.getItem(`video-${playingVideoId}`);
        if (savedPlaybackTime) {
            var savedPlaybackData = retrieveVideoPlayData(playingVideoId);

            if (savedPlaybackData) {
                var savedPlayingVideo = savedPlaybackData.activeContentId;
                var savedPlayingVideoType = savedPlaybackData.type;
                var savedPlayingVideoPlaybackTime = savedPlaybackData.lastPlayback;
            }


            if (savedPlayingVideo !== playingVideoId) {

                var playingVideoElId = '';
                (savedPlayingVideoType == 'episode') ? playingVideoElId = `video_content_episode_${savedPlayingVideo}` : playingVideoElId = `video_content_main-video_${savedPlayingVideo}`;

                //switch to last selected playback episode
                document.getElementById(`${playingVideoElId}`).click();
                player.currentTime(savedPlayingVideoPlaybackTime);
            }

            player.currentTime(savedPlayingVideoPlaybackTime);
        } else {

            saveVideoPlayData(playingVideoId, playingVideoId, 'main-video', 0);
            manageVideoPlayDataStorage()
        }
    });

    window.addEventListener('beforeunload', function () {

        var lastPlaybackTime = player.currentTime();
        saveVideoPlayData(MainplayingVideoId, playingVideoId, playingVideoType, lastPlaybackTime);
    });


    /* video reaction capture functionality */
    //on page load
    window.addEventListener('DOMContentLoaded', function () {

        initiateVideoReactionUI(playingVideoId, playingVideoType);
    });

    function initiateVideoReactionUI(playingVideoId, playingVideoType) {
        var userVideoReaction = retrieveSavedVideoReaction(playingVideoId, playingVideoType);
        if (userVideoReaction == null) {

            updateVideoReactionUI('not-found');
            return;
        } else {
            updateVideoReactionUI(userVideoReaction.reaction);
        }
    }


    /* retrieve video reaction like/dislike */
    function retrieveSavedVideoReaction(videoId, videoType) {
        const savedVideoReactionData = localStorage.getItem(`video-reaction-${videoId}-${videoType}`);
        if (savedVideoReactionData) {
            try { return JSON.parse(savedVideoReactionData); } catch (error) { return null; }
        }
        else {
            return null;
        }
    }

    /* update the video reaction UI */
    function updateVideoReactionUI(reaction) {
        document.querySelectorAll('.wrapper-icon-cirlce').forEach(btn => {

            if (btn.classList.contains('active-wrapper-icon-circle')) {
                btn.classList.remove('active-wrapper-icon-circle');
            }
        });


        if (reaction == 'like') {

            if (!document.getElementById('like-wrapper-icon-circle').classList.contains('active-wrapper-icon-circle')) {

                document.getElementById('like-wrapper-icon-circle').classList.add('active-wrapper-icon-circle');
            }
        } else if (reaction == 'dislike') {

            if (!document.getElementById('dislike-wrapper-icon-circle').classList.contains('active-wrapper-icon-circle')) {

                document.getElementById('dislike-wrapper-icon-circle').classList.add('active-wrapper-icon-circle');
            }
        } else {

            document.querySelectorAll('.wrapper-icon-cirlce').forEach(btn => {

                if (btn.classList.contains('active-wrapper-icon-circle')) {
                    btn.classList.remove('active-wrapper-icon-circle');
                }
            });
        }

    }

    //event listeners for like/dislike reactions
    document.querySelectorAll('.likeiconbtn-btn').forEach(button => {
        button.addEventListener('click', function () {
            const reaction = this.getAttribute('data-reaction');

            // Optimistically update the UI first
            updateVideoReactionUI(reaction);

            makeUpdateUserVideoReaction(playingVideoId, playingVideoType, reaction);
        });
    });


    /* store/update user video reaction */
    function makeUpdateUserVideoReaction(id, type, reaction) {

        var userVideoReaction = retrieveSavedVideoReaction(playingVideoId, playingVideoType);

        if (userVideoReaction == null) {

            saveVideoReaction(id, type, reaction);
            initialVideoReactionSaveinDB(id, type, reaction);
        }
        else {

            var oldReaction = userVideoReaction.reaction;
            updateSavedVideoReaction(id, type, reaction);
            updateVideoReactionSaveinDB(id, type, reaction, oldReaction);
        }
    }


    /* save video like/dislike */
    function saveVideoReaction(videoId, videoType, reaction) {

        const videoReactionData = { 'VideoId': videoId, 'type': videoType, 'reaction': reaction };
        localStorage.setItem(`video-reaction-${videoId}-${videoType}`, JSON.stringify(videoReactionData));
    }

    /* update saved video like/dislike */
    function updateSavedVideoReaction(videoId, videoType, reaction) {

        const videoReactionData = { 'VideoId': videoId, 'type': videoType, 'reaction': reaction };
        localStorage.setItem(`video-reaction-${videoId}-${videoType}`, JSON.stringify(videoReactionData));
    }

    /* save video reaction in DB for the first time */
    function initialVideoReactionSaveinDB(videoId, type, reaction) {

        fetch(`/save-video-likes/${videoId}/${type}/initial/reaction`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: JSON.stringify({ reaction }),
        })
            .then(response => response.json())
            .then(data => {
                //    console.log(`here is your data ${data.data}`);
            })
            .catch(error => {
                // console.log(`failed here is your data`);
                updateLikeReactionUI('failed');
            });
    }

    /* update saved video reaction in DB for the first time */
    function updateVideoReactionSaveinDB(videoId, type, reaction, oldChoice) {

        fetch(`/save-video-likes/${videoId}/${type}/${oldChoice}/update/reaction`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
            },
            body: JSON.stringify({ reaction }),
        })
            .then(response => response.json())
            .then(data => {
                // console.log(`here is your data ${data.data}`);

            })
            .catch(error => {

                // console.log(`failed here is your data`);

                updateLikeReactionUI('failed');
            });
    }

</script>
@endsection