@extends('front.layout-ref')


@section('custom_css')
<link rel="stylesheet" href="{{url('front/assets/css/category.css')}}">
@endsection

@section('ls_scripts')
<link rel="stylesheet" href="{{url('front/assets/css/theme-custom.css')}}">
<link rel="stylesheet" href="{{url('front/assets/css/owl.carousel.min.css')}}">
<link rel="stylesheet" href="{{url('front/assets/css/owl.theme.default.min.css')}}">
<script defer src="{{url('front/assets/js/owl.carousel.js')}}"></script>
@endsection

@section('content')
<main class="container-fluid main-content-ls-section p-0 px-xl-3 py-lg-5 mt-xl-5 position-relative"
    style="max-width:1776px;">
    <div class="bg-gray-1100 px-lg-5 first-space-bar">
        <div class="container-fluid 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 py-1 py-3 px-4 px-md-5">

                                            <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 text-decoration-none"><i
                                                                    class="fa fa-play text-red"
                                                                    style="color:red;text-decoration:none !important;"></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 text-decoration-none"><i
                                                                    class="fa fa-play text-red"
                                                                    style="color:red;text-decoration:none !important;"></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 py-4 py-lg-0">
                                            <div class="r_img">
                                                <img class="d-block img-fluid image slide-image-main w-100"
                                                    src="{{ $slide->landscape_thumbnail}}" alt="thumbnail">
                                            </div>
                                        </div>
                                    </div>


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

                </div>
            </div>
        </div>

        <div class="container-fluid program-lineup-container px-1 py-1" style="max-width:1776px;">
            <div class="channel-heading-container d-flex align-items-center p-0 py-3 m-0">
                <h6 class="h6 fw-bold channel-heading accent-color p-0 m-0 me-2">
                    {{$categoryName}}
                </h6>
                <div class="border-line-div p-0 flex-fill"> </div>
            </div>
            <div class="pb-4">
                <div class="border-g-1200-op mb-1 pb-3 px-0">
                    <div class="tab-content">

                        <div class="row no-gutters" style="width:100% !important;margin-left:0px !important;margin-left:0px !important;">

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


<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