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.
93 lines
6.3 KiB
93 lines
6.3 KiB
<div x-show="value.kind == '{{kind}}'">
|
|
{% if kind == 'bau' %} <h4 class="sub-was-second">Schritt 2 von 3:</h4>
|
|
<h2 class="gradient" style="padding-top:0;">Das Vorhaben in Zahlen</h2>{% endif %}
|
|
{% if kind == 'kauf' %} <h4 class="sub-was-second">Schritt 2 von 3:</h4>
|
|
<h2 class="gradient" style="padding-top:0;">Das Vorhaben in Zahlen</h2>{% endif %}
|
|
|
|
|
|
<div class="form-container">
|
|
<div class="form-grid">
|
|
<label>{{main.label}} <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
|
|
{% if kind == 'bau' %} <div class="open-popup">Notariell zu vereinbarender Kaufpreis.</div> {% endif %}
|
|
{% if kind == 'kauf' %} <div class="open-popup">Notariell zu vereinbarender Kaufpreis, möglichst ohne Zubehör wie Küche, Gartenmöbel, Rasenmäher etc.</div> {% endif %}
|
|
</span></label>
|
|
<input type="tel" {{cprop('value.' ~ kind ~ '.' ~ main.value, 'currency') | raw}}>
|
|
<span class="unit">€</span>
|
|
</div>
|
|
{% if bezahlt %}
|
|
<div class="form-grid">
|
|
<label>Bereits bezahlt? <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
|
|
<div class="open-popup">Kaufpreis fürs Grundstück, Planungskosten etc.).</div>
|
|
</span></label>
|
|
<select name="bezahlt" x-model="value.{{kind}}.bezahlt">
|
|
<option value="1">Ja</option>
|
|
<option value="0">Nein</option>
|
|
</select>
|
|
</div>
|
|
{% endif %}
|
|
<div class="separator"></div>
|
|
<div class="form-grid">
|
|
<label class="plus">{{second.label}} <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
|
|
{% if kind == 'bau' %} <div class="open-popup">Kosten zur Herstellung des Gebäudes inkl. Baunebenkosten wie Planung durch Architekt und Fachingenieure etc.</div> {% endif %}
|
|
{% if kind == 'kauf' %} <div class="open-popup">Alle Kosten für Material + Lohn für z.B. Malerarbeiten.</div> {% endif %}
|
|
</span></label>
|
|
<input type="tel" {{cprop('value.' ~ kind ~ '.' ~ second.value, 'currency') | raw}}>
|
|
<span class="unit">€</span>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<div class="form-grid">
|
|
<label class="plus">Notar- & Gerichtskosten</label>
|
|
<span class="text-right">
|
|
<span class="result-label prozent-zahl" x-text="units.percent.to(parts.notar * 100)"></span>%
|
|
<span class="result wert-zahl" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.notar)"></span>
|
|
</span>
|
|
<span class="unit">€</span>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<div class="form-grid">
|
|
<label class="plus">Grunderwerbsteuer</label>
|
|
<span class="text-right">
|
|
<span class="result-label prozent-zahl" x-text="units.percent.to(parts.grundsteuer * 100)"></span>%
|
|
<span class="result wert-zahl" x-text="units.currency.to(value.{{kind}}.{{main.value}} * parts.grundsteuer)"></span>
|
|
</span>
|
|
<span class="unit">€</span>
|
|
<span class="comment">Diese Beträge sind gesetzlich vorgegeben und werden deshalb automatisch ermittelt.</span>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<div class="form-grid">
|
|
<label class="plus">
|
|
Makler
|
|
<span x-html="`${units.percent.to(parts.makler * 100)} %`"></span>
|
|
<span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
|
|
<div class="open-popup">s.o.</div>
|
|
</span></label>
|
|
<input type="tel" :value="units.currency.to(value.{{kind}}.{{main.value}} * parts.makler)" @focus="$event.target.value = Math.round(value.{{kind}}.{{main.value}} * parts.makler)"
|
|
@blur="console.log($event); ($event.target || $event.originalTarget).value = units.currency.to(value.{{kind}}.{{main.value}} * parts.makler);"
|
|
@change="console.log('change'); parts.makler = units.currency.from($event.target.value) / value.{{kind}}.{{main.value}};">
|
|
<span class="unit">€</span>
|
|
<span class="comment">Die vorgeschlagene Maklercourtage entspricht der regional üblichen Höhe. Sie können diese jedoch bei Bedarf verändern oder auch komplett entfallen lassen.</span>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<div class="form-grid">
|
|
<label class="minus">Eigenkapital <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
|
|
<div class="open-popup">Bitte nur das Kapital ansetzen, dass Sie wirklich auch einsetzen wollen.</div>
|
|
</span></label>
|
|
<input type="tel" {{cprop('value.' ~ kind ~ '.eigenkapital', 'currency') | raw}}>
|
|
<span class="unit">€</span>
|
|
</div>
|
|
<div class="separator primary"></div>
|
|
<div class="form-grid darlehen-grid">
|
|
<div class="darlehen-name"><span class="yellow-darlehen">=</span>Darlehensbetrag <span class="popup-info"><img src="https://rck-finanzmakler.de/wp-content/uploads/2021/03/info.svg">
|
|
<div class="open-popup">Der Betrag, der durch die Bank finanziert wird.</div>
|
|
</span></div>
|
|
<div class="text-right darlehen-zahl"
|
|
x-text="units.currency.to( Math.round((value.{{kind}}.{{main.value}} * (1+parts.notar+parts.grundsteuer+parts.makler) + value.{{kind}}.{{second.value}} - value.{{kind}}.eigenkapital - (value.{{kind}}.bezahlt == 1 ? value.{{kind}}.grundstueckspreis : 0)) / 1000)*1000 )">
|
|
</div><span class="unit" style="font-weight:bold;">€</span>
|
|
</div>
|
|
<div class="separator gray"></div>
|
|
<div class="button-row">
|
|
<button @click="slideTo($event, step-1)" type="button" class="zurueck-step">Zurück</button>
|
|
<button @click="slideTo($event, step+1)" type="button" class="weiter-step">Weiter zum letzten Schritt</button>
|
|
</div>
|
|
</div>
|
|
</div>
|