@extends('themes.public.'.setting('active_public_theme').'.layouts.default')
@section('content')
<div class="row mx-0">
    <div class="row mx-0" style="width: 100%; overflow: hidden">
        <div class="outer mx-0">
            <div id="fullscreen-area">
                <div class="bg-takenplace-logos">
                    <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="main-slider" class="splide">
                    <div class="splide__track">
                        <ul class="splide__list"></ul>
                    </div>

                    <div class="play-stop">
                        <button class="btn btn-md btn-default secondary splide__toggle" type="button">
                            <span class="splide__toggle__play"><i class="fa fa-play"></i> Play</span>
                            <span class="splide__toggle__pause"><i class="fa fa-pause"></i> Pause</span>
                        </button>

                        <a class="btn btn-md btn-default secondary enter-fullscreen"><i class="fa fa-arrows-alt"></i> Fullscreen</a>
                        {{-- <a class="btn btn-default secondary exit-fullscreen"><i class="fa fa-arrows-alt"></i> Exit Fullscreen</a>--}}
                        <div class="splide__progress">
                            <div class="splide__progress__bar"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="thumbnail-slider" class="splide">
                <div class="splide__track">
                    <ul class="splide__list"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ asset('assets/core/plugins/splide-4.1.3/js/splide.min.js') }}"></script>
<script src="{{ asset('assets/themes/public/' . setting('active_public_theme') . '/assets/plugins/jquery/jquery.fullscreen.min.js') }}"></script>
@push('custom-css')
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link href="{{ asset('assets/core/plugins/splide-4.1.3/css/themes/splide-default.min.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/themes/public/' . setting('active_public_theme') . '/assets/css/styleSlideshow.css?20230927') }}" rel="stylesheet" />
<style>
.bg-takenplace-gradient {
    background: radial-gradient({{ $wedding->branding_bg_color_1 }} 1%, {{ $wedding->branding_bg_color_2 }} 50%);
}

body {
    background: radial-gradient({{ $wedding->branding_bg_color_1 }} 1%, {{ $wedding->branding_bg_color_2 }} 50%) !important;
    overflow-x: hidden;
}
</style>
@endpush
@push('custom-js')
<script>
    var photos = [];

    var main = null;

    var thumbnails = null;

    var transitionDuration = 234;

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

    $(document).bind('fscreenchange', function(e, state, elem) {
        if ($.fullscreen.isFullScreen()) {
            $('#fullscreen-area .play-stop').hide();
            $('#fullscreen-area.splide__arrow').hide();
            $('#fullscreen-area').addClass('bg-takenplace-gradient');

            var timeout = null;

            $(document).on('mousemove', function() {
                $('#fullscreen-area.splide__arrow').show();

                clearTimeout(timeout);

                timeout = setTimeout(function() {
                    $('#fullscreen-area.splide__arrow').hide();
                }, 2000);
            });
        } else {
            $('#fullscreen-area .play-stop').show();
            $('#fullscreen-area.splide__arrow').show();
            $('#fullscreen-area').removeClass('bg-takenplace-gradient');
            main.Components.Autoplay.pause();
        }
    });

    $(document).ready(function() {
        var bigimage = $("#main-slider");
        var thumbs = $("#thumbnail-slider");
        var syncedSecondary = true;

        var previousPhotoIndex = 0;

        main = new Splide('#main-slider', {
            type: 'loop',
            heightRatio: 1,
            pagination: false,
            arrows: true,
            cover: true,
            autoplay: true,
            pauseOnHover: false,
            pauseOnFocus: false,
            speed: transitionDuration,
        });

        thumbnails = new Splide('#thumbnail-slider', {
            rewind: true,
            fixedWidth: 120,
            fixedHeight: 90,
            isNavigation: true,
            gap: 10,
            focus: 'center',
            pagination: false,
            cover: true,
            dragMinThreshold: {
                mouse: 4,
                touch: 10,
            },
            breakpoints: {
                640: {
                    fixedWidth: 66,
                    fixedHeight: 38,
                },
            },
        });

        main.sync(thumbnails);
        main.mount();
        thumbnails.mount();

        main.on('mounted moved', updateBackground);

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

            return false;
        });
    });

    async function updateBackground(newIndex, prevIndex, destIndex) {
        await setTimeout(() => {}, transitionDuration + 20);
        item = document.getElementById("main-slider").getElementsByClassName("item is-active")[0];

        if (
            item !== undefined &&
            item.getElementsByTagName("img")[0].naturalWidth > item.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) {
        var bigHtml = `<div class="item">
                    <div class="cap">`;

        @if ($wedding->branding_show_guest_name || $wedding->show_message)
        if (photo.name || photo.message) {
            bigHtml += '<p class="caption">';

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

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

            bigHtml += '</p>';
        }
        @endif

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

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

        main.add(bigHtml)
        thumbnails.add(thumbnailHtml)
    }

    function cleanSlideshow() {
        main.remove('*');
        thumbnails.remove('*');
    }

    async function refreshCarrousel() {
        cleanSlideshow();

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

        main.Components.Autoplay.play();
    }

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

    retrievePhotos();

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