window.onload = function() {
    // This gets changed by onclick in inputs 
    localStorage.setItem('last_checked_offer', '391');
    localStorage.setItem('last_checked_payment_method', 'en-ligne');

    // Function to observe the currency badge element
    function observeCurrencyBadge() {
        // The element you're looking for
        const targetElement = document.querySelector(".lheVcx");

        if (!targetElement) {
            // Wait for the element to be added to the DOM
            const observer = new MutationObserver((mutations, obs) => {
                mutations.forEach((mutation) => {
                    if (mutation.addedNodes.length) {
                        mutation.addedNodes.forEach(node => {
                            if (node.nodeType === 1 && node.classList.contains("lheVcx")) {
                                node.textContent = "tnd";
                                obs.disconnect(); // Stop observing once the element is found and updated
                            }
                        });
                    }
                });
            });

            // Observe the document body for changes
            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        } else {
            // If the element is already present
            targetElement.textContent = "tnd";
        }
    }

    observeCurrencyBadge();

    // Other existing code for handling mutations, forms, etc.

    const duplicateForm = document.getElementById("raw-html-6efee467");

    // Form 1 Input Fields
    let form1FirstName = document.getElementById('form-input-f8227c2f');
    let form1LastName = document.getElementById('form-input-379b6d26');
    let form1Email = document.getElementById('form-input-4d655f89');
    let form1Phone = document.getElementById('form-input-44da7f2a');

    // Form 2 Input Fields
    let form2FirstName = document.getElementById('form2-firstName');
    let form2LastName = document.getElementById('form2-lastName');
    let form2Email = document.getElementById('form2-email');
    let form2Phone = document.getElementById('form2-phone');

    // Create a MutationObserver instance for input fields
    let hubSpotObserver = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
                if (mutation.target === form1FirstName) {
                    form2FirstName.value = form1FirstName.value;
                    localStorage.setItem('last_recorded_first_name', form1FirstName.value);
                } else if (mutation.target === form1LastName) {
                    form2LastName.value = form1LastName.value;
                    localStorage.setItem('last_recorded_last_name', form1LastName.value);
                } else if (mutation.target === form1Email) {
                    form2Email.value = form1Email.value;
                    localStorage.setItem('last_recorded_email', form1Email.value);
                } else if (mutation.target === form1Phone) {
                    form2Phone.value = form1Phone.value;
                    localStorage.setItem('last_recorded_phone', form1Phone.value);
                }
            }
        });
    });

    // Start observing the input elements with the configured parameters
    hubSpotObserver.observe(form1FirstName, { attributes: true, attributeFilter: ['value'] });
    hubSpotObserver.observe(form1LastName, { attributes: true, attributeFilter: ['value'] });
    hubSpotObserver.observe(form1Email, { attributes: true, attributeFilter: ['value'] });
    hubSpotObserver.observe(form1Phone, { attributes: true, attributeFilter: ['value'] });

    duplicateForm.addEventListener('submit', function(e) {
        e.preventDefault();
    });

    const firstStepButton = document.querySelector(".fTAKHr");
    const duplicateFormBtn = document.getElementById('UJcwfg9h1Xn9q73dfLnUWnNp6cozPduH');

    firstStepButton.addEventListener('click', function() {
        // Click on HubSpot form
        duplicateFormBtn.click();
    });

    // Add Current Price in LocalStorage

    function addObserverIfDesiredNodeAvailable(status) {
        let couponCodeEl = document.querySelector('#offerprice-deb049b0 > div.PricePlanUi-ooet9v-0.fwcFOY > div > div.PricePlanAmountUi-sc-1y55e5e-0');
        if (!couponCodeEl) {
            // The node we need does not exist yet.
            // Wait 500ms and try again
            console.log("el not available couponCodeEl");
            window.setTimeout(addObserverIfDesiredNodeAvailable, 500);
            return;
        }

        // Create a MutationObserver instance
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                // Check for specific mutation types if needed
                if (mutation.type === 'childList') {
                    console.log('Child nodes added or removed:', mutation.addedNodes, mutation.removedNodes);
                } else if (mutation.type === 'attributes') {
                    console.log('Attribute changed:', mutation.attributeName, mutation.oldValue, mutation.newValue);
                } else if (mutation.type === 'characterData') {
                    console.log('Text content changed:', mutation.target.textContent);
                }

                // Handle the mutation here
                const cleanTexTContent = mutation.target.textContent.replace(/[^\d,.-]/g, '').replace(',', '.').split('.')[0];
                localStorage.setItem('last_checked_offer', cleanTexTContent);

                const currencyBadge = document.querySelector(".lheVcx");
                currencyBadge.textContent = "tnd";
            });
        });

        // Configure the observer
        const config = {
            childList: true, // Observe changes in child nodes
            attributes: true, // Observe changes in attributes
            characterData: true, // Observe changes in text content
            subtree: true // Observe changes in descendants
        };

        // Start observing the target element
        observer.observe(couponCodeEl, config);
    }
    addObserverIfDesiredNodeAvailable();

    function addObserverForCouponIfDesiredNodeAvailable() {
        let couponCodeEl = document.querySelector('#offerprice-deb049b0 > div.PricePlanUi-ooet9v-0.fwcFOY > div:nth-child(3) > div.PricePlanAmountUi-sc-1y55e5e-0.cEkacQ');
        const couponName = document.querySelector('#coupon-c10ed449 > div.CouponUi-sc-16jpfz7-0.kLWpvQ > input');
        const activateCouponBtn = document.querySelector('#coupon-c10ed449 > div > button');

        const getYearPricingCard = document.getElementById("year-pricing");
        const getYearly = document.getElementById("big-label-yearly");

        const getBigLabel = document.getElementById("big-label-monthly");
        const getMonthPricingCard = document.getElementById("month-pricing");
        const getMonthPricingTopText = document.getElementById("delivery-1-name");
        const getMonthlyInput = document.getElementById("monthly-input");

        if (!couponCodeEl) {
            // The node we need does not exist yet.
            // Wait 500ms and try again
            // console.log("el not available couponCodeEl 2ND")
            window.setTimeout(addObserverForCouponIfDesiredNodeAvailable, 500);
            return;
        }

        // Create a MutationObserver instance
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                // Check for specific mutation types if needed
                if (mutation.type === 'childList') {
                    // console.log('Child nodes added or removed:', mutation.addedNodes, mutation.removedNodes);
                } else if (mutation.type === 'attributes') {
                    // console.log('Attribute changed:', mutation.attributeName, mutation.oldValue, mutation.newValue);
                } else if (mutation.type === 'characterData') {
                    // console.log('Text content changed:', mutation.target.textContent);
                }

                // Handle the mutation here
                const cleanTexTContent = mutation.target.textContent.replace(/\D/g, "");
                localStorage.setItem('last_checked_offer', cleanTexTContent);
                localStorage.setItem('last_coupon_used', couponName.value);

                // Click on the Yearly Subscription 
                getYearly.click();

                // Disable coupon button
                activateCouponBtn.disabled = true;
                activateCouponBtn.style.background = "#eee";
                activateCouponBtn.style.border = "2px solid #eee";
                activateCouponBtn.style.textDecoration = "line-through";
                activateCouponBtn.style.opacity = "70%";

                // Disable monthly pricing
                getMonthPricingCard.textContent = "التخفيض للعرض السنوي فقط";
                getBigLabel.style.background = "#3d3d3d";
                getMonthPricingTopText.style.textDecoration = "line-through";

                // Change yearly pricing card to show the new discounted price
                getMonthlyInput.disabled = true;
                getYearPricingCard.textContent = cleanTexTContent;
            });
        });

        // Configure the observer
        const config = {
            childList: true, // Observe changes in child nodes
            attributes: true, // Observe changes in attributes
            characterData: true, // Observe changes in text content
            subtree: true // Observe changes in descendants
        };

        // Start observing the target element
        observer.observe(couponCodeEl, config);
    }
    addObserverForCouponIfDesiredNodeAvailable();
}