{% 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__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">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 passt, senden Sie die Buchung mit dem folgenden Button per POST an /booking/payment.
        </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>
                <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>

            <div class="booking-review__actions">
                <button 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>
{% endblock %}