const progress = document.getElementById("calc-progress");const steps = document.querySelectorAll(".calc-step-wrap");const totalSteps = steps.length;const stepLabelWraps = document.querySelectorAll(".step-label-wrap");let currentStep = 0;const moveStep = function () {/*hide all steps*/ steps.forEach((step) => {step.classList.add("hide");});/*show current step*/ steps[currentStep].classList.remove("hide");/*set progress bar value*/ progress.value =(100 / (totalSteps - 1)) * currentStep;/*highlight matching dots and hide all labels*/ stepLabelWraps.forEach((wrap, index) => {wrap.querySelector(".calc-step-label").style.opacity = "0";if (currentStep >= index) {wrap.querySelector(".calc-step-dot").classList.add("active");} else {wrap.querySelector(".calc-step-dot").classList.remove("active");}},);/*highlight current label*/ stepLabelWraps[currentStep].querySelector(".calc-step-label",).style.opacity = "1";calculator();document.querySelector("#calculator").scrollIntoView({ behavior: "smooth" });};const calculator = function () {/*give rooftype texts the value of selected rooftype*/ document.querySelectorAll("[rooftype-text]").forEach((text) => {text.textContent = document.querySelector('input[type="radio"][name="rooftype"]:checked',)?.value;});/*calculate and show result $value*/ const sqFt =document.getElementById("Roof-sqft")?.value;const pricePerSqFt = document?.querySelector("[data-per-sq-ft]:checked")?.getAttribute("data-per-sq-ft");const percIncrease = [...document.querySelectorAll("[data-percentage-increase]:checked"),].reduce((acc, el) => acc + +el.dataset.percentageIncrease, 0);const finalPrice =Number(sqFt) * Number(pricePerSqFt) * (1 + percIncrease / 100);document.getElementById("calc-result").textContent =new Intl.NumberFormat().format(Math.round((finalPrice + Number.EPSILON) * 100) / 100,);};document.addEventListener("click", (ev) => {if (!ev.target.hasAttribute("calc-button")) {return;}if (ev.target.getAttribute("calc-button") === "next") {/*if moving forward, check validity of all current inputs*/ const elementsToValidate =steps[currentStep].querySelectorAll("input, select, textarea");/*go over each input and check validity - break if some are not*/ for (let i = 0;i < elementsToValidate.length;i++){if (!elementsToValidate[i].checkValidity()) {elementsToValidate[i].reportValidity();break;}/*only when all inputs are valid, continue to next step*/ if (i ===elementsToValidate.length - 1){currentStep++;moveStep();}}} else if (ev.target.getAttribute("calc-button") === "prev") {currentStep--;moveStep();}});/*prevets submitting the form with keyboard*/ document.getElementById("calc-form").addEventListener("keydown", function (event) {if (event.key === "Enter") {event.preventDefault();}});moveStep();let url = new URL(window.location.href);if (url.searchParams.has("roof")) {/*scroll to the calculator and select the corresponsing radio */ document.getElementById(url.searchParams.get("roof"))?.click();document.querySelector(url.hash).scrollIntoView();/*go to second step*/ document.querySelector('[calc-button="next"]').click();}