Vertragsverwaltung_Plusfit24/views/register.ejs

<%- include('partials/header') %>

<% if (typeof error !== 'undefined') { %>
<div class="alert alert-danger">
    ⚠️ <%= error %>
</div>
<% } %>

<h2 class="text-center mb-4">Mitglied werden</h2>

<form method="POST" action="/register/create" class="row g-3">

    <!-- ================= -->
    <!-- PERSÖNLICHE DATEN -->
    <!-- ================= -->
    <h4>Persönliche Daten</h4>

    <div class="col-md-6">
        <input name="vorname" class="form-control" placeholder="Vorname" required>
    </div>

    <div class="col-md-6">
        <input name="nachname" class="form-control" placeholder="Nachname" required>
    </div>

    <div class="col-md-6">
        <input type="date"
           name="geburtsdatum"
           id="geburtsdatum"
           class="form-control"
           required>
    </div>

    <!-- ================= -->
    <!-- ADRESSE -->
    <!-- ================= -->
    <h4 class="mt-4">Adresse</h4>

    <div class="col-md-6">
        <input name="strasse" class="form-control" placeholder="Straße" required>
    </div>

    <div class="col-md-2">
        <input name="hausnummer" class="form-control" placeholder="Nr." required>
    </div>

    <div class="col-md-2">
        <input name="plz" class="form-control" placeholder="PLZ" required>
    </div>

    <div class="col-md-4">
        <input name="ort" class="form-control" placeholder="Ort" required>
    </div>

    <div class="col-md-4">
        <input name="land" class="form-control" placeholder="Land" value="Deutschland">
    </div>

    <!-- ================= -->
    <!-- KONTAKT -->
    <!-- ================= -->
    <h4 class="mt-4">Kontakt</h4>

    <div class="col-md-4">
        <input name="mobil" class="form-control" placeholder="Mobilnummer" required>
    </div>

    <div class="col-md-4">
        <input name="telefon" class="form-control" placeholder="Telefon">
    </div>

    <div class="col-md-4">
        <input type="email" name="email" class="form-control" placeholder="E-Mail" required>
    </div>

    <!-- ================= -->
    <!-- VERTRAG -->
    <!-- ================= -->
    <h4 class="mt-4">Vertrag</h4>

    <div class="col-md-12">
        <select name="vertragsvariante" class="form-select" required>
            <option value="">Bitte Vertrag auswählen</option>
            <% vertragsarten.forEach(v => { %>
                <option value="<%= v.id %>"
                    <%= selectedVertrag == v.id ? 'selected' : '' %>>
                    <%= v.name %> – <%= v.betrag.toFixed(2) %> € / Monat
                </option>
            <% }) %>
        </select>
    </div>

    <!-- ================= -->
    <!-- SEPA -->
    <!-- ================= -->
    <h4 class="mt-4">SEPA-Lastschrift</h4>

    <div class="col-md-6">
        <input name="kontoinhaber" class="form-control"
               placeholder="Kontoinhaber" required>
    </div>

    <div class="col-md-6">
        <input name="mandatsreferenz" class="form-control"
               placeholder="Mandatsreferenz" required>
    </div>

    <div class="col-md-6">
        <input name="iban" class="form-control"
               placeholder="IBAN" required>
    </div>

    <div class="col-md-6">
        <input name="bic" class="form-control"
               placeholder="BIC" required>
    </div>

    <!-- ✅ EINZIGE SEPA-ZUSTIMMUNG -->
    <div class="col-md-12 form-check mt-2">
        <input
            type="checkbox"
            class="form-check-input"
            id="agreeSepa"
            name="agreeSepa"
            required>
        <label class="form-check-label" for="agreeSepa">
            Ich erteile ein SEPA-Lastschriftmandat und stimme der Abbuchung zu.
        </label>
    </div>

    <!-- ================= -->
    <!-- RECHTLICHES -->
    <!-- ================= -->
    <hr class="my-4">
    <h5>Rechtliches</h5>

    <div class="form-check mb-2" id="consentBlock" style="display:none;">
        <input class="form-check-input"
               type="checkbox"
               id="agreeConsent"
               name="agreeConsent"
               required>
        <label class="form-check-label" for="agreeConsent">
            Ich habe die
            <a href="/documents/Einverstaendniserklaerung.pdf" target="_blank">
                Einverständniserklärung
            </a>
            gelesen.
        </label>
    </div>

    <div class="form-check mb-3">
        <input class="form-check-input"
               type="checkbox"
               id="agreeAgb"
               name="agreeAgb"
               required>
        <label class="form-check-label" for="agreeAgb">
            Ich akzeptiere die <a href="https://plusfit24.de/wp-content/uploads/2022/11/AG_PlusFit24.pdf" target="_blank">AGB's</a>
        </label>
    </div>

    <!-- ================= --> 
       
    <!-- ABSCHICKEN -->
    <!-- ================= -->
    <div class="col-12 mt-4">
        <button type="submit" class="btn btn-success btn-lg w-100">
            💳 Kostenpflichtig verbindlich abschließen
        </button>
    </div>

</form>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const birthInput = document.getElementById("geburtsdatum");
    const consentBlock = document.getElementById("consentBlock");
    const consentCheckbox = document.getElementById("agreeConsent");

    function checkAge() {
        if (!birthInput.value) {
            consentBlock.style.display = "none";
            consentCheckbox.required = false;
            consentCheckbox.checked = false;
            return;
        }

        const birthDate = new Date(birthInput.value);
        const today = new Date();

        let age = today.getFullYear() - birthDate.getFullYear();
        const monthDiff = today.getMonth() - birthDate.getMonth();

        if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
            age--;
        }

        if (age < 18) {
            consentBlock.style.display = "block";
            consentCheckbox.required = true;
        } else {
            consentBlock.style.display = "none";
            consentCheckbox.required = false;
            consentCheckbox.checked = false;
        }
    }

    birthInput.addEventListener("change", checkAge);

    // 🔥 WICHTIG: Beim Laden direkt prüfen
    checkAge();
});
</script>

<%- include('partials/footer') %>