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

{% block title %}Kursübersicht - Admin{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-0">
                        <i class="fas fa-graduation-cap me-2"></i>
                        Kursübersicht
                    </h1>
                    <p class="text-muted mb-0">Verwalten Sie alle aktiven Kurse und deren Teilnehmer</p>
                </div>
                <div>
                    <a href="{{ path('courses_export_all_csv', app.request.query.all) }}" class="btn btn-success me-2" title="Alle gefilterten Kurse als CSV exportieren">
                        <i class="fas fa-download me-2"></i>CSV Export (Alle)
                    </a>
                    <a href="{{ path('admin_dashboard') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Zurück zum Dashboard
                    </a>
                </div>
            </div>

            <!-- Statistiken -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="mb-0">{{ courseStats|length }}</h4>
                                    <p class="mb-0">Aktive Kurse</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-graduation-cap fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="mb-0">{{ courseStats|reduce((sum, stat) => sum + stat.confirmedBookings, 0) }}</h4>
                                    <p class="mb-0">Bestätigte Buchungen</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-check-circle fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="mb-0">{{ courseStats|reduce((sum, stat) => sum + stat.pendingBookings, 0) }}</h4>
                                    <p class="mb-0">Ausstehende Buchungen</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-clock fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-danger text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h4 class="mb-0">{{ courseStats|reduce((sum, stat) => sum + stat.cancelledBookings, 0) }}</h4>
                                    <p class="mb-0">Abgesagte Buchungen</p>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-times-circle fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Filter und Suche -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-filter me-2"></i>
                        Filter & Suche
                    </h5>
                </div>
                <div class="card-body">
                    <form method="GET" id="filterForm">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label for="search" class="form-label">Suche</label>
                                <input type="text" class="form-control" id="search" name="search" 
                                       value="{{ filters.currentSearch }}" placeholder="Kursname oder Typ...">
                            </div>
                            <div class="col-md-2">
                                <label for="type" class="form-label">Typ</label>
                                <select class="form-select" id="type" name="type">
                                    <option value="">Alle Typen</option>
                                    {% for type in filters.types %}
                                        <option value="{{ type }}" {% if filters.currentType == type %}selected{% endif %}>
                                            {% if type == 'recurring' %}
                                                Fortlaufend
                                            {% elseif type == 'limited_course' %}
                                                Begrenzter Kurs
                                            {% elseif type == 'holiday_course' %}
                                                Ferienkurs
                                            {% else %}
                                                {{ type|title }}
                                            {% endif %}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="target_group" class="form-label">Zielgruppe</label>
                                <select class="form-select" id="target_group" name="target_group">
                                    <option value="">Alle Zielgruppen</option>
                                    {% for group in filters.targetGroups %}
                                        <option value="{{ group }}" {% if filters.currentTargetGroup == group %}selected{% endif %}>
                                            {{ group }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="location" class="form-label">Standort</label>
                                <select class="form-select" id="location" name="location">
                                    <option value="">Alle Standorte</option>
                                    {% for location in filters.locations %}
                                        <option value="{{ location.id }}" {% if filters.currentLocation == location.id %}selected{% endif %}>
                                            {{ location.name }}
                                        </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="sort" class="form-label">Sortierung</label>
                                <select class="form-select" id="sort" name="sort">
                                    <option value="id" {% if filters.currentSort == 'id' %}selected{% endif %}>ID</option>
                                    <option value="name" {% if filters.currentSort == 'name' %}selected{% endif %}>Name</option>
                                    <option value="type" {% if filters.currentSort == 'type' %}selected{% endif %}>Typ</option>
                                    <option value="targetGroup" {% if filters.currentSort == 'targetGroup' %}selected{% endif %}>Zielgruppe</option>
                                </select>
                            </div>
                            <div class="col-md-1">
                                <label for="order" class="form-label">Reihenfolge</label>
                                <select class="form-select" id="order" name="order">
                                    <option value="DESC" {% if filters.currentOrder == 'DESC' %}selected{% endif %}>Absteigend</option>
                                    <option value="ASC" {% if filters.currentOrder == 'ASC' %}selected{% endif %}>Aufsteigend</option>
                                </select>
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search me-2"></i>Filter anwenden
                                </button>
                                <a href="{{ path('courses_overview') }}" class="btn btn-outline-secondary">
                                    <i class="fas fa-times me-2"></i>Filter zurücksetzen
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Kurse als Cards -->
            <div class="row" id="coursesGrid">
                {% for stat in courseStats %}
                    {% set course = stat.course %}
                    <div class="col-lg-4 col-md-6 mb-4">
                        <div class="card h-100 course-card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h6 class="card-title mb-0">{{ course.name }}</h6>
                                <span class="badge bg-info">
                                    {% if course.type == 'recurring' %}
                                        Fortlaufend
                                    {% elseif course.type == 'limited_course' %}
                                        Begrenzter Kurs
                                    {% elseif course.type == 'holiday_course' %}
                                        Ferienkurs
                                    {% else %}
                                        {{ course.type|title }}
                                    {% endif %}
                                </span>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    {% if course.targetGroup %}
                                        <span class="badge bg-secondary mb-2">{{ course.targetGroup }}</span>
                                    {% endif %}
                                    {% if course.location %}
                                        <p class="text-muted mb-1">
                                            <i class="fas fa-map-marker-alt me-1"></i>
                                            {{ course.location.name }}
                                        </p>
                                    {% endif %}
                                </div>

                                <!-- Termine Info -->
                                <div class="mb-3">
                                    {% if course.type == 'recurring' %}
                                        <p class="text-muted mb-0">
                                            <i class="fas fa-calendar-week me-1"></i>
                                            Wöchentlich
                                        </p>
                                    {% elseif course.startDate and course.endDate %}
                                        <p class="text-muted mb-0">
                                            <i class="fas fa-calendar-alt me-1"></i>
                                            {{ course.startDate|date('d.m.Y') }} - {{ course.endDate|date('d.m.Y') }}
                                        </p>
                                    {% endif %}
                                </div>

                                <!-- Teilnehmer Statistiken -->
                                <div class="row text-center mb-3">
                                    <div class="col-3">
                                        <div class="text-success">
                                            <strong>{{ stat.confirmedBookings }}</strong>
                                            <br><small>Bestätigt</small>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="text-warning">
                                            <strong>{{ stat.pendingBookings }}</strong>
                                            <br><small>Ausstehend</small>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="text-info">
                                            <strong>{{ stat.partialCancellations }}</strong>
                                            <br><small>Teilabmeldung</small>
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <div class="text-danger">
                                            <strong>{{ stat.cancelledBookings }}</strong>
                                            <br><small>Abgesagt</small>
                                        </div>
                                    </div>
                                </div>

                                <!-- Status -->
                                <div class="mb-3">
                                    {% if course.isAvailable %}
                                        <span class="badge bg-success">Verfügbar</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Nicht verfügbar</span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="btn-group w-100" role="group">
                                    <a href="{{ path('courses_details', {'id': course.id}) }}" 
                                       class="btn btn-outline-primary btn-sm" 
                                       title="Details anzeigen">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ path('courses_export_csv', {'id': course.id}) }}" 
                                       class="btn btn-outline-success btn-sm" 
                                       title="CSV Export">
                                        <i class="fas fa-download"></i>
                                    </a>
                                    <a href="{{ path('courses_cancellations', {'id': course.id}) }}" 
                                       class="btn btn-outline-warning btn-sm" 
                                       title="Absagen anzeigen">
                                        <i class="fas fa-ban"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                {% else %}
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body text-center py-5">
                                <i class="fas fa-graduation-cap fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">Keine Kurse gefunden</h5>
                                <p class="text-muted">Es wurden keine Kurse gefunden, die den Filterkriterien entsprechen.</p>
                                <a href="{{ path('courses_overview') }}" class="btn btn-primary">
                                    <i class="fas fa-refresh me-2"></i>Filter zurücksetzen
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<style>
.course-card {
    transition: all 0.3s ease;
    border: 1px solid #e9ecef;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-radius: 12px;
    overflow: hidden;
}

.course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: #007bff;
}

.course-card .card-header {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-bottom: 1px solid #dee2e6;
    padding: 1rem;
}

.course-card .card-body {
    padding: 1.25rem;
}

.course-card .card-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
}

.course-card .badge {
    font-size: 0.75rem;
    padding: 0.4em 0.8em;
}

.course-card .btn-group .btn {
    border-radius: 6px;
    margin: 0 1px;
}

.course-card .btn-group .btn:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.course-card .btn-group .btn:last-child {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
</style>
{% endblock %}