@extends('front.layout-ref')

<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>
<link rel="stylesheet" href="{{url('front/assets/js/new_home.js')}}">



@section('content')
<style>
    body {
        padding-top: 100px !Important;
    }
    #search-block{
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
</style>
@if($search != '')
    <section class="breadcrump-section">
        <div class="bg-gray-1000 py-6 pt-lg-9 pb-lg-11 mb-lg-10 custom-mb-top-div"
            style="margin-bottom: 0px!important; padding:20px 0px!important;background:rgb(221,150,10);">
            <div class="container px-md-5 mb-lg-2 text-white">
                <h6 class="font-size-30 font-weight-semi-bold text-center text-black mb-1">Search Results</h6>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb justify-content-center p-0 text-white" style="color:white !important;">

                        @if(isset($search))
                            <li class="breadcrumb-item text-black" aria-current="page">
                                Search results for <b>{{$search}}</b>
                            </li>
                            <li class="breadcrumb-item text-black" aria-current="page">
                                ({{$videos->count()}} results found...)
                            </li>
                        @else
                            <li class="breadcrumb-item text-black" aria-current="page">
                                Nothing to search</li>
                        @endif
                    </ol>
                </nav>
            </div>
        </div>
    </section>

    <div class="container-xxl px-0 px-xl-2 py-2" style="max-width: 1776px;">
        <div class="pb-4">
            <div class="pb-4">
                <div class="border-g-1200-op mb-1 pb-3">
                    <div class="tab-content">

                        <div class="row no-gutters">
                            @if(isset($videos))
                                @include('front.design.video-grid-portrait', ['videos' => $videos, 'pagination' => true])
                            @endif
                        </div>

                    </div>


                </div>
            </div>


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

   

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

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