@extends('front.layout-ref')

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

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

@section('ls_scripts')
<link rel="stylesheet" href="{{url('front/assets/css/main-video-new.css')}}">
<link rel="stylesheet" href="{{url('front/assets/css/new_home_two.css')}}">

<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>

@endsection

@section('custom_js_script')
<link rel="stylesheet" href="{{url('front/assets/js/main-video-ref.js')}}">
@endsection

@section('content')
<style>
    .cs-com-soon-btn{
        font-size: 12px !important;
    }
</style>
<main class="container-fluid main-content-ls-section py-0 py-xl-2 py-xl-5 px-0 px-xl-3">
    <!-- breadcrumb display section -->
    <div class="container-xxl px-0 px-xl-2 py-0" style="max-width: 1776px;">

        <nav aria-label="breadcrumb" class="pt-0 sm-breadcrumb">
            <ol class="breadcrumb dark font-size-1" style="align-items:center;">
                <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-1 px-xl-x3">
                <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 border-0 socialshareiconbtn-btn p-0"
                                data-bs-toggle="modal" data-bs-target="#socialShareModal">
                                <img src="{{url('front/assets/img/media-share-icon-tr.png')}}"
                                    alt="share-across-social-media" class="responsive-media-social-share-icon m-0">
                            </button>
                        </div>
                        <div class="live_streaming_btn_section_3 d-flex justify-content-end" style="width: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.6em;color:#fff;" 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 mt-3 mt-xl-1 specific-video-title-span-coming-soon-block d-flex align-items-center w-100">
                    <span style="font-size:16px;color:#dfa326 !important;margin-right:5px;display:block;"
                        id="video_title_input_block"> {{strtoupper($video->title)}} </span>
                    @if(!isset($video->video_path))
                        <button class="btn btn-xs btn-warning cs-com-soon-btn ms-1 px-1" id="video_coming_soon_input_block" style="font-size:12px !important;">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-in-body 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-in-body flex-shrink-0 flex-shrink-md-1" id="video_duration_input_block">
                        {{$video->duration}}
                    </li>
                    <li class="text-white-in-body 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 text-white-in-body text-decoration-none">
                                        {{$category->getCategory->name}}
                                    </a>
                                    <a href="{{route('front.getVideosByCategory', ['device' => 'mb', 'slug' => $category->getCategory->slug])}}"
                                        class="d-inline-block d-xl-none text-white-in-body text-decoration-none">
                                        {{$category->getCategory->name}}
                                    </a>
                                    @if(!$loop->last)
                                        <span>,</span>
                                    @endif

                                @endif

                            @endforeach
                        @endif
                    </li>
                    <li class="d-none d-md-block text-white-in-body text-white">
                        @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 text-white-in-body" 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 w-100 h-100 position-absolute top-0">
                                                                                                                                                                                                                        <div class="text top-63">
                                                                                                                                                                                                                            <div class="d-none d-sm-block content_play">

                                                                                                                                                                                                                                <div class="content-title text-white font-size-11 d-flex justify-content-between style="
                                                                                                                                                                                                                                    position:relative;">
                                                                                                                                                                                                                                    <span> {{$item->title}} </span>
                                                                                                                                                                                                                                    <button type="button" class="vidplaybtn-cs vidplay-video-cs">
                                                                                                                                                                                                                                        <i class="bi bi-play-fill"></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">
                                                                                                                                                                                                                                            Pay Per View
                                                                                                                                                                                                                                        </span>
                                                                                                                                                                                                                                    @endif
                                                                                                                                                                                                                                @endif
                                                                                                                                                                                                                            </div>


                                                                                                                                                                                                                        </div>

                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                <p class="p5 ep-counter-text-display" style="font-size:12px;">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 w-100 h-100 position-absolute top-0">
                                                                                                                                                                                                                        <div class="text top-63">
                                                                                                                                                                                                                            <div class="d-none d-sm-block content_play">

                                                                                                                                                                                                                                <div class="content-title text-white font-size-11 d-flex justify-content-between"
                                                                                                                                                                                                                                    style="position:relative;">
                                                                                                                                                                                                                                    <span> {{$item->title}} </span>
                                                                                                                                                                                                                                    <button type="button" class="vidplaybtn-cs vidplay-episode-cs">
                                                                                                                                                                                                                                        <i class="bi bi-play-fill"></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">
                                                                                                                                                                                                                                        Pay Per View
                                                                                                                                                                                                                                    </span>
                                                                                                                                                                                                                                @endif
                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                        </div>

                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                <p
                                                                                                                                                                                                                    class="p5 ep-counter-text-display text-white-in-body">
                                                                                                                                                                                                                    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>


                

                <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 class="container-xxl px-0 px-xl-2 py-0" style="max-width: 100% !important;">
        <div class="pb-4">
            <div class="border-g-1200-op mb-1 pb-1">
                <div class="home-section" id="sports">
                    <header id="current_news" class="d-flex align-items-center justify-content-between mb-0 w-100 mx-0">
                        <div class="font-size-20 fw-bold my-2 text-accent d-flex w-100"
                            style="color:#dfa326 !important;">
                            Related Videos <hr class="mx-3 flex-fill">
                        </div>
                    </header>
                </div>
                <div class="pb-4">
                <div class="border-g-1200-op mb-1 pb-3">
                    <div class="tab-content">

                        <div class="row no-gutters justify-content-center mx-0" style="max-width:100% !important;">

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

 <!-- 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>
    <!-- jsSocials scripts -->
 
<script>

    //page loader
window.addEventListener('load', function () {
    console.log("page loaded");
    document.querySelector('.loader-wrapper').style.display = 'none';
});

//navbar on scroll effect
window.addEventListener("scroll", () => {
    console.log("nav scrolled");
    let navbar = document.querySelector(".dp-navbar");
    if (window.scrollY > 50) {
        navbar.classList.remove("cs-tr");
        navbar.classList.add("scrolled");
    } else {
        navbar.classList.remove("scrolled");
        navbar.classList.add("cs-tr");
    }
});

    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 cs-com-soon-btn';
            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');
            });
    }

    function clickedLikeDislike(element) {
    console.log('btn clicked');
    if(element.classList.contains('active-like-dislike-btn')) {
        element.classList.remove('active-like-dislike-btn')
    } else {
        element.classList.add('active-like-dislike-btn')
    }
}


</script>
@endsection