Cancel order

<!-- Start: Widerrufsformular -->
<div class="widerruf-kompakt-container">
<form action="mailto:kfz-elektrik@gmx.de" enctype="text/plain" id="widerrufForm" method="POST" onsubmit="zeigeBestaetigung(event)">
<h2>Bestellung widerrufen</h2>

<div class="wk-form-row">
<div class="wk-form-group"><label for="nachname">Name:</label> <input id="nachname" name="Nachname" required="" type="text" /></div>

<div class="wk-form-group"><label for="vorname">Vorname:</label> <input id="vorname" name="Vorname" required="" type="text" /></div>
</div>

<div class="wk-form-group"><label for="email">Kunden E-Mail Adresse:</label> <input id="email" name="Kunden-Email" required="" type="email" /></div>

<div class="wk-form-group"><label for="bestellnummer">Bestellnummer:</label> <input id="bestellnummer" name="Bestellnummer" required="" type="text" /></div>

<div class="wk-form-group"><label for="bestelldatum">Bestelldatum:</label> <input id="bestelldatum" name="Bestelldatum" required="" type="date" /></div>
<button class="wk-submit-btn" type="submit">Formular versenden</button></form>
<!-- Bestätigungsnachricht -->

<div class="wk-success-box" id="successMessage">
<h3>Vielen Dank für Ihre Anfrage!</h3>
<!-- Die IDs erlauben es JavaScript, die Daten hier dynamisch einzufügen -->

<p>Widerruf Ihrer Bestellung , bestellt am .</p>

<p style="margin-top: 8px;">Ihre Anfrage wird schnellstens bearbeitet.</p>
</div>
</div>
<style type="text/css">/* Spezifisches Styling nur für die Formular-Box */
    .widerruf-kompakt-container {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
        background-color: #ffffff;
        color: #1e293b;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        width: 100%;
        max-width: 480px;
        box-sizing: border-box;
    }

    .widerruf-kompakt-container h2 {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 15px 0;
        text-align: center;
        color: #0f172a;
    }

    .wk-form-row {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }

    .wk-form-row .wk-form-group {
        flex: 1;
        margin-bottom: 0;
    }

    .wk-form-group {
        margin-bottom: 10px;
    }

    .wk-form-group label {
        display: block;
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 3px;
        color: #475569;
    }

    .wk-form-group input {
        width: 100%;
        padding: 6px 10px;
        font-size: 14px;
        border: 1px solid #e2e8f0;
        border-radius: 4px;
        background-color: #f1f5f9;
        color: #1e293b;
        box-sizing: border-box;
        outline: none;
        transition: background-color 0.2s, border-color 0.2s;
    }

    .wk-form-group input:focus {
        background-color: #ffffff;
        border-color: #2563eb;
        box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
    }

    .wk-submit-btn {
        width: 100%;
        background-color: #2563eb;
        color: white;
        border: none;
        padding: 8px 15px;
        font-size: 14px;
        font-weight: 600;
        border-radius: 4px;
        cursor: pointer;
        margin-top: 5px;
        transition: background-color 0.2s;
    }

    .wk-submit-btn:hover {
        background-color: #1d4ed8;
    }

    .wk-success-box {
        display: none;
        background-color: #f0fdf4;
        border: 1px solid #bbf7d0;
        color: #16a34a;
        padding: 15px;
        border-radius: 6px;
        text-align: center;
    }

    .wk-success-box h3 {
        font-size: 16px;
        margin-top: 0;
        margin-bottom: 8px;
        font-weight: 700;
    }

    .wk-success-box p {
        font-size: 13px;
        margin: 0;
        color: #166534;
        line-height: 1.4;
    }
</style>
<script>
    function zeigeBestaetigung(event) {
        // Werte aus den Feldern auslesen
        const nr = document.getElementById('bestellnummer').value;
        const datumRaw = document.getElementById('bestelldatum').value;
        
        // Datum in deutsches Format (TT.MM.JJJJ) umwandeln falls vorhanden
        let datumDe = datumRaw;
        if(datumRaw) {
            const parts = datumRaw.split('-');
            if(parts.length === 3) {
                datumDe = `${parts[2]}.${parts[1]}.${parts[0]}`;
            }
        }

        // Werte dynamisch in den Text der Erfolgsbox schreiben
        document.getElementById('dynamicBestellnummer').innerText = nr;
        document.getElementById('dynamicBestelldatum').innerText = datumDe;

        // Betreffzeile für die E-Mail dynamisch anpassen
        const form = document.getElementById('widerrufForm');
        form.action = `mailto:mustermann@gmx.de?subject=Widerruf%20Bestellung%20${encodeURIComponent(nr)}`;

        // Formular verstecken und Bestätigung einblenden
        form.style.display = 'none';
        document.getElementById('successMessage').style.display = 'block';
    }

    // Datumsbegrenzung auf die letzten 30 Tage
    const dateInput = document.getElementById('bestelldatum');
    const today = new Date();
    
    const yyyy = today.getFullYear();
    let mm = String(today.getMonth() + 1).padStart(2, '0');
    let dd = String(today.getDate()).padStart(2, '0');
    dateInput.max = `${yyyy}-${mm}-${dd}`;

    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(today.getDate() - 30);
    let minMm = String(thirtyDaysAgo.getMonth() + 1).padStart(2, '0');
    let minDd = String(thirtyDaysAgo.getDate()).padStart(2, '0');
    dateInput.min = `${thirtyDaysAgo.getFullYear()}-${minMm}-${minDd}`;
</script><!-- Ende: Widerrufsformular -->