{% sw_extends '@Storefront/storefront/base.html.twig' %}

{% block base_content %}
    {% set state = page.state %}
    <div class="container rac-page">
        <header class="rac-hero">
            <span class="rac-hero-word" aria-hidden="true">Ab 18</span>
            <div class="rac-hero-copy">
                <h1>Alters&shy;nachweis</h1>
                <p>Wir geben E-Zigaretten und Liquids nur an Personen ab {{ page.minAge }} Jahren ab. Dafür brauchen wir drei Angaben aus deinem Ausweis oder Pass – kein Abtippen ganzer Zeilen, kein Upload.</p>
            </div>
        </header>

        {% if state.verified and not state.exempt %}
            <div class="rac-done">
                <h2>Alles erledigt</h2>
                <p>Dein Alter ist bestätigt{% if state.expiresAt %} und gilt bis {{ state.expiresAt|date('d.m.Y') }}{% endif %}.</p>
                <a class="btn btn-primary" href="{{ path(page.redirectTo ?: 'frontend.checkout.cart.page') }}">Weiter zur Bestellung</a>
            </div>
        {% elseif state.pending %}
            <div class="rac-done is-pending">
                <h2>Wir prüfen dein Dokument</h2>
                <p>Sobald wir es angesehen haben, kannst du die Bestellung abschließen. In der Regel dauert das nur wenige Stunden – schau einfach noch einmal in den Warenkorb.</p>
                <a class="btn btn-light" href="{{ path('frontend.checkout.cart.page') }}">Zum Warenkorb</a>
            </div>
        {% else %}
            <div class="rac-grid">
                <form class="rac-form" action="{{ path('frontend.riccardo.age.verify') }}" method="post" data-rac-form="true">
                    <input type="hidden" name="redirectTo" value="{{ page.redirectTo }}">

                    <h2>Deine Angaben</h2>
                    <fieldset class="rac-doctype">
                        <legend>Welches Dokument hast du zur Hand?</legend>
                        <label class="rac-radio"><input type="radio" name="documentType" value="id_card" checked><span>Personalausweis</span></label>
                        <label class="rac-radio"><input type="radio" name="documentType" value="passport"><span>Reisepass</span></label>
                    </fieldset>

                    {% sw_include '@RiccardoAgeCheck/storefront/riccardo-age-check/mrz-schema.html.twig' %}

                    <div class="rac-field">
                        <label for="rac-number">Dokumentnummer</label>
                        <div class="rac-field-row">
                            <input id="rac-number" type="text" name="documentNumber" maxlength="9" required
                                   autocomplete="off" spellcheck="false" inputmode="text" data-rac-value="document"
                                   placeholder="T22000129">
                            <span class="rac-check">
                                <label for="rac-number-check">Prüfziffer</label>
                                <input id="rac-number-check" type="text" name="documentCheck" maxlength="1" inputmode="numeric"
                                       pattern="[0-9]" required data-rac-check="document">
                            </span>
                        </div>
                        <small>Steht auf dem Dokument und in der unteren Zeile, die Prüfziffer direkt dahinter.</small>
                    </div>

                    <div class="rac-field">
                        <label for="rac-birth">Geburtsdatum</label>
                        <div class="rac-field-row">
                            <input id="rac-birth" type="date" name="birthDate" required data-rac-value="birth" max="{{ "now"|date('Y-m-d') }}">
                            <span class="rac-check">
                                <label for="rac-birth-check">Prüfziffer</label>
                                <input id="rac-birth-check" type="text" name="birthCheck" maxlength="1" inputmode="numeric"
                                       pattern="[0-9]" required data-rac-check="birth">
                            </span>
                        </div>
                        <small>In der unteren Zeile steht das Datum als JJMMTT, dahinter die Prüfziffer.</small>
                    </div>

                    <div class="rac-field">
                        <label for="rac-expiry">Gültig bis</label>
                        <div class="rac-field-row">
                            <input id="rac-expiry" type="date" name="expiryDate" required data-rac-value="expiry">
                            <span class="rac-check">
                                <label for="rac-expiry-check">Prüfziffer</label>
                                <input id="rac-expiry-check" type="text" name="expiryCheck" maxlength="1" inputmode="numeric"
                                       pattern="[0-9]" required data-rac-check="expiry">
                            </span>
                        </div>
                    </div>

                    <div class="rac-field rac-field--state">
                        <label for="rac-state">Ausgestellt in</label>
                        <select id="rac-state" name="issuingState">
                            <option value="D" selected>Deutschland</option>
                            <option value="AUT">Österreich</option>
                            <option value="CHE">Schweiz</option>
                            <option value="OTHER">anderes Land</option>
                        </select>
                    </div>

                    <p class="rac-hint" data-rac-hint role="status"></p>
                    <button class="btn btn-primary btn-lg" type="submit">Alter bestätigen</button>

                    <details class="rac-advanced">
                        <summary>Ich habe die Zeilen schon abgescannt oder kopiert</summary>
                        <label for="rac-mrz">Maschinenlesbare Zeilen komplett einfügen</label>
                        <textarea id="rac-mrz" name="mrz" rows="3" spellcheck="false" autocomplete="off" placeholder="Zeilen hier einfügen – dann brauchst du die Felder oben nicht."></textarea>
                    </details>
                </form>

                <aside class="rac-side">
                    <div class="rac-privacy">
                        <h3>Was wir speichern</h3>
                        <p>Nur, <strong>dass</strong> die Prüfung erfolgreich war: Dokumentart, Ausstellerstaat, dein Alter in Jahren und den Zeitpunkt.</p>
                        <p>Nicht gespeichert werden Dokumentnummer, Geburtsdatum und Name.</p>
                        <p>Die Prüfung gilt {% if page.validityMonths %}{{ page.validityMonths }} Monate{% else %}unbegrenzt{% endif %} für dein Kundenkonto. Als Gast prüfen wir bei jeder Bestellung.</p>
                        <p>Mehr dazu in unserer <a href="/datenschutz">Datenschutzerklärung</a>.</p>
                    </div>

                    {% if page.uploadAllowed %}
                        <div class="rac-upload">
                            <h3>Kommst du nicht weiter?</h3>
                            <p>Dann lade ein Foto deines Dokuments hoch. Wir prüfen es von Hand und löschen die Datei danach wieder.</p>
                            <form action="{{ path('frontend.riccardo.age.upload') }}" method="post" enctype="multipart/form-data">
                                <input type="hidden" name="redirectTo" value="{{ page.redirectTo }}">
                                <label for="rac-document">Ausweis oder Pass (JPG, PNG, PDF)</label>
                                <input id="rac-document" type="file" name="document" accept="image/jpeg,image/png,image/webp,application/pdf" required>
                                <button class="btn btn-light" type="submit">Dokument senden</button>
                            </form>
                            <p class="rac-upload-hint">Alles außer Geburtsdatum, Gültigkeit und Dokumentnummer darfst du abdecken.</p>
                        </div>
                    {% endif %}
                </aside>
            </div>
        {% endif %}
    </div>
{% endblock %}