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

{% block title %}Kursverwaltung - BewegungsZentrum{% endblock %}

{% block header_title %}Kursverwaltung{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --bz-green-light: #bde2c7;
            --bz-green-dark: #29ae5b;
            --bz-gray: #f5f5f5;
            --bz-orange: #ec9c74;
        }
        
        body {
            font-family: 'Roboto', sans-serif;
        }
        
        .course-card {
            transition: all 0.3s ease;
            border-radius: 12px;
            border-left: 4px solid var(--bz-green-dark);
            background: white;
        }
        
        .course-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(41, 174, 91, 0.2);
        }
        
        .btn-bz-primary {
            background: var(--bz-green-dark);
            border-color: var(--bz-green-dark);
            color: white;
        }
        
        .btn-bz-primary:hover {
            background: #1f8a47;
            border-color: #1f8a47;
        }
        
        .btn-bz-secondary {
            background: var(--bz-orange);
            border-color: var(--bz-orange);
            color: white;
        }
        
        .course-type-badge {
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.875rem;
            font-weight: 500;
        }
        
        .badge-kids { background-color: #bde2c7; color: #1f8a47; }
        .badge-adult { background-color: #ec9c74; color: white; }
        .badge-family { background-color: #29ae5b; color: white; }
        .badge-special { background-color: #f5f5f5; color: #333; }
        
        .modal-header {
            background: linear-gradient(135deg, var(--bz-green-dark) 0%, #1f8a47 100%);
            color: white;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--bz-green-dark);
            box-shadow: 0 0 0 0.2rem rgba(41, 174, 91, 0.25);
        }
        
        /* Excluded Dates Design */
        .border-dashed {
            border: 2px dashed #dee2e6 !important;
        }
        
        .nav-pills .nav-link {
            border-radius: 8px;
            transition: all 0.2s ease;
        }
        
        .nav-pills .nav-link:hover {
            background-color: rgba(41, 174, 91, 0.1);
        }
        
        .nav-pills .nav-link.active {
            background-color: var(--bz-green-dark);
            color: white;
        }
        
        #excludedDatesList .card {
            border-left: 4px solid #ffc107;
        }
        
        #excludedDatesList .card:hover {
            border-left-color: #ff9800;
        }
        }
        
        .table-hover tbody tr:hover {
            background-color: var(--bz-gray);
        }
        
        .loading-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }
        
        .loading-overlay.show {
            display: flex;
        }
        
        /* Excluded Dates Design - Kompakt */
        .border-dashed {
            border: 2px dashed #dee2e6 !important;
        }
        
        #excludedDatesSection .btn-group .btn {
            font-size: 0.875rem;
            padding: 0.375rem 0.75rem;
        }
        
        #excludedDatesSection .btn-primary {
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        #excludedDatesSection .btn-primary:hover {
            box-shadow: 0 3px 6px rgba(0,0,0,0.15);
            transform: translateY(-1px);
        }
        
        #excludedDatesList .card {
            border-left: 3px solid #ffc107;
            transition: all 0.2s ease;
            margin-bottom: 0.5rem;
        }
        
        #excludedDatesList .card:hover {
            border-left-color: #ff9800;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
        }
        
        #excludedDatesList .card-body {
            padding: 0.75rem;
        }
        
        #excludedDatesList .btn-outline-danger {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
        }
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <h1 class="h3 mb-0">
                    <i class="fas fa-dumbbell me-2" style="color: var(--bz-green-dark);"></i>
                    Kursverwaltung
                </h1>
                <div class="d-flex gap-2">
                    <div class="btn-group" role="group">
                        <a href="{{ path('admin_bz_courses_index', {view: 'cards'}) }}" 
                           class="btn btn-outline-secondary {% if viewMode == 'cards' %}active{% endif %}">
                            <i class="fas fa-th-large me-1"></i>Karten
                        </a>
                        <a href="{{ path('admin_bz_courses_index', {view: 'list'}) }}" 
                           class="btn btn-outline-secondary {% if viewMode == 'list' %}active{% endif %}">
                            <i class="fas fa-list me-1"></i>Liste
                        </a>
                    </div>
                    <button class="btn btn-bz-primary" onclick="showCreateModal()">
                        <i class="fas fa-plus me-2"></i>Neuer Kurs
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter -->
    <div class="card shadow-sm mb-4" style="border-radius: 12px;">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-bold">Kurstyp filtern</label>
                    <select class="form-select" id="filterType" onchange="loadCourses()">
                        <option value="">Alle Kurstypen</option>
                        <option value="kids_abo">Sportkurse Kinder (Abo)</option>
                        <option value="adult_abo">Sportkurse Erwachsene (Abo)</option>
                        <option value="holiday_games">Bewegte Ferienspiele</option>
                        <option value="family_time">Familien-Bewegungszeit</option>
                        <option value="team_training">Mannschaftstraining</option>
                        <option value="workshop">Workshops</option>
                        <option value="fitness_check">Fitness-Checks</option>
                        <option value="birthday">Bewegung am Ehrentag</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-bold">Status</label>
                    <select class="form-select" id="filterActive" onchange="loadCourses()">
                        <option value="">Alle</option>
                        <option value="1" selected>Nur aktive</option>
                        <option value="0">Nur inaktive</option>
                    </select>
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button class="btn btn-outline-secondary w-100" onclick="resetFilters()">
                        <i class="fas fa-redo me-2"></i>Filter zurücksetzen
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Kursliste -->
    <div id="coursesList"></div>
</div>

<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
    <div class="spinner-border text-light" style="width: 3rem; height: 3rem;"></div>
</div>

<!-- Course Modal -->
<div class="modal fade" id="courseModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">
                    <i class="fas fa-plus-circle me-2"></i>Neuer Kurs
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="courseForm">
                    <input type="hidden" id="courseId">
                    
                    <!-- Grundinformationen -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-uppercase text-muted mb-3">
                                <i class="fas fa-info-circle me-2"></i>Grundinformationen
                            </h6>
                        </div>
                        <div class="col-md-8 mb-3">
                            <label class="form-label fw-bold">Kursname <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="courseName" required>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Sortierung</label>
                            <input type="number" class="form-control" id="courseSortOrder" value="0">
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label fw-bold">Beschreibung</label>
                            <textarea class="form-control" id="courseDescription" rows="4"></textarea>
                        </div>
                    </div>

                    <!-- Kurstyp & Kategorie -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-uppercase text-muted mb-3">
                                <i class="fas fa-tags me-2"></i>Kurstyp & Kategorie
                            </h6>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Kursart <span class="text-danger">*</span></label>
                            <select class="form-select" id="courseType" required onchange="handleTypeChange(); handleScheduleTypeChange();">
                                <option value="">Bitte wählen...</option>
                                <option value="kids_abo">Sportkurse Kinder (Abo)</option>
                                <option value="adult_abo">Sportkurse Erwachsene (Abo)</option>
                                <option value="holiday_games">Bewegte Ferienspiele</option>
                                <option value="family_time">Familien-Bewegungszeit</option>
                                <option value="team_training">Mannschaftstraining</option>
                                <option value="workshop">Workshops</option>
                                <option value="fitness_check">Fitness-Checks</option>
                                <option value="birthday">Bewegung am Ehrentag</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Kurstyp</label>
                            <select class="form-select" id="courseScheduleType" onchange="handleScheduleTypeChange()">
                                <option value="">Nicht festgelegt</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>
                            <small class="form-text text-muted">Bestimmt die Terminplanung des Kurses</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Kategorie</label>
                            <select class="form-select" id="courseCategory">
                                <option value="">Keine</option>
                                <option value="kids">Kinder</option>
                                <option value="adults">Erwachsene</option>
                                <option value="family">Familie</option>
                            </select>
                        </div>
                    </div>

                    <!-- Altersgruppe & Teilnehmer -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-uppercase text-muted mb-3">
                                <i class="fas fa-users me-2"></i>Altersgruppe & Teilnehmer
                            </h6>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Mindestalter</label>
                            <input type="number" class="form-control" id="courseMinAge" min="0">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Höchstalter</label>
                            <input type="number" class="form-control" id="courseMaxAge" min="0">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Max. Teilnehmer</label>
                            <input type="number" class="form-control" id="courseMaxParticipants" min="1">
                            <small class="text-muted">Leer = unbegrenzt</small>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Bereits vergebene Plätze (außerhalb des Systems)</label>
                            <input type="number" class="form-control" id="courseExternallyBookedPlaces" min="0" value="0">
                            <small class="text-muted">z. B. Vorverkauf – Anzeige dann: „X von [Max.]“ Plätze frei</small>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Benötigte Kursleiter</label>
                            <input type="number" class="form-control" id="courseRequiredInstructors" min="1" value="1">
                        </div>
                        <div class="col-md-4 mb-3">
                            <div class="form-check mt-4">
                                <input class="form-check-input" type="checkbox" id="courseInstructorNotNeeded">
                                <label class="form-check-label fw-bold" for="courseInstructorNotNeeded">
                                    Kein Kursleiter benötigt
                                </label>
                            </div>
                            <small class="text-muted">Bereits besetzt oder nicht erforderlich – erscheint nicht in „Kurse suchen Kursleiter“</small>
                        </div>
                    </div>

                    <!-- Preise -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-uppercase text-muted mb-3">
                                <i class="fas fa-euro-sign me-2"></i>Preise
                            </h6>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Preis pro Einheit (€)</label>
                            <input type="number" class="form-control" id="coursePrice" step="0.01" min="0">
                        </div>
                        <div class="col-md-4 mb-3" id="coursePriceMonthlyColumn">
                            <label class="form-label fw-bold">Monatlicher Preis (Abo) (€)</label>
                            <input type="number" class="form-control" id="coursePriceMonthly" step="0.01" min="0">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">10er-Karte (€)</label>
                            <input type="number" class="form-control" id="coursePriceTicketCard" step="0.01" min="0">
                            <div class="form-check mt-2">
                                <input class="form-check-input" type="checkbox" id="courseUseTicketCard">
                                <label class="form-check-label" for="courseUseTicketCard">
                                    <small>10er-Karte aktivieren</small>
                                </label>
                            </div>
                        </div>
                        <div class="col-12" id="adultPricesSection" style="display: none;">
                            <div class="card border-primary border-opacity-25">
                                <div class="card-body">
                                    <h6 class="fw-bold mb-3">
                                        <i class="fas fa-user-check me-2"></i>Erwachsenen-Tarife (Pflichtauswahl bei Buchung)
                                    </h6>
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label fw-bold">Standard (€)</label>
                                            <input type="number" class="form-control" id="coursePriceAdultStandard" step="0.01" min="0" placeholder="z.B. 95.00">
                                            <small class="text-muted">Standard-Tarif</small>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-bold">Senior (€)</label>
                                            <input type="number" class="form-control" id="coursePriceSenior" step="0.01" min="0" placeholder="z.B. 85.00">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-bold">Student (€)</label>
                                            <input type="number" class="form-control" id="coursePriceStudent" step="0.01" min="0" placeholder="z.B. 75.00">
                                        </div>
                                    </div>
                                    <small class="text-muted d-block mt-2">Wenn kein Standardpreis gesetzt ist, wird die Option „Standard“ in der Buchung ausgeblendet. Wenn 10er-Karte aktiv ist, gelten diese Tarife als 10er-Karten-Preise.</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Geschwisterpreise (nur wenn Geschwisterkinder erlaubt) -->
                    <div class="row mb-4" id="siblingPricesSection" style="display: none;">
                        <div class="col-12">
                            <div class="card border-info shadow-sm">
                                <div class="card-header bg-info bg-opacity-10 border-info py-2">
                                    <h6 class="mb-0 text-info-emphasis small fw-bold">
                                        <i class="fas fa-child me-1"></i>Geschwisterpreise
                                    </h6>
                                </div>
                                <div class="card-body p-3">
                                    <div class="alert alert-info py-2 px-3 mb-3">
                                        <i class="fas fa-info-circle me-1"></i>
                                        <small>Legen Sie unterschiedliche Preise für Geschwisterkinder fest. Beispiel: Kind 1 = 15€, Kind 2 = 10€.
                                        <strong>Die Anzahl der Einträge legt fest, wie viele Geschwisterkinder gebucht werden können</strong> —
                                        drei Einträge = maximal drei Geschwisterkinder. 0,00 € bedeutet: kostenlos, aber buchbar.</small>
                                    </div>
                                    
                                    <div id="siblingPricesList">
                                        <!-- Wird dynamisch befüllt -->
                                    </div>
                                    
                                    <button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addSiblingPrice()">
                                        <i class="fas fa-plus me-1"></i>Weiteres Geschwisterkind hinzufügen
                                    </button>
                                    <div class="alert alert-warning py-2 px-3 mt-3 mb-0 d-none" id="siblingPricesMissingHint">
                                        <i class="fas fa-exclamation-triangle me-1"></i>
                                        <small>Ohne hinterlegten Preis können <strong>keine Geschwisterkinder gebucht werden</strong> — im Buchungsformular
                                        erscheint kein Eingabefeld. Für kostenlose Geschwisterkinder 0,00 € eintragen.</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Zeitplanung (Abo-Kurse) -->
                    <div class="row mb-4" id="aboScheduleSection" style="display: none;">
                        <div class="col-12">
                            <h6 class="text-uppercase text-muted mb-3">
                                <i class="fas fa-calendar-alt me-2"></i>Wöchentlicher Termin
                            </h6>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Wochentag</label>
                            <select class="form-select" id="courseWeekday">
                                <option value="">Bitte wählen...</option>
                                <option value="monday">Montag</option>
                                <option value="tuesday">Dienstag</option>
                                <option value="wednesday">Mittwoch</option>
                                <option value="thursday">Donnerstag</option>
                                <option value="friday">Freitag</option>
                                <option value="saturday">Samstag</option>
                                <option value="sunday">Sonntag</option>
                            </select>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Startzeit</label>
                            <input type="time" class="form-control" id="courseStartTime">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-bold">Endzeit</label>
                            <input type="time" class="form-control" id="courseEndTime">
                        </div>
                    </div>

                    <!-- Monatliche Wiederholung (z.B. Familien Bewegungszeit) -->
                    <div class="row mb-4" id="monthlyRecurrenceSection" style="display: none;">
                        <div class="col-12">
                            <div class="card border-success shadow-sm">
                                <div class="card-header bg-success bg-opacity-10 border-success py-2">
                                    <h6 class="mb-0 text-success-emphasis small fw-bold">
                                        <i class="fas fa-calendar-check me-1"></i>Monatliche Wiederholung
                                    </h6>
                                </div>
                                <div class="card-body p-3">
                                    <div class="alert alert-info py-2 px-3 mb-3">
                                        <i class="fas fa-info-circle me-1"></i>
                                        <small>Definieren Sie monatlich wiederkehrende Termine (z.B. jeden ersten Samstag im Monat). Die Termine werden automatisch generiert.</small>
                                    </div>
                                    
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <label class="form-label fw-bold small">Woche im Monat</label>
                                            <select class="form-select" id="monthlyRecurrenceWeek" onchange="updateMonthlyRecurrencePreview()">
                                                <option value="0">Jede Woche</option>
                                                <option value="1">Erste Woche</option>
                                                <option value="2">Zweite Woche</option>
                                                <option value="3">Dritte Woche</option>
                                                <option value="4">Vierte Woche</option>
                                                <option value="-1">Letzte Woche</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-bold small">Wochentag</label>
                                            <select class="form-select" id="monthlyRecurrenceDay" onchange="updateMonthlyRecurrencePreview()">
                                                <option value="0">Sonntag</option>
                                                <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" selected>Samstag</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-bold small">Startdatum</label>
                                            <input type="date" class="form-control" id="monthlyRecurrenceStartDate" onchange="updateMonthlyRecurrencePreview()">
                                        </div>
                                        <div class="col-md-4">
                                            <label class="form-label fw-bold small">Enddatum (optional)</label>
                                            <input type="date" class="form-control" id="monthlyRecurrenceEndDate" onchange="updateMonthlyRecurrencePreview()">
                                            <small class="text-muted">Leer = unbegrenzt</small>
                                        </div>
                                        <div class="col-md-8">
                                            <label class="form-label fw-bold small">Generierte Termine</label>
                                            <div id="monthlyRecurrencePreview" class="alert alert-light py-2 px-3 mb-0">
                                                <small class="text-muted">Bitte füllen Sie die Felder aus, um eine Vorschau zu sehen.</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Zeitraum (Ferienspiele etc.) -->
                    <div class="row mb-4" id="dateRangeSection" style="display: none;">
                        <div class="col-12">
                            <h6 class="text-uppercase text-muted mb-3">
                                <i class="fas fa-calendar-week me-2"></i>Zeitraum
                            </h6>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Startdatum</label>
                            <input type="date" class="form-control" id="courseStartDate">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Enddatum</label>
                            <input type="date" class="form-control" id="courseEndDate">
                        </div>
                    </div>

                    <!-- Zeitslots (optional, z.B. Workshops / Tag der Maus) -->
                    <div class="row mb-4" id="timeSlotsSection" style="display: none;">
                        <div class="col-12">
                            <h6 class="text-uppercase text-muted mb-3">
                                <i class="fas fa-clock me-2"></i>Zeitslots <span class="text-muted text-lowercase fw-normal">(optional)</span>
                            </h6>
                        </div>
                        <div class="col-12">
                            <div class="card border-primary border-opacity-25">
                                <div class="card-body">
                                    <div class="alert alert-info py-2 px-3 mb-3">
                                        <i class="fas fa-info-circle me-1"></i>
                                        <small>Für Workshops mit mehreren Zeitslots (z.B. „Tag der Maus“: 10:00–11:00, 11:30–12:30 …). Der Teilnehmer wählt beim Buchen einen Slot aus. Die Teilnehmerzahl pro Slot ist optional – leer = gemeinsame Kurs-Teilnehmerzahl.</small>
                                    </div>
                                    <div id="timeSlotsList">
                                        <!-- Wird dynamisch befüllt -->
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addTimeSlot()">
                                        <i class="fas fa-plus me-1"></i>Zeitslot hinzufügen
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Workshop: Gruppe & Buchungslinks -->
                    <div class="row mb-4" id="workshopGroupSection" style="display: none;">
                        <div class="col-12">
                            <h6 class="text-uppercase text-muted mb-3">
                                <i class="fas fa-link me-2"></i>Workshop / Landingpage
                            </h6>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Workshop-Gruppe (Slug)</label>
                            <input type="text" class="form-control" id="courseWorkshopGroup" placeholder="z.B. athletik-camp, tag-der-maus">
                            <small class="text-muted">Für Landingpage-Links: nur Workshops derselben Gruppe werden gemeinsam angezeigt.</small>
                        </div>
                        <div class="col-md-6 mb-3 d-flex align-items-end">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="courseShowInWorkshopMenu" checked>
                                <label class="form-check-label fw-bold" for="courseShowInWorkshopMenu">
                                    Im allgemeinen Workshop-Menü anzeigen
                                </label>
                                <div><small class="text-muted">Deaktivieren für einmalige Events (nur über Landingpage-Link buchbar).</small></div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="alert alert-light border small mb-0" id="workshopBookingLinksHint">
                                <strong>Buchungslinks</strong> (nach Speichern für WordPress-Menü / Beitrag):
                                <div class="mt-1 font-monospace" id="workshopDirectLink">Direkt zum Kurs: …/booking/courses/step/3?course=ID</div>
                                <div class="font-monospace" id="workshopGroupLink">Gruppenliste: …/booking/courses/step/2?type=workshop&group=SLUG&from=event_center</div>
                                <div class="mt-1 text-muted">Das WordPress-Menü auf bewegungszentrum-dueren.de pflegt Heiko – dort einen <em>Individuellen Link</em> mit der Gruppen- oder Direkt-URL eintragen.</div>
                            </div>
                        </div>
                    </div>

                    <!-- Ausgeschlossene Termine (Feiertage/Ferien) -->
                    <div class="row mb-3" id="excludedDatesSection" style="display: none;">
                        <div class="col-12">
                            <div class="card border-warning shadow-sm">
                                <div class="card-header bg-warning bg-opacity-10 border-warning py-2">
                                    <h6 class="mb-0 text-warning-emphasis small fw-bold">
                                        <i class="fas fa-calendar-times me-1"></i>Ausgeschlossene Termine
                                    </h6>
                                </div>
                                <div class="card-body p-3">
                                    <!-- Tabs für Einzeltermin / Zeitraum -->
                                    <div class="btn-group w-100 mb-3" role="group">
                                        <button class="btn btn-outline-primary btn-sm active" id="single-date-tab" type="button" onclick="switchExcludedDateTab('single')">
                                            <i class="fas fa-calendar-day me-1"></i>Einzeltermin
                                        </button>
                                        <button class="btn btn-outline-primary btn-sm" id="date-range-tab" type="button" onclick="switchExcludedDateTab('range')">
                                            <i class="fas fa-calendar-week me-1"></i>Zeitraum
                                        </button>
                                    </div>
                                    
                                    <div class="tab-content">
                                        <!-- Einzeltermin Tab -->
                                        <div class="tab-pane show active" id="single-date-pane">
                                            <div class="input-group">
                                                <input type="date" class="form-control" id="excludedDateInput" placeholder="Datum auswählen">
                                                <button class="btn btn-primary" type="button" onclick="addExcludedDate()">
                                                    <i class="fas fa-plus me-1"></i>Hinzufügen
                                                </button>
                                            </div>
                                        </div>
                                        
                                        <!-- Zeitraum Tab -->
                                        <div class="tab-pane" id="date-range-pane" style="display: none;">
                                            <div class="row g-2">
                                                <div class="col-md-5">
                                                    <label class="form-label small mb-1">Von</label>
                                                    <input type="date" class="form-control" id="excludedDateRangeStart" placeholder="Von">
                                                </div>
                                                <div class="col-md-5">
                                                    <label class="form-label small mb-1">Bis</label>
                                                    <input type="date" class="form-control" id="excludedDateRangeEnd" placeholder="Bis">
                                                </div>
                                                <div class="col-md-2 d-flex align-items-end">
                                                    <button class="btn btn-primary w-100" type="button" onclick="addExcludedDateRange()">
                                                        <i class="fas fa-plus me-1"></i>Hinzufügen
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="alert alert-info py-2 px-3 mt-2 mb-0">
                                        <i class="fas fa-info-circle me-1"></i>
                                        <small>Wählen Sie einzelne Termine oder Zeiträume aus, die von diesem Kurs ausgeschlossen werden sollen (z.B. Feiertage, Ferien).</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Liste der ausgeschlossenen Termine -->
                        <div class="col-12 mt-2">
                            <div class="card border-0 shadow-sm">
                                <div class="card-header bg-light py-2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <h6 class="mb-0 small fw-bold">
                                            <i class="fas fa-list me-1"></i>Ausgeschlossene Termine
                                        </h6>
                                        <span id="excludedDatesCount" class="badge bg-secondary">0 Tage</span>
                                    </div>
                                </div>
                                <div class="card-body p-2">
                                    <div id="excludedDatesList" class="row g-2">
                                        <!-- Wird dynamisch befüllt -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Kursleiter -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-uppercase text-muted mb-3">
                                <i class="fas fa-chalkboard-teacher me-2"></i>Kursleiter
                            </h6>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Hauptkursleiter</label>
                            <select class="form-select" id="coursePrimaryInstructor">
                                <option value="">Keine Zuordnung</option>
                                {% for instructor in instructors %}
                                    <option value="{{ instructor.id }}">{{ instructor.fullName }}</option>
                                {% endfor %}
                            </select>
                            <small class="form-text text-muted">Feste Kursleitung für diesen Kurs</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Vertretungen (Ersatz)</label>
                            <select class="form-select" id="courseSubstituteInstructors" multiple style="height: 120px;">
                                {% for instructor in instructors %}
                                    <option value="{{ instructor.id }}">{{ instructor.fullName }}</option>
                                {% endfor %}
                            </select>
                            <small class="form-text text-muted">Halten Sie Strg/Cmd gedrückt für Mehrfachauswahl</small>
                        </div>
                    </div>

                    <!-- Optionen -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-uppercase text-muted mb-3">
                                <i class="fas fa-cogs me-2"></i>Optionen
                            </h6>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="courseIsActive" checked>
                                <label class="form-check-label fw-bold" for="courseIsActive">
                                    Kurs ist aktiv
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="courseUseWaitlist">
                                <label class="form-check-label fw-bold" for="courseUseWaitlist">
                                    Warteliste aktivieren
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="courseAutoWaitlistWhenFull">
                                <label class="form-check-label fw-bold" for="courseAutoWaitlistWhenFull">
                                    Automatisch auf Warteliste wenn voll
                                </label>
                            </div>
                            <small class="form-text text-muted">Bei vollständiger Belegung nur noch Warteliste möglich</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="courseShowAsFullyBooked">
                                <label class="form-check-label fw-bold" for="courseShowAsFullyBooked">
                                    Als ausgebucht anzeigen
                                </label>
                            </div>
                            <small class="form-text text-muted">Kurs wird als ausgebucht angezeigt; Interessenten können sich direkt auf die Warteliste setzen</small>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="courseAllowSiblings" onchange="handleAllowSiblingsChange()">
                                <label class="form-check-label fw-bold" for="courseAllowSiblings">
                                    Geschwisterkinder erlauben
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="courseAllowMultipleBookings">
                                <label class="form-check-label fw-bold" for="courseAllowMultipleBookings">
                                    Mehrfachbuchungen erlauben
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="courseRequiresTeamSize">
                                <label class="form-check-label fw-bold" for="courseRequiresTeamSize">
                                    Teamgröße erforderlich
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">Farbe (Hex)</label>
                            <input type="color" class="form-control form-control-color" id="courseColor" value="#29ae5b">
                        </div>
                    </div>

                    <!-- Zusätzliche Informationen -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-uppercase text-muted mb-3">
                                <i class="fas fa-info-circle me-2"></i>Zusätzliche Informationen
                            </h6>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label fw-bold">Weitere Hinweise</label>
                            <textarea class="form-control" id="courseAdditionalInfo" rows="3"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Abbrechen
                </button>
                <button type="button" class="btn btn-bz-primary" onclick="saveCourse()">
                    <i class="fas fa-save me-2"></i>Speichern
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let coursesData = [];
let courseModal;

document.addEventListener('DOMContentLoaded', function() {
    courseModal = new bootstrap.Modal(document.getElementById('courseModal'));
    loadCourses();
});

function loadCourses() {
    showLoading();
    
    fetch('{{ path('admin_bz_courses_api_list') }}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                coursesData = data.courses;
                filterAndDisplayCourses();
            } else {
                showToast('Fehler beim Laden der Kurse', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Fehler beim Laden der Kurse', 'error');
        })
        .finally(() => hideLoading());
}

function filterAndDisplayCourses() {
    const filterType = document.getElementById('filterType').value;
    const filterActive = document.getElementById('filterActive').value;
    
    let filtered = coursesData;
    
    if (filterType) {
        filtered = filtered.filter(c => c.type === filterType);
    }
    
    if (filterActive !== '') {
        const isActive = filterActive === '1';
        filtered = filtered.filter(c => c.isActive === isActive);
    }
    
    displayCourses(filtered);
}

function displayCourses(courses) {
    const container = document.getElementById('coursesList');
    
    if (courses.length === 0) {
        container.innerHTML = `
            <div class="alert alert-info">
                <i class="fas fa-info-circle me-2"></i>
                Keine Kurse gefunden. Erstellen Sie einen neuen Kurs!
            </div>
        `;
        return;
    }
    
    const viewMode = '{{ viewMode }}' || 'cards';
    
    // Gruppiere nach Typ
    const grouped = {};
    courses.forEach(course => {
        if (!grouped[course.typeLabel]) {
            grouped[course.typeLabel] = [];
        }
        grouped[course.typeLabel].push(course);
    });
    
    let html = '';
    for (const [typeLabel, typeCourses] of Object.entries(grouped)) {
        html += `
            <div class="mb-4">
                <h5 class="mb-3 text-muted">
                    <i class="fas fa-folder-open me-2"></i>${typeLabel}
                    <span class="badge bg-secondary">${typeCourses.length}</span>
                </h5>
        `;
        
        if (viewMode === 'list') {
            // Listenansicht
            html += `
                <div class="card shadow-sm">
                    <div class="table-responsive">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Kursname</th>
                                    <th>Kurstyp</th>
                                    <th>Termin</th>
                                    <th>Alter</th>
                                    <th>Freie Plätze</th>
                                    <th>Preis</th>
                                    <th>Status</th>
                                    <th>Aktionen</th>
                                </tr>
                            </thead>
                            <tbody>
            `;
            
            typeCourses.forEach(course => {
                const statusBadge = course.isActive ? 
                    '<span class="badge bg-success">Aktiv</span>' : 
                    '<span class="badge bg-secondary">Inaktiv</span>';
                
                const fullBadge = course.isFull ? 
                    '<span class="badge bg-danger ms-1">Ausgebucht</span>' : '';
                
                const waitlistBadge = course.waitlistCount > 0 ? 
                    `<span class="badge bg-warning text-dark ms-1">Warteliste: ${course.waitlistCount}</span>` : '';
                
                const scheduleTypeBadge = course.scheduleTypeLabel && course.scheduleTypeLabel !== 'Nicht festgelegt' ? 
                    `<span class="badge bg-info">${course.scheduleTypeLabel}</span>` : '';
                
                html += `
                    <tr>
                        <td><strong>${course.name}</strong></td>
                        <td>
                            <span class="badge bg-primary">${course.typeLabel}</span>
                            ${scheduleTypeBadge}
                        </td>
                        <td>
                            ${(course.bookableTimeSlots && course.bookableTimeSlots.length > 0)
                                ? `<small>${course.bookableTimeSlots.map(s => `${s.start}-${s.end}${s.max ? ` (max ${s.max})` : ''}`).join('<br>')}</small>`
                                : (course.weekdayLabel
                                    ? `<strong>${course.weekdayLabel}</strong><br><small>${course.startTime || ''} - ${course.endTime || ''}</small>`
                                    : (course.startTime && course.endTime ? `<small>${course.startTime} - ${course.endTime} Uhr</small>` : '-'))}
                            ${course.startDate && course.endDate ? `<br><small>${course.startDate} - ${course.endDate}</small>` : ''}
                        </td>
                        <td>${course.minAge || 0} - ${course.maxAge || '∞'} Jahre</td>
                        <td>
                            ${course.maxParticipants ? `<strong>${course.availablePlaces}</strong> von ${course.maxParticipants} frei` : '∞'}
                            ${fullBadge}
                            ${waitlistBadge}
                            ${course.maxParticipants ? `<br><small class="text-muted">${course.bookedPlaces} belegt${course.externallyBookedPlaces > 0 ? `, davon ${course.externallyBookedPlaces} extern` : ''}${course.showAsFullyBooked ? ' – manuell als ausgebucht markiert' : ''}</small>` : ''}
                        </td>
                        <td>
                            ${course.type === 'adult_abo' ? formatAdultPriceSummary(course) : (course.priceMonthly ? `<strong>${course.priceMonthly}€</strong> / Monat` : course.price ? `<strong>${course.price}€</strong>` : '-')}
                        </td>
                        <td>${statusBadge}</td>
                        <td>
                            <div class="btn-group btn-group-sm">
                                <a href="/ksbdueren/public/admin/courses/${course.id}/details" class="btn btn-outline-info" title="Details">
                                    <i class="fas fa-eye"></i>
                                </a>
                                <button class="btn btn-outline-primary" onclick="editCourse(${course.id})" title="Bearbeiten">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-outline-danger" onclick="deleteCourse(${course.id}, '${course.name}')" title="Löschen">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                `;
            });
            
            html += `
                            </tbody>
                        </table>
                    </div>
                </div>
            `;
        } else {
            // Kartenansicht
            html += `<div class="row g-3">`;
        
        typeCourses.forEach(course => {
            const badgeClass = course.category === 'kids' ? 'badge-kids' : 
                               course.category === 'adults' ? 'badge-adult' : 
                               course.category === 'family' ? 'badge-family' : 'badge-special';
            
            const statusBadge = course.isActive ? 
                '<span class="badge bg-success">Aktiv</span>' : 
                '<span class="badge bg-secondary">Inaktiv</span>';
            
            const fullBadge = course.isFull ? 
                '<span class="badge bg-danger ms-2">Ausgebucht</span>' : '';
            
            const waitlistBadge = course.waitlistCount > 0 ? 
                `<span class="badge bg-warning text-dark ms-2">Warteliste: ${course.waitlistCount}</span>` : '';
            
            html += `
                <div class="col-md-6 col-lg-4">
                    <div class="card course-card shadow-sm h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <h6 class="card-title mb-0">${course.name}</h6>
                                ${statusBadge}
                            </div>
                            
                            <div class="mb-3">
                                <span class="course-type-badge ${badgeClass}">
                                    ${course.typeLabel}
                                </span>
                                ${course.scheduleTypeLabel && course.scheduleTypeLabel !== 'Nicht festgelegt' ? `
                                    <span class="badge bg-info ms-2">
                                        ${course.scheduleTypeLabel}
                                    </span>
                                ` : ''}
                            </div>
                            
                            ${(course.bookableTimeSlots && course.bookableTimeSlots.length > 0) ? `
                                <p class="mb-2">
                                    <i class="fas fa-clock me-2 text-muted"></i>
                                    ${course.bookableTimeSlots.map(s => `${s.start}-${s.end}${s.max ? ` (max ${s.max})` : ''}`).join(', ')}
                                </p>
                            ` : (course.weekdayLabel ? `
                                <p class="mb-2">
                                    <i class="fas fa-calendar me-2 text-muted"></i>
                                    <strong>${course.weekdayLabel}</strong> ${course.startTime} - ${course.endTime}
                                </p>
                            ` : (course.startTime && course.endTime ? `
                                <p class="mb-2">
                                    <i class="fas fa-clock me-2 text-muted"></i>
                                    ${course.startTime} - ${course.endTime} Uhr
                                </p>
                            ` : ''))}
                            
                            ${course.minAge || course.maxAge ? `
                                <p class="mb-2">
                                    <i class="fas fa-users me-2 text-muted"></i>
                                    ${course.minAge || 0} - ${course.maxAge || '∞'} Jahre
                                </p>
                            ` : ''}
                            
                            ${course.maxParticipants ? `
                                <p class="mb-2">
                                    <i class="fas fa-user-friends me-2 text-muted"></i>
                                    Freie Plätze: <strong>${course.availablePlaces}</strong> von ${course.maxParticipants}
                                    ${fullBadge}
                                    ${waitlistBadge}
                                    <br><small class="text-muted ms-4">${course.bookedPlaces} belegt${course.externallyBookedPlaces > 0 ? `, davon ${course.externallyBookedPlaces} außerhalb des Systems vergeben` : ''}${course.showAsFullyBooked ? ' – manuell als ausgebucht markiert' : ''}</small>
                                </p>
                            ` : ''}
                            
                            ${course.type === 'adult_abo' ? `
                                <p class="mb-2">
                                    <i class="fas fa-euro-sign me-2 text-muted"></i>
                                    ${formatAdultPriceSummary(course)}
                                </p>
                            ` : course.priceMonthly ? `
                                <p class="mb-2">
                                    <i class="fas fa-euro-sign me-2 text-muted"></i>
                                    <strong>${course.priceMonthly}€</strong> / Monat
                                </p>
                            ` : course.price ? `
                                <p class="mb-2">
                                    <i class="fas fa-euro-sign me-2 text-muted"></i>
                                    <strong>${course.price}€</strong>
                                </p>
                            ` : ''}
                            
                            <div class="d-flex gap-2 mt-3">
                                <a href="/ksbdueren/public/admin/courses/${course.id}/details" class="btn btn-sm btn-outline-info flex-fill">
                                    <i class="fas fa-eye"></i> Details
                                </a>
                                <button class="btn btn-sm btn-outline-primary" onclick="editCourse(${course.id})">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" onclick="deleteCourse(${course.id}, '${course.name}')">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        });
        
            html += `</div>`;
        }
        
        html += `</div>`;
    }
    
    container.innerHTML = html;
}

function getMonthlyRecurrenceData() {
    const courseType = document.getElementById('courseType').value;
    if (courseType !== 'family_time') {
        return null;
    }
    
    const startDate = document.getElementById('monthlyRecurrenceStartDate').value;
    if (!startDate) {
        return null;
    }
    
    return {
        weekOfMonth: parseInt(document.getElementById('monthlyRecurrenceWeek').value),
        dayOfWeek: parseInt(document.getElementById('monthlyRecurrenceDay').value),
        startDate: startDate,
        endDate: document.getElementById('monthlyRecurrenceEndDate').value || null
    };
}

function updateMonthlyRecurrencePreview() {
    const week = document.getElementById('monthlyRecurrenceWeek').value;
    const day = document.getElementById('monthlyRecurrenceDay').value;
    const startDate = document.getElementById('monthlyRecurrenceStartDate').value;
    const endDate = document.getElementById('monthlyRecurrenceEndDate').value;
    const preview = document.getElementById('monthlyRecurrencePreview');
    
    if (!preview) {
        return; // Element existiert nicht (z.B. wenn Sektion nicht sichtbar)
    }
    
    if (!startDate) {
        preview.innerHTML = '<small class="text-muted">Bitte füllen Sie die Felder aus, um eine Vorschau zu sehen.</small>';
        return;
    }
    
    // Generiere Vorschau für die nächsten 6 Monate
    const start = new Date(startDate + 'T00:00:00');
    const end = endDate ? new Date(endDate + 'T00:00:00') : new Date(start.getTime() + 180 * 24 * 60 * 60 * 1000); // 6 Monate
    const dates = generateMonthlyDates(start, end, parseInt(day), parseInt(week));
    
    if (dates.length === 0) {
        preview.innerHTML = '<small class="text-danger">Keine Termine gefunden. Bitte überprüfen Sie die Eingaben.</small>';
        return;
    }
    
    const dayNames = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
    const weekLabels = {0: 'Jeden', 1: 'Ersten', 2: 'Zweiten', 3: 'Dritten', 4: 'Vierten', '-1': 'Letzten'};
    const dayName = dayNames[parseInt(day)];
    const label = (week === '0')
        ? `Jeden ${dayName}:`
        : `${weekLabels[week]} ${dayName} im Monat:`;
    
    let html = `<strong>${label}</strong><br>`;
    html += '<div class="mt-2">';
    dates.slice(0, 12).forEach(date => {
        const dateObj = new Date(date);
        html += `<span class="badge bg-success me-1 mb-1">${dateObj.toLocaleDateString('de-DE', {day: '2-digit', month: '2-digit', year: 'numeric'})}</span>`;
    });
    if (dates.length > 12) {
        html += `<span class="text-muted">+ ${dates.length - 12} weitere</span>`;
    }
    html += '</div>';
    
    preview.innerHTML = html;
}

function formatDateLocal(date) {
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, '0');
    const d = String(date.getDate()).padStart(2, '0');
    return y + '-' + m + '-' + d;
}

function generateMonthlyDates(startDate, endDate, dayOfWeek, weekOfMonth) {
    const dates = [];
    const current = new Date(startDate);
    
    while (current <= endDate) {
        const year = current.getFullYear();
        const month = current.getMonth();
        
        if (weekOfMonth === 0) {
            // Jede Woche: Finde alle Vorkommen des Wochentags im Monat
            const firstDay = new Date(year, month, 1);
            const firstDayOfWeek = firstDay.getDay();
            
            // Berechne Offset zum ersten Vorkommen
            let offset = (dayOfWeek - firstDayOfWeek + 7) % 7;
            
            // Starte beim ersten Vorkommen
            let targetDate = new Date(year, month, 1 + offset);
            
            // Iteriere durch alle Vorkommen im Monat
            while (targetDate.getMonth() === month) {
                if (targetDate >= startDate && targetDate <= endDate) {
                    dates.push(formatDateLocal(targetDate));
                }
                targetDate = new Date(targetDate.getTime() + 7 * 24 * 60 * 60 * 1000); // +7 Tage
            }
        } else {
            // Erste Tag des Monats
            const firstDay = new Date(year, month, 1);
            const firstDayOfWeek = firstDay.getDay();
            
            // Berechne Offset zum ersten Vorkommen des gewünschten Wochentags
            let offset = (dayOfWeek - firstDayOfWeek + 7) % 7;
            
            let targetDate;
            if (weekOfMonth === -1) {
                // Letzte Woche
                const lastDay = new Date(year, month + 1, 0);
                const lastDayOfWeek = lastDay.getDay();
                const daysFromEnd = (lastDayOfWeek - dayOfWeek + 7) % 7;
                targetDate = new Date(year, month + 1, 0);
                targetDate.setDate(targetDate.getDate() - daysFromEnd);
            } else {
                // N-te Woche
                targetDate = new Date(year, month, 1 + offset + (weekOfMonth - 1) * 7);
            }
            
            // Prüfe ob im gleichen Monat und im Zeitraum
            if (targetDate.getMonth() === month && targetDate >= startDate && targetDate <= endDate) {
                dates.push(formatDateLocal(targetDate));
            }
        }
        
        // Nächster Monat
        current.setMonth(month + 1);
        current.setDate(1);
    }
    
    return dates;
}

function showCreateModal() {
    document.getElementById('modalTitle').innerHTML = '<i class="fas fa-plus-circle me-2"></i>Neuer Kurs';
    document.getElementById('courseForm').reset();
    document.getElementById('courseId').value = '';
    document.getElementById('courseColor').value = '#29ae5b';
    document.getElementById('courseIsActive').checked = true;
    document.getElementById('coursePrimaryInstructor').value = '';
    document.getElementById('courseSubstituteInstructors').selectedIndex = -1;
    document.getElementById('courseAutoWaitlistWhenFull').checked = false;
    document.getElementById('courseShowAsFullyBooked').checked = false;
    document.getElementById('coursePriceAdultStandard').value = '';
    document.getElementById('coursePriceSenior').value = '';
    document.getElementById('coursePriceStudent').value = '';
    document.getElementById('monthlyRecurrenceWeek').value = 1;
    document.getElementById('monthlyRecurrenceDay').value = 6;
    document.getElementById('monthlyRecurrenceStartDate').value = '';
    document.getElementById('monthlyRecurrenceEndDate').value = '';
    excludedDates = [];
    siblingPrices = [];
    timeSlots = [];
    renderExcludedDates();
    renderSiblingPrices();
    renderTimeSlots();
    handleTypeChange();
    handleAllowSiblingsChange();
    courseModal.show();
}

function editCourse(id) {
    showLoading();
    
    fetch(`{{ path('admin_bz_courses_api_get', {id: '__ID__'}) }}`.replace('__ID__', id))
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('modalTitle').innerHTML = '<i class="fas fa-edit me-2"></i>Kurs bearbeiten';
                populateForm(data.course);
                courseModal.show();
            } else {
                showToast('Fehler beim Laden des Kurses', 'error');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Fehler beim Laden des Kurses', 'error');
        })
        .finally(() => hideLoading());
}

function populateForm(course) {
    document.getElementById('courseId').value = course.id;
    document.getElementById('courseName').value = course.name;
    document.getElementById('courseDescription').value = course.description || '';
    document.getElementById('courseType').value = course.type;
    document.getElementById('courseScheduleType').value = course.scheduleType || '';
    
    // Monatliche Wiederholung laden (?? damit 0 = "Jede Woche" und 0 = Sonntag nicht zu 1/6 werden)
    if (course.monthlyRecurrence) {
        document.getElementById('monthlyRecurrenceWeek').value = course.monthlyRecurrence.weekOfMonth ?? 1;
        document.getElementById('monthlyRecurrenceDay').value = course.monthlyRecurrence.dayOfWeek ?? 6;
        document.getElementById('monthlyRecurrenceStartDate').value = course.monthlyRecurrence.startDate || '';
        document.getElementById('monthlyRecurrenceEndDate').value = course.monthlyRecurrence.endDate || '';
        updateMonthlyRecurrencePreview();
    } else {
        document.getElementById('monthlyRecurrenceWeek').value = 1;
        document.getElementById('monthlyRecurrenceDay').value = 6;
        document.getElementById('monthlyRecurrenceStartDate').value = '';
        document.getElementById('monthlyRecurrenceEndDate').value = '';
    }
    document.getElementById('courseCategory').value = course.category || '';
    document.getElementById('courseMinAge').value = course.minAge || '';
    document.getElementById('courseMaxAge').value = course.maxAge || '';
    document.getElementById('courseMaxParticipants').value = course.maxParticipants || '';
    document.getElementById('courseExternallyBookedPlaces').value = course.externallyBookedPlaces ?? 0;
    document.getElementById('courseRequiredInstructors').value = course.requiredInstructors || 1;
    document.getElementById('courseInstructorNotNeeded').checked = course.instructorNotNeeded || false;
    document.getElementById('coursePrice').value = course.price || '';
    document.getElementById('coursePriceMonthly').value = course.priceMonthly || '';
    document.getElementById('coursePriceAdultStandard').value = course.priceMonthly || '';
    document.getElementById('coursePriceSenior').value = course.priceSenior || '';
    document.getElementById('coursePriceStudent').value = course.priceStudent || '';
    document.getElementById('coursePriceTicketCard').value = course.priceTicketCard || '';
    document.getElementById('courseUseTicketCard').checked = course.useTicketCard || false;
    document.getElementById('courseWeekday').value = course.weekday || '';
    document.getElementById('courseStartTime').value = course.startTime || '';
    document.getElementById('courseEndTime').value = course.endTime || '';
    // Zeitslots laden (Workshops). Falls keine Slots, aber alte Einzel-Uhrzeit gesetzt: als ersten Slot übernehmen.
    if (course.bookableTimeSlots && Array.isArray(course.bookableTimeSlots) && course.bookableTimeSlots.length > 0) {
        timeSlots = course.bookableTimeSlots.map(s => ({
            start: s.start || '',
            end: s.end || '',
            max: (s.max !== undefined && s.max !== null) ? s.max : ''
        }));
    } else if (course.type === 'workshop' && course.startTime && course.endTime) {
        timeSlots = [{ start: course.startTime, end: course.endTime, max: '' }];
    } else {
        timeSlots = [];
    }
    renderTimeSlots();
    document.getElementById('courseStartDate').value = course.startDate || '';
    document.getElementById('courseEndDate').value = course.endDate || '';
    document.getElementById('courseIsActive').checked = course.isActive;
    document.getElementById('courseAllowSiblings').checked = course.allowSiblings;
    document.getElementById('courseAllowMultipleBookings').checked = course.allowMultipleBookings;
    document.getElementById('courseUseWaitlist').checked = course.useWaitlist;
    document.getElementById('courseAutoWaitlistWhenFull').checked = course.autoWaitlistWhenFull || false;
    document.getElementById('courseShowAsFullyBooked').checked = course.showAsFullyBooked || false;
    document.getElementById('courseRequiresTeamSize').checked = course.requiresTeamSize;
    document.getElementById('courseColor').value = course.color || '#29ae5b';
    document.getElementById('coursePrimaryInstructor').value = course.primaryInstructorId || '';
    
    // Substitute instructors
    const substituteSelect = document.getElementById('courseSubstituteInstructors');
    Array.from(substituteSelect.options).forEach(option => {
        option.selected = course.substituteInstructorIds && course.substituteInstructorIds.includes(parseInt(option.value));
    });
    
    document.getElementById('courseAdditionalInfo').value = course.additionalInfo || '';
    document.getElementById('courseSortOrder').value = course.sortOrder || 0;
    document.getElementById('courseWorkshopGroup').value = course.workshopGroup || '';
    document.getElementById('courseShowInWorkshopMenu').checked = course.showInWorkshopMenu !== false;
    updateWorkshopBookingLinks(course.id, course.workshopGroup);
    
    // Excluded dates laden
    excludedDates = course.excludedDates || [];
    renderExcludedDates();
    
    // Geschwisterpreise laden
    if (course.siblingPrices && Array.isArray(course.siblingPrices)) {
        siblingPrices = course.siblingPrices.map((price, index) => ({
            number: index + 1,
            price: price.toString()
        }));
    } else {
        siblingPrices = [];
    }
    renderSiblingPrices();
    
    // Geschwisterpreise-Sektion anzeigen/verstecken
    handleAllowSiblingsChange();
    
    handleTypeChange();
}

let excludedDates = [];

let siblingPrices = [];

let timeSlots = [];

function addTimeSlot() {
    timeSlots.push({ start: '', end: '', max: '' });
    renderTimeSlots();
}

function removeTimeSlot(index) {
    timeSlots.splice(index, 1);
    renderTimeSlots();
}

function updateTimeSlot(index, field, value) {
    if (timeSlots[index]) {
        timeSlots[index][field] = value;
    }
}

function getTimeSlotsData() {
    const valid = timeSlots
        .filter(s => s.start && s.end)
        .map(s => {
            const slot = { start: s.start, end: s.end };
            const max = parseInt(s.max, 10);
            if (!isNaN(max) && max > 0) {
                slot.max = max;
            }
            return slot;
        });
    return valid.length > 0 ? valid : null;
}

function renderTimeSlots() {
    const container = document.getElementById('timeSlotsList');
    if (!container) return;
    container.innerHTML = '';

    if (timeSlots.length === 0) {
        container.innerHTML = '<p class="text-muted small mb-0">Noch keine Zeitslots. Mit „Zeitslot hinzufügen“ anlegen.</p>';
        return;
    }

    timeSlots.forEach((slot, index) => {
        const row = document.createElement('div');
        row.className = 'row g-2 mb-2 align-items-end';
        row.innerHTML = `
            <div class="col-md-4">
                <label class="form-label small mb-1">Startzeit</label>
                <input type="time" class="form-control time-slot-start" value="${slot.start || ''}"
                       onchange="updateTimeSlot(${index}, 'start', this.value)">
            </div>
            <div class="col-md-4">
                <label class="form-label small mb-1">Endzeit</label>
                <input type="time" class="form-control time-slot-end" value="${slot.end || ''}"
                       onchange="updateTimeSlot(${index}, 'end', this.value)">
            </div>
            <div class="col-md-2">
                <label class="form-label small mb-1">Max. TN</label>
                <input type="number" min="1" class="form-control time-slot-max" value="${slot.max || ''}"
                       placeholder="∞" onchange="updateTimeSlot(${index}, 'max', this.value)">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-sm btn-outline-danger w-100" onclick="removeTimeSlot(${index})">
                    <i class="fas fa-trash me-1"></i>Entf.
                </button>
            </div>
        `;
        container.appendChild(row);
    });
}

function handleTypeChange() {
    const type = document.getElementById('courseType').value;
    const aboSection = document.getElementById('aboScheduleSection');
    const adultPricesSection = document.getElementById('adultPricesSection');
    const monthlyPriceColumn = document.getElementById('coursePriceMonthlyColumn');
    
    // Reset
    aboSection.style.display = 'none';
    adultPricesSection.style.display = 'none';
    monthlyPriceColumn.style.display = '';
    
    // Zeige relevante Sektionen basierend auf Kursart
    if (type === 'kids_abo' || type === 'adult_abo') {
        aboSection.style.display = 'flex';
    }
    if (type === 'adult_abo') {
        adultPricesSection.style.display = 'block';
        monthlyPriceColumn.style.display = 'none';
        if (!document.getElementById('coursePriceAdultStandard').value) {
            document.getElementById('coursePriceAdultStandard').value = document.getElementById('coursePriceMonthly').value || '';
        }
    }
    
    // Kurstyp-Änderung auslösen, um Terminplanung zu aktualisieren
    handleScheduleTypeChange();
}

function handleAllowSiblingsChange() {
    const allowSiblings = document.getElementById('courseAllowSiblings').checked;
    const siblingPricesSection = document.getElementById('siblingPricesSection');
    
    if (allowSiblings) {
        siblingPricesSection.style.display = 'block';
        if (siblingPrices.length === 0) {
            // Füge ersten Preis hinzu wenn leer
            addSiblingPrice();
        }
    } else {
        siblingPricesSection.style.display = 'none';
        siblingPrices = [];
        renderSiblingPrices();
    }
}

function addSiblingPrice() {
    const siblingNumber = siblingPrices.length + 1;
    siblingPrices.push({ number: siblingNumber, price: '' });
    renderSiblingPrices();
}

function removeSiblingPrice(index) {
    siblingPrices.splice(index, 1);
    // Nummern neu zuordnen
    siblingPrices.forEach((item, idx) => {
        item.number = idx + 1;
    });
    renderSiblingPrices();
}

function updateSiblingPrice(index, price) {
    siblingPrices[index].price = price;
    updateSiblingPricesHint();
}

/**
 * Ausgefüllte Geschwisterpreise als Zahlenliste; 0,00 € bleibt erhalten (kostenlos, aber buchbar).
 * Die Länge der Liste legt fest, wie viele Geschwisterkinder gebucht werden können.
 */
function collectSiblingPrices() {
    const prices = siblingPrices
        .map(item => String(item.price ?? '').trim().replace(',', '.'))
        .filter(value => value !== '' && !isNaN(parseFloat(value)))
        .map(value => parseFloat(value));

    return prices.length > 0 ? prices : null;
}

function updateSiblingPricesHint() {
    const hint = document.getElementById('siblingPricesMissingHint');
    if (!hint) return;
    const allowSiblings = document.getElementById('courseAllowSiblings').checked;
    hint.classList.toggle('d-none', !allowSiblings || collectSiblingPrices() !== null);
}

function renderSiblingPrices() {
    const container = document.getElementById('siblingPricesList');
    container.innerHTML = '';
    updateSiblingPricesHint();
    
    if (siblingPrices.length === 0) {
        container.innerHTML = '<p class="text-muted small mb-0">Keine Geschwisterpreise definiert</p>';
        return;
    }
    
    siblingPrices.forEach((item, index) => {
        const row = document.createElement('div');
        row.className = 'row g-2 mb-2 align-items-end';
        row.innerHTML = `
            <div class="col-md-3">
                <label class="form-label small mb-1">Geschwisterkind ${item.number}</label>
                <input type="text" class="form-control" value="Kind ${item.number}" readonly>
            </div>
            <div class="col-md-6">
                <label class="form-label small mb-1">Preis (€)</label>
                <input type="number" class="form-control sibling-price-input" 
                       step="0.01" min="0" 
                       value="${item.price}" 
                       placeholder="z.B. ${item.number === 1 ? '15.00' : '10.00'}"
                       onchange="updateSiblingPrice(${index}, this.value)">
            </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-sm btn-outline-danger w-100" onclick="removeSiblingPrice(${index})">
                    <i class="fas fa-trash me-1"></i>Entfernen
                </button>
            </div>
        `;
        container.appendChild(row);
    });
}

function updateWorkshopBookingLinks(courseId, groupSlug) {
    const base = '{{ app.request.schemeAndHttpHost ~ app.request.basePath }}';
    const directEl = document.getElementById('workshopDirectLink');
    const groupEl = document.getElementById('workshopGroupLink');
    if (!directEl || !groupEl) return;
    const id = courseId || 'ID';
    directEl.textContent = 'Direkt zum Kurs: ' + base + '/booking/courses/step/3?course=' + id + '&from=event_center';
    const slug = (groupSlug || 'SLUG').trim() || 'SLUG';
    groupEl.textContent = 'Gruppenliste: ' + base + '/booking/courses/step/2?type=workshop&group=' + encodeURIComponent(slug) + '&from=event_center';
}

document.getElementById('courseWorkshopGroup')?.addEventListener('input', function() {
    updateWorkshopBookingLinks(document.getElementById('courseId')?.value || '', this.value);
});

function handleScheduleTypeChange() {
    const scheduleType = document.getElementById('courseScheduleType').value;
    const courseType = document.getElementById('courseType').value;
    const dateRangeSection = document.getElementById('dateRangeSection');
    const excludedDatesSection = document.getElementById('excludedDatesSection');
    const monthlyRecurrenceSection = document.getElementById('monthlyRecurrenceSection');
    const timeSlotsSection = document.getElementById('timeSlotsSection');
    const workshopGroupSection = document.getElementById('workshopGroupSection');
    
    // Reset
    dateRangeSection.style.display = 'none';
    excludedDatesSection.style.display = 'none';
    monthlyRecurrenceSection.style.display = 'none';
    if (timeSlotsSection) timeSlotsSection.style.display = 'none';
    if (workshopGroupSection) workshopGroupSection.style.display = 'none';
    
    // Monatliche Wiederholung für Familien Bewegungszeit
    if (courseType === 'family_time') {
        monthlyRecurrenceSection.style.display = 'block';
        excludedDatesSection.style.display = 'block';
    }
    // Zeige relevante Sektionen basierend auf Kurstyp
    else if (scheduleType === 'limited_course' || scheduleType === 'holiday_course' || scheduleType === 'recurring_course' || scheduleType === 'event') {
        dateRangeSection.style.display = 'flex';
        excludedDatesSection.style.display = 'block';
    }

    // Mehrere Zeitslots für Workshops (z.B. "Tag der Maus")
    if (courseType === 'workshop' && timeSlotsSection) {
        timeSlotsSection.style.display = 'flex';
    }
    if (courseType === 'workshop' && workshopGroupSection) {
        workshopGroupSection.style.display = 'flex';
        updateWorkshopBookingLinks(document.getElementById('courseId')?.value || '', document.getElementById('courseWorkshopGroup')?.value || '');
    }
    
    // Aktualisiere Vorschau wenn monatliche Wiederholung aktiv ist
    if (courseType === 'family_time') {
        updateMonthlyRecurrencePreview();
    }
}

function switchExcludedDateTab(tab) {
    const singleTab = document.getElementById('single-date-tab');
    const rangeTab = document.getElementById('date-range-tab');
    const singlePane = document.getElementById('single-date-pane');
    const rangePane = document.getElementById('date-range-pane');
    
    if (tab === 'single') {
        singleTab.classList.add('active');
        rangeTab.classList.remove('active');
        singlePane.classList.add('show', 'active');
        singlePane.style.display = 'block';
        rangePane.classList.remove('show', 'active');
        rangePane.style.display = 'none';
    } else {
        rangeTab.classList.add('active');
        singleTab.classList.remove('active');
        rangePane.classList.add('show', 'active');
        rangePane.style.display = 'block';
        singlePane.classList.remove('show', 'active');
        singlePane.style.display = 'none';
    }
}

function addExcludedDate() {
    const input = document.getElementById('excludedDateInput');
    const date = input.value;
    
    if (!date) {
        showToast('Bitte wählen Sie ein Datum aus', 'warning');
        return;
    }
    
    if (excludedDates.includes(date)) {
        showToast('Dieses Datum ist bereits ausgeschlossen', 'warning');
        return;
    }
    
    excludedDates.push(date);
    excludedDates.sort();
    renderExcludedDates();
    input.value = '';
}

function addExcludedDateRange() {
    const startInput = document.getElementById('excludedDateRangeStart');
    const endInput = document.getElementById('excludedDateRangeEnd');
    const startDate = startInput.value;
    const endDate = endInput.value;
    
    if (!startDate || !endDate) {
        showToast('Bitte wählen Sie einen Start- und Enddatum aus', 'warning');
        return;
    }
    
    const start = new Date(startDate + 'T00:00:00');
    const end = new Date(endDate + 'T00:00:00');
    
    if (start > end) {
        showToast('Das Enddatum muss nach dem Startdatum liegen', 'warning');
        return;
    }
    
    // Alle Tage im Zeitraum hinzufügen
    const datesToAdd = [];
    const current = new Date(start);
    
    while (current <= end) {
        const dateString = current.toISOString().split('T')[0];
        if (!excludedDates.includes(dateString)) {
            datesToAdd.push(dateString);
        }
        current.setDate(current.getDate() + 1);
    }
    
    if (datesToAdd.length === 0) {
        showToast('Alle Tage in diesem Zeitraum sind bereits ausgeschlossen', 'info');
        return;
    }
    
    excludedDates.push(...datesToAdd);
    excludedDates.sort();
    renderExcludedDates();
    
    startInput.value = '';
    endInput.value = '';
    
    showToast(`${datesToAdd.length} Tag(e) hinzugefügt`, 'success');
}

function removeExcludedDate(date) {
    excludedDates = excludedDates.filter(d => d !== date);
    renderExcludedDates();
}

function renderExcludedDates() {
    const container = document.getElementById('excludedDatesList');
    const countBadge = document.getElementById('excludedDatesCount');
    
    container.innerHTML = '';
    
    // Update Count Badge
    if (countBadge) {
        countBadge.textContent = `${excludedDates.length} ${excludedDates.length === 1 ? 'Tag' : 'Tage'}`;
        countBadge.className = excludedDates.length > 0 ? 'badge bg-warning text-dark' : 'badge bg-secondary';
    }
    
        if (excludedDates.length === 0) {
        container.innerHTML = `
            <div class="col-12">
                <div class="alert alert-light text-center py-3" style="border: 2px dashed #dee2e6; border-radius: 6px;">
                    <i class="fas fa-calendar-check fa-2x text-muted mb-2 opacity-50"></i>
                    <p class="text-muted mb-1 small fw-medium">Keine Termine ausgeschlossen</p>
                    <small class="text-muted">Fügen Sie Termine oder Zeiträume hinzu</small>
                </div>
            </div>
        `;
        return;
    }
    
    // Sortiere Daten
    const sortedDates = [...excludedDates].sort();
    
    // Gruppiere aufeinanderfolgende Daten zu Zeiträumen
    const ranges = [];
    let currentRange = null;
    
    sortedDates.forEach((date, index) => {
        const dateObj = new Date(date + 'T00:00:00');
        
        if (!currentRange) {
            currentRange = { start: date, end: date, dates: [date] };
        } else {
            const prevDate = new Date(currentRange.end + 'T00:00:00');
            const daysDiff = (dateObj - prevDate) / (1000 * 60 * 60 * 24);
            
            if (daysDiff === 1) {
                // Fortsetzung des Zeitraums
                currentRange.end = date;
                currentRange.dates.push(date);
            } else {
                // Neuer Zeitraum
                ranges.push(currentRange);
                currentRange = { start: date, end: date, dates: [date] };
            }
        }
        
        // Letzter Eintrag
        if (index === sortedDates.length - 1) {
            ranges.push(currentRange);
        }
    });
    
    // Rendere Zeiträume und einzelne Termine als Cards
    ranges.forEach(range => {
        const isRange = range.start !== range.end;
        const daysCount = range.dates.length;
        const col = document.createElement('div');
        col.className = 'col-md-6 col-lg-4';
        
        const card = document.createElement('div');
        card.className = 'card border-warning shadow-sm h-100';
        card.style.transition = 'all 0.2s ease';
        
        card.innerHTML = `
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div class="flex-grow-1">
                        ${isRange ? `
                            <div class="d-flex align-items-center mb-1">
                                <i class="fas fa-calendar-week text-warning me-1" style="font-size: 0.875rem;"></i>
                                <span class="fw-semibold text-dark small">Zeitraum</span>
                            </div>
                            <div class="text-muted small">
                                ${formatDate(range.start)} - ${formatDate(range.end)}
                            </div>
                        ` : `
                            <div class="d-flex align-items-center mb-1">
                                <i class="fas fa-calendar-day text-warning me-1" style="font-size: 0.875rem;"></i>
                                <span class="fw-semibold text-dark small">Einzeltermin</span>
                            </div>
                            <div class="text-muted small">
                                ${formatDate(range.start)}
                            </div>
                        `}
                        <div class="mt-1">
                            <small class="text-muted">
                                ${daysCount} ${daysCount === 1 ? 'Tag' : 'Tage'}
                            </small>
                        </div>
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-danger ms-2" onclick="${isRange ? `removeExcludedDateRange('${range.start}', '${range.end}')` : `removeExcludedDate('${range.start}')`}" title="Entfernen">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        `;
        
        // Hover-Effekt
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-2px)';
            this.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
        });
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
        });
        
        col.appendChild(card);
        container.appendChild(col);
    });
}

function removeExcludedDateRange(startDate, endDate) {
    const start = new Date(startDate + 'T00:00:00');
    const end = new Date(endDate + 'T00:00:00');
    const current = new Date(start);
    
    while (current <= end) {
        const dateString = current.toISOString().split('T')[0];
        excludedDates = excludedDates.filter(d => d !== dateString);
        current.setDate(current.getDate() + 1);
    }
    
    renderExcludedDates();
}

function formatDate(dateString) {
    const date = new Date(dateString + 'T00:00:00');
    return date.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
}

function saveCourse() {
    const form = document.getElementById('courseForm');
    
    if (!form.checkValidity()) {
        form.reportValidity();
        return;
    }
    
    const courseId = document.getElementById('courseId').value;
    const isEdit = courseId !== '';
    
    const type = document.getElementById('courseType').value;
    const adultStandardPrice = document.getElementById('coursePriceAdultStandard').value || document.getElementById('coursePriceMonthly').value || null;
    const adultSeniorPrice = document.getElementById('coursePriceSenior').value || null;
    const adultStudentPrice = document.getElementById('coursePriceStudent').value || null;

    if (type === 'adult_abo' && !adultStandardPrice && !adultSeniorPrice && !adultStudentPrice) {
        showToast('Für Erwachsenenkurse bitte mindestens einen Preis (Standard/Senior/Student) eintragen.', 'warning');
        return;
    }

    const data = {
        name: document.getElementById('courseName').value,
        description: document.getElementById('courseDescription').value,
        type: type,
        scheduleType: document.getElementById('courseScheduleType').value || null,
        category: document.getElementById('courseCategory').value,
        minAge: parseInt(document.getElementById('courseMinAge').value) || null,
        maxAge: parseInt(document.getElementById('courseMaxAge').value) || null,
        maxParticipants: parseInt(document.getElementById('courseMaxParticipants').value) || null,
        externallyBookedPlaces: parseInt(document.getElementById('courseExternallyBookedPlaces').value) || 0,
        requiredInstructors: parseInt(document.getElementById('courseRequiredInstructors').value) || 1,
        instructorNotNeeded: document.getElementById('courseInstructorNotNeeded').checked,
        price: document.getElementById('coursePrice').value || null,
        priceMonthly: type === 'adult_abo'
            ? adultStandardPrice
            : (document.getElementById('coursePriceMonthly').value || null),
        priceSenior: type === 'adult_abo' ? adultSeniorPrice : null,
        priceStudent: type === 'adult_abo' ? adultStudentPrice : null,
        priceTicketCard: document.getElementById('coursePriceTicketCard').value || null,
        useTicketCard: document.getElementById('courseUseTicketCard').checked,
        weekday: document.getElementById('courseWeekday').value || null,
        startTime: document.getElementById('courseStartTime').value || null,
        endTime: document.getElementById('courseEndTime').value || null,
        bookableTimeSlots: type === 'workshop' ? getTimeSlotsData() : null,
        startDate: document.getElementById('courseStartDate').value || null,
        endDate: document.getElementById('courseEndDate').value || null,
        isActive: document.getElementById('courseIsActive').checked,
        allowSiblings: document.getElementById('courseAllowSiblings').checked,
        allowMultipleBookings: document.getElementById('courseAllowMultipleBookings').checked,
        useWaitlist: document.getElementById('courseUseWaitlist').checked,
        requiresTeamSize: document.getElementById('courseRequiresTeamSize').checked,
        color: document.getElementById('courseColor').value,
        additionalInfo: document.getElementById('courseAdditionalInfo').value,
        sortOrder: parseInt(document.getElementById('courseSortOrder').value) || 0,
        workshopGroup: type === 'workshop' ? (document.getElementById('courseWorkshopGroup').value.trim() || null) : null,
        showInWorkshopMenu: type === 'workshop' ? document.getElementById('courseShowInWorkshopMenu').checked : true,
        excludedDates: excludedDates.length > 0 ? excludedDates : null,
        siblingPrices: collectSiblingPrices(),
        monthlyRecurrence: getMonthlyRecurrenceData(),
        primaryInstructorId: document.getElementById('coursePrimaryInstructor').value || null,
        substituteInstructorIds: Array.from(document.getElementById('courseSubstituteInstructors').selectedOptions).map(opt => parseInt(opt.value)),
        autoWaitlistWhenFull: document.getElementById('courseAutoWaitlistWhenFull').checked,
        showAsFullyBooked: document.getElementById('courseShowAsFullyBooked').checked,
    };
    
    const url = isEdit ? 
        `{{ path('admin_bz_courses_api_update', {id: '__ID__'}) }}`.replace('__ID__', courseId) : 
        '{{ path('admin_bz_courses_api_create') }}';
    const method = isEdit ? 'PUT' : 'POST';
    
    showLoading();
    
    fetch(url, {
        method: method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast(data.message, 'success');
            courseModal.hide();
            loadCourses();
        } else {
            showToast(data.error || 'Fehler beim Speichern', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Fehler beim Speichern', 'error');
    })
    .finally(() => hideLoading());
}

function formatAdultPriceSummary(course) {
    const parts = [];
    const suffix = course.useTicketCard ? ' (10er-Karte)' : '';
    if (course.priceMonthly) {
        parts.push(`Standard <strong>${course.priceMonthly}€</strong>${suffix}`);
    }
    if (course.priceSenior) {
        parts.push(`Senior <strong>${course.priceSenior}€</strong>${suffix}`);
    }
    if (course.priceStudent) {
        parts.push(`Student <strong>${course.priceStudent}€</strong>${suffix}`);
    }
    return parts.length > 0 ? parts.join(' / ') : '-';
}

function deleteCourse(id, name) {
    if (!confirm(`Möchten Sie den Kurs "${name}" wirklich löschen?`)) {
        return;
    }
    
    showLoading();
    
    fetch(`{{ path('admin_bz_courses_api_delete', {id: '__ID__'}) }}`.replace('__ID__', id), {
        method: 'DELETE'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast(data.message, 'success');
            loadCourses();
        } else {
            showToast(data.error || 'Fehler beim Löschen', 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Fehler beim Löschen', 'error');
    })
    .finally(() => hideLoading());
}

function resetFilters() {
    document.getElementById('filterType').value = '';
    document.getElementById('filterActive').value = '1';
    loadCourses();
}

function showLoading() {
    document.getElementById('loadingOverlay').classList.add('show');
}

function hideLoading() {
    document.getElementById('loadingOverlay').classList.remove('show');
}

function showToast(message, type = 'info') {
    // Erstelle Bootstrap Toast
    const toastHtml = `
        <div class="toast align-items-center text-white bg-${type === 'success' ? 'success' : type === 'error' ? 'danger' : 'info'} border-0 position-fixed top-0 end-0 m-3" role="alert" style="z-index: 99999;">
            <div class="d-flex">
                <div class="toast-body">
                    <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'} me-2"></i>
                    ${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        </div>
    `;
    
    const toastContainer = document.createElement('div');
    toastContainer.innerHTML = toastHtml;
    document.body.appendChild(toastContainer);
    
    const toastElement = toastContainer.querySelector('.toast');
    const toast = new bootstrap.Toast(toastElement);
    toast.show();
    
    toastElement.addEventListener('hidden.bs.toast', () => {
        toastContainer.remove();
    });
}
</script>
{% endblock %}