@push('custom-css')
<link href="{{ asset('assets/themes/cp/default/assets/css/cpmodule/style-slideshow-preview.css') }}" rel="stylesheet" />
@endpush
@push('custom-js')
<script type="text/javascript">
    //linear-gradient(to right, #ff2fc8 1%, #fef37c 32%, #85D8CE 99%);
    let currentGradient = {
        "type": "radial-gradient",
        "direction": null,
        "colors": [
            '{{ old('branding_bg_color_1', $wedding->branding_bg_color_1) }}',
            '{{ old('branding_bg_color_2', $wedding->branding_bg_color_2) }}',
        ],
        "percents": [
            1, 55,
        ],
    }

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    function updateSlideshowPreviewGradientColor(index, color) {
        currentGradient.colors[index] = color;
        updateSlideshowPreviewGradientPreview();
    }

    function setSlideshowPreviewCaptionVisibility(visible) {
        document.querySelectorAll('.slideshow-preview-container .main-slider .caption').forEach(element => {
            element.style.opacity = visible;
        });
    }

    function setSlideshowPreviewCaptionMessageVisibility(visible) {
        document.querySelectorAll('.slideshow-preview-container .main-slider .caption .caption-message').forEach(element => {
            element.style.height = visible === 1 ? '1.4em' : '0em';
        });
    }

    async function updateSlideshowPreviewGradientPreview() {
        document.querySelectorAll(".slideshow-preview-container .ar-16x9").forEach(async function(element) {
            element.getElementsByClassName('ar-16x9-fake-bg').forEach(async function(fakeBgElement) {
                fakeBgElement.style.transition = 'opacity 0s';
                fakeBgElement.style.opacity = 100;
                fakeBgElement.style.background = element.style.background;
                await sleep(20);
                fakeBgElement.style.transition = 'opacity 0.66s linear';
                fakeBgElement.style.opacity = 0;
            });

            element.style.background = `${currentGradient.type}(${currentGradient.direction ? currentGradient.direction + ", " : ''} ${currentGradient.colors.map((color, index) => `${color} ${currentGradient.percents[index]}%`).join(', ')})`;
        });
    }

    function updateSlideshowPreviewPreviewLogo(file) {
        document.querySelectorAll('.slideshow-preview-container .bg-takenplace-logo').forEach((img) => {
            img.src = URL.createObjectURL(file);
        })
    }

    updateSlideshowPreviewGradientPreview();
</script>
@endpush
<div class="container row mx-auto slideshow-preview-container">
    <div class="col-12">
        <div class="monitor-bg">
            <div class="ar-16x9">
                <div class="ar-16x9-fake-bg"></div>
                <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 class="main-slider">
                    <div class="item">
                        <div class="cap">
                            <p class="caption">
                                <bold>Vanessa Harris</bold>
                                <span class="caption-message">I had a great time at the event!</span>
                            </p>
                            <img class="item" src="{{ asset('assets/themes/cp/default/assets/img/in-photo-booth.jpg') }}">
                        </div>
                    </div>
                </div>
                <div class="splide__arrows">
                    <svg class="splide__arrow splide__arrow--prev" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40" focusable="false">
                        <path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
                    </svg>
                    <svg class="splide__arrow splide__arrow--next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40" focusable="false">
                        <path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
                    </svg>
                </div>
                <div class="play-stop">
                    <button class="btn btn-md btn-default secondary splide__toggle" type="button" aria-label="Start autoplay">
                        <span class="splide__toggle__play"><i class="fa fa-play"></i> Play</span>
                    </button>

                    <a class="btn btn-md btn-default secondary enter-fullscreen"><i class="fa fa-arrows-alt"></i> Fullscreen</a>
                </div>
            </div>
        </div>
    </div>
</div>