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

<style>

.pagination{
    font-family: 'Merriweather', serif!important;
    display: inline-flex;
    font-family: 'open sans', sans-serif;
    font-weight: 400;
    font-size: 18px;
    }
    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: 22px;
        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;
    }
        .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;
        }

        .r_img {
            width: 100%;
            /*height: 600px;*/
             height: auto!important;
        }
        .vide_area {
            height: 500px;
        }
        @media (min-width:1025px)
        {
            .slide-image{
                width: 711px!important;
                height: 400px!important;
                margin-top: 100px;
            }
        }
        @media (max-width:1024px)
        {
            .slide-image{
                width: 100% !important;
                height: 500px!important;
            }
        }
 @media (max-width:768px)
        {
        .gird-view-videos .item {
    width: 100%!important; 
    float: none!important;
     margin: 0px;
}

.category_title{
    margin-bottom:2vh !important;
}
        }
        
        /* iPads (landscape) ----------- */
    @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

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

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

    .slide-image-main {
        height: 100%;
    }

    @media only screen and (min-width: 1200px) {
        .slide-image-main {
            height: 600px !important;
        }
    }


    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
        .carousel-inner {
            position: relative;
            width: 100%;
            overflow: hidden;
            height: 600px;
        }

        .r_img {
            width: 100%;
            height: auto !important;
        }
       .height-150 {
            height: 200px;
        }
    }

    @media only screen and (min-width: 992px) {
        .height-150 {
            height: 150px;
        }
        .vide_area {
            height: 600px;
        }
    }
    
    /* additional styling */
    @media only screen and (max-width: 576px) {
        .vide_area, .carousel-inner, #demo .carousel-item, .carousel-item {
            height: auto !important;
            border:none !important;
        }
        
        .carousel-item{
            padding:0 !important;
        }
        .mbthumbnail-dislay{
            border:2px solid red !important;
        }
        .second-space-bar{
            padding-top:7px !important;
        }
        
        .third-space-bar{
            padding-top:5px !important;
        }

    
    }
    
    .pgr nav .pagination{
        overflow-x:hidden !important; 
        overflow-y:hidden !important;
    }
    
    @media(max-width: 575px){ 
        .big_title{font-size:20px !important;} 
        .custom-mb-description{font-size:13px !important;}
    }
    
    .custom-big-title{
        color: #dfa326 !Important;
    }
    
    .category_title{
        font-size:16px !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;
     }
 }

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

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

    .live-broadcast-related-videos-section-custom-pagination {
        text-align: center;
        margin-top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .live-broadcast-related-videos-section-pages {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 100%;
        width: 200px;
    }

    .live-broadcast-related-videos-section-page-number,
    .live-broadcast-related-videos-second-section-page-number {
        cursor: pointer;
        background-color: #DFA326;
        color: #111111;
        border-radius: 5px;
        height: 30px;
        width: 30px;
        margin: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.4s ease;
    }

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



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

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

    .live-broadcast-related-videos-section-arrow:disabled,
    .live-broadcast-related-videos-second-section-arrow:disabled {
        background-color: #ffffff00;
        color: #ccc;
        cursor: not-allowed;
    }

    /* #live-broadcast-related-videos-section-prevPage {
        margin-right: 12px;
    }

    #live-broadcast-related-videos-section-nextPage {
        margin-left: 12px;
    } */

    .live-broadcast-related-videos-section-arrow,
    .live-broadcast-related-videos-second-section-arrow {
        font-size: 1em;
    }

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

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

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

    /*additional pagination styling */

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

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

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

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

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

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

        100% {
            transform: rotate(-360deg);
        }
    }
    .dp-none{display:none !important;}
 </style>
 
@endsection
@section('content')
<script>
    window.addEventListener('load', function () {
        document.querySelector('.loader-wrapper').style.display = 'none';
        document.querySelector('.content-main-block').style.display = 'block';
        document.querySelector('.main-footer').classList.remove('dp-none');
    });
</script>
<!-- page loader -->
<div id="loader" class="loader-wrapper">
    <span class="loader"></span>
</div>
<!-- page loader -->
    <!-- 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 first-space-bar">
            <div class="container mx-auto p-0 pb-3 pt-1 px-2 px-lg-5 px-xxl-0">
             <div class="vide_area" style="height:auto !important;">
        <!--Main_Slider-->
        <div id="demo" class="carousel slide" data-ride="carousel">

            <!-- Indicators -->
            <ul class="carousel-indicators">
                <li data-target="#demo" data-slide-to="0" class="active"></li>
                <li data-target="#demo" data-slide-to="1"></li>
                <li data-target="#demo" data-slide-to="2"></li>
            </ul>
           
            <div class="carousel-inner">
                @if(isset($slideVideo))
                    @foreach($slideVideo as $slide)
                <div class="carousel-item @if($loop->iteration==1) active @endif">

                        <div class="row align-items-center">
                            <div class="col-md-4 col-sm-12">

                                    <div class="content_holder">
                                        <div class="big_title custom-big-title">{{$slide->title}}</div>
                                        <div class="category-page-subtitle-slide small_title light_grey_text">{{Str::words($slide->sub_title)}}</div>
                                        <div class="text-white description custom-mb-description">
                                            {{ strip_tags(html_entity_decode(Str::words($slide->description,10))) }}
                                        </div>

                                    <div class="actn_data pt-5">

                                                <div class="actn_content">
                                                    <div class="video_watch">
                                                       <a href="{{route('front.singleVideoPage', ['device'=> 'dp', 'slug' => $slide->slug])}}" class="d-none d-xl-block"><i class="fa fa-play text-red"></i> <small class="text-white">Watch Now</small> </a>
                                                        <a href="{{route('front.singleVideoPage', ['device'=> 'mb', 'slug' => $slide->slug])}}" class="d-block d-xl-none"><i class="fa fa-play text-red"></i> <small class="text-white">Watch Now</small> </a>
                                                    </div>
                                                    <div class="actn_secondary_text text-light-white-1300 font-size-13 light_grey_text">
                                                        {{$slide->created_at->format('d M, Y')}}
                                                    </div>
                                                </div>




                                    </div>
                                  </div>

                            </div>
                            <div class="col-md-8 col-sm-12">
                                <div class="r_img">
                                    <img class="d-block img-fluid image slide-image-main" src="{{ $slide->landscape_thumbnail}}" alt="thumbnail">
                                </div>
                            </div>
                        </div>


                </div>
                    @endforeach
                @endif
            </div>

        </div>
    </div>
</div>
</div>
        <!--end-->
{{--        slider end--}}
 <!-- <div class="bg-gray-1100 space-1">
        <div class="container mx-auto p-0 pb-3 pt-1 px-2 px-lg-5 px-xxl-0"> -->
        <div class="bg-gray-1100 space-1 second-space-bar">
            <div class="bg-gray-1100 space-1 second-space-bar">
                <div class="container mx-auto p-0 pb-3 pt-1 px-2 px-lg-5 px-xxl-0">
                    <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-1 w-100">
                                    <div class="font-size-20 font-weight-bold mb-3 mb-md-0 text-golden font-secondary category_title" style="color:#dfa326 !important;margin-top:4vh !Important;">
                                        {{$categoryName}}
                                    </div>
                                    <div class="d-block border-top col p-0 mx-3 mt-3 border-gray-6830"></div>
                                </header>
                            </div>
                            <div class="tab-content">
                            
                                        <div class="row no-gutters">

                                            @if(get_design_option($slug) == 'Verticle')
                                                @include('front.design.video-grid-portrait', ['videos'=> $videos, 'pagination' => true])
                                            @elseif(get_design_option($slug) == 'Horizontal')
                                                 @include('front.design.video-grid-landscape', ['videos'=> $videos, 'pagination' => true, 'display_device' => $device])
                                            @endif
                                        </div>

                            </div>


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

@section('custom-script')
<script src="{{url('front/assets/js/custom-js.js')}}"></script>
<script src="{{url('front/assets/js/owl.carousel.js')}}"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script>
      //pagination functions
      const pages = document.querySelectorAll(".live-broadcast-related-videos-section");
    const pageNumbers = document.querySelectorAll(".live-broadcast-related-videos-section-page-number");
    const prevButton = document.getElementById("live-broadcast-related-videos-section-prevPage");
    const nextButton = document.getElementById("live-broadcast-related-videos-section-nextPage");
    let currentPage = 0;

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

    function updateButtons() {
        prevButton.disabled = currentPage === 0;
        nextButton.disabled = currentPage === pages.length - 1;
        pageNumberstoDislay();
    }

    function setActive() {
        pageNumbers.forEach((page, index) => {
            if (currentPage === index) {
                page.classList.add("live-broadcast-related-videos-section-active");
            } else {
                page.classList.remove("live-broadcast-related-videos-section-active");
            }
        });
    }

    function pageNumberstoDislay() {

        let activePageNumber = currentPage + 1,
            totalpageNumbers = pages.length;

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

        //return array of pages to display
        let prevPageOne = activePageNumber - 1;
        let prevPageTwo = activePageNumber - 2;
        let nextPageOne = activePageNumber + 1;
        let toDisplayPageNUmbers;

        //if activePageNumber is the first, second page
        if (activePageNumber === 1) {
            prevPageOne = nextPageOne + 1;
            prevPageTwo = prevPageOne + 1;
        }
        if (activePageNumber === 2) {
            prevPageTwo = nextPageOne + 1;
        }

        //if activePageNumber is the last page
        if (activePageNumber === pages.length) {
            nextPageOne = prevPageTwo - 1;
        }

        (prevPageOne < 1) ? prevPageOne = 0: prevPageOne;
        (prevPageTwo < 1) ? prevPageTwo = 0: prevPageTwo;
        (nextPageOne < 1) ? nextPageOne = 0: nextPageOne;

        toDisplayPageNumbers = [activePageNumber, prevPageOne, prevPageTwo, nextPageOne];

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

    }

    pageNumbers.forEach((page, index) => {
        page.addEventListener("click", function() {
            showPage(index);
            currentPage = index;
            updateButtons();
            setActive();
        });
    });

    prevButton.addEventListener("click", function() {
        if (currentPage > 0) {
            currentPage--;
            showPage(currentPage);
            updateButtons();
            setActive();
        }
    });

    nextButton.addEventListener("click", function() {
        if (currentPage < pages.length - 1) {
            currentPage++;
            showPage(currentPage);
            updateButtons();
            setActive();
        }
    });

    showPage(currentPage);
    updateButtons();


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

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

            }
        });

    }

     //(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];

        console.log(`pages to display for related videos ${relatedVideospageNumbers} ${relatedVideostotalpageNumbers} ${relatedVideostoDisplayPageNumbers}`);

        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 () {
        console.log('prev btn clicked');
        if (relatedVideoscurrentPage > 0) {
            relatedVideoscurrentPage--;
            relatedVideosshowPage(relatedVideoscurrentPage);
            relatedVideosupdateButtons();
            relatedVideossetActive();
        }
        console.log('prev btn click complete');
    });

    relatedVideosnextButton.addEventListener("click", function () {
        console.log('btn clicked');
        if (relatedVideoscurrentPage < relatedVideospages.length - 1) {
            relatedVideoscurrentPage++;
            relatedVideosshowPage(relatedVideoscurrentPage);
            relatedVideosupdateButtons();
            relatedVideossetActive();
        }
        console.log('next btn click complete');

    });
    //function: relatedVideospagination functions


    //CALLING FUNCTIONS
    relatedVideosshowPage(relatedVideoscurrentPage);
    relatedVideosupdateButtons();
</script>
@endsection