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

{% block title %}Buchungssystem - Admin Dashboard{% endblock %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

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

{% block content %}
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">
                        <i class="fas fa-tachometer-alt me-2"></i>Admin Dashboard
                    </h1>
                    <div class="mt-2">
                        <a href="{{ path('admin_dashboard') }}" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-th-large me-1"></i>Neues Dashboard
                        </a>
                    </div>
                </div>
                <div class="btn-group">
                    <a href="{{ path('admin_courses_index') }}" class="btn btn-primary">
                        <i class="fas fa-calendar-plus me-2"></i>Kurse verwalten
                    </a>
                    <a href="{{ path('admin_locations_index') }}" class="btn btn-success">
                        <i class="fas fa-map-marker-alt me-2"></i>Standorte verwalten
                    </a>
                    <a href="{{ path('admin_email_templates_index') }}" class="btn btn-info">
                        <i class="fas fa-envelope me-2"></i>E-Mail Templates
                    </a>
                </div>
            </div>
        </div>
    </div>

    {% if coursesWithoutTemplates|length > 0 %}
    <div class="missing-template-warning">
        <i class="fas fa-exclamation-triangle"></i>
        <div>
            <strong>Achtung:</strong> Folgende Kurse haben keine E-Mail-Template-Zuordnung:
            <div class="course-list">
                {% for course in coursesWithoutTemplates %}
                <div class="course-list-item">
                    <div>
                        <span class="course-name">{{ course.name }}</span>
                        <span class="course-type">({{ course.type }})</span>
                    </div>
                    <span class="missing-template">
                        <i class="fas fa-envelope"></i> E-Mail-Template fehlt
                    </span>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-2">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title mb-0">Heutige Termine</h6>
                            <h2 class="mt-2 mb-0" id="todayAppointments">0</h2>
                        </div>
                        <i class="fas fa-calendar-day fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title mb-0">Aktive Kurse</h6>
                            <h2 class="mt-2 mb-0" id="activeCourses">0</h2>
                        </div>
                        <i class="fas fa-chalkboard-teacher fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title mb-0">Verfügbare Standorte</h6>
                            <h2 class="mt-2 mb-0" id="availableLocations">0</h2>
                        </div>
                        <i class="fas fa-map-marker-alt fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title mb-0">Ausstehende Bestätigungen</h6>
                            <h2 class="mt-2 mb-0" id="pendingConfirmations">0</h2>
                        </div>
                        <i class="fas fa-clock fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-secondary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title mb-0">Warteliste</h6>
                            <h2 class="mt-2 mb-0" id="waitingListCount">0</h2>
                        </div>
                        <i class="fas fa-list fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title mb-0">Storniert</h6>
                            <h2 class="mt-2 mb-0" id="cancelledCount">0</h2>
                        </div>
                        <i class="fas fa-times-circle fa-2x opacity-50"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
 <div class="row mb-4">
        <!-- Termine Section -->
    <div class="col-12">
        <div class="card">
                <div class="card-header bg-white">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4>
                        <i class="fas fa-calendar-check me-2"></i>Gebuchte Termine
                    </h4>
                    <button type="button" class="btn btn-primary" onclick="showCreateAppointmentModal()">
                        <i class="fas fa-plus me-2"></i>Termin erstellen
                    </button>
                </div>
                
                <!-- Filter -->
                <div class="row g-3 mb-3">
                    <div class="col-md-2">
                        <input type="date" class="form-control" id="dateFilter" placeholder="Datum">
                    </div>
                    <div class="col-md-2">
                        <select class="form-select" id="statusFilter">
                            <option value="">Alle Status</option>
                            <option value="confirmed">Bestätigt</option>
                            <option value="pending">Ausstehend</option>
                            <option value="cancelled">Storniert</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select class="form-select" id="locationFilter">
                            <option value="">Alle Standorte</option>
                            {% for location in locations %}
                                <option value="{{ location.id }}">{{ location.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="searchFilter" placeholder="Suchen (Name, E-Mail, Telefon)">
                    </div>
                    <div class="col-md-3">
                        <button type="button" class="btn btn-outline-secondary" onclick="loadAppointments()">
                            <i class="fas fa-search me-2"></i>Filtern
                        </button>
                        <button type="button" class="btn btn-outline-secondary" onclick="clearFilters()">
                            <i class="fas fa-times me-2"></i>Zurücksetzen
                        </button>
                    </div>
                </div>
            </div>
                <div class="card-body">
                <div class="table-responsive">
                        <!-- Gebuchte Termine Tabelle -->
                        <table class="table table-striped" id="bookedAppointmentsTable">
                            <thead>
                                <tr>
                                    <th>Kurs</th>
                                    <th>Standort</th>
                                    <th>Kunde</th>
                                    <th>E-Mail</th>
                                    <th>Telefon</th>
                                    <th>Status</th>
                                    <th>Aktionen</th>
                                </tr>
                            </thead>
                            <tbody id="appointmentsTableBody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Warteliste Section -->
        <div class="col-12 mt-4">
            <div class="card">
                <div class="card-header bg-white">
                    <div class="row align-items-center">
                        <div class="col">
                            <h5 class="card-title mb-0">
                                <i class="fas fa-clock me-2"></i>Warteliste
                            </h5>
                        </div>
                        <div class="col-auto">
                            <div class="input-group">
                                <select class="form-select" id="waitingListCourseFilter" style="max-width: 200px;">
                                    <option value="">Alle Kurse</option>
                                    {% for availability in availabilities %}
                                        <option value="{{ availability.id }}">{{ availability.name }}</option>
                                    {% endfor %}
                                </select>
                                <select class="form-select" id="waitingListStatusFilter" style="max-width: 150px;">
                                    <option value="">Alle Status</option>
                                    <option value="notified">Benachrichtigt</option>
                                    <option value="pending">Ausstehend</option>
                                </select>
                                <input type="text" class="form-control" id="waitingListSearchFilter" placeholder="Suchen...">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <!-- Warteliste Tabelle -->
                        <table class="table table-hover" id="waitingListTable">
                            <thead>
                                <tr>
                                    <th>Kurs</th>
                                    <th>Kunde</th>
                                    <th>Kontakt</th>
                                    <th>Erstellt</th>
                                    <th>Status</th>
                                    <th>Aktionen</th>
                                </tr>
                            </thead>
                            <tbody id="waitingListTableBody">
                                <tr>
                                    <td colspan="6" class="text-center">Lade Warteliste...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12">
        <div class="card">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">
                    <i class="fas fa-chalkboard-teacher me-2"></i>Aktive Kurse & freie Plätze
                </h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <!-- Aktive Kurse Tabelle -->
                    <table class="table table-hover" id="activeCoursesTable">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Typ</th>
                                <th>Standort</th>
                                <th>Max. Plätze</th>
                                <th>Belegt</th>
                                <th>Frei</th>
                                <th>Aktionen</th>
                            </tr>
                        </thead>
                        <tbody id="activeCoursesTableBody">
                            <tr><td colspan="7" class="text-center">Lade Kurse...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Termin Bearbeiten Modal -->
<div class="modal fade" id="appointmentModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit me-2"></i>Termin bearbeiten
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="appointmentForm">
                    <input type="hidden" id="appointmentId">
                    <input type="hidden" id="appointmentBookingToken">
                    
                    <!-- Kursinformationen -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2">Kursinformationen</h6>
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label">Kursname</label>
                                <input type="text" class="form-control" id="courseName" readonly>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Kurstage</label>
                                <input type="text" class="form-control" id="courseDays" readonly>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Standort</label>
                                <select class="form-select" id="appointmentLocation" required>
                                    {% for location in locations %}
                                        <option value="{{ location.id }}">{{ location.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Kundeninformationen -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2">Kundeninformationen</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Vorname</label>
                                <input type="text" class="form-control" id="customerFirstName">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Nachname</label>
                                <input type="text" class="form-control" id="customerLastName">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">E-Mail</label>
                                <input type="email" class="form-control" id="customerEmail">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Telefon</label>
                                <input type="tel" class="form-control" id="customerPhone">
                            </div>
                        </div>
                    </div>

                    <!-- Zusatzfelder -->
                    <div class="mb-4" id="appointmentExtraFields" style="display: none;">
                        <h6 class="border-bottom pb-2">Zusatzfelder</h6>
                        <div id="appointmentExtraFieldsContainer">
                            <!-- Wird dynamisch befüllt -->
                        </div>
                    </div>

                    <!-- Status und Notizen -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2">Status und Notizen</h6>
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label for="appointmentStatus" class="form-label">Status</label>
                                <select class="form-select" id="appointmentStatus" name="status">
                                    <option value="pending">Ausstehend</option>
                                    <option value="confirmed">Bestätigt</option>
                                    <option value="cancelled">Storniert</option>
                                </select>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">Notizen</label>
                                <textarea class="form-control" id="appointmentNotes" rows="3"></textarea>
                            </div>
                        </div>
                    </div>

                    <!-- Aktionen -->
                    <div class="mt-4">
                        <h6 class="border-bottom pb-2">Aktionen</h6>
                        <div class="d-flex gap-2">
                            <button type="button" class="btn btn-primary" id="saveAppointment">
                                <i class="fas fa-save me-1"></i>Speichern
                            </button>
                            <button type="button" class="btn btn-warning" id="rescheduleAppointment">
                                <i class="fas fa-calendar-alt me-1"></i>Umbuchen
                            </button>
                            <button type="button" class="btn btn-danger" id="cancelAppointment">
                                <i class="fas fa-times me-1"></i>Abmelden
                            </button>
                            <button type="button" class="btn btn-info" id="sendEmail">
                                <i class="fas fa-envelope me-1"></i>E-Mail senden
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- E-Mail Modal -->
<div class="modal fade" id="emailModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-envelope me-2"></i>E-Mail senden
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="emailForm">
                    <div class="mb-3">
                        <label class="form-label">Betreff</label>
                        <input type="text" class="form-control" id="emailSubject" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nachricht</label>
                        <textarea class="form-control" id="emailMessage" rows="5" required></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" id="sendEmailButton">
                    <i class="fas fa-paper-plane me-1"></i>Senden
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Kurse Verwalten Modal -->
<div class="modal fade" id="availabilityModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-calendar-alt me-2"></i>Kurse verwalten
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Button zum Anlegen eines neuen Kurses -->
                <div class="d-flex justify-content-end mb-3">
                  <button class="btn btn-primary" id="showCreateCourseForm">
                    <i class="fas fa-plus"></i> Neuen Kurs anlegen
                  </button>
                </div>
                <!-- Bestehende Kurse -->
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <h6 class="mb-0">
                            <i class="fas fa-list me-2"></i>Bestehende Kurse
                        </h6>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover" id="availabilitiesTable">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Typ</th>
                                        <th>Wochentage</th>
                                        <th>Zeiten</th>
                                        <th>Standort</th>
                                        <th>Status</th>
                                        <th>Aktionen</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for availability in availabilities %}
                                    <tr>
                                        <td>{{ availability.name ?? '-' }}</td>
                                        <td>
                                            {% if availability.type == 'recurring_course' %}
                                                <span class="badge bg-primary">Dauerhafter Kurs</span>
                                            {% elseif availability.type == 'limited_course' %}
                                                <span class="badge bg-info">Zeitlich begrenzter Kurs</span>
                                            {% elseif availability.type == 'holiday_course' %}
                                                <span class="badge bg-warning">Ferienkurs</span>
                                            {% else %}
                                                <span class="badge bg-secondary">{{ availability.type }}</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% set dayNames = {
                                                1: 'Mo',
                                                2: 'Di',
                                                3: 'Mi',
                                                4: 'Do',
                                                5: 'Fr',
                                                6: 'Sa',
                                                7: 'So'
                                            } %}
                                            {% for day in availability.daysOfWeek %}
                                                <span class="badge bg-light text-dark">{{ dayNames[day] }}</span>
                                            {% endfor %}
                                        </td>
                                        <td>
                                            {% if availability.type == 'limited_course'  or availability.type == 'holiday_course'%}
                                                <span class="badge text-dark">Individuelle Zeiten pro Tag</span>
                                            {% else %}
                                                {{ availability.startTime|date('H:i') }} - {{ availability.endTime|date('H:i') }}
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if availability.location %}
                                                <span class="badge bg-light text-dark">
                                                    <i class="fas fa-map-marker-alt me-1"></i>{{ availability.location.name }}
                                                </span>
                                            {% else %}
                                                <span class="badge bg-danger">Kein Standort</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="badge bg-{{ availability.isAvailable ? 'success' : 'danger' }}">
                                                {{ availability.isAvailable ? 'Verfügbar' : 'Nicht verfügbar' }}
                                            </span>
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button class="btn btn-sm btn-primary" onclick="editAvailability({{ availability.id }})">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <button class="btn btn-sm btn-danger" onclick="deleteAvailability({{ availability.id }})">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Kurs Formular (standardmäßig ausgeblendet) -->
                <form id="availabilityForm" class="needs-validation" novalidate style="display:none;">
                    <input type="hidden" name="id" id="availabilityId">
                    
                    <!-- Grundlegende Informationen -->
                    <div class="card mb-4">
                        <div class="card-header bg-white">
                            <h6 class="mb-0">
                                <i class="fas fa-info-circle me-2"></i>Grundlegende Informationen
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-12">
                                    <label class="form-label">
                                        <i class="fas fa-font me-1"></i>Name des Kurses
                                    </label>
                                    <input type="text" class="form-control" name="name" id="courseName" required 
                                           placeholder="z.B. Yoga für Anfänger, Schwimmkurs, etc.">
                                </div>
                        <div class="col-md-6">
                                    <label class="form-label">
                                        <i class="fas fa-tag me-1"></i>Typ
                                    </label>
                                    <select class="form-select" name="type" id="availabilityType" required>
                                        <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>
                        </div>
                        <div class="col-md-6">
                                    <label class="form-label">
                                        <i class="fas fa-map-marker-alt me-1"></i>Standort
                                    </label>
                                    <select id="location" name="location" class="form-select" required>
                                        <option value="">Bitte wählen...</option>
                                        {% for location in locations %}
                                            <option value="{{ location.id }}">
                                                {{ location.name }}{% if location.address %} ({{ location.address }}){% endif %}
                                            </option>
                                        {% endfor %}
                                    </select>
                        </div>
                                <div class="col-md-12">
                                    <label class="form-label">
                                        <i class="fas fa-users me-1"></i>Maximale Teilnehmer
                                    </label>
                                    <input type="number" class="form-control" id="maxSlots" name="maxSlots" min="1" value="1" required>
                                </div>
                    </div>
                        </div>
                    </div>

                    <!-- Zeitplan -->
                    <div class="card mb-4">
                        <div class="card-header bg-white">
                            <h6 class="mb-0">
                                <i class="fas fa-clock me-2"></i>Zeitplan
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6" id="generalTimeFields">
                            <label class="form-label">Startzeit</label>
                                    <input type="time" class="form-control" id="generalStartTime" name="startTime">
                        </div>
                                <div class="col-md-6" id="generalTimeFields">
                            <label class="form-label">Endzeit</label>
                                    <input type="time" class="form-control" id="generalEndTime" name="endTime">
                        </div>
                        <div class="col-md-4">
                                    <label class="form-label">
                                        <i class="fas fa-hourglass-half me-1"></i>Termin-Dauer (Minuten)
                                    </label>
                            <input type="number" class="form-control" name="slotDuration" value="30" min="15" step="15" required>
                        </div>
                        <div class="col-md-4">
                                    <label class="form-label">
                                        <i class="fas fa-hourglass me-1"></i>Pufferzeit (Minuten)
                                    </label>
                            <input type="number" class="form-control" name="bufferTime" value="0" min="0" step="5">
                        </div>
                    </div>
                        </div>
                    </div>

                    <!-- Kurs-spezifische Felder -->
                    <div id="courseFields" class="card mb-4" style="display: none;">
                        <div class="card-header bg-white">
                            <h6 class="mb-0">
                                <i class="fas fa-graduation-cap me-2"></i>Kurs-Details
                            </h6>
                        </div>
                        <div class="card-body">
                            <input type="hidden" name="numberOfSessions" value="1">
                            <input type="hidden" name="sessionDuration" value="60">
                            <div class="row g-3" id="dateRangeFields">
                                <div class="col-md-6">
                                    <label class="form-label">
                                        <i class="fas fa-calendar-plus me-1"></i>Startdatum
                                    </label>
                                    <input type="date" class="form-control" name="startDate" id="startDate">
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">
                                        <i class="fas fa-calendar-minus me-1"></i>Enddatum
                                    </label>
                                    <input type="date" class="form-control" name="endDate" id="endDate">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Wochentage -->
                    <div class="card mb-4">
                        <div class="card-header bg-white">
                            <h6 class="mb-0">
                                <i class="fas fa-calendar-week me-2"></i>Wochentage
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-12">
                                    <label class="form-label">
                                        <i class="fas fa-calendar-day me-1"></i>Wochentage
                                    </label>
                                    <select class="form-select" id="daysOfWeek" name="daysOfWeek[]" multiple required>
                                <option value="1">Montag</option>
                                <option value="2">Dienstag</option>
                                <option value="3">Mittwoch</option>
                                <option value="4">Donnerstag</option>
                                <option value="5">Freitag</option>
                                <option value="6">Samstag</option>
                                <option value="7">Sonntag</option>
                            </select>
                    </div>
                            </div>

                            <div id="dayTimesContainer" class="mt-4" style="display: none;">
                                <h6 class="mb-3">
                                    <i class="fas fa-clock me-2"></i>Zeiten pro Wochentag
                                </h6>
                                <div id="dayTimes" class="row g-3">
                                    <!-- Wird dynamisch befüllt -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Verfügbarkeit -->
                    <div class="card mb-4">
                        <div class="card-body">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="isAvailable" id="isAvailable" checked>
                            <label class="form-check-label" for="isAvailable">
                                    <i class="fas fa-toggle-on me-1"></i>Dieser Kurs ist verfügbar
                            </label>
                            </div>
                        </div>
                    </div>

                    <div class="card mb-4">
                        <div class="card-header bg-white">
                            <h6 class="mb-0">
                                <i class="fas fa-plus me-2"></i>Zusatzfelder für das Buchungsformular
                            </h6>
                        </div>
                        <div class="card-body" id="extraFieldsContainer">
                            <div id="extraFieldsList"></div>
                            <button type="button" class="btn btn-sm btn-outline-primary mt-2" onclick="addExtraField()">
                                <i class="fas fa-plus"></i> Feld hinzufügen
                            </button>
                        </div>
                    </div>

                    <script>
                    let extraFields = [];

                    function renderExtraFields() {
                        const list = document.getElementById('extraFieldsList');
                        list.innerHTML = '';
                        extraFields.forEach((field, idx) => {
                            const row = document.createElement('div');
                            row.className = 'row align-items-center mb-2';
                            row.innerHTML = `
                                <div class="col-md-4">
                                    <input type="text" class="form-control" placeholder="Beschriftung" value="${field.label || ''}" onchange="updateExtraFieldLabel(${idx}, this.value)">
                                </div>
                                <div class="col-md-2">
                                    <select class="form-select" onchange="updateExtraFieldType(${idx}, this.value)">
                                        <option value="text" ${field.type === 'text' ? 'selected' : ''}>Textfeld</option>
                                        <option value="checkbox" ${field.type === 'checkbox' ? 'selected' : ''}>Checkbox</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="required_${idx}" ${field.required === true ? 'checked' : ''} onchange="updateExtraFieldRequired(${idx}, this.checked)">
                                        <label class="form-check-label" for="required_${idx}">
                                            Verpflichtend
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <button type="button" class="btn btn-sm btn-danger" onclick="removeExtraField(${idx})"><i class="fas fa-trash"></i></button>
                                </div>
                            `;
                            list.appendChild(row);
                        });
                    }

                    function addExtraField() {
                        extraFields.push({ label: '', type: 'text', required: false });
                        renderExtraFields();
                    }
                    function removeExtraField(idx) {
                        extraFields.splice(idx, 1);
                        renderExtraFields();
                    }
                    function updateExtraFieldLabel(idx, value) {
                        extraFields[idx].label = value;
                    }
                    function updateExtraFieldType(idx, value) {
                        extraFields[idx].type = value;
                    }
                    function updateExtraFieldRequired(idx, value) {
                        extraFields[idx].required = value;
                    }

                    // Beim Laden: Wenn Daten vorhanden, initialisiere extraFields
                    document.addEventListener('DOMContentLoaded', function() {
                        const hidden = document.getElementById('extraFieldsHidden');
                        if (hidden && hidden.value) {
                            try { extraFields = JSON.parse(hidden.value); } catch(e) { extraFields = []; }
                            renderExtraFields();
                        }
                    });

                    // Entferne den separaten Event-Listener - wird im Haupt-Event-Listener integriert
                    </script>
                    <input type="hidden" id="extraFieldsHidden" name="extraFields">
                </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-primary" id="saveAvailability">
                    <i class="fas fa-save me-2"></i>Speichern
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Standorte Verwalten Modal -->
<div class="modal fade" id="locationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-map-marker-alt me-2"></i>Standorte verwalten
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Bestehende Standorte -->
                <div class="table-responsive mb-4">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Adresse</th>
                                <th>Kontakt</th>
                                <th>Aktionen</th>
                            </tr>
                        </thead>
                        <tbody id="locationsTableBody">
                            {% for location in locations %}
                            <tr>
                                <td>
                                    <strong>{{ location.name }}</strong>
                                    {% if location.description %}
                                        <br><small class="text-muted">{{ location.description }}</small>
                                    {% endif %}
                                </td>
                                <td>
                                    {{ location.address }}<br>
                                    {{ location.postalCode }} {{ location.city }}
                                </td>
                                <td>
                                    {% if location.phone %}
                                        <i class="fas fa-phone me-1"></i>{{ location.phone }}<br>
                                    {% endif %}
                                    {% if location.email %}
                                        <i class="fas fa-envelope me-1"></i>{{ location.email }}
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group">
                                        <button class="btn btn-sm btn-primary" onclick="editLocation({{ location.id }})">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-sm btn-danger" onclick="deleteLocation({{ location.id }})">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <!-- Standort Formular -->
                <form id="locationForm">
                    <input type="hidden" id="locationId">
                    <div class="row g-3">
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-building me-1"></i>Name
                            </label>
                            <input type="text" class="form-control" id="locationName" required>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-map-marker-alt me-1"></i>Adresse
                            </label>
                            <input type="text" class="form-control" id="locationAddress" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-city me-1"></i>Stadt
                            </label>
                            <input type="text" class="form-control" id="locationCity" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-mail-bulk me-1"></i>PLZ
                            </label>
                            <input type="text" class="form-control" id="locationZip" required>
                    </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-info-circle me-1"></i>Beschreibung
                            </label>
                            <textarea class="form-control" id="locationDescription" rows="3"></textarea>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-phone me-1"></i>Telefon
                            </label>
                            <input type="tel" class="form-control" id="locationPhone">
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-envelope me-1"></i>E-Mail
                            </label>
                            <input type="email" class="form-control" id="locationEmail">
                        </div>
                        <div class="col-md-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="locationIsActive" checked>
                                <label class="form-check-label" for="locationIsActive">
                                    <i class="fas fa-toggle-on me-1"></i>Standort ist aktiv
                                </label>
                            </div>
                        </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-primary" id="saveLocation">
                    <i class="fas fa-save me-2"></i>Speichern
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Alert Modal -->
<div class="modal fade" id="alertModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Hinweis</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="alertMessage"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

<!-- E-Mail Templates Modal -->
<div class="modal fade" id="emailTemplateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-envelope me-2"></i>E-Mail Templates verwalten
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Bestehende Templates -->
                <div class="table-responsive mb-4">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Betreff</th>
                                <th>Typ</th>
                                <th>Zugeordnete Kurse</th>
                                <th>Status</th>
                                <th>Aktionen</th>
                            </tr>
                        </thead>
                        <tbody id="emailTemplatesTableBody">
                            <!-- Wird dynamisch befüllt -->
                        </tbody>
                    </table>
                </div>

                <!-- Template Formular -->
                <form id="emailTemplateForm">
                    <input type="hidden" id="templateId">
                    <div class="row g-3">
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-font me-1"></i>Name des Templates
                            </label>
                            <input type="text" class="form-control" id="templateName" required>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-heading me-1"></i>Betreff
                            </label>
                            <input type="text" class="form-control" id="templateSubject" required>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-tag me-1"></i>Typ
                            </label>
                            <select class="form-select" id="templateType" required>
                                <option value="booking_confirmation">Buchungsbestätigung</option>
                                <option value="booking_validation">Buchungsvalidierung</option>
                                <option value="payment">Zahlung</option>
                                <option value="booking_change">Buchung umbuchen</option>
                                <option value="cancellation">Abmeldung/Stornierung</option>
                                <option value="waitlist">Warteliste</option>
                                <option value="reminder">Erinnerung</option>
                                <option value="booking_position">Positionsmail</option>
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-file-alt me-1"></i>Inhalt
                            </label>
                            <div class="d-flex gap-2 mb-2">
                                <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target="#placeholderInfo">
                                    <i class="fas fa-info-circle me-1"></i>Verfügbare Platzhalter
                                </button>
                                <button class="btn btn-sm btn-outline-secondary" type="button" id="previewTemplate">
                                    <i class="fas fa-eye me-1"></i>Vorschau
                                </button>
                            </div>
                            <div class="collapse" id="placeholderInfo">
                                <div class="card mb-3">
                                    <div class="card-body">
                                        <h6 class="card-title">Verfügbare Platzhalter:</h6>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <ul class="list-unstyled">
                                                    <li><code>[[Name]]</code> - Vollständiger Name</li>
                                                    <li><code>[[Vorname]]</code> - Vorname</li>
                                                    <li><code>[[Nachname]]</code> - Nachname</li>
                                                    <li><code>[[Email]]</code> - E-Mail-Adresse</li>
                                                    <li><code>[[Telefon]]</code> - Telefonnummer</li>
                                                    <li><code>[[Datum]]</code> - Termindatum</li>
                                                    <li><code>[[Zeit]]</code> - Terminzeit</li>
                                                    <li><code>[[Dauer]]</code> - Termindauer</li>
                                                </ul>
                                            </div>
                                            <div class="col-md-6">
                                                <ul class="list-unstyled">
                                                    <li><code>[[Kurs]]</code> - Kursname</li>
                                                    <li><code>[[KursTyp]]</code> - Kurstyp</li>
                                                    <li><code>[[Ort]]</code> - Kursort</li>
                                                    <li><code>[[Adresse]]</code> - Vollständige Adresse</li>
                                                    <li><code>[[PLZ]]</code> - Postleitzahl</li>
                                                    <li><code>[[Stadt]]</code> - Stadt</li>
                                                    <li><code>[[Anfahrt]]</code> - Anfahrtsskizze</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="mt-3">
                                            <h6>Spezielle Platzhalter:</h6>
                                            <ul class="list-unstyled">
                                                <li><code>[[QRCode]]</code> - QR-Code für den Termin</li>
                                                <li><code>[[TerminLink]]</code> - Link zum Termin</li>
                                                <li><code>[[KalenderLink]]</code> - Link zum Kalender-Eintrag</li>
                                                <li><code>[[StornierungsLink]]</code> - Link zur Stornierung</li>
                                                <li><code>[[BuchungsID]]</code> - Eindeutige Buchungsnummer</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                           
                            {% include 'email_template/editor.html.twig' %}
                        </div>
                        <div class="col-md-12">
                            <div class="collapse" id="previewCollapse">
                                <div class="card mt-3">
                                    <div class="card-header bg-white">
                                        <h6 class="mb-0">
                                            <i class="fas fa-eye me-2"></i>E-Mail Vorschau
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="email-preview">
                                            <div class="email-header">
                                                <div class="email-subject" id="previewSubject"></div>
                                            </div>
                                            <div class="email-content" id="previewContent"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-graduation-cap me-1"></i>Zugeordnete Kurse
                            </label>
                            <select class="form-select" id="templateCourses" multiple>
                                {% for availability in availabilities %}
                                    <option value="{{ availability.id }}">{{ availability.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                        <div class="col-md-12">
                        <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="templateIsActive" checked>
                                <label class="form-check-label" for="templateIsActive">
                                    <i class="fas fa-toggle-on me-1"></i>Template ist aktiv
                            </label>
                            </div>
                        </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-primary" id="saveTemplate">
                    <i class="fas fa-save me-2"></i>Speichern
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Warteliste Benachrichtigung Modal -->
<div class="modal fade" id="waitingListNotifyModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-bell me-2"></i>Warteliste Benachrichtigung
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="waitingListNotifyForm">
                    <input type="hidden" id="waitingListId">
                    <div class="row g-3">
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-envelope me-1"></i>E-Mail Template
                            </label>
                            <select class="form-select" id="waitingListEmailTemplate" required>
                                <option value="">Template auswählen...</option>
                                <!-- Wird dynamisch befüllt -->
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-comment me-1"></i>Zusätzliche Nachricht
                            </label>
                            <textarea class="form-control" id="waitingListAdditionalMessage" 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-primary" id="sendWaitingListNotification">
                    <i class="fas fa-paper-plane me-2"></i>Benachrichtigung senden
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Manuelle Terminerstellung Modal -->
<div class="modal fade" id="createAppointmentModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-plus me-2"></i>Termin manuell erstellen
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="createAppointmentForm">
                    <!-- Standort und Kursauswahl -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2">Kursauswahl</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Standort</label>
                                <select class="form-select" id="createAppointmentLocation" required>
                                    <option value="">Standort auswählen...</option>
                                    {% for location in locations %}
                                        <option value="{{ location.id }}">{{ location.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Kurs</label>
                                <select class="form-select" id="createAppointmentCourse" required disabled>
                                    <option value="">Zuerst Standort auswählen...</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Termindetails -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2">Termindetails</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Datum</label>
                                <input type="date" class="form-control" id="createAppointmentDate" required>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Startzeit</label>
                                <input type="time" class="form-control" id="createAppointmentStartTime" required>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Endzeit</label>
                                <input type="time" class="form-control" id="createAppointmentEndTime" required>
                            </div>
                        </div>
                        <div id="blockTermineInfo" style="display:none; margin-top:1em;"></div>
                    </div>

                    <!-- Kundendaten -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2">Kundendaten</h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Vorname *</label>
                                <input type="text" class="form-control" id="createAppointmentFirstName" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Nachname *</label>
                                <input type="text" class="form-control" id="createAppointmentLastName" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">E-Mail *</label>
                                <input type="email" class="form-control" id="createAppointmentEmail" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Telefon</label>
                                <input type="tel" class="form-control" id="createAppointmentPhone">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Geburtsdatum</label>
                                <input type="date" class="form-control" id="createAppointmentBirthDate">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Status</label>
                                <select class="form-select" id="createAppointmentStatus">
                                    <option value="confirmed">Bestätigt</option>
                                    <option value="pending">Ausstehend</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Zusatzfelder -->
                    <div class="mb-4" id="createAppointmentExtraFields" style="display: none;">
                        <h6 class="border-bottom pb-2">Zusatzfelder</h6>
                        <div id="createAppointmentExtraFieldsContainer">
                            <!-- Wird dynamisch befüllt -->
                        </div>
                    </div>

                    <!-- Notizen -->
                    <div class="mb-4">
                        <h6 class="border-bottom pb-2">Notizen</h6>
                        <div class="row g-3">
                            <div class="col-md-12">
                                <label class="form-label">Anmerkungen</label>
                                <textarea class="form-control" id="createAppointmentNotes" rows="3"></textarea>
                            </div>
                        </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-primary" id="saveCreateAppointment" onclick="
                    console.log('Button geklickt!');
                    const form = document.getElementById('createAppointmentForm');
                    if (!form) {
                        console.error('Formular nicht gefunden!');
                        return;
                    }
                    
                    // Prüfe ob Blocktermine vorhanden sind
                    const blockInfoDiv = document.getElementById('blockTermineInfo');
                    const hasBlockTermine = blockInfoDiv && blockInfoDiv.style.display !== 'none';
                    
                    // Validiere nur wenn keine Blocktermine vorhanden sind
                    if (!hasBlockTermine) {
                        const dateInput = document.getElementById('createAppointmentDate');
                        const startTimeInput = document.getElementById('createAppointmentStartTime');
                        const endTimeInput = document.getElementById('createAppointmentEndTime');
                        
                        if (!dateInput.value || !startTimeInput.value || !endTimeInput.value) {
                            alert('Bitte füllen Sie alle Pflichtfelder aus (Datum, Startzeit, Endzeit).');
                            return;
                        }
                    }
                    
                    const formData = new FormData();
                    formData.append('locationId', document.getElementById('createAppointmentLocation').value);
                    formData.append('courseId', document.getElementById('createAppointmentCourse').value);
                    formData.append('date', document.getElementById('createAppointmentDate').value);
                    formData.append('startTime', document.getElementById('createAppointmentStartTime').value);
                    formData.append('endTime', document.getElementById('createAppointmentEndTime').value);
                    formData.append('firstName', document.getElementById('createAppointmentFirstName').value);
                    formData.append('lastName', document.getElementById('createAppointmentLastName').value);
                    formData.append('email', document.getElementById('createAppointmentEmail').value);
                    formData.append('phone', document.getElementById('createAppointmentPhone').value);
                    formData.append('birthDate', document.getElementById('createAppointmentBirthDate').value);
                    formData.append('status', document.getElementById('createAppointmentStatus').value);
                    formData.append('notes', document.getElementById('createAppointmentNotes').value);
                    
                    fetch('{{ path('appointment_create_admin') }}', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => {
                        console.log('Response Status:', response.status);
                        return response.json();
                    })
                    .then(data => {
                        console.log('Response Data:', data);
                        if (data.success) {
                            const modal = bootstrap.Modal.getInstance(document.getElementById('createAppointmentModal'));
                            if (modal) {
                                modal.hide();
                            }
                            alert('Termin erfolgreich erstellt!');
                            location.reload();
                        } else {
                            alert('Fehler beim Erstellen des Termins: ' + (data.message || 'Unbekannter Fehler'));
                        }
                    })
                    .catch(error => {
                        console.error('Fehler beim Erstellen des Termins:', error);
                        alert('Fehler beim Erstellen des Termins: ' + error.message);
                    });
                ">
                    <i class="fas fa-save me-2"></i>Termin erstellen
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Teilnehmerliste Modal -->
<div class="modal fade" id="participantsModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-users me-2"></i>Teilnehmerliste
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="participantsInfo"></div>
                <div class="table-responsive">
                    <table class="table table-hover table-sm align-middle" id="participantsTable">
                        <thead class="table-light sticky-top">
                            <tr>
                                <th>Vorname</th>
                                <th>Nachname</th>
                                <th>E-Mail</th>
                                <th>Telefon</th>
                                <th>Check-in</th>
                                <th>Anmerkungen</th>
                                <th id="extraFieldsHeader" style="display: none;">Zusatzfelder</th>
                                <th>Aktionen</th>
                            </tr>
                        </thead>
                        <tbody id="participantsTableBody">
                            <tr><td colspan="8" class="text-center">Lade Teilnehmer...</td></tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <a id="downloadExcelBtn" href="#" class="btn btn-success" target="_blank">
                    <i class="fas fa-file-excel me-2"></i>Als Excel herunterladen
                </a>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="closeParticipantsModal">
                    <i class="fas fa-times me-2"></i>Schließen
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
// Globale Hilfsfunktion für Kurstypen
function getTypeName(type) {
    switch(type) {
        case 'recurring_course': return 'Dauerhafter Kurs';
        case 'limited_course': return 'Zeitlich begrenzter Kurs';
        case 'holiday_course': return 'Ferienkurs';
        case 'event': return 'Einmaliges Event';
        default: return type;
    }
}

document.addEventListener('DOMContentLoaded', function() {
    // Load statistics
    function loadStatistics() {
        const date = document.getElementById('dateFilter').value;
        const status = document.getElementById('statusFilter').value;
        const location = document.getElementById('locationFilter').value;
        const search = document.getElementById('searchFilter').value;

        const params = new URLSearchParams({ 
            date, 
            status, 
            location,
            search
        });

        fetch(`{{ path('appointment_admin_list') }}?${params}`)
            .then(response => response.json())
            .then(data => {
                if (!data.appointments) return;

                // Count today's appointments
                const today = new Date().toISOString().split('T')[0];
                const todayAppointments = data.appointments.filter(appointment => 
                    appointment.startTime.startsWith(today)
                ).length;

                // Count cancelled appointments
                const cancelledAppointments = data.appointments.filter(appointment => 
                    appointment.status === 'cancelled'
                ).length;

                // Update the DOM
                document.getElementById('todayAppointments').textContent = todayAppointments;
                document.getElementById('cancelledCount').textContent = cancelledAppointments;
            })
            .catch(error => {
                console.error('Error loading appointment statistics:', error);
            });
    }

    // Load waiting list count
    function loadWaitingListCount() {
        fetch('{{ path('app_waiting_list_admin_count') }}')
            .then(response => response.json())
            .then(data => {
                if (data.count !== undefined) {
                    document.getElementById('waitingListCount').textContent = data.count;
                }
            })
            .catch(error => {
                console.error('Error loading waiting list count:', error);
            });
    }

    // Load availabilities for course count
    function loadAvailabilityStats() {
        fetch('{{ path('appointment_admin_availability_list') }}')
            .then(response => response.json())
            .then(data => {
                if (!data.availabilities) return;

                // Count active courses
                const activeCourses = data.availabilities.filter(availability => 
                    availability.isAvailable
                ).length;

                // Update the DOM
                document.getElementById('activeCourses').textContent = activeCourses;
            })
            .catch(error => {
                console.error('Error loading availability statistics:', error);
            });
    }

    // Load locations for location count
    function loadLocationStats() {
        fetch('{{ path('appointment_admin_location_list') }}')
            .then(response => response.json())
            .then(data => {
                if (!data.locations) return;

                // Count available locations
                const availableLocations = data.locations.filter(location => 
                    location.isActive
                ).length;

                // Update the DOM
                document.getElementById('availableLocations').textContent = availableLocations;
            })
            .catch(error => {
                console.error('Error loading location statistics:', error);
            });
    }

    // Clear filters function
    function clearFilters() {
        document.getElementById('dateFilter').value = '';
        document.getElementById('statusFilter').value = '';
        document.getElementById('locationFilter').value = '';
        document.getElementById('searchFilter').value = '';
        loadAppointments();
    }

    // Load appointments
    function loadAppointments() {
        const date = document.getElementById('dateFilter').value;
        const status = document.getElementById('statusFilter').value;
        const location = document.getElementById('locationFilter').value;
        const search = document.getElementById('searchFilter').value;

        console.log('Filter-Werte:', { date, status, location, search }); // Debug

        const params = new URLSearchParams({ 
            date, 
            status, 
            location,
            search
        });
        const url = `{{ path('appointment_admin_list') }}?${params.toString()}`;

        console.log('Request URL:', url); // Debug

        // Show loading state
        const tbody = document.getElementById('appointmentsTableBody');
        if (!tbody) {
            console.error('Appointments table body not found');
            return;
        }

        tbody.innerHTML = '<tr><td colspan="7" class="text-center">Lade Termine...</td></tr>';

        fetch(url)
            .then(response => response.json())
            .then(data => {
                console.log('Received appointments:', data); // Debug output
                // DataTable vor dem Einfügen zerstören
                if ($.fn.DataTable.isDataTable('#bookedAppointmentsTable')) {
                    $('#bookedAppointmentsTable').DataTable().destroy();
                }
                tbody.innerHTML = '';
                data.appointments.forEach(appointment => {
                    const tr = document.createElement('tr');
                    const courseInfo = appointment.course ? `${appointment.course.name} ${formatCourseDays(appointment.course)}` : 'Kein Kurs';
                    
                    // Status Badge
                    let statusBadge = '';
                    switch(appointment.status) {
                        case 'pending':
                            statusBadge = '<span class="badge bg-warning">Ausstehend</span>';
                            break;
                        case 'confirmed':
                        case 'verified':
                            statusBadge = '<span class="badge bg-success">Bestätigt</span>';
                            break;
                        case 'cancelled':
                            statusBadge = '<span class="badge bg-danger">Storniert</span>';
                            break;
                        case 'rescheduled':
                            statusBadge = '<span class="badge bg-warning">Neu terminiert</span>';
                            break;
                        default:
                            statusBadge = '<span class="badge bg-secondary">Unbekannt</span>';
                    }
                    
                    tr.innerHTML = `
                        <td>${courseInfo}</td>
                        <td>${appointment.location ? appointment.location.name : 'Kein Standort'}</td>
                        <td>${appointment.customer.firstName} ${appointment.customer.lastName}</td>
                        <td>${appointment.customer.email}</td>
                        <td>${appointment.customer.phone || '-'}</td>
                        <td>${statusBadge}</td>
                        <td>
                            <div class="btn-group">
                                <button class="btn btn-sm btn-outline-primary" onclick="viewAppointment(${appointment.id})">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-sm btn-outline-danger" onclick="deleteAppointment(${appointment.id})">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    `;
                    tbody.appendChild(tr);
                });
                // DataTable nach dem Einfügen neu initialisieren
                $('#bookedAppointmentsTable').DataTable();
            })
            .catch(error => {
                console.error('Error:', error);
                tbody.innerHTML = '<tr><td colspan="7" class="text-center text-danger">Fehler beim Laden der Termine</td></tr>';
            });
    }

    // Format date and time
    function formatDateTime(dateTimeStr) {
        const date = new Date(dateTimeStr);
        return date.toLocaleDateString('de-DE', {
            weekday: 'short',
            day: '2-digit',
            month: '2-digit',
            year: 'numeric',
            hour: '2-digit',
            minute: '2-digit'
        });
    }

    // Load availabilities
    function loadAvailabilities() {
        const tbody = document.getElementById('availabilitiesTable');
        if (!tbody) {
            console.error('Availabilities table body not found');
            return;
        }
        tbody.innerHTML = '<tr><td colspan="7" class="text-center">Lade Kurse...</td></tr>';
        fetch('{{ path('appointment_admin_availability_list') }}')
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                if (!tbody) {
                    console.error('Availabilities table body not found after fetch');
                    return;
                }
                tbody.innerHTML = '';
                if (!data.availabilities || data.availabilities.length === 0) {
                    const tr = document.createElement('tr');
                    tr.innerHTML = '<td colspan="7" class="text-center">Keine Kurse gefunden</td>';
                    tbody.appendChild(tr);
                    return;
                }
                data.availabilities.forEach(availability => {
                    const tr = document.createElement('tr');
                    
                    const startTimeStr = availability.startTime.split(' ')[1] || availability.startTime;
                    const endTimeStr = availability.endTime.split(' ')[1] || availability.endTime;
                    const daysStr = availability.daysOfWeek.map(day => getDayName(day)).join(', ');
                    
                    tr.innerHTML = `
                        <td>${availability.name || '-'}</td>
                        <td>${getTypeName(availability.type)}</td>
                        <td>${daysStr}</td>
                        <td>${startTimeStr} - ${endTimeStr}</td>
                        <td>${availability.location ? availability.location.name : 'Kein Standort'}</td>
                        <td>
                            <span class="badge bg-${availability.isAvailable ? 'success' : 'danger'}">${availability.isAvailable ? 'Verfügbar' : 'Nicht verfügbar'}</span>
                        </td>
                        <td>
                            <button class="btn btn-sm btn-primary" onclick="editAvailability(${availability.id})">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-danger" onclick="deleteAvailability(${availability.id})">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    `;
                    tbody.appendChild(tr);
                });
            })
            .catch(error => {
                console.error('Error loading availabilities:', error);
                if (!tbody) {
                    console.error('Availabilities table body not found after error');
                    return;
                }
                tbody.innerHTML = `
                    <tr>
                        <td colspan="7" class="text-center text-danger">
                            <div class="alert alert-danger">
                                <strong>Fehler beim Laden der Kurse:</strong><br>
                                ${error.message}
                            </div>
                        </td>
                    </tr>
                `;
            });
    }
    
    function getStatusColor(status) {
        switch (status) {
            case 'confirmed': return 'success';
            case 'cancelled': return 'danger';
            case 'rescheduled': return 'warning';
            default: return 'secondary';
        }
    }

    function getDayName(dayOfWeek) {
        const days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'];
        return days[dayOfWeek % 7];
    }

    function getStatusText(status) {
        switch (status) {
            case 'confirmed': return 'Bestätigt';
            case 'cancelled': return 'Storniert';
            case 'rescheduled': return 'Neu terminiert';
            default: return status;
        }
    }

    function getTypeName(type) {
        switch(type) {
            case 'recurring_course': return 'Dauerhafter Kurs';
            case 'limited_course': return 'Zeitlich begrenzter Kurs';
            case 'holiday_course': return 'Ferienkurs';
            case 'event': return 'Einmaliges Event';
            default: return type;
        }
    }
    
    // Filter event listeners
    document.getElementById('dateFilter').addEventListener('change', loadAppointments);
    document.getElementById('statusFilter').addEventListener('change', loadAppointments);
    document.getElementById('locationFilter').addEventListener('change', loadAppointments);
    document.getElementById('searchFilter').addEventListener('input', debounce(loadAppointments, 300));
    
    // Save appointment
    document.getElementById('saveAppointment').addEventListener('click', function() {
        const id = document.getElementById('appointmentId').value;
        const date = document.getElementById('appointmentDate').value;
        const startTime = document.getElementById('appointmentStartTime').value;
        const endTime = document.getElementById('appointmentEndTime').value;
        const status = document.getElementById('appointmentStatus').value;
        const notes = document.getElementById('appointmentNotes').value;
        const location = document.getElementById('appointmentLocation').value;

        const data = {
            startTime: `${date}T${startTime}`,
            endTime: `${date}T${endTime}`,
            status: status,
            notes: notes,
            locationId: location
        };

        fetch(`{{ path('appointment_admin_update', {'id': '__ID__'}) }}`.replace('__ID__', id), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const modal = bootstrap.Modal.getInstance(document.getElementById('appointmentModal'));
                modal.hide();
                // Remove backdrop and modal-open class
                document.querySelector('.modal-backdrop')?.remove();
                document.body.classList.remove('modal-open');
                document.body.style.overflow = '';
                document.body.style.paddingRight = '';
                loadAppointments();
            } else {
                alert('Fehler: ' + data.error);
            }
        })
        .catch(error => {
            alert('Fehler beim Speichern des Termins: ' + error.message);
        });
    });
    
    // Handle availability type changes
    document.getElementById('availabilityType').addEventListener('change', function() {
        const type = this.value;
        const courseFields = document.getElementById('courseFields');
        const dateRangeFields = document.getElementById('dateRangeFields');
        const daysOfWeek = document.getElementById('daysOfWeek');
        
        // Reset visibility
        courseFields.style.display = 'none';
        dateRangeFields.style.display = 'none';
        daysOfWeek.required = false;
        
        // Show/hide relevant fields based on type
        switch(type) {
            case 'recurring_course':
                courseFields.style.display = 'block';
                dateRangeFields.style.display = 'none';
                daysOfWeek.required = true;
                break;
            case 'limited_course':
                courseFields.style.display = 'block';
                dateRangeFields.style.display = 'block';
                daysOfWeek.required = true;
                break;
            case 'holiday_course':
                courseFields.style.display = 'block';
                dateRangeFields.style.display = 'block';
                daysOfWeek.required = false;
                // Automatisch Mo-Fr auswählen
                const holidayDays = [1, 2, 3, 4, 5]; // Mo-Fr
                Array.from(daysOfWeek.options).forEach(option => {
                    option.selected = holidayDays.includes(parseInt(option.value));
                });
                break;
            case 'event':
                courseFields.style.display = 'block';
                dateRangeFields.style.display = 'block';
                daysOfWeek.required = false;
                break;
        }
    });

    // Funktion zum Aktualisieren der Tageszeiten-Felder
    function updateDayTimes() {
        const type = document.getElementById('availabilityType').value;
        const daysOfWeek = Array.from(document.getElementById('daysOfWeek').selectedOptions).map(option => option.value);
        const dayTimesContainer = document.getElementById('dayTimesContainer');
        const dayTimes = document.getElementById('dayTimes');
        const startTimeInput = document.querySelector('input[name="startTime"]');
        const endTimeInput = document.querySelector('input[name="endTime"]');
        const timeFieldsContainer = startTimeInput.closest('.row');

        if (type === 'recurring_course') {
            timeFieldsContainer.style.display = 'block';
            dayTimesContainer.style.display = 'none';
        } else {
            timeFieldsContainer.style.display = 'none';
            dayTimesContainer.style.display = 'block';
            dayTimes.innerHTML = '';

            // Hole die Standardzeiten aus den allgemeinen Zeitfeldern
            const defaultStartTime = padTime(startTimeInput.value) || '09:00';
            const defaultEndTime = padTime(endTimeInput.value) || '10:00';

            daysOfWeek.forEach(day => {
                const dayName = document.getElementById('daysOfWeek').options[day - 1].text;
                const dayDiv = document.createElement('div');
                dayDiv.className = 'mb-3';
                dayDiv.innerHTML = `
                    <h6><i class="fas fa-calendar-day me-2"></i>${dayName}</h6>
                    <div class="row">
                        <div class="col">
                            <label class="form-label"><i class="fas fa-clock me-1"></i>Startzeit</label>
                            <input type="time" class="form-control day-start-time" data-day="${day}" value="${defaultStartTime}" required>
                        </div>
                        <div class="col">
                            <label class="form-label"><i class="fas fa-clock me-1"></i>Endzeit</label>
                            <input type="time" class="form-control day-end-time" data-day="${day}" value="${defaultEndTime}" required>
                        </div>
                    </div>
                `;
                dayTimes.appendChild(dayDiv);
            });
        }
    }

    // Event-Listener für Typ-Änderung
    document.getElementById('availabilityType').addEventListener('change', function() {
        updateDayTimes();
    });

    // Event-Listener für Wochentage-Änderung
    document.getElementById('daysOfWeek').addEventListener('change', function() {
        updateDayTimes();
    });

    // Event-Listener für allgemeine Zeitfelder
    document.querySelector('input[name="startTime"]').addEventListener('change', function() {
        const type = document.getElementById('availabilityType').value;
        if (type === 'limited_course' || type === 'holiday_course') {
            // Aktualisiere alle Tageszeiten-Felder mit der neuen Startzeit
            document.querySelectorAll('.day-start-time').forEach(input => {
                input.value = this.value;
            });
        }
    });

    document.querySelector('input[name="endTime"]').addEventListener('change', function() {
        const type = document.getElementById('availabilityType').value;
        if (type === 'limited_course' || type === 'holiday_course') {
            // Aktualisiere alle Tageszeiten-Felder mit der neuen Endzeit
            document.querySelectorAll('.day-end-time').forEach(input => {
                input.value = this.value;
            });
        }
    });

    // Funktion zum Sammeln der Tageszeiten
    function collectDayTimes() {
        const type = document.getElementById('availabilityType').value;
        if (type !== 'limited_course' && type !== 'holiday_course') {
            return null;
        }

        const dayTimes = {};
        document.querySelectorAll('.day-start-time').forEach(input => {
            const day = input.dataset.day;
            const startTime = input.value;
            const endTime = document.querySelector(`.day-end-time[data-day="${day}"]`).value;
            // Für jeden Tag nur ein Slot: startTime bis endTime
            dayTimes[day] = {
                startTime: startTime,
                endTime: endTime
            };
        });
        return dayTimes;
    }

    // Funktion zum Berechnen der Zeitdifferenz in Minuten
    function getTimeDifferenceInMinutes(startTime, endTime) {
        const start = new Date(`2000-01-01T${startTime}`);
        const end = new Date(`2000-01-01T${endTime}`);
        return (end - start) / (1000 * 60);
    }

    // Funktion zum Anzeigen von Alert-Modals
    function showAlert(message) {
        const alertModal = new bootstrap.Modal(document.getElementById('alertModal'));
        document.getElementById('alertMessage').textContent = message;
        alertModal.show();
    }

    // Anpassung der validateSlotDuration-Funktion
    function validateSlotDuration() {
        const type = document.getElementById('availabilityType').value;
        const slotDuration = parseInt(document.querySelector('input[name="slotDuration"]').value);
        let isValid = true;
        let errorMessage = '';

        if (type === 'recurring_course') {
            const startTime = document.querySelector('input[name="startTime"]').value;
            const endTime = document.querySelector('input[name="endTime"]').value;
            const timeDiff = getTimeDifferenceInMinutes(startTime, endTime);

            if (slotDuration > timeDiff) {
                isValid = false;
                errorMessage = `Die Termin-Dauer (${slotDuration} Minuten) kann nicht länger sein als der Zeitraum (${timeDiff} Minuten)`;
            }
        } else if (type === 'limited_course' || type === 'holiday_course') {
            // Prüfe die Zeiten für jeden ausgewählten Wochentag
            const dayTimes = collectDayTimes();
            if (dayTimes) {
                Object.entries(dayTimes).forEach(([day, times]) => {
                    const timeDiff = getTimeDifferenceInMinutes(times.startTime, times.endTime);
                    if (slotDuration > timeDiff) {
                        isValid = false;
                        const dayName = document.getElementById('daysOfWeek').options[day - 1].text;
                        errorMessage = `Die Termin-Dauer (${slotDuration} Minuten) kann nicht länger sein als der Zeitraum für ${dayName} (${timeDiff} Minuten)`;
                    }
                });
            }
        }

        if (!isValid) {
            showAlert(errorMessage);
            document.querySelector('input[name="slotDuration"]').value = Math.floor(slotDuration / 2);
        }

        return isValid;
    }

    // Event-Listener für die Termin-Dauer
    document.querySelector('input[name="slotDuration"]').addEventListener('change', validateSlotDuration);

    // Anpassung der saveAvailability-Funktion
    document.getElementById('saveAvailability').addEventListener('click', async function(event) {
        event.preventDefault();
        
        const form = document.getElementById('availabilityForm');
        const type = document.getElementById('availabilityType').value;
        
        // Entferne required-Attribute von den allgemeinen Zeitfeldern für zeitlich begrenzte Kurse
        const generalStartTime = document.getElementById('generalStartTime');
        const generalEndTime = document.getElementById('generalEndTime');
        if (type === 'recurring_course') {
            generalStartTime.required = true;
            generalEndTime.required = true;
            // Tageszeiten-Felder nicht required
            document.querySelectorAll('.day-start-time, .day-end-time').forEach(input => input.required = false);
        } else if (type === 'limited_course' || type === 'holiday_course') {
            generalStartTime.required = false;
            generalEndTime.required = false;
            // Tageszeiten-Felder required
            document.querySelectorAll('.day-start-time, .day-end-time').forEach(input => input.required = true);
        } else {
            // Fallback: alles optional
            generalStartTime.required = false;
            generalEndTime.required = false;
            document.querySelectorAll('.day-start-time, .day-end-time').forEach(input => input.required = false);
        }
        
        if (!form.checkValidity()) {
            form.classList.add('was-validated');
            // Debug-Ausgabe: zeige alle invaliden Felder in der Konsole
            const invalids = Array.from(form.elements).filter(el => !el.checkValidity());
            console.warn('Ungültige Felder:', invalids);
            return;
        }
        
        if (!validateSlotDuration()) {
            return;
        }

        // Zusatzfelder (extraFields) in das Hidden-Input schreiben
        document.getElementById('extraFieldsHidden').value = JSON.stringify(extraFields);

        const formData = new FormData(form);
        const data = {
            id: formData.get('id') || null,
            name: formData.get('name'),
            type: formData.get('type'),
            daysOfWeek: Array.from(formData.getAll('daysOfWeek[]')).map(Number),
            startTime: padTime(formData.get('startTime')),
            endTime: padTime(formData.get('endTime')),
            slotDuration: parseInt(formData.get('slotDuration')),
            bufferTime: parseInt(formData.get('bufferTime')),
            maxSlots: parseInt(formData.get('maxSlots')),
            isAvailable: document.getElementById('isAvailable').checked,
            location: formData.get('location'),
            numberOfSessions: 1,
            sessionDuration: 60
        };

        // Zusatzfelder (extraFields) aus dem Hidden-Input übernehmen
        const extraFieldsValue = document.getElementById('extraFieldsHidden').value;
        if (extraFieldsValue) {
            try {
                data.extraFields = JSON.parse(extraFieldsValue);
            } catch (e) {
                data.extraFields = [];
            }
        } else {
            data.extraFields = [];
        }

        // Typ-spezifische Felder
        if (data.type === 'limited_course' || data.type === 'holiday_course' || data.type === 'event') {
            data.startDate = formData.get('startDate');
            data.endDate = formData.get('endDate') || formData.get('startDate');

            // Clientseitige Validierung: Enddatum muss nach Startdatum liegen
            if (data.startDate && data.endDate) {
                const start = new Date(data.startDate);
                const end = new Date(data.endDate);
                if (end < start) {
                    showAlert('Das Enddatum muss nach dem Startdatum liegen.');
                    return;
                }
            }
            if (data.type === 'event' && !data.startDate) {
                showAlert('Für Events ist ein Datum erforderlich.');
                return;
            }
            // Sammle Tageszeiten für Kurs-/Event-Typen
            data.dayTimes = collectDayTimes();
        }

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

            const result = await response.json();
            
            if (result.success) {
                const modal = bootstrap.Modal.getInstance(document.getElementById('availabilityModal'));
                modal.hide();
                document.querySelector('.modal-backdrop')?.remove();
                document.body.classList.remove('modal-open');
                document.body.style.overflow = '';
                document.body.style.paddingRight = '';
                window.location.reload();
            } else {
                console.error('Server response:', result);
                showAlert(result.message || 'Fehler beim Speichern des Kurses');
            }
        } catch (error) {
            console.error('Error:', error);
            showAlert('Fehler beim Speichern des Kurses');
        }
    });

    // Edit availability
    window.editAvailability = function(id) {
        fetch(`{{ path('appointment_admin_availability_get', {'id': '__ID__'}) }}`.replace('__ID__', id))
            .then(response => response.json())
            .then(data => {
                const form = document.getElementById('availabilityForm');
                form.elements['id'].value = data.id;
                form.elements['name'].value = data.name || '';
                form.elements['type'].value = data.type;
                form.elements['startTime'].value = padTime(data.startTime);
                form.elements['endTime'].value = padTime(data.endTime);
                form.elements['slotDuration'].value = data.slotDuration;
                form.elements['bufferTime'].value = data.bufferTime;
                form.elements['maxSlots'].value = data.maxSlots;
                form.elements['isAvailable'].checked = data.isAvailable;
                form.elements['location'].value = data.location.id;

                let startDate = data.startDate || '';
                let endDate = data.endDate || '';
                if (!startDate && data.type === 'event') {
                    startDate = parseDateFromCourseName(data.name);
                }
                if (!endDate && startDate) {
                    endDate = startDate;
                }

                const daysSelect = form.elements['daysOfWeek[]'];
                if (data.type === 'event' && startDate) {
                    const eventDow = isoWeekdayFromDateString(startDate);
                    Array.from(daysSelect.options).forEach(option => {
                        option.selected = parseInt(option.value) === eventDow;
                    });
                } else {
                    Array.from(daysSelect.options).forEach(option => {
                        option.selected = data.daysOfWeek.includes(parseInt(option.value));
                    });
                }

                form.elements['type'].dispatchEvent(new Event('change'));

                if (data.type === 'limited_course' || data.type === 'holiday_course' || data.type === 'event') {
                    document.getElementById('startDate').value = startDate;
                    document.getElementById('endDate').value = endDate;
                }

                if ((data.type === 'limited_course' || data.type === 'holiday_course' || data.type === 'event') && data.dayTimes) {
                    updateDayTimes();
                    Object.entries(data.dayTimes).forEach(([day, times]) => {
                        const startInput = document.querySelector(`.day-start-time[data-day="${day}"]`);
                        const endInput = document.querySelector(`.day-end-time[data-day="${day}"]`);
                        if (startInput && endInput) {
                            startInput.value = padTime(times.startTime);
                            endInput.value = padTime(times.endTime);
                        }
                    });
                }

                // ExtraFields laden und anzeigen
                if (data.extraFields && Array.isArray(data.extraFields)) {
                    extraFields = data.extraFields;
                    renderExtraFields();
                } else {
                    extraFields = [];
                    renderExtraFields();
                }

                setTimeout(() => {
                    if (data.type === 'limited_course' || data.type === 'holiday_course' || data.type === 'event') {
                        document.getElementById('startDate').value = startDate;
                        document.getElementById('endDate').value = endDate;
                    }
                    if ((data.type === 'limited_course' || data.type === 'holiday_course' || data.type === 'event') && data.dayTimes) {
                        Object.entries(data.dayTimes).forEach(([day, times]) => {
                            const startInput = document.querySelector(`.day-start-time[data-day="${day}"]`);
                            const endInput = document.querySelector(`.day-end-time[data-day="${day}"]`);
                            if (startInput && endInput) {
                                startInput.value = padTime(times.startTime);
                                endInput.value = padTime(times.endTime);
                            }
                        });
                    }
                }, 0);

                $('#availabilityModal').modal('show');
                document.getElementById('availabilityForm').style.display = 'block';
                document.getElementById('availabilityForm').scrollIntoView({ behavior: 'smooth' });
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Fehler beim Laden der Verfügbarkeit');
            });
    };

    // Delete availability
    window.deleteAvailability = function(id) {
        if (!confirm('Möchten Sie diesen Kurs wirklich löschen?')) {
            return;
        }

        fetch(`{{ path('appointment_admin_availability_delete', {'id': '__ID__'}) }}`.replace('__ID__', id), {
            method: 'DELETE'
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                loadAvailabilities();
                showAlert('Kurs erfolgreich gelöscht');
            } else {
                showAlert('Fehler: ' + (data.error || data.message || 'Unbekannter Fehler'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('Fehler beim Löschen des Kurses: ' + error.message);
        });
    };
    
    // Edit appointment
    window.editAppointment = function(id) {
        fetch(`{{ path('appointment_admin_view', {'id': '__ID__'}) }}`.replace('__ID__', id))
            .then(response => response.json())
            .then(data => {
                const modal = new bootstrap.Modal(document.getElementById('appointmentModal'));
                document.getElementById('appointmentId').value = data.id;
                document.getElementById('appointmentDate').value = new Date(data.startTime).toISOString().split('T')[0];
                document.getElementById('appointmentStartTime').value = new Date(data.startTime).toLocaleTimeString('de-DE', {hour: '2-digit', minute:'2-digit'});
                document.getElementById('appointmentEndTime').value = new Date(data.endTime).toLocaleTimeString('de-DE', {hour: '2-digit', minute:'2-digit'});
                document.getElementById('appointmentStatus').value = data.status;
                document.getElementById('appointmentNotes').value = data.notes || '';
                document.getElementById('appointmentLocation').value = data.location ? data.location.id : '';
                modal.show();
            })
            .catch(error => {
                alert('Fehler beim Laden des Termins: ' + error.message);
            });
    };

    // Delete appointment
    window.deleteAppointment = function(id) {
        if (!confirm('Möchten Sie diesen Termin wirklich löschen?')) {
            return;
        }

        fetch(`{{ path('appointment_admin_delete', {'id': '__ID__'}) }}`.replace('__ID__', id), {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                loadAppointments();
            } else {
                alert('Fehler: ' + data.error);
            }
        })
        .catch(error => {
            alert('Fehler beim Löschen des Termins: ' + error.message);
        });
    };
    
    // Utility function for debouncing
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }
    
    // Initial load of all data
    loadStatistics();
    loadAvailabilityStats();
    loadLocationStats();
    loadAppointments();
    loadAvailabilities();
    loadWaitingListCount(); // Add this line to load the waiting list count

    // Location Management Functions
    document.getElementById('saveLocation').addEventListener('click', function() {
        const id = document.getElementById('locationId').value;
        const data = {
            name: document.getElementById('locationName').value,
            address: document.getElementById('locationAddress').value,
            city: document.getElementById('locationCity').value,
            zip: document.getElementById('locationZip').value,
            description: document.getElementById('locationDescription').value,
            phone: document.getElementById('locationPhone').value,
            email: document.getElementById('locationEmail').value,
            isActive: document.getElementById('locationIsActive').checked
        };

        const url = id ? 
            `/ksbdueren/public/appointments/admin/location/${id}/update` : 
            '/ksbdueren/public/appointments/admin/location/create';

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                const modal = bootstrap.Modal.getInstance(document.getElementById('locationModal'));
                modal.hide();
                // Remove backdrop and modal-open class
                document.querySelector('.modal-backdrop')?.remove();
                document.body.classList.remove('modal-open');
                document.body.style.overflow = '';
                document.body.style.paddingRight = '';
                // Reload the page to show updated locations
                window.location.reload();
            } else {
                showAlert(result.message || 'Fehler beim Speichern des Standorts');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('Fehler beim Speichern des Standorts');
        });
    });

    // Edit location
    window.editLocation = function(id) {
        fetch(`/ksbdueren/public/appointments/admin/location/${id}`)
            .then(response => response.json())
            .then(data => {
                const modal = document.getElementById('locationModal');
                if (!modal) {
                    console.error('Modal element not found');
            return;
        }

                document.getElementById('locationId').value = data.id;
                document.getElementById('locationName').value = data.name;
                document.getElementById('locationAddress').value = data.address;
                document.getElementById('locationCity').value = data.city;
                document.getElementById('locationZip').value = data.postalCode;
                document.getElementById('locationDescription').value = data.description;
                document.getElementById('locationPhone').value = data.phone;
                document.getElementById('locationEmail').value = data.email;
                document.getElementById('locationIsActive').checked = data.isActive;

                const modalInstance = new bootstrap.Modal(modal);
                modalInstance.show();
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('Fehler beim Laden des Standorts');
            });
    };

    // Delete location
    window.deleteLocation = function(id) {
        if (confirm('Möchten Sie diesen Standort wirklich löschen?')) {
            fetch(`/ksbdueren/public/appointments/admin/location/${id}/delete`, {
                method: 'DELETE'
            })
            .then(response => response.json())
            .then(result => {
                if (result.success) {
                    window.location.reload();
                } else {
                    showAlert(result.message || 'Fehler beim Löschen des Standorts');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('Fehler beim Löschen des Standorts');
            });
        }
    };
    
    // Reset location form when modal is closed
    document.getElementById('locationModal').addEventListener('hidden.bs.modal', function() {
        document.getElementById('locationForm').reset();
        document.getElementById('locationId').value = '';
    });

    // Load email templates
    function loadEmailTemplates() {
        const tbody = document.getElementById('emailTemplatesTableBody');
        if (!tbody) return;

        tbody.innerHTML = '<tr><td colspan="5" class="text-center">Lade Templates...</td></tr>';

        fetch('{{ path('app_email_template_list') }}')
        .then(response => response.json())
        .then(data => {
                tbody.innerHTML = '';
                
                if (!data.templates || data.templates.length === 0) {
                    tbody.innerHTML = '<tr><td colspan="5" class="text-center">Keine Templates gefunden</td></tr>';
                    return;
                }

                data.templates.forEach(template => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>${template.name}</td>
                        <td>${template.subject}</td>
                        <td>${getTypeName(template.type)}</td>
                        <td>
                            ${(() => {
                                const maxVisible = 2;
                                if (template.courses && template.courses.length > 0) {
                                    let html = template.courses.slice(0, maxVisible).map(course =>
                                        `<span class="badge bg-info">${course.name}</span>`
                                    ).join('');
                                    if (template.courses.length > maxVisible) {
                                        const hiddenId = `allCourses_${template.id}`;
                                        html += ` <a href="#" class="ms-1" onclick="event.preventDefault();
                                            const el = document.getElementById('${hiddenId}');
                                            el.style.display = (el.style.display === 'inline' ? 'none' : 'inline');
                                            this.textContent = this.textContent.startsWith('+') ? 'Weniger anzeigen' : '+${template.courses.length - maxVisible} weitere';
                                        ">+${template.courses.length - maxVisible} weitere</a>
                                        <span id="${hiddenId}" style="display:none;">${template.courses.slice(maxVisible).map(course => `<span class=\"badge bg-info\">${course.name}</span>`).join('')}</span>`;
                                    }
                                    return html;
                                } else {
                                    return '-';
                                }
                            })()}
                        </td>
                        <td>
                            <span class="badge bg-${template.isActive ? 'success' : 'danger'}">
                                ${template.isActive ? 'Aktiv' : 'Inaktiv'}
                            </span>
                        </td>
                        <td>
                            <div class="btn-group">
                                <button class="btn btn-sm btn-primary" onclick="editTemplate(${template.id})">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-danger" onclick="deleteTemplate(${template.id})">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    `;
                    tbody.appendChild(tr);
                });
            })
            .catch(error => {
                console.error('Error loading email templates:', error);
                tbody.innerHTML = `
                    <tr>
                        <td colspan="5" class="text-center text-danger">
                            <div class="alert alert-danger">
                                <strong>Fehler beim Laden der Templates:</strong><br>
                                ${error.message}
                            </div>
                        </td>
                    </tr>
                `;
            });
    }

    // Save template
    document.getElementById('saveTemplate').addEventListener('click', function() {
        const id = document.getElementById('templateId').value;
        const data = {
            name: document.getElementById('templateName').value,
            subject: document.getElementById('templateSubject').value,
            body: document.getElementById('templateBody').value,
            type: document.getElementById('templateType').value,
            isActive: document.getElementById('templateIsActive').checked,
            courseIds: Array.from(document.getElementById('templateCourses').selectedOptions).map(option => option.value)
        };

        const url = id ? 
            `/ksbdueren/public/appointments/admin/email-template/${id}/update` : 
            '/ksbdueren/public/appointments/admin/email-template/create';

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                const modal = bootstrap.Modal.getInstance(document.getElementById('emailTemplateModal'));
                modal.hide();
                document.querySelector('.modal-backdrop')?.remove();
                document.body.classList.remove('modal-open');
                document.body.style.overflow = '';
                document.body.style.paddingRight = '';
                loadEmailTemplates();
            } else {
                showAlert(result.message || 'Fehler beim Speichern des Templates');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('Fehler beim Speichern des Templates');
        });
    });
    
    // Edit template
    window.editTemplate = function(id) {
        fetch(`/ksbdueren/public/appointments/admin/email-template/${id}`)
            .then(response => response.json())
            .then(data => {
                document.getElementById('templateId').value = data.id;
                document.getElementById('templateName').value = data.name;
                document.getElementById('templateSubject').value = data.subject;
                document.getElementById('templateBody').value = data.body || '';
                document.getElementById('templateType').value = data.type;
                document.getElementById('templateIsActive').checked = data.isActive;

                // Setze den Inhalt im TinyMCE-Editor
                if (window.tinymce && tinymce.get('templateBody')) {
                    tinymce.get('templateBody').setContent(data.body || '');
                }

                // Set selected courses
                const courseSelect = document.getElementById('templateCourses');
                Array.from(courseSelect.options).forEach(option => {
                    option.selected = data.courses.some(course => course.id === parseInt(option.value));
                });

                const modal = new bootstrap.Modal(document.getElementById('emailTemplateModal'));
                modal.show();
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('Fehler beim Laden des Templates');
            });
    };

    // Delete template
    window.deleteTemplate = function(id) {
        if (!confirm('Möchten Sie dieses Template wirklich löschen?')) {
            return;
        }

        fetch(`/ksbdueren/public/appointments/admin/email-template/${id}/delete`, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                loadEmailTemplates();
            } else {
                showAlert(result.message || 'Fehler beim Löschen des Templates');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('Fehler beim Löschen des Templates');
        });
    };

    // Reset template form when modal is closed
    document.getElementById('emailTemplateModal').addEventListener('hidden.bs.modal', function() {
        document.getElementById('emailTemplateForm').reset();
        document.getElementById('templateId').value = '';
    });

    // Load templates when the modal is shown
    document.getElementById('emailTemplateModal').addEventListener('show.bs.modal', function() {
        loadEmailTemplates();
    });

    // Load waiting list
    function loadWaitingList() {
        const course = document.getElementById('waitingListCourseFilter').value;
        const status = document.getElementById('waitingListStatusFilter').value;
        const search = document.getElementById('waitingListSearchFilter').value;

        const params = new URLSearchParams({ 
            course, 
            status, 
            search
        });
        const url = `{{ path('app_waiting_list_admin_list') }}?${params.toString()}`;

        const tbody = document.getElementById('waitingListTableBody');
        if (!tbody) return;

        tbody.innerHTML = '<tr><td colspan="6" class="text-center">Lade Warteliste...</td></tr>';
        // Hinweis-Container für leere Tabelle
        let emptyInfo = document.getElementById('waitingListEmptyInfo');
        if (!emptyInfo) {
            emptyInfo = document.createElement('div');
            emptyInfo.id = 'waitingListEmptyInfo';
            emptyInfo.className = 'text-center text-muted my-3';
            tbody.parentElement.parentElement.appendChild(emptyInfo);
        }
        emptyInfo.style.display = 'none';

        fetch(url)
            .then(response => response.json())
            .then(data => {
                // DataTable vor dem Einfügen zerstören
                if ($.fn.DataTable.isDataTable('#waitingListTable')) {
                    $('#waitingListTable').DataTable().destroy();
                }
                tbody.innerHTML = '';
                if (!data.waitingList || data.waitingList.length === 0) {
                    // Keine Dummy-Zeile mehr! DataTables erwartet leeres tbody
                    // Hinweis außerhalb der Tabelle anzeigen
                    emptyInfo.textContent = 'Keine Einträge gefunden';
                    emptyInfo.style.display = 'block';
                    $('#waitingListTable').DataTable();
                    return;
                }
                emptyInfo.style.display = 'none';
                data.waitingList.forEach(entry => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>${entry.availability.name}</td>
                        <td>${entry.firstName} ${entry.lastName}</td>
                        <td>
                            ${entry.email}<br>
                            <small class="text-muted">${entry.phone || '-'}</small>
                        </td>
                        <td>${new Date(entry.createdAt).toLocaleString('de-DE')}</td>
                        <td>
                            <span class="badge bg-${entry.isNotified ? 'success' : 'warning'}">
                                ${entry.isNotified ? 'Benachrichtigt' : 'Ausstehend'}
                            </span>
                        </td>
                        <td>
                            <div class="btn-group">
                                ${!entry.isNotified ? `
                                    <button class="btn btn-sm btn-primary" onclick="notifyWaitingList(${entry.id})">
                                        <i class="fas fa-bell"></i>
                                    </button>
                                ` : ''}
                                <button class="btn btn-sm btn-danger" onclick="deleteWaitingList(${entry.id})">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    `;
                    tbody.appendChild(tr);
                });
                // DataTable nach dem Einfügen neu initialisieren
                $('#waitingListTable').DataTable();
            })
            .catch(error => {
                console.error('Error loading waiting list:', error);
                tbody.innerHTML = '';
                emptyInfo.textContent = 'Fehler beim Laden der Warteliste';
                emptyInfo.style.display = 'block';
                initOrUpdateDataTable('#waitingListTable');
            });
    }

    // Notify waiting list entry
    window.notifyWaitingList = function(id) {
        document.getElementById('waitingListId').value = id;
        
        // Load email templates
        fetch('{{ path('app_email_template_list') }}')
            .then(response => response.json())
            .then(data => {
                const select = document.getElementById('waitingListEmailTemplate');
                select.innerHTML = '<option value="">Template auswählen...</option>';
                
                if (data.templates) {
                    data.templates.forEach(template => {
                        if (template.isActive) {
                            const option = document.createElement('option');
                            option.value = template.id;
                            option.textContent = template.name;
                            select.appendChild(option);
                        }
                    });
                }
            })
            .catch(error => {
                console.error('Error loading email templates:', error);
                showAlert('Fehler beim Laden der E-Mail Templates');
            });

        const modal = new bootstrap.Modal(document.getElementById('waitingListNotifyModal'));
        modal.show();
    };

    // Send waiting list notification
    document.getElementById('sendWaitingListNotification').addEventListener('click', function() {
        const id = document.getElementById('waitingListId').value;
        const templateId = document.getElementById('waitingListEmailTemplate').value;
        const additionalMessage = document.getElementById('waitingListAdditionalMessage').value;

        if (!templateId) {
            showAlert('Bitte wählen Sie ein E-Mail Template aus.');
            return;
        }

        fetch(`{{ path('app_waiting_list_admin_notify', {'id': '__ID__'}) }}`.replace('__ID__', id), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                templateId,
                additionalMessage
            })
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                const modal = bootstrap.Modal.getInstance(document.getElementById('waitingListNotifyModal'));
                modal.hide();
                document.querySelector('.modal-backdrop')?.remove();
                document.body.classList.remove('modal-open');
                document.body.style.overflow = '';
                document.body.style.paddingRight = '';
                loadWaitingList();
            } else {
                showAlert(result.message || 'Fehler beim Senden der Benachrichtigung');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('Fehler beim Senden der Benachrichtigung');
        });
    });

    // Delete waiting list entry
    window.deleteWaitingList = function(id) {
        if (!confirm('Möchten Sie diesen Wartelisteneintrag wirklich löschen?')) {
            return;
        }

        fetch(`{{ path('app_waiting_list_admin_delete', {'id': '__ID__'}) }}`.replace('__ID__', id), {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                loadWaitingList();
            } else {
                showAlert(result.message || 'Fehler beim Löschen des Wartelisteneintrags');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('Fehler beim Löschen des Wartelisteneintrags');
        });
    };

    // Waiting list filter event listeners
    document.getElementById('waitingListCourseFilter').addEventListener('change', loadWaitingList);
    document.getElementById('waitingListStatusFilter').addEventListener('change', loadWaitingList);
    document.getElementById('waitingListSearchFilter').addEventListener('input', debounce(loadWaitingList, 300));

    // Initial load of waiting list
    loadWaitingList();

    // Slot-Dauer-Feld je nach Typ ein-/ausblenden
    function updateSlotDurationVisibility() {
        const type = document.getElementById('availabilityType').value;
        const slotDurationField = document.querySelector('input[name="slotDuration"]').closest('.col-md-4');
        if (type === 'limited_course' || type === 'holiday_course') {
            slotDurationField.style.display = 'none';
        } else {
            slotDurationField.style.display = '';
        }
    }
    document.getElementById('availabilityType').addEventListener('change', updateSlotDurationVisibility);
    // Initial aufrufen
    updateSlotDurationVisibility();

    function getTemplateTypeLabel(type) {
        switch(type) {
            case 'booking_confirmation': return 'Buchungsbestätigung';
            case 'booking_validation': return 'Buchungsvalidierung';
            case 'payment': return 'Zahlung';
            case 'booking_change': return 'Buchung umbuchen';
            case 'cancellation': return 'Abmeldung/Stornierung';
            case 'waitlist': return 'Warteliste';
            case 'reminder': return 'Erinnerung';
            case 'booking_position': return 'Positionsmail';
            default: return type;
        }
    }

    // Preview template
    document.getElementById('previewTemplate').addEventListener('click', function() {
        const subject = document.getElementById('templateSubject').value;
        const content = document.getElementById('templateBody').value;
        
        // Update preview
        document.getElementById('previewSubject').textContent = subject || 'Betreff der E-Mail';
        
        // Process content and replace placeholders with styled elements
        let previewContent = content;
        
        // Replace placeholders with styled elements
        
        const placeholderReplacements = {
            '\\[\\[Name\\]\]': '<span class="placeholder">Max Mustermann</span>',
            '\\[\\[Vorname\\]\]': '<span class="placeholder">Max</span>',
            '\\[\\[Nachname\\]\]': '<span class="placeholder">Mustermann</span>',
            '\\[\\[Email\\]\]': '<span class="placeholder">max.mustermann@example.com</span>',
            '\\[\\[Telefon\\]\]': '<span class="placeholder">+49 123 456789</span>',
            // Vorschau für [[Datum]]: Beispiel für beide Fälle
            '\\[\\[Datum\\]\]': `<div style="margin-bottom:8px;"><strong>Beispiel Ferien-/Blockkurs:</strong></div>
                <table style="border-collapse:collapse;font-size:14px;margin-bottom:16px;">
                  <tr><th style="border:1px solid #ccc;padding:4px;">Datum</th><th style="border:1px solid #ccc;padding:4px;">Uhrzeit</th><th style="border:1px solid #ccc;padding:4px;">Ort</th></tr>
                  <tr><td style="border:1px solid #ccc;padding:4px;">01.08.2024</td><td style="border:1px solid #ccc;padding:4px;">10:00 - 11:00</td><td style="border:1px solid #ccc;padding:4px;">Hallenbad X</td></tr>
                  <tr><td style="border:1px solid #ccc;padding:4px;">02.08.2024</td><td style="border:1px solid #ccc;padding:4px;">10:00 - 11:00</td><td style="border:1px solid #ccc;padding:4px;">Hallenbad X</td></tr>
                </table>
                <div style="margin-bottom:8px;"><strong>Beispiel fortlaufender Kurs:</strong> <span class="placeholder">01.08.2024 (fortlaufender Kurs)</span></div>` ,
            '\\[\\[Zeit\\]\]': '<span class="placeholder">14:00</span>',
            '\\[\\[Dauer\\]\]': '<span class="placeholder">60 Minuten</span>',
            '\\[\\[Kurs\\]\]': '<span class="placeholder">Yoga für Anfänger</span>',
            '\\[\\[KursTyp\\]\]': '<span class="placeholder">Dauerhafter Kurs</span>',
            '\\[\\[Ort\\]\]': '<span class="placeholder">Yoga Studio</span>',
            '\\[\\[Adresse\\]\]': '<span class="placeholder">Musterstraße 123, 12345 Musterstadt</span>',
            '\\[\\[PLZ\\]\]': '<span class="placeholder">12345</span>',
            '\\[\\[Stadt\\]\]': '<span class="placeholder">Musterstadt</span>',
            '\\[\\[Anfahrt\\]\]': '<span class="placeholder">Mit dem Auto: A1 Ausfahrt Musterstadt, dann der Beschilderung folgen.<br>Mit öffentlichen Verkehrsmitteln: Bus 123 bis Haltestelle Musterstraße</span>',
            '\\[\\[QRCode\\]\]': '<div class="placeholder qr-code"><i class="fas fa-qrcode fa-3x"></i><br>QR-Code für den Termin</div>',
            '\\[\\[TerminLink\\]\]': '<span class="placeholder link">https://example.com/termin/123</span>',
            '\\[\\[KalenderLink\\]\]': '<div class="placeholder calendar"><i class="fas fa-calendar-alt me-2"></i>Termin zum Kalender hinzufügen</div>',
            '\\[\\[StornierungsLink\\]\]': '<span class="placeholder link">https://example.com/stornieren/123</span>',
            '\\[\\[BuchungsID\\]\]': '<span class="placeholder booking-id">B-123456</span>'
        };

        Object.entries(placeholderReplacements).forEach(([pattern, replacement]) => {
            previewContent = previewContent.replace(new RegExp(pattern, 'g'), replacement);
        });

        // Convert line breaks to paragraphs
        previewContent = previewContent.split('\n\n').map(paragraph => {
            if (paragraph.trim()) {
                return `<p>${paragraph}</p>`;
            }
            return '';
        }).join('');

        document.getElementById('previewContent').innerHTML = previewContent;
        
        // Show preview
        const previewCollapse = document.getElementById('previewCollapse');
        const bsCollapse = new bootstrap.Collapse(previewCollapse, {
            toggle: true
        });
    });

    // Update preview when content changes
    document.getElementById('templateBody').addEventListener('input', debounce(function() {
        if (document.getElementById('previewCollapse').classList.contains('show')) {
            document.getElementById('previewTemplate').click();
        }
    }, 500));

    document.getElementById('templateSubject').addEventListener('input', debounce(function() {
        if (document.getElementById('previewCollapse').classList.contains('show')) {
            document.getElementById('previewTemplate').click();
        }
    }, 500));

    // View appointment
    window.viewAppointment = function(id) {
        fetch(`{{ path('appointment_admin_view', {'id': '__ID__'}) }}`.replace('__ID__', id))
            .then(response => response.json())
            .then(data => {
                console.log('Received data:', data); // Debug output
                const modal = new bootstrap.Modal(document.getElementById('appointmentModal'));
                
                // Termin-Daten
                document.getElementById('appointmentId').value = data.id || '';
                document.getElementById('appointmentBookingToken').value = data.bookingToken || '';
                
                // Kurs-Daten aus dem Termin holen
                const courseInfo = data.course || {};
                document.getElementById('courseName').value = courseInfo.name || 'Kein Kurs';
                // Kurstage robust setzen
                let daysText = '';
                if (courseInfo.days && Array.isArray(courseInfo.days) && courseInfo.days.length > 0) {
                    daysText = formatCourseDays(courseInfo);
                } else {
                    daysText = 'Keine Angabe';
                }
                document.getElementById('courseDays').value = daysText;
                console.log('Setze Kurstage:', daysText);
                
                // Standort
                if (data.location && data.location.id) {
                    document.getElementById('appointmentLocation').value = data.location.id;
                } else {
                    document.getElementById('appointmentLocation').value = '';
                }
                console.log('Setze Standort:', data.location);
                
                // Kunden-Daten
                if (data.customer) {
                    document.getElementById('customerFirstName').value = data.customer.firstName || '';
                    document.getElementById('customerLastName').value = data.customer.lastName || '';
                    document.getElementById('customerEmail').value = data.customer.email || '';
                    document.getElementById('customerPhone').value = data.customer.phone || '';
                } else {
                    document.getElementById('customerFirstName').value = '';
                    document.getElementById('customerLastName').value = '';
                    document.getElementById('customerEmail').value = '';
                    document.getElementById('customerPhone').value = '';
                }
                console.log('Setze Kunde:', data.customer);
                
                // Status und Notizen
                const statusSelect = document.getElementById('appointmentStatus');
                if (statusSelect) {
                    // Mapping für Status
                    const statusMap = { verified: 'confirmed', pending: 'pending', confirmed: 'confirmed', cancelled: 'cancelled', rescheduled: 'rescheduled' };
                    statusSelect.value = statusMap[data.status] || 'pending';
                    console.log('Setting status to:', data.status, 'mapped to', statusSelect.value); // Debug output
                } else {
                    console.error('Status select element not found'); // Debug output
                }
                document.getElementById('appointmentNotes').value = data.notes || '';
                console.log('Setze Notizen:', data.notes);
                
                // Zusatzfelder anzeigen
                const appointmentExtraFieldsContainer = document.getElementById('appointmentExtraFields');
                const appointmentExtraFieldsDiv = document.getElementById('appointmentExtraFieldsContainer');
                if (data.extraFieldValues && Object.keys(data.extraFieldValues).length > 0) {
                    appointmentExtraFieldsDiv.innerHTML = '';
                    Object.values(data.extraFieldValues).forEach(field => {
                        let label = '';
                        let value = '';
                        if (typeof field === 'object' && field !== null) {
                            label = field.label || '';
                            value = field.value || '';
                        } else {
                            label = '';
                            value = field;
                        }
                        const fieldDiv = document.createElement('div');
                        fieldDiv.className = 'row g-3 mb-2';
                        fieldDiv.innerHTML = `
                            <div class="col-md-6">
                                <label class="form-label fw-bold">${label}</label>
                            </div>
                            <div class="col-md-6">
                                <input type="text" class="form-control" value="${value}" readonly>
                            </div>
                        `;
                        appointmentExtraFieldsDiv.appendChild(fieldDiv);
                    });
                    appointmentExtraFieldsContainer.style.display = 'block';
                    console.log('Zusatzfelder angezeigt:', data.extraFieldValues);
                } else {
                    appointmentExtraFieldsContainer.style.display = 'none';
                    console.log('Keine Zusatzfelder vorhanden');
                }
                
                // Extrafields anzeigen und befüllen
                const extraFieldsContainer = document.getElementById('createAppointmentExtraFields');
                const extraFieldsDiv = document.getElementById('createAppointmentExtraFieldsContainer');
                if (data.extraFields && data.extraFields.length > 0) {
                    extraFieldsDiv.innerHTML = '';
                    data.extraFields.forEach(field => {
                        const fieldDiv = document.createElement('div');
                        fieldDiv.className = 'col-md-6 mb-3';
                        let inputHtml = '';
                        switch (field.type) {
                            case 'text':
                                inputHtml = `<input type=\"text\" class=\"form-control\" name=\"extra_${field.id}\" placeholder=\"${field.label}\">`;
                                break;
                            case 'email':
                                inputHtml = `<input type=\"email\" class=\"form-control\" name=\"extra_${field.id}\" placeholder=\"${field.label}\">`;
                                break;
                            case 'tel':
                                inputHtml = `<input type=\"tel\" class=\"form-control\" name=\"extra_${field.id}\" placeholder=\"${field.label}\">`;
                                break;
                            case 'date':
                                inputHtml = `<input type=\"date\" class=\"form-control\" name=\"extra_${field.id}\">`;
                                break;
                            case 'textarea':
                                inputHtml = `<textarea class=\"form-control\" name=\"extra_${field.id}\" rows=\"3\" placeholder=\"${field.label}\"></textarea>`;
                                break;
                            case 'select':
                                const options = field.options.map(opt => `<option value=\"${opt}\">${opt}</option>`).join('');
                                inputHtml = `<select class=\"form-select\" name=\"extra_${field.id}\"><option value=\"\">${field.label}</option>${options}</select>`;
                                break;
                            default:
                                inputHtml = `<input type=\"text\" class=\"form-control\" name=\"extra_${field.id}\" placeholder=\"${field.label}\">`;
                        }
                        fieldDiv.innerHTML = `
                            <label class=\"form-label\">${field.label}${field.required ? ' *' : ''}</label>
                            ${inputHtml}
                        `;
                        extraFieldsDiv.appendChild(fieldDiv);
                    });
                    extraFieldsContainer.style.display = 'block';
                    // Werte befüllen
                    if (data.extraFieldValues) {
                        Object.entries(data.extraFieldValues).forEach(([key, value]) => {
                            const input = extraFieldsDiv.querySelector(`[name='extra_${key}']`);
                            if (input) input.value = value;
                        });
                    }
                } else {
                    extraFieldsContainer.style.display = 'none';
                }

                modal.show();
            })
            .catch(error => {
                console.error('Error loading appointment:', error);
                alert('Fehler beim Laden des Termins: ' + error.message);
            });
    };

    // Umbuchen
    document.getElementById('rescheduleAppointment').addEventListener('click', function() {
        const bookingToken = document.getElementById('appointmentBookingToken').value;
        window.location.href = `{{ path('appointment_reschedule', {'token': '__TOKEN__'}) }}`.replace('__TOKEN__', bookingToken);
    });

    // Abmelden
    document.getElementById('cancelAppointment').addEventListener('click', function() {
        if (!confirm('Möchten Sie diesen Termin wirklich stornieren?')) {
            return;
        }
        
        const appointmentId = document.getElementById('appointmentId').value;
        fetch(`{{ path('appointment_admin_cancel', {'id': '__ID__'}) }}`.replace('__ID__', appointmentId), {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Termin wurde erfolgreich storniert');
                loadAppointments();
                bootstrap.Modal.getInstance(document.getElementById('appointmentModal')).hide();
            } else {
                alert('Fehler: ' + data.error);
            }
        })
        .catch(error => {
            alert('Fehler beim Stornieren des Termins: ' + error.message);
        });
    });

    // E-Mail senden
    document.getElementById('sendEmail').addEventListener('click', function() {
        const emailModal = new bootstrap.Modal(document.getElementById('emailModal'));
        emailModal.show();
    });

    document.getElementById('sendEmailButton').addEventListener('click', function() {
        const appointmentId = document.getElementById('appointmentId').value;
        const subject = document.getElementById('emailSubject').value;
        const message = document.getElementById('emailMessage').value;
        
        fetch(`{{ path('appointment_admin_send_email', {'id': '__ID__'}) }}`.replace('__ID__', appointmentId), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                subject: subject,
                message: message
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('E-Mail wurde erfolgreich gesendet');
                bootstrap.Modal.getInstance(document.getElementById('emailModal')).hide();
            } else {
                alert('Fehler: ' + data.error);
            }
        })
        .catch(error => {
            alert('Fehler beim Senden der E-Mail: ' + error.message);
        });
    });

    // Save appointment
    window.saveAppointment = function() {
        const id = document.getElementById('appointmentId').value;
        if (!id) {
            console.error('No appointment ID found');
            return;
        }

        const data = {
            status: document.getElementById('appointmentStatus').value,
            notes: document.getElementById('appointmentNotes').value,
            locationId: document.getElementById('appointmentLocation').value
        };

        console.log('Saving appointment with data:', data); // Debug output

        fetch(`{{ path('appointment_admin_update', {'id': '__ID__'}) }}`.replace('__ID__', id), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const modal = bootstrap.Modal.getInstance(document.getElementById('appointmentModal'));
                modal.hide();
                loadAppointments();
            } else {
                alert('Fehler: ' + (data.error || 'Unbekannter Fehler'));
            }
        })
        .catch(error => {
            console.error('Error saving appointment:', error);
            alert('Fehler beim Speichern des Termins: ' + error.message);
        });
    };

    // Event-Listener im Modal-Show-Event setzen
    $('#availabilityModal').on('shown.bs.modal', function () {
        const btn = document.getElementById('showCreateCourseForm');
        if (btn) {
            btn.onclick = function() {
                const form = document.getElementById('availabilityForm');
                if (form) {
                    form.reset();
                    form.style.display = 'block';
                    document.getElementById('availabilityId').value = '';
                    form.scrollIntoView({ behavior: 'smooth' });
                }
            };
        }
    });
    // Beim Schließen Modal: Formular ausblenden
    $('#availabilityModal').on('hidden.bs.modal', function () {
        const form = document.getElementById('availabilityForm');
        if (form) form.style.display = 'none';
    });

    // Fokus vor dem Schließen des Modals entfernen (alle Schließen-Trigger)
    document.querySelectorAll('#participantsModal [data-bs-dismiss="modal"]').forEach(function(btn) {
        btn.addEventListener('mousedown', function() {
            setTimeout(() => document.activeElement.blur(), 0);
        });
    });
});

// Aktive Kurse laden und anzeigen
function loadActiveCoursesWithSlots() {
    fetch('{{ path('appointment_admin_availability_list') }}')
        .then(response => response.json())
        .then(data => {
            const tbody = document.getElementById('activeCoursesTableBody');
            tbody.innerHTML = '';
            if (!data.availabilities || data.availabilities.length === 0) {
                tbody.innerHTML = '<tr><td colspan="7" class="text-center">Keine aktiven Kurse gefunden</td></tr>';
                // DataTable trotzdem initialisieren (leere Tabelle)
                initOrUpdateDataTable('#activeCoursesTable');
                return;
            }
            // Nur aktive Kurse
            const activeCourses = data.availabilities.filter(a => a.isAvailable);
            if (activeCourses.length === 0) {
                tbody.innerHTML = '<tr><td colspan="7" class="text-center">Keine aktiven Kurse gefunden</td></tr>';
                initOrUpdateDataTable('#activeCoursesTable');
                return;
            }
            for (const course of activeCourses) {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${course.name || '-'}</td>
                    <td>${getTypeName(course.type)}</td>
                    <td>${course.location ? course.location.name : '-'}</td>
                    <td>${course.maxSlots}</td>
                    <td>${course.bookedSlots}</td>
                    <td>${course.availableSlots}</td>
                    <td>
                        <button class="btn btn-sm btn-primary" onclick="showParticipantsModal('${course.id}', '${course.name || ''}', '${course.startTime}', '${course.endTime}')">
                            <i class="fas fa-users"></i> Teilnehmer
                        </button>
                    </td>
                `;
                tbody.appendChild(tr);
            }
            // DataTable initialisieren/aktualisieren
            initOrUpdateDataTable('#activeCoursesTable');
        })
        .catch(error => {
            document.getElementById('activeCoursesTableBody').innerHTML = `<tr><td colspan="7" class="text-center text-danger">Fehler beim Laden der Kurse: ${error.message}</td></tr>`;
            initOrUpdateDataTable('#activeCoursesTable');
        });
}

// Teilnehmerliste Modal anzeigen
window.showParticipantsModal = function(slotId, courseName, slotDate, slotTime) {
    // Modal komplett leeren und neu initialisieren
    const modal = document.getElementById('participantsModal');
    const info = document.getElementById('participantsInfo');
    const tbody = document.getElementById('participantsTableBody');
    const theadRow = document.querySelector('#participantsTable thead tr');

    // Modal-Inhalt komplett leeren
    info.innerHTML = '';
    tbody.innerHTML = `<tr><td colspan="8" class="text-center">Lade Teilnehmer...</td></tr>`;

    // DataTable zerstören falls vorhanden
    if ($.fn.DataTable.isDataTable('#participantsTable')) {
        $('#participantsTable').DataTable().destroy();
    }

    // Kurs-Informationen setzen
    info.innerHTML = `<strong>Kurs:</strong> ${courseName}<br><strong>Datum:</strong> ${slotDate} ${slotTime ? 'um ' + slotTime : ''}`;

    // Generiere die korrekte Slot-ID im Format slot_{availabilityId}_{timestamp}
    const timestamp = new Date().getTime();
    const formattedSlotId = `slot_${slotId}_${timestamp}`;

    // Excel-Download-Link setzen
    document.getElementById('downloadExcelBtn').href = '/ksbdueren/public/appointments/export-participants/' + formattedSlotId;

    // Teilnehmer laden
    fetch(`{{ path('appointment_slot_participants', {'slotId': '__SLOT_ID__'}) }}`.replace('__SLOT_ID__', formattedSlotId))
        .then(response => response.json())
        .then(data => {
            tbody.innerHTML = '';
            // Prüfe, ob ExtraFields gebraucht werden
            const hasExtraFields = data.participants && data.participants.some(part => part.extraFields && Object.keys(part.extraFields).length > 0);

            // Thead dynamisch anpassen
            theadRow.innerHTML = `
                <th>Vorname</th>
                <th>Nachname</th>
                <th>E-Mail</th>
                <th>Telefon</th>
                <th>Check-in</th>
                <th>Anmerkungen</th>
                ${hasExtraFields ? '<th>Zusatzfelder</th>' : ''}
                <th>Aktionen</th>
            `;

            // Lade-/Fehlerzeile dynamisch
            function getColspan() {
                return theadRow.children.length;
            }

            if (!data.success || !data.participants || data.participants.length === 0) {
                tbody.innerHTML = `<tr><td colspan="${getColspan()}" class="text-center">Keine Teilnehmer gefunden</td></tr>`;
                initOrUpdateDataTable('#participantsTable');
                return;
            }

            data.participants.forEach(part => {
                const tr = document.createElement('tr');
                let rowHtml = `
                    <td>${part.firstName}</td>
                    <td>${part.lastName}</td>
                    <td>${part.email}</td>
                    <td>${part.phone || '-'}</td>
                    <td>
                        <input type="checkbox" ${part.checkedIn ? 'checked' : ''} onchange="updateCheckIn(${part.id}, this.checked)">
                        ${part.checkedInAt ? `<br><small>${part.checkedInAt}</small>` : ''}
                    </td>
                    <td><input type="text" value="${part.notes || ''}" onchange="updateNotes(${part.id}, this.value)" class="form-control form-control-sm"></td>
                `;
                if (hasExtraFields) {
                    let extraFieldsHtml = '-';
                    if (part.extraFields && Object.keys(part.extraFields).length > 0) {
                        extraFieldsHtml = '<div class="extra-fields-list">';
                        Object.entries(part.extraFields).forEach(([label, value]) => {
                            if (value && typeof value === 'object' && 'value' in value) value = value.value;
                            if (value === null || value === undefined || value === '') return;
                            extraFieldsHtml += `<span class="extra-field-chip"><span class="extra-field-label">${label}</span><span class="extra-field-value">${value}</span></span>`;
                        });
                        extraFieldsHtml += '</div>';
                    }
                    rowHtml += `<td>${extraFieldsHtml}</td>`;
                }
                rowHtml += `<td></td>`;
                tr.innerHTML = rowHtml;
                tbody.appendChild(tr);
            });

            // DataTable neu initialisieren
            initOrUpdateDataTable('#participantsTable');
        })
        .catch(error => {
            function getColspan() {
                return theadRow.children.length;
            }
            tbody.innerHTML = `<tr><td colspan="${getColspan()}" class="text-center text-danger">Fehler: ${error.message}</td></tr>`;
            initOrUpdateDataTable('#participantsTable');
        });

    // Modal anzeigen
    const bootstrapModal = new bootstrap.Modal(modal);
    bootstrapModal.show();
};

// Check-in Status aktualisieren
window.updateCheckIn = function(appointmentId, checked) {
    fetch(`/ksbdueren/public/appointments/update-check-in/${appointmentId}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ checkedIn: checked })
    })
    .then(response => response.json())
    .then(data => {
        // Optional: Feedback anzeigen
    });
};

// Notizen aktualisieren
window.updateNotes = function(appointmentId, notes) {
    fetch(`{{ path('appointment_admin_update', {'id': '__ID__'}) }}`.replace('__ID__', appointmentId), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ notes: notes })
    })
    .then(response => response.json())
    .then(data => {
        // Optional: Feedback anzeigen
    });
};

// Initial laden
loadActiveCoursesWithSlots();

// Modal beim Schließen leeren
document.getElementById('participantsModal').addEventListener('hidden.bs.modal', function() {
    const info = document.getElementById('participantsInfo');
    const tbody = document.getElementById('participantsTableBody');
    const extraFieldsHeader = document.getElementById('extraFieldsHeader');
    
    // Modal-Inhalt leeren
    info.innerHTML = '';
    tbody.innerHTML = '';
    extraFieldsHeader.style.display = 'none';
    
    // DataTable zerstören falls vorhanden
    if ($.fn.DataTable.isDataTable('#participantsTable')) {
        $('#participantsTable').DataTable().destroy();
    }
});

// Add this function to format course days
function formatCourseDays(course) {
    if (!course.days || course.days.length === 0) {
        return '';
    }
    
    const dayMap = {
        1: 'Mo',
        2: 'Di',
        3: 'Mi',
        4: 'Do',
        5: 'Fr',
        6: 'Sa',
        7: 'So'
    };
    
    const days = course.days.map(day => dayMap[day] || day).join(',');
    return `(${days})`;
}

// Hilfsfunktion für Zeitformat
function padTime(t) {
    if (!t) return '';
    return t.length === 5 ? t : t.substring(0, 5);
}

function parseDateFromCourseName(name) {
    if (!name) return '';
    const match = name.match(/(\d{2})\.(\d{2})\.(\d{4})/);
    if (!match) return '';
    return `${match[3]}-${match[2]}-${match[1]}`;
}

function isoWeekdayFromDateString(dateString) {
    const date = new Date(`${dateString}T12:00:00`);
    const jsDay = date.getDay();
    return jsDay === 0 ? 7 : jsDay;
}

// DataTables initialisieren nach dem Laden der Daten
function initOrUpdateDataTable(tableId) {
    if ($.fn.DataTable.isDataTable(tableId)) {
        $(tableId).DataTable().destroy();
    }
    $(tableId).DataTable({
        language: {
            url: '{{ asset('js/vendor/dataTables.german.json') }}'
        },
        ordering: true,
        searching: false, // DataTables-Suchleiste ausblenden
        paging: true,
        info: true,
        lengthChange: false
    });
}

// Nach dem Laden der jeweiligen Daten aufrufen:
// initOrUpdateDataTable('#bookedAppointmentsTable');
// initOrUpdateDataTable('#waitingListTable');
// initOrUpdateDataTable('#activeCoursesTable');

// Beispiel: Nach loadAppointments()
function loadAppointments() {
    // ... bestehender Code ...
    fetch(url)
        .then(response => response.json())
        .then(data => {
            // ... bestehender Code ...
            tbody.innerHTML = '';
            data.appointments.forEach(appointment => {
                // ... bestehender Code ...
                tbody.appendChild(tr);
            });
            // DataTable initialisieren/aktualisieren
            initOrUpdateDataTable('#bookedAppointmentsTable');
        })
        .catch(error => {
            // ... bestehender Code ...
        });
}
// Analog für Warteliste und Aktive Kurse nach dem Rendern:
// initOrUpdateDataTable('#waitingListTable');
// initOrUpdateDataTable('#activeCoursesTable');
// ... bestehender Code ...

// Am Ende des JS-Blocks:
document.getElementById('showCreateCourseForm').addEventListener('click', function() {
    // Formular leeren und anzeigen
    document.getElementById('availabilityForm').reset();
    document.getElementById('availabilityForm').style.display = 'block';
    document.getElementById('availabilityId').value = '';
    document.getElementById('availabilityForm').scrollIntoView({ behavior: 'smooth' });
});

// Event-Listener für "Neuen Kurs anlegen" Button nur setzen, wenn das Modal offen ist und das Element existiert
$('#availabilityModal').on('shown.bs.modal', function () {
    const btn = document.getElementById('showCreateCourseForm');
    if (btn && !btn.dataset.listenerSet) {
        btn.addEventListener('click', function() {
            document.getElementById('availabilityForm').reset();
            document.getElementById('availabilityForm').style.display = 'block';
            document.getElementById('availabilityId').value = '';
            document.getElementById('availabilityForm').scrollIntoView({ behavior: 'smooth' });
        });
        btn.dataset.listenerSet = 'true';
    }
});
$('#availabilityModal').on('hidden.bs.modal', function () {
    const btn = document.getElementById('showCreateCourseForm');
    if (btn && btn.dataset.listenerSet) {
        btn.replaceWith(btn.cloneNode(true)); // entfernt alle Listener
    }
    document.getElementById('availabilityForm').style.display = 'none';
});

// Fetch-URL für Verfügbarkeiten korrigieren
function loadAvailabilities() {
    const tbody = document.getElementById('availabilitiesTable');
    if (!tbody) {
        console.error('Availabilities table body not found');
        return;
    }
    tbody.innerHTML = '<tr><td colspan="7" class="text-center">Lade Kurse...</td></tr>';
    fetch('{{ path('appointment_admin_availability_list') }}')
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (!tbody) {
                console.error('Availabilities table body not found after fetch');
                return;
            }
            tbody.innerHTML = '';
            if (!data.availabilities || data.availabilities.length === 0) {
                const tr = document.createElement('tr');
                tr.innerHTML = '<td colspan="7" class="text-center">Keine Kurse gefunden</td>';
                tbody.appendChild(tr);
                return;
            }
            data.availabilities.forEach(availability => {
                const tr = document.createElement('tr');
                
                const startTimeStr = availability.startTime.split(' ')[1] || availability.startTime;
                const endTimeStr = availability.endTime.split(' ')[1] || availability.endTime;
                const daysStr = availability.daysOfWeek.map(day => getDayName(day)).join(', ');
                
                tr.innerHTML = `
                    <td>${availability.name || '-'}</td>
                    <td>${getTypeName(availability.type)}</td>
                    <td>${daysStr}</td>
                    <td>${startTimeStr} - ${endTimeStr}</td>
                    <td>${availability.location ? availability.location.name : 'Kein Standort'}</td>
                    <td>
                        <span class="badge bg-${availability.isAvailable ? 'success' : 'danger'}">${availability.isAvailable ? 'Verfügbar' : 'Nicht verfügbar'}</span>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-primary" onclick="editAvailability(${availability.id})">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button class="btn btn-sm btn-danger" onclick="deleteAvailability(${availability.id})">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                `;
                tbody.appendChild(tr);
            });
        })
        .catch(error => {
            console.error('Error loading availabilities:', error);
            if (!tbody) {
                console.error('Availabilities table body not found after error');
                return;
            }
            tbody.innerHTML = `
                <tr>
                    <td colspan="7" class="text-center text-danger">
                        <div class="alert alert-danger">
                            <strong>Fehler beim Laden der Kurse:</strong><br>
                            ${error.message}
                        </div>
                    </td>
                </tr>
            `;
        });
}

// Add this function to format course days
function formatCourseDays(days) {
    if (!Array.isArray(days) || days.length === 0) return 'Keine Angabe';
    const dayNames = {
        1: 'Mo', 2: 'Di', 3: 'Mi', 4: 'Do', 5: 'Fr', 6: 'Sa', 7: 'So'
    };
    return days.map(day => dayNames[day] || day).join(', ');
}

// Manuelle Terminerstellung
function showCreateAppointmentModal() {
    // Modal zurücksetzen
    document.getElementById('createAppointmentForm').reset();
    document.getElementById('createAppointmentCourse').disabled = true;
    document.getElementById('createAppointmentCourse').innerHTML = '<option value="">Zuerst Standort auswählen...</option>';
    document.getElementById('createAppointmentExtraFields').style.display = 'none';

    // Event-Listener für Standort-Auswahl nur einmalig setzen
    const locationSelect = document.getElementById('createAppointmentLocation');
    const courseSelect = document.getElementById('createAppointmentCourse');
    if (locationSelect && courseSelect && !locationSelect.dataset.listenerSet) {
        locationSelect.addEventListener('change', async function() {
            const locationId = this.value;
            console.log('Standort geändert (Modal):', locationId); // Debug
            if (!locationId) {
                courseSelect.disabled = true;
                courseSelect.innerHTML = '<option value="">Zuerst Standort auswählen...</option>';
                return;
            }
            // Lade Kurse für Standort
            courseSelect.disabled = true;
            courseSelect.innerHTML = '<option value="">Lade Kurse...</option>';
            try {
                const response = await fetch(`{{ path('appointment_courses_for_location', {'locationId': '__LOCATION_ID__'}) }}`.replace('__LOCATION_ID__', locationId));
                const data = await response.json();
                courseSelect.innerHTML = '<option value="">Kurs auswählen...</option>';
                if (data.success && data.courses) {
                    // Für jeden Kurs prüfen, ob freie Termine existieren
                    for (const course of data.courses) {
                        const datesResp = await fetch(`{{ path('appointment_course_dates') }}?courseId=${course.id}`);
                        const datesData = await datesResp.json();
                        if (datesData.success && Array.isArray(datesData.dates)) {
                            const hasFree = datesData.dates.some(d => d.available > 0);
                            if (hasFree) {
                                const option = document.createElement('option');
                                option.value = course.id;
                                option.textContent = `${course.name} (${course.maxSlots} Plätze)`;
                                courseSelect.appendChild(option);
                            }
                        }
                    }
                } else {
                    courseSelect.innerHTML = '<option value="">Keine Kurse verfügbar</option>';
                }
                courseSelect.disabled = false;
            } catch (error) {
                console.error('Fehler beim Laden der Kurse:', error);
                courseSelect.innerHTML = '<option value="">Fehler beim Laden der Kurse</option>';
                courseSelect.disabled = false;
            }
        });
        locationSelect.dataset.listenerSet = 'true';
    }

    // Event-Listener für Kursauswahl (Datum/Uhrzeit automatisch setzen)
    if (courseSelect && !courseSelect.dataset.listenerSet) {
        courseSelect.addEventListener('change', async function() {
            const courseId = this.value;
            const dateInput = document.getElementById('createAppointmentDate');
            const startTimeInput = document.getElementById('createAppointmentStartTime');
            const endTimeInput = document.getElementById('createAppointmentEndTime');
            const extraFieldsContainer = document.getElementById('createAppointmentExtraFields');
            const extraFieldsDiv = document.getElementById('createAppointmentExtraFieldsContainer');
            const blockInfoDiv = document.getElementById('blockTermineInfo');
            if (!courseId) {
                extraFieldsContainer.style.display = 'none';
                dateInput.value = '';
                startTimeInput.value = '';
                endTimeInput.value = '';
                if (blockInfoDiv) blockInfoDiv.style.display = 'none';
                return;
            }
            // Lade Termine für Kurs
            try {
                const datesResp = await fetch(`{{ path('appointment_course_dates') }}?courseId=${courseId}`);
                const datesData = await datesResp.json();
                if (datesData.success && Array.isArray(datesData.dates)) {
                    if (datesData.dates.length === 1) {
                        // Einzeltermin: Felder wie gehabt setzen
                        const t = datesData.dates[0];
                        dateInput.value = t.date;
                        startTimeInput.value = t.startTime;
                        endTimeInput.value = t.endTime;
                        
                        // Pflichtfelder für Einzeltermin setzen
                        dateInput.setAttribute('required', 'required');
                        startTimeInput.setAttribute('required', 'required');
                        endTimeInput.setAttribute('required', 'required');
                        
                        if (blockInfoDiv) blockInfoDiv.style.display = 'none';
                    } else if (datesData.dates.length > 1) {
                        // Blockkurs: Felder leer lassen, Übersicht anzeigen
                        dateInput.value = '';
                        startTimeInput.value = '';
                        endTimeInput.value = '';
                        
                        // Pflichtfelder für Blocktermine entfernen
                        dateInput.removeAttribute('required');
                        startTimeInput.removeAttribute('required');
                        endTimeInput.removeAttribute('required');
                        
                        // Zusätzlich die Felder visuell als optional markieren
                        dateInput.classList.remove('is-invalid');
                        startTimeInput.classList.remove('is-invalid');
                        endTimeInput.classList.remove('is-invalid');
                        
                        if (blockInfoDiv) {
                            blockInfoDiv.innerHTML = '<b>Blocktermine:</b><ul>' +
                                datesData.dates.map(d => `<li>${d.date} ${d.startTime} - ${d.endTime}</li>`).join('') +
                                '</ul><div class="alert alert-info mt-2"><i class="fas fa-info-circle me-2"></i><strong>Blocktermine erkannt:</strong> Die Datum/Zeit-Felder sind für Blocktermine nicht erforderlich.</div>';
                            blockInfoDiv.style.display = 'block';
                        }
                    }
                }
            } catch (error) {
                console.error('Fehler beim Laden der Kurs-Termine:', error);
            }
            // Zusatzfelder für den Kurs laden
            fetch(`{{ path('appointment_extra_fields', {'courseId': '__COURSE_ID__'}) }}`.replace('__COURSE_ID__', courseId))
                .then(response => response.json())
                .then(data => {
                    if (data.extraFields && data.extraFields.length > 0) {
                        extraFieldsDiv.innerHTML = '';
                        data.extraFields.forEach(field => {
                            const fieldDiv = document.createElement('div');
                            fieldDiv.className = 'col-md-6 mb-3';
                            let inputHtml = '';
                            switch (field.type) {
                                case 'text':
                                    inputHtml = `<input type=\"text\" class=\"form-control\" name=\"extra_${field.id}\" placeholder=\"${field.label}\">`;
                                    break;
                                case 'email':
                                    inputHtml = `<input type=\"email\" class=\"form-control\" name=\"extra_${field.id}\" placeholder=\"${field.label}\">`;
                                    break;
                                case 'tel':
                                    inputHtml = `<input type=\"tel\" class=\"form-control\" name=\"extra_${field.id}\" placeholder=\"${field.label}\">`;
                                    break;
                                case 'date':
                                    inputHtml = `<input type=\"date\" class=\"form-control\" name=\"extra_${field.id}\">`;
                                    break;
                                case 'textarea':
                                    inputHtml = `<textarea class=\"form-control\" name=\"extra_${field.id}\" rows=\"3\" placeholder=\"${field.label}\"></textarea>`;
                                    break;
                                case 'select':
                                    const options = field.options.map(opt => `<option value=\"${opt}\">${opt}</option>`).join('');
                                    inputHtml = `<select class=\"form-select\" name=\"extra_${field.id}\"><option value=\"\">${field.label}</option>${options}</select>`;
                                    break;
                                default:
                                    inputHtml = `<input type=\"text\" class=\"form-control\" name=\"extra_${field.id}\" placeholder=\"${field.label}\">`;
                            }
                            fieldDiv.innerHTML = `
                                <label class=\"form-label\">${field.label}${field.required ? ' *' : ''}</label>
                                ${inputHtml}
                            `;
                            extraFieldsDiv.appendChild(fieldDiv);
                        });
                        extraFieldsContainer.style.display = 'block';
                    } else {
                        extraFieldsContainer.style.display = 'none';
                    }
                })
                .catch(error => {
                    console.error('Fehler beim Laden der Zusatzfelder:', error);
                    extraFieldsContainer.style.display = 'none';
                });
        });
        courseSelect.dataset.listenerSet = 'true';
    }

    // Modal öffnen
    const modal = new bootstrap.Modal(document.getElementById('createAppointmentModal'));
    modal.show();
}

// Kurse basierend auf Standort laden
document.addEventListener('DOMContentLoaded', function() {
    // Standort-Auswahl für manuelle Terminerstellung
    const locationSelect = document.getElementById('createAppointmentLocation');
    const courseSelect = document.getElementById('createAppointmentCourse');
    if (locationSelect && courseSelect) {
        locationSelect.addEventListener('change', function() {
            const locationId = this.value;
            console.log('Standort geändert:', locationId); // Debug
            if (!locationId) {
                courseSelect.disabled = true;
                courseSelect.innerHTML = '<option value="">Zuerst Standort auswählen...</option>';
                return;
            }
            // Lade Kurse für Standort
            fetch(`{{ path('appointment_courses_for_location', {'locationId': '__LOCATION_ID__'}) }}`.replace('__LOCATION_ID__', locationId))
                .then(response => response.json())
                .then(data => {
                    courseSelect.disabled = false;
                    courseSelect.innerHTML = '<option value="">Kurs auswählen...</option>';
                    if (data.success && data.courses) {
                        data.courses.forEach(course => {
                            const option = document.createElement('option');
                            option.value = course.id;
                            option.textContent = `${course.name} (${course.maxSlots} Plätze)`;
                            courseSelect.appendChild(option);
                        });
                    } else {
                        courseSelect.innerHTML = '<option value="">Keine Kurse verfügbar</option>';
                    }
                })
                .catch(error => {
                    console.error('Fehler beim Laden der Kurse:', error);
                    courseSelect.innerHTML = '<option value="">Fehler beim Laden der Kurse</option>';
                });
        });
    }
});
// Zusatzfelder laden wenn Kurs ausgewählt wird
document.getElementById('createAppointmentCourse').addEventListener('change', function() {
    const courseId = this.value;
    const extraFieldsContainer = document.getElementById('createAppointmentExtraFields');
    const extraFieldsDiv = document.getElementById('createAppointmentExtraFieldsContainer');
    
    if (!courseId) {
        extraFieldsContainer.style.display = 'none';
        return;
    }
    
    // Zusatzfelder für den Kurs laden
            fetch(`{{ path('appointment_extra_fields', {'courseId': '__COURSE_ID__'}) }}`.replace('__COURSE_ID__', courseId))
        .then(response => response.json())
        .then(data => {
            if (data.extraFields && data.extraFields.length > 0) {
                extraFieldsDiv.innerHTML = '';
                
                data.extraFields.forEach(field => {
                    const fieldDiv = document.createElement('div');
                    fieldDiv.className = 'col-md-6 mb-3';
                    
                    let inputHtml = '';
                    switch (field.type) {
                        case 'text':
                            inputHtml = `<input type="text" class="form-control" name="extra_${field.id}" placeholder="${field.label}">`;
                            break;
                        case 'email':
                            inputHtml = `<input type="email" class="form-control" name="extra_${field.id}" placeholder="${field.label}">`;
                            break;
                        case 'tel':
                            inputHtml = `<input type="tel" class="form-control" name="extra_${field.id}" placeholder="${field.label}">`;
                            break;
                        case 'date':
                            inputHtml = `<input type="date" class="form-control" name="extra_${field.id}">`;
                            break;
                        case 'textarea':
                            inputHtml = `<textarea class="form-control" name="extra_${field.id}" rows="3" placeholder="${field.label}"></textarea>`;
                            break;
                        case 'select':
                            const options = field.options.map(opt => `<option value="${opt}">${opt}</option>`).join('');
                            inputHtml = `<select class="form-select" name="extra_${field.id}"><option value="">${field.label}</option>${options}</select>`;
                            break;
                        default:
                            inputHtml = `<input type="text" class="form-control" name="extra_${field.id}" placeholder="${field.label}">`;
                    }
                    
                    fieldDiv.innerHTML = `
                        <label class="form-label">${field.label}${field.required ? ' *' : ''}</label>
                        ${inputHtml}
                    `;
                    extraFieldsDiv.appendChild(fieldDiv);
                });
                
                extraFieldsContainer.style.display = 'block';
            } else {
                extraFieldsContainer.style.display = 'none';
            }
        })
        .catch(error => {
            console.error('Fehler beim Laden der Zusatzfelder:', error);
            extraFieldsContainer.style.display = 'none';
        });
});

// Button für manuelle Terminerstellung
function initializeCreateAppointmentButton() {
    const saveButton = document.getElementById('saveCreateAppointment');
    if (saveButton) {
        // Entferne eventuelle bestehende Event-Listener
        saveButton.removeEventListener('click', handleCreateAppointment);
        // Füge neuen Event-Listener hinzu
        saveButton.addEventListener('click', handleCreateAppointment);
    }
}

window.handleCreateAppointment = function() {
    console.log('Button geklickt!'); // Debug
    
    const form = document.getElementById('createAppointmentForm');
    if (!form) {
        console.error('Formular nicht gefunden!');
        return;
    }
    
    // Sammle alle Formulardaten
    const formData = new FormData();
    
    // Basis-Daten
    formData.append('locationId', document.getElementById('createAppointmentLocation').value);
    formData.append('courseId', document.getElementById('createAppointmentCourse').value);
    formData.append('date', document.getElementById('createAppointmentDate').value);
    formData.append('startTime', document.getElementById('createAppointmentStartTime').value);
    formData.append('endTime', document.getElementById('createAppointmentEndTime').value);
    formData.append('firstName', document.getElementById('createAppointmentFirstName').value);
    formData.append('lastName', document.getElementById('createAppointmentLastName').value);
    formData.append('email', document.getElementById('createAppointmentEmail').value);
    formData.append('phone', document.getElementById('createAppointmentPhone').value);
    formData.append('birthDate', document.getElementById('createAppointmentBirthDate').value);
    formData.append('status', document.getElementById('createAppointmentStatus').value);
    formData.append('notes', document.getElementById('createAppointmentNotes').value);
    
    // Zusatzfelder sammeln
    const extraFields = document.querySelectorAll('#createAppointmentExtraFieldsContainer input, #createAppointmentExtraFieldsContainer select, #createAppointmentExtraFieldsContainer textarea');
    extraFields.forEach(field => {
        if (field.name && field.value) {
            formData.append(field.name, field.value);
        }
    });
    
    console.log('Sende Daten:', Object.fromEntries(formData)); // Debug
    
    fetch(`{{ path('appointment_create_admin') }}`, {
        method: 'POST',
        body: formData
    })
    .then(response => {
        console.log('Response Status:', response.status); // Debug
        return response.json();
    })
    .then(data => {
        console.log('Response Data:', data); // Debug
        if (data.success) {
            // Modal schließen
            const modal = bootstrap.Modal.getInstance(document.getElementById('createAppointmentModal'));
            if (modal) {
                modal.hide();
            }
            
            // Erfolgsmeldung anzeigen
            alert('Termin erfolgreich erstellt!');
            
            // Seite neu laden um die Änderungen zu sehen
            location.reload();
        } else {
            alert('Fehler beim Erstellen des Termins: ' + (data.message || 'Unbekannter Fehler'));
        }
    })
    .catch(error => {
        console.error('Fehler beim Erstellen des Termins:', error);
        alert('Fehler beim Erstellen des Termins: ' + error.message);
    });
}

// Event-Listener beim Laden der Seite
document.addEventListener('DOMContentLoaded', function() {
    initializeCreateAppointmentButton();
});

// Event-Listener wenn Modal geöffnet wird
document.addEventListener('shown.bs.modal', function(event) {
    if (event.target.id === 'createAppointmentModal') {
        initializeCreateAppointmentButton();
    }
});

// Formular für manuelle Terminerstellung absenden
document.getElementById('createAppointmentForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    
    fetch(`{{ path('appointment_create_admin') }}`, {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Modal schließen
            const modal = bootstrap.Modal.getInstance(document.getElementById('createAppointmentModal'));
            modal.hide();
            
            // Erfolgsmeldung anzeigen
            alert('Termin erfolgreich erstellt!');
            
            // Seite neu laden um die Änderungen zu sehen
            location.reload();
        } else {
            alert('Fehler beim Erstellen des Termins: ' + (data.message || 'Unbekannter Fehler'));
        }
    })
    .catch(error => {
        console.error('Fehler beim Erstellen des Termins:', error);
        alert('Fehler beim Erstellen des Termins: ' + error.message);
    });
});

// ... bestehender Code ...
// DataTable für Teilnehmerliste immer sauber zerstören und Fokus entfernen
$('#participantsModal').on('hidden.bs.modal', function () {
    if ($.fn.DataTable.isDataTable('#participantsTable')) {
        $('#participantsTable').DataTable().destroy();
    }
    // Fokus vom Modal entfernen, um aria-hidden Fehler zu vermeiden
    document.activeElement?.blur();
});

// Zusätzlich beim Schließen-Button
$('#closeParticipantsModal').on('click', function() {
    // Fokus entfernen bevor Modal schließt
    document.activeElement?.blur();
});

// ... bestehender Code ...
// Vor jeder Neuinitialisierung:
function showParticipantsTable() {
    if ($.fn.DataTable.isDataTable('#participantsTable')) {
        $('#participantsTable').DataTable().destroy();
    }
    initOrUpdateDataTable('#participantsTable');
}
// ... und überall dort, wo Teilnehmer geladen werden, showParticipantsTable() statt direkt initOrUpdateDataTable('#participantsTable') aufrufen ...

// Hilfsfunktion: Spaltenanzahl für participantsTable dynamisch ermitteln
function getParticipantsColspan() {
    // Alle sichtbaren th im thead zählen
    return document.querySelectorAll('#participantsTable thead th:not([style*="display: none"])').length;
}

</script>

{% endblock %}