var arkflux = {
    nid: null,
    instanceId: null,

    newsletter: function (id) {
        this.nid = id;
        this.instanceId = 'afx-' + id + '-' + Date.now();

        this.nl = document.createElement("div");
        this.nl.setAttribute("data-arkflux-widget", this.instanceId);
        this.nl.innerHTML = "loading";

        var script = document.scripts[document.scripts.length - 1];
        script.parentElement.insertBefore(this.nl, script);

        this.get(
            "https://afxa9caef7c.networkreach.com/apps/production/arkflux/newsletters/api/newsletters.content.load.php?id=" + id,
            this.nl,
            () => this.callback(this.instanceId)
        );
    },

    get: async function (url, elem, cb) {
        fetch(url)
            .then((response) => response.json())
            .then((html) => {
                elem.innerHTML = html.css + html.html;
                if (cb) cb();
            })
            .catch((error) => console.warn(error));
    },

    callback: function (instanceId) {
        const container = document.querySelector(`[data-arkflux-widget="${instanceId}"]`);
        const submitBtn = container.querySelector('.newsletter-submit-button');

        // Inject a unique .newsletter-error container before each .afx-field IF it doesn't already exist
        const afxFields = container.querySelectorAll('.afx-field');
        afxFields.forEach(function (field) {
            if (!field.previousElementSibling || !field.previousElementSibling.classList.contains('newsletter-error')) {
                const errorDiv = document.createElement('div');
                errorDiv.className = 'newsletter-error';
                errorDiv.style.color = 'red';
                errorDiv.style.marginBottom = '5px';
                field.parentNode.insertBefore(errorDiv, field);
            }
        });

        if (submitBtn) {
            submitBtn.addEventListener('click', function () {
                const form = container.querySelector('.newsletter-form');
                const fields = ['email', 'firstname', 'lastname', 'birthday', 'company'];
                let xData = [];
                let errorsFound = false;

                // Clear all error boxes first
                const errorBoxes = container.querySelectorAll('.newsletter-error');
                errorBoxes.forEach(el => el.innerHTML = '');

                fields.forEach(function (field) {
                    const input = form.querySelector(`.newsletter-${field}`);
                    if (input) {
                        const value = input.value.trim();
                        const errorDiv = input.closest('.afx-field')?.previousElementSibling;

                        if (!value) {
                            if (errorDiv && errorDiv.classList.contains('newsletter-error')) {
                                errorDiv.innerHTML = `${field.charAt(0).toUpperCase() + field.slice(1)} is required.`;
                            }
                            errorsFound = true;
                        } else {
                            if (field === 'email' && !arkflux.validateEmail(value)) {
                                if (errorDiv && errorDiv.classList.contains('newsletter-error')) {
                                    errorDiv.innerHTML = `Please enter a valid email address.`;
                                }
                                errorsFound = true;
                            } else {
                                xData.push(`${encodeURIComponent(field)}=${encodeURIComponent(value)}`);
                            }
                        }
                    }
                });

                if (errorsFound) {
                    return;
                }

                const queryString = xData.join('&') + `&id=${arkflux.nid}`;
                arkflux.get(
                    `https://afxa9caef7c.networkreach.com/apps/production/arkflux/newsletters/api/newsletters.register.php?${queryString}`,
                    container.querySelector('.newsletter-form'),
                    null
                );
            });
        }
    },

    validateEmail: function (email) {
        var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailPattern.test(email);
    }
};