immorechner/templates/home/index.html.twig

{% extends 'base.html.twig' %}

{% block title %}Immobilienwert berechnen - {{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/calculator.css') }}">
{% endblock %}

{% block body %}
    <div class="info-banner">
        <h2 style="margin-bottom: 10px; border: none;">Immobilienwert-Rechner</h2>
        <p>Berechnen Sie die Werthaltigkeit Ihrer Immobilie. Alle Berechnungen erfolgen in Echtzeit.</p>
        <p><strong>Ohne Registrierung:</strong> Teilen Sie Ihre Berechnung über einen Link.</p>
        <p><strong>Mit Registrierung:</strong> Speichern Sie Ihre Immobilien dauerhaft.</p>
    </div>

    <div class="calculator-container">
        <div class="form-section">
            <h2>Immobiliendaten</h2>

            <form id="immo-calculator-form">
                <div class="form-group">
                    <label for="adresse">Adresse</label>
                    <input type="text" id="adresse" name="adresse" value="{{ immobilienData.adresse }}" placeholder="z.B. Musterstraße 123, 12345 Berlin">
                </div>

                <div class="form-group">
                    <label for="kaufpreis">Kaufpreis (€)</label>
                    <input type="number" id="kaufpreis" name="kaufpreis" value="{{ immobilienData.kaufpreis }}" placeholder="z.B. 250000">
                </div>

                <div class="form-group">
                    <label for="wohnflaeche">Wohnfläche (m²)</label>
                    <input type="number" id="wohnflaeche" name="wohnflaeche" value="{{ immobilienData.wohnflaeche }}" placeholder="z.B. 80">
                </div>

                <div class="form-group">
                    <label for="nutzflaeche">Nutzfläche (m²)</label>
                    <input type="number" id="nutzflaeche" name="nutzflaeche" value="{{ immobilienData.nutzflaeche }}" placeholder="z.B. 100">
                </div>

                <div class="form-group">
                    <label for="zimmer">Anzahl Zimmer</label>
                    <input type="number" id="zimmer" name="zimmer" value="{{ immobilienData.zimmer }}" placeholder="z.B. 3">
                </div>

                <div class="form-group">
                    <label for="baujahr">Baujahr</label>
                    <input type="number" id="baujahr" name="baujahr" value="{{ immobilienData.baujahr }}" placeholder="z.B. 2015">
                </div>

                <div class="form-group">
                    <label for="etage">Etage</label>
                    <input type="number" id="etage" name="etage" value="{{ immobilienData.etage }}" placeholder="z.B. 2">
                </div>

                <div class="form-group">
                    <label for="typ">Immobilientyp</label>
                    <select id="typ" name="typ">
                        <option value="">-- Bitte wählen --</option>
                        <option value="Wohnung" {% if immobilienData.typ == 'Wohnung' %}selected{% endif %}>Wohnung</option>
                        <option value="Haus" {% if immobilienData.typ == 'Haus' %}selected{% endif %}>Haus</option>
                        <option value="Gewerbe" {% if immobilienData.typ == 'Gewerbe' %}selected{% endif %}>Gewerbe</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="bundesland_id">Bundesland</label>
                    <select id="bundesland_id" name="bundesland_id">
                        <option value="">-- Bitte wählen --</option>
                        {% for bundesland in bundeslaender %}
                            <option value="{{ bundesland.id }}"
                                    data-steuer="{{ bundesland.grunderwerbsteuer }}"
                                    {% if immobilienData.bundesland_id == bundesland.id %}selected{% endif %}>
                                {{ bundesland.name }} ({{ bundesland.grunderwerbsteuer }}%)
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group">
                    <label for="heizungstyp_id">Heizungstyp</label>
                    <select id="heizungstyp_id" name="heizungstyp_id">
                        <option value="">-- Bitte wählen --</option>
                        {% for heizungstyp in heizungstypen %}
                            <option value="{{ heizungstyp.id }}"
                                    {% if immobilienData.heizungstyp_id == heizungstyp.id %}selected{% endif %}>
                                {{ heizungstyp.name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group">
                    <label for="abschreibungszeit">Abschreibungszeit (Jahre)</label>
                    <input type="number" id="abschreibungszeit" name="abschreibungszeit" value="{{ immobilienData.abschreibungszeit }}" placeholder="z.B. 50">
                </div>

                <div class="form-group checkbox-group">
                    <input type="checkbox" id="garage" name="garage" {% if immobilienData.garage %}checked{% endif %}>
                    <label for="garage">Garage vorhanden</label>
                </div>

                <div class="button-group">
                    {% if app.user %}
                        <button type="button" class="btn btn-primary" id="save-immobilie-btn">Speichern</button>
                    {% endif %}
                    <button type="button" class="btn btn-primary" id="share-link-btn">Link teilen</button>
                    <button type="button" class="btn btn-secondary" id="reset-btn">Zurücksetzen</button>
                </div>

                <div class="share-link" id="share-link-container">
                    <strong>Teilen Sie diese Berechnung:</strong>
                    <input type="text" id="share-url" readonly>
                    <button type="button" class="btn btn-secondary" style="margin-top: 10px;" id="copy-link-btn">Link kopieren</button>
                </div>
            </form>
        </div>

        <div class="results-section">
            <h2>Berechnungsergebnisse</h2>

            <div class="result-item">
                <h3>Gesamtfläche</h3>
                <div class="value" id="result-gesamtflaeche">0 m²</div>
                <div class="description">Wohnfläche + Nutzfläche</div>
            </div>

            <div class="result-item">
                <h3>Preis pro m² Wohnfläche</h3>
                <div class="value" id="result-preis-pro-qm">0,00 €</div>
                <div class="description">Kaufpreis / Wohnfläche</div>
            </div>

            <div class="result-item">
                <h3>Grunderwerbsteuer</h3>
                <div class="value" id="result-grunderwerbsteuer">0,00 €</div>
                <div class="description">Abhängig vom Bundesland</div>
            </div>

            <div class="result-item">
                <h3>Gesamtkosten</h3>
                <div class="value" id="result-gesamtkosten">0,00 €</div>
                <div class="description">Kaufpreis + Grunderwerbsteuer</div>
            </div>

            <div class="result-item">
                <h3>Jährliche Abschreibung</h3>
                <div class="value" id="result-abschreibung">0,00 €</div>
                <div class="description">Kaufpreis / Abschreibungszeit</div>
            </div>

            <div class="result-item">
                <h3>Alter der Immobilie</h3>
                <div class="value" id="result-alter">0 Jahre</div>
                <div class="description">Aktuelles Jahr - Baujahr</div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="{{ asset('js/calculator.js') }}"></script>
{% endblock %}