<script>

document.addEventListener("DOMContentLoaded", function() {

//Фразы для состояния остатков
const inStock = 'Осталось мест:';
const outOfStock = 'Нет мест';
const infinitely = 'Очень много';

let snippetSearchRepeat = 0;
let tistore = setInterval(function() {
        const productListNum = document.querySelector('.t-store__product-snippet');
        if(productListNum) {
            if(productListNum.hasAttribute("data-product-url")){
                clearInterval(tistore);
                showQuantInStore();
            };
        };
        snippetSearchRepeat++;
        if(snippetSearchRepeat>50) clearInterval(tistore);
}, 100);   


const gridCont = document.querySelectorAll(".js-store-grid-cont");
gridCont.forEach(function (el, index) {
    el.addEventListener('tStoreRendered',function(e) {
        showQuantInStore();
    });    
});

function showQuantInStore(){
    setTimeout(function(){

        const gridRelevantCont = document.querySelectorAll(".t-store__relevants-grid-cont");
        gridRelevantCont.forEach(function (el, index) {
            el.addEventListener('tStoreRendered',function(e) {
                showQuantInStore();
            });    
        });
        
        const  store = tStoreXHR;
        let prodList = [];
        
        for (key in store) {
            let response = JSON.parse(store[key]['response'])['products'];
            for(let i=0; i<response.length; i++){
                prodList.push(response[i]);
            };
        };
        
        for(let i=0; i<prodList.length; i++){
            const prodUid = prodList[i]['uid'];
            const prodEditions = prodList[i]['editions'];
                let quantAll = 0;
                let infinityQuant = 0;
                
                for(let j=0; j<prodEditions.length; j++){
                    let quant = prodEditions[j]['quantity'];
                    if(quant=='') infinityQuant++;
                    quantAll += +quant;
                };
                
                if(infinityQuant==prodEditions.length) quantAll = 'inf';
                
                const productWithLid = document.querySelectorAll(`.js-product[data-product-gen-uid="${prodUid}"]`);
        
                productWithLid.forEach(function (el, index) {

                    let text = `${inStock} ${quantAll}`;
                    
                    if(quantAll=='inf') text = infinitely;
                    if(quantAll==0)  text = outOfStock;
                    
                    const selectors = ['.t-store__card__imgwrapper','.t-slds__main','.t-store__prod-popup__gallery-column'];
                    
                    for (let key in selectors) {
            	        const pointPlace = el.querySelector(selectors[key]);
                        if(pointPlace) {
                            pointPlace.setAttribute('data-product-inv-sec', text);
                            pointPlace.classList.add('t-text');
                        };
                    };
                });

        };
        
    }, 300); 
       
};

//При открытии карточки товара
document.addEventListener('click', function(event) { 
    if(event.target.closest('a[href*="/tproduct/"]')) showQuantInStore();
});

//При изменении опций
document.addEventListener('change', function(event) { 
    if(event.target.closest('.js-product-controls-wrapper')) showQuantInStore();
});

});
</script>


<style>
.js-product .t-slds__main, 
.js-product .t-store__card__imgwrapper 
{
    position: relative;
}

.js-product .t-slds__main:after,
.js-product .t-store__card__imgwrapper:after,
.js-product .t-store__prod-popup__gallery-column:after

{
    content: attr(data-product-inv-sec);
    color: #000; /*цвет текста*/
    padding: 2px 6px; /*отступы у текста*/
    background-color: #fff; /*цвет фона*/
    /*box-shadow: 0 0 0px 2px #cdcdcd;тень*/
    font-size: 11px; /*размер текста*/
    border-radius: 7px; /*скругление*/
    position: absolute;
    right: 8px;
    bottom: 8px;
    font-weight: 400;
    z-index:99;
    opacity: 1;
    
}
.js-product .t-store__prod-popup__gallery-column:after {
    top: 20px;
    height: max-content;
}
</style>