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

<script>
(function () { 
    var form = document.querySelector('.percent-form');
    if (!form) return;

    var curPrice = 0, curArea = 0;

  
    function fmtShort(v) {
        if (v >= 1e6) return (v / 1e6).toFixed(1).replace('.', ',') + ' млн';
        if (v >= 1e3) return Math.round(v / 1e3) + 'к';
        return Math.round(v).toString();
    }

    function updatePercent() {
        var percentField = form.querySelector('[name="percent-flow"]');
        var percentValue = percentField ? percentField.value : '';

        var tRec = form.closest('.t-rec');
        if (!tRec) return;

        var targetEl = tRec.querySelector('.percent .tn-atom');
        if (targetEl) {
            targetEl.textContent = percentValue;
        }
    }

    function calc() {
        var activeBtn = document.querySelector('[class*="apart_btn_"].active-apart');
        if (!activeBtn) return;

        curPrice = parseFloat(activeBtn.getAttribute('data-price')) || 0;
        curArea = parseFloat(activeBtn.getAttribute('data-area')) || 0;

        var percentField = form.querySelector('[name="percent-flow"]');
        var occ = percentField ? parseInt(percentField.value, 10) : 0;

        var yearGross = curArea * 95 * 365 * (occ / 100);
        var yearNet = yearGross * 0.62;
        var monthNet = yearNet / 12;
        var priceRub = curPrice * 1e6;

        var tRec = form.closest('.t-rec');
        if (!tRec) return;

        var rMonth = tRec.querySelector('.price-month .tn-atom');
        var rYear = tRec.querySelector('.price-year .tn-atom');
        var rRoi = tRec.querySelector('.total-percent .tn-atom');

        if (rMonth) rMonth.textContent = fmtShort(monthNet);
        if (rYear) rYear.textContent = fmtShort(yearNet);
        if (rRoi) rRoi.textContent = ((yearNet / priceRub) * 100).toFixed(1).replace('.', ',') + '%';
    }


    function setActiveApart(clickedBtn) {
        var allBtns = document.querySelectorAll('[class*="apart_btn_"]');
        allBtns.forEach(function(btn) {
            btn.classList.remove('active-apart');
        });
        clickedBtn.classList.add('active-apart');
        calc();
    }

   
    var firstBtn = document.querySelector('.apart_btn_1');
    if (firstBtn) {
        firstBtn.classList.add('active-apart');
    }


    var allBtns = document.querySelectorAll('[class*="apart_btn_"]');
    allBtns.forEach(function(btn) {
        btn.addEventListener('click', function() {
            setActiveApart(this);
        });
    });

    form.addEventListener('render', function() {
        console.log('Форма загружена');

        setTimeout(function() {
            var percentField = form.querySelector('[name="percent-flow"]');
            if (percentField) {
                percentField.addEventListener('input', function() {
                    updatePercent();
                    calc();
                });
            }
            updatePercent();
            calc();
        }, 1000);
    });
})();
</script>




<style>
.percent-form .t-range__value-txt {
    display: none !important
}

.percent-form .t-range__interval-txt-wrapper {
    display: none;
}


div[class*="apart_btn_"]{
    cursor: pointer;
}


.active-apart .tn-molecule {
    background-color: #1c1a14 !important;
}


#allrecords .t-rec .active-apart .tn-atom,
#allrecords .t-rec .active-apart .tn-atom span.tn-atom__button-text
{
    color: #fff;
}

</style>