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

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

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

{% block content %}
{% set actions %}
    <a href="{{ path('admin_fisch_waitlist_export') }}" class="btn btn-outline-success btn-sm">
        <i class="fas fa-file-csv me-1"></i> CSV
    </a>
    <span class="badge rounded-pill bg-warning text-dark">{{ entries|length }} wartend</span>
{% endset %}
{% include 'admin/fisch/_fisch_page_header.html.twig' with {
    title: 'Warteliste',
    icon: 'list',
    subtitle: 'Vormerkungen — in Kurs übernehmen oder entfernen',
    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="fischWaitlistSearch" class="form-control form-control-sm"
               placeholder="Suche Name, E-Mail…">
    </div>
    <div class="text-muted small mb-0" id="fischWaitlistHint">{{ entries|length }} Einträge</div>
</div>

<div class="fisch-table-wrap">
    <div class="table-responsive">
        <table class="table table-fisch mb-0" id="fischWaitlistTable">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Alter</th>
                    <th>E-Mail</th>
                    <th>Präferenzen</th>
                    <th>Seit</th>
                    <th class="text-end">Aktionen</th>
                </tr>
            </thead>
            <tbody>
                {% for row in entries %}
                    {% set e = row.entry %}
                    <tr data-search="{{ (e.childFirstName ~ ' ' ~ e.childLastName ~ ' ' ~ e.parentEmail ~ ' ' ~ row.preferences)|lower }}">
                        <td class="fw-semibold">{{ e.childFirstName }} {{ e.childLastName }}</td>
                        <td>{{ e.ageAtReference }} Jahre</td>
                        <td>{{ e.parentEmail }}</td>
                        <td><span class="small text-muted">{{ row.preferences }}</span></td>
                        <td>{{ e.createdAt|date('d.m.Y') }}</td>
                        <td class="text-end text-nowrap">
                            <button type="button" class="btn btn-sm btn-outline-success btn-action"
                                    data-bs-toggle="modal" data-bs-target="#enrollModal{{ e.id }}"
                                    {% if courseOptions[e.id] is empty %}disabled title="Kein freier Kurs"{% endif %}>
                                <i class="fas fa-user-check me-1"></i>Übernehmen
                            </button>
                            <form method="post" action="{{ path('admin_fisch_waitlist_cancel', {id: e.id}) }}" class="d-inline"
                                  onsubmit="return confirm('Eintrag von der Warteliste entfernen?');">
                                <input type="hidden" name="_token" value="{{ csrf_token('fisch_waitlist_cancel_' ~ e.id) }}">
                                <button type="submit" class="btn btn-sm btn-outline-danger btn-action" title="Entfernen">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                {% else %}
                    <tr><td colspan="6" class="text-muted text-center py-4">Warteliste ist leer.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

{% for row in entries %}
    {% set e = row.entry %}
    <div class="modal fade" id="enrollModal{{ e.id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form method="post" action="{{ path('admin_fisch_waitlist_enroll', {id: e.id}) }}" class="modal-content">
                <input type="hidden" name="_token" value="{{ csrf_token('fisch_waitlist_enroll_' ~ e.id) }}">
                <div class="modal-header">
                    <h5 class="modal-title">Übernehmen: {{ e.childFirstName }} {{ e.childLastName }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Kurs mit freiem Platz</label>
                        <select class="form-select" name="course_id" required>
                            {% for opt in courseOptions[e.id]|default([]) %}
                                <option value="{{ opt.id }}">{{ opt.label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Adresse</label>
                        <textarea class="form-control" name="address" rows="2" required
                                  placeholder="Straße, PLZ Ort"></textarea>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Telefon</label>
                            <input type="text" class="form-control" name="phone"
                                   value="{{ e.phone }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Erziehungsberechtigte(r)</label>
                            <input type="text" class="form-control" name="guardian_name"
                                   value="{{ e.guardianName }}" required>
                        </div>
                    </div>
                </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">In Kurs übernehmen</button>
                </div>
            </form>
        </div>
    </div>
{% endfor %}
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function () {
    const input = document.getElementById('fischWaitlistSearch');
    const hint = document.getElementById('fischWaitlistHint');
    const rows = document.querySelectorAll('#fischWaitlistTable 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 + ' Einträge';
    });
})();
</script>
{% endblock %}