1<section id="section1" class="bg-light1 cred-sim">
2 <div class="container-fluid container1200">
3 <div class="col-sm-12">
4 <h3>${titleSimulateYourMortgage.getData()}</h3>
5 <form class="form-horizontal cred-sim">
6 <div class="form-group">
7 <label for="selectField" class="col-sm-6 control-label">${labelINeedTheCreditFor.getData()}</label>
8 <div class="col-sm-6">
9 <select class="form-control" id="selectField">
10 <option>${selectPurchase.getData()}</option>
11 </select>
12 </div>
13 </div>
14 <div class="form-group">
15 <label class="col-sm-6 control-label">${labelCalculateMy.getData()}</label>
16 <div class="input-wrapper col-sm-6">
17 <div class="radio-button"><input type="radio" name="whattocalculate" required="" value="loanAmount" onclick="updateInputFieldLabel()"> <label>${radioLoanAmount.getData()}</label>
18
19 </div>
20 <div class="radio-button"><input type="radio" name="whattocalculate" required="" value="monthlyPayment" onclick="updateInputFieldLabel()"> <label>${radioDownPayment.getData()}</label>
21 </div>
22 </div>
23 <div class="col-sm-6"></div>
24 <div class="col-sm-6 control-label validation-message" id="radioWarningMessage" style="display:none; color:red;"></div>
25 </div>
26 <div class="form-group" id="inputFieldContainer" style="display: none;">
27 <label for="inputFieldValue" class="col-sm-6 control-label" id="inputFieldLabel">${LabelLoanTerm.getData()}</label>
28 <div class="col-sm-6">
29 <input type="text" class="form-control" id="inputFieldValue">
30 </div>
31 <div class="col-sm-6"></div>
32 <div class="col-sm-6 control-label validation-message" id="inputValueWarningMessage" style="display:none; color:red;"></div>
33 </div>
34 <div class="form-group">
35 <label for="inputFieldPeriod" class="col-sm-6 control-label">${LabelLoanTerm.getData()}</label>
36 <div class="col-sm-6">
37 <input type="text" class="form-control" id="inputFieldPeriod">
38 </div>
39 <div class="col-sm-6"></div>
40 <div class="col-sm-6 control-label validation-message" id="inputPeriodWarningMessage" style="display:none; color:red;"></div>
41 </div>
42 <div class="button-wrapper">
43 <div class="btn-default btn-lg" onclick="validateAndShowResult()">${buttonSimulate.getData()}<i class="fas fa-chevron-right"></i></div>
44 </div>
45 </form>
46 </div>
47 </div>
48</section>
49<section id="section2" class="bg-light1 cred-sim" style="display: none;">
50 <div class="container-fluid container1200">
51 <div class="col-sm-12">
52 <div class="back">
53 <a href="#" onclick="showForm()">${buttonBack.getData()}</a>
54 </div>
55 <h3>${titleSimulationLoanAmount.getData()}</h3>
56 <div class="slider-container" id="sliderContainer">
57 <div class="limits">
58 <div>${rangeMinYears.getData()}</div>
59 <div>${rangeMaxYears.getData()}</div>
60 </div>
61 <input type="range" class="slider" id="rangeSlider" min="10" max="40" step="5" value="20">
62 <div class="dots">
63 <div class="dot" data-value="10"></div>
64 <div class="dot" data-value="15"></div>
65 <div class="dot" data-value="20"></div>
66 <div class="dot" data-value="25"></div>
67 <div class="dot" data-value="30"></div>
68 <div class="dot" data-value="35"></div>
69 <div class="dot" data-value="40"></div>
70 </div>
71 <div class="values">
72 <div class="value-pos" id="prevValuePos">
73 <div class="slider-value">${loanTerm.getData()} <span><span id="prevValue"></span> ${year.getData()}</span></div>
74 <div class="extra-value" id="prevExtraValue"></div>
75 </div>
76 <div class="value-pos" id="currentValuePos">
77 <div class="slider-value" >${loanTerm.getData()} <span><span id="currentValue"></span> ${year.getData()}</span></div>
78 <div class="extra-value" id="currentExtraValue"></div>
79 <div class="triangle"></div>
80 </div>
81 <div class="value-pos" id="nextValuePos">
82 <div class="slider-value" >${loanTerm.getData()} <span><span id="nextValue"></span> ${year.getData()}</span></div>
83 <div class="extra-value" id="nextExtraValue"></div>
84 </div>
85 </div>
86 </div>
87 </div>
88 </div>
89</section>
90<section id="section3" class="bg-dark cred-sim" style="display: none;">
91 <div class="container-fluid container1200">
92 <div class="col-sm-6 col-sm-push-6">
93 <div id="pie-chart-1" class="pie-chart">
94 <div class="pie-wrapper">
95 <div class="pie" id="dynamicPieChart">
96 <div><span>${total.getData()}</span>
97 <h4 id="totalCost"></h4>
98 </div>
99 </div>
100 </div>
101 <div class="one-column-legend">
102 <div class="legend-item legend-item-value1">
103 <div class="legend-item-left">
104 <span id="summaryLoanAmountPieChart"></span>
105 <span class="dash">-</span>
106 <span>${loanAmount.getData()}</span>
107 </div>
108 </div>
109 <div class="legend-item legend-item-value2">
110 <div class="legend-item-left">
111 <span id="summaryTotalInterestPieChart"></span>
112 <span class="dash">-</span>
113 <span>${totalInterestPaid.getData()}</span>
114 </div>
115 </div>
116 <div class="legend-item">
117 <span>${interestRate.getData()} - </span>
118 <span id="summaryInterestRate"></span>
119 <!-- This is empty because it otherwise breaks the HTML structure if deleted. I have no idea why it happens, but I am leaving it like this hoping it holds together by the power of magic. -->
120 <button id="monthlyInterestTooltip" class="lfr-portal-tooltip btn-tooltip" data-html="true" data-tooltip-align="top" data-tooltip-delay="0" type="button" title="">
121
122 </button>
123 </div>
124 <div class="legend-item">
125 <span>${apr.getData()} - </span>
126 <span id="summaryJkp"></span>
127 <button id="jkpTooltip" class="lfr-portal-tooltip btn-tooltip" data-html="true" data-tooltip-align="top" data-tooltip-delay="0" type="button" title="">
128 <i class="far fa-info-circle"></i>
129 </button>
130 </div>
131 </div>
132 </div>
133 <div>${inaccuracyWarning.getData()}</div>
134 </div>
135 <div class="col-sm-6 col-sm-pull-6">
136 <div class="overview">
137 <div class="overview-title-1">${youPay.getData()}</div>
138 <div class="overview-value-1" id="summaryMonthlyPayment"></div>
139 <div class="overview-label-1">${perMonth.getData()}</div>
140 <div class="overview-value-2" id="summaryTotalInterest"></div>
141 <div class="overview-label-2">${onTotalInterest.getData()}</div>
142 <div class="overview-value-3" id="summaryTotalCost"></div>
143 <div class="overview-label-3">${inTotalToBank.getData()}</div>
144 <div class="overview-title-2">${youBorrow.getData()}</div>
145 <div class="overview-value-4" id="summaryLoanAmount"></div>
146 <div class="overview-label-5">${over.getData()}</div>
147 <div class="overview-value-5" id="summaryPeriod"></div>
148 <a id="buttonSkedify" class="btn" href="/verzekeringen/afspraak?cid=CreditSimulator" >${buttonMakeAnAppointment.getData()} <i class="far fa-calendar-alt"></i></a>
149 </div>
150 </div>
151 </div>
152</section>
153<style>
154 /*-<<< START input >>>-*/
155 .form-horizontal.cred-sim {
156 max-width: 900px;
157 margin: 50px auto;
158 }
159 #wrapper .cred-sim .form-control {
160 font-size: 16px;
161 height: 48px;
162 font-weight: bold;
163 }
164 #wrapper .cred-sim label {
165 font-size: 16px;
166 }
167 .form-horizontal.cred-sim .control-label {
168 font-weight: normal;
169 }
170 .btn-group .btn {
171 margin-right: 5px; /* Adjust spacing between buttons */
172 }
173
174 .btn-group .btn:last-child {
175 margin-right: 0; /* Remove margin from the last button */
176 }
177 .input-wrapper {
178 display: grid;
179 grid-template-columns: 1fr 1fr;
180 column-gap: 16px;
181 }
182 .radio-button {
183 display: grid;
184 height: 48px;
185 border: 1px solid #cecece;
186 background-color: #ffffff;
187 border-radius: 4px;
188 }
189 .radio-button input {
190 width: 100%;
191 height: 100%;
192 opacity: 0;
193 grid-row: 1;
194 grid-column: 1;
195 }
196 .radio-button label {
197 margin-bottom: 0;
198 line-height: 1;
199 padding-left: var(--spacer-2);
200 padding-right: var(--spacer-2);
201 grid-row: 1;
202 grid-column: 1;
203 text-align: center;
204 align-self: center;
205 border: 1px solid transparent;
206 border-radius: var(--border-radius-sm);
207 font-weight: normal;
208 }
209 .radio-button:has(input:checked) {
210 border: 2px solid #870930;
211 }
212 .radio-button:has(input:checked) label {
213 font-weight: bold;
214 color: #870930;
215 }
216 .cred-sim .button-wrapper {
217 justify-content: end;
218 display: flex;
219 margin-top: 40px;
220 }
221 #wrapper .cred-sim .btn-default {
222 color: #fff;
223 border-radius: 4px;
224 padding: 12px 16px;
225 display: flex;
226 gap: 12px;
227 align-items: center;
228 border-width: 1px;
229 }
230 #wrapper .cred-sim .btn-default:hover {
231 background-color: #4c0219;
232 border-color: #4c0219;
233 }
234 @media only screen and (min-width : 768px) {
235 .form-horizontal.cred-sim .control-label {
236 text-align: left;
237 }
238 }
239 /*-<<< STOP input >>>-*/
240
241 /*-<<< START slider >>>-*/
242 #wrapper .bg-light1.cred-sim {
243 padding-top: 25px;
244 padding-bottom: 0;
245 }
246 .back {
247 display: flex;
248 justify-content: start;
249 }
250 .back a {
251 display: flex;
252 align-items: center;
253 color: #4d4d4d;
254 gap: 8px;
255 font-size: 18px;
256 }
257 .back a::before {
258 content: "";
259 width: 13px;
260 height: 13px;
261 transform: rotate(45deg);
262 border: 3px solid transparent;
263 border-bottom-color: #ff6600;
264 border-left-color: #ff6600;
265 display: inline-block;
266 }
267 .slider-container {
268 width: calc(100% - 40px);
269 margin: 100px auto -1px;
270 position: relative;
271 }
272 .limits {
273 position: absolute;
274 top: -50px;
275 display: flex;
276 justify-content: space-between;
277 width: 100%;
278 color: #870930;
279 opacity: 0.7;
280 }
281 .slider {
282 width: 100%;
283 -webkit-appearance: none;
284 appearance: none;
285 height: 4px;
286 background: #DBB5C1;
287 outline: none;
288 opacity: 1;
289 transform: translateY(-10px) ;
290 }
291 .slider::-webkit-slider-thumb {
292 -webkit-appearance: none;
293 appearance: none;
294 width: 60px;
295 height: 60px;
296 background: transparent;
297 cursor: pointer;
298 box-shadow: none;
299 }
300 .slider::-moz-range-thumb {
301 width: 60px;
302 height: 60px;
303 background: transparent;
304 cursor: pointer;
305 appearance: none;
306 border-width: 0;
307 }
308 .slider::before {
309 display: none;
310 }
311 .values {
312 position: relative;
313 color: #870930;
314 font-weight: 400;
315 }
316 .values:after {
317 content: "";
318 display: block;
319 clear: both;
320 height: 60px;
321 }
322 .value-pos{
323 position: absolute;
324 display: flex;
325 flex-direction: column;
326 align-items: center;
327 transform: translatex(-50%);
328 }
329 .value-pos:not(#currentValuePos) {
330 visibility: hidden;
331 }
332 .slider-value {
333 display: flex;
334 flex-direction: column;
335 align-items: center;
336 width: max-content;
337 margin-top: 25px;
338 margin-bottom: 5px;
339 opacity: 0.7;
340 }
341 .extra-value {
342 text-align: center;
343 opacity: 0.7;
344 width: max-content;
345 color: #4c0219;
346 font-weight: bold;
347 margin-bottom: 25px;
348 }
349 div#currentValue,
350 div#currentExtraValue {
351 opacity: 1;
352 }
353 .triangle {
354 width: 0;
355 height: 0;
356 border-left: 14px solid transparent;
357 border-right: 14px solid transparent;
358 border-bottom: 18px solid #870930;
359 }
360 .dots {
361 position: absolute;
362 top: -13px;
363 width: 100%;
364 display: flex;
365 justify-content: space-between;
366 align-items: center;
367 pointer-events: none;
368 }
369 .dot {
370 width: 10px;
371 height: 10px;
372 background-color: #DBB5C1;
373 border-radius: 50%;
374 }
375 .dot.current {
376 background-color: #870930;
377 transform: scale(4);
378 display: flex;
379 justify-content: center;
380 align-items: center;
381 }
382 .dot.current::before {
383 content: "";
384 width: 14px;
385 height: 14px;
386 transform: rotate(45deg) scale(0.16);
387 border: 3px solid transparent;
388 border-bottom-color: white;
389 border-left-color: white;
390 display: inline-block;
391 position: absolute;
392 right: -1px;
393 }
394 .dot.current::after {
395 content: "";
396 width: 14px;
397 height: 14px;
398 transform: rotate(45deg) scale(0.16);
399 border: 3px solid transparent;
400 border-top-color: white;
401 border-right-color: white;
402 display: inline-block;
403 position: absolute;
404 left: -1px;
405 }
406 section.bg-dark.cred-sim {
407 padding-top: 25px;
408 }
409 section.bg-dark.cred-sim p {
410 font-weight: 100;
411 }
412 section.bg-dark.cred-sim h4 {
413 margin-bottom: 15px;
414 }
415 section.bg-dark.cred-sim .col-sm-6 {
416 margin: 40px 0;
417 }
418 #wrapper .btn#buttonSkedify {
419 border-radius: 4px;
420 padding: 12px 16px;
421 font-size: 1.6rem;
422 display: inline-flex;
423 align-items: center;
424 max-width: fit-content;
425 gap: 12px;
426 }
427 #wrapper .btn#buttonSkedify:hover,
428 #wrapper .btn#buttonSkedify:active,
429 #wrapper .btn#buttonSkedify:focus {
430 color: #f2e9ec;
431 border-color: #f2e9ec;
432 }
433 .overview {
434 display: grid;
435 grid-template-columns: 1fr 1fr;
436 grid-template-rows: repeat(10, 24px);
437 }
438 [class^="overview-value"] {
439 font-weight: bold;
440 }
441 [class^="overview-label"] {
442 font-size: 14px !important;
443 }
444 .overview-title-1 {
445 grid-column: 1;
446 grid-row: 1;
447 }
448 .overview-value-1 {
449 grid-column: 1;
450 grid-row: 3;
451 }
452 .overview-label-1 {
453 grid-column: 1;
454 grid-row: 4;
455 }
456 .overview-value-2 {
457 grid-column: 1;
458 grid-row: 6;
459 }
460 .overview-label-2 {
461 grid-column: 1;
462 grid-row: 7;
463 }
464 .overview-value-3 {
465 grid-column: 1;
466 grid-row: 9;
467 }
468 .overview-label-3 {
469 grid-column: 1;
470 grid-row: 10;
471 }
472 .overview-title-2 {
473 grid-column: 2;
474 grid-row: 1;
475 }
476 .overview-value-4 {
477 grid-column: 2;
478 grid-row: 3;
479 }
480 .overview-label-5 {
481 grid-column: 2;
482 grid-row: 5;
483 }
484 .overview-value-5 {
485 grid-column: 2;
486 grid-row: 6;
487 }
488 #buttonSkedify {
489 grid-column: 2;
490 grid-row: 9 / 12;
491 }
492 @media only screen and (min-width : 768px) {
493 .back {
494 justify-content: end;
495 }
496 .slider-container {
497 width: calc(100% - 150px);
498 }
499 .value-pos:not(#currentValuePos) {
500 visibility: visible;
501 }
502 .dot.previous,
503 .dot.next {
504 transform: scale(2);
505 }
506 section.bg-dark.cred-sim {
507 padding-top: 40px;
508 }
509 section.bg-dark.cred-sim .col-sm-6:first-child {
510 border-left: 1px solid #ffffff;
511 padding-left: 30px;
512 }
513 section.bg-dark.cred-sim .col-sm-6:last-child {
514 padding-right: 30px;
515 }
516 .validation-message {
517 padding-left: 15px;
518 }
519 }
520
521 @media only screen and (min-width : 992px) {
522 .limits {
523 top: -60px;
524 }
525 .value-pos:not(#currentValuePos) {
526 visibility: visible;
527 }
528 .value {
529 margin-top: 40px;
530 }
531 div#currentValue,
532 div#currentExtraValue {
533 font-size: 1.8rem;
534 }
535 .dot.previous,
536 .dot.next {
537 transform: scale(2.6);
538 }
539 .dot.current {
540 transform: scale(6);
541 }
542 section.bg-dark.cred-sim {
543 padding-top: 65px;
544 }
545 section.bg-dark.cred-sim .col-sm-6:first-child {
546 padding-left: 50px;
547 }
548 section.bg-dark.cred-sim .col-sm-6:last-child {
549 padding-right: 50px;
550 }
551 .validation-message {
552 padding-left: 15px;
553 }
554 }
555 @media only screen and (min-width : 1200px) {
556 .slider-container {
557 width: 1000px;
558 }
559 .slider-value {
560 display: block;
561 }
562 div#currentValue,
563 div#currentExtraValue {
564 font-size: 2rem;
565 }
566 section.bg-dark.cred-sim .col-sm-6:first-child {
567 padding-left: 80px;
568 }
569 section.bg-dark.cred-sim .col-sm-6:last-child {
570 padding-right: 80px;
571 }
572 .validation-message {
573 padding-left: 15px;
574 }
575 }
576 /*-<<< STOP slider >>>-*/
577
578 /*-<<< START piechart & legend >>>-*/
579 .pie {
580 height: 230px;
581 width: 230px;
582 border-radius: 50%;
583 background: conic-gradient(#F2E9EC 0% 25%, #C38498 25% 100% );
584 }
585 .pie-chart {
586 margin-bottom: 25px;
587 }
588 .pie-chart .row {
589 align-items: center;
590 }
591 .pie-wrapper {
592 width: 100%;
593 display: flex;
594 justify-content: center;
595 }
596 .no-chart .pie-wrapper {
597 display: none;
598 }
599 .pie {
600 display: flex;
601 justify-content: center;
602 align-items: center;
603 margin-bottom: 25px;
604 }
605 .pie::after {
606 content: '';
607 position: absolute;
608 height: 190px;
609 width: 190px;
610 border-radius: 50%;
611 background-color: #870930;
612 }
613 .pie>div {
614 z-index: 1;
615 text-align: center;
616 margin-top: -2px;
617 }
618 .pie span h4 {
619 margin-bottom: 0;
620 }
621 button.btn-tooltip {
622 background-color: transparent;
623 border-width: 0;
624 }
625 .legend-item {
626 display: flex;
627 align-items: baseline;
628 margin-bottom: 8px;
629 gap: 5px;
630 }
631 .legend-item-left,
632 .legend-item-right {
633 width: 50%;
634 }
635 .one-column-legend {
636 display: grid;
637 grid-template-rows: min-content min-content;
638 justify-content: center;
639 }
640 .one-column-legend .legend-item-left {
641 width: 100%;
642 }
643 .legend-item-left {
644 display: grid;
645 grid-template-columns: min-content min-content min-content auto;
646 align-items: baseline;
647 }
648 .legend-item-left span {
649 margin-left: 8px;
650 }
651 .legend-item-left::before {
652 content: "";
653 width: 12px;
654 height: 12px;
655 border-radius: 50%;
656 }
657 .legend-header .legend-item-left::before {
658 color: transparent;
659 }
660 .legend-item-left::before {
661 font-size: var(--font-size-xs);
662 }
663 .legend-item-value1 .legend-item-left::before {
664 background-color: #F2E9EC;
665 }
666 .legend-item-value2 .legend-item-left::before {
667 background-color: #C38498;
668 }
669 @media only screen and (min-width : 1200px) {
670 .pie-chart {
671 display: grid;
672 grid-template-columns: auto auto;
673 align-items: center;
674 }
675 span.dash {
676 display:none;
677 }
678 .legend-item-left {
679 grid-template-columns: min-content auto;
680 }
681 .legend-item-left span:last-child {
682 grid-row: 2;
683 grid-column: 2;
684 }
685 .pie-wrapper {
686 grid-row: 1;
687 grid-column: 2;
688 }
689 .pie {
690 width: 200px;
691 height: 200px;
692 margin-bottom: 0;
693 }
694 .pie::after {
695 width: 160px;
696 height: 160px;;
697 }
698 .one-column-legend {
699 grid-row: 1;
700 grid-column: 1;
701 padding-right: 20px;
702 }
703 }
704 /*-<<< STOP piechart & legend >>>-*/
705
706
707</style>
708
709<script>
710 let variableForTest = "${selectPurchase.getData()}";
711
712 console.log("VARIABLE FOR TEST", variableForTest);
713
714 let enterLoanAmountLabel;
715 let enterMonthlyPaymentLabel;
716 let calculationTypeWarning;
717 let emptyLoanAmountWarning;
718 let emptyMonthlyPaymentWarning;
719 let invalidLoanAmountWarning;
720 let invalidMonthlyPaymentWarning;
721 let emptyLoanPeriodWarning;
722 let invalidLoanPeriodWarning;
723 let yearLabel;
724 let monthlyInterestTooltipContent;
725 let jkpTooltipContent;
726
727 if (window.location.href.includes("/fr/")) {
728 enterLoanAmountLabel = "Complète le montant que tu souhaites emprunter";
729 enterMonthlyPaymentLabel = "Entre le montant du paiement mensuel";
730 calculationTypeWarning = "Sélectionnez une option pour effectuer le calcul.";
731 emptyLoanAmountWarning = "Choisis une option pour calculer.";
732 emptyMonthlyPaymentWarning = "Indique le montant du paiement mensuel.";
733 emptyLoanPeriodWarning = "Indiquez la période de remboursement du prêt.";
734 invalidLoanAmountWarning = "Le montant du prêt doit être compris entre € 50.000,00 et € 1.000.000,00";
735 invalidMonthlyPaymentWarning = "Le paiement mensuel doit être compris entre € 300,00 et € 2.000,00";
736 invalidLoanPeriodWarning = "La durée d'un prêt peut être seulement de 10, 15, 20, 25, 30, 35 et 40 ans";
737 yearLabel = "Ans";
738 monthlyInterestTooltipContent = "Le tarif proposé ne constitue pas une offre officielle et tient compte de la souscription d'une assurance incendie et solde de dettes auprès de P&V.";
739 jkpTooltipContent = "Le TAEG (taux annuel effectif global) est un indicateur qui vous renseigne sur le coût total du crédit. Il vous aide à comparer les propositions de différents prêteurs.";
740 } else {
741 enterLoanAmountLabel = "Vul het bedrag in dat je wilt lenen";
742 enterMonthlyPaymentLabel = "Vul het maandelijkse bedrag in";
743 calculationTypeWarning = "Kies een optie om te berekenen";
744 emptyLoanAmountWarning = "Voer een leenbedrag in";
745 emptyMonthlyPaymentWarning = "Voer het bedrag in dat je elke maand wilt betalen";
746 emptyLoanPeriodWarning = "Voer in hoe lang je de lening wilt laten duren";
747 invalidLoanAmountWarning = "Het geleende bedrag moet tussen € 50.000,00 en € 1.000.000,00 liggen";
748 invalidMonthlyPaymentWarning = "Het bedrag dat je elke maand betaalt moet tussen € 300,00 en € 2.000,00 liggen";
749 invalidLoanPeriodWarning = "Je kunt een lening afsluiten voor 10, 15, 20, 25, 30, 35 of 40 jaar";
750 yearLabel = "jaar";
751 monthlyInterestTooltipContent = "Het voorgestelde tarief is geen officieel aanbod en houdt rekening met het aansluiten van een brand- en schuldsaldo verzekering bij P&V";
752 jkpTooltipContent = "Het JKP (jaarlijks kostenpercentage) is een indicator die u informeert over de totale kosten van het krediet. Het helpt u om de voorstellen van verschillende kredietverstrekkers te vergelijken.";
753 }
754
755 document.getElementById("monthlyInterestTooltip").title = monthlyInterestTooltipContent;
756 document.getElementById("jkpTooltip").title = jkpTooltipContent;
757
758 const slider = document.getElementById('rangeSlider');
759 const prevValue = document.getElementById('prevValue');
760 const currentValue = document.getElementById('currentValue');
761 const nextValue = document.getElementById('nextValue');
762 const prevExtraValue = document.getElementById('prevExtraValue');
763 const currentExtraValue = document.getElementById('currentExtraValue');
764 const nextExtraValue = document.getElementById('nextExtraValue');
765 const prevValuePos = document.getElementById('prevValuePos');
766 const currentValuePos = document.getElementById('currentValuePos');
767 const nextValuePos = document.getElementById('nextValuePos');
768 const dots = document.querySelectorAll('.dot');
769
770
771 const extraValuesMap = {
772 10: '100,000',
773 15: '150,000',
774 20: '200,000',
775 25: '250,000',
776 30: '300,000',
777 35: '350,000',
778 40: '400,000'
779 };
780
781 function updateInputFieldLabel() {
782 const inputFieldContainer = document.getElementById('inputFieldContainer');
783 const inputFieldLabel = document.getElementById('inputFieldLabel');
784 const loanAmountRadio = document.querySelector('input[name="whattocalculate"][value="loanAmount"]');
785 const monthlyPaymentRadio = document.querySelector('input[name="whattocalculate"][value="monthlyPayment"]');
786
787 inputFieldContainer.style.display = 'block';
788
789 if (loanAmountRadio.checked) {
790 inputFieldLabel.textContent = enterLoanAmountLabel;
791 inputFieldLabel.style.textAlign = 'left';
792 } else if (monthlyPaymentRadio.checked) {
793 inputFieldLabel.textContent = enterMonthlyPaymentLabel;
794 inputFieldLabel.style.textAlign = 'left';
795 }
796
797 document.getElementById('warningMessage').style.display = 'none';
798 document.getElementById('inputWarningMessage').style.display = 'none';
799 }
800
801 function validateAndShowResult() {
802 const loanAmountRadio = document.querySelector('input[name="whattocalculate"][value="loanAmount"]');
803 const monthlyPaymentRadio = document.querySelector('input[name="whattocalculate"][value="monthlyPayment"]');
804 const radioWarningMessage = document.getElementById('radioWarningMessage');
805 const inputValueWarningMessage = document.getElementById('inputValueWarningMessage');
806 const inputPeriodWarningMessage = document.getElementById('inputPeriodWarningMessage');
807
808 const inputFieldValue = document.getElementById('inputFieldValue').value;
809 const inputFieldPeriod = document.getElementById('inputFieldPeriod').value;
810
811 radioWarningMessage.style.display = 'none';
812 inputValueWarningMessage.style.display = 'none';
813 inputPeriodWarningMessage.style.display = 'none';
814
815 if (!loanAmountRadio.checked && !monthlyPaymentRadio.checked) {
816 radioWarningMessage.style.display = 'block';
817 radioWarningMessage.style.textAlign = 'left';
818 radioWarningMessage.textContent = calculationTypeWarning;
819 } else {
820 let isValid = true;
821
822 if (loanAmountRadio.checked && !inputFieldValue) {
823 inputValueWarningMessage.style.display = 'block';
824 inputValueWarningMessage.style.textAlign = 'left';
825 inputValueWarningMessage.textContent = emptyLoanAmountWarning;
826 isValid = false;
827 } else if (monthlyPaymentRadio.checked && !inputFieldValue) {
828 inputValueWarningMessage.style.display = 'block';
829 inputValueWarningMessage.style.textAlign = 'left';
830 inputValueWarningMessage.textContent = emptyMonthlyPaymentWarning;
831 isValid = false;
832 } else {
833 if (loanAmountRadio.checked) {
834 const valueNumber = Number(inputFieldValue);
835 if (isNaN(valueNumber) || valueNumber < 50000 || valueNumber > 1000000) {
836 inputValueWarningMessage.style.display = 'block';
837 inputValueWarningMessage.style.textAlign = 'left';
838 inputValueWarningMessage.textContent = invalidLoanAmountWarning;
839 isValid = false;
840 }
841 } else {
842 const valueNumber = Number(inputFieldValue);
843 if (isNaN(valueNumber) || valueNumber < 300 || valueNumber > 2000) {
844 inputValueWarningMessage.style.display = 'block';
845 inputValueWarningMessage.style.textAlign = 'left';
846 inputValueWarningMessage.textContent = invalidMonthlyPaymentWarning;
847 isValid = false;
848 }
849 }
850 }
851
852 const validPeriods = [10, 15, 20, 25, 30, 35, 40];
853 if (!inputFieldPeriod) {
854 inputPeriodWarningMessage.style.display = 'block';
855 inputPeriodWarningMessage.style.textAlign = 'left';
856 inputPeriodWarningMessage.textContent = emptyLoanPeriodWarning;
857 isValid = false;
858 } else {
859 const periodValue = Number(inputFieldPeriod);
860 if (!validPeriods.includes(periodValue)) {
861 inputPeriodWarningMessage.style.display = 'block';
862 inputPeriodWarningMessage.style.textAlign = 'left';
863 inputPeriodWarningMessage.textContent = invalidLoanPeriodWarning;
864 isValid = false;
865 }
866 }
867
868 if (isValid) {
869 document.getElementById('section1').style.display = 'none';
870 document.getElementById('section2').style.display = 'block';
871 document.getElementById('section3').style.display = 'block';
872
873 showResult(true);
874 }
875 }
876 }
877
878 function formatCurrency(value, isFrenchLanguage) {
879 if (!isFrenchLanguage) {
880 let [integerPart, decimalPart] = Number(value).toFixed(2).split('.');
881 integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
882
883 return integerPart + ',' + decimalPart;
884 } else {
885 let [integerPart, decimalPart] = Number(value).toFixed(2).split('.');
886 integerPart = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
887
888 return integerPart + ',' + decimalPart;
889 }
890 }
891
892 function updateValues() {
893 const current = parseInt(slider.value);
894 const next = current + 5 <= 40 ? current + 5 : '';
895 const prev = current - 5 >= 10 ? current - 5 : '';
896 prevValue.textContent = prev ? prev : '';
897 currentValue.textContent = current ? current : '';
898 nextValue.innerHTML = next ? next : '';
899 prevExtraValue.textContent = prev ? "€ " + extraValuesMap[prev] : '';
900 currentExtraValue.textContent = current ? "€ " + extraValuesMap[current] : '';
901 nextExtraValue.textContent = next ? "€ " + extraValuesMap[next] : '';
902
903 const sliderWidth = slider.offsetWidth;
904 const min = parseInt(slider.min);
905 const max = parseInt(slider.max);
906
907 const prevPosition = ((prev - min) / (max - min)) * sliderWidth;
908 const currentPosition = ((current - min) / (max - min)) * sliderWidth;
909 const nextPosition = ((next - min) / (max - min)) * sliderWidth;
910
911 prevValuePos.style.left = prevPosition + "px";
912 currentValuePos.style.left = currentPosition + "px";
913 nextValuePos.style.left = nextPosition + "px";
914
915
916 dots.forEach(dot => {
917 dot.classList.remove('previous', 'next', 'current');
918 var dotValue = parseInt(dot.getAttribute('data-value'));
919 if (dotValue === prev) {
920 dot.classList.add('previous');
921 } else if (dotValue === next) {
922 dot.classList.add('next');
923 } else if (dotValue === current) {
924 dot.classList.add('current');
925 }
926 });
927 }
928
929 function adjustParentHeight() {
930 const parent = document.getElementById('sliderContainer');
931 const child = document.getElementById('currentValuePos');
932 parent.style.height = child.offsetHeight + 'px';
933 }
934
935 slider.addEventListener('input', function () {
936 showResult(false);
937 });
938 window.addEventListener('resize', function () {
939 showResult(false);
940 });
941 window.addEventListener('resize', adjustParentHeight);
942
943 updateValues();
944 adjustParentHeight();
945
946 const durationAndTotalInterestPercentageMap = new Map();
947 durationAndTotalInterestPercentageMap.set(10, [3.95]);
948 durationAndTotalInterestPercentageMap.set(15, [4.05]);
949 durationAndTotalInterestPercentageMap.set(20, [4.05]);
950 durationAndTotalInterestPercentageMap.set(25, [3.85]);
951 durationAndTotalInterestPercentageMap.set(30, [3.85]);
952 durationAndTotalInterestPercentageMap.set(35, [3.75]);
953 durationAndTotalInterestPercentageMap.set(40, [3.75]);
954 addMonthlyInterestToDurationAndTotalInterestPercentageMap();
955
956 function addMonthlyInterestToDurationAndTotalInterestPercentageMap() {
957 for (let [key, value] of durationAndTotalInterestPercentageMap) {
958 value.push(getMonthlyInterestPercentageFromTotalInterestPercentage(value[0]));
959 }
960 }
961
962 function getAmountOfPayments(loanAmountPeriodInYears) {
963 return 12 * Number(loanAmountPeriodInYears);
964 }
965
966 function getMonthlyInterestPercentageFromTotalInterestPercentage(totalInterestPercentage) {
967 return ((Math.pow((1 + (totalInterestPercentage / 100)), (1 / 12)) - 1).toFixed(7)) * 100;
968 }
969
970 function getMonthlyPaymentAmount(loanAmount, loanAmountPeriodInYears) {
971 const amountOfPayments = getAmountOfPayments(loanAmountPeriodInYears);
972 const monthlyInterestRate = durationAndTotalInterestPercentageMap.get(Number(loanAmountPeriodInYears))[1] / 100;
973
974 return ((loanAmount * monthlyInterestRate) / (1 - (1 / (Math.pow(1 + monthlyInterestRate, amountOfPayments))))).toFixed(2);
975 }
976
977 function getTotalRepaymentLoan(monthlyPaymentAmount, loanAmountPeriodInYears) {
978 return monthlyPaymentAmount * getAmountOfPayments(loanAmountPeriodInYears);
979 }
980
981 function getTotalPaymentFromMonthlyPaymentAmount(monthlyPaymentAmount, loanPeriodAmountInYears) {
982 let monthlyInterestRate = Number(durationAndTotalInterestPercentageMap.get(Number(loanPeriodAmountInYears))[1]) / 100;
983 let loanAmountPeriod = Number(Number(loanPeriodAmountInYears) * 12);
984
985 return Number(((monthlyPaymentAmount / monthlyInterestRate) * (1 - (1 / (Math.pow(1 + monthlyInterestRate, loanAmountPeriod))))).toFixed(2));
986 }
987
988 function getNotaryAndRegistrationCost(loanAmount) {
989 const mortgageRightsCost1 = loanAmount * (110 / 100) * (1 / 100);
990 const mortgageRightsCost2 = loanAmount * (0.3 / 100);
991
992 return (mortgageRightsCost1 + mortgageRightsCost2 + lumpSumForTheLegalCertaintyOffice + flatRateDeedCosts).toFixed(2);
993 }
994
995 function getInitialCost(loanAmount, loanAmountPeriodInYears) {
996 const notaryAndRegistrationCost = getNotaryAndRegistrationCost(loanAmount);
997 const oneTimeSingleDayInterbankInterest = loanAmount * ((durationAndTotalInterestPercentageMap.get(Number(loanAmountPeriodInYears))[1] / 100) / 30);
998 return (Number(notaryAndRegistrationCost) + oneTimeFileCosts + oneTimeEstimationCosts + oneTimeSingleDayInterbankInterest).toFixed(2);
999 }
1000
1001 function getDates(loanPaymentPeriodInYears) {
1002 const currentYear = new Date().getFullYear();
1003 const startingDate = new Date(Date.UTC(currentYear, 0, 1));
1004
1005 const paymentDates = [startingDate];
1006 for (let i = 0; i <= 12 * loanPaymentPeriodInYears; i++) {
1007 let tempDate = new Date(startingDate.getUTCFullYear(), startingDate.getUTCMonth(), startingDate.getUTCDay());
1008 tempDate.setUTCMonth(startingDate.getUTCMonth() + i);
1009 tempDate.setUTCDate(1);
1010
1011 paymentDates.push(tempDate);
1012 }
1013
1014 return paymentDates;
1015 }
1016
1017 function getTotalCost(loanAmount, loanPaymentPeriodInYears) {
1018 const additionalInsurance = calculateAdditionalInsurance(Number(loanAmount), Number(loanPaymentPeriodInYears));
1019 const totalRepaymentLoan = getTotalRepaymentLoan(getMonthlyPaymentAmount(loanAmount, loanPaymentPeriodInYears), loanPaymentPeriodInYears)
1020 const totalRecurrentAnnualCost = (Math.floor((2 / 3) * loanPaymentPeriodInYears)) * Number(additionalInsurance);
1021 const totalFireInsuranceCost = fireInsurance * loanPaymentPeriodInYears;
1022 const totalInitialCost = Number(getInitialCost(loanAmount, loanPaymentPeriodInYears));
1023
1024 return totalRepaymentLoan + totalRecurrentAnnualCost + totalFireInsuranceCost + totalInitialCost;
1025 }
1026
1027 function getExtendedInternalRateOfReturn(loanAmount, loanPaymentPeriodInYears) {
1028 const additionalInsurance = calculateAdditionalInsurance(loanAmount, loanPaymentPeriodInYears);
1029 const currentYear = new Date().getUTCFullYear();
1030 const startingDate = new Date(Date.UTC(currentYear, 0, 1));
1031
1032 const dates = getDates(loanPaymentPeriodInYears);
1033 const payments = [-loanAmount, Number(getInitialCost(loanAmount, loanPaymentPeriodInYears)) + fireInsurance + Number(additionalInsurance)];
1034 const monthlyPaymentAmount = Number(getMonthlyPaymentAmount(loanAmount, loanPaymentPeriodInYears));
1035
1036 for (let i = 2; i < dates.length; i++) {
1037 if (dates[i].toUTCString() !== startingDate.toUTCString()) {
1038 if (dates[i].getUTCMonth() === 0 && dates[i].getUTCDate() === 1) {
1039 let amount = Number(fireInsurance) + Number(monthlyPaymentAmount);
1040 if (dates[i].getUTCFullYear() <= (currentYear + (Math.floor((2 / 3) * loanPaymentPeriodInYears) - 1))) {
1041 amount += Number(additionalInsurance);
1042 }
1043 payments.push(Number(amount));
1044 } else {
1045 payments.push(Number(monthlyPaymentAmount));
1046 }
1047 }
1048 }
1049
1050 return getInternalRateOfReturn(payments, dates, 0.01).toFixed(2);
1051 }
1052
1053 function getInternalRateOfReturn(values, dates, guess) {
1054
1055 var irrResult = function (values, dates, rate) {
1056 var r = rate + 1;
1057 var result = values[0];
1058 for (var i = 1; i < values.length; i++) {
1059 let diffTime = Math.abs(dates[i] - dates[0]);
1060 let diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
1061 result += values[i] / Math.pow(r, diffDays / 365);
1062 }
1063 return result;
1064 }
1065
1066 var irrResultDeriv = function (values, dates, rate) {
1067 var r = rate + 1;
1068 var result = 0;
1069 for (var i = 1; i < values.length; i++) {
1070 let diffTime = Math.abs(dates[i] - dates[0]);
1071 let diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
1072 var frac = diffDays / 365;
1073 result -= frac * values[i] / Math.pow(r, frac + 1);
1074 }
1075 return result;
1076 }
1077
1078 var positive = false;
1079 var negative = false;
1080 for (var i = 0; i < values.length; i++) {
1081 if (values[i] > 0) positive = true;
1082 if (values[i] < 0) negative = true;
1083 }
1084
1085 if (!positive || !negative) return 'POSNEG';
1086
1087 var guess = (typeof guess === 'undefined') ? 0.1 : guess;
1088 var resultRate = guess;
1089
1090 var epsMax = 1e-10;
1091
1092 var iterMax = 50;
1093
1094 var newRate, epsRate, resultValue;
1095 var iteration = 0;
1096 var contLoop = true;
1097 do {
1098 resultValue = irrResult(values, dates, resultRate);
1099 newRate = resultRate - resultValue / irrResultDeriv(values, dates, resultRate);
1100 epsRate = Math.abs(newRate - resultRate);
1101 resultRate = newRate;
1102 contLoop = (epsRate > epsMax) && (Math.abs(resultValue) > epsMax);
1103 } while (contLoop && (++iteration < iterMax));
1104
1105 if (contLoop) return '#NUM!';
1106
1107 return resultRate * 100;
1108 }
1109
1110 function simulateCreditScore(value, paymentPeriodInYears, isValueTotalLoanAmount) {
1111 const resultValuesMap = new Map();
1112
1113 let loanAmount;
1114 let monthlyPayment;
1115 if (isValueTotalLoanAmount === true) {
1116 loanAmount = Number(value);
1117 monthlyPayment = Number(getMonthlyPaymentAmount(loanAmount, paymentPeriodInYears));
1118 } else {
1119 monthlyPayment = Number(value);
1120 loanAmount = getTotalPaymentFromMonthlyPaymentAmount(monthlyPayment, paymentPeriodInYears);
1121 }
1122
1123 let totalRepayment = Number(getTotalRepaymentLoan(monthlyPayment, paymentPeriodInYears));
1124 let totalCost = Number(getTotalCost(loanAmount, paymentPeriodInYears).toFixed(2));
1125 let extendedInternalRateOfReturn = Number(getExtendedInternalRateOfReturn(loanAmount, paymentPeriodInYears)).toFixed(2);
1126
1127 let lowerLoanAmount;
1128 let lowerMonthlyPayment;
1129 let lowerPaymentPeriod;
1130 let upperLoanAmount;
1131 let upperMonthlyPayment;
1132 let upperPaymentPeriod;
1133
1134 lowerPaymentPeriod = paymentPeriodInYears - 5;
1135 if (lowerPaymentPeriod < 10) {
1136 lowerPaymentPeriod = 10;
1137 }
1138
1139 lowerLoanAmount = Number(getTotalPaymentFromMonthlyPaymentAmount(monthlyPayment, lowerPaymentPeriod));
1140 lowerMonthlyPayment = Number(getMonthlyPaymentAmount(loanAmount, lowerPaymentPeriod));
1141
1142 upperPaymentPeriod = Number(paymentPeriodInYears) + 5;
1143 if (upperPaymentPeriod > 40) {
1144 upperPaymentPeriod = 40;
1145 }
1146
1147 upperLoanAmount = Number(getTotalPaymentFromMonthlyPaymentAmount(monthlyPayment, upperPaymentPeriod));
1148 upperMonthlyPayment = Number(getMonthlyPaymentAmount(loanAmount, upperPaymentPeriod));
1149
1150 resultValuesMap.set("loanAmount", loanAmount);
1151 resultValuesMap.set("monthlyPayment", monthlyPayment);
1152 resultValuesMap.set("currentPaymentPeriod", paymentPeriodInYears);
1153 resultValuesMap.set("totalRepayment", totalRepayment);
1154 resultValuesMap.set("totalCost", totalCost);
1155 resultValuesMap.set("extendedInternalRateOfReturn", extendedInternalRateOfReturn);
1156 resultValuesMap.set("lowerLoanAmount", lowerLoanAmount);
1157 resultValuesMap.set("lowerMonthlyPayment", lowerMonthlyPayment);
1158 resultValuesMap.set("lowerPaymentPeriod", lowerPaymentPeriod);
1159 resultValuesMap.set("upperLoanAmount", upperLoanAmount);
1160 resultValuesMap.set("upperMonthlyPayment", upperMonthlyPayment);
1161 resultValuesMap.set("upperPaymentPeriod", upperPaymentPeriod);
1162
1163 return resultValuesMap;
1164 }
1165
1166 function showForm() {
1167 document.getElementById('section1').style.display = 'block';
1168 document.getElementById('section2').style.display = 'none';
1169 document.getElementById('section3').style.display = 'none';
1170 }
1171
1172 function showResult(isInputFromForm) {
1173 let simulationType = document.querySelector('input[name="whattocalculate"]:checked').value;
1174 let value = document.getElementById("inputFieldValue").value;
1175 let period;
1176 if (isInputFromForm === true) {
1177 period = document.getElementById("inputFieldPeriod").value;
1178 } else {
1179 period = slider.value;
1180 }
1181
1182 let isValueTotalLoanAmount;
1183 if (simulationType === 'loanAmount') {
1184 isValueTotalLoanAmount = true;
1185 } else {
1186 isValueTotalLoanAmount = false;
1187 }
1188
1189 const result = simulateCreditScore(value, period, isValueTotalLoanAmount);
1190
1191 let lowerPaymentAmount;
1192 let paymentAmount;
1193 let upperPaymentAmount;
1194
1195 if (isValueTotalLoanAmount === true) {
1196 lowerPaymentAmount = result.get("lowerMonthlyPayment");
1197 paymentAmount = result.get("monthlyPayment");
1198 upperPaymentAmount = result.get("upperMonthlyPayment");
1199 } else {
1200 lowerPaymentAmount = result.get("lowerLoanAmount");
1201 paymentAmount = result.get("loanAmount");
1202 upperPaymentAmount = result.get("upperLoanAmount");
1203 }
1204
1205 let lowerPaymentPeriod = result.get("lowerPaymentPeriod");
1206 let currentPaymentPeriod = result.get("currentPaymentPeriod");
1207 let upperPaymentPeriod = result.get("upperPaymentPeriod");
1208
1209 let totalCost = result.get("totalCost");
1210
1211 const previousExtraValue = document.getElementById("prevExtraValue");
1212 const currentExtraValue = document.getElementById("currentExtraValue");
1213 const nextExtraValue = document.getElementById("nextExtraValue");
1214
1215 const previousValue = document.getElementById("prevValue");
1216 const currentValue = document.getElementById("currentValue");
1217 const nextValue = document.getElementById("nextValue");
1218
1219 const totalCostValue = document.getElementById("totalCost");
1220
1221 previousExtraValue.textContent = "€ " + formatCurrency(lowerPaymentAmount);
1222 currentExtraValue.textContent = "€ " + formatCurrency(paymentAmount);
1223 nextExtraValue.textContent = "€ " + formatCurrency(upperPaymentAmount);
1224
1225 previousValue.textContent = lowerPaymentPeriod;
1226 currentValue.textContent = currentPaymentPeriod;
1227 nextValue.textContent = upperPaymentPeriod;
1228
1229 totalCostValue.textContent = "€ " + totalCost;
1230
1231 const summaryMonthlyPayment = document.getElementById("summaryMonthlyPayment");
1232 const summaryTotalInterest = document.getElementById("summaryTotalInterest");
1233 const summaryTotalCost = document.getElementById("summaryTotalCost");
1234 const summaryLoanAmount = document.getElementById("summaryLoanAmount");
1235 const summaryPeriod = document.getElementById("summaryPeriod");
1236 const summaryLoanAmountPieChart = document.getElementById("summaryLoanAmountPieChart");
1237 const summaryTotalInterestPieChart = document.getElementById("summaryTotalInterestPieChart");
1238 const summaryTotalCostPieChart = document.getElementById("totalCost");
1239 const summaryInterestRate = document.getElementById("summaryInterestRate");
1240 const summaryJkp = document.getElementById("summaryJkp");
1241
1242 const totalInterest = Number(result.get("totalCost")).toFixed(2) - Number(result.get("loanAmount")).toFixed(2);
1243
1244 summaryMonthlyPayment.textContent = "€ " + formatCurrency(result.get("monthlyPayment"));
1245 summaryTotalInterest.textContent = "€ " + formatCurrency(totalInterest.toFixed(2));
1246 summaryTotalCost.textContent = "€ " + formatCurrency(result.get("totalCost"));
1247 summaryLoanAmount.textContent = "€ " + formatCurrency(result.get("loanAmount"));
1248 summaryPeriod.textContent = result.get("currentPaymentPeriod") + " " + yearLabel;
1249 summaryLoanAmountPieChart.textContent = "€ " + formatCurrency(result.get("loanAmount"));
1250 summaryTotalCostPieChart.textContent = "€ " + formatCurrency(result.get("totalCost"));
1251 summaryTotalInterestPieChart.textContent = "€ " + formatCurrency(totalInterest.toFixed(2));
1252 summaryInterestRate.textContent = formatCurrency(durationAndTotalInterestPercentageMap.get(Number(period))[0].toFixed(2)) + "%";
1253 summaryJkp.textContent = formatCurrency(result.get("extendedInternalRateOfReturn")) + "%";
1254
1255 const percentageOfAmount = (Number(result.get("loanAmount")) / Number(result.get("totalCost"))) * 100;
1256 document.getElementById("dynamicPieChart").style.background = 'conic-gradient(#F2E9EC 0% ' + percentageOfAmount + '%, #C38498 ' + percentageOfAmount + '% 100%)';
1257
1258 document.getElementById("rangeSlider").value = currentPaymentPeriod;
1259
1260 const current = parseInt(slider.value);
1261 const next = current + 5 <= 40 ? current + 5 : '';
1262 const prev = current - 5 >= 10 ? current - 5 : '';
1263
1264 const sliderWidth = slider.offsetWidth;
1265 const min = parseInt(slider.min);
1266 const max = parseInt(slider.max);
1267
1268 const prevPosition = ((prev - min) / (max - min)) * sliderWidth;
1269 const currentPosition = ((current - min) / (max - min)) * sliderWidth;
1270 const nextPosition = ((next - min) / (max - min)) * sliderWidth;
1271
1272
1273 prevValuePos.style.left = prevPosition + 'px';
1274 currentValuePos.style.left = currentPosition + 'px';
1275 nextValuePos.style.left = nextPosition + 'px';
1276
1277 if (previousValue.textContent === currentValue.textContent) {
1278 prevValuePos.style.display = 'none';
1279 } else {
1280 prevValuePos.style.display = '';
1281 }
1282
1283 if (nextValue.textContent === currentValue.textContent) {
1284 nextValuePos.style.display = 'none';
1285 } else {
1286 nextValuePos.style.display = '';
1287 }
1288
1289 dots.forEach(dot => {
1290 dot.classList.remove('previous', 'next', 'current');
1291 var dotValue = parseInt(dot.getAttribute('data-value'));
1292 if (dotValue === prev) {
1293 dot.classList.add('previous');
1294 } else if (dotValue === next) {
1295 dot.classList.add('next');
1296 } else if (dotValue === current) {
1297 dot.classList.add('current');
1298 }
1299 });
1300
1301 adjustParentHeight();
1302 }
1303
1304 function calculateAdditionalInsurance(loanAmount, paymentPeriodInYears) {
1305 if (loanAmount <= 50000) {
1306 if (paymentPeriodInYears === 10) {
1307 return 69.33;
1308 } else if (paymentPeriodInYears === 15) {
1309 return 69.26;
1310 } else if (paymentPeriodInYears === 20) {
1311 return 74.94;
1312 } else if (paymentPeriodInYears === 25) {
1313 return 82.33;
1314 } else if (paymentPeriodInYears === 30) {
1315 return 90.9;
1316 } else if (paymentPeriodInYears === 35) {
1317 return 107.4;
1318 } else {
1319 return 132.4;
1320 }
1321 } else if (loanAmount > 50000 && loanAmount <= 100000) {
1322 if (paymentPeriodInYears === 10) {
1323 return 85.86;
1324 } else if (paymentPeriodInYears === 15) {
1325 return 86.19;
1326 } else if (paymentPeriodInYears === 20) {
1327 return 94.74;
1328 } else if (paymentPeriodInYears === 25) {
1329 return 105.79;
1330 } else if (paymentPeriodInYears === 30) {
1331 return 118.65;
1332 } else if (paymentPeriodInYears === 35) {
1333 return 143.43;
1334 } else {
1335 return 180.92;
1336 }
1337 } else if (loanAmount > 100000 && loanAmount <= 150000) {
1338 if (paymentPeriodInYears === 10) {
1339 return 119.49;
1340 } else if (paymentPeriodInYears === 15) {
1341 return 120.07
1342 } else if (paymentPeriodInYears === 20) {
1343 return 134.3;
1344 } else if (paymentPeriodInYears === 25) {
1345 return 152.71;
1346 } else if (paymentPeriodInYears === 30) {
1347 return 174.17;
1348 } else if (paymentPeriodInYears === 35) {
1349 return 215.45;
1350 } else {
1351 return 277.95;
1352 }
1353 } else if (loanAmount > 150000 && loanAmount <= 200000) {
1354 if (paymentPeriodInYears === 10) {
1355 return 153.14;
1356 } else if (paymentPeriodInYears === 15) {
1357 return 153.95;
1358 } else if (paymentPeriodInYears === 20) {
1359 return 173.88;
1360 } else if (paymentPeriodInYears === 25) {
1361 return 199.65;
1362 } else if (paymentPeriodInYears === 30) {
1363 return 229.67;
1364 } else if (paymentPeriodInYears === 35) {
1365 return 287.49;
1366 } else {
1367 return 374, 96;
1368 }
1369 } else if (loanAmount > 200000 && loanAmount <= 250000) {
1370 if (paymentPeriodInYears === 10) {
1371 return 174.58;
1372 } else if (paymentPeriodInYears === 15) {
1373 return 175.53;
1374 } else if (paymentPeriodInYears === 20) {
1375 return 199.09;
1376 } else if (paymentPeriodInYears === 25) {
1377 return 229.59;
1378 } else if (paymentPeriodInYears === 30) {
1379 return 265.09;
1380 } else if (paymentPeriodInYears === 35) {
1381 return 333.55;
1382 } else {
1383 return 437.26;
1384 }
1385 } else if (loanAmount > 250000 <= 300000) {
1386 if (paymentPeriodInYears === 10) {
1387 return 205.51;
1388 } else if (paymentPeriodInYears === 15) {
1389 return 206.67;
1390 } else if (paymentPeriodInYears === 20) {
1391 return 235.47;
1392 } else if (paymentPeriodInYears === 25) {
1393 return 272.74;
1394 } else if (paymentPeriodInYears === 30) {
1395 return 316.14;
1396 } else if (paymentPeriodInYears === 35) {
1397 return 399.8;
1398 } else {
1399 return 526.56;
1400 }
1401 } else {
1402 if (paymentPeriodInYears === 10) {
1403 return 236.44;
1404 } else if (paymentPeriodInYears === 15) {
1405 return 237.8;
1406 } else if (paymentPeriodInYears === 20) {
1407 return 271.86;
1408 } else if (paymentPeriodInYears === 25) {
1409 return 315.9;
1410 } else if (paymentPeriodInYears === 30) {
1411 return 367.2;
1412 } else if (paymentPeriodInYears === 35) {
1413 return 466.07;
1414 } else {
1415 return 615.85;
1416 }
1417 }
1418 }
1419
1420 const lumpSumForTheLegalCertaintyOffice = 1160;
1421 const flatRateDeedCosts = 1572.57;
1422 const oneTimeFileCosts = 350;
1423 const oneTimeEstimationCosts = 300;
1424 const fireInsurance = 350;
1425</script>
