<?php if ($block->isPopupEnabled()): ?>
    <div id="fake-order-popup" class="fk-order"></div>
    <style>
        .fk-order {
            position: fixed;
            left: 30px;
            bottom: 0;
            background: #fff;
            padding: 15px;
            border: 1px solid #ccc;
            transform: translateY(100%);
            transition: all .5s ease;
            z-index: 200;
            cursor: pointer;
        }

        .fk-order.is-show {
            transform: translateY(0);
            bottom: 30px;
        }

        .fk-order__wrap {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .fk-order__wrap img {
            width: 80px;
            height: 100%;
            object-fit: cover;
        }

        .fk-sub-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }

        .fk-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .fk-address {
            font-size: 12px;
            color: #c1121f;
            margin-bottom: 0;
        }
        .fk-order__content{
            max-width: 220px;
        }
        .fk-order__wrap .pe-7s-close {
            position: absolute;
            top: 0;
            right: 0;
            border: none;
            padding: 0;
            cursor: pointer;
            z-index: 10;
            transition: all .5s ease;
        }

        .fk-order__wrap .pe-7s-close:before {
            font-size: 20px;
            transition: all .5s ease;
        }

        .fk-order__wrap .pe-7s-close:hover {
            background-color: #ccc;
        }

        .loading-notification {
            background: #cf9683;
            width: 100%;
            height: 3px;
            display: block;
            animation: in-out-prd ease;
            animation-iteration-count: infinite;
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
        }

        @keyframes in-out-prd {
            0% {
                width: 100%;
            }

            100% {
                width: 0;
            }
        }

    </style>
    <script>
       window.fakeOrders = '<?php echo json_encode($block->getFakeOrders()); ?>';
        window.popupInterval = '<?php echo $block->getPopupInterval(); ?>';
        require(['jquery'], function ($) {
            $(document).ready(function () {
                let orders = JSON.parse(window.fakeOrders);
                let index = 0;
                let popupDisplayTime = <?=$block->getPopupDisplayAfterSeconds()?>;

                let isPopupClosed = localStorage.getItem('fakeOrderPopupClosed');
                let now = new Date().getTime();

                if (isPopupClosed && now - isPopupClosed < 24 * 60 * 60 * 1000) {
                    return;
                }

                function getRandomMinutesAgo(minMinutes, maxMinutes) {
                    return Math.floor(Math.random() * (maxMinutes - minMinutes + 1)) + minMinutes;
                }

                function showFakeOrder() {
                    let order = orders[index];
                    let randomMinutesAgo = getRandomMinutesAgo(1, 60);

                    $('#fake-order-popup').html(`
                        <a href="${order.url}">
                        <div class="fk-order__wrap">
                            <img src="${order.image}" alt="${order.title}" />
                            <div class="fk-order__content">
                                <p class="fk-sub-title"><?= /* @escapeNotVerified */ __('Someone recently bought a')?></p>
                                <h4 class="fk-title">${order.title}</h4>
                                <p class="fk-address">${randomMinutesAgo} <?= /* @escapeNotVerified */ __('minutes ago')?> <?= /* @escapeNotVerified */ __('from');?> ${order.location}</p>
                            </div>
                            <button class="pe-7s-close fk-close" data-role="closeBtn" type="button"></button>
                        </div>
                        </a>
                        <span class="loading-notification"></span>
                    `);


                    $('.loading-notification').css({
                        'animation-duration': popupDisplayTime + 's'
                    });

                    $('#fake-order-popup').addClass('is-show');

                    setTimeout(function () {
                        $('#fake-order-popup').removeClass('is-show');
                    }, popupDisplayTime * 1000);

                    index = (index + 1) % orders.length;
                }

                $(document).on('click', '[data-role="closeBtn"]', function () {
                    $('#fake-order-popup').removeClass('is-show');
                    localStorage.setItem('fakeOrderPopupClosed', new Date().getTime());
                });

                showFakeOrder();
                setInterval(showFakeOrder, popupDisplayTime * 2000);
            });
        });
    </script>
<?php endif; ?>
