<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
    
        const charList = [
            'KVS клапана',
            'DN смесительного узла',
        ];
        

    
        const gridCont = document.querySelectorAll(".js-store-grid-cont");
        gridCont.forEach(function (el, index) {
            el.addEventListener('tStoreRendered',function(e) {
                createStoreTable(this);
            });    
        });
        
        
        function createStoreTable(el){
            
            const store = tStoreXHR;
            const productObject = {};
            
            for (let key in store) {
                let productList = JSON.parse(store[key]['response']);
    	        productList = productList['products'];
    	        for(let i=0; i<productList.length ; i++){
    	            productObject[productList[i].uid] = productList[i];
    	       };      
    	    };

            const colPercent = (100/charList.length).toFixed(2) + '%';
            
            let charNames = '';
            for(let i=0; i<charList.length; i++){
                charNames += `
                    <div class="char-title" style="width:${colPercent}">${charList[i]}</div>
                `;    
            };
            
            
            
            
            const prevHeader = el.closest('.t-store').querySelector('.table-store-header');
            if(prevHeader!=null) prevHeader.remove();
            
            const tableHeader = document.createElement("div");
            tableHeader.className = "table-store-header t-container t-text";
            tableHeader.innerHTML = `
                                <div class="table-store-header-wrapper">
                                    <div class="table-store-header-sku">Артикул</div>
                                    <div class="table-store-header-name">Наименование</div>
                                    <div class="table-store-header-chars">
                                        ${charNames}
                                    </div>
                                    <div class="table-store-header-price">Цена</div>
                                    <div class="table-store-header-buttons"></div>
                                </div>
            `;
            
            el.insertAdjacentElement('beforeBegin', tableHeader);
            
        
            const productList = el.querySelectorAll('.js-product.t-store__card.t-col');
            for(let i=0; i<productList.length; i++){
                const product = productList[i];
                const uid = product.getAttribute('data-product-gen-uid');
                const textWrapper = product.querySelector('.t-store__card__textwrapper');
                const priceElem = product.querySelector('.js-store-price-wrapper').innerHTML;
                
                const prodInObj = productObject[uid];
                
                let charObjNew = {};
                if(prodInObj!=undefined){
                    const charObj = prodInObj.characteristics;
                    for(let k=0; k<charObj.length; k++){
                        charObjNew[charObj[k].title] = charObj[k];
                    };

                };
                

                let charCol = '';
                for(let j=0; j<charList.length; j++){
                    
                    let charVal = charObjNew[charList[j]].value;

                    if(charVal==undefined){
                        charVal = '-';
                    };
                    
                    charCol += `
                        <div class="table-product-chars" style="width:${colPercent}">${charVal}</div>
                    `;    
                };
                
                
                const tableProductChars = document.createElement("div");
                tableProductChars.className = "table-product chars-wrapper  t-text";
                tableProductChars.innerHTML = `
                            <div class="table-product-wrapper">
                                ${charCol}
                            </div>
                    `;
                
                textWrapper.append(tableProductChars);
                    
                const tableProductPrice = document.createElement("div");
                tableProductPrice.className = "table-product price-wrapper t-text";
                tableProductPrice.innerHTML = `
                            <div class="table-product-wrapper">
                                <div class="table-product-price">${priceElem}</div>
                            </div>
                    `;
                
                textWrapper.append(tableProductPrice);
         
            };
            
        };
    
    })();  
});
</script>


<style>

.table-store-header-wrapper {
    margin-left: 20px;
    margin-right: 20px;
    box-sizing: border-box;
    display: flex;
    border: 1px solid #afafaf;
    font-weight: 500;
    font-size: 14px;
}


.table-store-header-wrapper>div {
    padding: 5px 10px;
    border-right: 1px solid #afafaf;
    box-sizing: border-box;
}



.table-store-header-chars {
    flex-grow: 1;
}

.table-store-header-wrapper>div:last-child {
    border: none;
}


.js-product.t-store__card.t-col:after, 
.js-product.t-store__card.t-col:before 
{
    display: none;
}

.js-product.t-store__card.t-col .t-store__card__imgwrapper {
    display: none;
}

.js-product.t-store__card.t-col {
    float: none;
    max-width: none;
    display: flex;
    margin: 0 20px;
    box-sizing: border-box;
    border: 1px solid #868686;
    margin-top: -1px;
    width: initial;
    transition: all 0.3s;
    flex-direction: row;
}

.js-store-grid-cont.t-store__grid-cont.t-container {
    display: flex;
    flex-direction: column;
}

.js-product.t-store__card.t-col>a {
    flex-grow: 1;
}


.js-product.t-store__card.t-col .t-store__card__textwrapper {
    padding: 0;
    display: flex;
    height: 100%;
    align-items: center;
}

.js-product.t-store__card.t-col .js-store-price-wrapper.t-store__card__price-wrapper {
    margin: 0;
    display: none;
}

.js-product.t-store__card.t-col .t-store__card__btns-wrapper {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.js-product.t-store__card.t-col .t-store__prod__quantity {
    margin: 0;
}

.js-product.t-store__card.t-col .t-store__card__btn.t-btn {
    margin: 0;
}

#allrecords .js-product.t-store__card.t-col .js-store-prod-name.js-product-name.t-store__card__title {
    order: -1;
    padding: 5px 10px;
    border-right: 1px solid #afafaf;
    box-sizing: border-box;
    height: inherit;
    line-height: 1.55;
    min-width: 350px;
    display: flex;
    align-items: center;
}


.js-product.t-store__card.t-col span.js-store-prod-sku.js-product-sku {
    color: #000;
}

.js-product.t-store__card.t-col .t-store__card__sku.t-descr {
    font-size: 0;
    padding: 5px 10px;
    border-right: 1px solid #afafaf;
    box-sizing: border-box;
    text-align: center;
    display: flex !important;
    margin: 0;
    height: inherit;
    order: -2;
    align-items: center;
    
}


.t-store__card__btns-wrapper.js-store-buttons-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.table-product-price {
    padding: 12px 10px;
    border-right: 1px solid #afafaf;
    box-sizing: border-box;
    height: inherit;
}

.table-product.t-container.t-text {
    height: inherit;
    display: flex;
    align-items: center;
}

.table-product-wrapper {
    height: inherit;
}


.table-product.price-wrapper.t-text {
    height: inherit;
}

.table-product.chars-wrapper.t-text {
    flex-grow: 1;
    border-right: 1px solid #afafaf;
    height: inherit;
}

.js-product.t-store__card.t-col span.t-store__card__btn-text {
    font-size: 0;
    padding: 0 7px;
}

.js-product.t-store__card.t-col .t-store__card__btn {
    background-image: url(https://static.tildacdn.com/tild3762-3166-4333-a230-326131643661/shopping_cart_market.svg);
    background-position: center;
    background-size: 50%;
    background-repeat: no-repeat;
    height: 25px;
}

.js-product.t-store__card.t-col .t-store__prod__quantity__minus-wrapper, 
.js-product.t-store__card.t-col .t-store__prod__quantity__plus-wrapper {
    margin: 0;
    width: 20px;
    min-width: 20px;
}

.js-product.t-store__card.t-col  .t-store__card__price_old.t-store__card__price-item,
#allrecords .js-product.t-store__card.t-col .js-store-prod-name.js-product-name.t-store__card__title,
.js-product.t-store__card.t-col span.js-store-prod-sku.js-product-sku,
.js-product.t-store__card.t-col  .t-store__card__price.t-store__card__price-item.t-name,
.table-product-wrapper
{
    font-size: 12px;
}


#allrecords .js-product.t-store__card.t-col  .t-store__card__price.t-store__card__price-item.t-name,
#allrecords .js-product.t-store__card.t-col .js-store-prod-name.js-product-name.t-store__card__title
{
    font-weight: 600;
}

.js-product.t-store__card.t-col .t-store__prod__quantity__plus-wrapper, 
.js-product.t-store__card.t-col .t-store__prod__quantity__minus-wrapper

{
    height: 23px;
}

.js-product.t-store__card.t-col input.t-store__prod__quantity-input.t-descr.t-descr_xxs,
.js-product.t-store__card.t-col .t-store__prod__quantity{
    height: 25px;
}



.js-product.t-store__card.t-col:hover {
    background-color: #f2f2f2;
    box-shadow: 0 0 3px 0 #9e9e9e;
    transform: scale(1.01);
}

.table-store-header-wrapper .table-store-header-chars {
    display: flex;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
}

.table-store-header-chars>div {
    flex-grow: 1;
    border-right: 1px solid #afafaf;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    flex: 1 1 0;
}

.table-store-header-chars>div:last-child {
    border-right: none;
}


.table-product.chars-wrapper  .table-product-wrapper {
    display: flex;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
    padding-left: 0;
    padding-right: 0;
}

.table-product.chars-wrapper  .table-product-wrapper>div:last-child {
    border-right: none;
}

.table-product-wrapper>div {
    border-right: 1px solid #afafaf;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    flex: 1 1 0;
}

.t-clear.t-store__grid-separator {
    display: none;
}


#allrecords .js-product.t-store__card.t-col .js-store-prod-name.js-product-name.t-store__card__title,
.table-store-header-name
{
    min-width: 300px;
}

.js-product.t-store__card.t-col .t-store__card__sku.t-descr,
.table-store-header-sku
{
    min-width: 80px;
}

.table-product.price-wrapper.t-text,
.table-store-header-price
{
    min-width: 160px;
}

.js-product.t-store__card.t-col .t-store__card__btns-wrapper,
.table-store-header-buttons
{
    min-width: 150px;
}


@media screen and  (max-width: 1200px) {
.js-product.t-store__card.t-col .t-store__prod__quantity,
.js-product.t-store__card.t-col  .t-store__prod__quantity+a[href="#order"]{
        width: auto;
}

.table-product.price-wrapper.t-text,
.table-store-header-price
{
    min-width: 120px;
}

#allrecords .js-product.t-store__card.t-col .js-store-prod-name.js-product-name.t-store__card__title,
.table-store-header-name
{
    min-width: 260px;
}

.table-store-header-wrapper,
.js-product.t-store__card.t-col
{
    margin-left: 10px;
    margin-right: 10px;
}


}


@media screen and (max-width: 960px) {
.table-store-header.t-container {
        max-width: 960px;
        width: 960px;
        overflow: auto;
}
}

@media screen and (max-width: 960px) {

.t-store.js-store {
    overflow-x: auto;
}

.js-store-grid-cont.t-store__grid-cont.t-container,
.table-store-header.t-containe,
.js-store-parts-select-container.t-store__grid-cont.t-container
{
        width: 100%;
        max-width: none;
}

#allrecords .js-product.t-store__card.t-col {
        display: flex;
        vertical-align: top;
        padding-left: 0px;
        padding-right: 0px;
        width: 940px;
}
}

@media screen and (max-width: 960px) {
.t-store__filter__search-mob-btn {
    margin-left: 25px;
    margin-bottom: -4px;
}

.t-store__filter {
    margin-bottom: 15px;
}


.js-store-parts-select-container.t-store__grid-cont.t-container:after {
    content: "";
    width: 50px;
    height: 40px;
    background-image: url(https://static.tildacdn.com/tild3766-6631-4461-b037-396462626532/hand.svg);
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 10px;
}

.t-store__filter {
        margin-left: 10px;
        margin-right: 10px;
}


.js-store-parts-select-container.t-store__grid-cont.t-container {
    position: sticky;
    left: 0;
}

    
}


@media screen and (max-width: 640px) {

.js-product.t-store__card.t-col {
        margin-left: 0px;
        margin-right: 0px;
    }
        
}




</style>