{% extends 'fisch_booking/_layout.html.twig' %}

{% block title %}Kind anmelden – Fit wie ein Fisch{% endblock %}

{% block hero %}{% endblock %}

{% block content %}
<div class="fisch-page">
    {% if registration %}
        <div class="fisch-card text-center py-5">
            <div class="text-success mb-3" style="font-size: 3rem;">
                <i class="fas fa-circle-check"></i>
            </div>
            <h1 class="h3">Anmeldung abgeschlossen</h1>
            <p class="mb-2">
                <strong>{{ registration.childFullName }}</strong> ist fest angemeldet
                {% if registration.course %}
                    im <strong>{{ registration.course.pool.name }}</strong>
                    um <strong>{{ registration.course.startTimeFormatted }}</strong> Uhr
                {% endif %}.
            </p>
            <p class="text-muted">
                Die Bestätigung mit allen Infos zum Schwimmbad geht per E-Mail an Sie raus.
            </p>
        </div>
    {% elseif link is null %}
        <div class="fisch-card text-center py-5">
            <div class="text-danger mb-3" style="font-size: 3rem;">
                <i class="fas fa-circle-exclamation"></i>
            </div>
            <h1 class="h3">Link nicht gefunden</h1>
            <p class="text-muted">{{ error }}</p>
        </div>
    {% elseif link.used %}
        <div class="fisch-card text-center py-5">
            <div class="text-warning mb-3" style="font-size: 3rem;">
                <i class="fas fa-circle-info"></i>
            </div>
            <h1 class="h3">Dieser Link wurde bereits verwendet</h1>
            <p class="text-muted">
                Pro Link kann ein Kind angemeldet werden. Bitte wenden Sie sich an die
                Einrichtung, wenn Sie einen weiteren Platz brauchen.
            </p>
        </div>
    {% else %}
        {% set bulk = link.bulkRegistration %}
        <div class="fisch-card">
            <h1 class="h3 mb-3">Kind für den Schwimmkurs anmelden</h1>

            {% if error %}
                <div class="alert alert-danger">{{ error }}</div>
            {% endif %}

            {% if introText %}
                <p>{{ introText|nl2br }}</p>
            {% endif %}

            <ul>
                <li><strong>Einrichtung:</strong> {{ bulk.institutionName ?: '–' }}</li>
                <li><strong>Schwimmbad:</strong> {{ bulk.course.pool.name }}</li>
                <li><strong>Uhrzeit:</strong> {{ bulk.course.startTimeFormatted }} Uhr</li>
                <li><strong>Altersgruppe:</strong> {{ bulk.course.ageGroupLabel }}</li>
            </ul>

            {% if bulk.course.pool.hasTravelInfo %}
                <details class="mb-3">
                    <summary class="fw-semibold">Anfahrt und Parken</summary>
                    {% if bulk.course.pool.address %}
                        <p class="mb-1"><strong>Adresse:</strong><br>{{ bulk.course.pool.address|nl2br }}</p>
                    {% endif %}
                    {% if bulk.course.pool.directions %}
                        <p class="mb-1"><strong>Anfahrt:</strong><br>{{ bulk.course.pool.directions|nl2br }}</p>
                    {% endif %}
                    {% if bulk.course.pool.parkingInfo %}
                        <p class="mb-1"><strong>Parken:</strong><br>{{ bulk.course.pool.parkingInfo|nl2br }}</p>
                    {% endif %}
                    {% if bulk.course.pool.mapsUrl %}
                        <p class="mb-0"><a href="{{ bulk.course.pool.mapsUrl }}" target="_blank" rel="noopener">Karte öffnen</a></p>
                    {% endif %}
                </details>
            {% endif %}

            <form method="post">
                {% include 'fisch_booking/_dynamic_fields.html.twig' with {fields: fields} %}

                <button type="submit" class="fisch-btn-primary">
                    <i class="fas fa-check"></i> Verbindlich anmelden
                </button>
            </form>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    const toggle = document.querySelector('[data-health-toggle]');
    const detail = document.querySelector('[data-health-detail]');
    if (!toggle || !detail) return;
    function sync() {
        detail.style.display = toggle.checked ? '' : 'none';
    }
    toggle.addEventListener('change', sync);
    sync();
})();
</script>
{% endblock %}