@extends('front.layout')
@section('custom-style')
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.jssocials/1.4.0/jssocials.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">

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

<!-- OG meta tags -->
<meta property="og:title" content="Verity TV">
<meta property="og:description"
    content="Verity TV is a subscription-based streaming and live broadcast service that allows our members to watch TV shows, documentaries, Political and Society related features from around Africa without commercials on an internet-connected device">
<meta property="og:image" content="https://verity.live/public/setting-images/og-tag-logo.png">

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

<!-- 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="https://verity.live/public/setting-images/og-tag-logo.png">

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

@endsection
@section('content')

<style>
    body {
        background-color: red !important;
    }

    .owl-item .vedio_symbol {
        margin-top: 5% !important
    }

    .container .btn23 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        color: #fff;
        font-size: 16px;
        padding: 12px 24px;
        border: none;
        cursor: pointer;
        border-radius: 5px;
        text-align: center
    }

    video::-webkit-media-controls-timeline {
        display: none
    }

    video::-webkit-media-controls-current-time-display {
        display: none
    }

    video::-webkit-media-controls-time-remaining-display {
        display: none
    }

    .top-video-slider-thumbnail {
        background-size: 100% auto;
        background-position: center
    }

    @-webkit-keyframes slideIn {
        0% {
            transform: translateY(-50px)
        }

        100% {
            transform: translateY(0)
        }
    }

    @keyframes slideIn {
        0% {
            transform: translateY(-50px)
        }

        100% {
            transform: translateY(0)
        }
    }

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

    .vedio_symbol .fa-play {
        font-size: 10px !important
    }

    .owl-item .vedio_symbol i {
        margin-left: 5px !important
    }

    @media only screen and (max-width:600px) and (orientation :portrait) {
        .height-280 {
            height: 320px;
            padding: 5px
        }

        .height-150 {
            height: 120px
        }

        .height-200 {
            height: 200px;
            padding: 5px !important
        }

        .video-size {
            width: 100%;
            height: 100%
        }

        .btn-primary {
            width: 200px !important
        }

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

    @media only screen and (max-width:600px) and (orientation :landscape) {
        .height-200 {
            height: 200px;
            padding: 5px !important
        }

        .video-size {
            width: 100%;
            height: 100%
        }
    }

    @media only screen and (min-width:600px) {
        .video-size {
            width: 100%;
            height: 100%
        }

        .height-200 {
            height: 200px;
            padding: 5px !important
        }
    }

    @media only screen and (min-width:768px) {
        .video-size {
            width: 100%;
            height: 100%
        }

        .height-200 {
            height: 150px
        }
    }

    @media only screen and (min-width:992px) {
        .video-size {
            width: 100%;
            height: auto
        }

        .height-200 {
            height: 150px
        }

        .height-280 {
            height: 280px
        }

        .height-150 {
            height: 150px
        }

        .btn-primary {
            width: auto
        }

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

    body {
        padding: 0;
        margin: 0;
        position: relative;
        background: red !Important;
        background-color: red !important;
        background-size: cover;
        height: auto;
        font-family: "Raleway", sans-serif
    }

    .content1 {
        max-width: auto;
        margin: 0 auto;
        top: 35%;
        position: relative
    }

    .mb-link,
    .mb-link-2 {
        color: #DFA326 !important;
        margin: bottom:0 !important
    }

    #upcoming-video-live-video {
        height: 270px
    }

    #live_streaming_btn {
        -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
        }
    }

    #homepage_video_text_section {
        transition: 0.3s;
        margin-top: 30vh !important
    }

    #homepage_video_text_section h1 {
        width: 50%
    }

    @media (max-width:767px) {
        .mb-link {
            margin-bottom: 0px !important
        }

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

        #live_tv_broadcast {
            margin-bottom: 0px !important
        }

        #upcoming-video-live-video {
            height: 180px
        }

        #current_news {
            margin-top: 0px !important;
            margin-bottom: 0px !important
        }

        .shows_section {
            padding: 0px !important
        }

        .livestream_section {
            padding-top: 0
        }

        #watch_now_link {
            width: 45% !important;
            max-width: 200px;
            padding: 10px 10px !important;
            border: 2px solid red !important
        }

        #watch_now_section {
            width: auto !important
        }

        #homepage_video_text_section {
            margin-top: 36vh !important;
            transition: 0.3s;
            display: flex;
            flex-diretion: row !important;
            align-items: center;
            overflow: hidden !important;
            background-color: #DFA326
        }

        #homepage_video_text_section h1 {
            width: 50%;
            height: 100%;
            text-align: center !important;
            line-height: 22px !important
        }

        #homepage_video_text_section h1 a {
            color: rgba(0, 0, 0, .8) !important;
            display: block
        }

        #watch_now_sectio {
            width: 48%;
            margin-left: 1%;
            margin-right: 1%;
            height: 100%
        }

        #watch_now_link {
            width: 100% !important;
            margin: 0 !important
        }

        #video_title_text {
            font-size: 0.4em !important
        }

        #watch_now_link {
            z-index: 9999 !Important
        }
    }

    .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(.9) !important;
        transition: .3s !important
    }

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

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

    .item:hover .text-landscape {
        margin-top: 50px !important;
        overflow: visible !important;
        z-index: 99999 !important
    }

    .item:hover .vedio_symbol_landscape {
        margin-top: 15px !important;
        padding-bottom: 25px !important
    }

    .btn-primary {
        width: auto
    }

    body {
        padding: 0;
        margin: 0;
        position: relative;
        background: none !important;
        background-size: cover;
        height: auto;
        font-family: "Raleway", sans-serif
    }

    .content1 {
        max-width: auto;
        margin: 0 auto;
        top: 35%;
        position: relative
    }

    .mb-link,
    .mb-link-2 {
        color: #DFA326 !important;
        margin: bottom:0 !important
    }

    #upcoming-video-live-video {
        height: 270px
    }

    #live_streaming_btn {
        -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
        }
    }

    #homepage_video_text_section {
        transition: 0.3s;
        margin-top: 30vh !important
    }

    #homepage_video_text_section h1 {
        width: 50%
    }

    @media (max-width:767px) {
        .mb-link {
            margin-bottom: 0px !important
        }

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

        #live_tv_broadcast {
            margin-bottom: 0px !important
        }

        #upcoming-video-live-video {
            height: 180px
        }

        #current_news {
            margin-top: 0px !important;
            margin-bottom: 0px !important
        }

        .shows_section {
            padding: 0px !important
        }

        .livestream_section {
            padding-top: 0
        }

        #watch_now_link {
            width: 45% !important;
            max-width: 200px;
            padding: 10px 10px !important;
            border: 2px solid red !important
        }

        #watch_now_section {
            width: auto !important
        }

        #homepage_video_text_section {
            margin-top: 36vh !important;
            transition: 0.3s;
            display: flex;
            flex-diretion: row !important;
            align-items: center;
            overflow: hidden !important;
            background-color: #DFA326
        }

        #homepage_video_text_section h1 {
            width: 50%;
            height: 100%;
            text-align: center !important;
            line-height: 22px !important
        }

        #homepage_video_text_section h1 a {
            color: rgba(0, 0, 0, .8) !important;
            display: block
        }

        #watch_now_sectio {
            width: 48%;
            margin-left: 1%;
            margin-right: 1%;
            height: 100%
        }

        #watch_now_link {
            width: 100% !important;
            margin: 0 !important
        }

        #video_title_text {
            font-size: 0.4em !important
        }

        #watch_now_link {
            z-index: 9999 !Important
        }
    }

    .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(.9) !important;
        transition: .3s !important
    }

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

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

    .item:hover .text-landscape {
        margin-top: 50px !important;
        overflow: visible !important;
        z-index: 99999 !important
    }

    .item:hover .vedio_symbol_landscape {
        margin-top: 15px !important;
        padding-bottom: 25px !important
    }

    .single-player-vid-details-container {
        position: relative
    }

    .socialsharesection {
        position: relative;
        top: 0;
        width: 100%
    }

    .responsive-media-social-share-icon {
        Width: 100%;
        height: 100%
    }

    .socialshareiconbtn-btn {
        width: 120px;
        height: 120px;
        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
        }
    }

    .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://verity.live/public/front/assets/img/x-share-icon-logo-letter-tr.png');
        background-size: cover
    }

    @media(max-width:575px) {
        .socialsharesection {
            margin: 0 !important
        }

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

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

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

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

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

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

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

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

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

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

        .jssocials-shares {
            display: flex
        }
    }

    @media(max-width:576px) {
        #header {
            top: 0 !important
        }

        .dpcustomhighlightsblockcontainer {
            margin-top: 2vh !important
        }

        #homepage_video_text_section {
            margin-top: 32vh !important
        }
    }

    @media(max-width:768px) {
        #slider_display_section {
            background-size: cover !important
        }

        .dark-mobile-background {
            background-color: black !important
        }

        .mb_slider_display_section {
            min-height: 20vh !Important;
            height: 40vh !important;
            background-size: cover;
            background-position: center
        }

        .mb_slider_display_section video {
            object-fit: fill
        }

        #slider_display_section:last-of-type {
            display: none !important
        }
    }

    @media(min-width:991px) {
        .dpcustomhighlightsblockcontainer {
            margin-top: 2vh !important
        }
    }

    .pb-4:nth-child(2) {
        border: 2px solid red !important
    }

    #video_title_text:hover {
        color: #dfa326;
        transition: 0.2s ease;
    }
</style>

<style>
    body {
        background: #000F1E !important;
        background-color: #000F1E !important;
    }

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

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

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

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

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

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

    @media(max-width: 575px) {
        .dp_section_vids_homepage_display_section {
            display: none !important;
        }

        .mb-cat-title-text {
            font-size: 16px !important;
        }

        .hmpg-border-line {
            transform: translateY(-3px);
        }
</style>

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

<!--placeholder el -->
<div class="pla-el d-none d-md-block" style="background:transparent;width:100%;height:70px;"></div>
<!--placeholder el -->

<!--slider section start-->
<section id="top-flash-slider-player" style="position:relative !important;">
    <div class="home-slider overflow-hidden;">
        <div id="sliderSyncingNav" class="js-slick-carousel slick" data-hs-slick-carousel-options='{
                        "dots": true,
                        "dotsClass": "d-xl-none slick-pagination mb-3 position-absolute right-0 left-0 bottom-0 ",
                        "infinite": false,
                        "asNavFor": "#sliderSyncingThumb"
                    }'>

            @if (isset($data['sliders']))
                @foreach ($data['sliders'] as $slider)
                    <style>
                        @media(min-width:768px) {
                            .mb_slider_display_section {
                                display: none;
                                !important;
                            }
                        }

                        @media(max-width:767px) {
                            .dp2_slider_display_section {
                                display: none;
                                !important;
                            }
                        }
                    </style>
                    <!-- Mobile slider -->
                    <div id="slider_display_section"
                        class="bg-img-hero d-flex d-md-none align-items-center min-h-676rem slider-gradient top-video-slider-thumbnail mb_slider_display_section"
                        style="/*-- (pull from cdn resource) background-image: url({{ 'https://' . $slider->slider_image }}); --*/ background-image: url({{ $slider->slider_image }});position:relative !important;">

                        <!-- Video display -->
                        @if (isset($slider->getVideo->trailer_path))
                            <video autoplay muted loop id="slider-video-{{ $slider->id }}" class="slidertopflash"
                                style="width:100% !important;height:100% !important;">
                                <source id="top-slider-video-src-{{ $slider->id }}"
                                    src="@if ($loop->iteration == 1) {{ $slider->getVideo->trailer_path }} @endif" type="video/mp4">
                            </video>
                        @endif
                        <!-- Video display -->

                        <!-- Watch now link and video title display -->
                        <div class="d-flex p-0 px-2 align-items-center"
                            style="border-radius:5px !important;width:96%;left:2%;background-color:transparent !important;position:absolute !important;bottom:5% !important;z-index:999 !important;align-items:center !important;">

                            @if (isset($slider->getVideo->title))
                                <h1 style="margin:0 !important;padding:0 !important;color:#fff;font-size:12px !important;line-height:1.2 !important;"
                                    class="w-50 text-center">
                                    {{ $slider->getVideo->title }}
                                </h1>


                                <div class="d-flex w-50 my-0 py-0">
                                    <a id="watch_now_link"
                                        href="{{ route('front.singleVideoPage', ['device' => 'mb', 'slug' => $slider->getVideo->slug]) }}"
                                        class="btn btn-primary py-2 px-sm-0 px-md-6 py-md-3 btn-sm mb-3 mb-md-0 d-block d-xl-none"
                                        style="font-size:12px !important;">
                                        <i class="fa fa-play text-red" style="padding-right:5px;"></i> WATCH NOW
                                    </a>
                                </div>
                            @endif
                        </div>
                        <!-- Watch now link and video title display -->


                    </div>
                    <!-- Mobile slider -->

                    <!-- Desktop slider -->
                    <div id="dp_slider_display_section" class="d-none d-md-block"
                        style="width:100%;height:94vh;background-image: url({{$slider->slider_thumbnail}});background-size: 100% 94vh;background-position: center;background-repeat: no-repeat;height: 94vh;width: 100%;">

                        @if(isset($slider->getVideo->trailer_path))
                            <video autoplay muted loop id="slider-video-{{ $slider->id }}"
                                style="width:100%;min-height:100%;object-fit:fill;" class="slidertopflash">
                                <source id="top-slider-video-src-{{ $slider->id }}"
                                    src="@if($loop->iteration == 1) {{ $slider->getVideo->trailer_path }} @endif" type="video/mp4">
                            </video>
                        @endif

                        <!-- Watch now link and video title display -->
                        <div id="homepage_video_text_section" class="mx-3 mx-md-5 mx-lg-10 col-xl-5 px-0 mt"
                            style="border-radius:5px !important;position:absolute !important;">
                            <div class="mb-3 pb-1">
                                <ul class="list-unstyled nav nav-meta nav-meta__white">
                                    @if(isset($slider->getVideo->getCategories))
                                        <li class="">
                                            @foreach($slider->getVideo->getCategories as $sliderVideoCategory)
                                                @if(isset($sliderVideoCategory->getCategory->name))
                                                    <a href="#" class="slider-category-text d-none">
                                                        {{$sliderVideoCategory->getCategory->name}}
                                                    </a>
                                                    @if(!$loop->last)
                                                        &nbsp;
                                                    @endif
                                                @endif

                                            @endforeach
                                        </li>
                                    @endif
                                    @if(isset($slider->getVideo->duration))
                                        <li class=" slider-duration-text d-none">
                                            {{$slider->getVideo->duration}}
                                        </li>
                                    @endif

                                </ul>
                            </div>

                            @if(isset($slider->getVideo->title))
                                <h1 class="display-12 text-lh-1dot1 mb-sm-3 mb-md-6 max-w-565" style="width:80% !important;">
                                    <a id="video_title_text" href="#"
                                        style="display:inline-block;width:100%;font-size:0.7em !important;line-height:1.2 !important;">
                                        {{$slider->getVideo->title}}
                                    </a>
                                </h1>
                                <div id="watch_now_sectio" class="d-block d-md-flex flex-md-row">
                                    <a id="watch_now_link"
                                        href="{{route('front.singleVideoPage', ['device' => 'dp', 'slug' => $slider->getVideo->slug])}}"
                                        class="btn btn-primary py-2 px-sm-0 px-md-6 py-md-3 btn-sm mb-3 mb-md-0 d-none d-xl-block"
                                        style="border:2px solid red;">
                                        <i class="fa fa-play text-red" style="padding-right:5px;"></i> WATCH NOW
                                    </a>
                                </div>
                            @endif
                        </div>
                        <!-- Watch now link and video title display -->
                    </div>
                    <!-- Desktop slider -->
                @endforeach
            @endif
        </div>

        <!-- Desktop slider thumbnail display on the left -->
        <div
            class="d-none d-xl-flex justify-content-center position-xl-absolute col-xl-7 col-wd-8 right-0 bottom-0 mb-xl-10 pb-xl-1 thumbnailWrap">
            <div id="sliderSyncingThumb"
                class="js-slick-carousel slick u-slick-bordered-primary slick-gutters-1 slick-transform-off"
                data-hs-slick-carousel-options='{
                            "infinite": true,
                            "slidesToShow": {{count($data['sliders'])}},
                            "isThumbs": true,
                            "asNavFor": "#sliderSyncingNav",
                            "responsive": [{
                                "breakpoint": 1199,
                                "settings": {
                                    "slidesToShow": 2
                                },
                                "breakpoint": 768,
                                "settings": {
                                    "slidesToShow": 2
                                }
                            }]
                        }'>
                @if(isset($data['sliders']))
                    @foreach($data['sliders'] as $slider)
                        <div class="my-1d position-relative" style="cursor: pointer;">
                            <div class="thumb-img slider_thumbnail" onclick="changeSliderVideo({{ $slider->id }})">
                                <img class="img-fluid" src="{{ $slider->slider_thumbnail}}" alt="Image Description">
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
        <!-- Desktop slider thumbnail display on the left -->
    </div>
</section>
<!--slider section end-->

<!--Shows Section Start-->


<!--overlay-->

<div id="body-content-block" class="bg-gray-1100 space-1 single-player-vid-details-container">

    <div class="socialsharesection d-flex justify-content-center px-3 mb-0 mb-md-3">
        <button type="button" class="btn btn-primary socialshareiconbtn-btn p-0" data-bs-toggle="modal"
            data-bs-target="#sharemodal" style="border:2px solid red !important;">
            <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>

    <!--Live Events Section Start-->
    <div id="live_streaming_section_display" class="bg-gray-1100 space-1 livestream_section">
        <button id="live_streaming_btn" class="btn btn-primary p-0" type="button"
            style="width:94% !important;margin:0 3%;background-color:red;color:#fff;font-size:1.5em;display:flex !important;align-items:center !important;">
            <a href="{{ url('mb/live-broadcast/channel-1') }}" class="w-100 p-3 d-flex d-xl-none "
                style="justify-content:center;align-items:center !important;font-size:16px !important;">
                {{-- <p style="padding:0 !important;margin:0 !important;padding-right:5px !important;"> Live Streaming
                </p> --}}
                Live Streaming
                <svg style="margin-left:5px !important;" xmlns="http://www.w3.org/2000/svg" height="1.5em"
                    viewBox="0 0 512 512"
                    fill="#DFA356"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                    <path
                        d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9V168c0-8.7 4.7-16.7 12.3-20.9z" />
                </svg>
            </a>

            <a href="{{ url('dp/live-broadcast/channel-1') }}" class="w-100 p-3 pb-1 d-none d-xl-flex"
                style="justify-content:center;align-items:center !important;">
                <p style="padding:0 !important;margin:0 !important;padding-right:5px !important;"> Live Streaming </p>
                <svg xmlns="http://www.w3.org/2000/svg" height="1.5em" viewBox="0 0 512 512"
                    fill="#DFA356"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
                    <path
                        d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM188.3 147.1c7.6-4.2 16.8-4.1 24.3 .5l144 88c7.1 4.4 11.5 12.1 11.5 20.5s-4.4 16.1-11.5 20.5l-144 88c-7.4 4.5-16.7 4.7-24.3 .5s-12.3-12.2-12.3-20.9V168c0-8.7 4.7-16.7 12.3-20.9z" />
                </svg>
            </a>
        </button>
    </div>
    <!--Live Events End-->

    <div class="container mx-auto mt-1 p-0 pb-3 pt-2 px-2 px-lg-5 px-xxl-0">

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

        <!-- Styles for potrait & landscape bvideos display -->
        <style>
            /*-- potrait --*/
            .vedio_symbol .fa-play {
                font-size: 14px;
                border: 1px solid #ED3833;
                border-radius: 100%;
                background: #ED3833;
                padding: 6px 7px 6px 9px
            }

            .vedio_symbol .fa-thumbs-up,
            .vedio_symbol .fa-thumbs-down,
            .vedio_symbol .fa-eye {
                font-size: 14px;
                border: 1px solid #BF8433;
                border-radius: 100%;
                background: #BF8433;
                padding: 6px 7px
            }

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

            .vedio_symbol i {
                margin-left: 5px !important;
                margin-right: 2px !important
            }

            @media(max-width:767px) {
                .gird-view-videos {
                    flex-direction: column;
                    padding: 0 !important
                }

                .video-item {
                    width: 100% !important;
                    padding: 10px 0 !imortant;
                    margin: 0 !imortant
                }

                .item video-item {
                    width: 100%;
                    margin-left: 0px !important;
                    margin-right: 0px !important;
                    border-radius: 5px !important
                }

                #item_video_item {
                    margin-left: 0px !important
                }

                .img-container:hover {
                    transform: scale(.8) !important;
                    transition: ease all 1s !important;
                    transition-property: none !important;
                    z-index: 1111
                }
            }

            @media screen and (min-width:768px) and (max-width:991px) {
                .gird-view-videos {
                    flex-direction: row;
                    flex-wrap: wrap
                }

                .video-item {
                    width: 48% !important;
                    padding: 10px 0 !imortant;
                    margin: 10px 5px !imortant
                }

                .item video-item {
                    width: 48%;
                    margin-left: 1% !important;
                    margin-right: 1% !important;
                    border-radius: 5px !important
                }

                #item_video_item {
                    margin-left: 0px !important
                }
            }
            }

            .mb-link,
            .mb-link-2 {
                color: #DFA326 !important;
                margin: bottom:0 !important
            }

            #upcoming-video-live-video {
                height: 270px
            }

            #img_frame {
                height: 280px !Important
            }

            #video_frame {
                height: 150px !Important;
                width: 100%
            }

            .item .shows_section {
                padding: 0 !Important
            }

            @media only screen and (max-width:767px) {
                .mb-link {
                    margin-bottom: 1vh !important
                }

                .mb-link-2 {
                    margin-top: 0px !important;
                    margin-bottom: 1vh !important
                }

                #live_tv_broadcast {
                    margin-bottom: 0px !important
                }

                #upcoming-video-live-video {
                    height: 180px
                }

                #current_news {
                    margin-top: 0px !important;
                    margin-bottom: 0px !important
                }

                .shows_section {
                    padding: 0px !important
                }

                #img_frame {
                    height: 380px !Important;
                    border: 2px solid pink
                }

                #video_frame {
                    width: 100% !important;
                    height: 100% !Important;
                    margin: 0 !important;
                    object-fit: fill !important
                }

                .item .shows_section {
                    padding: 20px 0
                }
            }

            .mb-link,
            .mb-link-2 {
                color: #DFA326 !important;
                margin: bottom:0 !important
            }

            #upcoming-video-live-video {
                height: 270px
            }

            #img_frame {
                height: 280px !Important
            }

            #video_frame {
                height: 150px !Important;
                width: 100%
            }

            .item .shows_section {
                padding: 0 !Important
            }

            @media only screen and (max-width:767px) {
                #live_tv_broadcast {
                    margin-bottom: 0px !important
                }

                #upcoming-video-live-video {
                    height: 180px
                }

                #current_news {
                    margin-top: 0px !important;
                    margin-bottom: 0px !important
                }

                .shows_section {
                    padding: 0px !important
                }

                #img_frame {
                    height: 380px !Important
                }

                #video_frame {
                    width: 100% !important;
                    height: 150px !Important;
                    margin: 0 !important;
                    object-fit: fill !important
                }

                .item .shows_section {
                    padding: 20px 0
                }

                .video-wrapper {
                    max-width: 100% !important;
                    height: 55%;
                    padding: 0 !important;
                    overflow: hidden !important;
                    border: 2px solid transparent !important
                }

                #video_frame,
                .homepage-video-player {
                    width: 98% !important;
                    height: 100% !important;
                    margin: 0 1% !important;
                    object-fit: fill !important;
                    border: 2px solid transparent !important
                }
            }

            .mobile-carousel-container {
                position: relative;
                overflow: hidden;
                width: 96%;
                max-width: 100%;
                margin: 2vh auto 4vh auto;
                border-radius: 5px;
                touch-action: pan-y
            }

            .mobile-carousel-content {
                display: flex;
                transition: transform 0.5s ease;
                width: 100%;
                margin: 0 auto !important
            }

            .mobile-carousel-item {
                width: 100%;
                flex: 0 0 auto
            }

            .mobile-carousel-object {
                width: 100% !important;
                height: 380px !important;
                display: flex;
                flex-direction: column !important;
                background: #EDEDED;
                position: relative
            }

            .mobile-thumbnail-cover-image {
                width: 100%;
                height: 380px
            }

            .mobile-video-container,
            .mobile-video-details-container {
                width: 100%;
                height: 50%;
                margin: 0;
                padding: 0
            }

            .mobile-video-container {
                position: relative !important;
                width: 100% !important;
                height: 0 !important;
                padding-top: 56.25% !important;
                background: orange !important
            }

            .mobile-carousel-video-player {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                width: 100% !important;
                height: 100% !important
            }

            .mobile-video-container {
                height: 50%;
                background-color: #dfa356
            }

            .mobile-video-details-container {
                height: 50%;
                background: rgba(0, 0, .7)
            }

            .mobile-video-container video {
                width: 100%;
                height: 100%;
                max-height: calc(380px / 2);
                object-fit: contain;
                display: block
            }

            .mobile-video-details-container {
                width: 100%;
                height: 100%
            }

            .mobile-carousel-btn-prev-btn {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;
                font-size: 24px;
                color: #fff;
                background-color: rgba(0, 0, 0, .5);
                padding: 10px;
                border: none;
                outline: none;
                left: 10px
            }

            .mobile-carousel-btn-next-btn {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;
                font-size: 24px;
                color: #fff;
                background-color: rgba(0, 0, 0, .5);
                padding: 10px;
                border: none;
                outline: none;
                right: 10px;
                z-index: 11
            }

            .mobile-video-stats-display {
                width: 98%;
                height: 40%;
                padding: 5px;
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap
            }

            .mobile-vid-stats {
                display: flex;
                align-items: center;
                margin: 0;
                border: 1px solid orange
            }

            .mobile-link-btn {
                width: 20px;
                height: 20px border-radius:50%;
                background-color: red
            }

            .vid-stats,
            .vid-subscription {
                display: flex;
                align-items: center;
                margin: 0
            }

            .vid-stats {
                width: 70%
            }

            .vid-subscription {
                width: 30%
            }

            .vid-info {
                width: 100%;
                padding: 10px;
                margin: 5px 0
            }

            .vid-stats button {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin: 0 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: red;
                cursor: pointer
            }

            .vid-subscription button {
                width: auto;
                height: auto;
                border-radius: 5px;
                margin: 0 5px;
                padding: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: darkblue;
                color: #fff
            }

            .video-name {
                margin: 5px;
                padding: 5px;
                color: #fff
            }

            .vid-tag {
                width: auto;
                height: auto;
                border-radius: 10px;
                margin: 0 5px;
                padding: 5px
            }

            .video-desc {
                width: 90%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin: 0 5px;
                padding: 5px;
                color: #fff
            }

            .video-time {
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin: 0 5px;
                padding: 5px;
                color: #fff;
                font-size: .8em
            }

            .displayvideoontouch {
                display: none;
                transition: 0.3s ease
            }

            .mb-btn-link {
                width: 25px;
                height: 25px;
                border-radius: 50%;
                margin: 0 5px;
                background-color: red
            }

            .media-scale-transform:hover {
                transform: scale(1) !important;
                transition: 13s !important
            }

            @media(min-width:768px) {
                .media-wrap-row-video-section .owl-item:hover .item:not(.landscape-type-item) {
                    -ms-transform: none;
                    -webkit-transform: none;
                    transform: none;
                    -webkit-transform: none;
                    transform: none;
                    -webkit-transition: none;
                    -o-transition: none;
                    transition: none;
                    -webkit-perspective: none;
                    perspective: 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;
                }
            }

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

            @media(min-width:768px) {
                .item.landscape-type-item {}
            }

            @-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) {
                .owl-nav .owl-prev i {
                    transform: translateX(7px);
                }

                .owl-nav .owl-next i {
                    transform: translateX(-7px);
                }
            }

            .vidoverlayx {
                background-image: none !important;
                background-color: black !important;
            }
        </style>
        <!-- Styles for potrait & landscape bvideos display -->

        @php
            $totalvidscount = 0;
        @endphp


        @if (get_setting('home_page_section'))

                @php
                    $homeContent = get_setting('home_page_section')->value;
                    $homeContentArray = explode(',', $homeContent);
                @endphp


                @foreach ($homeContentArray as $homeContentSingle)

                    @php
                        $totalvidscount += 10000; // Increment by 10,000 in each iteration


                        //retrieve category slug 
                        $categoryModel = App\Models\Category::where('name', $homeContentSingle)->first();
                        if ($categoryModel) {
                            $categorySlug = $categoryModel->slug;
                        } else {
                            $categorySlug = '';
                        }
                    @endphp

                    {{-- Desktop orientation --}}
                    @if(get_design_option_dp($categorySlug) == 'Verticle')
                        @include('front.home-page.home-page-section-mod', [
                                'slug' => $categorySlug,
                                'vidcount' => $totalvidscount,
                            ])
                    @elseif(get_design_option_dp($categorySlug) == 'Horizontal')
                        @include('front.home-page.home-videos-landscape-mod', ['slug' => $categorySlug])
                    @endif
                    {{-- Desktop orientation --}}

                    {{-- Mobile orientation --}}
                    @if(get_design_option_mb($categorySlug) == 'Verticle')
                        @include('front.home-page.home-page-section-mb-mod', [
                                'slug' => $categorySlug,
                                'vidcount' => $totalvidscount,
                            ])
                    @elseif(get_design_option_mb($categorySlug) == 'Horizontal') 
                        @include('front.home-page.home-videos-landscape-mb-mod', ['slug' => $categorySlug])
                    @endif
                    {{-- Mobile orientation --}}

                @endforeach

        @endif

    </div>
</div>

</main>


@endsection

@section('custom-script')
<script defer src="{{url('front/assets/js/custom-js.js')}}"></script>
<script defer src="{{url('front/assets/js/owl.carousel.js')}}"></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>

<!-- jsSocials scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
    integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="{{ asset('jsSocials/jsSocials.min.js') }}"></script>
<script src="{{ asset('jsSocials/homescript.js') }}"></script>
<!-- jsSocials scripts -->

<script>
    document.addEventListener('DOMContentLoaded', function () {

        var el_header = document.getElementById("header");
        var el_headerHeight = header.offsetHeight;

        var el_videoElement = document.querySelector('#dp_slider_display_section video');

        if (el_videoElement) {
            var video_el_curr_height = el_videoElement.offsetHeight;
            el_video_new_height = `${video_el_curr_height} + ${el_headerHeight}`;
            document.querySelector('#dp_slider_display_section video').height = `${video_el_curr_height}`;
            console.log(`here is height ${video_el_curr_height} + ${el_headerHeight}px !important`);
            el_videoElement.style.marginTop = `-${el_headerHeight}px`;
        }
    })

    //add ripple effect to button when clicked

    function displayclickedanim() {
        $(".vidplaybtn").click(function () {
            $(this).addClass('clickedbtn');

        });
    }
</script>

<script>
    @if(isset($currentUpcomingPlayingVideo))
        setTimeout(function () {
            // Set video element to variable
            var video = document.getElementById('upcoming-video-live-video');
            video.currentTime = {{$videoForwordTime}};


        }, 5000);//time in milliseconds
    @endif

</script>

{{-- script for slider video change --}}
<script>
    function changeSliderVideo(topSliderId) {
        var videosSrc = [];
        @foreach ($data['sliders'] as $slider)
        // $("#slider-video-{{ $slider->id }}").css('display', 'none');
        @isset($slider->getVideo->trailer_path)
        var videoChangeSlider = $("#slider-video-{{ $slider->id }}")[0];
        videoChangeSlider.pause();
        $("#top-slider-video-src-{{ $slider->id }}").attr('src', '#')
        videoChangeSlider.load();
        videosSrc[{{ $slider->id }}] = "@if(isset($slider->getVideo->trailer_path)){{ $slider->getVideo->trailer_path }}@endif";
        @endif

        @endforeach

        setTimeout(function () {
            // console.log(videosSrc[id]);
            var videoCurrentSlide = $('#slider-video-' + topSliderId)[0];
            if (videoCurrentSlide != undefined) {
                $('#top-slider-video-src-' + topSliderId).attr('src', videosSrc[topSliderId])
                // console.log(video);
                videoCurrentSlide.load();
                videoCurrentSlide.play();
                videoCurrentSlide.muted = false;
            }

        }, 1000);

    }

    // var videos = document.getElementsByTagName("video");
    var videos = [];

    @foreach ($data['sliders'] as $slider)

        var videoScroll = $("#slider-video-{{ $slider->id }}")[0];
        videos[{{ $loop->iteration }}] = videoScroll;
    @endforeach



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

        for (var i = 1; i <= videos.length; i++) {

            var videoOnScroll = videos[i];
            if (videoOnScroll != undefined) {
                // console.log(video);

                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) {
                    // videoOnScroll.play();
                    // videoOnScroll.muted = false;

                    videoOnScroll.muted = true;
                    videoOnScroll.play();

                    //console.log("player visible");

                } else {

                    videoOnScroll.muted = true;
                    videoOnScroll.pause();

                    //console.log("player not visible");
                }
                // else {
                //    // videoOnScroll.muted = true;
                //     //videoOnScroll.pause();
                // }
            }


        }

        //for live broadcast
        var liveBroadcast = $('#upcoming-video-live-video')[0];
        if (liveBroadcast != undefined) {
            var xLive = liveBroadcast.offsetLeft, yLive = liveBroadcast.offsetTop, wLive = liveBroadcast.offsetWidth, hLive = liveBroadcast.offsetHeight, rLive = xLive + wLive, //right
                bLive = yLive + hLive, //bottom
                visibleXLive, visibleYLive, visibleLive;

            visibleXLive = Math.max(0, Math.min(wLive, window.pageXOffset + window.innerWidth - xLive, rLive - window.pageXOffset));
            visibleYLive = Math.max(0, Math.min(hLive, window.pageYOffset + window.innerHeight - yLive, bLive - window.pageYOffset));

            visibleLive = visibleXLive * visibleYLive / (wLive * hLive);

            if (visibleLive > fraction) {
                liveBroadcast.muted = false;
            } else {
                liveBroadcast.muted = true;
            }
        }


    }

    // Select all video elements with the class name 'slidertopflash'
    var videoSliders = document.querySelectorAll('.slidertopflash');

    function checkScrollSingleSlider() {

        var fraction = 0.3; // Play when 80% of the player is visible.

        videoSliders.forEach(function (videoSlider) {

            var x = videoSlider.offsetLeft, y = videoSlider.offsetTop, w = videoSlider.offsetWidth, h = videoSlider.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) {

                //video is visible
                videoSlider.muted = false;
                videoSlider.play();

            } else {

                //video is not visible
                videoSlider.muted = true;
                videoSlider.pause();

            }
        });


    }

    window.addEventListener('scroll', checkScrollSingleSlider, false);
    window.addEventListener('resize', checkScrollSingleSlider, false);

</script>


<script>


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

        // }, false);
        var enddatetime = new Date().getTime();
        var difference = enddatetime - startdatetime
        difference = Math.floor((difference) / (1000));
        vid.style.display = 'block';
        vidImg.style.display = 'none';
        playBtn.style.display = 'none';
        vid.play()
        vid.currentTime += difference;
    }
    // page loader
    $(window).on('load', function () {
        setTimeout(function () { // allowing 3 secs to fade out loader
            $('.page-loader').fadeOut('slow');
        }, 100);
    });
</script>

<script>
    //start and stop video playback when mouse hover over trailer
    var temp;

    function onMouseOverTrailer(id, trailerId) {
        temp = $(id).children("div").children("div.overlay-1").children("div.video-wrapper").children("video")[0];
        temp.muted = true;
        temp.play();

        //debug
        //alert(`video playback started`);
    }


    function onMouseLeaveTrailer(id) {
        temp = $(id).children("div").children("div.overlay-1").children("div.video-wrapper").children("video")[0];
        temp.pause();
        temp.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();

            var videoClass = video.classList.value;
            var containsSliderTopFlash = video.classList.contains("slidertopflash");

            //Log or use the results as needed
            if (containsSliderTopFlash) {
                console.log("skipping");
                return; // Skip to the next iteration
            }


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

                    video.pause();
                    video.currentTime = 0;
                }
            }


        });
    });


    // stop video playback when trailer is swapped out by next trailer in the caurosel -leaves viewport (crucial for mobile screens)
    $('.owl-carousel').on('changed.owl.carousel', function (event) {
        //console.log("swapped");
        $("video").each(function () {
            var video = $(this)[0];

            //stop all playing videos except the flash video
            stopAllVideos();
        });
    });


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

        allVideos.forEach(function (video) {

            var videoClass = video.classList.value;
            var containsSliderTopFlash = video.classList.contains("slidertopflash");

            // Log or use the results as needed
            if (containsSliderTopFlash) {
                return; // Skip to the next iteration
            }

            video.pause();
            video.currentTime = 0;
        });
    }


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

            }
        });
    }


    setInterval(function () {
        console.log('interval');
        $.ajax({
            type: "GET",
            url: "{{route('front.ajaxCheckUpcomingVideo')}}", //this is only changes
            success: function (data) {
                if (data != '#') {
                    // console.log(data);
                    $('#video-title-and-sub-title').html(data.title + ' - ' + data.sub_title);
                    $('#current-upcomming-video-date').html(data.date);
                    $('#current-upcomming-video-rating-image').attr('src', data.rating_image);
                    $('#current-upcomming-video-duration').html(data.duration);
                    // current-upcomming-video-rating-image
                    $('#upcoming-video-live-video-src').attr('src', data.video_path);
                    var video = $('#upcoming-video-live-video')[0];
                    video.load();
                    video.play();

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

                }
            }
        });

    }, 1000); //time in milliseconds



    if (document.getElementById("slider_display_section")) {
        // document.getElementById("slider_display_section").classList.add("padcase");
    } else {
        document.getElementById("live_streaming_section_display").classList.add("padcase");
    }


    // Get all elements with the specified class name
    var elements = document.getElementsByClassName("font-size-30 font-weight-bold mb-3 mb-md-0 text-golden font-secondary");

    // Add the "mb-link" class to each element
    for (var i = 0; i < elements.length; i++) {
        elements[i].classList.add("mb-link-2");
    }

    //set marginTop for mobile slider
    var header = document.getElementById("header");
    var topFlash = document.getElementById("top-flash-slider-player");
    var headerHeight = header.offsetHeight;

    if (window.innerWidth < 768) {
        header.classList.add("dark-mobile-background"),
            topFlash.style.marginTop = headerHeight + "px";
    }

</script>

{{-- missing added in --}}
<script>
    // Touch event handling
    var touchStartY;

    document.querySelectorAll('.mobile-carousel-container').forEach(container => {
        container.addEventListener('touchstart', (e) => {
            touchStartY = e.touches[0].clientX;
        });

        container.addEventListener('touchend', (e) => {
            const touchEndX = e.changedTouches[0].clientX;
            const touchDifference = touchEndX - touchStartY;

            if (Math.abs(touchDifference) > 50) {
                if (touchDifference > 0) {
                    customPrevSlide(container.id);
                } else {
                    customNextSlide(container.id);
                }
            }
        });
    });


    //mobile carousel functions here - move next
    function customNextSlide(containerId) {
        console.log('function fired');

        var selectmode = "default";

        if (selectmode === "default") {

            const container = document.getElementById(containerId);
            const currentIndex = parseInt(container.dataset.currentIndex || '0');
            const items = container.querySelectorAll('.mobile-carousel-item');
            const totalItems = items.length;

            let newIndex = (currentIndex + 1) % totalItems;
            container.dataset.currentIndex = newIndex.toString();

            // Check if newIndex is within a valid range
            if (newIndex >= 0 && newIndex < totalItems) {
                // Retrieve the DOM element of the current item
                const currentItem = items[currentIndex];

                // Access the grandchild with class 'mobile-video-thumbnail-object'
                const grandchild = currentItem.querySelector('.mobile-video-thumbnail-object');

                // Check if the grandchild exists before applying styles
                if (grandchild) {

                    grandchild.classList.remove('displayvideoontouch');
                }

                // Access the previous video element
                const previousVideo = currentItem.querySelector('.mobile-carousel-video-player');

                //check if video is on/playing, if so, stop it
                if (!previousVideo.paused) {

                    // If playing, pause the video
                    previousVideo.pause();
                    previousVideo.currentTime = 0;
                }

            }

            //before updating caurosel, pause all other vids (except top flash)
            //pauseAllVideos(containerId);

            //update carousel
            updateCarousel(container);
        } else {
            console.log(`selct mode this : ${selectmode}`);
        }
    }


    function customPrevSlide(containerId) {
        console.log('function fired');

        var selectmode = "default";

        if (selectmode === "default") {

            console.log("default mode");

            const container = document.getElementById(containerId);
            const currentIndex = parseInt(container.dataset.currentIndex || '0');
            const items = container.querySelectorAll('.mobile-carousel-item');
            const totalItems = items.length;

            let newIndex = (currentIndex - 1 + totalItems) % totalItems;
            container.dataset.currentIndex = newIndex.toString();


            // Check if newIndex is within a valid range
            if (newIndex >= 0 && newIndex < totalItems) {
                // Retrieve the DOM element of the current item
                const currentItem = items[currentIndex];

                // Access the grandchild with class 'mobile-video-thumbnail-object'
                const grandchild = currentItem.querySelector('.mobile-video-thumbnail-object');

                // Check if the grandchild exists before applying styles
                if (grandchild) {

                    grandchild.classList.remove('displayvideoontouch');
                }

                // Access the previous video element
                const previousVideo = currentItem.querySelector('.mobile-carousel-video-player');

                //check if video is on/playing, if so, stop it
                if (!previousVideo.paused) {

                    // If playing, pause the video
                    previousVideo.pause();
                    previousVideo.currentTime = 0;
                }

            }

            //before updating caurosel, pause all other vids (except top flash)
            //pauseAllVideos(containerId);

            //update carousel
            updateCarousel(container);
        } else {
            console.log(`selct mode this : ${selectmode}`);
        }
    }

    //mobile carousel functions here - update caurosel
    function updateCarousel(container) {
        console.log("start of firing !");

        var currentIndex = parseInt(container.dataset.currentIndex || '0');
        console.log(`current index is ${currentIndex}`);
        var carouselContent = container.querySelector('.mobile-carousel-content');
        var newTransformValue = -currentIndex * 100 + '%';
        console.log(newTransformValue);
        carouselContent.style.transform = 'translateX(' + newTransformValue + ')';
        console.log("fired !");
    }


    function displayVideoOnTouch(thumbnailObjectId) {

        var thumbnailObject = document.getElementById(thumbnailObjectId);
        thumbnailObject.classList.add('displayvideoontouch');
    }

    function playAssociatedVideo(thumbnailObjectId) {
        // Construct the video element selector based on the provided thumbnailObjectId
        var videoElementSelector = '#' + thumbnailObjectId + '-video';

        // Get the video element using the selector
        var videoElement = $(videoElementSelector)[0]; // [0] is used to get the DOM element from the jQuery object

        // Check if the video element exists
        if (videoElement) {
            // Autoplay the video (consider browser restrictions)
            videoElement.play();
        }
    }

    //check for user touch on the thumbnail video, if so play video
    let touchStartZ;

    $(document).ready(function () {
        $('.mobile-video-thumbnail-object').on('touchstart', function (e) {

            // Prevent the default behavior of the touch event
            e.preventDefault();

            // Store the initial touch position
            touchStartZ = e.touches[0].clientX;
        });

        $('.mobile-video-thumbnail-object').on('touchend', function (e) {
            // Prevent the default behavior of the touch event
            e.preventDefault();

            // Calculate the touch difference
            const touchEndX = e.changedTouches[0].clientX;
            const touchDifference = touchEndX - touchStartZ;

            // Check if it's a tap (not a swipe)
            if (Math.abs(touchDifference) < 50) {
                // Display and play the video
                const thumbnailObjectId = $(this).attr('id');
                //alert(thumbnailObjectId);
                displayVideoOnTouch(thumbnailObjectId);
                playAssociatedVideo(thumbnailObjectId);
            }
        });
    });


    // check for mobile carousel container is out of viewport, if so , return on the video thumbnails
    $(window).on('scroll', function () {
        $(".mobile-carousel-container").each(function () {
            var carouselContainer = $(this);

            var carouselContainerTop = carouselContainer.offset().top;
            var carouselContainerBottom = carouselContainerTop + carouselContainer.height();
            var windowTop = $(window).scrollTop();
            var windowBottom = windowTop + $(window).height();

            var carouselContainerClass = carouselContainer.attr('class');

            // Check if the video is in the viewport
            if (carouselContainerBottom > windowTop && carouselContainerTop < windowBottom) {
                // Do nothing if in the viewport
            } else {
                // If out of the viewport, find the grandchild with class 'video-thumbnail-object'
                var videoThumbnailObject = carouselContainer.find('.mobile-video-thumbnail-object');

                // Check if it has the class 'displayvideoontouch'
                if (videoThumbnailObject.hasClass('displayvideoontouch')) {
                    // Remove the class 'displayvideoontouch'
                    videoThumbnailObject.removeClass('displayvideoontouch');
                }
            }
        });
    });

    function pauseAllVideos(carouselContainerId) {
        $("video").each(function () {
            var video = $(this)[0];

            var videoClass = video.classList.value;
            var containsSliderTopFlash = video.classList.contains("slidertopflash");

            //Log or use the results as needed
            if (containsSliderTopFlash) {
                console.log("skipping");
                return; // Skip to the next iteration
            }

            video.pause();
            video.currentTime = 0;
        });
    }

    // Function to handle multiple mobile carousel video playbacks
    function mobileCarouselMultipleVideoPlaybacks(currentVideoPlaybackId) {

        // Iterate over each mobile carousel video
        $(".mobile-carousel-video-player").each(function () {

            // Retrieve the ID of the current video
            var currentVideoId = $(this).attr('id');

            // Exclude the current video the user has selected to play
            if (currentVideoId === currentVideoPlaybackId) {
                return; // Skip to the next iteration
            }

            // Check if the video is not paused
            if ($(this).prop('paused') === false) {
                // Pause the video and reset its playback position
                this.pause();
                this.currentTime = 0;
            }
        });
    }

    function reEngageMobileVideoCarouselThumbnails(mobilecarouselthumbnailobjectclassname = "mobile-video-thumbnail-object") {
        // Use the parameter directly instead of creating an unnecessary variable
        $(`.${mobilecarouselthumbnailobjectclassname}`).each(function () {
            // "this" refers to the current element in the loop
            let $this = $(this);
            let searchedClassName = "displayvideoontouch"; // Remove the space at the beginning

            if ($this.hasClass(searchedClassName)) {
                $this.removeClass(searchedClassName);
            }
        });
    }



    $(document).ready(function () {
        $('.mobile-carousel-video-player').on('play', function () {

            var currentVideoPlaybackId = $(this).attr('id');
            mobileCarouselMultipleVideoPlaybacks(currentVideoPlaybackId);
        });
    });


    //listen to clicks outside carousel container
    document.addEventListener('DOMContentLoaded', function () {
        // Add a click event listener to the whole page
        document.body.addEventListener('click', function (e) {

            // alert("click registered");
            if (!e.target.closest('.mobile-carousel-video-player')) {
                // Pause all videos
                // alert("click outside vid player");
                mobileCarouselMultipleVideoPlaybacks('');
                reEngageMobileVideoCarouselThumbnails();
            } else {
                // alert("click inside vid player");
            }
        });
    });

</script>


@endsection