var PaymentPopup = {
    overlayId: 'payment-overlay',
    popupId: 'payment-popup',
    closeBtnId: 'payment-close',
    iframeId: 'payment-iframe',
    loadinId: 'loading',
    popupUrl: '',

    init: function () {
        this.injectStyles();
        this.createOverlay();
        this.createPopup();
        this.createCloseButton();
        this.createIframe();
        this.attachEvents();
    },

    injectStyles: function () {
        var css = `
                                #payment-overlay {
                                  display: none;
                                  position: fixed;
                                  top: 0;
                                  left: 0;
                                  width: 100%;
                                  height: 100%;
                                  background-color: rgba(0, 0, 0, 0.5);
                                  z-index: 9998;
                                }
                                #payment-popup {
                                  display: none;
                                  position: fixed;
                                  top: 50%;
                                  left: 50%;
                                  transform: translate(-50%, -50%);
                                  width: 700px;
                                  height: 500px;
                                  border: 1px solid #ccc;
                                  background-color: #fff;
                                  z-index: 9999;
                                }
                                #payment-close {
                                  position: absolute;
                                  top: -30px;
                                  right: 10px;
                                  cursor: pointer;
                                }
                                   @media (max-width: 600px) {
                                #payment-popup {
                                  width: 95%;
                                  height: 70%;
                                }
                                #payment-close {
                                  top: 5px;
                                  right: 5px;
                                  font-size: 18px;
                                }
                              }
                              `;
        var style = document.createElement('style');
        style.innerHTML = css;
        document.head.appendChild(style);
    },

    createOverlay: function () {
        var overlay = document.createElement('div');
        overlay.id = this.overlayId;
        document.body.appendChild(overlay);
    },

    createPopup: function () {
        var popup = document.createElement('div');
        popup.id = this.popupId;
        document.body.appendChild(popup);
    },

    createCloseButton: function () {
        var closeButton = document.createElement('button');
        closeButton.id = this.closeBtnId;
        closeButton.textContent = 'Close';
        closeButton.addEventListener('click', function () {
            PaymentPopup.closePopup();
        });
        document.getElementById(this.popupId).appendChild(closeButton);
    },

    createIframe: function () {
        var iframe = document.createElement('iframe');
        iframe.id = this.iframeId;
        iframe.frameBorder = 0;
        iframe.width = '100%';
        iframe.height = '100%';
        document.getElementById(this.popupId).appendChild(iframe);
    },

    attachEvents: function () {
        var self = this;


        document
            .getElementById(this.overlayId)
            .addEventListener('click', function () {
                // self.closePopup();
            });
        document
            .getElementById(this.closeBtnId)
            .addEventListener('click', function () {
                self.closePopup();
            });
        window.addEventListener('payfaci', function (event) {
            var paymentResponse = event.data;
            if (paymentResponse.success) {
                alert('Payment successful!');
                self.closePopup();
            } else {
                alert('Payment cancelled or failed. Please try again.');
                self.closePopup();
            }
        });
    },

    openPopup: function (url) {
        console.log(url);
        if (
            document.getElementById(this.overlayId).style.display === 'block' &&
            document.getElementById(this.popupId).style.display === 'block'
        ) {
            return;
        }
        document.getElementById(this.overlayId).style.display = 'block';
        document.getElementById(this.popupId).style.display = 'block';
        document.getElementById(this.iframeId).src = url;

    },

    closePopup: function () {
        document.getElementById(this.overlayId).style.display = 'none';
        document.getElementById(this.popupId).style.display = 'none';
        document.getElementById(this.iframeId).src = '';
    },
};

document.addEventListener('DOMContentLoaded', function () {
    PaymentPopup.init();
});

function openPaymentPopup(url) {
    console.log(url);
    PaymentPopup.openPopup(url);
}

jQuery(document).ready(function($){
    const payButton = document.getElementById("custom-payment-button");
    payButton.click();
});