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>

    <!-- ================= -->
    <!-- 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>

    <div class="col-md-12">
        <input class="form-control bg-light" disabled
               placeholder="Vertragsnummer wird automatisch vergeben">
    </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">
        <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
            </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>

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