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


<style>
    * {
        box-sizing: border-box !important;
    }

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

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

    .media-scale-transform:hover {
        transform: scale(1.2) !important;
        transition: .3s !important;

    }

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

    /* .item:hover .landscape-videos
        {
            height:280px!important;

        } */

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

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


    .home-page-video-player {
        width: 300px !important;
        height: 133px !important;
        object-fit: cover;
    }


    .active {
        color: #292826 !important;
    }

    .pages-content {
        color: #292826 !important;
        margin: 0px 50px;
    }

    .breadcrump-section {
        padding-top: 70px;
        background: #000f1e !important;
    }

    @media(max-width: 575px) {
        .custom-mb-top-div {
            margin-top: 2vh !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">

    @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">
                    <h6 class="font-size-30 font-weight-semi-bold text-center mb-1">Search</h6>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb justify-content-center p-0">

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

    <!--overlay-->

    <div class="bg-gray-1100 space-1" style="overflow-x:hidden !important;">
        <div class="container px-md-6 px-xl-7 px-wd-6 pb-3 pt-1">

            <div class="pb-4">
                <div class="border-g-1200-op mb-1 pb-3">
                    <div>
                        <div class="dark">
                            @include('front.design.video-grid-portrait', ['videos' => $videos, 'pagination' => true])
                        </div>
                    </div>

                </div>
            </div>
            <!--Dakar Section End-->

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