<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Plusfit – Mitglied bearbeiten</title>

<style>
body {
    font-family: Arial, sans-serif;
    background: #f6f7f9;
}

.container {
    max-width: 800px;
    margin: 20px auto;
    background: #fff;
    padding: 20px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

h2 {
    margin-top: 0;
}

h3 {
    margin-top: 25px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

label {
    display: block;
    font-weight: bold;
    margin-top: 10px;
}

input {
    width: 100%;
    padding: 8px;
    margin-top: 3px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* 🔶 Leere Felder */
.empty-field {
    background-color: #fff8e1;
    border: 1px dashed #f0ad4e;
}

/* 🔥 Fokus-Effekt */
.empty-field:focus {
    background-color: #ffffff;
    border-color: #ff9800;
    box-shadow: 0 0 5px rgba(255,152,0,0.7);
}

/* Pflichtfelder */
.required {
    border-left: 4px solid #2e7d32;
}

button {
    margin-top: 25px;
    padding: 10px 18px;
    background: #1976d2;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 15px;
    cursor: pointer;
}

button:hover {
    background: #1565c0;
}

.status {
    margin-top: 10px;
}
</style>
</head>

<body>
<div class="container">
<%- include('partials/header') %>
<h2>Mitglied bearbeiten</h2>

<form method="POST">

<h3>Vertrag</h3>

<label>Vertragsnummer</label>
<input
    value="<%= user.vertragsnummer %>"
    readonly
    class="form-control mb-2 bg-light">

<label>Vertragsvariante</label>
<input
    type="number"
    name="vertragsvariante"
    value="<%= user.vertragsvariante || '' %>"
    class="form-control mb-2 <%= user.vertragsvariante ? '' : 'empty-field' %>"
    placeholder="z. B. 1, 2 oder 3">


<h3>Persönliche Daten</h3>

<label>Vorname</label>
<input name="vorname"
       value="<%= user.vorname || '' %>"
       required
       class="required <%= user.vorname ? '' : 'empty-field' %>">

<label>Nachname</label>
<input name="nachname"
       value="<%= user.nachname || '' %>"
       required
       class="required <%= user.nachname ? '' : 'empty-field' %>">

<label>Geburtsdatum</label>
<input type="date"
       name="geburtsdatum"
       value="<%= user.geburtsdatum || '' %>">

<h3>Adresse</h3>

<label>Straße</label>
<input name="strasse"
       value="<%= user.strasse || '' %>"
       placeholder="Straße fehlt"
       class="<%= user.strasse ? '' : 'empty-field' %>">

<label>Hausnummer</label>
<input name="hausnummer"
       value="<%= user.hausnummer || '' %>"
       placeholder="Hausnummer fehlt"
       class="<%= user.hausnummer ? '' : 'empty-field' %>">

<label>PLZ</label>
<input name="plz"
       value="<%= user.plz || '' %>"
       placeholder="PLZ fehlt"
       class="<%= user.plz ? '' : 'empty-field' %>">

<label>Ort</label>
<input name="ort"
       value="<%= user.ort || '' %>"
       placeholder="Ort fehlt"
       class="<%= user.ort ? '' : 'empty-field' %>">

<label>Land</label>
<input name="land"
       value="<%= user.land || '' %>"
       placeholder="Land fehlt"
       class="<%= user.land ? '' : 'empty-field' %>">

<h3>Kontakt</h3>

<label>Mobilnummer</label>
<input name="mobil"
       value="<%= user.mobil || '' %>"
       placeholder="Mobilnummer fehlt"
       class="<%= user.mobil ? '' : 'empty-field' %>">

<label>Telefonnummer</label>
<input name="telefon"
       value="<%= user.telefon || '' %>"
       placeholder="Telefonnummer fehlt"
       class="<%= user.telefon ? '' : 'empty-field' %>">

<label>E-Mail</label>
<input name="email"
       type="email"
       value="<%= user.email || '' %>"
       placeholder="E-Mail fehlt"
       class="<%= user.email ? '' : 'empty-field' %>">

<h3>SEPA Lastschrift</h3>

<label>Kontoinhaber</label>
<input name="kontoinhaber"
       value="<%= user.kontoinhaber || '' %>"
       placeholder="Kontoinhaber fehlt"
       class="<%= user.kontoinhaber ? '' : 'empty-field' %>">

<label>IBAN</label>
<input name="iban"
       value="<%= user.iban || '' %>"
       placeholder="IBAN fehlt"
       class="<%= user.iban ? '' : 'empty-field' %>">

<label>BIC</label>
<input name="bic"
       value="<%= user.bic || '' %>"
       placeholder="BIC fehlt"
       class="<%= user.bic ? '' : 'empty-field' %>">

<label>Mandatsreferenz</label>
<input name="mandatsreferenz"
       value="<%= user.mandatsreferenz || '' %>"
       placeholder="Mandatsreferenz fehlt"
       class="<%= user.mandatsreferenz ? '' : 'empty-field' %>">

<h3>Status</h3>

<label class="status">
<input type="checkbox"
       name="gesperrt"
       <%= user.gesperrt ? 'checked' : '' %>>
 Mitglied gesperrt
</label>

<button type="submit">💾 Änderungen speichern</button>

</form>

<br>
<a href="/users/list">⬅ Zurück zur Mitgliederübersicht</a>
<%- include('partials/footer') %>
</div>
</body>
</html>
