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

{% block title %}Warteliste – 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_register') }}" class="fisch-back-link">
        <i class="fas fa-arrow-left"></i> Zurück zur Anmeldung
    </a>

    <div class="fisch-hero">
        <h1>Warteliste</h1>
        <p class="mb-0">Wenn Ihr Wunschkurs ausgebucht ist, können Sie sich hier vormerken lassen.</p>
    </div>

    {% if testBookingMode|default(false) %}
        <div class="alert alert-info">
            <strong>Testmodus.</strong> Warteliste über den Testlink — öffentliche Anmeldung ist geschlossen.
        </div>
    {% endif %}

        <form id="fisch-waitlist-form" class="fisch-card"
              data-waitlist-url="{{ path('fisch_booking_api_waitlist') }}">

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

            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label" for="wlFirstName">Vorname Kind *</label>
                    <input type="text" class="form-control" id="wlFirstName" name="childFirstName" required maxlength="120">
                </div>
                <div class="col-md-6">
                    <label class="form-label" for="wlLastName">Nachname Kind *</label>
                    <input type="text" class="form-control" id="wlLastName" name="childLastName" required maxlength="120">
                </div>
                <div class="col-md-6">
                    <label class="form-label" for="wlBirth">Geburtsdatum *</label>
                    <input type="date" class="form-control" id="wlBirth" name="birthDate" required>
                </div>
                <div class="col-md-6">
                    <label class="form-label" for="wlEmail">E-Mail Eltern *</label>
                    <input type="email" class="form-control" id="wlEmail" name="parentEmail" required maxlength="255">
                </div>
                <div class="col-md-6">
                    <label class="form-label" for="wlPhone">Telefon (optional)</label>
                    <input type="tel" class="form-control" id="wlPhone" name="phone" maxlength="50">
                </div>
                <div class="col-md-6">
                    <label class="form-label" for="wlGuardian">Erziehungsberechtigte (optional)</label>
                    <input type="text" class="form-control" id="wlGuardian" name="guardianName" maxlength="255">
                </div>
                <div class="col-12">
                    <label class="form-label">Bevorzugte Schwimmbäder *</label>
                    <div class="row g-2">
                        {% for pool in pools %}
                            <div class="col-md-4">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="preferredPoolIds[]" value="{{ pool.id }}" id="pool-{{ pool.id }}">
                                    <label class="form-check-label" for="pool-{{ pool.id }}">{{ pool.name }}</label>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-12">
                    <label class="form-label">Bevorzugte Uhrzeiten *</label>
                    <div class="d-flex flex-wrap gap-2">
                        {% for time in startTimes %}
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="preferredTimes[]" value="{{ time }}" id="time-{{ time|replace({':': ''}) }}">
                                <label class="form-check-label" for="time-{{ time|replace({':': ''}) }}">{{ time }}</label>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <button type="submit" class="fisch-btn-primary mt-4" id="fisch-waitlist-submit">
                <i class="fas fa-list"></i> Auf Warteliste setzen
            </button>
        </form>
</div>
{% endblock %}

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