<script>
document.addEventListener("DOMContentLoaded", function(){



//При загрузке страницы    
setTimeout(function () {
    if(document.querySelectorAll('.js-product-single').length)  createBoxes();
}, 1000);


 
//Формируем чекбоксы    
function createBoxes(){
    
    let optionName = 'ДОПОЛНИТЕЛЬНЫЕ ОПЦИИ';

    if(document.querySelectorAll('.js-product-single .js-product-option').length){
        
        console.log(document.querySelectorAll('.js-product-single .js-product-option').length);
        
        $('.js-product-single  .js-product-option').each(function(){
            let elOption = $(this);
            
            let title = elOption.find('.t-product__option-title').text();
            
            if(title==optionName){
                elOption.addClass('multipe-box');
                elOption.append('<div class="t-product__option-chbx-wrapper t-descr"></div>');
                elOption.find('select option').each(function(){
                    let optionTxt = $(this).text();
                    let cost = +$(this).attr('data-product-variant-price');
                    elOption.find('.t-product__option-chbx-wrapper').append('<div class="option-line"> <div class="opt-minus"></div><div class="opt-num"></div><div class="opt-plus"></div>       <div class="t-product__option-chbx"  data-product-variant-cost="'+cost+'"  >'+optionTxt+'</div></div>');
                    
                });
                
                elOption.find('select option:first').val('Нет').attr('data-product-variant-price','').text('Нет');
                $('.multipe-box select')[0].dispatchEvent(new Event('change', { bubbles: true }));
 
            };
        });
        
        $('.js-product-single   .js-product-option.t-product__option').addClass('show-option');
    };
}; 



//Выбор галочек в списке
$(document).on('click', '.t-product__option-chbx'  ,  function(e){
    let wrapElem = $(this).closest('.js-product-option');
    $(this).toggleClass('active-chx-box');
    
    let optionTxt = '';
    let summPrice = 0;
    
    let numChBox = 0;
    wrapElem.find('.active-chx-box').each(function(){
        optionTxt+= $(this).text()+'; ';
        summPrice+= +$(this).attr('data-product-variant-cost');
        numChBox++;
    });
    
    summPrice = '+'+summPrice;

    wrapElem.find('.js-product-option-name').attr('data-option-checked', numChBox);
    if(numChBox){
        wrapElem.find('.js-product-option-name').addClass('show-num-box');
    }else{
        wrapElem.find('.js-product-option-name').removeClass('show-num-box');
    };
    
    wrapElem.find('select option').remove();
    if(optionTxt!=''){
        wrapElem.find('select').append('<option value="'+optionTxt+'" data-product-variant-price="'+summPrice+'">'+optionTxt+'</option>');
    }else{
        wrapElem.find('select').append('<option value="Нет" data-product-variant-price="">Нет</option>');
    };
    
    
    
    wrapElem.find('select')[0].dispatchEvent(new Event('change', { bubbles: true }));
    
    
    
});



//Переключаем активности опциям
$(document).on('click', '.js-product-single   .multipe-box  .js-product-option-name'  ,  function(e){
    let wrapOpt = $(this).closest('.js-product-option');
    
    if( $(this).hasClass('active-opt-box') ) {
        $('.js-product-option').removeClass('active-opt-box')
    }else{
        wrapOpt.toggleClass('active-opt-box');    
    };
    
    
});


});
</script>

<style>

.t-store__prod-popup__info .js-product-option.t-product__option {
    opacity: 1;
}

.t-store__prod-popup__info .js-product-option.t-product__option.show-option {
    opacity: 1;
}

.t-product__option-chbx-wrapper {
    width: max-content;
    border-radius: 5px;
    font-size: 14px;
    z-index: 99;
    margin-top: 5px;
}


.t-product__option-chbx {
    padding: 5px;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
}

.t-product__option-chbx:hover {
    text-decoration: underline;
}

.t-product__option-chbx:before {
    content: "";
    width: 14px;
    height: 14px;
    position: absolute;
    left: -1px;
    border: 1px solid #7c7c7c;
}

 .t-product__option-chbx.active-chx-box:after {
    content: "";
    background-image: url(https://static.tildacdn.com/tild6538-3266-4466-a233-626136623637/check_icon_135782.svg);
    width: 15px;
    height: 15px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    left: 0;
}    

.t-product__option-chbx.active-chx-box {
    text-decoration: underline;
}

#allrecords .multipe-box  .t-product__option-variants {
    display: none;
}

.active-opt-box .t-product__option-chbx-wrapper {
    display: block;
}

 .active-opt-box .js-product-option-name.t-product__option-title {
    background-color: #f9f9f9;
    box-shadow: 0 0 0 2px #000;
    display: none;
}

 .active-opt-box .js-product-option-name.t-product__option-title:after {
    transform: rotate(180deg);
}

.multipe-box .js-product-option.t-product__option {
    width: min-content;
}

.multipe-box .js-product-option-name.t-product__option-title {
    pointer-events: none;
}


</style>