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

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

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

{% block content %}
{% set actions %}
    <a href="{{ path('admin_fisch_courses_export') }}" class="btn btn-outline-success btn-sm">
        <i class="fas fa-file-csv me-1"></i> CSV
    </a>
    <button type="button" class="btn btn-fisch-primary btn-sm" data-bs-toggle="modal" data-bs-target="#courseCreateModal">
        <i class="fas fa-plus me-1"></i> Kurs anlegen
    </button>
{% endset %}
{% include 'admin/fisch/_fisch_page_header.html.twig' with {
    title: 'Kursübersicht',
    icon: 'swimming-pool',
    subtitle: 'Saison ' ~ seasonYear ~ ' — nach Schwimmbad gruppiert',
    breadcrumb_current: '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="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="fisch-stats-card fisch-stats-card--compact">
            <div class="card-body">
                <div class="fisch-stats-label">Kurse</div>
                <h2 class="fisch-stats-value">{{ stats.courses }}</h2>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="fisch-stats-card fisch-stats-card--compact">
            <div class="card-body">
                <div class="fisch-stats-label">Belegt</div>
                <h2 class="fisch-stats-value">{{ stats.booked }}<span class="fisch-stats-suffix">/{{ stats.capacity }}</span></h2>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="fisch-stats-card fisch-stats-card--compact">
            <div class="card-body">
                <div class="fisch-stats-label">Frei</div>
                <h2 class="fisch-stats-value text-success">{{ stats.free }}</h2>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="fisch-stats-card fisch-stats-card--compact">
            <div class="card-body">
                <div class="fisch-stats-label">Voll</div>
                <h2 class="fisch-stats-value {% if stats.full > 0 %}text-danger{% endif %}">{{ stats.full }}</h2>
            </div>
        </div>
    </div>
</div>

<div class="fisch-toolbar fisch-courses-filters">
    <div class="fisch-courses-filters__fields">
        <div class="fisch-filter-field">
            <label class="visually-hidden" for="fischCourseSearch">Suche</label>
            <div class="input-group input-group-sm">
                <span class="input-group-text"><i class="fas fa-search"></i></span>
                <input type="search" id="fischCourseSearch" class="form-control" placeholder="Schwimmbad oder Uhrzeit…">
            </div>
        </div>
        <div class="fisch-filter-field">
            <label class="visually-hidden" for="fischCourseAge">Altersgruppe</label>
            <select id="fischCourseAge" class="form-select form-select-sm">
                <option value="">Alle Altersgruppen</option>
                {% for code, label in ageGroupLabels %}
                    <option value="{{ code }}">{{ label }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="fisch-filter-field">
            <label class="visually-hidden" for="fischCourseStatus">Auslastung</label>
            <select id="fischCourseStatus" class="form-select form-select-sm">
                <option value="">Alle Status</option>
                <option value="open">Nur mit freien Plätzen</option>
                <option value="full">Nur volle Kurse</option>
            </select>
        </div>
    </div>
    <div class="text-muted small mb-0" id="fischCourseFilterHint">
        {{ poolGroups|length }} Standorte
    </div>
</div>

{% if poolGroups is empty %}
    <div class="fisch-card">
        <div class="card-body text-center text-muted py-5">
            Keine Kurse für Saison {{ seasonYear }}.
            <div class="mt-3">
                <button type="button" class="btn btn-fisch-primary btn-sm" data-bs-toggle="modal" data-bs-target="#courseCreateModal">
                    Ersten Kurs anlegen
                </button>
            </div>
        </div>
    </div>
{% else %}
    <div class="fisch-courses-list" id="fischCoursesList">
        {% for group in poolGroups %}
            {% set pool = group.pool %}
            <section class="fisch-pool-group"
                     data-pool-name="{{ pool.name|lower }}"
                     data-pool-id="{{ pool.id }}">
                <header class="fisch-pool-group__header">
                    <div>
                        <h2 class="fisch-pool-group__title">
                            <i class="fas fa-map-marker-alt"></i>
                            {{ pool.name }}
                        </h2>
                        <p class="fisch-pool-group__meta mb-0">
                            {{ group.courseCount }} Kurs{{ group.courseCount != 1 ? 'e' : '' }}
                            · {{ group.booked }}/{{ group.capacity }} Plätze
                            {% if group.fullCount > 0 %}
                                · <span class="text-danger">{{ group.fullCount }} voll</span>
                            {% endif %}
                        </p>
                    </div>
                    {% set poolPct = group.capacity > 0 ? (group.booked / group.capacity * 100)|round : 0 %}
                    <div class="fisch-pool-group__occupancy" title="Standort-Auslastung">
                        <span class="small fw-semibold">{{ poolPct }}%</span>
                        <div class="fisch-capacity-bar{% if group.fullCount == group.courseCount and group.courseCount > 0 %} full{% endif %}">
                            <div class="fisch-capacity-bar-fill" style="width: {{ poolPct }}%;"></div>
                        </div>
                    </div>
                </header>

                <div class="fisch-pool-group__slots">
                    {% for row in group.rows %}
                        {% set course = row.course %}
                        <article class="fisch-slot-row{% if row.isFull %} fisch-slot-row--full{% endif %}{% if not course.isActive %} fisch-slot-row--inactive{% endif %}"
                                 data-age="{{ course.ageGroup }}"
                                 data-status="{{ row.isFull ? 'full' : 'open' }}"
                                 data-search="{{ pool.name|lower }} {{ course.startTimeFormatted }} {{ row.ageLabel|lower }}">
                            <div class="fisch-slot-row__time">
                                <span class="fisch-slot-row__clock">{{ course.startTimeFormatted }}</span>
                                <span class="fisch-age-badge{% if course.ageGroup == '7_12' %} fisch-age-badge--b{% endif %}">
                                    {{ row.ageLabel }}
                                </span>
                                {% if not course.isActive %}
                                    <span class="badge bg-secondary">inaktiv</span>
                                {% endif %}
                            </div>
                            <div class="fisch-slot-row__load">
                                <div class="fisch-slot-row__count {% if row.isFull %}text-danger{% endif %}">
                                    <strong>{{ row.booked }}</strong>/{{ row.capacity }}
                                    {% if row.isFull %}<span class="badge bg-danger">voll</span>{% endif %}
                                </div>
                                <div class="fisch-capacity-bar{% if row.isFull %} full{% endif %}">
                                    <div class="fisch-capacity-bar-fill" style="width: {{ row.pct }}%;"></div>
                                </div>
                            </div>
                            <div class="fisch-slot-row__action fisch-slot-row__action--multi">
                                <form method="post" action="{{ path('admin_fisch_courses_capacity', {id: course.id}) }}"
                                      class="fisch-capacity-form" title="Kapazität speichern">
                                    <input type="hidden" name="_token" value="{{ csrf_token('fisch_course_capacity_' ~ course.id) }}">
                                    <input type="number" name="max_capacity" class="form-control form-control-sm"
                                           value="{{ course.maxCapacity }}" min="{{ row.booked > 0 ? row.booked : 1 }}" max="50"
                                           aria-label="Kapazität">
                                    <button type="submit" class="btn btn-sm btn-outline-secondary" title="Kapazität speichern">
                                        <i class="fas fa-save"></i>
                                    </button>
                                </form>
                                <a href="{{ path('admin_fisch_course_participants', {id: course.id}) }}"
                                   class="btn btn-sm btn-fisch-outline">
                                    <i class="fas fa-users"></i>
                                </a>
                                <form method="post" action="{{ path('admin_fisch_courses_toggle', {id: course.id}) }}">
                                    <input type="hidden" name="_token" value="{{ csrf_token('fisch_course_toggle_' ~ course.id) }}">
                                    <button type="submit" class="btn btn-sm btn-outline-secondary"
                                            title="{{ course.isActive ? 'Deaktivieren' : 'Aktivieren' }}">
                                        <i class="fas fa-{{ course.isActive ? 'eye-slash' : 'eye' }}"></i>
                                    </button>
                                </form>
                            </div>
                        </article>
                    {% endfor %}
                </div>
            </section>
        {% endfor %}
    </div>
    <p class="text-muted small text-center mt-3 d-none" id="fischCoursesEmpty">
        Keine Kurse passen zu den Filtern.
    </p>
{% endif %}

<div class="modal fade" id="courseCreateModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form method="post" action="{{ path('admin_fisch_courses_create') }}" class="modal-content">
            <input type="hidden" name="_token" value="{{ csrf_token('fisch_course_create') }}">
            <div class="modal-header">
                <h5 class="modal-title">Kurs anlegen</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" for="createPool">Schwimmbad</label>
                    <select class="form-select" name="pool_id" id="createPool" required>
                        <option value="">Bitte wählen…</option>
                        {% for pool in pools %}
                            <option value="{{ pool.id }}">{{ pool.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label fw-semibold" for="createTime">Uhrzeit</label>
                        <input type="time" class="form-control" name="start_time" id="createTime" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold" for="createAge">Altersgruppe</label>
                        <select class="form-select" name="age_group" id="createAge" required>
                            {% for code, label in ageGroupLabels %}
                                <option value="{{ code }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold" for="createCap">Kapazität</label>
                        <input type="number" class="form-control" name="max_capacity" id="createCap" value="12" min="1" max="50" 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">Anlegen</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function () {
    const searchEl = document.getElementById('fischCourseSearch');
    const ageEl = document.getElementById('fischCourseAge');
    const statusEl = document.getElementById('fischCourseStatus');
    const list = document.getElementById('fischCoursesList');
    const emptyHint = document.getElementById('fischCoursesEmpty');
    const filterHint = document.getElementById('fischCourseFilterHint');
    if (!list || !searchEl) return;

    function applyFilters() {
        const q = (searchEl.value || '').trim().toLowerCase();
        const age = ageEl.value;
        const status = statusEl.value;
        let visibleSlots = 0;
        let visiblePools = 0;

        list.querySelectorAll('.fisch-pool-group').forEach(function (group) {
            let groupVisible = 0;
            group.querySelectorAll('.fisch-slot-row').forEach(function (row) {
                const matchAge = !age || row.dataset.age === age;
                const matchStatus = !status || row.dataset.status === status;
                const matchSearch = !q || (row.dataset.search || '').indexOf(q) !== -1
                    || (group.dataset.poolName || '').indexOf(q) !== -1;
                const show = matchAge && matchStatus && matchSearch;
                row.classList.toggle('d-none', !show);
                if (show) groupVisible++;
            });
            group.classList.toggle('d-none', groupVisible === 0);
            if (groupVisible > 0) {
                visiblePools++;
                visibleSlots += groupVisible;
            }
        });

        if (emptyHint) emptyHint.classList.toggle('d-none', visibleSlots > 0);
        if (filterHint) {
            filterHint.textContent = visiblePools + ' Standort' + (visiblePools === 1 ? '' : 'e')
                + ' · ' + visibleSlots + ' Kurs' + (visibleSlots === 1 ? '' : 'e');
        }
    }

    searchEl.addEventListener('input', applyFilters);
    ageEl.addEventListener('change', applyFilters);
    statusEl.addEventListener('change', applyFilters);
})();
</script>
{% endblock %}