Une erreur s'est produite en traitant le modèle.
The following has evaluated to null or missing:
==> titleSimulateYourMortgage  [in template "10154#10192#1666908614" at line 4, column 19]

----
Tip: If the failing expression is known to be legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)??
----

----
FTL stack trace ("~" means nesting-related):
	- Failed at: ${titleSimulateYourMortgage.getData()}  [in template "10154#10192#1666908614" at line 4, column 17]
----
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                            <option>${selectRenovation.getData()}</option> 
12                        </select> 
13                    </div> 
14                </div> 
15                <div class="form-group"> 
16                    <label class="col-sm-6 control-label">${labelCalculateMy.getData()}</label> 
17                    <div class="input-wrapper col-sm-6"> 
18                        <div class="radio-button"><input type="radio" name="whattocalculate" required="" value="loanAmount" onclick="updateInputFieldLabel()"> <label>${radioLoanAmount.getData()}</label> 
19 
20                        </div> 
21                        <div class="radio-button"><input type="radio" name="whattocalculate" required="" value="monthlyPayment" onclick="updateInputFieldLabel()"> <label>${radioDownPayment.getData()}</label> 
22                        </div> 
23                    </div> 
24                    <div class="col-sm-6"></div> 
25                    <div class="col-sm-6 control-label validation-message" id="radioWarningMessage" style="display:none; color:red;"></div> 
26                </div> 
27                <div class="form-group" id="inputFieldContainer" style="display: none;"> 
28                    <label for="inputFieldValue" class="col-sm-6 control-label" id="inputFieldLabel">${LabelLoanTerm.getData()}</label> 
29                    <div class="col-sm-6"> 
30                        <input type="text" class="form-control" id="inputFieldValue"> 
31                    </div> 
32                    <div class="col-sm-6"></div> 
33                    <div class="col-sm-6 control-label validation-message" id="inputValueWarningMessage" style="display:none; color:red;"></div> 
34                </div> 
35                <div class="form-group"> 
36                    <label for="inputFieldPeriod" class="col-sm-6 control-label">${LabelLoanTerm.getData()}</label> 
37                    <div class="col-sm-6"> 
38                        <input type="text" class="form-control" id="inputFieldPeriod"> 
39                    </div> 
40                    <div class="col-sm-6"></div> 
41                    <div class="col-sm-6 control-label validation-message" id="inputPeriodWarningMessage" style="display:none; color:red;"></div> 
42                </div> 
43                <div class="button-wrapper"> 
44                    <div class="btn-default btn-lg" onclick="validateAndShowResult()">${buttonSimulate.getData()}<i class="fas fa-chevron-right"></i></div> 
45                </div> 
46            </form> 
47        </div> 
48    </div> 
49</section> 
50<section id="section2" class="bg-light1 cred-sim" style="display: none;"> 
51    <div class="container-fluid container1200"> 
52        <div class="col-sm-12"> 
53            <div class="back"> 
54                <a href="#" onclick="showForm()">${buttonBack.getData()}</a> 
55            </div> 
56            <h3>${titleSimulationLoanAmount.getData()}</h3> 
57            <div class="slider-container" id="sliderContainer"> 
58                <div class="limits"> 
59                    <div>${rangeMinYears.getData()}</div> 
60                    <div>${rangeMaxYears.getData()}</div> 
61                </div> 
62                <input type="range" class="slider" id="rangeSlider" min="10" max="40" step="5" value="20"> 
63                <div class="dots"> 
64                    <div class="dot" data-value="10"></div> 
65                    <div class="dot" data-value="15"></div> 
66                    <div class="dot" data-value="20"></div> 
67                    <div class="dot" data-value="25"></div> 
68                    <div class="dot" data-value="30"></div> 
69                    <div class="dot" data-value="35"></div> 
70                    <div class="dot" data-value="40"></div> 
71                </div> 
72                <div class="values"> 
73                    <div class="value-pos" id="prevValuePos"> 
74                        <div class="slider-value">${loanTerm.getData()} <span><span id="prevValue"></span> ${year.getData()}</span></div> 
75                        <div class="extra-value" id="prevExtraValue"></div> 
76                    </div> 
77                    <div class="value-pos" id="currentValuePos"> 
78                        <div class="slider-value" >${loanTerm.getData()} <span><span id="currentValue"></span> ${year.getData()}</span></div> 
79                        <div class="extra-value" id="currentExtraValue"></div> 
80                        <div class="triangle"></div> 
81                    </div> 
82                    <div class="value-pos" id="nextValuePos"> 
83                        <div class="slider-value" >${loanTerm.getData()} <span><span id="nextValue"></span> ${year.getData()}</span></div> 
84                        <div class="extra-value" id="nextExtraValue"></div> 
85                    </div> 
86                </div> 
87            </div> 
88        </div> 
89    </div> 
90</section> 
91<section id="section3" class="bg-dark cred-sim" style="display: none;"> 
92    <div class="container-fluid container1200"> 
93        <div class="col-sm-6 col-sm-push-6"> 
94            <div id="pie-chart-1" class="pie-chart"> 
95                <div class="pie-wrapper"> 
96                    <div class="pie" id="dynamicPieChart"> 
97                        <div><span>${total.getData()}</span> 
98                            <h4 id="totalCost"></h4> 
99                        </div> 
100                    </div> 
101                </div> 
102                <div class="one-column-legend"> 
103                    <div class="legend-item legend-item-value1"> 
104                        <div class="legend-item-left"> 
105                            <span id="summaryLoanAmountPieChart"></span> 
106                            <span class="dash">-</span> 
107                            <span>${loanAmount.getData()}</span> 
108                        </div> 
109                    </div> 
110                    <div class="legend-item legend-item-value2"> 
111                        <div class="legend-item-left"> 
112                            <span id="summaryTotalInterestPieChart"></span> 
113                            <span class="dash">-</span> 
114                            <span>${totalInterestPaid.getData()}</span> 
115                        </div> 
116                    </div> 
117                    <div class="legend-item"> 
118                        <span>${interestRate.getData()} - </span> 
119                        <span id="summaryInterestRate"></span> 
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                            <i class="far fa-info-circle"></i> 
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="#" target="_blank">${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 = "Entre le montant du prêt"; 
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 ou taux annuel effectif global est le taux d’intérêt que les prêteurs indiquent."; 
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 of jaarlijks kostenpercentage is de rentevoet die kredietverstrekkers vermelden"; 
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.8]); 
948        durationAndTotalInterestPercentageMap.set(15, [3.9]); 
949        durationAndTotalInterestPercentageMap.set(20, [3.9]); 
950        durationAndTotalInterestPercentageMap.set(25, [3.7]); 
951        durationAndTotalInterestPercentageMap.set(30, [3.7]); 
952        durationAndTotalInterestPercentageMap.set(35, [3.55]); 
953        durationAndTotalInterestPercentageMap.set(40, [3.55]); 
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>