{% extends 'admin_base.html.twig' %}

{% block title %}Teilnehmer – Fit wie ein Fisch{% endblock %}
{% block header_title %}<i class="fas fa-child me-2"></i>Teilnehmer{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('css/fisch-admin.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
{% set actions %}
    <a href="{{ path('admin_fisch_participants_export') }}" class="btn btn-outline-success btn-sm">
        <i class="fas fa-file-csv me-1"></i> CSV-Export
    </a>
    <span class="badge rounded-pill" style="background: var(--fisch-admin-primary);">{{ participants|length }} Einträge</span>
{% endset %}
{% include 'admin/fisch/_fisch_page_header.html.twig' with {
    title: 'Alle Teilnehmer',
    icon: 'child',
    subtitle: 'Saison ' ~ seasonYear ~ ' — Anmeldungen über alle Kurse',
    actions_html: actions
} %}

{% for label, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ label == 'error' ? 'danger' : label }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Schließen"></button>
        </div>
    {% endfor %}
{% endfor %}

<div class="fisch-toolbar">
    <div style="min-width: 220px; flex: 1; max-width: 360px;">
        <input type="search" id="fischParticipantSearch" class="form-control form-control-sm"
               placeholder="Suche Name, E-Mail, Schwimmbad…">
    </div>
    <div class="text-muted small mb-0" id="fischParticipantHint">{{ participants|length }} angezeigt</div>
</div>

<div class="fisch-table-wrap">
    <div class="table-responsive">
        <table class="table table-fisch mb-0" id="fischParticipantTable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Geburtsdatum</th>
                    <th>E-Mail</th>
                    <th>Schwimmbad</th>
                    <th>Uhrzeit</th>
                    <th>Angemeldet am</th>
                    <th class="text-end">Aktionen</th>
                </tr>
            </thead>
            <tbody>
                {% for p in participants %}
                    <tr data-search="{{ (p.childFirstName ~ ' ' ~ p.childLastName ~ ' ' ~ p.parentEmail ~ ' ' ~ p.course.pool.name ~ ' ' ~ p.course.startTimeFormatted)|lower }}">
                        <td class="fw-semibold">{{ p.childFirstName }} {{ p.childLastName }}</td>
                        <td>{{ p.birthDate|date('d.m.Y') }}</td>
                        <td>{{ p.parentEmail }}</td>
                        <td>{{ p.course.pool.name }}</td>
                        <td>{{ p.course.startTimeFormatted }} <span class="small text-muted">{{ p.course.ageGroupLabel }}</span></td>
                        <td>{{ p.createdAt|date('d.m.Y H:i') }}</td>
                        <td class="text-end text-nowrap">
                            <button type="button" class="btn btn-sm btn-outline-warning btn-action"
                                    data-bs-toggle="modal" data-bs-target="#moveModal{{ p.id }}"
                                    title="Verschieben">
                                <i class="fas fa-exchange-alt"></i>
                            </button>
                            <form method="post" action="{{ path('admin_fisch_participants_cancel', {id: p.id}) }}" class="d-inline"
                                  onsubmit="return confirm('Anmeldung wirklich stornieren?');">
                                <input type="hidden" name="_token" value="{{ csrf_token('fisch_participant_cancel_' ~ p.id) }}">
                                <button type="submit" class="btn btn-sm btn-outline-danger btn-action" title="Stornieren">
                                    <i class="fas fa-times"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="7" class="text-muted text-center py-4">Keine Anmeldungen.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% for p in participants %}
    <div class="modal fade" id="moveModal{{ p.id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form method="post" action="{{ path('admin_fisch_participants_move', {id: p.id}) }}" class="modal-content">
                <input type="hidden" name="_token" value="{{ csrf_token('fisch_participant_move_' ~ p.id) }}">
                <div class="modal-header">
                    <h5 class="modal-title">Verschieben: {{ p.childFirstName }} {{ p.childLastName }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
                </div>
                <div class="modal-body">
                    <p class="small text-muted">Aktuell: {{ p.course.pool.name }} · {{ p.course.startTimeFormatted }}</p>
                    <label class="form-label fw-semibold" for="course{{ p.id }}">Zielkurs</label>
                    <select class="form-select" name="course_id" id="course{{ p.id }}" required>
                        {% for opt in moveOptions[p.id]|default([]) %}
                            <option value="{{ opt.id }}" {% if opt.id == p.course.id %}selected{% endif %}>{{ opt.label }}</option>
                        {% else %}
                            <option value="">Keine Kurse verfügbar</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Abbrechen</button>
                    <button type="submit" class="btn btn-fisch-primary">Verschieben</button>
                </div>
            </form>
        </div>
    </div>
{% endfor %}
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function () {
    const input = document.getElementById('fischParticipantSearch');
    const hint = document.getElementById('fischParticipantHint');
    const rows = document.querySelectorAll('#fischParticipantTable tbody tr[data-search]');
    if (!input) return;
    input.addEventListener('input', function () {
        const q = (input.value || '').trim().toLowerCase();
        let n = 0;
        rows.forEach(function (row) {
            const show = !q || (row.dataset.search || '').indexOf(q) !== -1;
            row.classList.toggle('d-none', !show);
            if (show) n++;
        });
        if (hint) hint.textContent = n + ' angezeigt';
    });
})();
</script>
{% endblock %}