Как сделать калькулятор дизайн проекта в Тильда

<script>
$(document).ready(function(){

let resultTable = `<div class="result-wrapper t-text">
    
    <div class="result-title"></div>
    <div class="result-title">№</div>
    <div class="result-title">Услуга</div>
    <div class="result-title">Стоимсть за кв.м</div>
    <div class="result-title">Кол-во кв.м</div>
    <div class="result-title">Стоимость итого</div>
    <div class="result-title">Срок исполнения, раб.дней</div>
    
    <div class="result-01_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-01_1">1</div>
    <div class="active-line result-01_2">Замер объекта, проработка технического задания на проектирование</div>
    <div class="active-line result-01_3">150</div>
    <div class="active-line result-01_4"><input class="t-input" ></div>
    <div class="active-line result-01_5">0</div>
    <div class="active-line result-01_6">2</div>
    
    <div class="result-02_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-02_1">2</div>
    <div class="active-line result-02_2">Разработка идеального планировочного решения (план расположения стен и мебели с ее размерами)</div>
    <div class="active-line result-02_3">200</div>
    <div class="active-line result-02_4"><input class="t-input" ></div>
    <div class="active-line result-02_5">0</div>
    <div class="active-line result-02_6">4</div>
	
    <div class="result-03_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-03_1">3</div>
    <div class="active-line result-03_2">Концепция и фотореалистичная 3Д визуализация помещений с подбором мебели согласно бюджету заказчика</div>
    <div class="active-line result-03_3">2 500</div>
    <div class="active-line result-03_4"><input class="t-input" ></div>
    <div class="active-line result-03_5">0</div>
    <div class="active-line result-03_6"></div>	
    
    <div class="result-separator_0"></div>
    <div class="result-separator_1"></div>
    <div class="result-separator_2">Чертежи: </div>
    <div class="result-separator_3"></div>
    <div class="result-separator_4"></div>
    <div class="result-separator_5"></div>
    <div class="result-separator_6"></div>
    
    <div class="result-04_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-04_1">4</div>
    <div class="active-line result-04_2">Обмерочный план</div>
    <div class="active-line result-04_3">50</div>
    <div class="active-line result-04_4"><input class="t-input" ></div>
    <div class="active-line result-04_5">0</div>
    <div class="active-line result-04_6">2</div>
    
    <div class="result-05_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-05_1">5</div>
    <div class="active-line result-05_2">План монтажа</div>
    <div class="active-line result-05_3">50</div>
    <div class="active-line result-05_4"><input class="t-input" ></div>
    <div class="active-line result-05_5">0</div>
    <div class="active-line result-05_6">2</div>
    
    <div class="result-06_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-06_1">6</div>
    <div class="active-line result-06_2">План освещения и ведомость осветительного оборудования с планом выключателей</div>
    <div class="active-line result-06_3">175</div>
    <div class="active-line result-06_4"><input class="t-input" ></div>
    <div class="active-line result-06_5">0</div>
    <div class="active-line result-06_6">5</div>
    
    <div class="result-07_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-07_1">7</div>
    <div class="active-line result-07_2">План розеток и ведомость электрического оборудования</div>
    <div class="active-line result-07_3">100</div>
    <div class="active-line result-07_4"><input class="t-input" ></div>
    <div class="active-line result-07_5">0</div>
    <div class="active-line result-07_6">4</div>
    
    <div class="result-08_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-08_1">8</div>
    <div class="active-line result-08_2">План дверей</div>
    <div class="active-line result-08_3">50</div>
    <div class="active-line result-08_4"><input class="t-input" ></div>
    <div class="active-line result-08_5">0</div>
    <div class="active-line result-08_6">2</div>
    
    <div class="result-09_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-09_1">9</div>
    <div class="active-line result-09_2">План полов</div>
    <div class="active-line result-09_3">75</div>
    <div class="active-line result-09_4"><input class="t-input" ></div>
    <div class="active-line result-09_5">0</div>
    <div class="active-line result-09_6">3</div>
    
    <div class="result-10_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-10_1">10</div>
    <div class="active-line result-10_2">План потолков</div>
    <div class="active-line result-10_3">100</div>
    <div class="active-line result-10_4"><input class="t-input" ></div>
    <div class="active-line result-10_5">0</div>
    <div class="active-line result-10_6">4</div>    
    
    <div class="result-11_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-11_1">11</div>
    <div class="active-line result-11_2">План сантехники</div>
    <div class="active-line result-11_3">75</div>
    <div class="active-line result-11_4"><input class="t-input" ></div>
    <div class="active-line result-11_5">0</div>
    <div class="active-line result-11_6">3</div>
    
    <div class="result-12_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-12_1">12</div>
    <div class="active-line result-12_2">План отопления</div>
    <div class="active-line result-12_3">75</div>
    <div class="active-line result-12_4"><input class="t-input" ></div>
    <div class="active-line result-12_5">0</div>
    <div class="active-line result-12_6">3</div>
    
    <div class="result-13_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-13_1">13</div>
    <div class="active-line result-13_2">Развертки стен</div>
    <div class="active-line result-13_3">625</div>
    <div class="active-line result-13_4"><input class="t-input" ></div>
    <div class="active-line result-13_5">0</div>
    <div class="active-line result-13_6">0</div>
    
    <div class="result-14_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-14_1">14</div>
    <div class="active-line result-14_2">Чертежи раскладки плитки</div>
    <div class="active-line result-14_3">625</div>
    <div class="active-line result-14_4"><input class="t-input" ></div>
    <div class="active-line result-14_5">0</div>
    <div class="active-line result-14_6">0</div>
    
    <div class="result-15_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-15_1">15</div>
    <div class="active-line result-15_2">Адаптация проектов смежников (инженерные сети, отопление, вентиляция)</div>
    <div class="active-line result-15_3">225</div>
    <div class="active-line result-15_4"><input class="t-input" ></div>
    <div class="active-line result-15_5">0</div>
    <div class="active-line result-15_6"></div>
    
    <div class="result-16_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-16_1">16</div>
    <div class="active-line result-16_2">Спецификация мебели, освещения, отделочных материалов</div>
    <div class="active-line result-16_3">650</div>
    <div class="active-line result-16_4"><input class="t-input" ></div>
    <div class="active-line result-16_5">0</div>
    <div class="active-line result-16_6">15</div>
    
   
    <div class="result-title-2"></div>
    <div class="result-title-2"></div>
    <div class="result-title-2"></div>
    <div class="result-title-2"></div>
    <div class="result-title-2 txtmode">Кол-во мес.</div>
    <div class="result-title-2"></div>
    <div class="result-title-2"></div>
    
    <div class="result-17_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-17_1">17</div>
    <div class="active-line result-17_2">Авторское сопровождение 1 месяц</div>
    <div class="active-line result-17_3"></div>
    <div class="active-line result-17_4"><input class="t-input" ></div>
    <div class="active-line result-17_5"></div>
    <div class="active-line result-17_6"></div>
    
    <div class="result-18_0"><div class="active-line boxes"></div></div>
    <div class="active-line result-18_1">18</div>
    <div class="active-line result-18_2">Комплектация</div>
    <div class="active-line result-18_3">10% от сметы проекта</div>
    <div class="active-line result-18_4"><input class="t-input" ></div>
    <div class="active-line result-18_5">10% от сметы проекта</div>
    <div class="active-line result-18_6"></div>
    

    
    <div class="result-title-3"></div>
    <div class="result-title-3"></div>
    <div class="result-title-3"></div>
    <div class="result-title-3"></div>
    <div class="result-title-3 txtmode"></div>
    <div class="result-title-3"></div>
    <div class="result-title-3"></div>
    

    
    
    
    <div class="result-summ1_0"></div>
    <div class="result-summ1_1"></div>
    <div class="result-summ1_2">Стоимость дизайн-проекта с комплектацией:</div>
    <div class="result-tf_5"></div>
    <div class="result-tf_3"></div>
    <div class="result-summ1_5"></div>
    <div class="result-summ1_6"></div>
    
    
    
    <div class="result-summ1_0"></div>
    <div class="result-summ1_1"></div>
    <div class="result-summ1_2">Стоимость дизайн-проекта с авторским надзором и комплектацией:</div>
    <div class="result-summ1_3"></div>
    <div class="result-summ2_3"></div>
    <div class="result-summ1_5"></div>
    <div class="result-summ1_6"></div>
    
    
    
    <div class="result-srok1_0"></div>
    <div class="result-srok1_1"></div>
    <div class="result-srok1_2">Срок исполнения:</div>
    <div class="result-srok1_3"></div>
    <div class="result-srok2_3"></div>
    <div class="result-srok1_5"></div>
    <div class="result-srok1_6"></div>
    
    
    
    
    
</div>`;

// Добавляем таблицу
setTimeout(function(){
    $('.uc-calc-design .t-form__screen-wrapper:eq(1)').append(resultTable);
}, 2000);

//Разрядность чисел
function divide(x, delimiter) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
};


//При изменении в полях ввода первого шага
$('.uc-calc-design').on('input', 'input[name="square"] , input[name="month"] ', function(){
    
    //Получаем ввод на первом шаге
    let square = +$('input[name="square"]').val();
    let month = +$('input[name="month"]').val();
    
    
    //Простовляем площадь во все поля ввода для площади
    $('.uc-calc-design .result-wrapper input').val(square);
    
    //Проставляем месяц в 17 и 18 строку
    $('.result-17_4 input').val(month);
    $('.result-18_4 input').val(month);
    
    //Считаем площадь для Чертежи раскладки плитки
    $('.result-14_4 input').val(20);
    //Считаем площадь для Развертки стен
    $('.result-13_4 input').val(square-20);
    
    
});


//Функция суммирования позиций в таблице
function summTable(){
    
    //Получаем ввод на первом шаге
    let square = +$('input[name="square"]').val();
    let month = +$('input[name="month"]').val();
    
    
    //Простовляем площадь в поле итога
    $('.result-tf_4').text(square);

    //Считаем Срок исполнения, раб.дней  3, 13, 16 строка
    $('.result-03_6').text( (4*(square/30)).toFixed() );
    $('.result-13_6').text(  ((square-20)/30).toFixed() );
    $('.result-14_6').text( ( 20/6 ).toFixed() );
    
    
    let daySumm = 0;
    let cost = 0;
    
    //Суммируем дни до 14 строки
    for (let i = 1; i <= 14; i++) { 
        let num = '0';
        if(i>9) num='';
        num = num+i;
        
        daySumm += +$('.result-'+num+'_6.active-line').text();

    };
    //Выводим итог суммы всех дней
    $('.result-tf_6').text(daySumm+3);
    
    //Суммируем Стоимсть за кв.м 
    for (let i = 1; i <= 16; i++) { 
        let num = '0';
        if(i>9) num='';
        num = num+i;
        cost += +($('.result-'+num+'_3.active-line').text().replace(/[^+\d]/g, ''));
    };
    
    //Выводим Стоимсть за кв.м 
    
    $('.result-tf_3').text(  divide(cost - (+$('.result-14_3.active-line').text())) );
    
    //Считаем Авторское сопровождение 1 месяц
    $('.result-17_3').text( divide( 350*square ) );
    
    
    //Считаем Итог с учётом полей ввода
    let summa = 0;
    for (let i = 1; i <= 16; i++) { 
        let num = '0';
        if(i>9) num='';
        num = num+i;
        
        let nominal = +($('.result-'+num+'_3').text().replace(/[^+\d]/g, '')  );
        let quant = +($('.result-'+num+'_4 input').val().replace(/[^+\d]/g, '')   );
        
        let nominalX = +($('.result-'+num+'_3.active-line').text().replace(/[^+\d]/g, '')  );
        
        let quantX = $('.result-'+num+'_4.active-line input').val();
        
        if(quantX==undefined) quantX = '0';
        
        
        
        quantX = +(  quantX.replace(/[^+\d]/g, '')   );
        
        $('.result-'+num+'_5').text( divide( nominal*quant ) );
        
        summa+= nominalX*quantX;
    };
    //Выводим стоимость Итого столбца
    $('.result-tf_5').text( divide( summa ) );
    
    //Считаем Авторское сопровождение 1 месяц итог
    let oneMonth = 350*square* (+$('.result-17_4 input').val());
    $('.result-17_5').text( divide( oneMonth  ) );
    
    
    //Сумма за дизайн проект ИТОГО:
    $('.result-summ1_3').text( divide( summa+    +($('.result-17_5.active-line').text().replace(/[^+\d]/g, '')  )   ) );
    
    //Сумма за дизайн проект за 1 кв.м.:
    $('.result-summ2_3').text( divide(  ((summa+oneMonth)/square).toFixed(0)   ) );
    
    //Срок исполнения дней:
    $('.result-srok1_3').text( divide( daySumm+3 ) );
    
    //Срок исполнения месяцев:
    $('.result-srok2_3').text( divide( ((daySumm+3)/20).toFixed(1)  ) );
    
    
      
};


//При изменении в полях ввода 
$(document).on('input', 'input[name="square"] , input[name="month"] ,  .uc-calc-design .result-wrapper input', function(){
    this.value = this.value.replace(/[^0-9]/g, '');
    
    console.log(123);
    summTable();
});


//При клике на чекбокс таблицы

$('.uc-calc-design').on('click', '.boxes', function(){
    
    $(this).toggleClass('active-line');
    
    let classAttr = $(this).parent('div').attr('class');
    
    classAttr = '.'+classAttr.split('_')[0];

    
    $(classAttr+'_1').toggleClass('active-line');
    $(classAttr+'_2').toggleClass('active-line');
    $(classAttr+'_3').toggleClass('active-line');
    $(classAttr+'_4').toggleClass('active-line');
    $(classAttr+'_5').toggleClass('active-line');
    $(classAttr+'_6').toggleClass('active-line');
    
    summTable();
 
});

//При клике на кнопку далее
$('.uc-calc-design').on('click', '.t-form__screen-btn-next , .t-form__screen-btn-prev', function(){
    
    
    setTimeout(function(){
    
        //Вычисляем номер шага
        let step = +$('.uc-calc-design .t-form__screen-number_opacity').text();
        
        //Если это последний шаг, то запоняем форму итоговыми параметрами
        
        if(step==3){
            
            let result = '';
            
            for (let i = 1; i <= 18; i++) { 
                let num = '0';
                if(i>9) num='';
                num = num+i;
                
                let number = +$('.result-'+num+'_1.active-line').text();
                
                if(number!=0){
                    let col = $('.result-'+num+'_4.active-line input').val();
                    result+= '№'+number+'= '+col+'; ';
                };
            };
            
            let sm = $('.result-summ1_3').text();
            let srk = $('.result-srok1_3').text();
            
            
            result +='|| Стоимость= '+sm+' || Срок= '+srk;
            
            $('input[name="result"]').val(result);
            
            
            $('.t696__form-bottom-text').show();    
              
        }else{
            $('.t696__form-bottom-text').hide();  
        };
        
    
    }, 1000);
    
    
    
    
});




});    
</script>



<style>

.result-wrapper {
    display: grid;
    grid-template-columns: 45px 45px 1fr 100px 100px 100px 130px;
    font-size: 13px;
    overflow: auto;
    padding: 5px;
    box-sizing: border-box;
}    

.uc-calc-design  .t-form__inputsbox {
    max-width: none;
}

.result-title {
    background-color: #e2e2e2;
}

.result-wrapper>div {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8px 5px;
    /*box-shadow: 0 0 0 1px #d1d1d1;*/
    margin-left:1px;
    margin-top:1px;
    
}

div[class^="result-separator_"],
.result-wrapper>div.result-title-2{
    box-shadow: none;
}

.result-wrapper>div[class^="result-summ"],
.result-wrapper>div[class^="result-srok"]

{
    box-shadow: none;
}

.result-wrapper>div.result-separator_2,
.result-wrapper>div.result-title-2.txtmode


{
    /*box-shadow: 0 0 0 1px #d1d1d1;*/
    font-weight: 600;
}

.result-wrapper>div.result-tf_3,
.result-wrapper>div.result-tf_4,
.result-wrapper>div.result-tf_5,
.result-wrapper>div.result-tf_6
{
  
    font-weight: 600;
}


.result-wrapper>div.result-summ1_2,
.result-wrapper>div.result-summ1_3,
.result-wrapper>div.result-summ2_2,
.result-wrapper>div.result-summ2_3,
.result-wrapper>div.result-srok1_2,
.result-wrapper>div.result-srok1_3,
.result-wrapper>div.result-srok2_2,
.result-wrapper>div.result-srok2_3
{
    /*box-shadow: 0 0 0 1px #d1d1d1;*/
    font-weight: 600;
}

.result-wrapper>div.result-summ1_2,
.result-wrapper>div.result-summ2_2,
.result-wrapper>div.result-srok1_2,
.result-wrapper>div.result-srok2_2
{
    justify-content: flex-end;
    padding-right: 5px;
    justify-content: flex-start;
    padding-right: 5px;
    text-align: left;
}


.uc-calc-design .result-wrapper input {
    box-shadow: 0 0 0 1px #c1bbb7;
    height: 30px;
    width: 55px;
    border-radius: 5px;
    background-color: #f7f7f7;
    font-size: 12px;
    padding: 0 10px;
    text-align: center;
}


.result-wrapper>div.result-tf_0,
.result-wrapper>div.result-tf_1,
.result-wrapper>div.result-tf_2,
.result-wrapper>div.result-17_6,
.result-wrapper>div.result-18_6

{
    box-shadow: none;
}


.result-wrapper>div.result-01_2,
.result-wrapper>div.result-02_2,
.result-wrapper>div.result-03_2,
.result-wrapper>div.result-04_2,
.result-wrapper>div.result-05_2,
.result-wrapper>div.result-06_2,
.result-wrapper>div.result-07_2,
.result-wrapper>div.result-08_2,
.result-wrapper>div.result-09_2,
.result-wrapper>div.result-10_2,
.result-wrapper>div.result-11_2,
.result-wrapper>div.result-12_2,
.result-wrapper>div.result-13_2,
.result-wrapper>div.result-14_2,
.result-wrapper>div.result-15_2,
.result-wrapper>div.result-16_2,
.result-wrapper>div.result-17_2,
.result-wrapper>div.result-18_2


{
    justify-content: flex-start;
    text-align: left;
}




.result-wrapper>div[class*="_3"]:after, 
.result-wrapper>div[class*="_5"]:after {
    content: " ₽";
    padding-left: 3px;
}


.result-wrapper>div.result-separator_3:after,
.result-wrapper>div.result-separator_5:after,
.result-wrapper>div.result-18_3:after,
.result-summ1_5:after, 
.result-summ2_5:after, 
.result-srok1_5:after,
.result-srok2_5:after,
.result-srok1_3:after,
.result-srok2_3:after,
.result-18_5:after
{
display:none;
    
}

.boxes {
    width: 16px;
    height: 16px;
    background-image: url(https://static.tildacdn.com/tild6533-3836-4564-b565-306334393164/Vector_3.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.6;
    cursor: pointer;
}

.active-line.boxes {
    background-image: url(https://static.tildacdn.com/tild3261-3164-4761-a332-363665666133/Vector_4.svg);
}


.result-01_0 .boxes,
.result-02_0 .boxes {
    background-image: none;
    pointer-events: none;
}



div[class*="result-0"], div[class*="result-1"] {
    opacity: 0.3;
}


div[class*="result-0"].active-line, div[class*="result-1"].active-line {
    opacity: 1;
}

.result-wrapper>div[class*="_0"] {
    opacity: 1;
}

.uc-calc-design .t-input-group.t-input-group_tx {
    /*display: none;*/
}



.result-srok1_3,
.result-srok2_3{
    position: relative;
}


#allrecords  .result-srok1_3:after {
    content: "дней";
    position: absolute;
    display: block;
    font-size: 10px;
    bottom: -5px;
    font-weight: 300;
}

#allrecords  .result-srok2_3:after {
    content: "месяцев";
    position: absolute;
    display: block;
    font-size: 10px;
    bottom: -5px;
    font-weight: 300;
}


.result-title-3.txtmode {
    font-weight: 600;
}


.result-title-3.txtmode {
    height: 20px;
}




@media screen and (max-width:640px){
.t696__title{
    font-size:26px !important;
}

.t696__descr{
    font-size:18px !important;
}  
.t696  button.t-btn ,
    .t696  button.t-submit {
    font-size: 12px;
    height: 35px;
    padding: 0 15px;
}

}

.result-wrapper>div.result-tf_3:after,
.result-wrapper>div.result-summ2_3:after

{
    content: " ₽/кв.м.";
 
}

.t696__form-bottom-text {
    display: none;
}

</style>