/* CART HANDLERS */
window.addEventListener('load', async function() {

    function setTooltips() {
        const tooltips = document.querySelectorAll('.tooltip');
        if (tooltips.length) {
            tooltips.forEach((tooltip) => {
                if (!tooltip.closest('.hidden')) {
                    const tippyContent = tooltip.querySelector('.tooltip-content');
                    if (tippyContent) tooltip.setAttribute('data-tippy-content', tippyContent.innerHTML);
                }
            });

            tippy('.tooltip', {
                animation: 'fade',
                duration: 200,
                arrow: true,
                delay: [0, 50],
                arrowType: 'sharp',
                theme: 'light-border',
                maxWidth: 300,
                interactive: true,
                interactiveBorder: -2
            });
        }
    }

    async function setCartQuantity() {
        let member = null;
        let cartLength = 0;
        let cartCounter = document.querySelector('[cart-icon-counter]');
        if (!cartCounter) return;

        if (currentMember) {
            const memberstack = window.$memberstackDom;
            member = await memberstack.getMemberJSON().then(e => {
                member = e;
                nextCode();
            });
        } else {
            member = JSON.parse(localStorage.getItem('memberJSON'));
            nextCode();
        }

        function nextCode() {
            if (member && member.data && member.data['cart-products']) {
                cartLength = Object.keys(member.data['cart-products']).length;
            }

            if (cartLength > 0) {
                cartCounter.classList.add('active');
                cartCounter.innerText = cartLength;
            } else {
                cartCounter.classList.remove('active');
                cartCounter.innerText = 0;
            }
        }
    }

    async function isLogged() {
        const memberstack = window.$memberstackDom;
        const result = await memberstack.getCurrentMember();

        return result.data;
    }

    function getSearchPagination(search) {
        let objects = search.replace('?', '').split('&');
        let page = 1;

        if (objects.length) {
            for (const item of objects) {
                if (item.match('page')) {
                    page = item.split('=')[1];
                }
            }
        }

        return page;
    }

    let currentMember = null;
    isLogged()
        .then(JSONmember => {
            currentMember = JSONmember;

            scriptInit();
            setCartQuantity();
        })
        .catch(err => {
            console.log(err);
        });

    async function updateVariations(individual) {
        const productVariations = document.querySelectorAll('[product-variations]');
        const varFunc = (variation) => {
            const items = variation.querySelectorAll('li');
            const card = variation.closest('[product-card]');
            const itemID = card.getAttribute('item-id');

            if (items.length) {
                const container = card.querySelector('.product__var-inner');
                const label = card.querySelector('.product__var-label');

                if (!individual) {
                    items.forEach((li) => {
                        const div = document.createElement('div');
                        div.classList.add('product__var-item');
                        div.innerText = li.innerText;

                        container.append(div);
                    });
                }

                sortByHandler(
                    card.querySelector(".product__var-header"),
                    card.querySelector(".product__var-content"),
                    card.querySelectorAll(".product__var-item"),
                    card.querySelector(".product__var-label"),
                );

                let member = null;
                const memberstack = window.$memberstackDom;

                const dropdownItems = card.querySelectorAll('.product__var-item');
                if (dropdownItems.length) {
                    dropdownItems.forEach((item, idx) => {
                        item.addEventListener('click', async () => {
                            dropdownItems.forEach(item => item.classList.remove('active'));
                            item.classList.add('active');

                            const cartIndexField = card.querySelector('[ms-code-json-list="cart-products"] [ms-code-json-name="variations-active-index"]');
                            const savedIndexField = card.querySelector('[ms-code-json-list="saved-products"] [ms-code-json-name="variations-active-index"]');
                            const memberJSONIndex = card.querySelector('.current[ms-code-item-text="variations-active-index"]');
                            if (cartIndexField) cartIndexField.value = idx;
                            if (savedIndexField) savedIndexField.value = idx;
                            if (memberJSONIndex) memberJSONIndex.innerText = idx;

                            if (currentMember) {
                                member = await memberstack.getMemberJSON();
                            } else {
                                member = JSON.parse(localStorage.getItem('memberJSON'));
                            }

                            if (member) {
                                setTimeout(async () => {
                                    if (member.data && member.data['cart-products'] && member.data['cart-products'][`cart-products-${itemID}`]) {
                                        member.data['cart-products'][`cart-products-${itemID}`]['variations-active-index'] = idx.toString();
                                    }

                                    if (member.data && member.data['saved-products'] && member.data['saved-products'][`saved-products-${itemID}`]) {
                                        member.data['saved-products'][`saved-products-${itemID}`]['variations-active-index'] = idx.toString();
                                    }

                                    if (currentMember) {
                                        await memberstack.updateMemberJSON({
                                            json: member.data
                                        });
                                    } else {
                                        localStorage.setItem('memberJSON', JSON.stringify(member));
                                    }
                                }, individual ? 150 : 0);
                            }
                        });
                    });

                    const memberJSONIndex = card.querySelector('.current[ms-code-item-text="variations-active-index"]');
                    if (memberJSONIndex && memberJSONIndex.innerText !== '') {
                        const index = Number(memberJSONIndex.innerText);

                        dropdownItems[index].click();
                        label.innerHTML = dropdownItems[index].innerHTML;
                    }
                }
            }
        };

        if (!individual && productVariations.length) {
            productVariations.forEach((variation) => varFunc(variation));
        }

        if (individual) {
            varFunc(individual);
        }
    }

    async function scriptInit() {

        const cartPageWrapper = document.querySelector('[data-cart-page]');
        if (!cartPageWrapper) {
            const productCards = document.querySelectorAll('[product-card]');
            let cardsLength = productCards.length;
            if (!productCards.length) return;

            /* REGULAR PAGES CODE */

            removeButtonsHandler('[memberstack-remove-quote-request]', 'cart-products');
            removeButtonsHandler('[memberstack-remove-saved-request]', 'saved-products');
            removeButtonsHandler('[compare-button-remove]', 'cart-products', true);

            $(document).on('click', '[compare-button-add]', (e) => {
                e.preventDefault();

                let form = document
                    .querySelector('.category-grid .product-card[item-id="' + e.currentTarget.getAttribute('compare-button-add') + '"]')
                    ?.querySelector('[ms-code-json-list="cart-products"]');

                if (form) form.dispatchEvent(new Event('submit'));
            });

            updatePropertiesFormFields();
            function updatePropertiesFormFields() {
                const formFields = document.querySelectorAll('.memberstack-field');
                formFields?.forEach((field) => {
                    field.value = field.getAttribute('data-value');
                });
            }

            const listWrapper = document.querySelector('[data-list-wrapper]');
            const productPageWrapper = document.querySelector('[data-prod-page]');
            const elsePageWrapper = document.querySelector('[data-else-page]');

            if (listWrapper || productPageWrapper || elsePageWrapper) {
                let initInterval;
                let page = getSearchPagination(window.location.search);

                initInterval = setInterval(() => {
                    if (!listWrapper) {
                        /* If we are on the product page or on some another page */
                        let intervalCount = 1;
                        let innerInterval;
                        clearInterval(initInterval);

                        innerInterval = setInterval(() => {
                            productCardsInit();

                            if (intervalCount > 5) {
                                clearInterval(innerInterval);
                            }

                            intervalCount++;
                        }, 1000);
                    } else {
                        const styleAttr = listWrapper.getAttribute('style');

                        if (styleAttr === '') {
                            clearInterval(initInterval);
                            productCardsInit();

                            let intervalCount = 1;
                            let innerInterval;

                            innerInterval = setInterval(() => {
                                setTooltips();

                                if (intervalCount > 5) {
                                    clearInterval(innerInterval);
                                }

                                intervalCount++;
                            }, 1000);
                        }
                    }
                }, 500);

                /**
                 * HANDLE CARDS AFTER PAGINATION OR FILTER
                 */
                setInterval(() => {
                    const newPage = getSearchPagination(window.location.search);
                    const currentProductCards = document.querySelectorAll('[product-card]');

                    if (newPage !== page) {
                        setTimeout(() => {
                            productCardsInit();
                            updatePropertiesFormFields();
                            handleMsCodeForm2();
                        }, 500);

                        page = newPage;
                    }

                    if (cardsLength !== currentProductCards.length) {
                        setTimeout(() => {
                            productCardsInit();
                            updatePropertiesFormFields();
                            handleMsCodeForm2();
                        }, 500);

                        cardsLength = currentProductCards.length;
                    }
                }, 1000);

                /**
                 * updateVariations ON INDIVIDUAL PRODUCT PAGE
                 */
                if (productPageWrapper) {
                    await updateVariations();
                }
            }

            function productCardsInit() {
                const productCards = document.querySelectorAll('[product-card]');
                productCards?.forEach((card) => {
                    const formCart = card.querySelector('[ms-code-json-list="cart-products"]'),
                        formSaved = card.querySelector('[ms-code-json-list="saved-products"]');

                    fillTheProductFields(card, formCart);
                    fillTheProductFields(card, formSaved);
                    updateCardOnPageLoad(card, formCart);
                    updateCardOnPageLoad(card, formSaved);

                    const quoteRequestButton = card.querySelector('[memberstack-quote-request]');
                    quoteRequestButton?.addEventListener('click', (event) => {
                        event.preventDefault();
                        if (formCart) formCart.dispatchEvent(new Event('submit'));
                    });

                    const quoteSavedButton = card.querySelector('[memberstack-saved-request]');
                    quoteSavedButton?.addEventListener('click', (event) => {
                        event.preventDefault();
                        if (formSaved) formSaved.dispatchEvent(new Event('submit'));
                    });
                });

                setTimeout(() => {
                    setTooltips();
                }, 100);
            }

            function removeButtonsHandler(selector, list_name, from_compare = false) {
                $(document).on('click', selector, (e) => {
                    e.preventDefault();
                    let form;

                    if (from_compare) {
                        form = document
                            .querySelector('.category-grid .product-card[item-id="' + e.currentTarget.getAttribute('compare-button-remove') + '"]')
                            ?.querySelector('[ms-code-json-list="' + list_name + '"]');
                    } else {
                        form = e.currentTarget.closest('[product-card]').querySelector('[ms-code-json-list="' + list_name + '"]');
                    }

                    removeNestedData(form);
                });
            }

            async function updateCardOnPageLoad(card, form) {
                const jsonList = form.getAttribute("ms-code-json-list"),
                    itemID = card.getAttribute("item-id"),
                    buttonAdd = card.querySelector("[memberstack-quote-request]"),
                    buttonRemove = card.querySelector("[memberstack-remove-quote-request]"),
                    buttonSavedAdd = card.querySelector("[memberstack-saved-request]"),
                    buttonSavedRemove = card.querySelector("[memberstack-remove-saved-request]"),
                    compareButtonAdd = document.querySelector('[compare-button-add="' + itemID + '"]'),
                    compareButtonRemove = document.querySelector('[compare-button-remove="' + itemID + '"]'),
                    bookmarkButtons = card.querySelector('.product-card__bookmark');

                let member = null;
                const memberstack = window.$memberstackDom;

                if (currentMember) {
                    member = await memberstack.getMemberJSON();
                } else {
                    member = JSON.parse(localStorage.getItem('memberJSON'));
                }

                if (!member) return;

                const subgroupKey = `${jsonList}-${itemID}`;
                if (member.data && member.data[jsonList] && member.data[jsonList][subgroupKey]) {
                    if (jsonList === "cart-products") {
                        buttonAdd.style.display = 'none';
                        buttonRemove.style.display = 'block';
                        if (bookmarkButtons) bookmarkButtons.style.display = 'none';
                        if (compareButtonAdd) compareButtonAdd.style.display = 'none';
                        if (compareButtonRemove) compareButtonRemove.style.display = 'block';
                    } else if (jsonList === "saved-products") {
                        if (buttonSavedAdd) buttonSavedAdd.style.display = 'none';
                        if (buttonSavedRemove) buttonSavedRemove.style.display = 'block';
                    }
                } else {
                    if (jsonList === "cart-products") {
                        buttonAdd.style.display = 'block';
                        buttonRemove.style.display = 'none';
                        if (compareButtonAdd) compareButtonAdd.style.display = 'block';
                        if (compareButtonRemove) compareButtonRemove.style.display = 'none';
                    } else if (jsonList === "saved-products") {
                        if (buttonSavedAdd) buttonSavedAdd.style.display = 'block';
                        if (buttonSavedRemove) buttonSavedRemove.style.display = 'none';
                    }
                }
            }

            async function removeNestedData(form) {
                const jsonList = form.getAttribute("ms-code-json-list"),
                    card = form.closest('[product-card]'),
                    itemID = card.getAttribute("item-id"),
                    buttonAdd = card.querySelector("[memberstack-quote-request]"),
                    buttonRemove = card.querySelector("[memberstack-remove-quote-request]"),
                    buttonSavedAdd = card.querySelector("[memberstack-saved-request]"),
                    buttonSavedRemove = card.querySelector("[memberstack-remove-saved-request]"),
                    compareButtonAdd = document.querySelector('[compare-button-add="' + itemID + '"]'),
                    compareButtonRemove = document.querySelector('[compare-button-remove="' + itemID + '"]'),
                    bookmarkButtons = card.querySelector('.product-card__bookmark');

                let member = null;
                const memberstack = window.$memberstackDom;

                if (currentMember) {
                    member = await memberstack.getMemberJSON();
                } else {
                    member = JSON.parse(localStorage.getItem('memberJSON'));
                }

                if (!member) return;

                const subgroupKey = `${jsonList}-${itemID}`;
                if (member.data && member.data[jsonList] && member.data[jsonList][subgroupKey]) {
                    delete member.data[jsonList][subgroupKey];

                    if (currentMember) {
                        await memberstack.updateMemberJSON({
                            json: member.data
                        }).then(data => {
                            if (jsonList === 'cart-products') setCartQuantity();
                        });
                    } else {
                        localStorage.setItem('memberJSON', JSON.stringify(member));
                        if (jsonList === 'cart-products') await setCartQuantity();
                    }

                    if (jsonList === "cart-products") {
                        buttonAdd.style.display = 'block';
                        buttonRemove.style.display = 'none';
                        if (bookmarkButtons) bookmarkButtons.style.display = 'block';
                        if (compareButtonAdd) compareButtonAdd.style.display = 'block';
                        if (compareButtonRemove) compareButtonRemove.style.display = 'none';
                    } else if (jsonList === "saved-products") {
                        if (buttonSavedAdd) buttonSavedAdd.style.display = 'block';
                        if (buttonSavedRemove) buttonSavedRemove.style.display = 'none';
                    }
                }
            }

            function fillTheProductFields(card, form) {
                /* card blocks */
                const productUrl = card.querySelector('.product-card__title'),
                    imageUrl = card.querySelector('.product-card__image-img'),
                    /* form blocks\inputs */
                    variations = form.querySelector('.product-variations-value'),
                    seriesField = form.querySelector('.memberstack-series-field'),
                    productField = form.querySelector('.memberstack-product-field'),
                    imageField = form.querySelector('.memberstack-image-field'),
                    tagsField = form.querySelector('.memberstack-tags-field'),
                    variationsIndexField = form.querySelector('.memberstack-variations-index-field'),
                    variationsField = form.querySelector('.memberstack-variations-field');

                let tags = card.querySelectorAll('.product-card__tags-item');
                let productSeries = card.querySelectorAll('[product-series]');
                productField.value = productUrl ? productUrl.href : '';
                imageField.value = imageUrl ? imageUrl.src : '';
                variationsField.value = variations.innerHTML !== '' ? variations.innerHTML : '';
                if (variationsIndexField.value === '') variationsIndexField.value = 0;

                let tagsInterval;
                tagsInterval = setInterval(() => {
                    tags = card.querySelectorAll('.product-card__tags-item');

                    if (tags.length) {
                        clearInterval(tagsInterval);

                        let arr = [];
                        tags.forEach((tag) => {
                            const name = tag.querySelector('.product-tag'),
                                description = tag.querySelector('.tooltip-content'),
                                color = name.getAttribute('style').split(':')[1],
                                colorBG = tag.getAttribute('style').split(':')[1];

                            arr.push({name: name.innerText, description: description.innerHTML, colorText: color, colorBackground: colorBG});
                        });

                        tagsField.value = JSON.stringify(arr);
                    }
                }, 500);

                let seriesInterval;
                seriesInterval = setInterval(() => {
                    productSeries = card.querySelectorAll('[product-series]');

                    if (productSeries.length) {
                        clearInterval(seriesInterval);

                        let seriesArr = [];
                        productSeries.forEach((el) => {
                            seriesArr.push({name: el.innerText, link: el.href});
                        });

                        seriesField.value = JSON.stringify(seriesArr);
                    }
                }, 500);
            }

            handleMsCodeForm2();
            function handleMsCodeForm2() {
                const msCodeForm2 = document.querySelectorAll('[ms-code="form2"]');
                msCodeForm2.forEach(form => {
                    const jsonList = form.getAttribute("ms-code-json-list");
                    const itemID = form.closest('[product-card]').getAttribute("item-id");
                    const card = form.closest('[product-card]');
                    const buttonAdd = card.querySelector("[memberstack-quote-request]");
                    const buttonRemove = card.querySelector("[memberstack-remove-quote-request]");
                    const buttonSavedAdd = card.querySelector("[memberstack-saved-request]");
                    const buttonSavedRemove = card.querySelector("[memberstack-remove-saved-request]");
                    const compareButtonAdd = document.querySelector('[compare-button-add="' + itemID + '"]');
                    const compareButtonRemove = document.querySelector('[compare-button-remove="' + itemID + '"]');
                    const bookmarkButtons = card.querySelector('.product-card__bookmark');

                    form.addEventListener('submit', async function(event) {
                        event.preventDefault();

                        let member = null;
                        const memberstack = window.$memberstackDom;

                        if (currentMember) {
                            member = await memberstack.getMemberJSON();
                        } else {
                            member = JSON.parse(localStorage.getItem('memberJSON'));
                            if (!member) member = {};
                        }

                        if (!member) return;

                        if (!member.data) {
                            member.data = {};
                        }

                        if (!member.data[jsonList]) {
                            member.data[jsonList] = {};
                        }

                        /* Deleting product from saved-products list if we added it in cart list */
                        if (jsonList === 'cart-products') {
                            const savedSubgroupKey = `saved-products-${itemID}`;
                            if (member.data['saved-products'] && member.data['saved-products'][savedSubgroupKey]) {
                                delete member.data['saved-products'][savedSubgroupKey];

                                buttonSavedAdd.style.display = 'block';
                                buttonSavedRemove.style.display = 'none';
                            }
                        }

                        const inputs = form.querySelectorAll('[ms-code-json-name]');
                        const subgroup = {};
                        inputs.forEach(input => {
                            const jsonName = input.getAttribute('ms-code-json-name');
                            const newItem = input.value;
                            subgroup[jsonName] = newItem;
                        });

                        const subgroupKey = `${jsonList}-${itemID}`;

                        member.data[jsonList][subgroupKey] = subgroup;


                        if (currentMember) {
                            await memberstack.updateMemberJSON({
                                json: member.data
                            }).then(data => {
                                if (jsonList === 'cart-products') setCartQuantity();
                            });
                        } else {
                            localStorage.setItem('memberJSON', JSON.stringify(member));
                            if (jsonList === 'cart-products') await setCartQuantity();
                        }

                        if (jsonList === "cart-products") {
                            if (bookmarkButtons) bookmarkButtons.style.display = 'none';
                            buttonAdd.style.display = 'none';
                            buttonRemove.style.display = 'block';
                            if (compareButtonAdd) compareButtonAdd.style.display = 'none';
                            if (compareButtonRemove) compareButtonRemove.style.display = 'block';
                        } else if (jsonList === "saved-products") {
                            if (buttonSavedAdd) buttonSavedAdd.style.display = 'none';
                            if (buttonSavedRemove) buttonSavedRemove.style.display = 'block';
                        }
                    });
                });
            }

        } else {
            async function updateCount(num, count) {
                const list = num.closest('[ms-code-print-list]').getAttribute("ms-code-print-list"),
                    card = num.closest('[product-card]'),
                    countInput = card.querySelector('[ms-code-json-name="count"]'),
                    itemID = card.getAttribute("item-id"),
                    group = `${list}-${itemID}`;

                let member = null;
                const memberstack = window.$memberstackDom;

                if (currentMember) {
                    member = await memberstack.getMemberJSON();
                } else {
                    member = JSON.parse(localStorage.getItem('memberJSON'));
                    if (!member) member = {};
                }

                if (member.data && member.data[list] && member.data[list][group]) {
                    member.data[list][group]['count'] = count;
                    if (countInput) countInput.value = count;
                }

                if (currentMember) {
                    await memberstack.updateMemberJSON({
                        json: member.data
                    });
                } else {
                    localStorage.setItem('memberJSON', JSON.stringify(member));
                }

                num.innerText = count;
            }

            let cartInterval;
            cartInterval = setInterval(() => {
                const cards = document.querySelectorAll('[ms-code-item-key]');

                if (cards.length) {
                    clearInterval(cartInterval);
                    fillCartCards();

                    const emptySavedSection = document.querySelector('section.saved-products.empty-list');
                    if (emptySavedSection) {
                        updateVariations();
                    }
                }
            }, 500);

            function fillCartCards() {
                const cards = document.querySelectorAll('.json-list__products .product-card');
                cards.forEach((card, idx) => {
                    card.style.zIndex = cards.length - idx;
                    let tags = card.querySelector('[product-tags]'),
                        tagsList = card.querySelector('.product-card__tags'),
                        seriesList = card.querySelector('.product-card-series-list'),
                        productSeries = card.querySelector('[product-series-list]'),
                        url = card.querySelector('[product-url]'),
                        imgUrl = card.querySelector('[image-url]'),
                        id = card.querySelector('[product-id]'),
                        counters = card.querySelectorAll('[product-number-count]'),
                        countNum = card.querySelector('.product-card__count-num');

                    card.setAttribute('item-id', id.innerText);
                    card.querySelector('.product-card__title').setAttribute('href', url.innerText);
                    card.querySelector('.product-card__image').setAttribute('href', url.innerText);
                    card.querySelector('.product-card__image-img').removeAttribute('src-set');
                    card.querySelector('.product-card__image-img').setAttribute('src', imgUrl.innerText);

                    counters.forEach((item) => {
                        if (item.getAttribute('product-number-count') === countNum.innerText) {
                            item.classList.add('active');
                        } else {
                            item.classList.remove('active');
                        }
                    });

                    countSwitcher(
                        card.querySelector('.product-card__count-header'),
                        card.querySelector('.product-card__count-dropdown'),
                        counters,
                        countNum,
                    );

                    tags = tags.innerText !== '' ? JSON.parse(tags.innerText) : [];
                    tags?.forEach((tag) => {
                        const div = document.createElement("div");
                        div.classList.add('product-card__tags-item', 'tooltip');
                        div.setAttribute('style', `background-color: ${tag['colorBackground']}`);
                        div.innerHTML = `<div style="color:${tag['colorText']}" class="product-tag product-tag--light">${tag['name']}</div>
  <div class="tooltip-content w-richtext">${tag['description']}</div>`;

                        tagsList.append(div);
                    });

                    productSeries = productSeries.innerText !== '' ? JSON.parse(productSeries.innerText) : [];
                    productSeries?.forEach((el) => {
                        const seriesLink = document.createElement("a");
                        seriesLink.classList.add('product-tag', 'product-tag--light');
                        seriesLink.href = el['link'];
                        seriesLink.innerText = el['name'];

                        seriesList.append(seriesLink);
                    });
                });

                setTooltips();
            }

            function countSwitcher(trigger, wrap, list, num) {
                if (!trigger || !wrap) return;

                trigger.addEventListener("click", active);
                document.addEventListener("click", hide);

                list.forEach((option) => {
                    let count = option.getAttribute('product-number-count');
                    option.addEventListener('click', () => {
                        wrap.querySelector('.active').classList.remove('active');
                        option.classList.add('active');
                        updateCount(num, count);

                        wrap.classList.remove("active");
                    });
                });

                function active() {
                    wrap.classList.add("active");
                }

                function hide(e) {
                    var target = e.target;
                    if (target !== trigger && target !== wrap && !wrap.contains(target)) {
                        wrap.classList.remove("active");
                    }
                }
            }

            /* MEMBERSCRIPT #2 v0.1 ADD ITEM GROUPS TO MEMBER JSON */
            function memberScript_2() {
                const msCodeForm2 = document.querySelectorAll('[ms-code="form2"]');

                msCodeForm2.forEach(form => {
                    const jsonList = form.getAttribute("ms-code-json-list");

                    form.addEventListener('submit', async function(event) {
                        event.preventDefault();

                        const itemID = form.closest('[product-card]').getAttribute("item-id");

                        let member = null;
                        const memberstack = window.$memberstackDom;

                        if (currentMember) {
                            member = await memberstack.getMemberJSON();
                        } else {
                            member = JSON.parse(localStorage.getItem('memberJSON'));
                            if (!member) member = {};
                        }

                        if (!member.data) {
                            member.data = {};
                        }

                        if (!member.data[jsonList]) {
                            member.data[jsonList] = {};
                        }

                        const inputs = form.querySelectorAll('[ms-code-json-name]');
                        const subgroup = {};
                        inputs.forEach(input => {
                            const jsonName = input.getAttribute('ms-code-json-name');
                            const newItem = input.value;
                            subgroup[jsonName] = newItem;
                        });

                        const subgroupKey = `${jsonList}-${itemID}`;


                        member.data[jsonList][subgroupKey] = subgroup;

                        if (currentMember) {
                            await memberstack.updateMemberJSON({
                                json: member.data
                            }).then(() => nextCode());
                        } else {
                            localStorage.setItem('memberJSON', JSON.stringify(member));
                        }

                        async function nextCode() {
                            await setCartQuantity();
                            let card = form.closest('[product-card]');
                            let clone = card.cloneNode(true);

                            // after card cloned, value of select reseted, so we need to update it
                            let cartList = document.querySelector('[ms-code-print-list="cart-products"]');

                            //card.querySelector('.cart-remove').click();
                            await removeCartNestedData(form, null)
                                .then(async (result) => {
                                    card.style.display = "none";

                                    cartList.append(clone);

                                    if (clone) {
                                        clone.querySelector('.product-card-form-block')?.remove();

                                        let counters = clone.querySelectorAll('[product-number-count]');
                                        let countNum = clone.querySelector('.product-card__count-num');
                                        countSwitcher(
                                            clone.querySelector('.product-card__count-header'),
                                            clone.querySelector('.product-card__count-dropdown'),
                                            counters,
                                            countNum,
                                        );

                                        await updateVariations(clone.querySelector('[product-variations]')).then(() => setTooltips());
                                    }
                                });
                        }

                    });
                });
            }

            $(document).on('click', '.cart-remove', (e) => {
                e.preventDefault();

                const form = e.currentTarget.closest('[product-card]').querySelector('[ms-code-json-list="cart-products"]');
                if (form) {
                    removeCartNestedData(form, null);
                } else {
                    removeCartNestedData(null, e.currentTarget.closest('[product-card]'));
                }
            });

            $(document).on('click', 'section.saved-products [memberstack-quote-request]', (e) => {
                e.preventDefault();

                const form = e.currentTarget.closest('[product-card]').querySelector('[ms-code-json-list="cart-products"]');
                if (form) {
                    form.dispatchEvent(new Event('submit'));
                }
            });

            let productsInterval;
            productsInterval = setInterval(() => {
                const productCards = document.querySelectorAll('section.saved-products [product-card]');

                if (productCards[0].closest('section.empty-list')) {
                    clearInterval(productsInterval);
                    return;
                }

                if (
                    productCards.length &&
                    productCards[productCards.length-1].getAttribute('item-id') !== ''
                ) {
                    clearInterval(productsInterval);
                    productCards.forEach((card, idx) => {
                        let form = card.querySelector('[ms-code-json-list="cart-products"]');

                        if (form) {
                            setTimeout(() => fillCartProductFields(card, form, productCards.length, idx), 500);
                        }
                    });

                    memberScript_2();
                    updateVariations();
                }
            }, 500);

            function fillCartProductFields(card, form, cardsLength, idx) {
                card.style.zIndex = cardsLength - idx;

                let productUrl = card.querySelector('.product-card__title'),
                    description = card.querySelector('[ms-code-item-text="description"]'),
                    series = card.querySelectorAll('[product-series]'),
                    imageUrl = card.querySelector('.product-card__image-img'),
                    countNum = card.querySelector('[ms-code-item-text="count"'),
                    tags;

                let nameField = form.querySelector('[ms-code-json-name="name"]'),
                    itemIdField = form.querySelector('[ms-code-json-name="item-id"]'),
                    descriptionField = form.querySelector('[ms-code-json-name="description"]'),
                    countField = form.querySelector('[ms-code-json-name="count"]'),
                    variations = card.querySelector('[product-variations]'),
                    variationsLabel = card.querySelector('[ms-code-item-text="variations-label"]'),
                    seriesField = form.querySelector('.memberstack-series-field'),
                    productField = form.querySelector('.memberstack-product-field'),
                    imageField = form.querySelector('.memberstack-image-field'),
                    tagsField = form.querySelector('.memberstack-tags-field'),
                    variationsJSONIndex = card.querySelector('[ms-code-item-text="variations-active-index"]'),
                    variationsLabelField = form.querySelector('.memberstack-variations-label-field'),
                    variationsField = form.querySelector('.memberstack-variations-field'),
                    variationsIndexField = form.querySelector('.memberstack-variations-index-field');

                nameField.value = productUrl ? productUrl.innerText : '';
                productField.value = productUrl ? productUrl.href : '';
                imageField.value = imageUrl ? imageUrl.src : '';
                itemIdField.value = card.getAttribute('item-id');
                descriptionField.value = description ? description.innerText : '';
                countField.value = countNum ? countNum.innerText : 1;
                variationsField.value = variations && variations.innerHTML !== '' ? variations.innerHTML : '';
                variationsIndexField.value = variationsJSONIndex.innerText;
                variationsLabelField.value = variationsLabel ? variationsLabel.innerText : '';

                let tagsInterval;
                tagsInterval = setInterval(() => {
                    tags = card.querySelectorAll('.product-card__tags-item');
                    if (tags.length) {
                        clearInterval(tagsInterval);
                        let arr = [];
                        tags.forEach((tag) => {
                            const name = tag.querySelector('.product-tag'),
                                description = tag.querySelector('.tooltip-content'),
                                color = name.getAttribute('style').split(':')[1],
                                colorBG = tag.getAttribute('style').split(':')[1];

                            arr.push({name: name.innerText, description: description.innerHTML, colorText: color, colorBackground: colorBG});
                        });
                        tagsField.value = JSON.stringify(arr);
                    }
                }, 500);

                let seriesInterval;
                seriesInterval = setInterval(() => {
                    series = card.querySelectorAll('[product-series]');
                    if (series.length) {
                        clearInterval(seriesInterval);
                        let seriesArr = [];
                        series.forEach((el) => {
                            seriesArr.push({name: el.innerText, link: el.href});
                        });

                        seriesField.value = JSON.stringify(seriesArr);
                    }
                }, 500);
            }

            async function removeCartNestedData(form, alt) {
                let jsonList = '';
                let card = '';
                let itemID = '';

                if (form) {
                    jsonList = 'saved-products';
                    card = form.closest('[product-card]');
                    itemID = card.getAttribute("item-id");
                } else {
                    jsonList = 'cart-products';
                    card = alt;
                    itemID = card.getAttribute("item-id");
                }

                let member = null;
                const memberstack = window.$memberstackDom;

                if (currentMember) {
                    member = await memberstack.getMemberJSON();
                } else {
                    member = JSON.parse(localStorage.getItem('memberJSON'));
                    if (!member) member = {};
                }

                const subgroupKey = `${jsonList}-${itemID}`;
                if (member.data && member.data[jsonList] && member.data[jsonList][subgroupKey]) {
                    delete member.data[jsonList][subgroupKey];

                    if (currentMember) {
                        await memberstack.updateMemberJSON({
                            json: member.data
                        }).then(data => {

                            if (!form) {
                                setCartQuantity();
                            }
                        });
                    } else {
                        localStorage.setItem('memberJSON', JSON.stringify(member));
                        await setCartQuantity();
                    }

                    card.remove();

                    let cartItemsList = document.querySelectorAll('[ms-code-print-list="cart-products"] [ms-code-print-item]');
                    if (!cartItemsList.length) window.location.href = "/cart/empty";
                }
            }
        }

    }
});