You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
83 lines
3.7 KiB
83 lines
3.7 KiB
<div class="stepper" x-data="{ ...stepper, sprite: '{{sprite|raw}}' }">
|
|
|
|
<div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
|
|
|
|
<form @submit.prevent="submit">
|
|
|
|
<div x-ref="slider" class="slider" x-on:resize.debounce.window="$refs.slider.scrollLeft = $refs.slider.scrollWidth / slides.length * active">
|
|
<div>
|
|
<h2>Was möchten Sie finanzieren</h2>
|
|
<div class="radio-grid">
|
|
<template x-for="ckind in kinds">
|
|
<label>
|
|
<input @change="slideTo($event, step+1)" type="radio" name="kind" :value="ckind.value" x-model="value.kind">
|
|
<span>
|
|
<span x-html="svg(ckind.icon)"></span>
|
|
<span x-text="ckind.label"></span>
|
|
</span>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
{% include 'vorhaben.twig.htm' with {
|
|
'kind': "bau",
|
|
bezahlt: true,
|
|
second: {label: 'Baukosten', value: 'baukosten'},
|
|
main: {label: 'Grundstückspreis', value: 'grundstueckspreis'}
|
|
} %}
|
|
|
|
{% include 'vorhaben.twig.htm' with {
|
|
'kind': "kauf",
|
|
bezahlt: false,
|
|
second: {label: 'Modernisierung', value: 'modernisierung'},
|
|
main: {label: 'Kaufpreis', value: 'kaufpreis'}
|
|
} %}
|
|
|
|
<div x-show="value.kind == 'anschluss'">
|
|
<h2 class="gradient">Das Vorhaben in Zahlen</h2>
|
|
|
|
<div class="form-container">
|
|
<div class="form-grid">
|
|
<label>Objektwert</label>
|
|
<input type="number" {{cprop('value.anschluss.objektwert', 'currency') | raw}}>
|
|
<span class="unit">€</span>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<div class="form-grid">
|
|
<label>Umschuldung</label>
|
|
<input type="number" {{cprop('value.anschluss.umschuldung', 'currency') | raw}}>
|
|
<span class="unit">€</span>
|
|
<span class="comment">Bitte geben Sie hier die Summe der gleichzeitig umzuschuldenden Darlehen an.</span>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<div class="form-grid">
|
|
<label>Zusätzl. Kapital</label>
|
|
<input type="number" {{cprop('value.anschluss.zuskap', 'currency') | raw}}>
|
|
<span class="unit">€</span>
|
|
</div>
|
|
<div class="separator primary"></div>
|
|
<div>
|
|
<div>Darlehensbetrag</div>
|
|
<div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)"></div>
|
|
</div>
|
|
<div class="separator gray"></div>
|
|
<div class="button-row">
|
|
<button @click="slideTo($event, step-1)" type="button">Zurück</button>
|
|
<button @click="slideTo($event, step+1)" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% include 'daten.twig.htm' %}
|
|
|
|
<div>
|
|
<div class="form-container">
|
|
Vielen Dank für Ihre Anfrage.
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|