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

{% block title %}Kurse verwalten - Admin{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/appointment/admin.css') }}" />
    <style>
        .course-type-card {
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid #e9ecef !important;
            border-radius: 0.5rem !important;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        }
        
        .course-type-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
            border-color: #2c3e50 !important;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        }
        
        .course-type-card:active {
            transform: translateY(-2px);
        }
        
        .form-control:focus,
        .form-select:focus {
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }
        
        .bg-gradient {
            background: linear-gradient(135deg, var(--bs-primary) 0%, #0056b3 100%);
        }
        
        .day-time-card {
            border-left: 3px solid var(--bs-primary);
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            transition: all 0.2s ease;
        }
        
        .day-time-card:hover {
            border-left-color: var(--bs-success);
            transform: translateY(-2px);
        }
        
        .form-label {
            font-size: 0.875rem;
        }
        
        .badge {
            font-size: 0.75rem;
        }
        
        /* Moderne Tabellen-Styles */
        .table-modern {
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        
        .table-modern thead.table-dark th {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            border: none;
            padding: 1rem 0.75rem;
            font-weight: 600;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: #ffffff;
        }
        
        .table-modern tbody tr {
            border-bottom: 1px solid #e9ecef;
            transition: all 0.2s ease;
        }
        
        .table-modern tbody tr:hover {
            background-color: #f8f9fa;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .table-modern tbody td {
            padding: 1rem 0.75rem;
            vertical-align: middle;
            border: none;
        }
        
        .table-modern tbody tr:last-child {
            border-bottom: none;
        }
        
        /* Farbige Icons im Header */
        .text-cyan {
            color: #17a2b8 !important;
        }
        
        /* Kursname-Link Styling */
        .course-name-link {
            transition: color 0.2s ease;
        }
        
        .course-name-link:hover {
            color: var(--bs-primary) !important;
            text-decoration: underline !important;
        }
        
        /* Moderne Formular-Eingaben */
        .modern-input {
            border: 2px solid #e9ecef;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            background-color: #ffffff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .modern-input:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
            background-color: #ffffff;
        }
        
        .form-floating > label {
            padding-left: 1rem;
            color: #6c757d;
        }
        
        .form-floating > .modern-input:focus ~ label,
        .form-floating > .modern-input:not(:placeholder-shown) ~ label {
            color: #0d6efd;
            font-weight: 600;
        }
        
        /* Hover-Effekt für Close-Button */
        #cancelCreateCourse:hover {
            background-color: rgba(255, 255, 255, 0.2);
            transform: scale(1.05);
        }
        
        /* Moderne Button-Effekte */
        .modern-btn:hover {
            transform: translateY(-2px);
        }
        
        .btn-success.modern-btn:hover {
            box-shadow: 0 6px 12px rgba(25, 135, 84, 0.4);
        }
        
        .btn-outline-secondary.modern-btn:hover {
            box-shadow: 0 4px 8px rgba(108, 117, 125, 0.3);
        }
        
        /* Moderne Suchleiste */
        .modern-search {
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .modern-search:focus-within {
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .search-input {
            border: 2px solid #e9ecef;
            transition: all 0.3s ease;
            background-color: #ffffff;
        }
        
        .search-input:focus {
            border-color: #0d6efd;
            box-shadow: none;
            background-color: #ffffff;
        }
        
        .input-group-text {
            border: 2px solid #e9ecef;
            border-right: none;
        }
        
        .modern-search:focus-within .input-group-text {
            border-color: #0d6efd;
        }
        
        /* Suchresultate Badge */
        #searchResults {
            font-size: 0.85rem;
            padding: 0.5rem 0.75rem;
            font-weight: 500;
        }
        
        /* Moderne Tab-Styles */
        .nav-tabs {
            border-bottom: 3px solid #dee2e6;
            gap: 0.5rem;
        }
        
        .nav-tabs .nav-link {
            border: 2px solid transparent;
            border-radius: 0.5rem 0.5rem 0 0;
            padding: 1rem 1.5rem;
            font-weight: 600;
            font-size: 1rem;
            color: #6c757d;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            transition: all 0.3s ease;
            margin-bottom: -3px;
            position: relative;
        }
        
        .nav-tabs .nav-link:hover {
            color: #0d6efd;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            border-color: #dee2e6 #dee2e6 transparent;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .nav-tabs .nav-link.active {
            color: #0d6efd;
            background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);
            border-color: #0d6efd #0d6efd transparent;
            border-bottom-color: #ffffff;
            box-shadow: 0 -2px 8px rgba(13, 110, 253, 0.15);
        }
        
        .nav-tabs .nav-link i {
            font-size: 1.1rem;
        }
        
        .nav-tabs .nav-link .badge {
            font-size: 0.75rem;
            padding: 0.35rem 0.6rem;
            font-weight: 700;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }
        
        /* Clear Search Button */
        #clearSearch {
            border-radius: 50%;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        
        #clearSearch:hover {
            background-color: #dc3545;
            border-color: #dc3545;
            color: white;
            transform: scale(1.05);
        }
        
        /* Zielgruppen-Filter Buttons */
        .btn-outline-purple {
            color: #6f42c1;
            border-color: #6f42c1;
        }
        
        .btn-outline-purple:hover,
        .btn-outline-purple.active {
            background-color: #6f42c1;
            border-color: #6f42c1;
            color: white;
        }
        
        #targetGroupQuickFilters .btn {
            transition: all 0.2s ease;
        }
        
        #targetGroupQuickFilters .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        #targetGroupQuickFilters .btn.active {
            font-weight: 600;
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        }
        
        /* Zielgruppen-Badge Styles */
        .target-group-badge {
            font-size: 0.75rem;
            padding: 0.35rem 0.65rem;
            border-radius: 0.5rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }
        
        .target-group-badge.kids-45 {
            background-color: rgba(13, 202, 240, 0.1);
            color: #0dcaf0;
            border: 1px solid rgba(13, 202, 240, 0.3);
        }
        
        .target-group-badge.kids-68 {
            background-color: rgba(25, 135, 84, 0.1);
            color: #198754;
            border: 1px solid rgba(25, 135, 84, 0.3);
        }
        
        .target-group-badge.adults {
            background-color: rgba(255, 193, 7, 0.1);
            color: #ffc107;
            border: 1px solid rgba(255, 193, 7, 0.3);
        }
        
        .target-group-badge.family {
            background-color: rgba(111, 66, 193, 0.1);
            color: #6f42c1;
            border: 1px solid rgba(111, 66, 193, 0.3);
        }
        
        .target-group-badge.custom {
            background-color: rgba(108, 117, 125, 0.1);
            color: #6c757d;
            border: 1px solid rgba(108, 117, 125, 0.3);
        }
        
        /* Custom responsive classes für optimale Tageszeiten-Anordnung */
        @media (min-width: 1200px) {
            .col-xl-2-4 {
                flex: 0 0 auto;
                width: 20%; /* 5 Spalten = 20% je Spalte */
            }
            
            .col-xl-1-7 {
                flex: 0 0 auto;
                width: 14.285714%; /* 7 Spalten = ~14.29% je Spalte */
            }
        }
        
        /* Verbesserte Tageszeiten-Karten */
        .day-time-card {
            min-height: 120px;
        }
        
        .day-time-card .badge {
            min-width: 80px;
        }
        
        .alert-custom {
            border: none;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .table-modern {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        }
        
        .table-modern th {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: none;
            font-weight: 600;
            color: #495057;
        }
        
        .table-modern td {
            border-color: #f1f3f4;
            vertical-align: middle;
        }
        
        .btn-action {
            padding: 0.25rem 0.5rem;
            font-size: 0.875rem;
            border-radius: 6px;
        }
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Modern Header Section -->
    <div class="mb-4">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <nav aria-label="breadcrumb" class="mb-2">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item">
                            <a href="{{ path('appointment_admin') }}" class="text-decoration-none">
                                <i class="fas fa-home me-1"></i>Dashboard
                            </a>
                        </li>
                        <li class="breadcrumb-item active">Kursverwaltung</li>
                    </ol>
                </nav>
                <h1 class="h2 mb-0 fw-bold text-dark">
                    <i class="fas fa-graduation-cap me-2 text-primary"></i>Kursverwaltung
                </h1>
                <p class="text-muted mb-0">Erstellen und verwalten Sie Ihre Kurse und Events</p>
            </div>
            <div class="col-lg-6">
                <div class="d-flex justify-content-lg-end justify-content-start flex-wrap gap-2 mt-3 mt-lg-0">
                    <a href="{{ path('appointment_admin') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>
                        <span class="d-none d-sm-inline">Zurück</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Course Type Selection Cards -->
    <div class="row mb-4">
        <div class="col-12">
            <h5 class="mb-3 fw-semibold">
                <i class="fas fa-plus-circle me-2 text-success"></i>Neuen Kurs erstellen
            </h5>
            <div class="row g-4">
                <div class="col-lg-3 col-md-6">
                    <div class="card h-100 course-type-card" id="createRecurringCourse" role="button">
                        <div class="card-body text-center p-4">
                            <div class="mb-3">
                                <div class="bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 60px; height: 60px;">
                                    <i class="fas fa-repeat fa-2x text-success"></i>
                                </div>
                            </div>
                            <h6 class="card-title fw-semibold text-dark">Dauerhafter Kurs</h6>
                            <p class="card-text text-muted small mb-0">
                                Läuft kontinuierlich ohne Enddatum
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card h-100 course-type-card" id="createLimitedCourse" role="button">
                        <div class="card-body text-center p-4">
                            <div class="mb-3">
                                <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 60px; height: 60px;">
                                    <i class="fas fa-calendar-alt fa-2x text-primary"></i>
                                </div>
                            </div>
                            <h6 class="card-title fw-semibold text-dark">Zeitlich begrenzter Kurs</h6>
                            <p class="card-text text-muted small mb-0">
                                Mit Start- und Enddatum
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card h-100 course-type-card" id="createHolidayCourse" role="button">
                        <div class="card-body text-center p-4">
                            <div class="mb-3">
                                <div class="bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 60px; height: 60px;">
                                    <i class="fas fa-umbrella-beach fa-2x text-warning"></i>
                                </div>
                            </div>
                            <h6 class="card-title fw-semibold text-dark">Ferienkurs</h6>
                            <p class="card-text text-muted small mb-0">
                                Automatisch Mo-Fr ausgewählt
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card h-100 course-type-card" id="createEvent" role="button">
                        <div class="card-body text-center p-4">
                            <div class="mb-3">
                                <div class="bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center mx-auto" style="width: 60px; height: 60px;">
                                    <i class="fas fa-star fa-2x text-info"></i>
                                </div>
                            </div>
                            <h6 class="card-title fw-semibold text-dark">Einmaliges Event</h6>
                            <p class="card-text text-muted small mb-0">
                                Für spezielle Veranstaltungen
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Course Form (initially hidden) -->
    <div class="row mb-4" id="createCourseSection" style="display: none;">
        <div class="col-12">
            <div class="card border-0 shadow-lg table-modern" style="border-radius: 0.5rem; overflow: hidden;">
                <div class="card-header text-white border-0" style="background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%); padding: 1.25rem;">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0 fw-semibold" style="font-size: 1.1rem; letter-spacing: 0.5px; text-transform: uppercase;">
                            <i class="fas fa-plus me-2"></i>Neuen Kurs anlegen
                        </h5>
                        <button type="button" class="btn btn-sm btn-outline-light" id="cancelCreateCourse" style="border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease;">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body" style="padding: 1.5rem; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);">
                    <form id="createCourseForm">
                        <!-- Moderne Hauptzeile -->
                        <div class="row g-4 mb-4">
                            <div class="col-md-5">
                                <div class="form-floating">
                                    <input type="text" class="form-control modern-input" id="courseName" placeholder="z.B. Yoga für Anfänger" required>
                                    <label for="courseName" class="fw-semibold text-muted">
                                        <i class="fas fa-graduation-cap me-2 text-primary"></i>Kursname
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-floating">
                                    <select class="form-select modern-input" id="courseLocation" required>
                                        <option value="">Wählen...</option>
                                        {% for location in locations %}
                                            <option value="{{ location.id }}">{{ location.name }}</option>
                                        {% endfor %}
                                    </select>
                                    <label for="courseLocation" class="fw-semibold text-muted">
                                        <i class="fas fa-map-marker-alt me-2 text-danger"></i>Standort
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-floating">
                                    <input type="number" class="form-control modern-input" name="maxSlots" id="maxParticipants" min="1" max="50" value="1" placeholder="1" required>
                                    <label for="maxParticipants" class="fw-semibold text-muted">
                                        <i class="fas fa-users me-2 text-info"></i>Max. Teiln.
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-floating">
                                    <input type="number" class="form-control modern-input" name="slotDuration" id="slotDuration" value="30" min="15" step="15" placeholder="30" required>
                                    <label for="slotDuration" class="fw-semibold text-muted">
                                        <i class="fas fa-clock me-2 text-success"></i>Dauer (Min.)
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Zielgruppe Auswahl -->
                        <div class="row g-4 mb-4">
                            <div class="col-md-12">
                                <label class="form-label fw-semibold text-muted mb-3">
                                    <i class="fas fa-user-friends me-2 text-warning"></i>Zielgruppe
                                </label>
                                <div class="row g-3" id="targetGroupSelection">
                                    <!-- Zielgruppen werden dynamisch geladen -->
                                    <div class="col-12 text-center py-3">
                                        <div class="spinner-border text-primary" role="status">
                                            <span class="visually-hidden">Lädt Zielgruppen...</span>
                                        </div>
                                        <p class="mt-2 text-muted small">Lade verfügbare Zielgruppen...</p>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <small class="text-muted">
                                            <i class="fas fa-info-circle me-1"></i>
                                            Zielgruppen können in der <a href="{{ path('admin_target_groups_list') }}" target="_blank">Zielgruppen-Verwaltung</a> verwaltet werden
                                        </small>
                                        <button type="button" class="btn btn-sm btn-outline-primary" onclick="loadTargetGroups()">
                                            <i class="fas fa-sync-alt me-1"></i>Aktualisieren
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Kurstyp versteckt -->
                        <select class="form-select d-none" name="type" id="courseType" required>
                            <option value="">Bitte wählen...</option>
                            <option value="recurring_course">Dauerhafter Kurs</option>
                            <option value="limited_course">Zeitlich begrenzter Kurs</option>
                            <option value="holiday_course">Ferienkurs</option>
                            <option value="event">Einmaliges Event</option>
                        </select>

                        <!-- Kurs-spezifische Felder (kompakt) -->
                        <div id="courseFields" style="display: none;">
                            <input type="hidden" name="numberOfSessions" value="1">
                            <input type="hidden" name="sessionDuration" value="60">
                            
                            <div class="row g-3 mb-3">
                                <!-- Datum-Felder -->
                                <div class="col-md-3" id="startDateField" style="display: none;">
                                    <label class="form-label fw-medium mb-1">Startdatum</label>
                                    <input type="date" class="form-control" name="startDate" id="startDate">
                                </div>
                                <div class="col-md-3" id="endDateField" style="display: none;">
                                    <label class="form-label fw-medium mb-1">Enddatum</label>
                                    <input type="date" class="form-control" name="endDate" id="endDate">
                                </div>
                                <div class="col-md-3" id="eventDateFields" style="display: none;">
                                    <label class="form-label fw-medium mb-1">Startdatum</label>
                                    <input type="date" class="form-control" name="eventStartDate" id="eventStartDate">
                                </div>
                                <div class="col-md-3" id="eventEndDateField" style="display: none;">
                                    <label class="form-label fw-medium mb-1">Enddatum</label>
                                    <input type="date" class="form-control" name="eventEndDate" id="eventEndDate">
                                </div>
                                
                                <!-- Zeit-Felder für Events -->
                                <div class="col-md-2" id="generalStartTimeField" style="display: none;">
                                    <label class="form-label fw-medium mb-1">Startzeit</label>
                                    <input type="time" class="form-control" name="startTime" id="generalStartTime">
                                </div>
                                <div class="col-md-2" id="generalEndTimeField" style="display: none;">
                                    <label class="form-label fw-medium mb-1">Endzeit</label>
                                    <input type="time" class="form-control" name="endTime" id="generalEndTime">
                                </div>
                                
                                <!-- Pufferzeit -->
                                <div class="col-md-2">
                                    <label class="form-label fw-medium mb-1">Puffer (Min.)</label>
                                    <input type="number" class="form-control" name="bufferTime" value="0" min="0" step="5">
                                </div>
                            </div>
                        </div>

                        <!-- Kursdaten für öffentliche Buchung -->
                        <div class="row g-3 mb-3">
                            <div class="col-md-12">
                                <div class="card border-info bg-info bg-opacity-10">
                                    <div class="card-header bg-info text-white">
                                        <h6 class="mb-0">
                                            <i class="fas fa-info-circle me-2"></i>Kursdaten für öffentliche Buchung
                                        </h6>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="row g-3">
                                            <div class="col-md-12">
                                                <label class="form-label fw-medium mb-1">
                                                    <i class="fas fa-graduation-cap me-1"></i>Lernziele
                                                </label>
                                                <textarea class="form-control" name="learningGoals" id="learningGoals" rows="2" 
                                                          placeholder="z.B. Grundlagen des Schwimmens erlernen und Wassersicherheit entwickeln"></textarea>
                                                <div class="form-text small">Beschreibung der Lernziele für diesen Kurs</div>
                                            </div>
                                            <div class="col-md-12">
                                                <label class="form-label fw-medium mb-1">
                                                    <i class="fas fa-swimmer me-1"></i>Kursinhalt
                                                </label>
                                                <textarea class="form-control" name="courseContent" id="courseContent" rows="2" 
                                                          placeholder="z.B. Grundlegende Schwimmtechniken, Atemtechnik, Koordination von Armen und Beinen"></textarea>
                                                <div class="form-text small">Detaillierte Beschreibung der Kursinhalte</div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label fw-medium mb-1">
                                                    <i class="fas fa-clock me-1"></i>Dauer pro Einheit
                                                </label>
                                                <input type="text" class="form-control" name="duration" id="duration" 
                                                       placeholder="z.B. 45-60 Minuten pro Einheit">
                                                <div class="form-text small">Dauer einer einzelnen Kurseinheit</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Wochentage kompakt -->
                        <div class="row g-3 mb-3">
                            <div class="col-md-12">
                                <label class="form-label fw-medium mb-1">
                                    <i class="fas fa-calendar-week me-1"></i>Wochentage auswählen
                                </label>
                                <select class="form-select" name="daysOfWeek[]" id="daysOfWeek" multiple required>
                                    <option value="1">Montag</option>
                                    <option value="2">Dienstag</option>
                                    <option value="3">Mittwoch</option>
                                    <option value="4">Donnerstag</option>
                                    <option value="5">Freitag</option>
                                    <option value="6">Samstag</option>
                                    <option value="7">Sonntag</option>
                                </select>
                                <div class="form-text small">Strg + Klick für mehrere Tage</div>
                            </div>
                        </div>

                        <!-- Feiertage ausschließen (nur für dauerhafte Kurse) -->
                        <div class="row g-3 mb-3" id="excludeHolidaysOption" style="display: none;">
                            <div class="col-md-12">
                                <div class="card border-warning bg-warning bg-opacity-10">
                                    <div class="card-body p-3">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="excludeHolidays" name="excludeHolidays">
                                            <label class="form-check-label fw-medium" for="excludeHolidays">
                                                <i class="fas fa-umbrella-beach me-2 text-warning"></i>
                                                Feiertage automatisch ausschließen
                                            </label>
                                        </div>
                                        <div class="form-text small mt-2">
                                            <i class="fas fa-info-circle me-1"></i>
                                            Wenn aktiviert, werden alle deutschen Feiertage (NRW) automatisch von diesem Kurs ausgeschlossen.
                                            Dies betrifft z.B. Weihnachten, Ostern, Pfingsten, etc.
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Tageszeiten Container -->
                        <div id="dayTimesContainer" style="display: none;" class="mb-3">
                            <label class="form-label fw-medium mb-2">
                                <i class="fas fa-clock me-1"></i>Zeiten pro Wochentag
                            </label>
                            <div id="dayTimes" class="row g-2">
                                <!-- Wird dynamisch befüllt -->
                            </div>
                        </div>

                        <!-- Termine-Vorschau für Zeitraum-Kurse -->
                        <div id="courseDatesPreview" style="display: none;" class="mb-4">
                            <div class="card border-0 bg-light">
                                <div class="card-header bg-info text-white d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0">
                                        <i class="fas fa-calendar-check me-2"></i>Termin-Übersicht
                                        <span id="datesCount" class="badge bg-white text-info ms-2">0 Termine</span>
                                    </h6>
                                    <div>
                                        <button type="button" class="btn btn-sm btn-light" onclick="selectAllDates()">
                                            <i class="fas fa-check-double me-1"></i>Alle
                                        </button>
                                        <button type="button" class="btn btn-sm btn-light" onclick="deselectAllDates()">
                                            <i class="fas fa-times me-1"></i>Keine
                                        </button>
                                        <button type="button" class="btn btn-sm btn-light" onclick="deselectHolidays()">
                                            <i class="fas fa-umbrella-beach me-1"></i>Feiertage ausschließen
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body p-3" style="max-height: 400px; overflow-y: auto;">
                                    <div id="courseDatesList" class="row g-2">
                                        <!-- Wird dynamisch befüllt -->
                                    </div>
                                    <div id="courseDatesLoading" class="text-center py-3" style="display: none;">
                                        <div class="spinner-border spinner-border-sm text-primary me-2" role="status">
                                            <span class="visually-hidden">Lädt...</span>
                                        </div>
                                        <span>Termine werden berechnet...</span>
                                    </div>
                                    <div id="courseDatesEmpty" class="text-center py-3 text-muted" style="display: none;">
                                        <i class="fas fa-info-circle me-2"></i>
                                        <span>Bitte wählen Sie Start-/Enddatum und Wochentage aus</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                
                        <!-- Zusatzfelder Sektion -->
                        <div id="extraFieldsSection" class="mb-3" style="display: none;">
                            <div class="card border-0 bg-light">
                                <div class="card-body p-3">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h6 class="mb-0 fw-medium text-muted">
                                            <i class="fas fa-plus-square me-2"></i>Zusatzfelder für Buchungsformular
                                        </h6>
                                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="hideExtraFields()">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                    <div id="extraFieldsList" class="mb-2"></div>
                                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="addExtraField()">
                                        <i class="fas fa-plus me-1"></i>Weiteres Feld hinzufügen
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Payment-Optionen -->
                        <div class="row g-3 mb-3">
                            <div class="col-md-12">
                                <div class="card border-warning bg-warning bg-opacity-10">
                                    <div class="card-header bg-warning text-dark">
                                        <h6 class="mb-0">
                                            <i class="fas fa-euro-sign me-2"></i>Zahlungseinstellungen
                                        </h6>
                                    </div>
                                    <div class="card-body p-3">
                                        <div class="row g-3">
                                            <div class="col-md-12">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="isPaymentRequired" id="isPaymentRequired">
                                                    <label class="form-check-label fw-medium" for="isPaymentRequired">
                                                        <i class="fas fa-credit-card me-1 text-warning"></i>Kurs ist zahlungspflichtig
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div id="paymentFields" style="display: none;">
                                            <div class="row g-3 mt-3">
                                                <div class="col-md-4">
                                                    <div class="form-floating">
                                                        <input type="number" class="form-control" name="price" id="price" min="0" step="0.01" placeholder="0.00">
                                                        <label for="price" class="fw-semibold text-muted">
                                                            <i class="fas fa-euro-sign me-2 text-success"></i>Preis (€)
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-floating">
                                                        <input type="number" class="form-control" name="paymentReminderDays" id="paymentReminderDays" min="1" max="30" placeholder="7">
                                                        <label for="paymentReminderDays" class="fw-semibold text-muted">
                                                            <i class="fas fa-bell me-2 text-info"></i>Erinnerung (Tage vorher)
                                                        </label>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="form-floating">
                                                        <textarea class="form-control" name="paymentInstructions" id="paymentInstructions" style="height: 100px;" placeholder="Zahlungsanweisungen..."></textarea>
                                                        <label for="paymentInstructions" class="fw-semibold text-muted">
                                                            <i class="fas fa-info-circle me-2 text-primary"></i>Zahlungsanweisungen
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Untere Aktionszeile -->
                        <div class="row g-3 align-items-center pt-2 border-top">
                            <div class="col-md-4">
                                <button type="button" class="btn btn-outline-info btn-sm" onclick="showExtraFields()">
                                    <i class="fas fa-plus me-1"></i>Zusatzfelder hinzufügen
                                </button>
                            </div>
                            <div class="col-md-4 text-center">
                                <div class="form-check d-inline-block">
                                    <input class="form-check-input" type="checkbox" name="isAvailable" id="isAvailable" checked>
                                    <label class="form-check-label fw-medium" for="isAvailable">
                                        <i class="fas fa-toggle-on me-1 text-success"></i>Kurs ist verfügbar
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4 text-end">
                                <button type="submit" class="btn btn-success btn-lg me-2 modern-btn" style="border-radius: 0.5rem; padding: 0.75rem 1.5rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; box-shadow: 0 4px 8px rgba(25, 135, 84, 0.3); transition: all 0.3s ease;">
                                    <i class="fas fa-save me-2"></i>Kurs erstellen
                                </button>
                                <button type="button" class="btn btn-outline-secondary btn-lg modern-btn" id="cancelCreateCourseBtn" style="border-radius: 0.5rem; padding: 0.75rem 1.5rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; transition: all 0.3s ease;">
                                    <i class="fas fa-times me-2"></i>Abbrechen
                                </button>
                            </div>
                        </div>
                        
                        <!-- Versteckter Container für Zusatzfelder -->
                        <div id="extraFieldsContainer" style="display: none;">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Existing Courses -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow">
                <div class="card-header bg-white border-0 pb-0">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div>
                            <h5 class="card-title mb-1 fw-semibold">
                                <i class="fas fa-list me-2 text-primary"></i>Bestehende Kurse
                            </h5>
                            <p class="text-muted mb-0 small">Übersicht aller erstellten Kurse und Events</p>
                        </div>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm btn-outline-primary" onclick="loadCourses()">
                                <i class="fas fa-sync-alt me-1"></i>Aktualisieren
                            </button>
                            <button class="btn btn-sm btn-outline-info" onclick="showArchivedWaitingList()">
                                <i class="fas fa-archive me-1"></i>Archivierte Wartelisten
                            </button>
                            <button class="btn btn-sm btn-outline-danger" id="bulkDeleteBtn" onclick="bulkDeleteCourses()" style="display: none;">
                                <i class="fas fa-trash me-1"></i>Ausgewählte löschen (<span id="selectedCount">0</span>)
                            </button>
                        </div>
                    </div>
                    
                    <!-- Tab-Navigation -->
                    <ul class="nav nav-tabs nav-fill mb-4" id="courseTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="active-tab" data-bs-toggle="tab" data-bs-target="#active-courses" 
                                    type="button" role="tab" aria-controls="active-courses" aria-selected="true" onclick="switchCourseTab('active')">
                                <i class="fas fa-check-circle me-2"></i>Aktive Kurse 
                                <span class="badge bg-success ms-2" id="activeCoursesCount">0</span>
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="ended-tab" data-bs-toggle="tab" data-bs-target="#ended-courses" 
                                    type="button" role="tab" aria-controls="ended-courses" aria-selected="false" onclick="switchCourseTab('ended')">
                                <i class="fas fa-flag-checkered me-2"></i>Beendete Kurse 
                                <span class="badge bg-dark ms-2" id="endedCoursesCount">0</span>
                            </button>
                        </li>
                    </ul>
                    
                    <!-- Moderne Suchleiste & Filter -->
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <div class="input-group modern-search">
                                <span class="input-group-text bg-white border-end-0">
                                    <i class="fas fa-search text-muted"></i>
                                </span>
                                <input type="text" class="form-control border-start-0 search-input" id="courseSearch" 
                                       placeholder="Kurse durchsuchen (Name, Typ, Standort, Status, Zielgruppe)..." 
                                       autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <select class="form-select" id="targetGroupFilter" onchange="filterCourses()">
                                <option value="">🎯 Alle Zielgruppen</option>
                                <option value="_none">❌ Ohne Zielgruppe</option>
                                <!-- Zielgruppen werden dynamisch geladen -->
                            </select>
                        </div>
                        <div class="col-md-3">
                            <div class="d-flex align-items-center justify-content-end gap-2">
                                <span class="badge bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25" id="searchResults">
                                    <i class="fas fa-info-circle me-1"></i>
                                    <span id="searchCount">0</span> von <span id="totalCount">0</span> Kursen
                                </span>
                                <button class="btn btn-outline-secondary btn-sm" id="clearSearch" style="display: none;" title="Filter zurücksetzen" onclick="clearAllFilters()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Zielgruppen-Schnellfilter -->
                    <div class="d-flex gap-2 mb-3 flex-wrap" id="targetGroupQuickFilters">
                        <button class="btn btn-sm btn-outline-primary active" data-filter="" onclick="quickFilterTargetGroup(this, '')">
                            <i class="fas fa-list me-1"></i>Alle (<span class="target-group-count-all">0</span>)
                        </button>
                        <button class="btn btn-sm btn-outline-secondary" data-filter="_none" onclick="quickFilterTargetGroup(this, '_none')">
                            <i class="fas fa-question me-1"></i>Ohne Zielgruppe (<span class="target-group-count-none">0</span>)
                        </button>
                        <!-- Dynamische Zielgruppen-Buttons werden hier geladen -->
                    </div>
                </div>
                <div class="card-body pt-3">
                    <!-- Tab Content -->
                    <div class="tab-content" id="courseTabContent">
                        <!-- Aktive Kurse Tab -->
                        <div class="tab-pane fade show active" id="active-courses" role="tabpanel" aria-labelledby="active-tab">
                            <div class="table-responsive">
                                <table class="table table-modern table-hover mb-0" id="coursesTable">
                                    <thead class="table-dark">
                                        <tr>
                                            <th style="width: 40px; vertical-align: middle;">
                                                <div class="form-check mb-0">
                                                    <input class="form-check-input" type="checkbox" id="selectAllCourses" onchange="toggleAllCourses(this)">
                                                    <label class="form-check-label" for="selectAllCourses"></label>
                                                </div>
                                            </th>
                                            <th class="fw-semibold">
                                                <i class="fas fa-graduation-cap me-2 text-warning"></i>Kursname
                                            </th>
                                            <th class="fw-semibold">
                                                <i class="fas fa-tag me-2 text-info"></i>Typ
                                            </th>
                                            <th class="fw-semibold">
                                                <i class="fas fa-map-marker-alt me-2 text-danger"></i>Standort
                                            </th>
                                            <th class="fw-semibold">
                                                <i class="fas fa-clock me-2 text-success"></i>Zeit
                                            </th>
                                            <th class="fw-semibold">
                                                <i class="fas fa-calendar-week me-2 text-primary"></i>Tage
                                            </th>
                                            <th class="fw-semibold">
                                                <i class="fas fa-power-off me-2 text-light"></i>Status
                                            </th>
                                            <th class="fw-semibold text-center">
                                                <i class="fas fa-tools me-2 text-secondary"></i>Aktionen
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="coursesTableBody">
                                        <!-- Active courses will be loaded here via JavaScript -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <!-- Beendete Kurse Tab -->
                        <div class="tab-pane fade" id="ended-courses" role="tabpanel" aria-labelledby="ended-tab">
                            <div class="table-responsive">
                                <table class="table table-modern table-hover mb-0" id="endedCoursesTable">
                                    <thead class="table-dark">
                                        <tr>
                                            <th style="width: 40px; vertical-align: middle;">
                                                <div class="form-check mb-0">
                                                    <input class="form-check-input" type="checkbox" id="selectAllEndedCourses" onchange="toggleAllCourses(this, true)">
                                                    <label class="form-check-label" for="selectAllEndedCourses"></label>
                                                </div>
                                            </th>
                                            <th class="fw-semibold">
                                                <i class="fas fa-graduation-cap me-2 text-warning"></i>Kursname
                                            </th>
                                            <th class="fw-semibold">
                                                <i class="fas fa-tag me-2 text-info"></i>Typ
                                            </th>
                                            <th class="fw-semibold">
                                                <i class="fas fa-map-marker-alt me-2 text-danger"></i>Standort
                                            </th>
                                            <th class="fw-semibold">
                                                <i class="fas fa-calendar-times me-2 text-danger"></i>Enddatum
                                            </th>
                                            <th class="fw-semibold">
                                                <i class="fas fa-calendar-week me-2 text-primary"></i>Tage
                                            </th>
                                            <th class="fw-semibold">
                                                <i class="fas fa-power-off me-2 text-light"></i>Status
                                            </th>
                                            <th class="fw-semibold text-center">
                                                <i class="fas fa-tools me-2 text-secondary"></i>Aktionen
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody id="endedCoursesTableBody">
                                        <!-- Ended courses will be loaded here via JavaScript -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Copy Course Confirmation Modal -->
<div class="modal fade" id="copyCourseModal" tabindex="-1" aria-labelledby="copyCourseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="copyCourseModalLabel">
                    <i class="fas fa-copy me-2"></i>Kurs kopieren
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-4">
                    <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                        <i class="fas fa-copy fa-2x text-success"></i>
                    </div>
                </div>
                
                <h6 class="text-center mb-3" id="copyCourseTitle">Kurs kopieren?</h6>
                
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Der Kurs wird mit allen Einstellungen kopiert:</strong>
                </div>
                
                <div class="row g-3">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-font text-primary me-2"></i>
                            <small>Kursname (mit "Kopie von" Präfix)</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-clock text-primary me-2"></i>
                            <small>Alle Zeiteinstellungen</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-calendar-week text-primary me-2"></i>
                            <small>Wochentage und Uhrzeiten</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-plus-square text-primary me-2"></i>
                            <small>Zusatzfelder</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-map-marker-alt text-primary me-2"></i>
                            <small>Standort</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-users text-primary me-2"></i>
                            <small>Teilnehmerzahl</small>
                        </div>
                    </div>
                </div>
                
                <div class="alert alert-success mt-3">
                    <i class="fas fa-edit me-2"></i>
                    Sie können anschließend alle Daten anpassen und den neuen Kurs speichern.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Abbrechen
                </button>
                <button type="button" class="btn btn-success" id="confirmCopyBtn">
                    <i class="fas fa-copy me-1"></i>Kurs kopieren
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Delete Confirmation Modal -->
<div class="modal fade" id="bulkDeleteModal" tabindex="-1" aria-labelledby="bulkDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="bulkDeleteModalLabel">
                    <i class="fas fa-exclamation-triangle me-2"></i>Mehrere Kurse löschen
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-4">
                    <div class="bg-danger bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                        <i class="fas fa-exclamation-triangle fa-2x text-danger"></i>
                    </div>
                </div>
                
                <h6 class="text-center mb-3" id="bulkDeleteTitle">Mehrere Kurse wirklich löschen?</h6>
                
                <div class="alert alert-warning">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Folgende Daten werden für alle ausgewählten Kurse gelöscht:</strong>
                </div>
                
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-calendar-times text-warning me-2"></i>
                            <small>Alle Termine und Buchungen</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-clock text-warning me-2"></i>
                            <small>Zeiteinstellungen</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-cog text-warning me-2"></i>
                            <small>Kurs-Konfigurationen</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-plus-square text-warning me-2"></i>
                            <small>Zusatzfelder</small>
                        </div>
                    </div>
                </div>
                
                <!-- Kursliste -->
                <div class="card mb-3">
                    <div class="card-header">
                        <h6 class="mb-0">
                            <i class="fas fa-list me-2"></i>Ausgewählte Kurse
                        </h6>
                    </div>
                    <div class="card-body p-0">
                        <div id="bulkDeleteCoursesList" class="list-group list-group-flush">
                            <!-- Wird dynamisch befüllt -->
                        </div>
                    </div>
                </div>
                
                <!-- Wartelisten-Übersicht -->
                <div id="bulkWaitingListSection" style="display: none;">
                    <div class="alert alert-info">
                        <i class="fas fa-list-ul me-2"></i>
                        <strong>Wartelisten-Übersicht:</strong>
                    </div>
                    <div id="bulkWaitingListSummary" class="mb-3">
                        <!-- Wird dynamisch befüllt -->
                    </div>
                    
                    <div class="alert alert-success">
                        <i class="fas fa-shield-alt me-2"></i>
                        <strong>Die Wartelisten-Daten bleiben erhalten</strong> und können später für Nachfragen oder andere Kurse verwendet werden.
                    </div>
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="bulkArchiveWaitingList" checked>
                        <label class="form-check-label" for="bulkArchiveWaitingList">
                            <i class="fas fa-archive me-1"></i>
                            Alle Wartelisten archivieren (empfohlen)
                        </label>
                        <small class="form-text text-muted d-block">
                            Die Wartelisten-Einträge werden als "archiviert" markiert, bleiben aber für spätere Nachfragen verfügbar.
                        </small>
                    </div>
                </div>
                
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Diese Aktion kann nicht rückgängig gemacht werden!</strong>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Abbrechen
                </button>
                <button type="button" class="btn btn-danger" id="confirmBulkDeleteBtn">
                    <i class="fas fa-trash me-1"></i>Alle löschen
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Course Confirmation Modal -->
<div class="modal fade" id="deleteCourseModal" tabindex="-1" aria-labelledby="deleteCourseModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteCourseModalLabel">
                    <i class="fas fa-exclamation-triangle me-2"></i>Kurs löschen
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center mb-4">
                    <div class="bg-danger bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                        <i class="fas fa-exclamation-triangle fa-2x text-danger"></i>
                    </div>
                </div>
                
                <h6 class="text-center mb-3" id="deleteCourseTitle">Kurs wirklich löschen?</h6>
                
                <div class="alert alert-warning">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Folgende Daten werden gelöscht:</strong>
                </div>
                
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-calendar-times text-warning me-2"></i>
                            <small>Alle Termine und Buchungen</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-clock text-warning me-2"></i>
                            <small>Zeiteinstellungen</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-cog text-warning me-2"></i>
                            <small>Kurs-Konfiguration</small>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-plus-square text-warning me-2"></i>
                            <small>Zusatzfelder</small>
                        </div>
                    </div>
                </div>
                
                <!-- Wartelisten-Bereich -->
                <div id="waitingListSection" style="display: none;">
                    <div class="alert alert-info">
                        <i class="fas fa-list-ul me-2"></i>
                        <strong>Warteliste für diesen Kurs:</strong>
                    </div>
                    <div id="waitingListPreview" class="mb-3">
                        <!-- Wird dynamisch befüllt -->
                    </div>
                    
                    <div class="alert alert-success">
                        <i class="fas fa-shield-alt me-2"></i>
                        <strong>Die Wartelisten-Daten bleiben erhalten</strong> und können später für Nachfragen oder andere Kurse verwendet werden.
                    </div>
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="archiveWaitingList" checked>
                        <label class="form-check-label" for="archiveWaitingList">
                            <i class="fas fa-archive me-1"></i>
                            Warteliste archivieren (empfohlen)
                        </label>
                        <small class="form-text text-muted d-block">
                            Die Wartelisten-Einträge werden als "archiviert" markiert, bleiben aber für spätere Nachfragen verfügbar.
                        </small>
                    </div>
                </div>
                
                <div class="alert alert-danger">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    <strong>Diese Aktion kann nicht rückgängig gemacht werden!</strong>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Abbrechen
                </button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                    <i class="fas fa-trash me-1"></i>Kurs löschen
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Course Details Modal -->
<div class="modal fade" id="courseDetailsModal" tabindex="-1" aria-labelledby="courseDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="courseDetailsModalLabel">
                    <i class="fas fa-graduation-cap me-2"></i>Kursdetails
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="courseDetailsContent">
                    <!-- Wird dynamisch befüllt -->
                </div>
            </div>
            <div class="modal-footer">
                <div class="btn-group me-auto" role="group">
                    <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-file-pdf me-1"></i>PDF-Export
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#" onclick="downloadPdf('participants'); return false;">
                            <i class="fas fa-users me-2"></i>Teilnehmerliste (mit Kontakten)
                        </a></li>
                        <li><a class="dropdown-item" href="#" onclick="downloadPdf('participants-simple'); return false;">
                            <i class="fas fa-list me-2"></i>Teilnehmerliste (einfach)
                        </a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#" onclick="downloadPdf('attendance'); return false;">
                            <i class="fas fa-clipboard-check me-2"></i>Anwesenheitsliste
                        </a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#" onclick="downloadPdf('badges'); return false;">
                            <i class="fas fa-id-badge me-2"></i>Namensschilder
                        </a></li>
                        <li><a class="dropdown-item" href="#" onclick="downloadPdf('certificates'); return false;">
                            <i class="fas fa-certificate me-2"></i>Zertifikate (alle)
                        </a></li>
                    </ul>
                </div>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Schließen
                </button>
                <button type="button" class="btn btn-primary" id="editCourseFromDetails">
                    <i class="fas fa-edit me-1"></i>Bearbeiten
                </button>
                <button type="button" class="btn btn-success" id="copyCourseFromDetails">
                    <i class="fas fa-copy me-1"></i>Kopieren
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Waiting List Modal -->
<div class="modal fade" id="waitingListModal" tabindex="-1" aria-labelledby="waitingListModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="waitingListModalLabel">
                    <i class="fas fa-list-ul me-2"></i>Warteliste
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="waitingListContent">
                    <!-- Wird dynamisch befüllt -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" id="exportCsvBtn" onclick="exportWaitingListCsv()" style="display: none;">
                    <i class="fas fa-download me-2"></i>CSV Export
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-1"></i>Schließen
                </button>
            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Course type specific buttons
            const recurringBtn = document.getElementById('createRecurringCourse');
            const limitedBtn = document.getElementById('createLimitedCourse');
            const holidayBtn = document.getElementById('createHolidayCourse');
            const eventBtn = document.getElementById('createEvent');
            
            if (recurringBtn) {
                recurringBtn.addEventListener('click', function() {
                    showCreateForm('recurring_course');
                });
            }
            
            if (limitedBtn) {
                limitedBtn.addEventListener('click', function() {
                    showCreateForm('limited_course');
                });
            }
            
            if (holidayBtn) {
                holidayBtn.addEventListener('click', function() {
                    showCreateForm('holiday_course');
                });
            }
            
            if (eventBtn) {
                eventBtn.addEventListener('click', function() {
                    showCreateForm('event');
                });
            }

            const cancelBtn = document.getElementById('cancelCreateCourse');
            if (cancelBtn) {
                cancelBtn.addEventListener('click', function() {
                    const section = document.getElementById('createCourseSection');
                    const form = document.getElementById('createCourseForm');
                    if (section) section.style.display = 'none';
                    if (form) form.reset();
                });
            }

            // Event-Listener für Abbrechen-Buttons
            const cancelButtons = ['cancelCreateCourse', 'cancelCreateCourseBtn'];
            cancelButtons.forEach(buttonId => {
                const button = document.getElementById(buttonId);
                if (button) {
                    button.addEventListener('click', function() {
                        document.getElementById('createCourseSection').style.display = 'none';
                    });
                }
            });

        // Load existing courses
        loadCourses();
        
        // Initialize search functionality
        initializeSearch();
            
            // Handle copy course confirmation
            const confirmCopyBtn = document.getElementById('confirmCopyBtn');
            if (confirmCopyBtn) {
                confirmCopyBtn.addEventListener('click', function() {
                    if (window.courseDataToCopy) {
                        // Schließe das Modal
                        const modal = bootstrap.Modal.getInstance(document.getElementById('copyCourseModal'));
                        modal.hide();
                        
                        // Kopiere die Kursdaten und fülle das Formular
                        fillFormWithCourseData(window.courseDataToCopy, true); // true = Kopiermodus
                        
                        // Zeige das Formular an
                        document.getElementById('createCourseSection').style.display = 'block';
                        document.getElementById('createCourseSection').scrollIntoView({ behavior: 'smooth', block: 'start' });
                        
                        showAlert('✅ Kurs wurde zum Kopieren geladen. Nehmen Sie Ihre Änderungen vor und speichern Sie den neuen Kurs.', 'success');
                        
                        // Cleanup
                        window.courseDataToCopy = null;
                    }
                });
            }
            
            // Handle course details modal buttons
            const editCourseFromDetails = document.getElementById('editCourseFromDetails');
            const copyCourseFromDetails = document.getElementById('copyCourseFromDetails');
            
            if (editCourseFromDetails) {
                editCourseFromDetails.addEventListener('click', function() {
                    if (window.currentCourseDetails) {
                        // Schließe das Details-Modal
                        const modal = bootstrap.Modal.getInstance(document.getElementById('courseDetailsModal'));
                        modal.hide();
                        
                        // Öffne das Bearbeitungsformular
                        editCourse(window.currentCourseDetails.id);
                    }
                });
            }
            
            if (copyCourseFromDetails) {
                copyCourseFromDetails.addEventListener('click', function() {
                    if (window.currentCourseDetails) {
                        // Schließe das Details-Modal
                        const modal = bootstrap.Modal.getInstance(document.getElementById('courseDetailsModal'));
                        modal.hide();
                        
                        // Speichere die Daten für das Kopier-Modal
                        window.courseDataToCopy = window.currentCourseDetails;
                        
                        // Aktualisiere den Modal-Titel
                        document.getElementById('copyCourseTitle').textContent = `"${window.currentCourseDetails.name}" kopieren?`;
                        
                        // Zeige das Kopier-Modal
                        const copyModal = new bootstrap.Modal(document.getElementById('copyCourseModal'));
                        copyModal.show();
                    }
                });
            }

            // Handle bulk delete confirmation
            const confirmBulkDeleteBtn = document.getElementById('confirmBulkDeleteBtn');
            if (confirmBulkDeleteBtn) {
                confirmBulkDeleteBtn.addEventListener('click', function() {
                    if (window.coursesToDelete) {
                        const archiveWaitingList = document.getElementById('bulkArchiveWaitingList').checked;
                        const courseIds = window.coursesToDelete.map(c => c.id);
                        
                        // Schließe das Modal
                        const modal = bootstrap.Modal.getInstance(document.getElementById('bulkDeleteModal'));
                        modal.hide();
                        
                        // Zeige Lade-Indikator
                        const tableBody = document.getElementById('coursesTableBody');
                        if (tableBody) {
                            tableBody.innerHTML = `
                                <tr>
                                    <td colspan="8" class="text-center py-4">
                                        <div class="spinner-border spinner-border-sm text-danger me-2" role="status"></div>
                                        ${courseIds.length} Kurs${courseIds.length > 1 ? 'e' : ''} wird gelöscht...
                                    </td>
                                </tr>
                            `;
                        }
                        
                        // Führe Bulk-Delete aus
                        executeBulkDelete(courseIds, archiveWaitingList);
                    }
                });
            }

            // Handle delete course confirmation
            const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
            if (confirmDeleteBtn) {
                confirmDeleteBtn.addEventListener('click', function() {
                    if (window.courseToDelete) {
                        const courseId = window.courseToDelete.id;
                        const archiveWaitingList = document.getElementById('archiveWaitingList').checked;
                        
                        // Schließe das Modal
                        const modal = bootstrap.Modal.getInstance(document.getElementById('deleteCourseModal'));
                        modal.hide();
                        
                        // Führe die Löschung aus
                        fetch(`{{ path('appointment_admin_availability_delete', {'id': '__ID__'}) }}`.replace('__ID__', courseId), {
                            method: 'DELETE',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify({
                                archiveWaitingList: archiveWaitingList
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Zeige kurz einen Lade-Indikator
                                const tableBody = document.getElementById('coursesTableBody');
                                if (tableBody) {
                                    tableBody.innerHTML = `
                                        <tr>
                                            <td colspan="8" class="text-center py-4">
                                                <div class="spinner-border spinner-border-sm text-primary me-2" role="status"></div>
                                                Kursliste wird aktualisiert...
                                            </td>
                                        </tr>
                                    `;
                                }
                                
                                // Tabelle nach kurzer Verzögerung aktualisieren
                                setTimeout(() => {
                                    loadCourses();
                                }, 500);
                                
                                let message = '✅ Kurs erfolgreich gelöscht!';
                                if (window.courseToDelete.waitingList.count > 0) {
                                    if (archiveWaitingList) {
                                        message += ` Die ${window.courseToDelete.waitingList.count} Wartelisten-Einträge wurden archiviert.`;
                                    } else {
                                        message += ` Die ${window.courseToDelete.waitingList.count} Wartelisten-Einträge bleiben aktiv.`;
                                    }
                                }
                                
                                showAlert(message, 'success');
                            } else {
                                showAlert('❌ Fehler beim Löschen: ' + (data.error || 'Unbekannter Fehler'), 'danger');
                            }
                        })
                        .catch(error => {
                            console.error('Error deleting course:', error);
                            showAlert('❌ Netzwerkfehler beim Löschen des Kurses', 'danger');
                            // Auch bei Fehlern die Tabelle aktualisieren, um sicherzustellen, dass der aktuelle Zustand angezeigt wird
                            loadCourses();
                        })
                        .finally(() => {
                            // Cleanup
                            window.courseToDelete = null;
                        });
                    }
                });
            }

            // Handle create/edit course form submission
            const createForm = document.getElementById('createCourseForm');
            if (createForm) {
                createForm.addEventListener('submit', function(e) {
                    e.preventDefault();
                    
                    // Prüfe ob wir im Bearbeitungsmodus sind
                    if (window.editingCourseId) {
                        updateCourse(window.editingCourseId);
                    } else {
                        createCourse();
                    }
                });
            }
        });
        
        // Funktion zum Anzeigen des Formulars mit vorkonfiguriertem Kurstyp
        function showCreateForm(courseType) {
            const section = document.getElementById('createCourseSection');
            const form = document.getElementById('createCourseForm');
            const courseTypeSelect = document.getElementById('courseType');
            const cardTitle = section.querySelector('.card-title');
            const submitButton = document.querySelector('#createCourseForm button[type="submit"]');
            
            if (!section || !form || !courseTypeSelect) return;
            
            // Bearbeitungsmodus zurücksetzen
            window.editingCourseId = null;
            
            // Formular zurücksetzen
            form.reset();
            
            // Kurstyp setzen
            courseTypeSelect.value = courseType;
            
            // Titel und Button für Erstellungsmodus anpassen
            const typeNames = {
                'recurring_course': 'Dauerhaften Kurs anlegen',
                'limited_course': 'Zeitlich begrenzten Kurs anlegen', 
                'holiday_course': 'Ferienkurs anlegen',
                'event': 'Einmaliges Event anlegen'
            };
            
            if (cardTitle) {
                cardTitle.innerHTML = '<i class="fas fa-plus me-2"></i>' + typeNames[courseType];
            }
            
            if (submitButton) {
                submitButton.innerHTML = '<i class="fas fa-save me-1"></i>Kurs erstellen';
            }
            
            // Formular anzeigen
            section.style.display = 'block';
            
            // Kurstyp-spezifische Konfiguration auslösen
            handleCourseTypeChange();
            
            // Event-Listener für Wochentage neu registrieren (mit Retry-Logik)
            if (!setupDaysOfWeekListener()) {
                // Falls Element noch nicht verfügbar, versuche es nach kurzer Verzögerung erneut
                setTimeout(() => {
                    setupDaysOfWeekListener();
                }, 100);
            }
            
            // Standardzeiten setzen falls noch nicht gesetzt
            setTimeout(() => {
                const generalStartTime = document.getElementById('generalStartTime');
                const generalEndTime = document.getElementById('generalEndTime');
                const daysOfWeek = document.getElementById('daysOfWeek');
                
                if (generalStartTime && !generalStartTime.value) {
                    generalStartTime.value = '09:00';
                }
                if (generalEndTime && !generalEndTime.value) {
                    generalEndTime.value = '10:00';
                }
                
                // Kurstyp-spezifische Initialisierung
                if (courseType === 'holiday_course' && daysOfWeek) {
                    // Automatisch Mo-Fr auswählen für Ferienkurse
                    const holidayDays = [1, 2, 3, 4, 5]; // Mo-Fr
                    Array.from(daysOfWeek.options).forEach(option => {
                        option.selected = holidayDays.includes(parseInt(option.value));
                    });
                }
                
                // Für limited_course und holiday_course: Tageszeiten aktualisieren
                if (courseType === 'limited_course' || courseType === 'holiday_course') {
                    updateDayTimes();
                }
            }, 100);
            
            // Zum Formular scrollen
            section.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }

        // Globale Variable für den aktuellen Tab
        let currentCourseTab = 'active';

        function switchCourseTab(tab) {
            currentCourseTab = tab;
            // Filterfunktion wird beim Tab-Wechsel automatisch durch Bootstrap ausgelöst
            // Wir müssen nur sicherstellen, dass die Suche ggf. aktualisiert wird
            const searchInput = document.getElementById('courseSearch');
            if (searchInput && searchInput.value) {
                filterCourses();
            }
        }

        function isCourseEnded(course) {
            // Ein Kurs ist beendet, wenn er ein Enddatum hat und dieses in der Vergangenheit liegt
            if ((course.type === 'limited_course' || course.type === 'holiday_course') && course.endDate) {
                // Parse das Datum richtig (YYYY-MM-DD Format vom Backend)
                const endDate = new Date(course.endDate + 'T23:59:59'); // Setze auf Ende des Tages
                const today = new Date();
                today.setHours(0, 0, 0, 0); // Setze auf Beginn des Tages
                
                // Debug-Ausgabe (kann später entfernt werden)
                console.log('Checking course:', course.name, 'End date:', course.endDate, 'Ended:', endDate < today);
                
                return endDate < today;
            }
            return false;
        }

        function loadCourses() {
            document.getElementById('coursesTableBody').innerHTML = `
                <tr>
                    <td colspan="8" class="text-center">
                        <i class="fas fa-spinner fa-spin me-2"></i>Kurse werden geladen...
                    </td>
                </tr>
            `;
            document.getElementById('endedCoursesTableBody').innerHTML = `
                <tr>
                    <td colspan="8" class="text-center">
                        <i class="fas fa-spinner fa-spin me-2"></i>Kurse werden geladen...
                    </td>
                </tr>
            `;
            
            // Load courses from the backend
            {% if availabilities %}
                let courses = {{ availabilities|json_encode|raw }};
                
                // Sortiere Kurse: Neueste zuerst (nach ID oder createdAt, falls verfügbar)
                courses.sort((a, b) => {
                    // Wenn createdAt verfügbar ist, nutze das
                    if (a.createdAt && b.createdAt) {
                        return new Date(b.createdAt) - new Date(a.createdAt);
                    }
                    // Sonst nach ID sortieren (neuere haben höhere IDs)
                    return (b.id || 0) - (a.id || 0);
                });
                
                allCourses = courses; // Speichere für die Suchfunktion
                
                // Trenne aktive und beendete Kurse
                const activeCourses = courses.filter(course => !isCourseEnded(course));
                const endedCourses = courses.filter(course => isCourseEnded(course));
                
                // Zeige beide Listen an
                displayCourses(activeCourses, false);
                displayCourses(endedCourses, true);
                
                // Aktualisiere die Badge-Zähler
                document.getElementById('activeCoursesCount').textContent = activeCourses.length;
                document.getElementById('endedCoursesCount').textContent = endedCourses.length;
                
                updateSearchCounter(courses.length, courses.length); // Initialer Counter
                
                // Aktualisiere Zielgruppen-Zählungen wenn Zielgruppen bereits geladen sind
                if (availableTargetGroups && availableTargetGroups.length > 0) {
                    updateTargetGroupCounts(courses);
                }
            {% else %}
                allCourses = []; // Leere Liste für die Suchfunktion
                document.getElementById('coursesTableBody').innerHTML = `
                    <tr>
                        <td colspan="8" class="text-center text-muted">
                            <i class="fas fa-inbox me-2"></i>Keine aktiven Kurse vorhanden
                        </td>
                    </tr>
                `;
                document.getElementById('endedCoursesTableBody').innerHTML = `
                    <tr>
                        <td colspan="8" class="text-center text-muted">
                            <i class="fas fa-inbox me-2"></i>Keine beendeten Kurse vorhanden
                        </td>
                    </tr>
                `;
                document.getElementById('activeCoursesCount').textContent = '0';
                document.getElementById('endedCoursesCount').textContent = '0';
                updateSearchCounter(0, 0); // Counter auf 0 setzen
            {% endif %}
        }

        function createCourse() {
            const form = document.getElementById('createCourseForm');
            const formData = new FormData(form);
            
            // Convert form data to JSON for API
            const selectedDays = Array.from(document.getElementById('daysOfWeek').selectedOptions).map(option => option.value);
            
            //Zielgruppe ermitteln
            let targetGroup = null;
            const selectedTargetGroup = document.querySelector('input[name="targetGroup"]:checked');
            if (selectedTargetGroup) {
                targetGroup = selectedTargetGroup.value;
            }

            const courseType = document.getElementById('courseType').value;
            
            // Hole die korrekten Start-/Endzeit-Felder je nach Kurstyp
            let startTimeValue, endTimeValue;
            if (courseType === 'event') {
                startTimeValue = document.getElementById('generalStartTime')?.value || '08:00';
                endTimeValue = document.getElementById('generalEndTime')?.value || '09:00';
            } else {
                // Für Kurse verwenden wir die Tageszeiten (werden später in dayTimes gesetzt)
                // Als Fallback nehmen wir die erste verfügbare Zeit
                const firstDayTime = document.querySelector('.day-start-time');
                startTimeValue = firstDayTime?.value || '08:00';
                const firstDayEndTime = document.querySelector('.day-end-time');
                endTimeValue = firstDayEndTime?.value || '09:00';
            }

            const courseData = {
                name: document.getElementById('courseName').value,
                type: courseType,
                location: document.getElementById('courseLocation').value,
                maxSlots: document.getElementById('maxParticipants').value,
                startTime: startTimeValue,
                endTime: endTimeValue,
                slotDuration: document.querySelector('input[name="slotDuration"]').value,
                bufferTime: document.querySelector('input[name="bufferTime"]').value,
                daysOfWeek: selectedDays,
                isAvailable: document.getElementById('isAvailable').checked,
                targetGroup: targetGroup,
                learningGoals: document.getElementById('learningGoals').value,
                courseContent: document.getElementById('courseContent').value,
                duration: document.getElementById('duration').value,
                excludedDates: getExcludedDates(),
                excludeHolidays: document.getElementById('excludeHolidays')?.checked || false,
                // Payment-Daten
                isPaymentRequired: document.getElementById('isPaymentRequired').checked,
                price: document.getElementById('price').value || null,
                paymentInstructions: document.getElementById('paymentInstructions').value || null,
                paymentReminderDays: document.getElementById('paymentReminderDays').value || null
            };
            
            // Datum-Felder je nach Kurstyp (Events nutzen eigene Felder eventStartDate/eventEndDate)
            if (courseData.type === 'limited_course' || courseData.type === 'holiday_course') {
                courseData.startDate = document.getElementById('startDate').value;
                courseData.endDate = document.getElementById('endDate').value;
                courseData.numberOfSessions = 1;
                courseData.sessionDuration = 60;
                
                // Add day-specific times
                const dayTimes = {};
                document.querySelectorAll('.day-start-time').forEach(input => {
                    const day = input.dataset.day;
                    const endTime = document.querySelector(`.day-end-time[data-day="${day}"]`);
                    if (input.value && endTime.value) {
                        dayTimes[day] = {
                            startTime: input.value,
                            endTime: endTime.value
                        };
                    }
                });
                courseData.dayTimes = dayTimes;
            } else if (courseData.type === 'event') {
                const eventStart = document.getElementById('eventStartDate')?.value || '';
                // eventEndDate ist im UI versteckt und kann Altwerte tragen → einmaliges Event = gleicher Tag
                courseData.startDate = eventStart;
                courseData.endDate = eventStart;
                courseData.numberOfSessions = 1;
                courseData.sessionDuration = 60;

                if (!courseData.startDate) {
                    showAlert('Für Events ist ein Datum erforderlich.', 'danger');
                    return;
                }
            } else if (courseData.type === 'recurring_course') {
                courseData.startDate = document.getElementById('startDate')?.value || '';
            }
            
            // Add extra fields
            courseData.extraFields = extraFields;
            
            fetch('{{ path('app_appointment_admin_availability') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(courseData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Hide form and reset
                    document.getElementById('createCourseSection').style.display = 'none';
                    form.reset();
                    
                    // Reload courses
                    loadCourses();
                    
                    // Show success message
                    showAlert('Kurs erfolgreich erstellt!', 'success');
                } else {
                    showAlert('Fehler beim Erstellen des Kurses: ' + (data.message || 'Unbekannter Fehler'), 'danger');
                }
            })
            .catch(error => {
                console.error('Error creating course:', error);
                showAlert('Fehler beim Erstellen des Kurses: ' + error.message, 'danger');
            });
        }

        function updateCourse(courseId) {
            const form = document.getElementById('createCourseForm');
            const formData = new FormData(form);
            
            // Zielgruppe ermitteln
            let targetGroup = null;
            const selectedTargetGroup = document.querySelector('input[name="targetGroup"]:checked');
            if (selectedTargetGroup) {
                targetGroup = selectedTargetGroup.value;
            }

            // Hole Kurstyp
            const courseType = formData.get('type') || document.getElementById('courseType').value;
            
            // Hole die korrekten Start-/Endzeit-Felder je nach Kurstyp
            let startTimeValue, endTimeValue;
            if (courseType === 'event') {
                startTimeValue = formData.get('startTime') || document.getElementById('generalStartTime')?.value || '08:00';
                endTimeValue = formData.get('endTime') || document.getElementById('generalEndTime')?.value || '09:00';
            } else {
                // Für Kurse verwenden wir die Tageszeiten
                const firstDayTime = document.querySelector('.day-start-time');
                startTimeValue = firstDayTime?.value || '08:00';
                const firstDayEndTime = document.querySelector('.day-end-time');
                endTimeValue = firstDayEndTime?.value || '09:00';
            }

            // Sammle alle Formulardaten wie bei createCourse
            const courseData = {
                name: formData.get('courseName') || document.getElementById('courseName').value,
                type: courseType,
                location: formData.get('courseLocation') || document.getElementById('courseLocation').value,
                maxSlots: parseInt(formData.get('maxSlots')) || parseInt(document.getElementById('maxParticipants').value),
                slotDuration: parseInt(formData.get('slotDuration')),
                bufferTime: parseInt(formData.get('bufferTime')),
                isAvailable: formData.has('isAvailable') || document.getElementById('isAvailable').checked,
                startDate: formData.get('startDate') || document.getElementById('startDate').value,
                endDate: formData.get('endDate') || document.getElementById('endDate').value,
                startTime: startTimeValue,
                endTime: endTimeValue,
                numberOfSessions: parseInt(formData.get('numberOfSessions')) || 1,
                sessionDuration: parseInt(formData.get('sessionDuration')) || 60,
                targetGroup: targetGroup,
                learningGoals: document.getElementById('learningGoals').value,
                courseContent: document.getElementById('courseContent').value,
                duration: document.getElementById('duration').value,
                excludedDates: getExcludedDates(),
                excludeHolidays: document.getElementById('excludeHolidays')?.checked || false,
                // Payment-Daten
                isPaymentRequired: document.getElementById('isPaymentRequired').checked,
                price: document.getElementById('price').value || null,
                paymentInstructions: document.getElementById('paymentInstructions').value || null,
                paymentReminderDays: document.getElementById('paymentReminderDays').value || null
            };

            // Sammle Wochentage
            const daysSelect = document.getElementById('daysOfWeek');
            if (daysSelect) {
                courseData.daysOfWeek = Array.from(daysSelect.selectedOptions).map(option => parseInt(option.value));
            }

            // Sammle Tageszeiten
            const dayTimes = {};
            document.querySelectorAll('.day-start-time').forEach(input => {
                const day = input.dataset.day;
                const endInput = document.querySelector(`.day-end-time[data-day="${day}"]`);
                if (input.value && endInput && endInput.value) {
                    dayTimes[day] = {
                        startTime: input.value,
                        endTime: endInput.value
                    };
                }
            });
            if (Object.keys(dayTimes).length > 0) {
                courseData.dayTimes = dayTimes;
            }

            // Sammle Zusatzfelder
            if (extraFields && extraFields.length > 0) {
                courseData.extraFields = extraFields;
            }

            // Events: sichtbares Feld eventStartDate → API (einmalig: Ende = Start)
            if (courseData.type === 'event') {
                const eventStart = document.getElementById('eventStartDate')?.value
                    || formData.get('eventStartDate')
                    || '';
                courseData.startDate = eventStart;
                courseData.endDate = eventStart;

                if (!courseData.startDate) {
                    showAlert('Für Events ist ein Datum erforderlich.', 'danger');
                    return;
                }
            }

            // Füge die ID für Update hinzu
            courseData.id = courseId;
            
            // Sende Update-Request (gleiche Route wie Create, aber mit ID)
            fetch(`{{ path('app_appointment_admin_availability') }}`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(courseData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Formular verstecken und zurücksetzen
                    document.getElementById('createCourseSection').style.display = 'none';
                    form.reset();
                    window.editingCourseId = null;
                    
                    // Kursliste neu laden
                    loadCourses();
                    
                    // Erfolgsmeldung anzeigen
                    showAlert('✅ Kurs erfolgreich aktualisiert!', 'success');
                } else {
                    showAlert('❌ Fehler beim Aktualisieren des Kurses: ' + (data.message || 'Unbekannter Fehler'), 'danger');
                }
            })
            .catch(error => {
                console.error('Error updating course:', error);
                showAlert('❌ Netzwerkfehler beim Aktualisieren des Kurses', 'danger');
            });
        }

        function editCourse(courseId) {
            // Lade die Kursdaten zum Bearbeiten
            fetch(`{{ path('appointment_admin_availability_get', {'id': '__ID__'}) }}`.replace('__ID__', courseId))
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        showAlert('❌ Fehler beim Laden der Kursdaten: ' + data.error, 'danger');
                        return;
                    }
                    
                    // Setze eine globale Variable für die Bearbeitung
                    window.editingCourseId = courseId;
                    
                    // Fülle das Formular mit den Kursdaten
                    fillFormWithCourseData(data, false); // false = Bearbeitungsmodus
                    
                    // Ändere den Formular-Titel und Button
                    const cardTitle = document.querySelector('#createCourseSection .card-title');
                    const submitButton = document.querySelector('#createCourseForm button[type="submit"]');
                    
                    cardTitle.innerHTML = '<i class="fas fa-edit me-2"></i>Kurs bearbeiten: ' + data.name;
                    submitButton.innerHTML = '<i class="fas fa-save me-1"></i>Änderungen speichern';
                    
                    // Zeige das Formular an
                    document.getElementById('createCourseSection').style.display = 'block';
                    document.getElementById('createCourseSection').scrollIntoView({ behavior: 'smooth', block: 'start' });
                    
                    showAlert('ℹ️ Kurs wurde zum Bearbeiten geladen.', 'info');
                })
                .catch(error => {
                    console.error('Error loading course:', error);
                    showAlert('❌ Netzwerkfehler beim Laden der Kursdaten', 'danger');
                });
        }

        function deleteCourse(courseId) {
            // Lade zuerst die Kursdaten und Warteliste
            Promise.all([
                fetch(`{{ path('appointment_admin_availability_get', {'id': '__ID__'}) }}`.replace('__ID__', courseId)).then(r => r.json()),
                fetch(`{{ path('appointment_admin_availability_waiting_list', {'id': '__ID__'}) }}`.replace('__ID__', courseId)).then(r => r.json())
            ])
            .then(([courseData, waitingListData]) => {
                if (courseData.error) {
                    showAlert('❌ Fehler beim Laden der Kursdaten: ' + courseData.error, 'danger');
                    return;
                }
                
                // Speichere die Daten für das Modal
                window.courseToDelete = {
                    id: courseId,
                    data: courseData,
                    waitingList: waitingListData.success ? waitingListData : { entries: [], count: 0 }
                };
                
                // Aktualisiere den Modal-Titel
                document.getElementById('deleteCourseTitle').textContent = `"${courseData.name}" wirklich löschen?`;
                
                // Zeige/verstecke Wartelisten-Bereich
                const waitingListSection = document.getElementById('waitingListSection');
                const waitingListPreview = document.getElementById('waitingListPreview');
                
                if (waitingListData.success && waitingListData.count > 0) {
                    waitingListSection.style.display = 'block';
                    
                    // Erstelle Wartelisten-Vorschau
                    let previewHtml = `
                        <div class="bg-light rounded p-3">
                            <div class="d-flex align-items-center mb-2">
                                <i class="fas fa-users text-info me-2"></i>
                                <strong>${waitingListData.count} Person${waitingListData.count > 1 ? 'en' : ''} auf der Warteliste</strong>
                            </div>
                    `;
                    
                    waitingListData.entries.slice(0, 3).forEach((entry, index) => {
                        previewHtml += `
                            <div class="d-flex align-items-center mb-1">
                                <span class="badge bg-secondary me-2">${index + 1}</span>
                                <small>${entry.firstName} ${entry.lastName} (${entry.email})</small>
                            </div>
                        `;
                    });
                    
                    if (waitingListData.count > 3) {
                        previewHtml += `<small class="text-muted">... und ${waitingListData.count - 3} weitere</small>`;
                    }
                    
                    previewHtml += '</div>';
                    waitingListPreview.innerHTML = previewHtml;
                } else {
                    waitingListSection.style.display = 'none';
                }
                
                // Zeige das Lösch-Modal
                const modal = new bootstrap.Modal(document.getElementById('deleteCourseModal'));
                modal.show();
            })
            .catch(error => {
                console.error('Error loading course data for deletion:', error);
                showAlert('❌ Netzwerkfehler beim Laden der Kursdaten', 'danger');
            });
        }

        function toggleCourse(courseId, buttonElement) {
            // Zeige visuelles Feedback
            const button = buttonElement || event.target.closest('button');
            if (button) {
                button.disabled = true;
                const originalContent = button.innerHTML;
                button.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
                button.dataset.originalContent = originalContent;
            }
            
            fetch(`{{ path('appointment_admin_availability_toggle', {'id': '__ID__'}) }}`.replace('__ID__', courseId), {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Tabelle sofort aktualisieren
                    loadCourses();
                    showAlert('✅ Kursstatus erfolgreich geändert!', 'success');
                } else {
                    showAlert('❌ Fehler beim Ändern des Kursstatus', 'danger');
                    // Auch bei Fehlern die Tabelle aktualisieren
                    loadCourses();
                }
            })
            .catch(error => {
                console.error('Error toggling course:', error);
                showAlert('❌ Netzwerkfehler beim Ändern des Kursstatus', 'danger');
                // Auch bei Netzwerkfehlern die Tabelle aktualisieren
                loadCourses();
            })
            .finally(() => {
                // Button wird durch loadCourses() neu gerendert, aber falls es Probleme gibt:
                if (button && button.dataset.originalContent) {
                    button.disabled = false;
                    button.innerHTML = button.dataset.originalContent;
                    delete button.dataset.originalContent;
                }
            });
        }

        function copyCourse(courseId) {
            // Lade die Kursdaten
            fetch(`{{ path('appointment_admin_availability_get', {'id': '__ID__'}) }}`.replace('__ID__', courseId))
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        showAlert('❌ Fehler beim Laden der Kursdaten: ' + data.error, 'danger');
                        return;
                    }
                    
                    // Speichere die Kursdaten für das Modal
                    window.courseDataToCopy = data;
                    
                    // Aktualisiere den Modal-Titel
                    document.getElementById('copyCourseTitle').textContent = `"${data.name}" kopieren?`;
                    
                    // Zeige das Bestätigungs-Modal
                    const modal = new bootstrap.Modal(document.getElementById('copyCourseModal'));
                    modal.show();
                })
                .catch(error => {
                    console.error('Error loading course for copying:', error);
                    showAlert('❌ Netzwerkfehler beim Laden der Kursdaten', 'danger');
                });
        }

        function fillFormWithCourseData(courseData, isCopy = false) {
            const form = document.getElementById('createCourseForm');
            const cardTitle = document.querySelector('#createCourseSection .card-title');
            
            // Flag setzen, dass wir gerade einen Kurs laden (verhindert Auto-Auswahl der Wochentage)
            window.isLoadingCourse = true;
            
            // Reset form first
            form.reset();
            
            // Setze den Titel
            if (isCopy) {
                cardTitle.innerHTML = '<i class="fas fa-copy me-2"></i>Kurs kopieren: ' + courseData.name;
            }
            
            // Fülle Grunddaten
            document.getElementById('courseName').value = isCopy ? 'Kopie von ' + courseData.name : courseData.name;
            document.getElementById('courseType').value = courseData.type;
            
            if (courseData.location && courseData.location.id) {
                document.getElementById('courseLocation').value = courseData.location.id;
            }
            
            document.getElementById('maxParticipants').value = courseData.maxSlots || 1;
            
            // Setze Zeiteinstellungen
            if (courseData.slotDuration) {
                document.querySelector('input[name="slotDuration"]').value = courseData.slotDuration;
            }
            if (courseData.bufferTime) {
                document.querySelector('input[name="bufferTime"]').value = courseData.bufferTime;
            }
            
            // Setze Datum-Felder (Events haben eigene sichtbare Inputs)
            if (courseData.startDate) {
                document.getElementById('startDate').value = courseData.startDate;
                if (courseData.type === 'event') {
                    const eventStartEl = document.getElementById('eventStartDate');
                    if (eventStartEl) {
                        eventStartEl.value = courseData.startDate;
                    }
                }
            }
            if (courseData.endDate) {
                document.getElementById('endDate').value = courseData.endDate;
                if (courseData.type === 'event') {
                    const eventEndEl = document.getElementById('eventEndDate');
                    if (eventEndEl) {
                        eventEndEl.value = courseData.endDate;
                    }
                }
            }
            
            // Setze Event-Zeiten
            if (courseData.startTime && courseData.type === 'event') {
                document.getElementById('generalStartTime').value = courseData.startTime.substring(0, 5);
                document.getElementById('generalEndTime').value = courseData.endTime.substring(0, 5);
            }
            
            // Setze Wochentage - speichere sie temporär
            const savedDaysOfWeek = courseData.daysOfWeek && courseData.daysOfWeek.length > 0 ? courseData.daysOfWeek : null;
            
            // Setze Zusatzfelder
            if (courseData.extraFields && courseData.extraFields.length > 0) {
                extraFields = [...courseData.extraFields]; // Kopiere das Array
                renderExtraFields();
                document.getElementById('extraFieldsSection').style.display = 'block';
            }
            
            // Setze Verfügbarkeitsstatus (bei Kopie standardmäßig aktiv)
            document.getElementById('isAvailable').checked = isCopy ? true : courseData.isAvailable;
            
            // Setze Zielgruppe
            if (courseData.targetGroup) {
                const radioButton = document.querySelector(`input[name="targetGroup"][value="${courseData.targetGroup}"]`);
                if (radioButton) {
                    radioButton.checked = true;
                }
            }
            
            // Setze neue Kursdaten-Felder
            if (courseData.learningGoals) {
                document.getElementById('learningGoals').value = courseData.learningGoals;
            }
            if (courseData.courseContent) {
                document.getElementById('courseContent').value = courseData.courseContent;
            }
            if (courseData.duration) {
                document.getElementById('duration').value = courseData.duration;
            }
            
            // Setze Payment-Daten
            if (courseData.isPaymentRequired) {
                document.getElementById('isPaymentRequired').checked = true;
                document.getElementById('paymentFields').style.display = 'block';
                
                if (courseData.price) {
                    document.getElementById('price').value = courseData.price;
                }
                if (courseData.paymentInstructions) {
                    document.getElementById('paymentInstructions').value = courseData.paymentInstructions;
                }
                if (courseData.paymentReminderDays) {
                    document.getElementById('paymentReminderDays').value = courseData.paymentReminderDays;
                }
            }
            
            // Setze Wochentage ZUERST (vor handleCourseTypeChange)
            if (savedDaysOfWeek) {
                const daysSelect = document.getElementById('daysOfWeek');
                Array.from(daysSelect.options).forEach(option => {
                    option.selected = savedDaysOfWeek.includes(parseInt(option.value));
                });
            }
            
            // Triggere die Kurstyp-Änderung um die richtigen Felder anzuzeigen
            handleCourseTypeChange();
            
            // Trigger updateDayTimes um die Felder für die korrekten Tage zu generieren (nach handleCourseTypeChange)
            if (savedDaysOfWeek) {
                updateDayTimes();
            }
            
            // Flag zurücksetzen
            window.isLoadingCourse = false;
            
            // Bei Kursen mit individuellen Tageszeiten
            if (courseData.dayTimes && Object.keys(courseData.dayTimes).length > 0) {
                setTimeout(() => {
                    Object.entries(courseData.dayTimes).forEach(([day, times]) => {
                        const startInput = document.querySelector(`input[data-day="${day}"].day-start-time`);
                        const endInput = document.querySelector(`input[data-day="${day}"].day-end-time`);
                        
                        if (startInput && times.startTime) {
                            startInput.value = times.startTime.substring(0, 5);
                        }
                        if (endInput && times.endTime) {
                            endInput.value = times.endTime.substring(0, 5);
                        }
                    });
                }, 500); // Warte bis die Tageszeiten-Felder erstellt wurden
            }
            
            // Generiere Termine-Vorschau und setze excludedDates (nur bei limited_course und holiday_course)
            if ((courseData.type === 'limited_course' || courseData.type === 'holiday_course')) {
                // Speichere die excludedDates temporär für spätere Verwendung
                window.pendingExcludedDates = courseData.excludedDates || [];
                
                setTimeout(async () => {
                    // Generiere die Termine erst
                    await generateCourseDatesPreview();
                    
                    // Dann markiere die ausgeschlossenen Termine aus den gespeicherten Daten
                    if (window.pendingExcludedDates && window.pendingExcludedDates.length > 0) {
                        let updated = false;
                        courseDates.forEach(date => {
                            if (window.pendingExcludedDates.includes(date.dateString)) {
                                date.excluded = true;
                                updated = true;
                            }
                        });
                        // Re-render um die Änderungen anzuzeigen (nur wenn Änderungen vorgenommen wurden)
                        if (updated) {
                            renderCourseDates();
                        }
                        // Cleanup
                        window.pendingExcludedDates = null;
                    }
                }, 600); // Warte bis die Felder erstellt wurden
            }
        }

        function showCourseDetails(courseId) {
            fetch(`{{ path('appointment_admin_availability_get', {'id': '__ID__'}) }}`.replace('__ID__', courseId))
                .then(response => response.json())
                .then(data => {
                    if (data.error) {
                        showAlert('❌ Fehler beim Laden der Kursdaten: ' + data.error, 'danger');
                        return;
                    }
                    
                    // Speichere die Kursdaten für die Buttons
                    window.currentCourseDetails = data;
                    
                    // Fülle das Modal mit den Kursdaten
                    fillCourseDetailsModal(data);
                    
                    // Zeige das Modal
                    const modal = new bootstrap.Modal(document.getElementById('courseDetailsModal'));
                    modal.show();
                })
                .catch(error => {
                    console.error('Error loading course details:', error);
                    showAlert('❌ Netzwerkfehler beim Laden der Kursdaten', 'danger');
                });
        }

        function fillCourseDetailsModal(courseData) {
            const modalContent = document.getElementById('courseDetailsContent');
            const modalTitle = document.getElementById('courseDetailsModalLabel');
            
            // Titel aktualisieren
            modalTitle.innerHTML = `<i class="fas fa-graduation-cap me-2"></i>${courseData.name}`;
            
            // Kurstyp-Informationen
            let typeInfo = '';
            let typeBadge = 'bg-secondary';
            switch(courseData.type) {
                case 'event':
                    typeInfo = 'Einmaliges Event';
                    typeBadge = 'bg-success';
                    break;
                case 'recurring_course':
                    typeInfo = 'Dauerhafter Kurs';
                    typeBadge = 'bg-primary';
                    break;
                case 'limited_course':
                    typeInfo = 'Zeitlich begrenzter Kurs';
                    typeBadge = 'bg-info';
                    break;
                case 'holiday_course':
                    typeInfo = 'Ferienkurs';
                    typeBadge = 'bg-warning';
                    break;
                default:
                    typeInfo = courseData.type || 'Unbekannt';
            }
            
            // Wochentage formatieren
            const dayNames = {
                1: 'Montag', 2: 'Dienstag', 3: 'Mittwoch', 4: 'Donnerstag', 
                5: 'Freitag', 6: 'Samstag', 7: 'Sonntag'
            };
            
            let daysDisplay = '';
            if (courseData.daysOfWeek && courseData.daysOfWeek.length > 0) {
                daysDisplay = courseData.daysOfWeek.map(day => 
                    `<span class="badge bg-light text-dark me-1">${dayNames[day]}</span>`
                ).join('');
            } else {
                daysDisplay = '<span class="text-muted">Keine Wochentage definiert</span>';
            }
            
            // Zeiten formatieren
            let timeDisplay = '';
            if (courseData.type === 'event') {
                timeDisplay = `
                    <div class="mb-2">
                        <strong>Startzeit:</strong> ${courseData.startTime ? courseData.startTime.substring(0, 5) : 'Nicht definiert'}
                    </div>
                    <div class="mb-2">
                        <strong>Endzeit:</strong> ${courseData.endTime ? courseData.endTime.substring(0, 5) : 'Nicht definiert'}
                    </div>
                `;
            } else if (courseData.dayTimes && Object.keys(courseData.dayTimes).length > 0) {
                timeDisplay = '<div class="mb-2"><strong>Individuelle Zeiten pro Tag:</strong></div>';
                Object.entries(courseData.dayTimes).forEach(([day, times]) => {
                    timeDisplay += `
                        <div class="mb-1">
                            <span class="badge bg-primary me-2">${dayNames[day]}</span>
                            ${times.startTime.substring(0, 5)} - ${times.endTime.substring(0, 5)} Uhr
                        </div>
                    `;
                });
            } else {
                timeDisplay = `
                    <div class="mb-2">
                        <strong>Startzeit:</strong> ${courseData.startTime ? courseData.startTime.substring(0, 5) : 'Nicht definiert'}
                    </div>
                    <div class="mb-2">
                        <strong>Endzeit:</strong> ${courseData.endTime ? courseData.endTime.substring(0, 5) : 'Nicht definiert'}
                    </div>
                `;
            }
            
            // Zusatzfelder formatieren
            let extraFieldsDisplay = '';
            if (courseData.extraFields && courseData.extraFields.length > 0) {
                extraFieldsDisplay = '<div class="mb-3"><h6><i class="fas fa-plus-square me-2"></i>Zusatzfelder</h6>';
                courseData.extraFields.forEach(field => {
                    const requiredBadge = field.required ? '<span class="badge bg-danger ms-2">Pflichtfeld</span>' : '<span class="badge bg-secondary ms-2">Optional</span>';
                    extraFieldsDisplay += `
                        <div class="mb-2 p-2 bg-light rounded">
                            <strong>${field.label}</strong> (${field.type})${requiredBadge}
                        </div>
                    `;
                });
                extraFieldsDisplay += '</div>';
            }
            
            // Modal-Inhalt erstellen
            modalContent.innerHTML = `
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-header bg-primary text-white">
                                <h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Grundinformationen</h6>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    <strong>Kurstyp:</strong><br>
                                    <span class="badge ${typeBadge}">${typeInfo}</span>
                                </div>
                                <div class="mb-3">
                                    <strong>Standort:</strong><br>
                                    ${courseData.location ? 
                                        `<span class="badge bg-light text-dark"><i class="fas fa-map-marker-alt me-1"></i>${courseData.location.name}</span>` : 
                                        '<span class="badge bg-danger">Kein Standort</span>'
                                    }
                                </div>
                                <div class="mb-3">
                                    <strong>Maximale Teilnehmer:</strong><br>
                                    <span class="badge bg-info">${courseData.maxSlots || 1} Plätze</span>
                                </div>
                                <div class="mb-3">
                                    <strong>Status:</strong><br>
                                    <span class="badge bg-${courseData.isAvailable ? 'success' : 'danger'}">
                                        ${courseData.isAvailable ? 'Verfügbar' : 'Nicht verfügbar'}
                                    </span>
                                </div>
                                ${courseData.targetGroup ? `
                                    <div class="mb-3">
                                        <strong>Zielgruppe:</strong><br>
                                        ${getTargetGroupBadge(courseData.targetGroup)}
                                    </div>
                                ` : ''}
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="card h-100">
                            <div class="card-header bg-success text-white">
                                <h6 class="mb-0"><i class="fas fa-clock me-2"></i>Zeitinformationen</h6>
                            </div>
                            <div class="card-body">
                                ${courseData.startDate ? `
                                    <div class="mb-3">
                                        <strong>Startdatum:</strong><br>
                                        <span class="badge bg-light text-dark">${new Date(courseData.startDate).toLocaleDateString('de-DE')}</span>
                                    </div>
                                ` : ''}
                                ${courseData.endDate ? `
                                    <div class="mb-3">
                                        <strong>Enddatum:</strong><br>
                                        <span class="badge bg-light text-dark">${new Date(courseData.endDate).toLocaleDateString('de-DE')}</span>
                                    </div>
                                ` : ''}
                                <div class="mb-3">
                                    <strong>Wochentage:</strong><br>
                                    ${daysDisplay}
                                </div>
                                ${timeDisplay}
                            </div>
                        </div>
                    </div>
                    
                    ${courseData.slotDuration || courseData.bufferTime ? `
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header bg-info text-white">
                                    <h6 class="mb-0"><i class="fas fa-cog me-2"></i>Erweiterte Einstellungen</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        ${courseData.slotDuration ? `
                                            <div class="col-md-6">
                                                <strong>Slot-Dauer:</strong><br>
                                                <span class="badge bg-light text-dark">${courseData.slotDuration} Minuten</span>
                                            </div>
                                        ` : ''}
                                        ${courseData.bufferTime ? `
                                            <div class="col-md-6">
                                                <strong>Pufferzeit:</strong><br>
                                                <span class="badge bg-light text-dark">${courseData.bufferTime} Minuten</span>
                                            </div>
                                        ` : ''}
                                    </div>
                                </div>
                            </div>
                        </div>
                    ` : ''}
                    
                    ${extraFieldsDisplay ? `
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header bg-warning text-dark">
                                    <h6 class="mb-0"><i class="fas fa-plus-square me-2"></i>Zusatzfelder</h6>
                                </div>
                                <div class="card-body">
                                    ${extraFieldsDisplay}
                                </div>
                            </div>
                        </div>
                    ` : ''}
                </div>
            `;
        }

        // Globale Variable für alle Kurse (für die Suche)
        let allCourses = [];
        
        function initializeSearch() {
            const searchInput = document.getElementById('courseSearch');
            const clearButton = document.getElementById('clearSearch');
            
            if (searchInput) {
                // Echtzeit-Suche bei Eingabe
                searchInput.addEventListener('input', function() {
                    const searchTerm = this.value.trim();
                    
                    if (searchTerm.length > 0) {
                        clearButton.style.display = 'inline-flex';
                        filterCourses(searchTerm);
                    } else {
                        clearButton.style.display = 'none';
                        // Zeige alle Kurse - aufgeteilt nach aktiv/beendet
                        const activeCourses = allCourses.filter(course => !isCourseEnded(course));
                        const endedCourses = allCourses.filter(course => isCourseEnded(course));
                        displayCourses(activeCourses, false);
                        displayCourses(endedCourses, true);
                        document.getElementById('activeCoursesCount').textContent = activeCourses.length;
                        document.getElementById('endedCoursesCount').textContent = endedCourses.length;
                        updateSearchCounter(allCourses.length, allCourses.length);
                    }
                });
                
                // Enter-Taste für Suche
                searchInput.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        e.preventDefault();
                        const searchTerm = this.value.trim();
                        if (searchTerm.length > 0) {
                            filterCourses(searchTerm);
                        }
                    }
                });
            }
            
            if (clearButton) {
                clearButton.addEventListener('click', function() {
                    searchInput.value = '';
                    this.style.display = 'none';
                    // Zeige alle Kurse - aufgeteilt nach aktiv/beendet
                    const activeCourses = allCourses.filter(course => !isCourseEnded(course));
                    const endedCourses = allCourses.filter(course => isCourseEnded(course));
                    displayCourses(activeCourses, false);
                    displayCourses(endedCourses, true);
                    document.getElementById('activeCoursesCount').textContent = activeCourses.length;
                    document.getElementById('endedCoursesCount').textContent = endedCourses.length;
                    updateSearchCounter(allCourses.length, allCourses.length);
                    searchInput.focus();
                });
            }
        }
        
        function filterCourses(searchTerm) {
            // If no search term provided, get it from input
            if (searchTerm === undefined) {
                searchTerm = document.getElementById('courseSearch')?.value || '';
            }
            
            const targetGroupFilter = document.getElementById('targetGroupFilter')?.value || '';
            
            const filteredCourses = allCourses.filter(course => {
                // Text search
                let textMatch = true;
                if (searchTerm) {
                    const searchLower = searchTerm.toLowerCase();
                    
                    // Suche in verschiedenen Feldern
                    const nameMatch = course.name && course.name.toLowerCase().includes(searchLower);
                    const locationMatch = course.location && course.location.name && course.location.name.toLowerCase().includes(searchLower);
                    
                    // Kurstyp-Matching
                    let typeMatch = false;
                    if (course.type) {
                        const typeText = getTypeLabel(course.type).toLowerCase();
                        typeMatch = typeText.includes(searchLower);
                    }
                    
                    // Status-Matching
                    const statusText = course.isAvailable ? 'verfügbar aktiv' : 'nicht verfügbar inaktiv deaktiviert';
                    const statusMatch = statusText.includes(searchLower);
                    
                    // Wochentage-Matching
                    let daysMatch = false;
                    if (course.daysOfWeek && course.daysOfWeek.length > 0) {
                        const dayNames = ['', 'montag', 'dienstag', 'mittwoch', 'donnerstag', 'freitag', 'samstag', 'sonntag'];
                        const courseDays = course.daysOfWeek.map(day => dayNames[day] || '').join(' ');
                        daysMatch = courseDays.includes(searchLower);
                    }
                    
                    // Zielgruppen-Matching
                    const targetGroupMatch = course.targetGroup && course.targetGroup.toLowerCase().includes(searchLower);
                    
                    textMatch = nameMatch || locationMatch || typeMatch || statusMatch || daysMatch || targetGroupMatch;
                }
                
                // Target group filter
                let targetGroupMatch = true;
                if (targetGroupFilter) {
                    if (targetGroupFilter === '_none') {
                        targetGroupMatch = !course.targetGroup;
                    } else if (targetGroupFilter === '_custom') {
                        const standardGroups = ['Kinder 4-5 Jahre', 'Kinder 6-8 Jahre', 'Erwachsene', 'Eltern-Kind-Kurs'];
                        targetGroupMatch = course.targetGroup && !standardGroups.includes(course.targetGroup);
                    } else {
                        targetGroupMatch = course.targetGroup === targetGroupFilter;
                    }
                }
                
                return textMatch && targetGroupMatch;
            });
            
            // Trenne gefilterte Kurse in aktiv und beendet
            const activeFiltered = filteredCourses.filter(course => !isCourseEnded(course));
            const endedFiltered = filteredCourses.filter(course => isCourseEnded(course));
            
            // Zeige beide Listen an
            displayCourses(activeFiltered, false);
            displayCourses(endedFiltered, true);
            
            // Aktualisiere die Badge-Zähler
            document.getElementById('activeCoursesCount').textContent = activeFiltered.length;
            document.getElementById('endedCoursesCount').textContent = endedFiltered.length;
            
            updateSearchCounter(filteredCourses.length, allCourses.length);
        }
        
        function getTypeLabel(type) {
            switch(type) {
                case 'event': return 'Einmaliges Event';
                case 'recurring_course': return 'Dauerhafter Kurs';
                case 'limited_course': return 'Zeitlich begrenzter Kurs';
                case 'holiday_course': return 'Ferienkurs';
                default: return type || 'Unbekannt';
            }
        }
        
        function updateSearchCounter(found, total) {
            const searchCount = document.getElementById('searchCount');
            const totalCount = document.getElementById('totalCount');
            
            if (searchCount && totalCount) {
                searchCount.textContent = found;
                totalCount.textContent = total;
                
                // Ändere die Badge-Farbe je nach Suchergebnis
                const badge = document.getElementById('searchResults');
                if (badge) {
                    badge.className = 'badge border';
                    if (found === 0 && total > 0) {
                        badge.className += ' bg-danger bg-opacity-10 text-danger border-danger border-opacity-25';
                    } else if (found < total) {
                        badge.className += ' bg-warning bg-opacity-10 text-warning border-warning border-opacity-25';
                    } else {
                        badge.className += ' bg-primary bg-opacity-10 text-primary border-primary border-opacity-25';
                    }
                }
            }
            
            // Show/hide clear button
            const clearBtn = document.getElementById('clearSearch');
            const searchInput = document.getElementById('courseSearch');
            const targetGroupFilter = document.getElementById('targetGroupFilter');
            
            if (clearBtn && searchInput && targetGroupFilter) {
                const hasFilters = searchInput.value.trim() !== '' || targetGroupFilter.value !== '';
                clearBtn.style.display = hasFilters ? 'inline-block' : 'none';
            }
        }
        
        // Quick filter for target groups
        function quickFilterTargetGroup(button, filterValue) {
            // Update active state on buttons
            document.querySelectorAll('#targetGroupQuickFilters .btn').forEach(btn => {
                btn.classList.remove('active');
            });
            button.classList.add('active');
            
            // Update dropdown
            const dropdown = document.getElementById('targetGroupFilter');
            if (dropdown) {
                dropdown.value = filterValue;
            }
            
            // Apply filter
            filterCourses();
        }
        
        // Clear all filters
        function clearAllFilters() {
            const searchInput = document.getElementById('courseSearch');
            const targetGroupFilter = document.getElementById('targetGroupFilter');
            
            if (searchInput) {
                searchInput.value = '';
            }
            
            if (targetGroupFilter) {
                targetGroupFilter.value = '';
            }
            
            // Reset quick filter buttons
            document.querySelectorAll('#targetGroupQuickFilters .btn').forEach(btn => {
                btn.classList.remove('active');
                if (btn.dataset.filter === '') {
                    btn.classList.add('active');
                }
            });
            
            // Re-display all courses
            displayCourses(allCourses);
            updateSearchCounter(allCourses.length, allCourses.length);
            
            // Hide clear button
            const clearBtn = document.getElementById('clearSearch');
            if (clearBtn) {
                clearBtn.style.display = 'none';
            }
        }

        function showArchivedWaitingList() {
            fetch(`{{ path('appointment_admin_waiting_list_archived') }}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const modalContent = document.getElementById('waitingListContent');
                    const modalTitle = document.getElementById('waitingListModalLabel');
                    
                    if (data.count === 0) {
                        modalTitle.innerHTML = '<i class="fas fa-archive me-2"></i>Archivierte Wartelisten (leer)';
                        modalContent.innerHTML = `
                            <div class="text-center py-5">
                                <i class="fas fa-archive fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">Keine archivierten Einträge</h5>
                                <p class="text-muted">Es wurden noch keine Wartelisten-Einträge archiviert.</p>
                            </div>
                        `;
                    } else {
                        modalTitle.innerHTML = `<i class="fas fa-archive me-2"></i>Archivierte Wartelisten (${data.count} Eintrag${data.count > 1 ? 'e' : ''})`;
                        
                        let content = `
                            <div class="mb-3">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>${data.count}</strong> archivierte${data.count > 1 ? '' : 'r'} Wartelisten-Eintrag${data.count > 1 ? 'e' : ''}
                                </div>
                            </div>
                        `;
                        
                        data.entries.forEach((entry, index) => {
                            const notificationBadge = entry.isNotified 
                                ? '<span class="badge bg-success"><i class="fas fa-check me-1"></i>Benachrichtigt</span>'
                                : '<span class="badge bg-warning"><i class="fas fa-clock me-1"></i>Ausstehend</span>';
                            
                            content += `
                                <div class="card mb-3 border-0 shadow-sm">
                                    <div class="card-body">
                                        <div class="row align-items-center">
                                            <div class="col-md-1">
                                                <div class="bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                                    <i class="fas fa-archive"></i>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <h6 class="mb-1 fw-bold">${entry.firstName} ${entry.lastName}</h6>
                                                <small class="text-muted">
                                                    <i class="fas fa-calendar me-1"></i>
                                                    Angemeldet: ${new Date(entry.createdAt).toLocaleDateString('de-DE', {
                                                        year: 'numeric',
                                                        month: 'long',
                                                        day: 'numeric'
                                                    })}
                                                </small>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-1">
                                                    <i class="fas fa-envelope me-1 text-primary"></i>
                                                    <a href="mailto:${entry.email}" class="text-decoration-none">${entry.email}</a>
                                                </div>
                                                ${entry.phone ? `
                                                    <div>
                                                        <i class="fas fa-phone me-1 text-success"></i>
                                                        <a href="tel:${entry.phone}" class="text-decoration-none">${entry.phone}</a>
                                                    </div>
                                                ` : ''}
                                            </div>
                                            <div class="col-md-3 text-end">
                                                <span class="badge bg-secondary mb-2">
                                                    <i class="fas fa-archive me-1"></i>Archiviert
                                                </span><br>
                                                ${notificationBadge}
                                                ${entry.notes ? `
                                                    <div class="mt-2">
                                                        <button class="btn btn-sm btn-outline-info" type="button" data-bs-toggle="collapse" data-bs-target="#archived-notes-${entry.id}" aria-expanded="false">
                                                            <i class="fas fa-sticky-note me-1"></i>Notizen
                                                        </button>
                                                    </div>
                                                ` : ''}
                                            </div>
                                        </div>
                                        ${entry.notes ? `
                                            <div class="collapse mt-3" id="archived-notes-${entry.id}">
                                                <div class="alert alert-light mb-0">
                                                    <i class="fas fa-sticky-note me-2"></i>
                                                    <strong>Notizen:</strong><br>
                                                    ${entry.notes.replace(/\n/g, '<br>')}
                                                </div>
                                            </div>
                                        ` : ''}
                                    </div>
                                </div>
                            `;
                        });
                        
                        modalContent.innerHTML = content;
                    }
                    
                    // Modal anzeigen
                    const modal = new bootstrap.Modal(document.getElementById('waitingListModal'));
                    modal.show();
                } else {
                    showAlert('❌ Fehler beim Laden der archivierten Wartelisten: ' + (data.error || 'Unbekannter Fehler'), 'danger');
                }
            })
            .catch(error => {
                console.error('Error loading archived waiting lists:', error);
                showAlert('❌ Netzwerkfehler beim Laden der archivierten Wartelisten', 'danger');
            });
        }

        function showWaitingList(courseId) {
            currentCourseId = courseId; // Speichere für CSV-Export
            
            fetch(`{{ path('appointment_admin_availability_waiting_list', {'id': '__ID__'}) }}`.replace('__ID__', courseId))
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const modalContent = document.getElementById('waitingListContent');
                    const modalTitle = document.getElementById('waitingListModalLabel');
                    const exportBtn = document.getElementById('exportCsvBtn');
                    
                    if (data.count === 0) {
                        modalTitle.innerHTML = '<i class="fas fa-list-ul me-2"></i>Warteliste (leer)';
                        modalContent.innerHTML = `
                            <div class="text-center py-5">
                                <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">Keine Einträge vorhanden</h5>
                                <p class="text-muted">Die Warteliste für diesen Kurs ist derzeit leer.</p>
                            </div>
                        `;
                        exportBtn.style.display = 'none';
                    } else {
                        modalTitle.innerHTML = `<i class="fas fa-list-ul me-2"></i>Warteliste (${data.count} Person${data.count > 1 ? 'en' : ''})`;
                        
                        let content = `
                            <div class="mb-3">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>${data.count}</strong> Person${data.count > 1 ? 'en' : ''} auf der Warteliste
                                </div>
                            </div>
                        `;
                        
                        data.entries.forEach((entry, index) => {
                            const notificationBadge = entry.isNotified 
                                ? '<span class="badge bg-success"><i class="fas fa-check me-1"></i>Benachrichtigt</span>'
                                : '<span class="badge bg-warning"><i class="fas fa-clock me-1"></i>Ausstehend</span>';
                            
                            content += `
                                <div class="card mb-3 border-0 shadow-sm">
                                    <div class="card-body">
                                        <div class="row align-items-center">
                                            <div class="col-md-1">
                                                <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                                    <strong>${index + 1}</strong>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <h6 class="mb-1 fw-bold">${entry.firstName} ${entry.lastName}</h6>
                                                <small class="text-muted">
                                                    <i class="fas fa-calendar me-1"></i>
                                                    ${new Date(entry.createdAt).toLocaleDateString('de-DE', {
                                                        year: 'numeric',
                                                        month: 'long',
                                                        day: 'numeric'
                                                    })}
                                                </small>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-1">
                                                    <i class="fas fa-envelope me-1 text-primary"></i>
                                                    <a href="mailto:${entry.email}" class="text-decoration-none">${entry.email}</a>
                                                </div>
                                                ${entry.phone ? `
                                                    <div>
                                                        <i class="fas fa-phone me-1 text-success"></i>
                                                        <a href="tel:${entry.phone}" class="text-decoration-none">${entry.phone}</a>
                                                    </div>
                                                ` : ''}
                                            </div>
                                            <div class="col-md-3 text-end">
                                                ${notificationBadge}
                                                ${entry.notes ? `
                                                    <div class="mt-2">
                                                        <button class="btn btn-sm btn-outline-info" type="button" data-bs-toggle="collapse" data-bs-target="#notes-${entry.id}" aria-expanded="false">
                                                            <i class="fas fa-sticky-note me-1"></i>Notizen
                                                        </button>
                                                    </div>
                                                ` : ''}
                                            </div>
                                        </div>
                                        ${entry.notes ? `
                                            <div class="collapse mt-3" id="notes-${entry.id}">
                                                <div class="alert alert-light mb-0">
                                                    <i class="fas fa-sticky-note me-2"></i>
                                                    <strong>Notizen:</strong><br>
                                                    ${entry.notes}
                                                </div>
                                            </div>
                                        ` : ''}
                                    </div>
                                </div>
                            `;
                        });
                        
                        modalContent.innerHTML = content;
                        exportBtn.style.display = 'inline-block';
                    }
                    
                    // Modal anzeigen
                    const modal = new bootstrap.Modal(document.getElementById('waitingListModal'));
                    modal.show();
                } else {
                    showAlert('❌ Fehler beim Laden der Warteliste: ' + (data.error || 'Unbekannter Fehler'), 'danger');
                }
            })
            .catch(error => {
                console.error('Error loading waiting list:', error);
                showAlert('❌ Netzwerkfehler beim Laden der Warteliste', 'danger');
            });
        }
        
        function displayCourses(courses, isEndedTab = false) {
            const tbody = document.getElementById(isEndedTab ? 'endedCoursesTableBody' : 'coursesTableBody');
            if (!courses || courses.length === 0) {
                const message = isEndedTab ? 'Keine beendeten Kurse vorhanden' : 'Keine aktiven Kurse vorhanden';
                tbody.innerHTML = `
                    <tr>
                        <td colspan="8" class="text-center text-muted py-5">
                            <i class="fas fa-inbox fa-2x mb-3 d-block text-muted"></i>
                            <h6 class="text-muted">${message}</h6>
                            <small class="text-muted">${isEndedTab ? 'Kurse mit abgelaufenem Enddatum werden hier angezeigt' : 'Erstellen Sie Ihren ersten Kurs über die Buttons oben'}</small>
                        </td>
                    </tr>
                `;
                return;
            }

            tbody.innerHTML = courses.map(course => {
                const dayNames = {
                    1: 'Mo', 2: 'Di', 3: 'Mi', 4: 'Do', 5: 'Fr', 6: 'Sa', 7: 'So'
                };
                
                const days = course.daysOfWeek ? course.daysOfWeek.map(day => '<span class="badge bg-light text-dark me-1">' + dayNames[day] + '</span>').join('') : '-';
                const timeDisplay = course.type === 'limited_course' || course.type === 'holiday_course' 
                    ? '<span class="badge text-dark">Individuelle Zeiten</span>'
                    : `${course.startTime} - ${course.endTime}`;
                
                // Enddatum-Display für beendete Kurse
                const endDateDisplay = course.endDate 
                    ? new Date(course.endDate).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
                    : '-';
                
                let typeLabel = '';
                let typeBadge = '';
                switch(course.type) {
                    case 'recurring_course':
                        typeLabel = 'Dauerhafter Kurs';
                        typeBadge = 'bg-primary';
                        break;
                    case 'limited_course':
                        typeLabel = 'Zeitlich begrenzter Kurs';
                        typeBadge = 'bg-info';
                        break;
                    case 'holiday_course':
                        typeLabel = 'Ferienkurs';
                        typeBadge = 'bg-warning';
                        break;
                    default:
                        typeLabel = course.type || 'Unbekannt';
                        typeBadge = 'bg-secondary';
                }
                
                return `
                    <tr class="align-middle">
                        <td>
                            <div class="form-check mb-0">
                                <input class="form-check-input course-checkbox" type="checkbox" value="${course.id}" onchange="updateBulkDeleteButton()">
                                <label class="form-check-label"></label>
                            </div>
                        </td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                    <i class="fas fa-graduation-cap text-primary"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0 fw-semibold">
                                        <a href="#" class="text-decoration-none text-dark course-name-link" onclick="showCourseDetails(${course.id}); return false;" title="Kursdetails anzeigen">
                                            ${course.name || '-'}
                                        </a>
                                    </h6>
                                    <div class="d-flex align-items-center gap-2 mt-1">
                                        <small class="text-muted">${course.maxSlots || 1} Plätze verfügbar</small>
                                        ${getTargetGroupBadge(course.targetGroup)}
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td><span class="badge ${typeBadge}">${typeLabel}</span></td>
                        <td>
                            ${course.location ? '<span class="badge bg-light text-dark"><i class="fas fa-map-marker-alt me-1"></i>' + course.location.name + '</span>' : '<span class="badge bg-danger">Kein Standort</span>'}
                        </td>
                        <td>${isEndedTab ? '<span class="badge bg-secondary"><i class="fas fa-calendar-times me-1"></i>' + endDateDisplay + '</span>' : timeDisplay}</td>
                        <td>${days}</td>
                        <td>
                            <span class="badge bg-${course.isAvailable ? 'success' : 'danger'}">
                                ${course.isAvailable ? 'Verfuegbar' : 'Nicht verfuegbar'}
                            </span>
                        </td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-primary" onclick="editCourse(${course.id})" title="Bearbeiten">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-outline-success" onclick="copyCourse(${course.id})" title="Kurs kopieren">
                                    <i class="fas fa-copy"></i>
                                </button>
                                <button class="btn btn-outline-info" onclick="showWaitingList(${course.id})" title="Warteliste anzeigen">
                                    <i class="fas fa-list-ul"></i>
                                </button>
                                <button class="btn btn-outline-${course.isAvailable ? 'warning' : 'success'}" 
                                        onclick="toggleCourse(${course.id}, this)" 
                                        title="${course.isAvailable ? 'Deaktivieren' : 'Aktivieren'}">
                                    <i class="fas fa-toggle-${course.isAvailable ? 'off' : 'on'}"></i>
                                </button>
                                <button class="btn btn-outline-danger" onclick="deleteCourse(${course.id})" title="Loeschen">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            }).join('');
            
            // Update target group counts - always use allCourses for accurate totals
            updateTargetGroupCounts(allCourses);
        }
        
        // Helper function to generate target group badge HTML
        function getTargetGroupBadge(targetGroup) {
            if (!targetGroup) {
                return '';
            }
            
            let badgeClass = 'custom';
            let icon = 'fas fa-tag';
            
            switch(targetGroup) {
                case 'Kinder 4-5 Jahre':
                    badgeClass = 'kids-45';
                    icon = 'fas fa-baby';
                    break;
                case 'Kinder 6-8 Jahre':
                    badgeClass = 'kids-68';
                    icon = 'fas fa-child';
                    break;
                case 'Erwachsene':
                    badgeClass = 'adults';
                    icon = 'fas fa-user';
                    break;
                case 'Eltern-Kind-Kurs':
                    badgeClass = 'family';
                    icon = 'fas fa-users';
                    break;
                default:
                    badgeClass = 'custom';
                    icon = 'fas fa-pencil-alt';
            }
            
            return `<span class="target-group-badge ${badgeClass}"><i class="${icon}"></i>${targetGroup}</span>`;
        }
        
        // Update target group counts in quick filter buttons
        function updateTargetGroupCounts(courses) {
            const counts = {
                all: courses.length,
                none: 0
            };
            
            // Initialisiere Zähler für alle verfügbaren Zielgruppen
            availableTargetGroups.forEach(group => {
                counts[group.id] = 0;
            });
            
            courses.forEach(course => {
                if (!course.targetGroup) {
                    counts.none++;
                } else {
                    // Finde die entsprechende Zielgruppe
                    const targetGroup = availableTargetGroups.find(tg => tg.name === course.targetGroup);
                    if (targetGroup) {
                        counts[targetGroup.id]++;
                    }
                }
            });
            
            // Aktualisiere "Alle" und "Ohne Zielgruppe" Zähler
            const allCountElement = document.querySelector('.target-group-count-all');
            const noneCountElement = document.querySelector('.target-group-count-none');
            
            if (allCountElement) allCountElement.textContent = counts.all;
            if (noneCountElement) noneCountElement.textContent = counts.none;
            
            // Aktualisiere Zähler für alle dynamischen Zielgruppen
            availableTargetGroups.forEach(group => {
                const countElement = document.querySelector(`.target-group-count-${group.id}`);
                if (countElement) {
                    countElement.textContent = counts[group.id] || 0;
                }
            });
        }
        
        function showAlert(message, type = 'info') {
            // Create modern alert element
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-custom alert-dismissible fade show position-fixed`;
            alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px; max-width: 500px;';
            
            const icon = type === 'success' ? 'fas fa-check-circle' : 
                        type === 'danger' ? 'fas fa-exclamation-circle' : 
                        type === 'warning' ? 'fas fa-exclamation-triangle' : 'fas fa-info-circle';
            
            alertDiv.innerHTML = `
                <div class="d-flex align-items-center">
                    <i class="${icon} me-2"></i>
                    <div class="flex-grow-1">${message}</div>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `;
            
            // Insert into body for fixed positioning
            document.body.appendChild(alertDiv);
            
            // Auto-remove after 5 seconds
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 5000);
        }
        
        // Handle course type change to show/hide relevant fields
        function handleCourseTypeChange() {
            const courseTypeSelect = document.getElementById('courseType');
            const courseFields = document.getElementById('courseFields');
            const startDateField = document.getElementById('startDateField');
            const endDateField = document.getElementById('endDateField');
            const eventDateFields = document.getElementById('eventDateFields');
            const generalStartTimeField = document.getElementById('generalStartTimeField');
            const generalEndTimeField = document.getElementById('generalEndTimeField');
            const dayTimesContainer = document.getElementById('dayTimesContainer');
            const daysOfWeek = document.getElementById('daysOfWeek');
            const excludeHolidaysOption = document.getElementById('excludeHolidaysOption');
            
            if (!courseTypeSelect || !courseFields || !startDateField || !endDateField || !eventDateFields || !generalStartTimeField || !generalEndTimeField || !dayTimesContainer || !daysOfWeek) {
                console.log('Elemente nicht gefunden:', {
                    courseTypeSelect: !!courseTypeSelect,
                    courseFields: !!courseFields,
                    startDateField: !!startDateField,
                    endDateField: !!endDateField,
                    eventDateFields: !!eventDateFields,
                    generalStartTimeField: !!generalStartTimeField,
                    generalEndTimeField: !!generalEndTimeField,
                    dayTimesContainer: !!dayTimesContainer,
                    daysOfWeek: !!daysOfWeek
                });
                return;
            }
            
            const type = courseTypeSelect.value;
            console.log('Kurstyp geändert zu:', type);
            
            // Show/hide relevant fields based on type (korrekte Logik)
            switch(type) {
                case 'recurring_course':
                    // Dauerhafter Kurs: Startdatum + individuelle Zeiten pro Wochentag, kein Enddatum
                    console.log('Konfiguriere dauerhaften Kurs');
                    courseFields.style.display = 'block';
                    startDateField.style.display = 'block'; // Startdatum zwingend
                    endDateField.style.display = 'none'; // Kein Enddatum - läuft bis deaktiviert
                    eventDateFields.style.display = 'none';
                    generalStartTimeField.style.display = 'none'; // Keine allgemeine Zeit
                    generalEndTimeField.style.display = 'none';
                    dayTimesContainer.style.display = 'block'; // Individuelle Zeiten pro Wochentag
                    if (excludeHolidaysOption) excludeHolidaysOption.style.display = 'block'; // Feiertags-Option anzeigen
                    daysOfWeek.required = true;
                    daysOfWeek.setAttribute('multiple', 'multiple');
                    daysOfWeek.removeAttribute('size');
                    updateDayTimes();
                    break;
                case 'limited_course':
                    // Zeitlich begrenzter Kurs: Start- und Enddatum + individuelle Zeiten pro Tag
                    console.log('Konfiguriere zeitlich begrenzten Kurs');
                    courseFields.style.display = 'block';
                    startDateField.style.display = 'block'; // Startdatum
                    endDateField.style.display = 'block'; // Enddatum
                    eventDateFields.style.display = 'none';
                    generalStartTimeField.style.display = 'none'; // Keine allgemeine Zeit
                    generalEndTimeField.style.display = 'none';
                    dayTimesContainer.style.display = 'block'; // Individuelle Zeiten pro Tag
                    if (excludeHolidaysOption) excludeHolidaysOption.style.display = 'none'; // Feiertags-Option verstecken (haben eigene Logik)
                    daysOfWeek.required = true;
                    daysOfWeek.setAttribute('multiple', 'multiple');
                    daysOfWeek.removeAttribute('size');
                    updateDayTimes();
                    break;
                case 'holiday_course':
                    // Ferienkurs: Start- und Enddatum + individuelle Zeiten pro Tag (Mo-Fr)
                    console.log('Konfiguriere Ferienkurs');
                    courseFields.style.display = 'block';
                    startDateField.style.display = 'block'; // Startdatum
                    endDateField.style.display = 'block'; // Enddatum
                    eventDateFields.style.display = 'none';
                    generalStartTimeField.style.display = 'none'; // Keine allgemeine Zeit
                    generalEndTimeField.style.display = 'none';
                    dayTimesContainer.style.display = 'block'; // Individuelle Zeiten pro Tag
                    if (excludeHolidaysOption) excludeHolidaysOption.style.display = 'none'; // Feiertags-Option verstecken (haben eigene Logik)
                    daysOfWeek.required = false;
                    daysOfWeek.setAttribute('multiple', 'multiple');
                    daysOfWeek.removeAttribute('size');
                    // Automatisch Mo-Fr auswaehlen (nur wenn KEIN Kurs geladen wird)
                    if (!window.isLoadingCourse) {
                        const holidayDays = [1, 2, 3, 4, 5]; // Mo-Fr
                        Array.from(daysOfWeek.options).forEach(option => {
                            option.selected = holidayDays.includes(parseInt(option.value));
                        });
                    }
                    updateDayTimes();
                    break;
                case 'event':
                    // Event: einmaliger Termin (Datum + Start-/Endzeit)
                    console.log('Konfiguriere Event');
                    courseFields.style.display = 'block';
                    startDateField.style.display = 'none';
                    endDateField.style.display = 'none';
                    eventDateFields.style.display = 'block';
                    const eventEndDateField = document.getElementById('eventEndDateField');
                    if (eventEndDateField) eventEndDateField.style.display = 'none';
                    // Altwerte aus anderen Kurstypen leeren
                    if (!window.isLoadingCourse) {
                        const endDateInput = document.getElementById('endDate');
                        const eventEndInput = document.getElementById('eventEndDate');
                        if (endDateInput) endDateInput.value = '';
                        if (eventEndInput) eventEndInput.value = '';
                    }
                    generalStartTimeField.style.display = 'block';
                    generalEndTimeField.style.display = 'block';
                    dayTimesContainer.style.display = 'none';
                    if (excludeHolidaysOption) excludeHolidaysOption.style.display = 'none';
                    daysOfWeek.required = true;
                    Array.from(daysOfWeek.options).forEach(option => {
                        option.selected = false;
                    });
                    daysOfWeek.setAttribute('size', '1');
                    daysOfWeek.removeAttribute('multiple');
                    break;
                default:
                    console.log('Kein Kurstyp ausgewählt');
                    courseFields.style.display = 'none';
                    startDateField.style.display = 'none';
                    endDateField.style.display = 'none';
                    eventDateFields.style.display = 'none';
                    generalStartTimeField.style.display = 'none';
                    generalEndTimeField.style.display = 'none';
                    dayTimesContainer.style.display = 'none';
                    daysOfWeek.setAttribute('multiple', 'multiple');
                    daysOfWeek.removeAttribute('size');
            }
        }
        
        // Event-Listener für Kurstyp-Änderung
        const courseTypeSelect = document.getElementById('courseType');
        if (courseTypeSelect) {
            courseTypeSelect.addEventListener('change', handleCourseTypeChange);
        }
        
        // Funktion zum Aktualisieren der Tageszeiten-Felder
        function updateDayTimes() {
            console.log('updateDayTimes aufgerufen');
            const courseTypeSelect = document.getElementById('courseType');
            const daysOfWeek = document.getElementById('daysOfWeek');
            const dayTimesContainer = document.getElementById('dayTimes');
            const generalStartTime = document.getElementById('generalStartTime');
            const generalEndTime = document.getElementById('generalEndTime');
            
            console.log('Elemente gefunden:', {
                courseTypeSelect: !!courseTypeSelect,
                daysOfWeek: !!daysOfWeek,
                dayTimesContainer: !!dayTimesContainer
            });
            
            if (!courseTypeSelect || !daysOfWeek || !dayTimesContainer) {
                console.error('Fehlende Elemente in updateDayTimes');
                return;
            }
            
            const type = courseTypeSelect.value;
            console.log('Kurstyp in updateDayTimes:', type);
            
            // Für recurring_course, limited_course und holiday_course (nicht für event)
            if (type === 'event') {
                console.log('Event-Typ, keine Tageszeiten');
                return;
            }
            
            const selectedDays = Array.from(daysOfWeek.selectedOptions).map(option => parseInt(option.value));
            console.log('Ausgewählte Tage:', selectedDays);
            
            dayTimesContainer.innerHTML = '';
            
            // Hole die Standardzeiten aus den allgemeinen Zeitfeldern
            const defaultStartTime = (generalStartTime && generalStartTime.value) ? padTime(generalStartTime.value) : '09:00';
            const defaultEndTime = (generalEndTime && generalEndTime.value) ? padTime(generalEndTime.value) : '10:00';
            
            console.log('Standardzeiten:', defaultStartTime, '-', defaultEndTime);
            
            const dayNames = {
                1: 'Montag', 2: 'Dienstag', 3: 'Mittwoch', 4: 'Donnerstag',
                5: 'Freitag', 6: 'Samstag', 7: 'Sonntag'
            };
            
            selectedDays.forEach(day => {
                console.log('Erstelle Zeitfelder für:', dayNames[day]);
                
                // Responsive Spaltenbreite basierend auf Anzahl der Tage
                let colClass = 'col-12 mb-3';
                if (selectedDays.length === 1) {
                    colClass = 'col-md-6 col-lg-4 col-xl-3 mb-3';
                } else if (selectedDays.length === 2) {
                    colClass = 'col-md-6 col-lg-6 col-xl-6 mb-3';
                } else if (selectedDays.length === 3) {
                    colClass = 'col-md-6 col-lg-4 col-xl-4 mb-3';
                } else if (selectedDays.length === 4) {
                    colClass = 'col-md-6 col-lg-6 col-xl-3 mb-3';
                } else if (selectedDays.length === 5) {
                    colClass = 'col-md-6 col-lg-4 col-xl-2-4 mb-3'; // Custom class für 5 Spalten
                } else if (selectedDays.length === 6) {
                    colClass = 'col-md-6 col-lg-4 col-xl-2 mb-3';
                } else if (selectedDays.length === 7) {
                    colClass = 'col-md-6 col-lg-4 col-xl-1-7 mb-3'; // Custom class für 7 Spalten
                }
                
                const dayDiv = document.createElement('div');
                dayDiv.className = colClass;
                dayDiv.innerHTML = `
                    <div class="card day-time-card border-0 shadow-sm h-100">
                        <div class="card-body p-2">
                            <div class="text-center mb-2">
                                <span class="badge bg-primary fw-medium px-2 py-1">
                                    <i class="fas fa-calendar-day me-1"></i>${dayNames[day]}
                                </span>
                            </div>
                            <div class="row g-2">
                                <div class="col-6">
                                    <label class="form-label small fw-medium mb-1 text-muted">Von</label>
                                    <input type="time" class="form-control form-control-sm day-start-time" data-day="${day}" value="${defaultStartTime}" required>
                                </div>
                                <div class="col-6">
                                    <label class="form-label small fw-medium mb-1 text-muted">Bis</label>
                                    <input type="time" class="form-control form-control-sm day-end-time" data-day="${day}" value="${defaultEndTime}" required>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                dayTimesContainer.appendChild(dayDiv);
            });
            
            console.log('Tageszeiten-Felder erstellt, Anzahl:', selectedDays.length);
        }
        
        // Hilfsfunktion zum Formatieren der Zeit
        function padTime(timeString) {
            if (!timeString) return '';
            const parts = timeString.split(':');
            if (parts.length === 2) {
                return parts[0].padStart(2, '0') + ':' + parts[1].padStart(2, '0');
            }
            return timeString;
        }
        
        // Event-Listener fuer Wochentage-Aenderungen
        function setupDaysOfWeekListener() {
            const daysOfWeekSelect = document.getElementById('daysOfWeek');
            console.log('Setup Wochentage-Listener, Element gefunden:', !!daysOfWeekSelect);
            
            if (daysOfWeekSelect) {
                // Entferne vorherige Event-Listener
                daysOfWeekSelect.removeEventListener('change', handleDaysOfWeekChange);
                // Füge neuen Event-Listener hinzu
                daysOfWeekSelect.addEventListener('change', handleDaysOfWeekChange);
                console.log('Wochentage Event-Listener registriert');
                return true;
            } else {
                console.log('daysOfWeek Element noch nicht verfügbar (Formular möglicherweise versteckt)');
                return false;
            }
        }
        
        function handleDaysOfWeekChange() {
            console.log('Wochentage-Änderung erkannt!');
            const courseTypeSelect = document.getElementById('courseType');
            if (courseTypeSelect) {
                const type = courseTypeSelect.value;
                console.log('Wochentage geändert für Kurstyp:', type);
                // Für alle Kurstypen außer Event
                if (type === 'recurring_course' || type === 'limited_course' || type === 'holiday_course') {
                    console.log('Rufe updateDayTimes auf...');
                    updateDayTimes();
                } else {
                    console.log('Kein updateDayTimes für Kurstyp:', type);
                }
            } else {
                console.error('courseType Element nicht gefunden!');
            }
        }
        
        // Event-Listener beim Laden der Seite registrieren (nur wenn Element existiert)
        document.addEventListener('DOMContentLoaded', function() {
            // Warte bis alle Elemente geladen sind und versuche es mehrmals
            let attempts = 0;
            const maxAttempts = 5;
            
            function trySetupListener() {
                if (setupDaysOfWeekListener() || attempts >= maxAttempts) {
                    return; // Erfolgreich oder maximale Versuche erreicht
                }
                attempts++;
                setTimeout(trySetupListener, 200 * attempts); // Exponential backoff
            }
            
            setTimeout(trySetupListener, 100);
        });
        
        // Bulk Delete Funktionen
        function toggleAllCourses(selectAllCheckbox, isEndedTab = false) {
            // Finde nur die Checkboxen im aktuellen Tab
            const tableId = isEndedTab ? 'endedCoursesTable' : 'coursesTable';
            const table = document.getElementById(tableId);
            if (table) {
                const courseCheckboxes = table.querySelectorAll('.course-checkbox');
                courseCheckboxes.forEach(checkbox => {
                    checkbox.checked = selectAllCheckbox.checked;
                });
            }
            updateBulkDeleteButton();
        }

        function updateBulkDeleteButton() {
            const selectedCheckboxes = document.querySelectorAll('.course-checkbox:checked');
            const bulkDeleteBtn = document.getElementById('bulkDeleteBtn');
            const selectedCount = document.getElementById('selectedCount');
            
            if (selectedCheckboxes.length > 0) {
                bulkDeleteBtn.style.display = 'inline-block';
                selectedCount.textContent = selectedCheckboxes.length;
            } else {
                bulkDeleteBtn.style.display = 'none';
            }
            
            // Update "Alle auswählen" Checkbox
            const selectAllCheckbox = document.getElementById('selectAllCourses');
            const allCheckboxes = document.querySelectorAll('.course-checkbox');
            if (allCheckboxes.length > 0) {
                selectAllCheckbox.checked = selectedCheckboxes.length === allCheckboxes.length;
                selectAllCheckbox.indeterminate = selectedCheckboxes.length > 0 && selectedCheckboxes.length < allCheckboxes.length;
            }
        }

        function getSelectedCourseIds() {
            const selectedCheckboxes = document.querySelectorAll('.course-checkbox:checked');
            return Array.from(selectedCheckboxes).map(checkbox => parseInt(checkbox.value));
        }

        function bulkDeleteCourses() {
            const selectedIds = getSelectedCourseIds();
            if (selectedIds.length === 0) {
                showAlert('❌ Keine Kurse ausgewählt', 'warning');
                return;
            }
            
            // Lade Daten für alle ausgewählten Kurse
            const promises = selectedIds.map(id => 
                Promise.all([
                    fetch(`{{ path('appointment_admin_availability_get', {'id': '__ID__'}) }}`.replace('__ID__', id)).then(r => r.json()),
                    fetch(`{{ path('appointment_admin_availability_waiting_list', {'id': '__ID__'}) }}`.replace('__ID__', id)).then(r => r.json())
                ]).then(([courseData, waitingListData]) => ({
                    id,
                    courseData,
                    waitingListData: waitingListData.success ? waitingListData : { entries: [], count: 0 }
                }))
            );
            
            Promise.all(promises)
                .then(coursesData => {
                    // Speichere die Daten für das Modal
                    window.coursesToDelete = coursesData;
                    
                    // Zeige Bulk-Delete Modal
                    showBulkDeleteModal(coursesData);
                })
                .catch(error => {
                    console.error('Error loading courses data for bulk deletion:', error);
                    showAlert('❌ Fehler beim Laden der Kursdaten', 'danger');
                });
        }

        function showBulkDeleteModal(coursesData) {
            const modal = document.getElementById('bulkDeleteModal');
            const coursesList = document.getElementById('bulkDeleteCoursesList');
            const waitingListSection = document.getElementById('bulkWaitingListSection');
            const waitingListSummary = document.getElementById('bulkWaitingListSummary');
            const title = document.getElementById('bulkDeleteTitle');
            
            // Titel aktualisieren
            title.textContent = `${coursesData.length} Kurs${coursesData.length > 1 ? 'e' : ''} wirklich löschen?`;
            
            // Kursliste erstellen
            let coursesListHtml = '';
            let totalWaitingListEntries = 0;
            let waitingListSummaryHtml = '';
            
            coursesData.forEach((courseInfo, index) => {
                const course = courseInfo.courseData;
                const waitingList = courseInfo.waitingListData;
                
                // Kurstyp-Badge
                let typeBadge = 'bg-secondary';
                let typeLabel = course.type || 'Unbekannt';
                switch(course.type) {
                    case 'event':
                        typeLabel = 'Einmaliges Event';
                        typeBadge = 'bg-success';
                        break;
                    case 'recurring_course':
                        typeLabel = 'Dauerhafter Kurs';
                        typeBadge = 'bg-primary';
                        break;
                    case 'limited_course':
                        typeLabel = 'Zeitlich begrenzter Kurs';
                        typeBadge = 'bg-info';
                        break;
                    case 'holiday_course':
                        typeLabel = 'Ferienkurs';
                        typeBadge = 'bg-warning';
                        break;
                }
                
                coursesListHtml += `
                    <div class="list-group-item">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-1">${course.name}</h6>
                                <small class="text-muted">
                                    <span class="badge ${typeBadge} me-2">${typeLabel}</span>
                                    ${course.location ? course.location.name : 'Kein Standort'}
                                </small>
                            </div>
                            <div class="text-end">
                                ${waitingList.count > 0 ? 
                                    `<span class="badge bg-warning">
                                        <i class="fas fa-list-ul me-1"></i>${waitingList.count} auf Warteliste
                                    </span>` : 
                                    '<span class="badge bg-success">Keine Warteliste</span>'
                                }
                            </div>
                        </div>
                    </div>
                `;
                
                if (waitingList.count > 0) {
                    totalWaitingListEntries += waitingList.count;
                    waitingListSummaryHtml += `
                        <div class="card mb-2">
                            <div class="card-body py-2">
                                <div class="d-flex justify-content-between align-items-center">
                                    <strong>${course.name}</strong>
                                    <span class="badge bg-info">${waitingList.count} Person${waitingList.count > 1 ? 'en' : ''}</span>
                                </div>
                            </div>
                        </div>
                    `;
                }
            });
            
            coursesList.innerHTML = coursesListHtml;
            
            // Wartelisten-Sektion anzeigen/verstecken
            if (totalWaitingListEntries > 0) {
                waitingListSection.style.display = 'block';
                waitingListSummary.innerHTML = `
                    <div class="alert alert-warning">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <strong>Insgesamt ${totalWaitingListEntries} Person${totalWaitingListEntries > 1 ? 'en' : ''} auf Wartelisten</strong>
                    </div>
                    ${waitingListSummaryHtml}
                `;
            } else {
                waitingListSection.style.display = 'none';
            }
            
            // Modal anzeigen
            const bootstrapModal = new bootstrap.Modal(modal);
            bootstrapModal.show();
        }

        function executeBulkDelete(courseIds, archiveWaitingList) {
            // Erstelle Promises für alle Lösch-Requests
            const deletePromises = courseIds.map(courseId => 
                fetch(`{{ path('appointment_admin_availability_delete', {'id': '__ID__'}) }}`.replace('__ID__', courseId), {
                    method: 'DELETE',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        archiveWaitingList: archiveWaitingList
                    })
                }).then(response => response.json())
                .then(data => ({ courseId, success: data.success, message: data.message, error: data.error }))
                .catch(error => ({ courseId, success: false, error: error.message }))
            );
            
            // Warte auf alle Lösch-Requests
            Promise.all(deletePromises)
                .then(results => {
                    const successful = results.filter(r => r.success);
                    const failed = results.filter(r => !r.success);
                    
                    // Tabelle aktualisieren
                    setTimeout(() => {
                        loadCourses();
                    }, 500);
                    
                    // Erfolgsmeldung zusammenstellen
                    let message = '';
                    if (successful.length > 0) {
                        message += `✅ ${successful.length} Kurs${successful.length > 1 ? 'e' : ''} erfolgreich gelöscht!`;
                        
                        // Wartelisten-Info hinzufügen
                        const totalWaitingListEntries = window.coursesToDelete
                            .filter(c => successful.some(s => s.courseId === c.id))
                            .reduce((sum, c) => sum + c.waitingListData.count, 0);
                        
                        if (totalWaitingListEntries > 0) {
                            if (archiveWaitingList) {
                                message += ` ${totalWaitingListEntries} Wartelisten-Einträge wurden archiviert.`;
                            } else {
                                message += ` ${totalWaitingListEntries} Wartelisten-Einträge bleiben aktiv.`;
                            }
                        }
                    }
                    
                    if (failed.length > 0) {
                        if (message) message += '\n\n';
                        message += `❌ ${failed.length} Kurs${failed.length > 1 ? 'e' : ''} konnten nicht gelöscht werden:`;
                        failed.forEach(f => {
                            const courseName = window.coursesToDelete.find(c => c.id === f.courseId)?.courseData.name || `Kurs ${f.courseId}`;
                            message += `\n• ${courseName}: ${f.error}`;
                        });
                    }
                    
                    // Zeige Ergebnis
                    if (failed.length === 0) {
                        showAlert(message, 'success');
                    } else if (successful.length === 0) {
                        showAlert(message, 'danger');
                    } else {
                        showAlert(message, 'warning');
                    }
                    
                    // Cleanup
                    window.coursesToDelete = null;
                    
                    // Checkboxen zurücksetzen
                    const selectAllCheckbox = document.getElementById('selectAllCourses');
                    if (selectAllCheckbox) {
                        selectAllCheckbox.checked = false;
                        selectAllCheckbox.indeterminate = false;
                    }
                    updateBulkDeleteButton();
                })
                .catch(error => {
                    console.error('Error during bulk delete:', error);
                    showAlert('❌ Unerwarteter Fehler beim Löschen der Kurse', 'danger');
                    loadCourses(); // Tabelle trotzdem aktualisieren
                });
        }

        // Zusatzfelder-Funktionen
        window.showExtraFields = function() {
            document.getElementById('extraFieldsSection').style.display = 'block';
        };
        
        window.hideExtraFields = function() {
            document.getElementById('extraFieldsSection').style.display = 'none';
        };
        
        // Event-Listener für allgemeine Zeitfelder
        // Bei limited_course und holiday_course: Synchronisation mit Tageszeiten-Feldern
        const generalStartTime = document.getElementById('generalStartTime');
        const generalEndTime = document.getElementById('generalEndTime');
        
        if (generalStartTime) {
            generalStartTime.addEventListener('change', function() {
                const courseTypeSelect = document.getElementById('courseType');
                if (courseTypeSelect) {
                    const type = courseTypeSelect.value;
                    if (type === 'limited_course' || type === 'holiday_course') {
                        // Aktualisiere alle Tageszeiten-Felder mit der neuen Startzeit
                        document.querySelectorAll('.day-start-time').forEach(input => {
                            input.value = this.value;
                        });
                    }
                }
            });
        }
        
        if (generalEndTime) {
            generalEndTime.addEventListener('change', function() {
                const courseTypeSelect = document.getElementById('courseType');
                if (courseTypeSelect) {
                    const type = courseTypeSelect.value;
                    if (type === 'limited_course' || type === 'holiday_course') {
                        // Aktualisiere alle Tageszeiten-Felder mit der neuen Endzeit
                        document.querySelectorAll('.day-end-time').forEach(input => {
                            input.value = this.value;
                        });
                    }
                }
            });
        }
        
        // Zusatzfelder-Funktionalitaet
        let extraFields = [];
        
        function renderExtraFields() {
            const list = document.getElementById('extraFieldsList');
            list.innerHTML = '';
            
            if (extraFields.length === 0) {
                list.innerHTML = '<p class="text-muted small mb-0"><i class="fas fa-info-circle me-1"></i>Noch keine Zusatzfelder hinzugefügt</p>';
                return;
            }
            
            extraFields.forEach((field, idx) => {
                const row = document.createElement('div');
                row.className = 'card border-0 shadow-sm mb-2';
                row.innerHTML = `
                    <div class="card-body p-2">
                        <div class="row align-items-center g-2">
                            <div class="col-md-4">
                                <label class="form-label small fw-medium mb-1">Beschriftung</label>
                                <input type="text" class="form-control form-control-sm" placeholder="z.B. Schwimmkenntnisse" value="${field.label || ''}" onchange="updateExtraFieldLabel(${idx}, this.value)">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label small fw-medium mb-1">Feldtyp</label>
                                <select class="form-select form-select-sm" onchange="updateExtraFieldType(${idx}, this.value)">
                                    <option value="text" ${field.type === 'text' ? 'selected' : ''}>Textfeld</option>
                                    <option value="checkbox" ${field.type === 'checkbox' ? 'selected' : ''}>Checkbox</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label small fw-medium mb-1">Optionen</label>
                                <div class="form-check mt-1">
                                    <input class="form-check-input" type="checkbox" id="required_${idx}" ${field.required === true ? 'checked' : ''} onchange="updateExtraFieldRequired(${idx}, this.checked)">
                                    <label class="form-check-label small" for="required_${idx}">
                                        Verpflichtend
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-2 text-end">
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeExtraField(${idx})" title="Feld entfernen">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                `;
                list.appendChild(row);
            });
        }
        
        function addExtraField() {
            extraFields.push({ label: '', type: 'text', required: false });
            renderExtraFields();
        }
        
        function removeExtraField(idx) {
            extraFields.splice(idx, 1);
            renderExtraFields();
        }
        
        function updateExtraFieldLabel(idx, value) {
            extraFields[idx].label = value;
        }
        
        function updateExtraFieldType(idx, value) {
            extraFields[idx].type = value;
        }
        
        function updateExtraFieldRequired(idx, value) {
            extraFields[idx].required = value;
        }

        // ================== Zielgruppen-Logik ==================
        let availableTargetGroups = [];
        
        document.addEventListener('DOMContentLoaded', function() {
            // Lade Zielgruppen beim Seitenaufruf
            loadTargetGroups();
        });
        
        async function loadTargetGroups() {
            try {
                const response = await fetch('{{ path('admin_target_groups_api_list') }}');
                const data = await response.json();
                
                if (data.success) {
                    availableTargetGroups = data.targetGroups;
                    renderTargetGroupSelection(data.targetGroups);
                    renderTargetGroupFilter(data.targetGroups);
                    renderTargetGroupQuickFilters(data.targetGroups);
                    
                    // Aktualisiere die Zählungen nach dem Rendern der Buttons
                    if (allCourses && allCourses.length > 0) {
                        updateTargetGroupCounts(allCourses);
                    }
                } else {
                    showTargetGroupError('Fehler beim Laden der Zielgruppen');
                }
            } catch (error) {
                console.error('Target groups load error:', error);
                showTargetGroupError('Netzwerkfehler beim Laden der Zielgruppen');
            }
        }
        
        function renderTargetGroupSelection(targetGroups) {
            const container = document.getElementById('targetGroupSelection');
            
            if (!targetGroups || targetGroups.length === 0) {
                container.innerHTML = `
                    <div class="col-12 text-center py-3">
                        <i class="fas fa-exclamation-triangle text-warning" style="font-size: 2rem;"></i>
                        <p class="mt-2 text-muted">Keine Zielgruppen verfügbar</p>
                        <a href="{{ path('admin_target_groups_list') }}" class="btn btn-sm btn-primary" target="_blank">
                            <i class="fas fa-plus me-1"></i>Zielgruppen verwalten
                        </a>
                    </div>
                `;
                return;
            }
            
            // Berechne Spalten pro Zeile basierend auf Anzahl
            const itemsPerRow = Math.min(4, Math.ceil(12 / Math.ceil(targetGroups.length / 3)));
            const colClass = `col-md-${Math.floor(12 / itemsPerRow)}`;
            
            container.innerHTML = targetGroups.map((group, index) => `
                <div class="${colClass}">
                    <div class="form-check form-check-inline w-100">
                        <input class="form-check-input" type="radio" name="targetGroup" id="targetGroup_${group.id}" value="${group.name}">
                        <label class="form-check-label" for="targetGroup_${group.id}">
                            <i class="fas ${group.icon} me-1" style="color: ${group.color};"></i>${group.name}
                        </label>
                    </div>
                </div>
            `).join('');
        }
        
        function renderTargetGroupFilter(targetGroups) {
            const filter = document.getElementById('targetGroupFilter');
            if (!filter) return;
            
            // Behalte die ersten beiden Optionen (Alle und Ohne Zielgruppe)
            const existingOptions = filter.querySelectorAll('option');
            const keepOptions = Array.from(existingOptions).slice(0, 2);
            
            // Lösche alle anderen Optionen
            filter.innerHTML = '';
            keepOptions.forEach(option => filter.appendChild(option));
            
            // Füge Zielgruppen hinzu
            targetGroups.forEach(group => {
                const option = document.createElement('option');
                option.value = group.name;
                option.textContent = `${group.icon ? getIconEmoji(group.icon) : '🎯'} ${group.name}`;
                filter.appendChild(option);
            });
        }
        
        function renderTargetGroupQuickFilters(targetGroups) {
            const container = document.getElementById('targetGroupQuickFilters');
            if (!container) return;
            
            // Behalte die ersten beiden Buttons (Alle und Ohne Zielgruppe)
            const existingButtons = container.querySelectorAll('button');
            const keepButtons = Array.from(existingButtons).slice(0, 2);
            
            // Lösche alle anderen Buttons
            container.innerHTML = '';
            keepButtons.forEach(button => container.appendChild(button));
            
            // Füge Zielgruppen-Buttons hinzu
            targetGroups.forEach(group => {
                const button = document.createElement('button');
                button.className = `btn btn-sm btn-outline-${getButtonColorClass(group.color)}`;
                button.setAttribute('data-filter', group.name);
                button.onclick = () => quickFilterTargetGroup(button, group.name);
                
                const icon = getIconEmoji(group.icon);
                button.innerHTML = `
                    <i class="fas ${group.icon} me-1"></i>${group.name} (<span class="target-group-count-${group.id}">0</span>)
                `;
                
                container.appendChild(button);
            });
        }
        
        function getButtonColorClass(color) {
            const colorMap = {
                '#0dcaf0': 'info',      // Cyan
                '#198754': 'success',   // Grün
                '#ffc107': 'warning',   // Gelb
                '#6f42c1': 'purple',    // Lila
                '#6c757d': 'secondary'  // Grau
            };
            return colorMap[color] || 'secondary';
        }
        
        function getIconEmoji(iconClass) {
            const iconMap = {
                'fa-child': '👶',
                'fa-user': '🧑',
                'fa-users': '👥',
                'fa-baby': '🍼',
                'fa-graduation-cap': '🎓',
                'fa-heart': '❤️',
                'fa-star': '⭐',
                'fa-trophy': '🏆',
                'fa-edit': '✏️'
            };
            return iconMap[iconClass] || '🎯';
        }
        
        function showTargetGroupError(message) {
            const container = document.getElementById('targetGroupSelection');
            container.innerHTML = `
                <div class="col-12 text-center py-3">
                    <i class="fas fa-exclamation-triangle text-danger" style="font-size: 2rem;"></i>
                    <p class="mt-2 text-danger">${message}</p>
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="loadTargetGroups()">
                        <i class="fas fa-sync-alt me-1"></i>Erneut versuchen
                    </button>
                </div>
            `;
        }

        // Event Listener für Datums- und Wochentags-Änderungen
        document.addEventListener('DOMContentLoaded', function() {
            const startDateField = document.getElementById('startDate');
            const endDateField = document.getElementById('endDate');
            const daysOfWeek = document.getElementById('daysOfWeek');

            if (startDateField && endDateField && daysOfWeek) {
                startDateField.addEventListener('change', generateCourseDatesPreview);
                endDateField.addEventListener('change', generateCourseDatesPreview);
                daysOfWeek.addEventListener('change', generateCourseDatesPreview);
            }
        });

        // ================== Termine-Vorschau ==================
        let courseDates = [];

        async function generateCourseDatesPreview() {
            const courseType = document.getElementById('courseType').value;
            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            const daysOfWeek = Array.from(document.getElementById('daysOfWeek').selectedOptions).map(opt => opt.value);

            // Nur anzeigen bei zeitlich begrenzten Kursen und Ferienkursen
            const previewContainer = document.getElementById('courseDatesPreview');
            if (!['limited_course', 'holiday_course'].includes(courseType) || !startDate || !endDate || daysOfWeek.length === 0) {
                previewContainer.style.display = 'none';
                return;
            }

            // Speichere die aktuell ausgeschlossenen Termine VOR der Regenerierung
            const previouslyExcludedDates = courseDates
                .filter(date => date.excluded)
                .map(date => date.dateString);

            // Zeige Loading
            previewContainer.style.display = 'block';
            document.getElementById('courseDatesLoading').style.display = 'block';
            document.getElementById('courseDatesList').style.display = 'none';
            document.getElementById('courseDatesEmpty').style.display = 'none';

            try {
                const response = await fetch('{{ path('admin_courses_generate_dates') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        startDate: startDate,
                        endDate: endDate,
                        daysOfWeek: daysOfWeek
                    })
                });

                const data = await response.json();
                
                if (data.success) {
                    courseDates = data.dates;
                    
                    // Übertrage die vorherigen Ausschlüsse auf die neuen Termine
                    if (previouslyExcludedDates.length > 0) {
                        courseDates.forEach(date => {
                            if (previouslyExcludedDates.includes(date.dateString)) {
                                date.excluded = true;
                            }
                        });
                    }
                    
                    // Übertrage auch die pendingExcludedDates (für den initialen Ladevorgang)
                    if (window.pendingExcludedDates && window.pendingExcludedDates.length > 0) {
                        courseDates.forEach(date => {
                            if (window.pendingExcludedDates.includes(date.dateString)) {
                                date.excluded = true;
                            }
                        });
                    }
                    
                    renderCourseDates();
                } else {
                    throw new Error(data.error || 'Fehler beim Generieren der Termine');
                }
            } catch (error) {
                console.error('Error generating dates:', error);
                document.getElementById('courseDatesLoading').style.display = 'none';
                document.getElementById('courseDatesEmpty').innerHTML = `
                    <i class="fas fa-exclamation-circle me-2 text-danger"></i>
                    <span>Fehler: ${error.message}</span>
                `;
                document.getElementById('courseDatesEmpty').style.display = 'block';
            }
        }

        function renderCourseDates() {
            const container = document.getElementById('courseDatesList');
            const countBadge = document.getElementById('datesCount');
            
            if (!courseDates || courseDates.length === 0) {
                document.getElementById('courseDatesLoading').style.display = 'none';
                document.getElementById('courseDatesEmpty').style.display = 'block';
                container.style.display = 'none';
                return;
            }

            container.innerHTML = '';
            container.style.display = 'block';
            document.getElementById('courseDatesLoading').style.display = 'none';
            document.getElementById('courseDatesEmpty').style.display = 'none';

            const selectedCount = courseDates.filter(d => !d.excluded).length;
            countBadge.textContent = `${selectedCount} / ${courseDates.length} Termine`;

            courseDates.forEach((date, index) => {
                const col = document.createElement('div');
                col.className = 'col-md-4';
                
                const isHoliday = date.isHoliday;
                const cardClass = isHoliday ? 'border-warning bg-warning bg-opacity-10' : 'border-0';
                const checkboxId = `courseDate_${index}`;

                col.innerHTML = `
                    <div class="card ${cardClass} mb-2">
                        <div class="card-body p-2">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="${checkboxId}" 
                                       ${date.excluded ? '' : 'checked'} 
                                       onchange="toggleCourseDate(${index}, this.checked)">
                                <label class="form-check-label w-100" for="${checkboxId}">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="fw-medium">${date.dateFormatted}</span>
                                        <span class="badge bg-primary">${date.dayName}</span>
                                    </div>
                                    ${isHoliday ? `
                                        <div class="mt-1">
                                            <span class="badge bg-warning text-dark">
                                                <i class="fas fa-umbrella-beach me-1"></i>${date.holidayName}
                                            </span>
                                        </div>
                                    ` : ''}
                                </label>
                            </div>
                        </div>
                    </div>
                `;
                
                container.appendChild(col);
            });
        }

        function toggleCourseDate(index, isChecked) {
            courseDates[index].excluded = !isChecked;
            const selectedCount = courseDates.filter(d => !d.excluded).length;
            document.getElementById('datesCount').textContent = `${selectedCount} / ${courseDates.length} Termine`;
        }

        function selectAllDates() {
            courseDates.forEach(date => date.excluded = false);
            renderCourseDates();
        }

        function deselectAllDates() {
            courseDates.forEach(date => date.excluded = true);
            renderCourseDates();
        }

        function deselectHolidays() {
            courseDates.forEach(date => {
                if (date.isHoliday) {
                    date.excluded = true;
                }
            });
            renderCourseDates();
        }

        // Funktion um ausgeschlossene Termine zu extrahieren
        function getExcludedDates() {
            return courseDates
                .filter(d => d.excluded)
                .map(d => d.dateString);
        }
        
        // CSV-Export für Warteliste
        let currentCourseId = null;
        
        function exportWaitingListCsv() {
            if (!currentCourseId) {
                showAlert('❌ Kein Kurs ausgewählt', 'danger');
                return;
            }
            
            // Öffne CSV-Export in neuem Tab
            const csvUrl = `{{ path('appointment_admin_availability_waiting_list_csv', {'id': '__ID__'}) }}`.replace('__ID__', currentCourseId);
            window.open(csvUrl, '_blank');
        }

        // Payment-Felder Toggle
        document.addEventListener('DOMContentLoaded', function() {
            const paymentCheckbox = document.getElementById('isPaymentRequired');
            const paymentFields = document.getElementById('paymentFields');
            
            if (paymentCheckbox && paymentFields) {
                paymentCheckbox.addEventListener('change', function() {
                    if (this.checked) {
                        paymentFields.style.display = 'block';
                    } else {
                        paymentFields.style.display = 'none';
                    }
                });
            }
        });

        // PDF-Download Funktion
        function downloadPdf(type) {
            if (!window.currentCourseDetails || !window.currentCourseDetails.id) {
                showAlert('❌ Kein Kurs ausgewählt', 'danger');
                return;
            }

            const courseId = window.currentCourseDetails.id;
            let url = '';

            switch(type) {
                case 'participants':
                    url = `{{ path('courses_pdf_participants', {'id': '__ID__'}) }}`.replace('__ID__', courseId);
                    break;
                case 'participants-simple':
                    url = `{{ path('courses_pdf_participants_simple', {'id': '__ID__'}) }}`.replace('__ID__', courseId);
                    break;
                case 'attendance':
                    url = `{{ path('courses_pdf_attendance', {'id': '__ID__'}) }}`.replace('__ID__', courseId);
                    break;
                case 'badges':
                    url = `{{ path('courses_pdf_badges', {'id': '__ID__'}) }}`.replace('__ID__', courseId);
                    break;
                case 'certificates':
                    url = `{{ path('courses_pdf_certificates', {'id': '__ID__'}) }}`.replace('__ID__', courseId);
                    break;
                default:
                    showAlert('❌ Ungültiger PDF-Typ', 'danger');
                    return;
            }

            // Zeige Lade-Indikator
            const originalBtn = event.target.closest('.dropdown-menu');
            showAlert('📄 PDF wird generiert...', 'info');

            // Öffne PDF in neuem Tab
            window.open(url, '_blank');

            // Success-Message nach kurzer Verzögerung
            setTimeout(() => {
                showAlert('✅ PDF wurde erfolgreich erstellt', 'success');
            }, 1000);
        }
    </script>
{% endblock %}