{% extends "base.html" %}

{% block title %}Buchung prüfen{% endblock %}

{% block head %}
{{ super() }}
<style>
    .booking-review {
        max-width: 920px;
        margin: 2rem auto 3rem;
        padding: 0;
    }

    .booking-review__panel {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 244, 0.96));
        border: 1px solid rgba(28, 90, 99, 0.14);
        border-radius: 26px;
        padding: clamp(1.4rem, 2.6vw, 2.2rem);
        box-shadow: 0 18px 44px rgba(18, 49, 54, 0.08);
    }

    .booking-review__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.42rem 0.82rem;
        border-radius: 999px;
        background: #e8f4f4;
        color: #166271;
        font-weight: 700;
        margin-bottom: 1rem;
    }

    .booking-review__lead {
        margin-top: 0.75rem;
        max-width: 66ch;
    }

    .booking-review__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        margin: 1.5rem 0;
    }

    .booking-review__card {
        background: #ffffff;
        border: 1px solid #dbe6e7;
        border-radius: 18px;
        padding: 1rem 1.1rem;
    }

    .booking-review__label {
        display: block;
        font-size: 0.88rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: #5e757d;
        margin-bottom: 0.45rem;
    }

    .booking-review__value {
        color: #173a42;
        font-weight: 700;
        line-height: 1.45;
    }

    .booking-review__note {
        padding: 1rem 1.1rem;
        border-radius: 18px;
        background: #f8fbfb;
        border: 1px solid #dbe6e7;
        color: #49626b;
        line-height: 1.65;
    }

    .booking-review__form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
        margin-top: 1.25rem;
    }

    .booking-review__field {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .booking-review__field--full {
        grid-column: 1 / -1;
    }

    .booking-review__field label {
        font-weight: 700;
        color: #2b4f58;
        font-size: 0.93rem;
    }

    .booking-review__field input,
    .booking-review__field textarea {
        border: 1px solid #cedbdd;
        border-radius: 12px;
        background: #ffffff;
        color: #173a42;
        padding: 0.75rem 0.82rem;
    }

    .booking-review__field textarea {
        min-height: 110px;
        resize: vertical;
    }

    .booking-review__consent {
        padding: 0.95rem 1rem;
        border-radius: 16px;
        background: #eef6f6;
        border: 1px solid #d2e2e2;
    }

    .booking-review__consent label {
        display: flex;
        gap: 0.7rem;
        align-items: flex-start;
        font-weight: 600;
        color: #21414a;
        line-height: 1.5;
    }

    .booking-review__consent input {
        margin-top: 0.2rem;
        width: auto;
        flex: 0 0 auto;
    }

    .booking-review__consent a {
        color: #0a4c74;
        text-decoration: underline;
    }

    .booking-review__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        margin-top: 1.5rem;
    }

    .booking-review__actions .btn,
    .booking-review__actions a {
        width: auto;
        min-width: 190px;
    }

    @media (max-width: 720px) {
        .booking-review__grid {
            grid-template-columns: 1fr;
        }

        .booking-review__form-grid {
            grid-template-columns: 1fr;
        }

        .booking-review__actions .btn,
        .booking-review__actions a {
            width: 100%;
            min-width: 0;
        }
    }
</style>
{% endblock %}

{% block content %}
<section class="booking-review">
    <div class="booking-review__panel">
        <span class="booking-review__eyebrow">Buchung prüfen</span>
        <h1>{{ title }}</h1>
        <p class="booking-review__lead">{{ intro }}</p>

        <div class="booking-review__grid" aria-label="Buchungsübersicht">
            <div class="booking-review__card">
                <span class="booking-review__label">Paket</span>
                <div class="booking-review__value">{{ package }}</div>
            </div>
            <div class="booking-review__card">
                <span class="booking-review__label">Preis</span>
                <div class="booking-review__value">{{ package_price }} €</div>
            </div>
            <div class="booking-review__card">
                <span class="booking-review__label">Angemeldet als</span>
                <div class="booking-review__value">{{ display_name }}</div>
            </div>
        </div>

        <div class="booking-review__note">
            Bitte prüfen Sie die Angaben noch einmal. Wenn alles korrekt ist, senden sie ihre Informationen mit dem folgenden Button an uns, wir senden ihnen frühstmöglich eine Rechnung per Email.
        </div>

        <form method="POST" action="{{ url_for('booking_payment') }}">
            <input type="hidden" name="package" value="{{ package_key }}">
            <input type="hidden" name="flow" value="{{ flow }}">

            <div class="booking-review__form-grid" aria-label="Pflichtdaten für Buchung">
                <div class="booking-review__field">
                    <label for="contact_person">Ansprechpartner *</label>
                    <input id="contact_person" name="contact_person" type="text" required maxlength="120" value="{{ form_data.contact_person }}">
                </div>
                <div class="booking-review__field">
                    <label for="school_name">Schule/Einrichtung *</label>
                    <input id="school_name" name="school_name" type="text" required maxlength="160" value="{{ form_data.school_name }}">
                    <div id="school_name_feedback" style="margin-top:0.4rem; font-size:0.9rem; color:#6b6b6b;"></div>
                </div>
                <div class="booking-review__field">
                    <label for="contact_email">E-Mail *</label>
                    <input id="contact_email" name="contact_email" type="email" required maxlength="160" value="{{ form_data.contact_email }}">
                </div>
                <div class="booking-review__field">
                    <label for="contact_phone">Telefon</label>
                    <input id="contact_phone" name="contact_phone" type="text" maxlength="60" value="{{ form_data.contact_phone }}">
                </div>
                <div class="booking-review__field booking-review__field--full">
                    <label for="billing_street">Straße *</label>
                    <input id="billing_street" name="billing_street" type="text" required maxlength="160" value="{{ form_data.billing_street }}">
                </div>
                <div class="booking-review__field">
                    <label for="billing_zip">PLZ *</label>
                    <input id="billing_zip" name="billing_zip" type="text" required maxlength="20" value="{{ form_data.billing_zip }}">
                </div>
                <div class="booking-review__field">
                    <label for="billing_city">Ort *</label>
                    <input id="billing_city" name="billing_city" type="text" required maxlength="120" value="{{ form_data.billing_city }}">
                </div>
                <div class="booking-review__field booking-review__field--full">
                    <label for="notes">Zusatzinformationen</label>
                    <textarea id="notes" name="notes" maxlength="600" placeholder="Optional: gewünschter Starttermin, besondere Anforderungen, Rückrufzeiten">{{ form_data.notes }}</textarea>
                </div>
                <div class="booking-review__field booking-review__field--full booking-review__consent">
                    <label for="agreements_accepted">
                        <input id="agreements_accepted" name="agreements_accepted" type="checkbox" value="yes" required {% if form_data.agreements_accepted %}checked{% endif %}>
                        <span>Ich habe die <a href="{{ url_for('nutzungsbedingungen') }}" target="_blank" rel="noopener">Lizenzvereinbarung</a>, die <a href="{{ url_for('datenschutz') }}" target="_blank" rel="noopener">Datenschutzerklärung</a> und die DSGVO-Hinweise gelesen und akzeptiere sie.</span>
                    </label>
                </div>
            </div>

            <div class="booking-review__actions">
                <button id="booking_submit" class="btn" type="submit">{{ confirm_label }}</button>
                <a class="btn secondary" href="{{ url_for('preise') }}">Zurück zu den Preisen</a>
            </div>
        </form>
    </div>
</section>
<script>
(() => {
    const input = document.getElementById('school_name');
    const feedback = document.getElementById('school_name_feedback');
    const submit = document.getElementById('booking_submit');
    let timer = null;

    function setFeedback(text, ok) {
        feedback.textContent = text;
        feedback.style.color = ok ? '#1b8a3e' : '#b02a37';
        submit.disabled = !ok;
    }

    async function check(name) {
        if (!name || name.trim().length < 3) {
            feedback.textContent = '';
            submit.disabled = false;
            return;
        }
        try {
            const params = new URLSearchParams({ school_name: name });
            const res = await fetch(`/instance_request/check_subdomain?${params.toString()}`, { credentials: 'same-origin' });
            if (!res.ok) throw new Error('Netzwerkfehler');
            const j = await res.json();
            setFeedback(j.message || (j.available ? 'verfügbar' : 'nicht verfügbar'), !!j.available);
        } catch (e) {
            setFeedback('Prüfung fehlgeschlagen (Netzwerk).', false);
        }
    }

    if (input) {
        input.addEventListener('input', (e) => {
            clearTimeout(timer);
            const val = e.target.value;
            timer = setTimeout(() => check(val), 500);
        });

        // initial check on load
        if (input.value && input.value.trim()) {
            check(input.value);
        }
    }
})();
</script>
{% endblock %}