@extends('front.layout')
@section('custom-style')



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

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

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

    <!-- OG meta tags -->
    <meta property="og:title" content="Verity TV">
    
    @if(isset($video->description) && $video->description !== "")
        <meta property="og:description" content="{{ trim(strip_tags($video->description)) }}">
    @else
        <meta property="og:description" content="Verity TV is a subscription-based streaming and live broadcast service that allows our members to watch TV shows, documentaries, Political and Society related features from around Africa without commercials on an internet-connected device">
    @endif
    
    <meta property="og:image" content="{{$video->landscape_thumbnail}}">
    
    <meta property="og:image:alt" content="{{$video->slug}}">
    <meta property="og:url" content="https://verity.live/{{$display_device}}/video/{{$video->slug}}">
    <meta property="og:type" content="video.movie">
    <meta property="og:video" content="https://verity.live/{{$display_device}}/video/{{$video->slug}}">
    
    <!-- Add the fb:app_id meta tag -->
    <meta property="fb:app_id" content="1035694597639141">
    
    <!-- Twitter Card meta tag -->
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:image" content="{{$video->landscape_thumbnail}}">

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


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

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

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

    }

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

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

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

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

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

    }

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

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

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

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

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

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

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

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

    }

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

    .overlay {
        height: auto !important;
    }

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

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

    .breadcrumb {
        margin-top: 20px;
    }

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

    .pt-80 {
        padding-top:4rem!important;
    }
    .text-white{
        font-size:0.75rem!important;
        color:#fff!important;
    }

    .video-description,
    .video-description div,
    .video-description p {
        color: #F4F4F4 !important;
        font-size: 12px;
    }
    
    .live_streaming_section{
        position:relative;
    }
        
    @media (max-width:767px) {
        .live_streaming_btn_section_2{
            width: 90px !important;
            height:80px !important;
            position:absolute;
            top:-30px;
            right:10px;
        }
        
        .live_streaming_btn_section_3{
            width: 50px !important;
            height:50px !important;
            position:absolute;
            top:-5px;
            left:-20px;
        }
    }
        
    @media only screen and (min-width : 577px) and (max-width : 768px) {
        .live_streaming_btn_section_3{
            width: 50px !important;
            height:50px !important;
            position:absolute;
            top:-30px;
            right:120px;
        }
    }
        
    @media only screen and (min-width : 768px) and (max-width : 991px) {
        .live_streaming_btn_section_2{
            width: 150px !important;
            height:100px !important;
            position:absolute;
            top:0;
            right:10px;
        }
        
        .live_streaming_btn_section_3{
           display:none !important;
        }
    }
        
    @media (min-width : 992px) {
    
        .live_streaming_btn_section_2{
            width: 180px !important;
            height:100px !important;
            position:absolute;
            top:0;
            right:10px;
        }
        
        .live_streaming_btn_section_3{
           display:none !important;
        }
    }
    
    /* read more/less css styling */
    .video-description{
        --line-clamp: 3;
    }
    
    .video-description p:first-of-type{
      display: -webkit-box;
      -webkit-line-clamp: var(--line-clamp);
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .read-more__checkbox {
      clip: rect(0 0 0 0);
      clip-path: inset(100%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }
    
    .read-more__checkbox ~ .read-more__label {
      cursor: pointer;
      font-size: 1em;
      font-weight: 700;
      text-decoration: underline;
      transform:translateY(-10px);
    }
    
    /* Focus and hover styles for accessibility! */
    .read-more__checkbox:focus ~ .read-more__label {
      border-bottom:1px solid #fff;
      /*box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);*/
    }
    
    .read-more__checkbox:hover ~ .read-more__label {
      text-decoration: none;
    }
    
    .read-more__checkbox ~ .read-more__label::before {
      content: attr(data-read-more);
    }
    
    .read-more__checkbox:checked ~ .read-more__label::before {
      content: attr(data-read-less);
    }
    
    .read-more__checkbox:checked ~ .readmoreptext{
      --line-clamp: none;
      -webkit-line-clamp: var(--line-clamp);
    }
    
    /* read more/less css styling */
    
    .single-video-page-details {
        margin-top: 30px;
    }

    .list-unstyled
    {
        padding-top:20px;
    }
    
    /*additional styling - for the social share modal*/
    .single-player-vid-details-container{
        position:relative;
    }
    
    .socialsharesection{
        position:absolute;
        top:0;
        width:100%;
    }
    
    .responsive-media-social-share-icon{
        Width:100%;
        height:100%;
    }
    
    .socialshareiconbtn-btn{
        width:100px;
        height:100px;
        border-radius:50% !important;
        background-color:transparent !important;
        overflow:hidden !important;
    }
    
        .copy-link-section-btn{
            width:70px;
            height:70px;
            border-radius:100%;
            background-color:ghostwhite !important;
        }
        
        .copy-link-section-btn i{
            font-size:2em;
            color:rgba(0,0,0,.7);
        }
        
        .copy-link-section-btn:hover, .copy-link-section-btn:active, .copy-link-section-btn:focus{
            background-color: #DFA326 !important;
        }
        
        .clickedbtn1 {
          box-shadow: 0 0 0 8px transparent;
          animation: pulse1 1s;
          animation-iteration-count: 4;
        }
        
        @keyframes pulse1 {
          from {
            box-shadow: 0 0 0 0 green;
          }
        }
        
    /* change the twitter logo to X */
    
    .jssocials-share.jssocials-share-twitter .jssocials-share-link{
        background-color:black !important;
    }
    
    i.fa.fa-twitter.jssocials-share-logo:before {
        content: "";
        display: inline-block;
        width: 15px;
        height: 15px;
        /*background-image: url('https://about.twitter.com/content/dam/about-twitter/x/brand-toolkit/logo-black.png.twimg.1920.png');*/
        background-image: url('https://verity.live/public/front/assets/img/x-share-icon-logo-letter-tr.png');
        background-size: cover; 
    }
    
    @media(max-width: 575px){
         
         .socialsharesection{
              margin:0 !important;
              left:0 !important;
         }
          
         .socialshareiconbtn-btn{
            width:70px;
            height:70px;
            border-radius:100% !important;
            background-color:transparent !important;
            overflow:hidden !important;
        }
        
        .sharemodaldivparel{
            padding:0 !important;
            overflow:hidden !important;
           
        }
        
        .sharemodaldiv{
            margin-left:0px !important;
            margin-bottom:0 !important;
            width:100% !important;
            position:fixed !important;
            left:0 !important;
            bottom:0 !important;
            border-bottom-left-radius:0 !important;
            border-bottom-left-radius:0 !important;
            transition:none !important;
            transition-property: none !important;
        }
        
        .modal-content{
            /*background-color: #16202A !important;*/
            /*color: #fff;*/
            border-bottom-left-radius:0 !important;
            border-bottom-right-radius:0 !important;
        }
        
        .copy-link-section-btn{
            width:70px;
            height:70px;
            border-radius:100%;
            background-color:ghostwhite !important;
        }
        
        .copy-link-section-btn i{
            font-size:2em;
            color:rgba(0,0,0,.7);
        }
        
        .copy-link-section-btn:hover, .copy-link-section-btn:active, .copy-link-section-btn:focus{
            background-color: #DFA326 !important;
        }
        
        .clickedbtn1 {
          box-shadow: 0 0 0 8px transparent;
          animation: pulse1 1s;
          animation-iteration-count: 4;
        }
        
        @keyframes pulse1 {
          from {
            box-shadow: 0 0 0 0 green;
          }
        }
        
        .jssocials-share{
              display:block !important;
              margin-bottom:2vh !important;
         }
         
         .jssocials-shares{
             display:flex;
         }
         
        /*.socialshareiconbtn-btn{*/
        /*  width:100% !important;*/
        /*  justify-content:center !important;*/
        /*}*/
    }
    
    /*additional styling */

    @media (max-width:768px) {
        .gird-view-videos .item {
            width: 100% !important;
            float: none !important;
            margin: 0px;
        }
    }
    /* iPads (landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

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

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


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

        }
    }


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

        }


    }


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

        }


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

     @media only screen and (min-width: 992px) {
        .flex-nowrap {
            -ms-flex-wrap: nowrap !important;
            flex-wrap: wrap !important;
        }
        
        #player1, #player1_html5 {
            width: 100% !important;
            object-fit: contain;
            height: auto;
        }
        
        .episode-display-btn{
            width:18% !important;
            margin:2vh 1% !important;
        }
    }
    
    @media(max-width:576px){
       .media-wrapper {
           max-height:30vh;
           overflow:hidden !important;
       }
       
       video{
           height:25vh !important;
           object-fit: fill !important;
       }
       
       .pr-lineup-border-line{
            transform:translateY(-8px);
        }
        
        .mb-category-rel-vids-title{
            font-size:16px !important;
        }
    }
    
    @media(min-width:1199px){
       .media-wrapper {
           max-height:720px;
           overflow:hidden !important;
       }
       
       video{
           height:720px !important;
           object-fit: fill !important;
       }
    }
</style>
 <style>
 @media(min-width:992px) {
     .orientation-message-block {
         display: none !important;
     }
 }

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

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

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

     .orientation-message-block h2 {
         color: #ffffff !important;
         font-size: 1.5em;
         font-weight: 700 !important;
     }
 }
 </style>
@endsection
@section('content')
 <!-- Orientation message block-->
 <div class="orientation-message-block"><h2>Please rotate your device <i class="bi bi-arrow-repeat"></i></h2></div>
 <!-- Orientation message block-->
<main id="content">
    <div class="bg-gray-1100 pt-80">
        <div class="container mx-auto px-md-6 px-xl-7 px-wd-6">
            <nav aria-label="breadcrumb" class="pt-3">
                <ol class="breadcrumb dark font-size-1" style="align-items:center;">
                    <li class="breadcrumb-item"><a href="{{url('/')}}" class="text-gray-1300" style="color:#dfa326 !important;">Home</a></li>
                    <li class="breadcrumb-item text-white active" aria-current="page" style="color:#dfa326 !important;">{{$video->slug}}</li>
                </ol>
            </nav>
            <div class="media-wrapper">

                <video poster="{{ $video->landscape_thumbnail }}" id="player1" width="100%" height="600px" oncontextmenu="return false;" playsinline controls preload="auto" controlsList="nodownload" autoplay>
                    @if(isset($video->video_path))
                    <source src="{{ $video->video_path }}" type="video/mp4">
                    @endif
                </video>
            </div>
            <div class="d-md-flex align-items-center justify-content-between single-video-page-details" >
                <div class="container single-player-vid-details-container">
                    
                    <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" style="width:20%;">
                                <button type="button" class="btn btn-primary socialshareiconbtn-btn p-0" data-bs-toggle="modal" data-bs-target="#sharemodal">
                                    <img src="{{url('front/assets/img/media-share-icon-tr.png')}}" alt="share-across-social-media" class="responsive-media-social-share-icon m-0">
                                </button>
                            </div>
                            <div class="live_streaming_btn_section_3 d-flex justify-content-end" style="width:80% !important;">
                                <div class="in_div pl-3" style="width:100% !important;height:100% important;"> 
                                    @if(isset($video->getRating->image))
                                        <img style="height: 30px!important;
                                        width: auto!important; margin-top:-5px;
                                        " id="specific_video_rating_image_mb" src="{{url('ratings'.'/'.$video->getRating->image)}}">
                                    @endif
                                    @if(isset($video->getRating))
                                        <span style="font-size:0.7em;" id="specific_rating_description_mb"> {{ $video->getRating->description }} </span>
                                    @endif
                                </div>
                            </div> 
                        </div>
                    </div>
                        
                    <h6 class="font-size-24 text-white font-weight-semi-bold font-secondary mb-3 mb-md-1 pt-4 specific-video-title-span-coming-soon-block">
                        <span style="font-size:1.5em;color:#dfa326 !important;" id="video_title_input_block"> {{$video->title}} </span>
                        @if(!isset($video->video_path))
                        <button class="btn btn-xs btn-warning" id="video_coming_soon_input_block">Coming Soon</button>
                        @endif
                    </h6>
                    
                    
                    <p class="category-page-subtitle-slide" style="font-size:0.8em;" id="video_sub_title_input_block">{{Str::words($video->sub_title)}}</p>
                    <ul class="list-unstyled nav nav-meta font-secondary mb-3 overflow-auto overflow-md-hidden flex-nowrap flex-md-wrap">
                        <li class="text-white flex-shrink-0 flex-shrink-md-1" id="video_created_at_input_block">{{$video->created_at->format('d M, Y')}}</li>
                        <li class="text-white flex-shrink-0 flex-shrink-md-1" id="video_duration_input_block">{{$video->duration}}</li>
                        <li class="text-white flex-shrink-0 flex-shrink-md-1">
                            @if(isset($video->getCategories))
                                @foreach($video->getCategories as $category)
                                    @if(isset($category->getCategory->name))
                                        <a href="{{route('front.getVideosByCategory', ['device' => 'dp', 'slug' => $category->getCategory->slug] )}}" class="d-none d-xl-inline-block">
                                            {{$category->getCategory->name}}
                                        </a>
                                        <a href="{{route('front.getVideosByCategory', ['device' => 'mb', 'slug' => $category->getCategory->slug] )}}" class="d-inline-block d-xl-none">
                                            {{$category->getCategory->name}}
                                        </a>
                                        @if(!$loop->last)
                                        <span>,</span>
                                        @endif

                                    @endif

                                @endforeach
                            @endif
                        </li>
                        <li class="d-none d-md-block">
                            @if(isset($video->getRating->image))
                                <img id="specific_video_rating_image" style="height: 30px!important;
                                width: auto!important; margin-top:-5px;
                                " src="{{url('ratings'.'/'.$video->getRating->image)}}">
                            @endif
                            
                            @php
                                $main_video_rating_img = '';
                                $main_video_rating_img_description = '';
                                
                                if(isset($video->getRating->image)) {
                                    $temp_main_video_rating_image = "https://verity.live/ratings/{$video->getRating->image}";
                                    $main_video_rating_img = $temp_main_video_rating_image;
                                    
                                    $main_video_rating_img_description = $video->getRating->description;
                                } else {
                                
                                    $main_video_rating_img = '';
                                    $main_video_rating_img_description = '';
                                }
                                
                                $retrieved_video_description = strip_tags($video->description);
                                $decoded_video_description = htmlspecialchars_decode($retrieved_video_description);
                                
                            @endphp
                        </li>
                        <li class="d-none d-md-block" id="specific_rating_description">
                            @if(isset($video->getRating))
                                {{ $video->getRating->description }}
                            @endif
                        </li>
                    </ul>
                    <div class="video-description" id="specific_video_description">
                        <input id="read-more-checkbox" type="checkbox" class="read-more__checkbox" aria-hidden="true">
                            {!! $video->description !!}
                        <label for="read-more-checkbox" id="readmoretextid" class="read-more__label" data-read-more="Read more" data-read-less="See less" aria-hidden="true"></label>
                    </div>
                    <div class="container d-flex d-flex-column d-xl-flex-row flex-wrap">
                       <button class="button video-episode-btn" id="playBtn" value="{{$video->video_path}}" onclick='getMessage(this, "{{$video->video_path}}", "{{$video->landscape_thumbnail}}", "{{$video->title}}", "{{$video->sub_title}}", "{{$video->created_at->format('d M, Y')}}", "{{$video->duration}}", "{{$main_video_rating_img}}", "{{$main_video_rating_img_description}}", "{{$decoded_video_description}}")' style="background-color: #dfa326;border-color:none;color:#000f1e;">Episode 1: <span style="font-weight: 500">{{$video->sub_title}}</span></button>
                       @foreach ($video->video_part as $vpart)
                        @php
                            // Calculate the adjusted iteration count based on the current page and items per page
                            $adjustedCount = ($video->video_part->currentPage() - 1) * $video->video_part->perPage() + $loop->iteration + 1;
                        @endphp
                        @php
                            $episode_video_rating_img = '';
                            $episode_video_rating_img_description = '';
                            
                            if(isset($vpart->getRating->image)) {
                                
                                $temp_episode_video_rating_image = "https://verity.live/ratings/{$vpart->getRating->image}";
                                $episode_video_rating_img = $temp_episode_video_rating_image;
                                
                                
                                $episode_video_rating_img_description = $vpart->getRating->description;
                            } else {
                            
                                $episode_video_rating_img = '';
                                $episode_video_rating_img_description = '';
                            }
                            
                            $retrieved_episode_description = strip_tags($vpart->description);
                            $decoded_episode_description = htmlspecialchars_decode($retrieved_episode_description);
                        @endphp
                           <button id="playBtn-{{$loop->iteration - 1}}" class="button video-episode-btn" value="{{$iamgepath.$vpart->video_path}}" onclick='getMessage(this, "{{$vpart->video_path}}", "{{$iamgethumbnailpath.$vpart->thumbnail}}", "{{$vpart->title}}", "{{$vpart->sub_title}}", "{{$vpart->created_at->format('d M, Y')}}", "{{$vpart->duration}}", "{{$episode_video_rating_img}}", "{{$episode_video_rating_img_description}}", "{{$decoded_episode_description}}")' style="background-color:#2e343a;border-color:none;">Episode {{ $adjustedCount }}: <span style="font-weight: 500">{{$vpart->sub_title}}</span></button>
                       @endforeach
                    </div>
                    
                  
                    <!-- Social Share Modal -->
                    <div class="modal sharemodaldivparel" id="sharemodal" data-bs-backdrop="static" data-bs-keyboard="false"  tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
                      <div class="modal-dialog sharemodaldiv">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">Share video</h5>
                            <button type="button" class="btn-close border-0 outline-0" data-bs-dismiss="modal" style="background-color:transparent !important;"> <i class="fa fa-times" aria-hidden="true" ></i> </button>
                          </div>
                          <div class="modal-body p-0">
                             <div class="copy-link-section text-dark w-100 border-bottom p-3 mx-0 my-2">
                                <button type="button" class="btn d-flex flex-direction-column flex-wrap justify-content-center align-items-center mb-2 copy-link-section-btn" onclick="copyLink()"> <i class="fa fa-link" aria-hidden="true"></i> </button>
                                <span id="copy-link-button-text" class="d-block text-secondary mb-0 pl-0"> copy link </span>
                             </div>
                            <div id="share" class="p-3"></div>
                          </div>
                          <div class="modal-footer d-none">
                            <button type="button" class="btn btn-danger d-none d-sm-block" data-bs-dismiss="modal">Close</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <input type="text" id="cpLinkInput" class="d-none" value="">
                    <!-- Social Share Modal -->
                    
                    <div class="container d-flex justify-content-center flex-wrap pt-3">
                       {!! $video->video_part->links() !!}
                    </div>

                </div>

            </div>

        </div>
    </div>


    {{-- Video player END--}}

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

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


                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection

@section('custom-script')

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

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

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

   //Auto-play to next episode on video end
   
        // Array of episodes video sources
        let videoParts = {!! json_encode($videoPartsPaths) !!};
        
        // console.log(`here are your video parts: ${videoParts}`);
        
        // Index of the currently playing episode video
        let currentEpisodeVideoIndex = 0;
        
    
    
    //function 1: //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;
            }
        }
        
        applyReadMoreLess();

    // var mediaElements = document.querySelectorAll('video, audio');

    var mediaElements = $('#player1');
   var vidPlayer = document.getElementById("player1");
    var isViewUploded = false
    // var vid = document.getElementById("upcoming-video-live-video");
    var videoId = {!!$video->id!!};
    setInterval(function() {

        if ((vidPlayer.duration / 2 < vidPlayer.currentTime) && (isViewUploded == false)) {
            isViewUploded = true
            $.ajax({
                type: "GET",

                url: "{{route('front.uploadVideoView', '')}}" + "/" + videoId,
                success: function(data) {}
            });
        }

    }, 1000);
    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
        }
    });
   
</script>


<script>
    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();
                
                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) {
                        
                        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) {
                        video.pause();
                        video.currentTime = 0;
                    }
                }
            });
    });
</script>

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

            }
        });

    }
</script>

{{-- pause video onscroll --}}
<script>
    var videoOnScroll = $('#player1')[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);
</script>


<script>
    function getMessage(element, video_path, thumbnail, title, sub_title, created_at, duration, rating_img_path, rating_description, video_description) {
        
        // $('[id="playBtn"]').css({
        //     'background-color': '#2e343a',
        //     'color': '#fff'
        // });
        
        
        var videoEpisodesButtons = $(".video-episode-btn");
        videoEpisodesButtons.css({
            'background-color': '#2e343a',
            'color': '#fff'
        });  
        
        
        //set video thumbnail
        var videoElement = document.getElementById('player1');
        var newPosterURL = thumbnail;  // Replace with the actual URL
        videoElement.setAttribute('poster', newPosterURL);

        //set video source
        element.style = 'background-color:#dfa326;color:#000f1e';
        var video = document.getElementById("player1")
        var source = document.createElement('source');
        video.src = element.value;
        video.play();
        
        //check and set the episode number
        let episodeNumber = videoParts.indexOf(video.src);
        
        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';
            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('player1');
    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++;
        }
    }
</script>

<script type="text/javascript">   
    //add ripple effect to button when clicked
        $(".copy-link-section-btn").click(function() {
          $(this).addClass('clickedbtn1');
          setTimeout(() => {
            $(this).removeClass('clickedbtn1');
          }, 1000);
        });
        
    //copy link 
        function copyLink() {
             var pageUrl = window.location.href;
             
            // Get the text field
            var copyTextInput = document.getElementById("cpLinkInput");
            copyTextInput.value = pageUrl;

            // Select the text field
            copyTextInput.select();
            copyTextInput.setSelectionRange(0, 99999); // For mobile devices
        
            // Copy the text inside the text field
            navigator.clipboard.writeText(copyTextInput.value);
            
            // Alert the user
           $("#copy-link-button-text").text("Link Copied!");
        }
</script>


@endsection