Vertragsverwaltung_Plusfit24/views/register.ejs

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

<style>
.step { display: none; }
.step.active { display: block; }

.container-form {
    max-width: 700px;
    margin: auto;
}

.progress {
    height: 10px;
    margin-bottom: 30px;
}

.step-nav {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 20px;
}

.step-nav span.active {
    font-weight: bold;
    color: #3b3be3;
}

@media(max-width:768px){
    h4{font-size:18px;}
    button{width:100%;}
}
</style>

<div class="container-form">

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

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

<div class="progress">
    <div id="progressBar"
         class="progress-bar bg-primary"
         style="width:33%">
    </div>
</div>

<div class="step-nav text-center mb-3">
    <span id="nav1">Daten</span>
    <span id="nav2">Bank</span>
    <span id="nav3">Prüfen</span>
</div>

<form method="POST" action="/register/create" id="registerForm">

<!-- ================= STEP 1 ================= -->
<div class="step" id="step1">

<h4>Mitgliedsdaten</h4>

<input name="vorname" class="form-control mb-2" placeholder="Vorname" required>
<input name="nachname" class="form-control mb-2" placeholder="Nachname" required>

<input type="date"
       name="geburtsdatum"
       id="geburtsdatum"
       class="form-control mb-2"
       required>

<input name="mobil" class="form-control mb-2" placeholder="Mobilnummer" required>
<input type="email" name="email" class="form-control mb-2" placeholder="E-Mail" required>

<h5 class="mt-3">Adresse</h5>

<input name="strasse" class="form-control mb-2" placeholder="Straße" required>
<input name="hausnummer" class="form-control mb-2" placeholder="Nr." required>
<input name="plz" class="form-control mb-2" placeholder="PLZ" required>
<input name="ort" class="form-control mb-2" placeholder="Ort" required>
<input name="land" class="form-control mb-2" value="Deutschland">

<button type="button" class="btn btn-primary mt-3" onclick="nextStep(2)">
Weiter →
</button>

</div>

<!-- ================= STEP 2 ================= -->
<div class="step" id="step2">

<h4>Bankdaten</h4>

<input name="kontoinhaber" class="form-control mb-2" placeholder="Kontoinhaber" required>
<input name="mandatsreferenz" class="form-control mb-2" placeholder="Mandatsreferenz" required>
<input name="iban" class="form-control mb-2" placeholder="IBAN" required>
<input name="bic" class="form-control mb-2" placeholder="BIC" required>

<div class="form-check mt-2">
    <input class="form-check-input"
           type="checkbox"
           name="agreeSepa"
           value="on"
           required>
    <label class="form-check-label">
        SEPA-Mandat erteilen
    </label>
</div>

<div class="d-flex justify-content-between mt-4">
<button type="button" class="btn btn-secondary" onclick="nextStep(1)">
← Zurück
</button>

<button type="button" class="btn btn-primary" onclick="nextStep(3)">
Weiter →
</button>
</div>

</div>

<!-- ================= STEP 3 ================= -->
<div class="step" id="step3">

<h4>Zusammenfassung</h4>

<div class="card p-3 mb-3 bg-light">
<div id="summaryBox"></div>
</div>

<h5>Vertrag</h5>

<select name="vertragsvariante" class="form-select mb-3" required>
<option value="">Bitte wählen</option>
<% vertragsarten.forEach(v => { %>
<option value="<%= v.id %>">
<%= v.name %> – <%= v.betrag.toFixed(2) %> €
</option>
<% }) %>
</select>

<h5>Rechtliches</h5>

<div class="form-check mb-2 d-none" id="consentBox">
<input class="form-check-input"
       type="checkbox"
       name="agreeConsent"
       id="agreeConsent"
       value="on">
<label class="form-check-label">
Einverständnis der Erziehungsberechtigten
</label>
</div>

<div class="form-check mb-3">
<input class="form-check-input"
       type="checkbox"
       name="agreeAgb"
       value="on"
       required>
<label class="form-check-label">
<a href="https://plusfit24.de/wp-content/uploads/2022/11/AG_PlusFit24.pdf" target="_blank" rel="noopener noreferrer">
    AGB gelesen
</a>
</label>
</div>

<div class="d-flex justify-content-between mt-4">
<button type="button" class="btn btn-secondary" onclick="nextStep(2)">
← Zurück
</button>

<button type="submit" class="btn btn-success btn-lg">
Abschließen
</button>
</div>

</div>

</form>
</div>

<script>

window.fromServerError = <%= typeof errorStep !== 'undefined' ? 'true' : 'false' %>;
let currentStep = <%= typeof errorStep !== 'undefined' ? errorStep : 1 %>;

const form = document.getElementById('registerForm');

function nextStep(step){

    if(step > currentStep && !window.fromServerError){
        if(!validateStep(currentStep)) return;
    }

    saveForm();

    currentStep = step;

    document.querySelectorAll('.step')
        .forEach(s => s.classList.remove('active'));

    document.getElementById('step'+step)
        .classList.add('active');

    updateNav();
    updateProgress();

    if(step === 3){
        buildSummary();
        checkAgeAndConsent();
    }
}

function validateStep(step){
    const container = document.getElementById('step'+step);
    const fields = container.querySelectorAll('input,select');

    for(let field of fields){
        if(!field.checkValidity()){
            field.reportValidity();
            return false;
        }
    }
    return true;
}

function updateProgress(){
    document.getElementById('progressBar')
    .style.width = (currentStep * 33) + '%';
}

function updateNav(){
    document.querySelectorAll('.step-nav span')
        .forEach(n => n.classList.remove('active'));

    document.getElementById('nav'+currentStep)
        .classList.add('active');
}

function isUnder18(){
    const bday = document.getElementById('geburtsdatum').value;
    if(!bday) return false;

    const birth = new Date(bday);
    const today = new Date();

    let age = today.getFullYear() - birth.getFullYear();
    if(today.getMonth() < birth.getMonth() ||
       (today.getMonth() === birth.getMonth() &&
        today.getDate() < birth.getDate())){
        age--;
    }
    return age < 18;
}

function checkAgeAndConsent(){
    const box = document.getElementById('consentBox');
    const checkbox = document.getElementById('agreeConsent');

    if(isUnder18()){
        box.classList.remove('d-none');
        checkbox.required = true;
    }else{
        box.classList.add('d-none');
        checkbox.required = false;
        checkbox.checked = true;
    }
}

form.addEventListener('input', saveForm);

function saveForm(){
    const data = {};
    Array.from(form.elements).forEach(el=>{
        if(!el.name) return;
        if(el.type === 'checkbox'){
            data[el.name] = el.checked ? 'on' : '';
        }else{
            data[el.name] = el.value;
        }
    });
    localStorage.setItem('registerData', JSON.stringify(data));
}

function loadForm(){
    const data = JSON.parse(localStorage.getItem('registerData'));
    if(!data) return;

    Object.keys(data).forEach(key=>{
        const field = form.elements[key];
        if(!field) return;

        if(field.type === 'checkbox'){
            field.checked = data[key] === 'on';
        }else{
            field.value = data[key];
        }
    });
}

function buildSummary(){
    const data = JSON.parse(localStorage.getItem('registerData'));
    if(!data) return;

    document.getElementById('summaryBox').innerHTML = `
    <b>Name:</b> ${data.vorname} ${data.nachname}<br>
    <b>Geburtsdatum:</b> ${data.geburtsdatum}<br>
    <b>Email:</b> ${data.email}<br>
    <b>Mobil:</b> ${data.mobil}<br>
    <b>Adresse:</b> ${data.strasse} ${data.hausnummer}, ${data.plz} ${data.ort}<br>
    <b>IBAN:</b> ${data.iban}
    `;
}

form.addEventListener('submit',()=>{
    localStorage.removeItem('registerData');
});

loadForm();
setTimeout(()=>{ nextStep(currentStep); },100);

</script>

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