function openCustomPopup(message) {

    console.log("==========custom popup==========");

    // Create a new style element for the popup CSS
    var popupStyles = document.createElement("style");
    popupStyles.innerHTML = `
        .custom-popup-container {
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            font-family: Arial, Helvetica, sans-serif;
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .custom-popup {
            background: rgba(249, 188, 129, 1);
            width: 380px;
            padding: 20px;
            margin: auto;
            border-radius: 20px;
        }

        .popup-heading {
            display: flex;
            gap: 1rem;
        }

        .popup-heading img {
            width: 25px;
        }

        .popup-heading h2 {
            color: rgba(52, 14, 58, 1);
            font-size: 24px;
            margin: 0;
        }

        .popup-content {
            margin: 20px 0px;
        }

        .popup-content p {
            color: black;
            font-size: 16px;
            line-height: 1.5rem;
        }

        .popup-button {
            display: flex;
            justify-content: flex-end;
        }

        .popup-button button {
            font-size: 16px;
            color: rgba(249, 188, 129, 1);
            background: rgba(114, 46, 124, 1);
            padding: 5px 20px;
            border-radius: 10px;
            border: 1px solid rgba(114, 46, 124, 1);
            cursor: pointer;
        }

        /* Tablet View */
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .popup-content p {
                font-size: 17px;
            }

            .popup-button button {
                font-size: 17px;
            }
        }

        /* Mobile View */
        @media only screen and (max-width: 767px) {
            .custom-popup {
                width: 50%;
            }

            .popup-content p {
                font-size: 18px;
            }

            .popup-button button {
                font-size: 18px;
            }
        }
    `;

    // Append the style element to the document head
    document.head.appendChild(popupStyles);

    // Create a new div element for the popup container
    var popupContainer = document.createElement("div");
    popupContainer.id = "custom-popup-container";
    popupContainer.className = "custom-popup-container";

    // Set the HTML content for the popup
    popupContainer.innerHTML = `
        <div class="custom-popup">
            <div class="popup-heading">
                <img src="./alertBell.svg" alt="alert-bell"/>
                <h2>Alert</h2>
            </div>
            <div class="popup-content">
                <p id="custom-popup-message">${message}</p>
            </div>
            <div class="popup-button">
                <button type="button" onclick="closeCustomPopup()">OK</button>
            </div>
        </div>
    `;

    // Append the popup container to the body
    document.body.appendChild(popupContainer);
}

function closeCustomPopup() {
    // Remove the custom popup container from the document
    var popupContainer = document.getElementById("custom-popup-container");
    if (popupContainer) {
        popupContainer.remove();
    }
}


function openCustomPopupRedirect(message, callback) {
    // Your existing code for creating and appending the popup

    console.log("==========redirect custom popup==========");

        // Create a new style element for the popup CSS
        var popupStyles = document.createElement("style");
        popupStyles.innerHTML = `
            .custom-popup-container {
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                font-family: Arial, Helvetica, sans-serif;
                display: flex;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 9999;
                justify-content: center;
                align-items: center;
            }

            .custom-popup {
                background: rgba(249, 188, 129, 1);
                width: 380px;
                padding: 20px;
                margin: auto;
                border-radius: 20px;
            }

            .popup-heading {
                display: flex;
                gap: 1rem;
            }

            .popup-heading img {
                width: 25px;
            }

            .popup-heading h2 {
                color: rgba(52, 14, 58, 1);
                font-size: 24px;
                margin: 0;
            }

            .popup-content {
                margin: 20px 0px;
            }

            .popup-content p {
                color: black;
                font-size: 16px;
                line-height: 1.5rem;
            }

            .popup-button {
                display: flex;
                justify-content: flex-end;
            }

            .popup-button button {
                font-size: 16px;
                color: rgba(249, 188, 129, 1);
                background: rgba(114, 46, 124, 1);
                padding: 5px 20px;
                border-radius: 10px;
                border: 1px solid rgba(114, 46, 124, 1);
                cursor: pointer;
            }

            /* Tablet View */
            @media only screen and (min-width: 768px) and (max-width: 1024px) {
                .popup-content p {
                    font-size: 17px;
                }

                .popup-button button {
                    font-size: 17px;
                }
            }

            /* Mobile View */
            @media only screen and (max-width: 767px) {
                .custom-popup {
                    width: 50%;
                }

                .popup-content p {
                    font-size: 18px;
                }

                .popup-button button {
                    font-size: 18px;
                }
            }
        `;

        // Append the style element to the document head
        document.head.appendChild(popupStyles);

        // Create a new div element for the popup container
        var popupContainer = document.createElement("div");
        popupContainer.id = "custom-popup-container";
        popupContainer.className = "custom-popup-container";

        // Set the HTML content for the popup
        popupContainer.innerHTML = `
            <div class="custom-popup">
                <div class="popup-heading">
                    <img src="./alertBell.svg" alt="alert-bell"/>
                    <h2>Alert</h2>
                </div>
                <div class="popup-content">
                    <p id="custom-popup-message">${message}</p>
                </div>
                <div class="popup-button">
                    <button type="button" onclick="closeCustomPopupRedirect()">OK</button>
                </div>
            </div>
        `;

        // Append the popup container to the body
        document.body.appendChild(popupContainer);

    // Set a callback function to be called when the popup is closed
    closeCustomPopupRedirect.callback = callback;
}

function closeCustomPopupRedirect() {
    var popupContainer = document.getElementById("custom-popup-container");
    if (popupContainer) {
        popupContainer.remove();
    }
    // Call the callback function if it exists
    if (typeof closeCustomPopupRedirect.callback === 'function') {
        closeCustomPopupRedirect.callback();
    }
}


function openConditionalCustomPopup(message, okCallback, cancelCallback) {
    // Your existing code for creating and appending the popup

    console.log("==========conditional custom popup==========");

        // Create a new style element for the popup CSS
        var popupStyles = document.createElement("style");
        popupStyles.innerHTML = `
            .custom-popup-container {
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                font-family: Arial, Helvetica, sans-serif;
                display: flex;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 9999;
                justify-content: center;
                align-items: center;
            }

            .custom-popup {
                background: rgba(249, 188, 129, 1);
                width: 380px;
                padding: 20px;
                margin: auto;
                border-radius: 20px;
            }

            .popup-heading {
                display: flex;
                gap: 1rem;
            }

            .popup-heading img {
                width: 25px;
            }

            .popup-heading h2 {
                color: rgba(52, 14, 58, 1);
                font-size: 24px;
                margin: 0;
            }

            .popup-content {
                margin: 20px 0px;
            }

            .popup-content p {
                color: black;
                font-size: 16px;
                line-height: 1.5rem;
            }

            .popup-button {
                display: flex;
                justify-content: flex-end;
                gap: 10px;
            }

            .ok {
                font-size: 16px;
                color: rgba(249, 188, 129, 1);
                background: rgba(114, 46, 124, 1);
                padding: 5px 20px;
                border-radius: 10px;
                border: 1px solid rgba(114, 46, 124, 1);
                cursor: pointer;
            }

            .cancel {
                font-size: 16px;
                color: rgba(114, 46, 124, 1);
                background: transparent;
                padding: 5px 20px;
                border-radius: 10px;
                border: 1px solid rgba(114, 46, 124, 1);
                cursor: pointer;
            }

            /* Tablet View */
            @media only screen and (min-width: 768px) and (max-width: 1024px) {
                .popup-content p {
                    font-size: 17px;
                }

                .popup-button button {
                    font-size: 17px;
                }
            }

            /* Mobile View */
            @media only screen and (max-width: 767px) {
                .custom-popup {
                    width: 50%;
                }

                .popup-content p {
                    font-size: 18px;
                }

                .popup-button button {
                    font-size: 18px;
                }
            }
        `;

        // Append the style element to the document head
        document.head.appendChild(popupStyles);

        // Create a new div element for the popup container
        var popupContainer = document.createElement("div");
        popupContainer.id = "custom-popup-container";
        popupContainer.className = "custom-popup-container";

        // Set the HTML content for the popup
        popupContainer.innerHTML = `
            <div class="custom-popup">
                <div class="popup-heading">
                    <img src="./alertBell.svg" alt="alert-bell"/>
                    <h2>Alert</h2>
                </div>
                <div class="popup-content">
                    <p id="custom-popup-message">${message}</p>
                </div>
                <div class="popup-button">
                    <button type="button" class="ok" onclick="handleOK('${okCallback}')">OK</button>
                    <button type="button" class="cancel" onclick="handleCancel('${cancelCallback}')">Cancel</button>
                </div>
            </div>
        `;

        // Append the popup container to the body
        document.body.appendChild(popupContainer);

    // Set a callback function to be called when the popup is closed
    closeConditionalCustomPopup.callback = cancelCallback;
}

// Function to handle the action when "OK" is clicked
function handleOK(callback) {
    if (typeof window[callback] === 'function') {
        window[callback]();
    }
    closeConditionalCustomPopup();
}

// Function to handle the action when "Cancel" is clicked
function handleCancel(callback) {
    if (typeof window[callback] === 'function') {
        window[callback]();
    }
    closeConditionalCustomPopup();
}

// Function to close the popup
function closeConditionalCustomPopup() {
    var popupContainer = document.getElementById("custom-popup-container");
    if (popupContainer) {
        popupContainer.remove();
    }
    // Call the callback function if it exists
    if (typeof closeConditionalCustomPopup.callback === 'function') {
        closeConditionalCustomPopup.callback();
    }
}


function openCustomPopup2(message) {

console.log("==========custom popup for giftycard html pages==========");

    // Create a new style element for the popup CSS
    var popupStyles = document.createElement("style");
    popupStyles.innerHTML = `
        .custom-popup-container {
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            font-family: Arial, Helvetica, sans-serif;
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .custom-popup {
            background: white;
            width: 380px;
            padding: 20px;
            margin: auto;
            border-radius: 20px;
        }

        .popup-heading {
            display: flex;
            gap: 1rem;
        }

        .popup-heading img {
            width: 25px;
        }

        .popup-heading h2 {
            color: rgba(52, 14, 58, 1);
            font-size: 24px;
            margin: 0;
        }

        .popup-content {
            margin: 20px 0px;
        }

        .popup-content p {
            color: black;
            font-size: 16px;
            line-height: 1.5rem;
        }

        .popup-button {
            display: flex;
            justify-content: flex-end;
        }

        .popup-button button {
            font-size: 16px;
            color: white;
            background: rgba(114, 46, 124, 1);
            padding: 5px 20px;
            border-radius: 10px;
            border: 1px solid rgba(114, 46, 124, 1);
            cursor: pointer;
        }

        /* Tablet View */
        @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .popup-content p {
                font-size: 17px;
            }

            .popup-button button {
                font-size: 17px;
            }
        }

        /* Mobile View */
        @media only screen and (max-width: 767px) {
            .custom-popup {
                width: 50%;
            }

            .popup-content p {
                font-size: 18px;
            }

            .popup-button button {
                font-size: 18px;
            }
        }
    `;

    // Append the style element to the document head
    document.head.appendChild(popupStyles);

    // Create a new div element for the popup container
    var popupContainer = document.createElement("div");
    popupContainer.id = "custom-popup-container";
    popupContainer.className = "custom-popup-container";

    // Set the HTML content for the popup
    popupContainer.innerHTML = `
        <div class="custom-popup">
            <div class="popup-heading">
                <img src="./alertBell.svg" alt="alert-bell"/>
                <h2>Alert</h2>
            </div>
            <div class="popup-content">
                <p id="custom-popup-message">${message}</p>
            </div>
            <div class="popup-button">
                <button type="button" onclick="closeCustomPopup2()">OK</button>
            </div>
        </div>
    `;

    // Append the popup container to the body
    document.body.appendChild(popupContainer);
}

function closeCustomPopup2() {
    // Remove the custom popup container from the document
    var popupContainer = document.getElementById("custom-popup-container");
    if (popupContainer) {
        popupContainer.remove();
    }
}


function openCustomPopupRedirect2(message, callback) {
    // Your existing code for creating and appending the popup

    console.log("==========redirect custom popup==========");

        // Create a new style element for the popup CSS
        var popupStyles = document.createElement("style");
        popupStyles.innerHTML = `
            .custom-popup-container {
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                font-family: Arial, Helvetica, sans-serif;
                display: flex;
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                z-index: 9999;
                justify-content: center;
                align-items: center;
            }

            .custom-popup {
                background: white;
                width: 380px;
                padding: 20px;
                margin: auto;
                border-radius: 20px;
            }

            .popup-heading {
                display: flex;
                gap: 1rem;
            }

            .popup-heading img {
                width: 25px;
            }

            .popup-heading h2 {
                color: rgba(52, 14, 58, 1);
                font-size: 24px;
                margin: 0;
            }

            .popup-content {
                margin: 20px 0px;
            }

            .popup-content p {
                color: black;
                font-size: 16px;
                line-height: 1.5rem;
            }

            .popup-button {
                display: flex;
                justify-content: flex-end;
            }

            .popup-button button {
                font-size: 16px;
                color: white;
                background: rgba(114, 46, 124, 1);
                padding: 5px 20px;
                border-radius: 10px;
                border: 1px solid rgba(114, 46, 124, 1);
                cursor: pointer;
            }

            /* Tablet View */
            @media only screen and (min-width: 768px) and (max-width: 1024px) {
                .popup-content p {
                    font-size: 17px;
                }

                .popup-button button {
                    font-size: 17px;
                }
            }

            /* Mobile View */
            @media only screen and (max-width: 767px) {
                .custom-popup {
                    width: 50%;
                }

                .popup-content p {
                    font-size: 18px;
                }

                .popup-button button {
                    font-size: 18px;
                }
            }
        `;

        // Append the style element to the document head
        document.head.appendChild(popupStyles);

        // Create a new div element for the popup container
        var popupContainer = document.createElement("div");
        popupContainer.id = "custom-popup-container";
        popupContainer.className = "custom-popup-container";

        // Set the HTML content for the popup
        popupContainer.innerHTML = `
            <div class="custom-popup">
                <div class="popup-heading">
                    <img src="./alertBell.svg" alt="alert-bell"/>
                    <h2>Alert</h2>
                </div>
                <div class="popup-content">
                    <p id="custom-popup-message">${message}</p>
                </div>
                <div class="popup-button">
                    <button type="button" onclick="closeCustomPopupRedirect2()">OK</button>
                </div>
            </div>
        `;

        // Append the popup container to the body
        document.body.appendChild(popupContainer);


    // Set a callback function to be called when the popup is closed
    closeCustomPopupRedirect2.callback = callback;
}

function closeCustomPopupRedirect2() {
    var popupContainer = document.getElementById("custom-popup-container");
    if (popupContainer) {
        popupContainer.remove();
    }
    // Call the callback function if it exists
    if (typeof closeCustomPopupRedirect2.callback === 'function') {
        closeCustomPopupRedirect2.callback();
    }
}


// FUNCTION TO SHOW LOADER
function showLoader(message) {

    console.log("======loader======");
    /* Loader styles */
    var styles = `
        <style>
            .loader-container {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 9999; /* Ensure loader is on top */
                display: none; /* Initially hidden */
                background: transparent;
            }

            .loader {
                border: 8px solid #FFD08D; /* Light grey */
                border-top: 8px solid transparent;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                animation: spin 2s linear infinite;
            }

            .dull-background {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                z-index: 999;
                display: none; /* Initially hidden */
            }

            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
        </style>
    `;

    // Append styles to head
    document.head.insertAdjacentHTML('beforeend', styles);

    // Loader HTML markup
    var html = `
        <div class="loader-container">
            <div class="loader"></div>
        </div>
        <div class="dull-background"></div>
    `;

    // Append HTML markup to body
    document.body.insertAdjacentHTML('beforeend', html);

    // Get loader elements
    var loaderContainer = document.querySelector('.loader-container');
    var dullBackground = document.querySelector('.dull-background');

    // Show or hide loader based on message parameter
    if (message) {
        loaderContainer.style.display = 'block';
        dullBackground.style.display = 'block';
    } else {
        loaderContainer.style.display = 'none';
        dullBackground.style.display = 'none';
    }
}


let secretKey;

async function fetchSecretKey() {
    try {
        const response = await fetch('/secretKey');
        if (response.ok) {
            secretKey = await response.text();
        } else {
            console.error('Failed to fetch secret key');
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

async function encryptData(data) {
    await fetchSecretKey();
    return CryptoJS.AES.encrypt(data, CryptoJS.enc.Utf8.parse(secretKey), {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7,
    }).toString();
}

async function decryptData(encryptedData) {
    await fetchSecretKey();
    const bytes = CryptoJS.AES.decrypt(encryptedData, CryptoJS.enc.Utf8.parse(secretKey), {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7,
    });
    return bytes.toString(CryptoJS.enc.Utf8);
}

async function getDecryptedSessionItem(key) {
    const item = sessionStorage.getItem(key);
    return item ? await decryptData(item) : null;
}