{% 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>Kontakt</th>
                    <th>Präferenzen</th>
                    <th>Status</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 ~ ' ' ~ (e.phone ?? '') ~ ' ' ~ row.preferences)|lower }}">
                        <td class="fw-semibold">{{ e.childFirstName }} {{ e.childLastName }}</td>
                        <td>{{ e.ageAtReference }} Jahre</td>
                        <td>
                            <div>{{ e.parentEmail }}</div>
                            <div class="small text-muted">
                                {{ e.phone ?: 'kein Telefon' }}{% if e.guardianName %} · {{ e.guardianName }}{% endif %}
                            </div>
                        </td>
                        <td><span class="small text-muted">{{ row.preferences }}</span></td>
                        <td>
                            {% if e.status == 'offered' %}
                                <span class="badge {{ e.hasExpiredOffer ? 'bg-danger' : 'bg-info text-dark' }}">
                                    {{ e.hasExpiredOffer ? 'Angebot abgelaufen' : 'Platz angeboten' }}
                                </span>
                                {% if e.offerUntil %}
                                    <div class="small text-muted">bis {{ e.offerUntil|date('d.m.Y H:i') }} Uhr</div>
                                {% endif %}
                            {% else %}
                                <span class="badge bg-warning text-dark">Wartet</span>
                            {% endif %}
                        </td>
                        <td>{{ e.createdAt|date('d.m.Y') }}</td>
                        <td class="text-end text-nowrap">
                            <button type="button" class="btn btn-sm btn-outline-secondary btn-action js-waitlist-details"
                                    data-id="{{ e.id }}" title="Details">
                                <i class="fas fa-circle-info"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-fisch-outline btn-action"
                                    data-bs-toggle="modal" data-bs-target="#offerModal{{ e.id }}"
                                    {% if courseOptions[e.id] is empty %}disabled title="Kein freier Kurs"{% endif %}>
                                <i class="fas fa-envelope me-1"></i>Platz anbieten
                            </button>
                            <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>Direkt übernehmen
                            </button>
                            {% if e.status == 'offered' %}
                                <form method="post" action="{{ path('admin_fisch_waitlist_offer_withdraw', {id: e.id}) }}" class="d-inline"
                                      onsubmit="return confirm('Platzangebot zurücknehmen?');">
                                    <input type="hidden" name="_token" value="{{ csrf_token('fisch_waitlist_withdraw_' ~ e.id) }}">
                                    <button type="submit" class="btn btn-sm btn-outline-warning btn-action" title="Angebot zurücknehmen">
                                        <i class="fas fa-rotate-left"></i>
                                    </button>
                                </form>
                            {% endif %}
                            <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="7" 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="offerModal{{ e.id }}" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <form method="post" action="{{ path('admin_fisch_waitlist_offer', {id: e.id}) }}" class="modal-content">
                <input type="hidden" name="_token" value="{{ csrf_token('fisch_waitlist_offer_' ~ e.id) }}">
                <div class="modal-header">
                    <h5 class="modal-title">Platz anbieten: {{ 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">
                    <p class="text-muted">
                        Die Eltern erhalten die Platzangebot-E-Mail mit Annahme-Link, gültig
                        {{ offerHours }} Stunden. Erst mit der Annahme wird das Kind angemeldet.
                        Der Platz bleibt bis dahin blockiert.
                    </p>
                    <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>
                <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">
                        <i class="fas fa-envelope me-1"></i>Angebot verschicken
                    </button>
                </div>
            </form>
        </div>
    </div>

    <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">
                    <p class="text-muted">
                        Ohne Angebotsschritt: Das Kind wird sofort angemeldet und erhält die
                        Kursbestätigung. Nur nutzen, wenn die Eltern bereits zugesagt haben.
                    </p>
                    <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 %}

<div class="modal fade" id="waitlistDetailsModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-circle-info me-2"></i>Wartelisten-Eintrag</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
            </div>
            <div class="modal-body" id="waitlistDetailsBody">
                <div class="text-muted">Wird geladen…</div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>
{% 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';
    });
})();

(function () {
    const modalEl = document.getElementById('waitlistDetailsModal');
    const body = document.getElementById('waitlistDetailsBody');
    if (!modalEl || !body) return;
    const modal = new bootstrap.Modal(modalEl);
    const urlTemplate = '{{ path('admin_fisch_waitlist_details', {id: '__ID__'}) }}';

    function row(label, value) {
        if (!value) return '';
        return '<dt class="col-sm-4">' + label + '</dt><dd class="col-sm-8">' + value + '</dd>';
    }

    function escapeHtml(value) {
        const div = document.createElement('div');
        div.textContent = value == null ? '' : String(value);
        return div.innerHTML;
    }

    document.querySelectorAll('.js-waitlist-details').forEach(function (btn) {
        btn.addEventListener('click', function () {
            body.innerHTML = '<div class="text-muted">Wird geladen…</div>';
            modal.show();

            fetch(urlTemplate.replace('__ID__', btn.dataset.id))
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (!data.success) {
                        body.innerHTML = '<div class="alert alert-danger mb-0">' + escapeHtml(data.error) + '</div>';
                        return;
                    }
                    const e = data.entry;
                    let html = '<dl class="row mb-0">';
                    html += row('Kind', escapeHtml(e.childName));
                    html += row('Geburtsdatum', escapeHtml(e.birthDate) + ' (' + escapeHtml(e.age) + ' Jahre)');
                    html += row('Altersgruppe', e.ageGroup === '5_6' ? 'Gruppe A (5–6)' : 'Gruppe B (7–12)');
                    html += row('Erziehungsberechtigte(r)', escapeHtml(e.guardianName));
                    html += row('E-Mail', '<a href="mailto:' + escapeHtml(e.parentEmail) + '">' + escapeHtml(e.parentEmail) + '</a>');
                    html += row('Telefon', escapeHtml(e.phone));
                    html += row('Präferenzen', escapeHtml(e.preferences));
                    html += row('Status', escapeHtml(e.statusLabel));
                    html += row('Auf Warteliste seit', escapeHtml(e.createdAt));
                    html += row('Zuletzt geändert', escapeHtml(e.updatedAt));
                    html += row('Notiz', escapeHtml(e.notes));

                    if (e.offer) {
                        html += row('Angebot für', escapeHtml(e.offer.course));
                        html += row('Angeboten am', escapeHtml(e.offer.offeredAt));
                        html += row('Frist', escapeHtml(e.offer.offerUntil) + (e.offer.expired ? ' (abgelaufen)' : ''));
                    }

                    Object.keys(e.extraFields || {}).forEach(function (key) {
                        const field = e.extraFields[key];
                        html += row(escapeHtml(field.label || key), escapeHtml(field.value));
                    });

                    body.innerHTML = html + '</dl>';
                })
                .catch(function () {
                    body.innerHTML = '<div class="alert alert-danger mb-0">Details konnten nicht geladen werden.</div>';
                });
        });
    });
})();
</script>
{% endblock %}