pages['about'] = {
    title: "Про нас",
    init: () => {
        console.log("About page Init");
    },
    relationFN: function(){

    }
};
pages['account'] = {
    subPageId: 'history',
    accountData: {},
    init: (resp) => {
        console.log("Page cart Init");
        page.accountData = resp;
        if (window.location.hash)
            page.subPageId = window.location.hash.replace('#', '');

        const pageTemplate = getTemplate(page.subPageId + "Template");
        if (pageTemplate) {
            gebid('accountBox').appendChild(pageTemplate);
            page.display[page.subPageId]();
        }
    },
    relationFN: function () {

    },
    display: {
        history: function () {
            const list = page.accountData.customerOrdersList;
            if (Object.keys(list).length) {
                gebid('historyEmptyMsg').hidden = true;

                for (let lineK in list) {
                    let lineData = list[lineK];
                    let clon = getTemplate('orderLineTemplate');
                    clon.querySelector('.panel').dataset.value = lineData.id;
                    clon.querySelector('.panel').classList.add(lineData.cssClass);

                    clon.querySelectorAll('.panel-heading [data-name]').forEach(function (el) {
                        let v = lineData[el.dataset.name];

                        if(el.dataset.name == 'orderKey'){
                            el.href += "'"+v+"'";
                        }
                        else setHTMLValue(el,v);
                    });

                    gebid('ordersList').appendChild(clon);
                }
            }
        },
        profile: function () {
            gebid('customerInfoForm')
                .querySelectorAll('[data-name]').forEach(function (el) {
                let v = page.accountData.customerInfo[el.dataset.name];
                setHTMLValue(el,v);
                if(el.dataset.name == 'birthdayDate' && v)
                    el.disabled = true;
            });

        },
        whishlist: function () {

        },
        addresses: function () {
            const list = page.accountData.customerShippingAddress;
            if (list.length) {
                gebid('addressesEmptyMsg').hidden = true;

                for (const shippLine of list) {
                    let body = getTemplate('custShippAddrTemplate');

                    body.querySelectorAll('[data-name]').forEach(function (el) {
                        let v = shippLine[el.dataset.name];
                        setHTMLValue(el,v);
                    });
                    gebid('customerShippAddresses').prepend(body);

                }
            }
            else page.shippBySavedAddr = false;
        },
        orderInfo:function (info){
            document.querySelector('div.orderPanel[data-value="'+info.orderId+'"] .orderInfo')
                .querySelectorAll('[data-name]').forEach(function (el) {
                let v = info[el.dataset.name];
                if(el.dataset.name == 'orderKey')el.href += "'"+v+"'";
                else setHTMLValue(el,v);
                });
        },
        orderContentList:function (list, orderId){
            const orderPanel = document.querySelector('div.orderPanel[data-value="'+orderId+'"]');
            orderPanel.dataset.initialized = true;

            for (let lineK in list) {
                let lineData = list[lineK];
                let clon = getTemplate('orderProductTemplate');

                clon.querySelectorAll('.mainLink[href]').forEach(function (el) {
                    el.href = '/product/' + lineData.productId + '/' + toUrl(lineData.name) + '.html';
                });

                clon.querySelectorAll('[data-name]').forEach(function (el) {
                    let v = lineData[el.dataset.name];
                    if (el.tagName == 'IMG') el.src = img.url(v, 70, 80);
                    else setHTMLValue(el,v);
                });

                orderPanel.querySelector('.productList').appendChild(clon);
            }
        }
    },
    get:{
        orderInfo: function (id) {
            j.fpost('get', {
                actionMethod: 'orderInfo',
                    id: id
                },
                function (resp) {
                    page.display.orderContentList(resp.orderList, resp.orderDetailInfo.orderId);
                    page.display.orderInfo(resp.orderDetailInfo);
                });
        }
    },
    set:{
        customerData: function () {
            const customerData = formData(gebid('customerInfoForm'));

            customerData.actionMethod = 'updateCustomer';
            j.fpost('set', customerData);
        }
    },
    actions: {
        orderPanelToggle: function (el) {
            page.actions.panelToggle(el, function (parPanel) {
                if(!parPanel.classList.toggle('panel-collapsed') && !parPanel.dataset.initialized)
                    page.get.orderInfo(parPanel.dataset.value);
            });
        },
        panelToggle: function (el,callback) {
            const parPanel = el.closest('.panel');

            const curPanelBody = parPanel.querySelector('.panel-body');

            if(callback) callback(parPanel);

            $(curPanelBody).slideToggle(150);
        }
    }
};
pages['blog'] = {
    title: "Про нас",
    init: () => {
        console.log("About page Init");
    },
    relationFN: function(){

    }
};
pages['cart'] = {
    init: () => {
        console.log("Page cart Init");
        page.display.list(cartList);
    },
    relationFN: function(){

    },
    display: {
        list: function (list,updateProdId=false) {
            if (!updateProdId)
                gebid('cartTbody').innerHTML = '';

            if(Object.keys(list).length) {

                gebid('cartEmptyMsg').hidden = true;
                gebid('cartContBox').hidden = false;

                for (let lineK in list) {
                    let lineData = list[lineK];
                    // console.log(updateProdId);
                    if (updateProdId && lineK===updateProdId) {
                        let row = gebid('cartTbody').querySelector('[data-name="productId"][data-value="'+updateProdId+'"]');

                        row.querySelectorAll('[data-name]').forEach(function (el) {
                            let v = lineData[el.dataset.name];

                            if (el.classList.contains('mainLink')) el.href = '/product/' + v + '/' + toUrl(lineData.name) + '.html';
                            else if (el.tagName == 'IMG') el.src = img.url(v, 270, 0);
                            else setHTMLValue(el, v);
                        });

                    }
                    if (!updateProdId) {
                        let clon = getTemplate('cartProdLineTemplate');

                        clon.querySelectorAll('[data-name]').forEach(function (el) {
                            let v = lineData[el.dataset.name];

                            if (el.classList.contains('mainLink')) el.href = '/product/' + v + '/' + toUrl(lineData.name) + '.html';
                            else if (el.tagName == 'IMG') el.src = img.url(v, 0, 100);
                            else setHTMLValue(el, v);
                        });

                        gebid('cartTbody').appendChild(clon);
                    }
                }

                gebid('totalCartSum').innerText = cartInfo.totalPrice;
            }
        }
    },
    actions: {
        countChange: function (el) {
            if(el.value<1){
                el.value = el.dataset.oldvalue;
                return false;
            }
            else {
                const params = {
                    actionMethod: 'cartProdCount',
                    count: el.value,
                    prodId: el.closest('tr').dataset.value,
                    orderId: cartInfo.id,
                    curInp: el
                }
                j.fpost('set', params, function (resp, param) {
                    const par = param.curInp.closest('tr');
                    cartList = resp.cartList;
                    // shopActions.cart.init();
                    // par.querySelector('[data-name="totalProductPrice"]').innerText = formatPrice(param.curInp.nextElementSibling.value * param.count);
                    page.actions.cartPageRebuild();
                })
            }
        },
        cartPageRebuild: function () {
            gebid('totalCartSum').innerText = cartInfo.totalPrice;
        }
    }
};
pages['catalog'] = {
    title: "Каталог",
    init: (resp) => {
        console.log("Catalog page Init");
        page.display.gallery(resp.catalog);
    },
    display: {
        gallery: function (catalogList) {
            for (let productData of catalogList) {
                let clon = getTemplate('shopCatalogElementTmplt');

                clon.querySelectorAll('[data-name]').forEach(function (el) {
                    let n = el.dataset.name;
                    let v = productData[n];

                    if (el.tagName == 'A' && n=='imgId') el.href = img.url(v, 1375, 1921);
                    else if (el.tagName == 'IMG') el.src = img.url(v, 300, 420);
                    else setHTMLValue(el, v);
                });

                gebid('catalogGallery').appendChild(clon);
            }
            FancypopUp();
        }
    }
};
pages['category'] = {
    onload: function () {
        const params = new URLSearchParams(window.location.search);
        console.log('params');

        // --- PRICE: розбираємо price=100-500
        const price = params.get('price');
        if (price) {
            const [from, to] = price.split('-');
            document.querySelector('input[name="fromPrice"]').value = from || '';
            document.querySelector('input[name="toPrice"]').value = to || '';
        }

        // --- ORDERBY: встановлюємо в <select>
        const orderBy = params.get('orderBy');
        if (orderBy) {
            const select = document.querySelector('select[name="orderBy"]');
            if (select) select.value = orderBy;
        }
    },
    init: (resp) => {
        document.querySelectorAll('[data-box]').forEach(function (el) {
            el.hidden = !(isDefined(resp[el.dataset.box]) && isDefined(resp[el.dataset.box][0]));
        });

        if (isDefined(resp.sw)) {
            gebid('searchedTitle').hidden = false;
            gebid('searchedTitle').querySelector('b').innerText = resp.sw;
        }

        console.log("Page Shop Init");
        page.catsList = resp.categoryList;
        // page.display.catsList(resp.categoryList);
        page.display.productsList(resp.productList);
        page.display.productsFilter(resp.filterList);
        page.relationFN();
    },
    relationFN: () => {
        testimonialSlider();
        mixitupGallery();
    },
    display: {
        /*catsList: function (cList) {
            for (let curCat of cList) {
                let c = document.createElement('li');
                c.className = 'filter';
                c.dataset.filter = '.' + curCat.path;
                c.dataset.role = 'button';
                c.innerHTML = '<span class="txt">' + curCat.name + '</span>';
                gebid('catsList').appendChild(c);
            }
        },*/
        productsList: function (pList) {
            if (pList && typeof pList[Symbol.iterator] === 'function') {
                for (let productData of pList) {
                    let clon = getTemplate('templateProductListItem');
                    clon.children[0].classList.add(productData.ctPath);

                    clon.querySelectorAll('.mainLink[href]').forEach(function (el) {
                        el.href = '/product/' + productData.productId + '/' + toUrl(productData.name) + '.html';
                    });

                    clon.querySelectorAll('[data-name]').forEach(function (el) {
                        let v = productData[el.dataset.name];
                        if (el.tagName == 'IMG') el.src = img.url(v, 300, 0);
                        if (el.dataset.name == 'statusCapture' && localStorage.getItem('magaz')) {v=v+'  '+productData['count'];}
                        if (el.dataset.name == 'mainLink') {
                            el.value = '/product/' + productData.productId + '/' + toUrl(productData.name) + '.html';
                        } else setHTMLValue(el, v);
                    });

                    gebid('mainProductList').appendChild(clon);
                }
            } else {
                console.warn('pList не є ітерованим:', pList);
            }
        },
        productsFilter: function (pList) {

            const grouped = {};
            const codes = {};
            if (pList && typeof pList[Symbol.iterator] === 'function') {
                console.log('hide');
                if ($('#menuzord-menu')[0].style.display !== 'none') $('#showhide').click();
                // $('.menuzord-responsive #menuzord-menu').hide(0);
                // $('.menuzord-responsive #showhide').show(0);
                for (const product of pList) {
                    if (!product.attributeCapture || !product.attributeValueId || !product.attributeValue) continue;

                    const countFiltered = product.countFiltered;

                    const attr = product.attributeCapture.trim();
                    const id = product.attributeValueId.trim();
                    const value = product.attributeValue.trim();

                    if (!grouped[attr]) grouped[attr] = [];
                    if (!grouped[attr][value]) grouped[attr].push({count: countFiltered, id: id,name:value});
                    if (!codes[attr]) codes[attr] = product.attributeCode;
                }
            } else {
                console.warn('pList не є ітерованим:', pList);
            }

// Генерація HTML
            let html = "";
            for (const [attrName, values] of Object.entries(grouped)) {
                html += `<details data-group-id ="${codes[attrName]}">\n<summary>${attrName}</summary>\n<div class="checkbox-list">\n`;

                for (const {name,count, id} of values) {
                    if (count > 0)
                        html += `  <label><input type="checkbox" class="filter-checkbox" value="${id}"> ${name} <span class="filterCount">${count}</span></label>\n`;
                    else
                        html += `  <label style="color: #d2cccc"><input style="border-color: #d2cccc" disabled type="checkbox" class="filter-checkbox" value="${id}"> ${name} <span>${count}</span></label>\n`;
                }
                html += `</div>\n</details>\n\n`;
            }
            gebid('sidebarFilter').innerHTML = html;


// логіка для фільтрів

            const checkboxes = document.querySelectorAll('.filter-checkbox');
            const url = new URL(window.location.href);
            const params = url.searchParams;

// === Витягуємо ВСІ значення з параметрів filter* ===
            const allFilterValues = [...params.entries()]
                .filter(([key]) => key.startsWith('filter'))
                .flatMap(([, value]) => value.split(','))
                .filter(v => v);

            const filterNumbers = [...params.entries()]
                .filter(([key]) => key.startsWith('filter'))
                .map(([key]) => Number(key.replace('filter', '')));

// === Встановити стан чекбоксів, якщо їх значення є у URL ===
            checkboxes.forEach(checkbox => {
                if (allFilterValues.includes(checkbox.value)) {
                    checkbox.checked = true;
                }
            });

// === Відкрити всі <details>, відповідно до номеру в параметрі filter* ===
            if (allFilterValues.length > 0) {
                document.querySelectorAll('details').forEach(details => {
                    // console.log(details);
                    if (filterNumbers.includes(parseInt(details.dataset.groupId)))
                        details.setAttribute('open', '');
                });
            }


            sidebar = gebid('sidebar-filter');
            if (params.get('sidebar') === 'open') {
                sidebar.classList.add('open');
            }
            // === Клік по кнопці ===
            gebid('sidebarMobileWrapper').addEventListener('click', () => {
                sidebar.classList.toggle('open');

                const isOpen = sidebar.classList.contains('open');
                const url = new URL(window.location);

                if (isOpen) {
                    params.set('sidebar', 'open'); // додаємо ?sidebar=open
                } else {
                    params.delete('sidebar'); // видаляємо параметр
                }

                url.search = params.toString();
                window.history.replaceState({scrollY: window.scrollY}, '', url); // оновлюємо URL без перезавантаження
            });

            // === Призначаємо групи для кожного <details> ===
            const detailsList = Array.from(document.querySelectorAll('details'));
            const detailsGroups = new Map();
            detailsList.forEach((details, i) => {
                const group = i === 0 ? 'filter' : `filter${details.getAttribute('data-group-id')}`;
                detailsGroups.set(details, group);
            });

// === Обробка кліків по чекбоксах ===
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('click', () => {
                    const details = checkbox.closest('details');
                    if (!details) return;

                    const group = detailsGroups.get(details);
                    if (!group) return;

                    const checkboxesInGroup = details.querySelectorAll('.filter-checkbox');
                    const selectedValues = Array.from(checkboxesInGroup)
                        .filter(cb => cb.checked)
                        .map(cb => cb.value);

                    if (selectedValues.length > 0) {
                        params.set(group, selectedValues.join(','));
                    } else {
                        params.delete(group);
                    }

                    console.log(window.scrollY);
                    url.search = params.toString();
                    window.history.replaceState({scrollY: window.scrollY}, '', url);
                    indexLoader(); // виклик твого завантажувача
                });
            });

            document.getElementById("sidebar-filter").addEventListener("click", function(e) {
                e.stopPropagation(); // зупиняє передачу кліку догори
            });


// кінець логіки фільтрів

        }
    },
    applyPriceFilter: function () {
        const from = document.querySelector('input[name="fromPrice"]').value.trim() || '0';
        const to = document.querySelector('input[name="toPrice"]').value.trim();

        let priceValue = from;
        if (to) {
            priceValue += '-' + to;
        }

        const url = new URL(window.location.href);
        const params = url.searchParams;

        if (priceValue) {
            params.set('price', priceValue);
        } else {
            params.delete('price');
        }

        params.delete('fromPrice');
        params.delete('toPrice');

        const newUrl = url.pathname + '?' + params.toString();
        console.log(window.scrollY);
        // Підміна URL в адресному рядку без перезавантаження
        history.replaceState({scrollY: window.scrollY}, '', newUrl);
        indexLoader();
    },
    applyOrderBy: function (selectElement) {
        const selectedValue = selectElement.value;

        const url = new URL(window.location.href);
        url.searchParams.set('orderBy', selectedValue); // додає або замінює
        history.replaceState({scrollY: window.scrollY}, '', url.pathname + '?' + url.searchParams.toString());
        indexLoader();
    }

};
pages['checkout'] = {
    searchCityStr: '',
    countryCode: '',
    shippBySavedAddr: false,
    title: "Оформлення замовлення",
    init: (resp) => {
        gebid('pm-page-container').classList.add('lightGrayBg');
        console.log("Page cart Init");
        page.display.cartList(cartList);
        page.display.payMethods(resp.payMethods);
        gebid('shippingData').querySelector('[type="tel"]').value = login;
        // page.display.countriesList(resp.countryList, resp.countryISOCode); // це треба якщо мультикраїни
        page.actions.shipping.init(); // ЦЕ ЗАКОМЕНТУВАТИ треба якщо мультикраїни


        if (resp.customerShippingAddress && resp.customerShippingAddress[0]) page.display.shippingAddress(resp.customerShippingAddress);

        const verAct = getUrlParameter('verify');
        if(document.body.classList.contains('logged')) history.pushState("", "", location.origin + location.pathname);
        else if (verAct){
            document.body.classList.add('orderAccepted');
            message(verAct, function (act) {
                if (act == 'otpLogin') shopActions.customer.OTP.init();
            });
        }
    },
    display: {
        countriesList: function (list, countryISOCode) {
            let cSel = gebid('selectCountry');
            for (let line of list) {
                let opt = document.createElement('option');
                opt.value = line.code;
                opt.innerText = line.common;
                opt.dataset.tokens = line.nativeCommon + ' ' + line.common;
                opt.defaultSelected = line.code == countryISOCode ? 'selected' : false;
                cSel.appendChild(opt);
            }
            page.actions.selectInit('selectCountry');
            page.actions.selectInit('selectCity');
            page.actions.shipping.init(); //після вибору країни по локації, підгрузити способи доставки
        },
        citiesList: function (list) {
            let cSel = gebid('selectCity');
            cSel.innerHTML = '';
            for (let line of list) {
                let opt = document.createElement('option');
                opt.value = line.id;
                opt.innerHTML = line.cityFull;
                opt.dataset.tokens = line.cityFullClear + ' ' + line.cityEN;
                cSel.appendChild(opt);
            }
            page.actions.selectInit('selectCity', true);
        },

        shippingMethods: function (list) {
            let body = '';
            let wrap = '';
            gebid('shippingMethods').innerHTML = '';
            gebid('zoneSelectMsg').hidden = true;

            if (list.length) {
                gebid('noShippingMsg').hidden = true;

                for (let lineData of list) {
                    wrap = getTemplate('shippMethWrapp');

                    if (gebid(lineData.code + 'ShippTemplt'))
                        body = getTemplate(lineData.code + 'ShippTemplt');
                    else body = getTemplate('defShippTemplt');

                    wrap.querySelectorAll('[data-name]').forEach(function (el) {
                        let v = lineData[el.dataset.name];
                        setHTMLValue(el,v);
                    });

                    wrap.querySelector('.panel-body').appendChild(body);

                    wrap.querySelector('.panel').id = lineData.code + 'ShippBox';
                    gebid('shippingMethods').appendChild(wrap);
                }
            } else gebid('noShippingMsg').hidden = false;
        },
        np: {
            warehList: function (list) {
                const cSel = gebid('npSelector');
                for (let line of list) {
                    let opt = document.createElement('option');
                    opt.value = line.ref;
                    opt.innerText = line.description;
                    opt.dataset.tokens = toUrl(line.description);
                    cSel.appendChild(opt);
                }
                page.actions.selectInit('npSelector');
                document.querySelector('#npShippBox .allowed').hidden = false;
                document.querySelector('#npShippBox .notAllowed').hidden = true;
            },
            warehouseInfo: function (data) {

            }
        },
        up: {
            warehList: function (list) {
                const cSel = gebid('upSelector');
                for (let line of list) {
                    let opt = document.createElement('option');
                    opt.value = line.zip;
                    opt.innerText = line.zip + ' (' + line.city + ') - ' + line.address;
                    opt.dataset.tokens = line.city + ' ' + line.zip + ' ' + line.address;
                    cSel.appendChild(opt);
                }
                page.actions.selectInit('upSelector');
                document.querySelector('#upShippBox .allowed').hidden = false;
                document.querySelector('#upShippBox .notAllowed').hidden = true;
            },
            warehouseInfo: function (data) {

            }
        },

        shippingAddress: function (list) {
            document.querySelector('.check_out_form').classList.add('hasShippAddr');

            if (list.length) {
                page.shippBySavedAddr = true;

                for (const shippLine of list) {
                    let body = getTemplate('custShippAddrTemplate');

                    body.querySelectorAll('[data-name]').forEach(function (el) {
                        let v = shippLine[el.dataset.name];
                        setHTMLValue(el,v);
                    });
                    gebid('customerShippAddresses').prepend(body);

                }
            }
            else page.shippBySavedAddr = false;
        },

        cartList: function (list) {
            if (Object.keys(list).length) {
                document.querySelector('.check_out_form').classList.remove('cartEmpty');

                let totalPrice = 0;
                for (let lineK in list) {
                    let lineData = list[lineK];
                    let clon = getTemplate('checkoutProdLineTemplate');

                    clon.querySelectorAll('.mainLink[href]').forEach(function (el) {
                        el.href = '/product/' + lineData.productId + '/' + toUrl(lineData.name) + '.html';
                    });

                    clon.querySelectorAll('[data-name]').forEach(function (el) {
                        let v = lineData[el.dataset.name];
                        if (el.tagName == 'IMG') el.src = img.url(v, 70,0);
                        else
                            setHTMLValue(el,v);
                    });

                    gebid('checkoutProdList').appendChild(clon);
                    totalPrice += parseFloat(lineData.totalProductPriceCalc);
                }

                gebid('totalCartSum').innerText = formatPrice(totalPrice);
            }
        },
        payMethods: function (list) {
            for (let lineData of list) {
                let clon = getTemplate('payMethodTemplate');

                clon.querySelectorAll('[data-name]').forEach(function (el) {
                    let v = lineData[el.dataset.name];
                    if (el.tagName == 'IMG') el.src = img.url(v, 70, 80);
                    else setHTMLValue(el,v);
                });

                gebid('paymentBox').appendChild(clon);
            }
        }
    },
    get: {
        shippingMethods: function (cityId) {
            console.log(cityId);
            cityId = page.countryCode == 'UA' && cityId ? cityId : null;
            j.fpost('get', {
                    actionMethod: 'shippingMethods',
                    countryCode: page.countryCode,
                    cityId: cityId
                },
                function (resp) {
                    console.log(resp);
                    page.display.shippingMethods(resp.shippingMethods);
                    if (resp.warehousesNP && resp.warehousesNP.length) page.display.np.warehList(resp.warehousesNP);
                    if (resp.warehousesUP && resp.warehousesUP.length) page.display.up.warehList(resp.warehousesUP);
                }
            );
        },
        cityList: function (cityName) {
            j.fpost('get', {
                    actionMethod: 'cityList',
                    cityName: cityName
                },
                function (resp) {
                    page.display.citiesList(resp.cityList);
                });
        },
        upWarehouseInfo: function () {

        },
        npWarehouseInfo: function () {

        }
    },
    set: {
        approveOrder: function (reqData) {

            console.log(reqData);
            reqData.actionMethod = 'approveOrder';

            j.fpost('set', reqData,
                function (resp) {
                    if(resp.OK){
                        document.body.classList.add('orderAccepted');
                        cartList = []
                        cartInfo = {}
                        shopActions.cart.init();
                    }

                    if(resp.needActionMethod){
                        history.pushState("", "", location.href + '?verify='+resp.needActionMethod);
                        /*message(resp.needActionMethod, function (act) {
                            if (act == 'otpLogin') shopActions.customer.OTP.init();
                        });*/
                    }
                    // fbq('track', 'Lead');

                }
            );
        }
    },
    actions: {
        shipping: {
            init: function () {
                gebid('zoneSelectMsg').hidden = false;
                gebid('noShippingMsg').hidden = true;

                // page.countryCode = gebid('selectCountry').value;  // це треба якщо мультикраїни
                page.countryCode = "UA";
                if (page.countryCode !== "UA") {
                    page.get.shippingMethods();
                    gebid('cityBox').hidden = true;
                    gebid('selectCity').required = false;
                } else {
                    if (gebid('selectCity').value) {
                        gebid('selectCity').value = false;
                        page.actions.selectInit('selectCity', true);
                    } else page.actions.selectInit('selectCity');

                    gebid('selectCity').required = true;
                    gebid('cityBox').hidden = false;
                }
            },
            togglePanel: function (el) {
                const shippingToDoor = document.querySelector('#' + el.value + 'ShippBox [name="shippingToDoor"]');
                if (shippingToDoor) {
                    shippingToDoor.checked = true;
                }

                const parPanel = el.closest('.panel');

                if (document.querySelector('.panel:not(.panel-collapsed)')) {
                    const oldShippPanel = document.querySelector('.panel:not(.panel-collapsed)');
                    oldShippPanel.classList.add('panel-collapsed');
                    $(oldShippPanel.querySelector('.panel-body')).slideUp(150);
                    if (oldShippPanel.querySelector('.panel-body input:checked'))
                        oldShippPanel.querySelector('.panel-body input:checked').checked = false;
                }

                const curPanelBody = parPanel.querySelector('.panel-body');
                parPanel.classList.toggle('panel-collapsed');

                gebid('shippingMethodDesc').innerHTML =
                    parPanel.querySelector('.panel-heading p').innerHTML;

                $(curPanelBody).slideToggle(150);
            }
        },
        onCityInput: function (el) {
            let cityName = el.target.value;

            if (cityName.length > 2 && cityName.substr(0, 3) != page.searchCityStr) {
                page.searchCityStr = cityName.substr(0, 3);
                page.get.cityList(page.searchCityStr);
            }
        },
        onCitySelect: function (el) {
            console.log(el);
            page.get.shippingMethods(el.value);
        },

        preApproveOrder: function () {
            var requestData = {};
            const fullData = formData(document.forms.shippingData);
            fullData.countryCode = "UA";
            console.log(fullData);
            // return;


            //shipp by saved customer addr
            if (fullData.comment) requestData.comment = fullData.comment;
            if (page.shippBySavedAddr) {
                requestData.paymentMethodId = fullData.paymentMethodId;
                requestData.customerShippAddressId = fullData.customerShippAddressId;
            } else {
                if (!document.forms.shippingData.checkValidity()) {
                    document.forms.shippingData.reportValidity();
                    return false;
                }

                requestData.name = fullData.name;
                requestData.surname = fullData.surname;
                requestData.tel = fullData.tel;

                if (fullData.fatherName // якщо є по-батькові (опціонально), або якщо вибрана доставка Укрпошта наложенним платежем
                || (fullData.paymentMethodId == 2 && fullData.shippMethod == 'up'))
                    requestData.fatherName = fullData.fatherName;
                if (fullData.comment) requestData.comment = fullData.comment;

                if (fullData.countryCode === "UA") requestData.cityId = fullData.cityId;

                requestData.countryCode = fullData.countryCode;
                requestData.shippMethod = fullData.shippMethod;
                requestData.paymentMethodId = fullData.paymentMethodId;

                if (fullData.shippMethod) {
                    // всі дані з input-ів цього методу доставки з атрибутом data-name будуть перебрані, якщо э значення для нього, або
                    // якщо є data-required, то значення будуть підхоплені скриптом
                    document.querySelectorAll('#' + fullData.shippMethod + 'ShippBox input[data-name]').forEach(
                        (el) => {
                            if (el.dataset.required || fullData[el.name])
                                requestData[el.dataset.name] = fullData[el.name];
                        }
                    );

                    // так як доступно два можливих варіанти для одного способу доставки, то треба значення внести окремо
                    // в залежності від shippData.shippingToDoor
                    if (fullData.shippMethod == "up" || fullData.shippMethod == "np") {
                        if (requestData.shippingToDoor === "1") {
                            requestData.address = fullData[fullData.shippMethod + 'Address'];
                        }
                        else if (requestData.shippingToDoor === "0") {
                            requestData.ref = fullData[fullData.shippMethod + 'Ref'];
                            requestData.address = gebid(fullData.shippMethod + 'Selector').selectedOptions[0].innerText
                        }
                    }
                }
            }

            //валідація даних які йдуть на сервер
            let verify = true;
            Object.keys(requestData).forEach((key) => {
                if (!requestData[key]) {
                    let formLine = document.forms.shippingData[key]
                        || document.querySelector('input[data-name="' + key + '"], select[data-name="' + key + '"]');
                    if (formLine) {
                        if (formLine.length && !formLine.tagName) formLine = formLine[0];
                        errText = formLine.placeholder && formLine.placeholder != "" ? formLine.placeholder : formLine.title;
                        console.log('sss');
                        errorMsg();
                        verify = false;
                        return false;
                    }

                }
            });

            // console.log(requestData);
            if (verify) page.set.approveOrder(requestData);

        },

        selectInit: function (selectId, refresh) {
            if (!isDefined(refresh)) {
                $('#' + selectId).selectpicker();

                if (selectId == 'selectCity')
                    gebid('cityBox').querySelector('input')
                        .oninput = page.actions.onCityInput;
            } else $('#' + selectId).selectpicker('refresh');
        },

        switchCustShippAddr: function () {
            page.shippBySavedAddr =
                !document.querySelector('.check_out_form').classList.toggle('customerShippAddrClose');
        }
    }
};
pages['conditions'] = {
    title: "Оплата і доставка",
    init: () => {
        console.log("Conditions page Init");
    },
    relationFN: function(){

    }
};
pages['contact'] = {
    title: "Контакти",
    init: () => {
        console.log("Contact page Init");
    },
    relationFN: function(){

    }
};
pages['product'] = {
    curProductInfo: {},
    init: (resp) => {
        document.querySelectorAll('[data-box]').forEach(function (el) {
            el.hidden = !(isDefined(resp[el.dataset.box]) && isDefined(resp[el.dataset.box][0]));
        });
        page.data = resp;
        console.log("Page Product Init");
        page.curProductInfo = resp.productInfo;
        page.productData = resp.productInfo;
        page.display.mainInfo();
        page.display.productAttributes();
        page.display.gallery(resp.productGallery);
        page.display.reviews(resp.productReviews);
        page.display.relatedProducts(resp.relatedProducts);
        page.display.productVariations(resp.productVariations);
        page.display.reviewForm();
        // page.genBar();

    },
    relationFN: () => {
    },
    display: {
        mainInfo: function () {
            const prodBox = document.querySelector('.product_details');

            prodBox.querySelectorAll('[data-name]').forEach(function (el) {
                let v = page.productData[el.dataset.name];
                let n = el.dataset.name || el.name;

                if (n === 'statusCapture' && localStorage.getItem('magaz')) {v=v+'  '+page.productData.count;}
                if (n==='edit'){if (localStorage.getItem('magaz')){
                    el.href = 'https://cp.planeta-sport.com/products/productEdit?productId='+page.productData.productId;
                    el.textContent = '✏️';
                }} else
                if (el.tagName == 'IMG' && n == 'barcode') {
                    el.src = 'https://bwipjs-api.metafloor.com/?bcid=code128&text='+v+'&scale=1&height=10&includetext=false';
                }
                else if (el.tagName == 'A' && n == 'imgId') {
                    el.href = img.url(v, 0,0);
                }
                else if (el.tagName == 'IMG') el.src = img.url(v, 0,350);
                else setHTMLValue(el, v);

            });

            if (isDefined(cartList[page.productData.productId])) {
                document.querySelector('.addToCartBox').classList.add('addedToCart');
                document.querySelector('.inCartTxt').hidden = false;
                document.querySelector('.addToCartBox [data-name="countInCart"]').innerText = cartList[page.productData.productId].count;
            }
        },
        productAttributes: function () {
            const tab = document.querySelector('#description>p');
            const data = page.data.productAttributes;

            console.log(tab.innerHTML);

            let html = "<table>";
            data.forEach(function (item) {

                // будуємо таблицю
                html += `<tr><td>${item.capture}</td><td>${item.value}</td></tr>`;

            });
            html += "</table>";

            console.log(html);
            tab.innerHTML = html + tab.innerHTML;
        },
        gallery: function (data) {
            for (const o of data) {
                if (o.main == 1) continue;
                let gallBox = getTemplate('galleryImgBoxTemplate');

                gallBox.querySelectorAll('[data-name]').forEach(function (el) {
                    const n = el.dataset.name || el.name;
                    const v = o[n];
                    let w = o.width;
                    let h = o.height;

                    if (w > 1024 || h > 1024) {
                        const wD = 1024 / w;
                        const wH = 1024 / h;
                        const d = wD > wH ? wH : wD;

                        w = Math.round(w * d);
                        h = Math.round(h * d);
                    }

                    if (el.tagName == 'A' && n == 'imgId') el.href = img.url(v, w, h);
                    else if (el.tagName == 'IMG') el.src = img.url(v, 80,80);
                    else setHTMLValue(el, v);
                });
                gebid('productGallery').prepend(gallBox);
            }
            FancypopUp();
        },
        reviews: function (revsList) {
            for (let curReview of revsList) {
                let clon = getTemplate("revTemplate");

                clon.querySelectorAll('[data-name]').forEach(function (el) {
                    let v = curReview[el.dataset.name];
                    if (el.tagName == 'IMG') el.src = "/img/reviewAvatar/pngegg" + curReview.rate + ".png";
                    else setHTMLValue(el, v);
                });

                gebid('reviews').prepend(clon);
            }
        },
        relatedProducts: function (pList) {
            if (pList && typeof pList[Symbol.iterator] === 'function') {
            for (let productData of pList) {
                let clon = getTemplate("featuredProductTemplate");

                clon.querySelectorAll('[href]').forEach(function (el) {
                    el.href = '/product/' + productData.productId + '/' + toUrl(productData.name) + '.html';
                });

                clon.querySelectorAll('[data-name]').forEach(function (el) {
                    let v = productData[el.dataset.name];
                    if (el.tagName == 'IMG') el.src = img.url(v, 300, 300);
                    else setHTMLValue(el, v);
                });

                gebid('featuredProductsList').appendChild(clon);
            }}else {
                console.warn('pList не є ітерованим:', pList);
            }
        },
        productVariations: function (pList) {
            if (pList && typeof pList[Symbol.iterator] === 'function') {
            for (let productData of pList) {
                let clon = getTemplate("productVariationTemplate");
                const boxId = 'productVariations'+productData.attributeCode;
                let box = gebid(boxId);

                if(!box){
                    box = getTemplate("productVariationsBoxTemplate");
                    box.querySelector('div').id = boxId;
                    box.querySelector('.capture').innerText = productData.capture;
                    gebid('productVariations').appendChild(box);
                    box = gebid(boxId);
                }

                clon.querySelectorAll('[href]').forEach(function (el) {
                    if (productData.productId != page.curProductInfo.productId) {
                        el.href = '/product/' + productData.productId + '/' + toUrl(productData.name) + '.html';
                        el.title = productData.name;
                    } else {
                        el.classList.add('currentVariation');
                        el.disabled = true;
                    }
                });

                clon.querySelectorAll('[data-name]').forEach(function (el) {
                    let v = productData[el.dataset.name];
                    if (el.tagName == 'IMG') el.src = img.url(v, 80, 80);
                    else setHTMLValue(el, v);
                });

                box.appendChild(clon);
            }}else {
                console.warn('pList не є ітерованим:', pList);
            }
        },
        reviewForm (){
            const revForm = gebid('customerReviewBlock');

            revForm.querySelector('[name="firstName"]').value = customerInfo.name ? customerInfo.name : '';
            revForm.querySelector('[name="login"]').value = login ? login : '';
        }
    },
    actions: {
        oneClickOpen(el) {
            shopActions.preAddToCart('oneClick');
        },
        sendReview (f){
            const dt = formData(f);
            dt.actionMethod = 'productReview';

            j.fpost('set', dt, function (resp) {
                gebid('customerReviewBlock').hidden = true;

                if(resp.needActionMethod){
                    gebid('reviewNeedApprove').hidden = false;
                    history.pushState("", "", location.href + '?verify='+resp.needActionMethod);
                    message(resp.needActionMethod, function (act) {
                        if (act == 'otpLogin') shopActions.customer.OTP.init();
                    });
                }
                else gebid('reviewSent').hidden = false;
            });
        }
    },
    genBar:function () {
        const container = document.getElementById("barcode");
        const value = container.textContent.trim();

        const svg = document.createElement("svg");

        JsBarcode(svg, value, {
            format: "CODE128",       // <--- ось ця частина
            displayValue: false,
            width: 1,
            height: 30,
            margin: 3
        });

        console.log('svg');

        container.textContent = ""; // очищаємо текст
        container.appendChild(svg);
        svg.style.height = "50px";
        svg.style.width = "150px";
    }
}
pages['reviews'] = {
    init: (resp) => {
        page.display.list(resp.reviewsList);
        page.display.reviewForm();
    },
    display: {
        list: function (rewsList) {
            for (let productData of rewsList) {
                let clon = getTemplate('shopReviewTemplate');

                clon.querySelectorAll('[data-name]').forEach(function (el) {
                    let v = productData[el.dataset.name];
                    setHTMLValue(el,v);
                });

                gebid('reviewsBox').appendChild(clon);
            }
        },
        reviewForm (){
            const revForm = gebid('customerReviewBlock');

            revForm.querySelector('[name="firstName"]').value = customerInfo.name ? customerInfo.name : '';
            revForm.querySelector('[name="login"]').value = login ? login : '';
        }
    },
    sendReview (f){
        const dt = formData(f);
        dt.actionMethod = 'shopReview';

        j.fpost('set', dt, function (resp) {
            gebid('customerReviewBlock').hidden = true;

            if(resp.needActionMethod){
                gebid('reviewNeedApprove').hidden = false;
                history.pushState("", "", location.href + '?verify='+resp.needActionMethod);
                message(resp.needActionMethod, function (act) {
                    if (act == 'otpLogin') shopActions.customer.OTP.init();
                });
            }
            else gebid('reviewSent').hidden = false;
        });
    }
};
pages['shop'] = {
    init: (resp) => {
        document.querySelectorAll('[data-box]').forEach(function (el) {
            el.hidden = !(isDefined(resp[el.dataset.box]) && isDefined(resp[el.dataset.box][0]));
        });

        if(isDefined(resp.sw)) {
            gebid('searchedTitle').hidden = false;
            gebid('searchedTitle').querySelector('b').innerText = resp.sw;
        }

        console.log("Page Shop Init");
        page.catsList = resp.categoryList;
        page.display.catsList(resp.categoryList);
        page.display.productsList(resp.productList);
        page.relationFN();
    },
    relationFN: () => {
        testimonialSlider();
        mixitupGallery();
    },
    display: {
        catsList: function (cList) {
            for (let curCat of cList) {
                let c = document.createElement('li');
                c.className = 'filter';
                c.dataset.filter = '.' + curCat.path;
                c.dataset.role = 'button';
                c.innerHTML = '<span class="txt">' + curCat.title + '</span>';
                gebid('catsList').appendChild(c);
            }
        },
        productsList: function (pList) {
            if (pList && typeof pList[Symbol.iterator] === 'function') {
            for (let productData of pList) {
                let clon = getTemplate('templateProductListItem');
                clon.children[0].classList.add(productData.ctPath);

                clon.querySelectorAll('.mainLink[href]').forEach(function (el) {
                    el.href = '/product/' + productData.productId + '/' + toUrl(productData.name) + '.html';
                });

                clon.querySelectorAll('[data-name]').forEach(function (el) {
                    let v = productData[el.dataset.name];
                    if (el.tagName == 'IMG') el.src = img.url(v, 300,0);

                    if (el.dataset.name === 'statusCapture' && localStorage.getItem('magaz')) {v=v+'  '+productData.count;}
                    if (el.dataset.name === 'mainLink') {el.value = '/product/' + productData.productId + '/' + toUrl(productData.name) + '.html';}
                    else setHTMLValue(el, v);
                });

                gebid('mainProductList').appendChild(clon);
            }}else {
                console.warn('pList не є ітерованим:', pList);
            }
        }
    }

};