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

{% block title %}Anmeldung – Fit wie ein Fisch{% endblock %}

{% block hero %}
<div class="fisch-carousel fisch-carousel--compact">
    <img class="fisch-carousel-image" src="{{ asset('images/fisch/hero.png') }}" alt="Fit wie ein Fisch">
</div>
{% endblock %}

{% block content %}
<div class="fisch-page">
    <a href="{{ path('fisch_booking_landing') }}" class="fisch-back-link">
        <i class="fas fa-arrow-left"></i> Zurück zur Startseite
    </a>

    <div class="fisch-hero">
        <h1>Anmeldung {{ seasonYear }}</h1>
        <p class="mb-0">Bitte füllen Sie alle Pflichtfelder aus. Die Kurszeit wird automatisch an das Alter Ihres Kindes angepasst.</p>
    </div>

    {% if testBookingMode|default(false) %}
        <div class="alert alert-info">
            <strong>Testmodus.</strong> Die öffentliche Anmeldephase ist geschlossen — diese Maske ist nur über den
            Testlink erreichbar. Sie können beliebig viele Testbuchungen hintereinander durchführen.
        </div>
    {% endif %}

        <form id="fisch-registration-form" class="fisch-card"
              data-slots-url="{{ path('fisch_booking_api_slots') }}"
              data-register-url="{{ path('fisch_booking_api_register') }}"
              data-waitlist-url="{{ path('fisch_booking_waitlist') }}">

            <div id="fisch-form-error" class="alert alert-danger d-none" role="alert"></div>

            <h2>Kind</h2>
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label" for="childFirstName">Vorname *</label>
                    <input type="text" class="form-control" id="childFirstName" name="childFirstName" required maxlength="120">
                </div>
                <div class="col-md-6">
                    <label class="form-label" for="childLastName">Nachname *</label>
                    <input type="text" class="form-control" id="childLastName" name="childLastName" required maxlength="120">
                </div>
                <div class="col-12 fisch-birth-highlight">
                    <label class="form-label fw-bold" for="birthDate">Geburtsdatum des Kindes *</label>
                    <input type="date" class="form-control" id="birthDate" name="birthDate" required>
                    <p class="fisch-birth-hint mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        Freie Kursplätze werden erst nach Eintragen des Geburtsdatums angezeigt.
                        Die Kursart (5–6 oder 7–12 Jahre) wählen Sie nicht selbst.
                    </p>
                </div>
                <div class="col-12">
                    <label class="form-label" for="address">Adresse *</label>
                    <input type="text" class="form-control" id="address" name="address" required maxlength="500" placeholder="Straße, PLZ Ort">
                </div>
                <div class="col-md-6">
                    <label class="form-label" for="phone">Handynummer / Telefon *</label>
                    <input type="tel" class="form-control" id="phone" name="phone" required maxlength="50">
                </div>
            </div>

            <h2>Eltern / Erziehungsberechtigte</h2>
            <div class="row g-3 mb-4">
                <div class="col-md-6">
                    <label class="form-label" for="parentEmail">E-Mail *</label>
                    <input type="email" class="form-control" id="parentEmail" name="parentEmail" required maxlength="255">
                </div>
                <div class="col-md-6">
                    <label class="form-label" for="guardianName">Name Erziehungsberechtigte *</label>
                    <input type="text" class="form-control" id="guardianName" name="guardianName" required maxlength="255">
                </div>
                <div class="col-12">
                    <label class="form-label">Gesundheitliche Einschränkungen *</label>
                    <div class="d-flex gap-3 mb-2">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="hasHealthRestrictions" id="healthNo" value="0" checked>
                            <label class="form-check-label" for="healthNo">Nein</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="hasHealthRestrictions" id="healthYes" value="1">
                            <label class="form-check-label" for="healthYes">Ja</label>
                        </div>
                    </div>
                    <div id="health-details-wrap" style="display: none;">
                        <textarea class="form-control" name="healthRestrictions" rows="2" maxlength="2000" placeholder="Bitte kurz beschreiben"></textarea>
                    </div>
                </div>
            </div>

            <h2>Schwimmbad &amp; Uhrzeit</h2>
            <div class="row g-3 mb-3">
                <div class="col-md-6">
                    <label class="form-label" for="poolId">Schwimmbad *</label>
                    <select class="form-select" id="poolId" name="poolId" required>
                        <option value="">Bitte wählen…</option>
                        {% for pool in pools %}
                            <option value="{{ pool.id }}">{{ pool.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-12">
                    <p id="fisch-age-group-label" class="fw-semibold text-primary mb-1"></p>
                    <p id="fisch-slots-hint" class="text-muted small">Bitte Geburtsdatum und Schwimmbad wählen.</p>
                    <div id="fisch-slots-container" class="fisch-time-slots"></div>
                </div>
            </div>

            <div class="d-flex flex-wrap gap-2 mt-4">
                <button type="submit" class="fisch-btn-primary" id="fisch-submit-btn">
                    <i class="fas fa-paper-plane"></i> Anmeldung absenden
                </button>
                <a href="{{ path('fisch_booking_waitlist') }}" class="fisch-btn-outline">
                    <i class="fas fa-list"></i> Warteliste
                </a>
            </div>
        </form>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ asset('js/fisch-booking-form.js') }}"></script>
{% endblock %}