@extends('themes.public.'.setting('active_public_theme').'.layouts.default')
@push('custom-css')
<link href="{{ asset('assets/core/plugins/OwlCarousel2-2.3.4/dist/assets/owl.carousel.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/core/plugins/OwlCarousel2-2.3.4/dist/assets/owl.theme.default.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/themes/public/' . setting('active_public_theme') . '/assets/css/styleSlideshowOld.css') }}" rel="stylesheet" />
<style>
.bg-takenplace {
    background: radial-gradient({{ $wedding->branding_bg_color_1 }} 1%, {{ $wedding->branding_bg_color_2 }} 50%);
}
</style>
@endpush
@section('content')
    <div class="row mx-0">
        <div class="row mx-0" style="width: 100%; overflow: hidden">
            <div class="outer mx-0" style="min-width: 100%;">
                <div id="fullscreen-area">
                    <div class="bg-takenplace">
                        <div class="bg-takenplace-logo-wrapper-left">
                            <img src="{{ $wedding->brandingLogo ?? asset('assets/themes/public/' . setting('active_public_theme') . '/assets/img/tp_white.png') }}" class="bg-takenplace-logo bg-takenplace-logo-left bg-takenplace-logo-hidden" />
                        </div>
                        <div class="bg-takenplace-logo-wrapper-right">
                            <img src="{{ $wedding->brandingLogo ?? asset('assets/themes/public/' . setting('active_public_theme') . '/assets/img/tp_white.png') }}" class="bg-takenplace-logo bg-takenplace-logo-right bg-takenplace-logo-hidden" />
                        </div>
                    </div>
                    <div id="big" class="owl-carousel owl-theme owl-new"></div>

                    <div class="play-stop">
                        <a class="btn btn-default secondary play"><i class="fa fa-play"></i> Play</a>
                        <a class="btn btn-default secondary stop"><i class="fa fa-stop"></i> Stop</a>
                        <a class="btn btn-default secondary enter-fullscreen"><i class="fa fa-arrows-alt"></i> Enter Fullscreen Mode</a>
    {{--                    <a class="btn btn-default secondary exit-fullscreen"><i class="fa fa-arrows-alt"></i> Exit Fullscreen Mode</a>--}}
                    </div>
                </div>

                <div id="thumbs" class="owl-carousel owl-theme"></div>
            </div>
        </div>
    </div>
<script src="{{asset('assets/core/plugins/OwlCarousel2-2.3.4/dist/owl.carousel.min.js')}}"></script>
<script src="{{asset('assets/themes/public/' . setting('active_public_theme') . '/assets/plugins/jquery/jquery.fullscreen.min.js')}}"></script>
    @push('custom-js')
        <script>
            let isAutoplaying = false;

            $('#fullscreen-area .stop').hide();

            if ($.fullscreen.isFullScreen()) {
                $('#fullscreen-area .enter-fullscreen').hide();
                // $('#fullscreen-area .exit-fullscreen').show();
            } else {
                $('#fullscreen-area .enter-fullscreen').show();
                // $('#fullscreen-area .exit-fullscreen').hide();
            }

            class ClassWatcher {
                constructor(targetNode, classToWatch, classChangedCallback) {
                    this.targetNode = targetNode
                    this.classToWatch = classToWatch
                    this.classChangedCallback = classChangedCallback
                    this.observer = null
                    this.lastClassState = targetNode.classList.contains(this.classToWatch)

                    this.init()
                }

                init() {
                    this.observer = new MutationObserver(this.mutationCallback)
                    this.observe()
                }

                observe() {
                    this.observer.observe(this.targetNode, { attributes: true })
                }

                disconnect() {
                    this.observer.disconnect()
                }

                mutationCallback = mutationsList => {
                    for(let mutation of mutationsList) {
                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                            let currentClassState = mutation.target.classList.contains(this.classToWatch)
                            if (this.lastClassState !== currentClassState) {
                                this.lastClassState = currentClassState

                                this.classChangedCallback()
                            }
                        }
                    }
                }
            }

            // document's event
            $(document).bind('fscreenchange', function(e, state, elem) {
                // if we currently in fullscreen mode
                if ($.fullscreen.isFullScreen()) {
                    $('#fullscreen-area .enter-fullscreen').hide();
                    $('.play').click();
                    $('.stop').hide();
                    $('.owl-prev').hide();
                    $('.owl-next').hide();

                    var timeout = null;

                    $(document).on('mousemove', function() {
                        $('.owl-prev').show();
                        $('.owl-next').show();

                        clearTimeout(timeout);

                        timeout = setTimeout(function() {
                            $('.owl-prev').hide();
                            $('.owl-next').hide();
                        }, 2000);
                    });
                } else {
                    $('#fullscreen-area .enter-fullscreen').show();
                    $('.owl-prev').show();
                    $('.owl-next').show();
                    // $('#fullscreen-area .exit-fullscreen').hide();
                    $('.stop').click();
                }
            });

            $(document).ready(function() {
                var bigimage = $("#big");
                var thumbs = $("#thumbs");
                //var totalslides = 10;
                var syncedSecondary = true;

                let isAutoplay = true;//parseInt("{{ request()->get('autoplay') }}") === 1;

                let previousPhotoIndex = 0;

                bigimage
                    .owlCarousel({
                        items: 1,

                        autoplay: true,
                        autoPlaySpeed: 5000,
                        autoPlayTimeout: 5000,
                        autoplayHoverPause: true,
                        smartSpeed: 5000, // duration of change of 1 slide

                        nav: true,
                        dots: false,
                        loop: true,
                        responsiveRefreshRate: 200,
                        responsiveClass: true,
                        responsive: {
                            0: {
                                items: 1,
                            },
                            600: {
                                items: 1,
                            },
                            1000: {
                                items: 1,
                            }
                        },
                        navText: [
                            '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
                            '<i class="fa fa-arrow-right" aria-hidden="true"></i>'
                        ]
                    })
                    .on("changed.owl.carousel", syncPosition);

                if (isAutoplay) {
                    bigimage.trigger('play.owl.autoplay', [10000])
                    $('#fullscreen-area .stop').show();
                    $('#fullscreen-area .play').hide();

                    isAutoplaying = true;
                }

                $('.enter-fullscreen').on('click', function() {
                    $('#fullscreen-area').fullscreen();
                    return false;
                });

                $('.play').on('click', function() {
                    $('#fullscreen-area .stop').show();
                    $(this).hide()

                    setTimeout(() => {
                        bigimage.trigger('play.owl.autoplay', [10000]);
                        bigimage.trigger('next.owl.carousel');
                    }, 300);

                    isAutoplaying = true;
                })

                $('.stop').on('click', function() {
                    $('#fullscreen-area .play').show();
                    $(this).hide()

                    setTimeout(() => {
                        bigimage.trigger('stop.owl.autoplay')
                    }, 300);

                    isAutoplaying = false;
                })
                thumbs
                    .on("initialized.owl.carousel", function() {
                        thumbs
                            .find(".owl-item")
                            .eq(0)
                            .addClass("current");
                    })
                    .owlCarousel({
                        items: 10,
                        dots: false,
                        nav: true,
                        navText: [
                            '<i class="fa fa-arrow-left" aria-hidden="true"></i>',
                            '<i class="fa fa-arrow-right" aria-hidden="true"></i>'
                        ],
                        smartSpeed: 300,
                        slideSpeed: 500,
                        slideBy: 4,
                        responsiveRefreshRate: 100
                    });

                async function syncPosition(el) {
                    //if loop is set to false, then you have to uncomment the next line
                    //var current = el.item.index;

                    //to disable loop, comment this block
                    var count = el.item.count - 1;
                    var current = Math.round(el.item.index - el.item.count / 2 - 0.5);

                    if (current < 0) {
                        current = count;
                    }

                    if (current > count) {
                        current = 0;
                    }

                    //to this
                    thumbs
                        .find(".owl-item")
                        .removeClass("current")
                        .eq(current)
                        .addClass("current");
                    var onscreen = thumbs.find(".owl-item.active").length - 1;
                    var start = thumbs
                        .find(".owl-item.active")
                        .first()
                        .index();
                    var end = thumbs
                        .find(".owl-item.active")
                        .last()
                        .index();

                    // first → last
                    if (current > end) {
                        thumbs.data("owl.carousel").to(current, 100, true);
                    }

                    // last → first
                    if (current < start) {
                        thumbs.data("owl.carousel").to(current - onscreen, 100, true);
                    }

                    if (
                        isAutoplaying
                        && previousPhotoIndex === end
                        && current === 0
                    ) {
                        await retrievePhotos(false);
                    }

                    previousPhotoIndex = current;
                }

                thumbs.on("click", ".owl-item", function(e) {
                    e.preventDefault();
                    var number = $(this).index();
                    bigimage.data("owl.carousel").to(number, 300, true);
                });
            });

            async function updateBackground() {
                if (
                    document.getElementById("big").getElementsByClassName("owl-item active")[0] !== undefined
                    && document.getElementById("big").getElementsByClassName("owl-item active")[0].getElementsByTagName("img")[0].naturalWidth > document.getElementById("big").getElementsByClassName("owl-item active")[0].getElementsByTagName("img")[0].naturalHeight
                ) {
                    [...document.getElementsByClassName("bg-takenplace-logo")].forEach(function(el) {
                        el.classList.add("bg-takenplace-logo-hidden");
                    });
                } else {
                    [...document.getElementsByClassName("bg-takenplace-logo")].forEach(function(el) {
                        el.classList.remove("bg-takenplace-logo-hidden");
                    });
                }
            }

            function isSlideshowUpdated(newPhotos) {
                if (typeof structuredClone !== 'undefined') {
                    return JSON.stringify(structuredClone(photos).sort((a, b) => (a.photo > b.photo) ? 1 : ((b.photo > a.photo) ? -1 : 0))) !==
                        JSON.stringify(structuredClone(newPhotos).sort((a, b) => (a.photo > b.photo) ? 1 : ((b.photo > a.photo) ? -1 : 0)))
                }

                //fallback method for browsers not having structuredClone
                return newPhotos.length !== photos.length;
            }

            function addPhotoToSlideshow(photo) {
                let bigHtml = `<div class="item">
                    <div class="cap box-shadow-inset">
                        @if ($wedding->branding_show_guest_name || $wedding->show_message)
                        if (photo.name || photo.message) {
                        <p class="caption">`;

                        if (photo.name) {
                            bigHtml += `<span class="user-details">${photo.name}</span>`;
                        }

                        @if ($wedding->show_message)
                        if (photo.message) {
                            bigHtml += photo.message;
                        }
                        @endif

                        bigHtml += `</p>
                        @endif
                        <img src="${photo.url}" class="img-responsive" />
                    </div>
                </div>`;

                let thumbnailHtml = `<div class="item">
                        <img src="${photo.thumbnail_url}" class="img-responsive" />
                    </div>`;

                $('#big').owlCarousel('add', bigHtml).owlCarousel('update');
                $('#thumbs').owlCarousel('add', thumbnailHtml).owlCarousel('update');

                [...document.getElementById("big").getElementsByClassName("owl-item")].forEach(function(el) {
                    let classWatcher = new ClassWatcher(el, 'active', updateBackground)
                });
            }

            function cleanSlideshow() {
                for (i = 0; i < 1000; i++) {
                    try {
                        $('#big').owlCarousel('remove', [0]).owlCarousel('update');
                        $('#thumbs').owlCarousel('remove', [0]).owlCarousel('update');
                    } catch (e) {
                        break;
                    }
                }
            }

            async function refreshCarrousel() {
                cleanSlideshow();

                for (var i in photos) {
                    await addPhotoToSlideshow(photos[i]);
                };
            }

            function preloadImage(url)
            {
                var img = new Image();
                img.src = url;
            }

            async function retrievePhotos(reloadOnlyOnUpdated = true) {
                await $.ajax({
                    url: "{{ route('takenplace::events.live.refreshSlideshow', $wedding->slideshow_id) }}",
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    dataType: "json",
                    type: "GET",
                    success: async (response) => {
                        var slideshowUpdated = isSlideshowUpdated(response.photos);

                        if (slideshowUpdated && response.photos.length && photos.length) {
                            preloadImage(response.photos[0].url);
                            preloadImage(response.photos[0].thumbnail_url);

                            await new Promise(r => setTimeout(r, 1234));
                        }

                        photos = response.photos;

                        if (slideshowUpdated || !reloadOnlyOnUpdated) {
                            setTimeout(refreshCarrousel, 100);

                            setTimeout(updateBackground, 200);
                        }
                    }
                });
            }

            let photos = [];

            retrievePhotos();

            setInterval(retrievePhotos, 12345);
        </script>
    @endpush
@endsection