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

{% block title %}Termin buchen{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('js/vendor/fullcalendar.min.css') }}" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        /* Bootstrap-styled Calendar */
        .fc {
            background: var(--bs-body-bg);
            border-radius: 0.375rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }


        .fc .fc-toolbar {
            padding: 1rem;
            background: var(--bs-tertiary-bg);
            border-radius: 0.375rem 0.375rem 0 0;
            margin-bottom: 0 !important;
        }

        .fc .fc-toolbar-title {
            font-size: 1.25rem;
            font-weight: 500;
            color: var(--bs-body-color);
        }

        .fc .fc-button {
            padding: 0.375rem 0.75rem;
            font-size: 0.875rem;
            border-radius: 0.25rem;
            font-weight: 500;
            text-transform: none;
            box-shadow: none !important;
        }

        .fc .fc-button-primary {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            color: var(--bs-white);
        }

        .fc .fc-button-primary:hover {
            background-color: var(--bs-primary-hover);
            border-color: var(--bs-primary-hover);
        }

        .fc .fc-button-primary:not(:disabled).fc-button-active {
            background-color: var(--bs-primary-active);
            border-color: var(--bs-primary-active);
            color: white;
            font-weight: bold;
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        }

        .fc .fc-button-primary:not(:disabled).fc-button-active:hover {
            background-color: var(--bs-primary-active);
            border-color: var(--bs-primary-active);
            color: white;
        }

        .fc .fc-button-primary:disabled {
            background-color: var(--bs-secondary);
            border-color: var(--bs-secondary);
        }

        .fc .fc-timegrid-slot {
            height: 3.5rem !important; /* Increased height */
        }

        .fc .fc-timegrid-slot-label {
            font-size: 0.875rem;
            color: var(--bs-secondary-color);
            padding: 0.5rem;
        }

        .fc .fc-col-header-cell {
            padding: 0.5rem 0;
            background: var(--bs-tertiary-bg);
        }

        .fc .fc-col-header-cell-cushion {
            padding: 0.5rem;
            color: var(--bs-body-color);
            text-decoration: none;
            font-weight: 500;
        }

        .fc .fc-day-today {
            background-color: var(--bs-primary-bg-subtle) !important;
        }

        .fc .fc-event {
            border-radius: 0.25rem;
            border: none;
            padding: 0.5rem;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            margin: 0.125rem 0.25rem;
            min-height: 2.5rem;
            display: flex;
            align-items: center;
        }

        .fc .fc-event:hover {
            transform: scale(1.02);
        }

        .fc .fc-event.available-slot {
            background-color: var(--bs-success);
            border-left: 4px solid var(--bs-success-border-subtle);
            color: var(--bs-white);
        }

        .fc .fc-event.partially-booked-slot {
            background-color: var(--bs-warning);
            border-left: 4px solid var(--bs-warning-border-subtle);
            color: var(--bs-dark);
        }

        .fc .fc-event.booked-slot {
            background-color: var(--bs-danger);
            border-left: 4px solid var(--bs-danger-border-subtle);
            color: var(--bs-white);
        }

        .fc .fc-event.selected-slot {
            background-color: var(--bs-primary);
            border-left: 4px solid var(--bs-primary-border-subtle);
            color: var(--bs-white);
        }

        .fc .fc-timegrid-now-indicator-line {
            border-color: var(--bs-danger);
        }

        .fc .fc-timegrid-now-indicator-arrow {
            border-color: var(--bs-danger);
        }

        .fc .fc-scrollgrid {
            border: 1px solid var(--bs-border-color);
        }

        .fc .fc-scrollgrid-section > * {
            border: 1px solid var(--bs-border-color);
        }

        .fc .fc-timegrid-axis {
            padding: 0.5rem;
            background: var(--bs-tertiary-bg);
        }

        .fc .fc-timegrid-axis-cushion {
            color: var(--bs-secondary-color);
            font-size: 0.875rem;
        }

        /* Loading Overlay Styles */
        .calendar-loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bs-body-bg-rgb, 255, 255, 255, 0.8);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            border-radius: 0.375rem;
        }

        .calendar-loading-overlay.active {
            display: flex;
        }

        .loading-spinner {
            width: 3rem;
            height: 3rem;
            border: 0.25rem solid var(--bs-border-color);
            border-top-color: var(--bs-primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Calendar Container */
        #calendar-container {
            position: relative;
            min-height: 650px;
        }

        /* Dark mode adjustments */
        [data-bs-theme="dark"] .fc {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
        }

        [data-bs-theme="dark"] .fc .fc-event {
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
        }

        /* Participants Modal Styles */
        .fc-event-info-icon {
            opacity: 0.8;
            transition: opacity 0.2s;
            position: absolute;
            right: 5px;
            top: 5px;
            color: white;
            cursor: pointer;
            z-index: 1000;
        }

        .fc-event-info-icon:hover {
            opacity: 1;
        }

        .fc-event {
            position: relative;
        }

        #participantsModal .table th {
            font-weight: 500;
            color: var(--bs-secondary-color);
        }

        #participantsModal .badge {
            font-size: 0.875rem;
            padding: 0.5em 0.75em;
        }

        #participantsModal .btn-sm {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
        }

        /* Accessibility Improvements */
        .fc .fc-event:focus {
            outline: 3px solid var(--bs-primary);
            outline-offset: 2px;
        }

        .fc .fc-button:focus {
            outline: 3px solid var(--bs-primary);
            outline-offset: 2px;
        }

        .form-control:focus {
            outline: 3px solid var(--bs-primary);
            outline-offset: 2px;
        }

        .btn:focus {
            outline: 3px solid var(--bs-primary);
            outline-offset: 2px;
        }

        .btn:disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }

        .fc-event.selected-slot {
            outline: 3px solid var(--bs-primary);
            outline-offset: 2px;
        }

        /* Visual feedback for form validation */
        .form-control.is-invalid:focus {
            outline-color: var(--bs-danger);
        }

        .form-control.is-valid:focus {
            outline-color: var(--bs-success);
        }

        /* Screen reader only class */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Live region for announcements */
        .aria-live-region {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        /* Privacy Policy Checkbox Styles */
        .privacy-policy-container {
            background-color: var(--bs-tertiary-bg);
            border: 1px solid var(--bs-border-color);
            border-radius: 0.375rem;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .privacy-policy-container .form-check {
            margin-bottom: 0;
        }

        .privacy-policy-container .form-check-label {
            font-weight: 500;
        }

        .privacy-policy-container .required-asterisk {
            color: var(--bs-danger);
            margin-left: 0.25rem;
        }

        .privacy-policy-container .form-check-input:checked {
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
        }

        .privacy-policy-container .form-check-input:focus {
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
        }

        /* Kurs-Typ Filter Styles */
        .course-filter {
            background: var(--bs-tertiary-bg);
            border-radius: 0.375rem;
            padding: 1rem;
            margin-bottom: 1rem;
        }

        .course-filter .btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .course-filter .btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            font-weight: 500;
        }

        .course-filter .btn.active {
            color: white;
        }

        .course-filter .btn.recurring {
            background-color: #28a745;
            border-color: #28a745;
        }

        .course-filter .btn.recurring:hover,
        .course-filter .btn.recurring.active {
            background-color: #218838;
            border-color: #1e7e34;
        }

        .course-filter .btn.limited {
            background-color: #17a2b8;
            border-color: #17a2b8;
        }

        .course-filter .btn.limited:hover,
        .course-filter .btn.limited.active {
            background-color: #138496;
            border-color: #117a8b;
        }

        .course-filter .btn.holiday {
            background-color: #ffc107;
            border-color: #ffc107;
            color: #000;
        }

        .course-filter .btn.holiday:hover,
        .course-filter .btn.holiday.active {
            background-color: #e0a800;
            border-color: #d39e00;
        }

        /* Kurs-Typ Icons in Events */
        .fc-event-title {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .fc-event-title::before {
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
        }

        .fc-event.recurring-course .fc-event-title::before {
            content: "\f2f1"; /* fa-sync-alt */
        }

        .fc-event.limited-course .fc-event-title::before {
            content: "\f073"; /* fa-calendar-alt */
        }

        .fc-event.holiday-course .fc-event-title::before {
            content: "\f5ca"; /* fa-umbrella-beach */
        }

        /* Formular-Styles */
        .booking-form {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-top: 2rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 0.5rem;
            display: block;
        }

        .form-control {
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            transition: all 0.3s ease;
            width: 100%;
        }

        .form-control:focus {
            border-color: #4CAF50;
            box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25);
        }

        .form-control::placeholder {
            color: #adb5bd;
        }

        .swimmer-status-group {
            display: flex;
            gap: 1rem;
            margin-top: 0.5rem;
        }

        .swimmer-status-option {
            flex: 1;
        }

        .swimmer-status-option input[type="radio"] {
            display: none;
        }

        .swimmer-status-option label {
            display: block;
            padding: 0.75rem;
            text-align: center;
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .swimmer-status-option input[type="radio"]:checked + label {
            background: #4CAF50;
            color: white;
            border-color: #4CAF50;
        }

        .swimmer-status-option label:hover {
            background: #e9ecef;
        }

        .swimmer-status-option input[type="radio"]:checked + label:hover {
            background: #43A047;
        }

        .btn-book {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 1rem 2rem;
            border-radius: 8px;
            font-weight: 600;
            width: 100%;
            transition: all 0.3s ease;
        }

        .btn-book:hover {
            background: #43A047;
            transform: translateY(-2px);
        }

        .btn-book:disabled {
            background: #adb5bd;
            cursor: not-allowed;
            transform: none;
        }

        .form-row {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        @media (max-width: 768px) {
            .form-row {
                grid-template-columns: 1fr;
            }
        }

        .form-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .form-header h3 {
            color: #2c3e50;
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .form-header p {
            color: #6c757d;
            margin: 0;
        }

        .required-field::after {
            content: "*";
            color: #dc3545;
            margin-left: 4px;
        }

        /* Mobile List View Styles */
        .mobile-list-view {
            display: none;
            margin-top: 1rem;
        }

        .mobile-list-view .list-group-item {
            border-left: 4px solid transparent;
            margin-bottom: 0.5rem;
            border-radius: 0.375rem;
        }

        .mobile-list-view .list-group-item.recurring-course {
            border-left-color: #28a745;
        }

        .mobile-list-view .list-group-item.limited-course {
            border-left-color: #17a2b8;
        }

        .mobile-list-view .list-group-item.holiday-course {
            border-left-color: #ffc107;
        }

        .mobile-list-view .list-group-item.booked-slot {
            border-left-color: #dc3545;
        }

        .mobile-list-view .list-group-item.selected-slot {
            border-left-color: #0056b3;
        }

        .mobile-list-view .course-time {
            font-size: 0.875rem;
            color: var(--bs-secondary-color);
        }

        .mobile-list-view .course-location {
            font-size: 0.875rem;
            color: var(--bs-secondary-color);
        }

        .mobile-list-view .course-slots {
            font-size: 0.875rem;
            color: var(--bs-secondary-color);
        }

        .mobile-list-view .course-type {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 1rem;
            margin-left: 0.5rem;
        }

        .mobile-list-view .course-type.recurring {
            background-color: #28a745;
            color: white;
        }

        .mobile-list-view .course-type.limited {
            background-color: #17a2b8;
            color: white;
        }

        .mobile-list-view .course-type.holiday {
            background-color: #ffc107;
            color: black;
        }

        /* Responsive Calendar Adjustments */
        @media (max-width: 768px) {
            .fc {
                font-size: 0.875rem;
            }

            .fc .fc-toolbar {
                flex-direction: column;
                gap: 0.5rem;
            }

            .fc .fc-toolbar-title {
                font-size: 1.1rem;
            }

            .fc .fc-button {
                padding: 0.25rem 0.5rem;
                font-size: 0.75rem;
            }

            .fc .fc-timegrid-slot {
                height: 2.5rem !important;
            }

            .fc .fc-event {
                font-size: 0.75rem;
                padding: 0.25rem;
            }
        }

        /* Show/Hide Calendar/List based on screen size */
        @media (max-width: 576px) {
            #calendar-container {
                display: none;
            }

            .mobile-list-view {
                display: block;
            }

            .course-filter {
                margin-bottom: 0.5rem;
            }

            .course-filter .btn-group {
                flex-direction: column;
            }

            .course-filter .btn {
                width: 100%;
                margin-bottom: 0.25rem;
            }
        }

        /* Mobile List View Navigation */
        .mobile-list-navigation {
            display: none;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 1rem;
            padding: 0.5rem;
            background: var(--bs-tertiary-bg);
            border-radius: 0.375rem;
        }

        .mobile-list-navigation .current-week {
            font-weight: 500;
            text-align: center;
            flex-grow: 1;
        }

        .mobile-list-navigation .nav-button {
            background: none;
            border: none;
            color: var(--bs-primary);
            padding: 0.5rem;
            font-size: 1.25rem;
            cursor: pointer;
            transition: color 0.2s;
        }

        .mobile-list-navigation .nav-button:hover {
            color: var(--bs-primary-hover);
        }

        .mobile-list-navigation .nav-button:disabled {
            color: var(--bs-secondary);
            cursor: not-allowed;
        }

        @media (max-width: 576px) {
            .mobile-list-navigation {
                display: flex;
            }
        }

        /* Swipe Animation */
        .mobile-list-view {
            touch-action: pan-y pinch-zoom;
            transition: transform 0.3s ease-out;
        }

        .mobile-list-view.swiping {
            transition: none;
        }

        .course-schedule {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
        }

        .schedule-list {
            max-height: 200px;
            overflow-y: auto;
        }

        .schedule-item {
            display: flex;
            align-items: center;
            padding: 8px;
            border-bottom: 1px solid #dee2e6;
        }

        .schedule-item:last-child {
            border-bottom: none;
        }

        .schedule-item .date {
            flex: 0 0 100px;
            font-weight: 500;
        }

        .schedule-item .time {
            flex: 0 0 120px;
        }

        .schedule-item .location {
            flex: 1;
            color: #6c757d;
        }

        .schedule-item .status {
            flex: 0 0 100px;
            text-align: right;
        }

        .schedule-item .status.available {
            color: #28a745;
        }

        .schedule-item .status.full {
            color: #dc3545;
        }
        
        .course-note {
            background-color: #fff3cd;
            border: 1px solid #ffeeba;
            color: #856404;
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            font-size: 0.9em;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .course-note i {
            color: #856404;
        }

        /* Füge diese CSS-Styles im style-Block hinzu */
        .fc-event.formatted-event {
            white-space: pre-line;
            line-height: 1.4;
            padding: 8px;
        }

        .fc-event.formatted-event .fc-event-title {
            font-size: 1.1em;
            font-weight: bold;
            margin-bottom: 4px;
        }

        .fc-event.formatted-event .fc-event-title::first-line {
            font-size: 1.2em;
            font-weight: bold;
        }

        /* Spezielle Styles für Monatsansicht */
        .fc-dayGridMonth-view .fc-event {
            margin: 1px 0;
            padding: 2px 4px;
        }

        .fc-dayGridMonth-view .fc-event.recurring-course {
            background-color: #28a745 !important;
            border-color: #28a745 !important;
        }

        .fc-dayGridMonth-view .fc-event.limited-course {
            background-color: #17a2b8 !important;
            border-color: #17a2b8 !important;
        }

        .fc-dayGridMonth-view .fc-event.holiday-course {
            background-color: #ffc107 !important;
            border-color: #ffc107 !important;
            color: #000 !important;
        }

        .fc-dayGridMonth-view .fc-event.booked-slot {
            background-color: #dc3545 !important;
            border-color: #dc3545 !important;
        }

        .section-title {
            color: #2c3e50;
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid #e9ecef;
        }

        .subsection-title {
            color: #2c3e50;
            font-size: 1.1rem;
            font-weight: 500;
            margin: 1rem 0 0.5rem;
        }

        .data-list, .rights-list {
            list-style: none;
            padding-left: 0;
        }

        .data-list li, .rights-list li {
            margin-bottom: 0.5rem;
            padding: 0.5rem;
            background-color: #f8f9fa;
            border-radius: 4px;
        }

        .contact-info {
            background-color: #f8f9fa;
            padding: 1rem;
            border-radius: 8px;
            margin: 1rem 0;
        }

        .privacy-content {
            max-height: 70vh;
            overflow-y: auto;
            padding-right: 1rem;
        }

        .privacy-content .container-header {
            display: none;
        }

        @media (min-width: 992px) {
            #bookingCard {
                position: sticky;
                top: 30px;
                z-index: 10;
            }
            /* Entferne sticky von .booking-form */
            .booking-form {
                position: static;
            }
        }
    </style>
{% endblock %}

{% block content %}
<!-- Add ARIA live region for announcements -->
<div class="aria-live-region" aria-live="polite" id="announcements"></div>

<div id="appointment-page" class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Zeitslot auswählen</h5>
            </div>
            <div class="card-body">
                <!-- Kurs-Typ Filter -->
                <div class="course-filter">
                    <div class="btn-group" role="group" aria-label="Kurs-Typ Filter">
                        <button type="button" class="btn recurring active" data-type="recurring_course">
                            <i class="fas fa-sync-alt"></i> Dauerhafte Kurse
                        </button>
                        <button type="button" class="btn limited active" data-type="limited_course">
                            <i class="fas fa-calendar-alt"></i> Begrenzte Kurse
                        </button>
                        <button type="button" class="btn holiday active" data-type="holiday_course">
                            <i class="fas fa-umbrella-beach"></i> Ferienkurse
                        </button>
                    </div>
                </div>

                <!-- Calendar View -->
                <div id="calendar-container" class="position-relative">
                    <div id="calendar" role="application" aria-label="Terminkalender"></div>
                    <!-- Loading-Indikator -->
                    <div id="calendar-loading" class="position-absolute w-100 h-100 d-none" style="background: rgba(255,255,255,0.8); z-index: 1000; top: 0; left: 0;">
                        <div class="d-flex justify-content-center align-items-center h-100">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Lade Termine...</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Mobile List View -->
                <div class="mobile-list-navigation">
                    <button class="nav-button" id="prevWeek">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <div class="current-week" id="currentWeekDisplay"></div>
                    <button class="nav-button" id="nextWeek">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                <div class="mobile-list-view">
                    <div class="list-group" id="mobileCourseList">
                        <!-- Will be populated by JavaScript -->
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card" id="bookingCard">
            <div class="card-header">
                <h5 class="card-title mb-0">Termin buchen</h5>
            </div>
            <div class="card-body">
                <!-- Buchungsformular -->
                <div class="booking-form" id="bookingForm">
                    <h3>Termin buchen</h3>
                    <div id="courseSchedule" class="course-schedule mb-4" style="display: none;">
                        <h4>Kursübersicht</h4>
                        <div class="schedule-list"></div>
                    </div>
                    <form id="appointmentForm">
                        <input type="hidden" id="courseId" name="courseId">
                        <input type="hidden" id="startTime" name="startTime">
                        <input type="hidden" id="endTime" name="endTime">
                        <input type="hidden" id="location" name="location">
                        <input type="hidden" id="selectedDate" name="selectedDate">
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label required-field" for="firstName">Vorname</label>
                                <input type="text" class="form-control" id="firstName" name="firstName" required>
                    </div>
                            <div class="form-group">
                                <label class="form-label required-field" for="lastName">Nachname</label>
                                <input type="text" class="form-control" id="lastName" name="lastName" required>
                    </div>
                    </div>

                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label required-field" for="email">E-Mail</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                            <div class="form-group">
                                <label class="form-label" for="phone">Telefon</label>
                                <input type="tel" class="form-control" id="phone" name="phone">
                    </div>
                            </div>

                        <div class="mb-3">
                            <label for="birthDate" class="form-label">Geburtsdatum (optional)</label>
                            <input type="date" class="form-control" id="birthDate" name="birthDate">
                        </div>

                        <!-- Zusatzfelder Container -->
                        <div id="extraFieldsContainer" class="mb-3" style="display: none;">
                            <h6 class="mb-3">
                                <i class="fas fa-plus me-2"></i>Zusätzliche Informationen
                            </h6>
                            <div id="extraFieldsList">
                                <!-- Wird dynamisch befüllt -->
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="form-label" for="notes">Anmerkungen</label>
                            <textarea class="form-control" id="notes" name="notes" rows="3"></textarea>
                        </div>

                        <div class="privacy-policy-container mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="privacyPolicy" name="privacyPolicy" required>
                                <label class="form-check-label" for="privacyPolicy">
                                    Ich stimme der <a href="{{ path('public_privacy') }}" target="_blank">Datenschutzerklärung</a> zu
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="invalid-feedback">Sie müssen der Datenschutzerklärung zustimmen.</div>
                            </div>
                        </div>

                        <button type="submit" class="btn-book btn-secondary btn-success" id="bookButton" disabled="">Kurs buchen</button>
                </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Datenschutzerklärung Modal -->
<div class="modal fade" id="privacyModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-shield-alt me-2"></i>Datenschutzerklärung
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                {% include 'privacy_content.html.twig' %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<!-- Buchungsformular -->
<div class="modal fade" id="bookingFormContainer" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Termin buchen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="bookingForm" class="needs-validation" novalidate>
                    <div class="mb-3">
                        <label for="firstName" class="form-label">Vorname <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="firstName" name="firstName" required>
                        <div class="invalid-feedback">Bitte geben Sie Ihren Vornamen ein.</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="lastName" class="form-label">Nachname <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="lastName" name="lastName" required>
                        <div class="invalid-feedback">Bitte geben Sie Ihren Nachnamen ein.</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="email" class="form-label">E-Mail <span class="text-danger">*</span></label>
                        <input type="email" class="form-control" id="email" name="email" required>
                        <div class="invalid-feedback">Bitte geben Sie eine gültige E-Mail-Adresse ein.</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="phone" class="form-label">Telefon (optional)</label>
                        <input type="tel" class="form-control" id="phone" name="phone">
                    </div>
                    
                    <div class="mb-3">
                        <label for="birthDate" class="form-label">Geburtsdatum (optional)</label>
                        <input type="date" class="form-control" id="birthDate" name="birthDate">
                    </div>
                    
                    <!-- Zusatzfelder Container -->
                    <div id="extraFieldsContainer" class="mb-3" style="display: none;">
                        <h6 class="mb-3">
                            <i class="fas fa-plus me-2"></i>Zusätzliche Informationen
                        </h6>
                        <div id="extraFieldsList">
                            <!-- Wird dynamisch befüllt -->
                        </div>
                    </div>
                    
                    <div class="privacy-policy-container mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="privacyPolicy" name="privacyPolicy" required>
                            <label class="form-check-label" for="privacyPolicy">
                                Ich stimme der <a href="{{ path('public_privacy') }}" target="_blank">Datenschutzerklärung</a> zu
                                <span class="text-danger">*</span>
                            </label>
                            <div class="invalid-feedback">Sie müssen der Datenschutzerklärung zustimmen.</div>
                        </div>
                    </div>

                    <div class="alert alert-danger d-none" id="errorMessage"></div>
                    <div class="alert alert-success d-none" id="successMessage"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="submit" class="btn btn-primary" id="bookButton" form="bookingForm">
                    <span class="spinner-border spinner-border-sm d-none" id="loadingSpinner" role="status" aria-hidden="true"></span>
                    Termin buchen
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Success Modal -->
<div class="modal fade" id="successModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-4">
                <div class="mb-4">
                    <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                </div>
                <h4 class="mb-3">Termin erfolgreich gebucht!</h4>
                <p class="mb-3">Wir haben Ihnen eine E-Mail zur Verifizierung Ihrer Buchung gesendet.</p>
                <p class="mb-4">Bitte überprüfen Sie Ihr E-Mail-Postfach und klicken Sie auf den Bestätigungslink, um Ihre Buchung zu aktivieren.</p>
                <button type="button" class="btn btn-success" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<!-- Slot Message Modal -->
<div class="modal fade" id="slotMessageModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-4">
                <div class="mb-4">
                    <i class="fas fa-info-circle text-primary" style="font-size: 4rem;"></i>
                </div>
                <h4 class="mb-3" id="slotMessageTitle">Information</h4>
                <p class="mb-4" id="slotMessageText"></p>
                <div class="modal-footer justify-content-center">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Warteliste Modal -->
<div class="modal fade" id="waitlistModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Auf Warteliste setzen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="waitlistForm" class="needs-validation" novalidate>
                    <input type="hidden" id="waitlistCourseId" name="courseId">
                    
                    <div class="mb-3">
                        <label for="waitlistFirstName" class="form-label">Vorname <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="waitlistFirstName" name="firstName" required>
                        <div class="invalid-feedback">Bitte geben Sie Ihren Vornamen ein.</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="waitlistLastName" class="form-label">Nachname <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="waitlistLastName" name="lastName" required>
                        <div class="invalid-feedback">Bitte geben Sie Ihren Nachnamen ein.</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="waitlistEmail" class="form-label">E-Mail <span class="text-danger">*</span></label>
                        <input type="email" class="form-control" id="waitlistEmail" name="email" required>
                        <div class="invalid-feedback">Bitte geben Sie eine gültige E-Mail-Adresse ein.</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="waitlistPhone" class="form-label">Telefon</label>
                        <input type="tel" class="form-control" id="waitlistPhone" name="phone">
                    </div>
                    
                    <div class="mb-3">
                        <label for="waitlistNotes" class="form-label">Anmerkungen</label>
                        <textarea class="form-control" id="waitlistNotes" name="notes" rows="3"></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="submitWaitlist">Auf Warteliste setzen</button>
            </div>
        </div>
    </div>
</div>

<!-- Warteliste Erfolgs-Modal -->
<div class="modal fade" id="waitlistSuccessModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center p-4">
                <div class="mb-4">
                    <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                </div>
                <h4 class="mb-3">Erfolgreich auf Warteliste gesetzt!</h4>
                <p class="mb-4">Sie wurden auf Position <span id="waitlistPosition"></span> der Warteliste gesetzt. Sie erhalten eine E-Mail, sobald ein Platz frei wird.</p>
                <button type="button" class="btn btn-success" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal für Teilnehmerliste -->
<div class="modal fade" id="participantsModal" tabindex="-1" aria-labelledby="participantsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="participantsModalLabel">Teilnehmerliste</h5>
                <div class="d-flex align-items-center">
                    <span class="badge bg-primary me-2" id="participantCount">0 von 12 Teilnehmern</span>
                    <button type="button" class="btn btn-sm btn-success me-2" id="exportExcel">
                        <i class="fas fa-file-excel"></i> Excel
                    </button>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>E-Mail</th>
                                <th>Telefon</th>
                                <th>Status</th>
                                <th>Aktionen</th>
                            </tr>
                        </thead>
                        <tbody id="participantsList">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/vendor/fullcalendar.min.js') }}"></script>
    <script src="{{ asset('js/vendor/fullcalendar-de.js') }}"></script>
    <script src="{{ asset('js/calendar-filters.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', async function() {
    const calendarEl = document.getElementById('calendar');
    const loadingOverlay = document.querySelector('#calendar-loading');
    const isAdmin = {{ app.user and (is_granted('ROLE_ADMIN') or is_granted('ROLE_SUPERADMIN')) ? 'true' : 'false' }};
    
    // Initialize submit button as disabled
    const submitButton = document.getElementById('bookButton');
    submitButton.disabled = true;
    submitButton.classList.add('btn-secondary');
    submitButton.classList.remove('btn-success');
    
    console.log('Is Admin:', isAdmin); // Debug output
    
    // Show loading overlay
    function showLoading() {
        if (loadingOverlay) {
            loadingOverlay.style.display = 'block';
        }
    }
    
    // Hide loading overlay
    function hideLoading() {
        if (loadingOverlay) {
            loadingOverlay.style.display = 'none';
        }
    }

    // Function to load participants
    async function loadParticipants(slotId) {
        try {
            const response = await fetch(`{{ path('appointment_slot_participants', {'slotId': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', slotId));
            if (!response.ok) {
                throw new Error('Fehler beim Laden der Teilnehmer');
            }
            return await response.json();
        } catch (error) {
            console.error('Fehler:', error);
            throw error;
        }
    }

    // Function to update check-in status
    async function updateCheckInStatus(bookingId, checkedIn) {
        try {
            const response = await fetch(`{{ path('appointment_update_check_in', {'appointmentId': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', bookingId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({ checkedIn })
            });
            if (!response.ok) {
                throw new Error('Fehler beim Aktualisieren des Check-in-Status');
            }
            return await response.json();
        } catch (error) {
            console.error('Fehler:', error);
            throw error;
        }
    }

    // Function to show participants modal
    function showParticipantsModal(slotId) {
        const modal = new bootstrap.Modal(document.getElementById('participantsModal'));
        modal.show();
        loadParticipants(slotId);
    }

    function loadParticipants(slotId) {
        fetch(`{{ path('appointment_slot_participants', {'slotId': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', slotId))
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const tbody = document.getElementById('participantsList');
                    tbody.innerHTML = '';
                    
                    // Update participant count
                    document.getElementById('participantCount').textContent = 
                        `${data.total} von ${data.maxSlots} Teilnehmern`;
                    
                    // Update export button
                    document.getElementById('exportExcel').onclick = () => {
                        window.location.href = `{{ path('appointment_export_participants', {'slotId': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', slotId);
                    };
                    
                    data.participants.forEach(participant => {
                        const tr = document.createElement('tr');
                        tr.innerHTML = `
                            <td>${participant.firstName} ${participant.lastName}</td>
                            <td>${participant.email}</td>
                            <td>${participant.phone || '-'}</td>
                            <td>
                                <span class="badge ${participant.checkedIn ? 'bg-success' : 'bg-secondary'}">
                                    ${participant.checkedIn ? 'Eingecheckt' : 'Nicht eingecheckt'}
                                </span>
                            </td>
                            <td>
                                <button class="btn btn-sm ${participant.checkedIn ? 'btn-warning' : 'btn-success'}"
                                        onclick="updateCheckIn(${participant.id}, ${!participant.checkedIn})">
                                    ${participant.checkedIn ? 'Auschecken' : 'Einchecken'}
                                </button>
                            </td>
                        `;
                        tbody.appendChild(tr);
                    });
                }
            })
            .catch(error => {
                console.error('Error loading participants:', error);
                alert('Fehler beim Laden der Teilnehmerliste');
            });
    }

    // Make updateCheckIn available globally
    window.updateCheckIn = async function(participantId, checkedIn) {
        try {
            console.log('Updating check-in status:', { participantId, checkedIn }); // Debug output
            const response = await fetch(`{{ path('appointment_update_check_in', {'appointmentId': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', participantId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({ checkedIn: checkedIn })
            });

            if (!response.ok) {
                throw new Error('Fehler beim Aktualisieren des Check-in-Status');
            }

            const data = await response.json();
            console.log('Update response:', data); // Debug output

            if (data.success) {
                // Reload the current slot's participants
                const currentSlot = calendar.getEventById(document.getElementById('participantsModal').dataset.currentSlotId);
                if (currentSlot) {
                    showParticipantsModal(currentSlot);
                }
            } else {
                throw new Error(data.error || 'Unbekannter Fehler');
            }
        } catch (error) {
            console.error('Fehler beim Aktualisieren des Check-in-Status:', error);
            alert('Fehler beim Aktualisieren des Check-in-Status: ' + error.message);
        }
    };

    // Mobile List View Navigation
    const mobileListView = document.querySelector('.mobile-list-view');
    const prevWeekButton = document.getElementById('prevWeek');
    const nextWeekButton = document.getElementById('nextWeek');
    const currentWeekDisplay = document.getElementById('currentWeekDisplay');
    let touchStartX = 0;
    let touchEndX = 0;
    const SWIPE_THRESHOLD = 50;

    // Update week display
    function updateWeekDisplay() {
        const currentDate = calendar.getDate();
        const weekStart = new Date(currentDate);
        weekStart.setDate(currentDate.getDate() - currentDate.getDay() + 1);
        const weekEnd = new Date(weekStart);
        weekEnd.setDate(weekStart.getDate() + 6);

        const options = { day: '2-digit', month: '2-digit' };
        currentWeekDisplay.textContent = `${weekStart.toLocaleDateString('de-DE', options)} - ${weekEnd.toLocaleDateString('de-DE', options)}`;
    }

    // Initial load of available slots
    async function loadInitialSlots() {
        showLoading();
        try {
            const today = new Date();
            const endDate = new Date(today);
            endDate.setDate(endDate.getDate() + 7); // Load next 7 days initially
            
            const loadPromises = [];
            const currentDate = new Date(today);
            
            while (currentDate < endDate) {
                loadPromises.push(loadAvailableSlots(new Date(currentDate)));
                currentDate.setDate(currentDate.getDate() + 1);
            }
            
            await Promise.all(loadPromises);
            updateWeekDisplay();
            updateMobileListView(calendar.getEvents());
        } catch (error) {
            console.error('Fehler beim initialen Laden der Termine:', error);
        } finally {
            hideLoading();
        }
    }

    // Cache für geladene Termine
    const slotCache = new Map();
    const CACHE_DURATION = 5 * 60 * 1000; // 5 Minuten

    async function loadAvailableSlots(date) {
        const localDate = new Date(date.getTime() - (date.getTimezoneOffset() * 60000));
        const dateKey = localDate.toISOString().split('T')[0];
        
        // Prüfe Cache
        const cached = slotCache.get(dateKey);
        if (cached && (Date.now() - cached.timestamp) < CACHE_DURATION) {
            return cached.slots;
        }

        const params = new URLSearchParams({
            date: dateKey
        });
        if (window.initialLocationId) {
            params.append('location', window.initialLocationId);
        }

        try {
            const response = await fetch(`{{ path('appointment_available_slots') }}?${params.toString()}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            if (!response.ok) {
                throw new Error(`HTTP-Fehler! Status: ${response.status}`);
            }
            
            const data = await response.json();
            
            if (!data.slots || data.slots.length === 0) {
                console.log('Keine Kurse verfügbar:', data.message);
                const emptySlots = [];
                slotCache.set(dateKey, { slots: emptySlots, timestamp: Date.now() });
                return emptySlots;
            }

            // Batch-Event-Hinzufügung
            const slots = data.slots.map(slot => {
                const startTime = new Date(date);
                const [startHours, startMinutes] = slot.start.split(':');
                startTime.setHours(parseInt(startHours), parseInt(startMinutes), 0);

                const endTime = new Date(date);
                const [endHours, endMinutes] = slot.end.split(':');
                endTime.setHours(parseInt(endHours), parseInt(endMinutes), 0);

                // Bestimme den Status des Kurses
                const isOverbooked = slot.available < 0;
                const isFullyBooked = slot.available === 0;
                const isPartiallyBooked = slot.available > 0 && slot.available < slot.max;
                
                // Bestimme die Farbe basierend auf dem Typ und Verfügbarkeit
                let typeColor = '#28a745'; // Standard: Grün für verfügbar
                let typeClass = 'available-slot';
                
                if (slot.type === 'holiday_course') {
                    typeColor = '#ffc107'; // Gelb für Ferienkurse
                    typeClass = 'holiday-course';
                } else if (slot.type === 'limited_course') {
                    typeColor = '#17a2b8'; // Blau für begrenzte Kurse
                    typeClass = 'limited-course';
                }
                
                // Wenn der Kurs ausgebucht ist, setze die Farbe auf Rot
                if (isOverbooked || isFullyBooked) {
                    typeColor = '#dc3545';
                    typeClass = 'booked-slot';
                } else if (isPartiallyBooked) {
                    typeColor = '#ffc107';
                    typeClass = 'partially-booked-slot';
                }

                // Erstelle den Titel mit allen relevanten Informationen
                const title = [
                    slot.courseName || 'Kurs',
                    `${slot.start} - ${slot.end}`,
                    slot.location || 'Kein Standort',
                    `${slot.available}/${slot.max} Plätze`
                ].filter(Boolean).join('\n');

                return {
                    id: `slot_${slot.containerId}_${startTime.getTime()}`,
                    title: title,
                    start: startTime,
                    end: endTime,
                    backgroundColor: typeColor,
                    borderColor: typeColor,
                    textColor: slot.type === 'holiday_course' ? '#000' : '#fff',
                    classNames: [
                        typeClass,
                        'formatted-event'
                    ],
                    extendedProps: {
                        available: slot.available || 0,
                        max: slot.max || 0,
                        containerId: slot.containerId || null,
                        courseId: slot.courseId,
                        courseName: slot.courseName || 'Kurs',
                        location: slot.location || 'Kein Standort',
                        booked: slot.max - slot.available,
                        type: slot.type,
                        startDate: slot.startDate,
                        endDate: slot.endDate,
                        numberOfSessions: slot.numberOfSessions,
                        sessionDuration: slot.sessionDuration,
                        courseDates: slot.courseDates || [],
                        extraFields: slot.extraFields || []
                    }
                };
            });

            // Cache das Ergebnis
            slotCache.set(dateKey, { slots: slots, timestamp: Date.now() });
            return slots;
        } catch (error) {
            console.error('Fehler beim Laden der verfügbaren Kurse:', error);
            return [];
        }
    }

    // Batch-Loading für mehrere Tage
    async function loadSlotsForDateRange(startDate, endDate) {
        // Nutze den neuen performanten Endpoint
        const params = new URLSearchParams({
            start: startDate.toISOString().split('T')[0],
            end: endDate.toISOString().split('T')[0]
        });
        if (window.initialLocationId) {
            params.append('location', window.initialLocationId);
        }
        try {
            const response = await fetch('{{ path('appointment_available_slots_range') }}?' + params.toString(), {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            });
            if (!response.ok) {
                throw new Error(`HTTP-Fehler! Status: ${response.status}`);
            }
            const data = await response.json();
            if (!data.slots || data.slots.length === 0) {
                return [];
            }
            // Mappe die Slots auf FullCalendar-Events
            return data.slots.map(slot => {
                const date = slot.date;
                const startTime = new Date(date + 'T' + slot.start);
                const endTime = new Date(date + 'T' + slot.end);
                // Bestimme den Status des Kurses
                const isOverbooked = slot.available < 0;
                const isFullyBooked = slot.available === 0;
                const isPartiallyBooked = slot.available > 0 && slot.available < slot.max;
                let typeColor = '#28a745';
                let typeClass = 'available-slot';
                if (slot.type === 'holiday_course') {
                    typeColor = '#ffc107';
                    typeClass = 'holiday-course';
                } else if (slot.type === 'limited_course') {
                    typeColor = '#17a2b8';
                    typeClass = 'limited-course';
                }
                if (isOverbooked || isFullyBooked) {
                    typeColor = '#dc3545';
                    typeClass = 'booked-slot';
                } else if (isPartiallyBooked) {
                    typeColor = '#ffc107';
                    typeClass = 'partially-booked-slot';
                }
                const title = [
                    slot.courseName || 'Kurs',
                    `${slot.start} - ${slot.end}`,
                    slot.location || 'Kein Standort',
                    `${slot.available}/${slot.max} Plätze`
                ].filter(Boolean).join('\n');
                return {
                    id: `slot_${slot.containerId}_${startTime.getTime()}`,
                    title: title,
                    start: startTime,
                    end: endTime,
                    backgroundColor: typeColor,
                    borderColor: typeColor,
                    textColor: slot.type === 'holiday_course' ? '#000' : '#fff',
                    classNames: [typeClass, 'formatted-event'],
                    extendedProps: {
                        available: slot.available || 0,
                        max: slot.max || 0,
                        containerId: slot.containerId || null,
                        courseId: slot.courseId,
                        courseName: slot.courseName || 'Kurs',
                        location: slot.location || 'Kein Standort',
                        booked: slot.max - slot.available,
                        type: slot.type,
                        startDate: slot.startDate,
                        endDate: slot.endDate,
                        numberOfSessions: slot.numberOfSessions,
                        sessionDuration: slot.sessionDuration,
                        courseDates: slot.courseDates || [],
                        extraFields: slot.extraFields || []
                    }
                };
            });
        } catch (error) {
            console.error('Fehler beim Laden der verfügbaren Kurse:', error);
            return [];
        }
    }

    // Initialize calendar
    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'timeGridWeek',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        },
        locale: 'de',
        firstDay: 1,
        slotMinTime: '08:00:00',
        slotMaxTime: '20:00:00',
        slotDuration: '0:15:00',
        selectable: true,
        selectMirror: true,
        dayMaxEvents: true,
        height: 'auto',
        contentHeight: 650,
        expandRows: true,
        buttonText: {
            today: 'Heute',
            month: 'Monat',
            week: 'Woche',
            day: 'Tag'
        },
        weekText: 'KW',
        allDaySlot: false,
        nowIndicator: true,
        slotLabelFormat: {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        },
        eventTimeFormat: {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        },
        lazyFetching: true,
        datesSet: function(info) {
            // Zeige Loading-Indikator
            const loadingIndicator = document.getElementById('calendar-loading');
            if (loadingIndicator) {
                loadingIndicator.style.display = 'block';
            }

            // Lade Termine für den sichtbaren Bereich
            loadSlotsForDateRange(info.start, info.end)
                .then(slots => {
                    // Entferne alte Events für den sichtbaren Bereich
                    const eventsToRemove = calendar.getEvents().filter(event => {
                        return event.start >= info.start && event.start <= info.end;
                    });
                    eventsToRemove.forEach(event => event.remove());

                    // Füge neue Events hinzu
                    slots.forEach(slot => {
                        calendar.addEvent(slot);
                    });

                    // Aktualisiere mobile Listenansicht
                updateMobileListView(calendar.getEvents());
                })
                .catch(error => {
                console.error('Fehler beim Laden der Termine:', error);
                })
                .finally(() => {
                    // Verstecke Loading-Indikator
                    if (loadingIndicator) {
                        loadingIndicator.style.display = 'none';
            }
                });
        },
        eventDidMount: function(info) {
            const event = info.event;

            // Add info icon for admins if the slot has any participants
            if (isAdmin && info.event.extendedProps.booked > 0) {
                const infoIcon = document.createElement('div');
                infoIcon.className = 'fc-event-info-icon';
                infoIcon.innerHTML = '<i class="fas fa-info-circle"></i>';
                infoIcon.onclick = (e) => {
                    e.stopPropagation();
                    showParticipantsModal(info.event.id);
                };
                info.el.appendChild(infoIcon);
            }

            // Setze die Höhe basierend auf der tatsächlichen Dauer
            const duration = event.end - event.start;
            const minutes = duration / (1000 * 60);
            const height = (minutes / 15) * 3.5; // 3.5rem pro 15 Minuten
            info.el.style.height = `${height}rem`;
            info.el.style.minHeight = '3.5rem';
            info.el.style.display = 'block';

            // Spezielle Formatierung für Monatsansicht
            if (info.view.type === 'dayGridMonth') {
                info.el.style.height = 'auto';
                info.el.style.minHeight = '2rem';
                info.el.style.padding = '2px 4px';
                info.el.style.fontSize = '0.8em';
                info.el.style.whiteSpace = 'normal';
                info.el.style.overflow = 'hidden';
                info.el.style.textOverflow = 'ellipsis';
            }
        },
        select: function(info) {
            // Reset all events to their default colors first
            calendar.getEvents().forEach(event => {
                event.setProp('backgroundColor', event.extendedProps.available > 0 ? '#28a745' : '#dc3545');
                event.setProp('borderColor', event.extendedProps.available > 0 ? '#28a745' : '#dc3545');
                event.setProp('classNames', event.extendedProps.available > 0 ? ['available-slot'] : ['booked-slot']);
            });

            // Finde alle Events, die den Slot abdecken (überlappen)
            const selectedTime = info.start;
            const matchingEvents = calendar.getEvents().filter(event => {
                return selectedTime >= event.start && 
                       selectedTime < event.end &&
                       event.start.toDateString() === info.start.toDateString();
            });
            
            if (matchingEvents.length === 0) {
                showSlotMessage('Kurs nicht verfügbar', 'Dieser Kurs ist nicht verfügbar.');
                calendar.unselect();
                return;
            }

            // Bevorzuge das Event mit freien Plätzen, falls nur eines verfügbar ist
            const availableEvents = matchingEvents.filter(ev => ev.extendedProps.available > 0);
            let selectedEvent = null;

            // Standortfilter prüfen
            const locationFilter = document.getElementById('locationFilter');
            let filteredAvailableEvents = availableEvents;
            if (locationFilter && locationFilter.value) {
                filteredAvailableEvents = availableEvents.filter(ev => {
                    // location kann als ID oder Objekt vorliegen
                    if (typeof ev.extendedProps.location === 'object' && ev.extendedProps.location !== null) {
                        return ev.extendedProps.location.id == locationFilter.value;
                    }
                    return ev.extendedProps.location == locationFilter.value;
                });
            }

            if (filteredAvailableEvents.length === 1) {
                selectedEvent = filteredAvailableEvents[0];
            } else if (filteredAvailableEvents.length > 1) {
                // Mehrere buchbare Events: Auswahl anzeigen (hier als alert, kann durch Modal ersetzt werden)
                const eventTitles = filteredAvailableEvents.map((ev, idx) => `${idx + 1}: ${ev.title}`).join('\n');
                const choice = prompt('Mehrere buchbare Kurse gefunden. Bitte wählen Sie (Nummer eingeben):\n' + eventTitles);
                const idx = parseInt(choice, 10) - 1;
                if (!isNaN(idx) && filteredAvailableEvents[idx]) {
                    selectedEvent = filteredAvailableEvents[idx];
                } else {
                    showSlotMessage('Keine Auswahl', 'Es wurde kein gültiger Kurs ausgewählt.');
                    calendar.unselect();
                    return;
                }
            } else if (availableEvents.length === 1) {
                // Fallback: Nur ein buchbares Event ohne Standortfilter
                selectedEvent = availableEvents[0];
            } else {
                // Nur ausgebuchte Events vorhanden
                selectedEvent = matchingEvents[0];
            }

            if (selectedEvent.extendedProps.available <= 0) {
                showSlotMessage('Kurs ausgebucht', 'Dieser Kurs ist bereits vollständig ausgebucht.');
                calendar.unselect();
                return;
            }
        
            // Markiere alle Termine des gleichen Kurses
            const courseId = selectedEvent.extendedProps.courseId;
            calendar.getEvents().forEach(event => {
                if (event.extendedProps.courseId === courseId) {
                    event.setProp('backgroundColor', '#0056b3');
                    event.setProp('borderColor', '#0056b3');
                    event.setProp('classNames', ['selected-slot']);
                }
            });
        
            // Store the selected time slot
            const bookingForm = document.getElementById('bookingForm');
            bookingForm.dataset.startTime = selectedEvent.start.toISOString();
            bookingForm.dataset.endTime = selectedEvent.end.toISOString();
            bookingForm.dataset.available = selectedEvent.extendedProps.available;
            bookingForm.dataset.courseId = courseId;
            
            // Enable the submit button
            const submitButton = document.getElementById('bookButton');
            submitButton.disabled = false;
            submitButton.classList.remove('btn-secondary');
            submitButton.classList.add('btn-success');

            if (selectedEvent) {
                checkSlotAvailability(selectedEvent.extendedProps.courseId).then(isAvailable => {
                    if (!isAvailable) {
                        calendar.unselect();
                        return;
                    }
                    announceToScreenReader(`Kurs ausgewählt: ${selectedEvent.title}`);
                    updateFormValidationState();
                    
                    // Finde alle Events des gleichen Kurses
                    const courseEvents = calendar.getEvents().filter(event => 
                        event.extendedProps.courseId === selectedEvent.extendedProps.courseId
                    );
                    
                    // Sortiere die Events nach Datum
                    courseEvents.sort((a, b) => a.start - b.start);
                    
                    // Zeige das Buchungsformular mit der Kursübersicht
                    showBookingForm({
                        type: selectedEvent.extendedProps.type,
                        start: selectedEvent.start.toTimeString().substring(0, 5),
                        end: selectedEvent.end.toTimeString().substring(0, 5),
                        available: selectedEvent.extendedProps.available,
                        max: selectedEvent.extendedProps.max,
                        location: selectedEvent.extendedProps.location,
                        courseId: selectedEvent.extendedProps.courseId,
                        courseName: selectedEvent.extendedProps.courseName,
                        courseEvents: courseEvents,
                        extraFields: selectedEvent.extendedProps.extraFields || []
                    });
                });
            }
        },
        eventClick: function(info) {
            if (info.event.extendedProps.available > 0) {
                calendar.select(info.event.start, info.event.end);
                announceToScreenReader(`Kurs ausgewählt: ${info.event.title}`);
                
                // Zeige das Buchungsformular mit der Kursübersicht
                showBookingForm({
                    type: info.event.extendedProps.type,
                    start: info.event.start.toTimeString().substring(0, 5),
                    end: info.event.extendedProps.end,
                    available: info.event.extendedProps.available,
                    max: info.event.extendedProps.max,
                    location: info.event.extendedProps.location,
                    courseId: info.event.extendedProps.courseId,
                    courseName: info.event.extendedProps.courseName,
                    startDate: info.event.start,
                    endDate: info.event.extendedProps.endDate,
                    courseDates: info.event.extendedProps.courseDates || [],
                    extraFields: info.event.extendedProps.extraFields || []
                });
            } else {
                // Speichere die Event-ID für die Warteliste
                document.getElementById('slotMessageModal').dataset.currentEventId = info.event.id;
                
                showSlotMessage(
                    'Kurs ausgebucht',
                    'Dieser Kurs ist bereits vollständig ausgebucht. Sie können sich auf die Warteliste setzen lassen.',
                    true
                );
            }
        },
        eventChange: function(info) {
            updateMobileListView(calendar.getEvents());
        }
    });
    
    calendar.render();
    window.calendar = calendar; // Make calendar globally available
    
    // Load slots for the current view
    async function loadCurrentViewSlots(view) {
        const startDate = view.currentStart;
        const endDate = view.currentEnd;
        
        // For week view, load slots for each day
        if (view.type === 'timeGridWeek') {
            const currentDate = new Date(startDate);
            const loadPromises = [];
            
            while (currentDate < endDate) {
                loadPromises.push(loadAvailableSlots(new Date(currentDate)));
                currentDate.setDate(currentDate.getDate() + 1);
            }
            
            await Promise.all(loadPromises);
        } else {
            // For day view, just load slots for the current day
            await loadAvailableSlots(startDate);
        }
    }
    
    // Handle form submission
    document.getElementById('appointmentForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const form = this;
        const submitButton = document.getElementById('bookButton');
        const loadingSpinner = document.getElementById('loadingSpinner');
        const errorMessage = document.getElementById('errorMessage');
        const successMessage = document.getElementById('successMessage');

        // Validiere das Formular
        if (!form.checkValidity()) {
            // Zeige Validierungsfehler an
            form.reportValidity();
            return;
        }

        // Verhindere mehrfache Requests - Button bereits deaktiviert?
        if (submitButton.disabled) {
            return;
        }
        
        // Deaktiviere den Submit-Button und zeige den Spinner
        submitButton.disabled = true;
        loadingSpinner.classList.remove('d-none');
        errorMessage.classList.add('d-none');
        successMessage.classList.add('d-none');

        try {
            const formData = new FormData(form);
            const birthDate = formData.get('birthDate');

            // Sammle Zusatzfelder
            const extraFieldValues = collectExtraFieldValues();

            const data = {
                firstName: formData.get('firstName'),
                lastName: formData.get('lastName'),
                email: formData.get('email'),
                phone: formData.get('phone'),
                birthDate: birthDate,
                courseId: parseInt(formData.get('courseId')),
                notes: formData.get('notes'),
                privacyPolicy: formData.get('privacyPolicy') === 'on',
                extraFieldValues: extraFieldValues
            };

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

            const result = await response.json();

            if (result.success) {
                // Schließe das Buchungsformular
                const bookingModal = bootstrap.Modal.getInstance(document.getElementById('bookingForm'));
                if (bookingModal) {
                    bookingModal.hide();
                }
                
                // Zeige das Erfolgs-Modal
                const successModal = new bootstrap.Modal(document.getElementById('successModal'));
                successModal.show();
                
                // Aktualisiere den Kalender
                calendar.refetchEvents();
            } else {
                errorMessage.textContent = result.error || 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.';
                errorMessage.classList.remove('d-none');
            }
        } catch (error) {
            console.error('Error:', error);
            errorMessage.textContent = error.message || 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es später erneut.';
            errorMessage.classList.remove('d-none');
        } finally {
            // Aktiviere den Submit-Button und verstecke den Spinner
            submitButton.disabled = false;
            loadingSpinner.classList.add('d-none');
        }
    });

    // Function to announce changes to screen readers
    function announceToScreenReader(message) {
        const announcements = document.getElementById('announcements');
        announcements.textContent = message;
    }

    // Function to update form validation state
    function updateFormValidationState() {
        const formContainer = document.getElementById('bookingForm');
        const form = document.getElementById('appointmentForm');
        const submitButton = document.getElementById('bookButton');
        const hasSelectedSlot = formContainer.dataset.startTime && formContainer.dataset.endTime;
        const isFormValid = form.checkValidity();
        
        submitButton.disabled = !hasSelectedSlot || !isFormValid;
        submitButton.classList.toggle('btn-secondary', !hasSelectedSlot);
        submitButton.classList.toggle('btn-success', hasSelectedSlot);
        
        // Update ARIA states for all required fields
        form.querySelectorAll('[required]').forEach(field => {
            const isFieldValid = field.checkValidity();
            field.setAttribute('aria-invalid', !isFieldValid);
        });
    }

    // Add form validation listeners
    const formContainer = document.getElementById('bookingForm');
    const form = document.getElementById('appointmentForm');
    form.addEventListener('input', updateFormValidationState);
    form.addEventListener('change', updateFormValidationState);
    
    // Initial validation check
    updateFormValidationState();

    // Function to show slot message modal
    function showSlotMessage(title, message, isWaitlist = false) {
        const modal = new bootstrap.Modal(document.getElementById('slotMessageModal'));
        document.getElementById('slotMessageTitle').textContent = title;
        document.getElementById('slotMessageText').textContent = message;
        
        const modalFooter = document.querySelector('#slotMessageModal .modal-footer');
        modalFooter.innerHTML = '';
        
        if (isWaitlist) {
            const waitlistButton = document.createElement('button');
            waitlistButton.className = 'btn btn-primary';
            waitlistButton.textContent = 'Auf Warteliste setzen';
            waitlistButton.onclick = () => {
                modal.hide();
                showWaitlistForm();
            };
            modalFooter.appendChild(waitlistButton);
        }
        
        const closeButton = document.createElement('button');
        closeButton.className = 'btn btn-secondary';
        closeButton.textContent = 'Schließen';
        closeButton.onclick = () => modal.hide();
        modalFooter.appendChild(closeButton);
        
        modal.show();
        announceToScreenReader(message);
    }

    function showWaitlistForm() {
        const selectedEvent = calendar.getEventById(document.getElementById('slotMessageModal').dataset.currentEventId);
        if (!selectedEvent) return;

        // Setze die versteckten Felder
        document.getElementById('waitlistCourseId').value = selectedEvent.extendedProps.courseId;

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

    // Event Listener für das Wartelisten-Formular
    document.getElementById('submitWaitlist').addEventListener('click', async function() {
        const form = document.getElementById('waitlistForm');
        
        if (!form.checkValidity()) {
            form.classList.add('was-validated');
            return;
        }

        const formData = {
            availabilityId: document.getElementById('waitlistCourseId').value,
            firstName: document.getElementById('waitlistFirstName').value,
            lastName: document.getElementById('waitlistLastName').value,
            email: document.getElementById('waitlistEmail').value,
            phone: document.getElementById('waitlistPhone').value || null,
            notes: document.getElementById('waitlistNotes').value || null
        };

        try {
            const response = await fetch('{{ path('app_waiting_list_join') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify(formData)
            });

            const data = await response.json();

            if (data.success) {
                // Schließe das Wartelisten-Formular
                const waitlistModal = bootstrap.Modal.getInstance(document.getElementById('waitlistModal'));
                waitlistModal.hide();

                // Zeige Erfolgsmeldung mit Position
                document.getElementById('waitlistPosition').textContent = data.position;
                const successModal = new bootstrap.Modal(document.getElementById('waitlistSuccessModal'));
                successModal.show();

                // Formular zurücksetzen
                form.reset();
                form.classList.remove('was-validated');
            } else {
                throw new Error(data.message || 'Unbekannter Fehler');
            }
        } catch (error) {
            console.error('Fehler bei der Wartelisten-Anmeldung:', error);
            alert('Fehler bei der Wartelisten-Anmeldung: ' + error.message);
        }
    });

    // Event Listener für das Schließen des Wartelisten-Modals
    document.getElementById('waitlistModal').addEventListener('hidden.bs.modal', function() {
        const form = document.getElementById('waitlistForm');
        form.reset();
        form.classList.remove('was-validated');
    });

    // Füge Filter-Logik hinzu
    const filterButtons = document.querySelectorAll('.course-filter .btn');
    let activeFilters = ['recurring_course', 'limited_course', 'holiday_course'];

    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            const type = this.dataset.type;
            this.classList.toggle('active');
            
            if (this.classList.contains('active')) {
                activeFilters.push(type);
            } else {
                activeFilters = activeFilters.filter(t => t !== type);
            }
            
            // Aktualisiere die Sichtbarkeit der Events
            calendar.getEvents().forEach(event => {
                const isVisible = activeFilters.includes(event.extendedProps.type);
                event.setProp('display', isVisible ? 'auto' : 'none');
            });

            // Aktualisiere die mobile Listenansicht
            updateMobileListView(calendar.getEvents());
        });
    });

    // Function to update mobile list view
    function updateMobileListView(events) {
        const listContainer = document.getElementById('mobileCourseList');
        listContainer.innerHTML = '';

        // Get current view's date range
        const currentView = calendar.view;
        const viewStart = currentView.currentStart;
        const viewEnd = currentView.currentEnd;

        // Group events by date
        const eventsByDate = {};
        events.forEach(event => {
            if (!activeFilters.includes(event.extendedProps.type)) {
                return;
            }

            // Only include events within the current view's date range
            if (event.start >= viewStart && event.start < viewEnd) {
                const date = event.start.toDateString();
                if (!eventsByDate[date]) {
                    eventsByDate[date] = [];
                }
                eventsByDate[date].push(event);
            }
        });

        // Sort dates
        const sortedDates = Object.keys(eventsByDate).sort((a, b) => new Date(a) - new Date(b));

        // Create list items for each date
        sortedDates.forEach(date => {
            const dateEvents = eventsByDate[date];
            const dateObj = new Date(date);
            
            // Add date header
            const dateHeader = document.createElement('div');
            dateHeader.className = 'list-group-item bg-light';
            dateHeader.innerHTML = `
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0">${dateObj.toLocaleDateString('de-DE', { weekday: 'long', day: '2-digit', month: '2-digit' })}</h6>
                    <span class="badge bg-primary">${dateEvents.length} Kurse</span>
                </div>
            `;
            listContainer.appendChild(dateHeader);

            // Add events for this date
            dateEvents.forEach(event => {
                const listItem = document.createElement('button');
                listItem.className = `list-group-item list-group-item-action ${event.extendedProps.available > 0 ? 'available-slot' : 'booked-slot'} ${event.extendedProps.type.replace('_', '-')}`;
                listItem.onclick = () => {
                    if (event.extendedProps.available > 0) {
                        calendar.select(event.start, event.end);
                    } else {
                        showSlotMessage(
                            'Kurs ausgebucht',
                            'Dieser Kurs ist bereits vollständig ausgebucht. Sie können sich auf die Warteliste setzen lassen.',
                            true
                        );
                    }
                };

                const timeString = `${event.start.toTimeString().substring(0, 5)} - ${event.end.toTimeString().substring(0, 5)}`;
                
                listItem.innerHTML = `
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="mb-1">${event.extendedProps.courseName}</h6>
                            <div class="course-time">${timeString}</div>
                            <div class="course-location">${event.extendedProps.location.name}</div>
                            <div class="course-slots">${event.extendedProps.available}/${event.extendedProps.max} Plätze</div>
                        </div>
                        <span class="course-type ${event.extendedProps.type.replace('_', '-')}">
                            ${event.extendedProps.type === 'recurring_course' ? 'Dauerhaft' : 
                              event.extendedProps.type === 'limited_course' ? 'Begrenzt' : 'Ferien'}
                        </span>
                    </div>
                `;

                listContainer.appendChild(listItem);
            });
        });

        // Show message if no courses available
        if (listContainer.children.length === 0) {
            const noCoursesItem = document.createElement('div');
            noCoursesItem.className = 'list-group-item text-center text-muted';
            noCoursesItem.innerHTML = `
                <div class="py-3">
                    <i class="fas fa-calendar-times fa-2x mb-2"></i>
                    <p class="mb-0">Keine Kurse verfügbar</p>
                </div>
            `;
            listContainer.appendChild(noCoursesItem);
        }
    }

    // Navigation buttons
    prevWeekButton.addEventListener('click', async () => {
        showLoading();
        calendar.prev();
        updateWeekDisplay();
        try {
            await loadCurrentViewSlots(calendar.view);
            updateMobileListView(calendar.getEvents());
        } catch (error) {
            console.error('Fehler beim Laden der Daten:', error);
        } finally {
            hideLoading();
        }
    });

    nextWeekButton.addEventListener('click', async () => {
        showLoading();
        calendar.next();
        updateWeekDisplay();
        try {
            await loadCurrentViewSlots(calendar.view);
            updateMobileListView(calendar.getEvents());
        } catch (error) {
            console.error('Fehler beim Laden der Daten:', error);
        } finally {
            hideLoading();
        }
    });

    // Swipe functionality
    mobileListView.addEventListener('touchstart', (e) => {
        touchStartX = e.touches[0].clientX;
        mobileListView.classList.add('swiping');
    });

    mobileListView.addEventListener('touchmove', (e) => {
        touchEndX = e.touches[0].clientX;
        const diff = touchEndX - touchStartX;
        mobileListView.style.transform = `translateX(${diff}px)`;
    });

    mobileListView.addEventListener('touchend', async () => {
        mobileListView.classList.remove('swiping');
        mobileListView.style.transform = '';
        
        const diff = touchEndX - touchStartX;
        if (Math.abs(diff) > SWIPE_THRESHOLD) {
            showLoading();
            if (diff > 0) {
                // Swipe right - previous week
                calendar.prev();
            } else {
                // Swipe left - next week
                calendar.next();
            }
            updateWeekDisplay();
            try {
                await loadCurrentViewSlots(calendar.view);
                updateMobileListView(calendar.getEvents());
            } catch (error) {
                console.error('Fehler beim Laden der Daten:', error);
            } finally {
                hideLoading();
            }
        }
    });

    // Initial week display update
    updateWeekDisplay();

    function showBookingForm(slot) {
        const form = document.getElementById('bookingForm');
        const courseSchedule = document.getElementById('courseSchedule');
        const scheduleList = courseSchedule.querySelector('.schedule-list');
        
        // Zeige das Formular
        form.style.display = 'block';
        
        // Füge Hinweis für endlose Kurse hinzu
        const existingNote = form.querySelector('.course-note');
        if (existingNote) {
            existingNote.remove();
        }
        
        if (slot.type === 'recurring_course') {
            const note = document.createElement('div');
            note.className = 'course-note';
            note.innerHTML = `
                <i class="fas fa-info-circle"></i>
                Dieser Termin ist Teil einer fortlaufenden Terminreihe. Die Buchung läuft automatisch weiter, bis Sie sich abmelden.
            `;
            form.insertBefore(note, form.firstChild);
        }
        
        // Lade die Kursübersicht
        if (slot.type === 'recurring_course' || slot.type === 'limited_course' || slot.type === 'holiday_course') {
            courseSchedule.style.display = 'block';
            scheduleList.innerHTML = '<div class="text-center"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Laden...</span></div></div>';
            
            // Lade die Kurstermine vom Server
            fetch(`{{ path('appointment_course_dates') }}?courseId=${slot.courseId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Kurstermine Antwort:', data); // Debug-Ausgabe
                    
                    if (data.success && data.dates && data.dates.length > 0) {
                        scheduleList.innerHTML = '';
                        data.dates.forEach(courseDate => {
                            const date = new Date(courseDate.date);
                            const formattedDate = date.toLocaleDateString('de-DE', {
                                weekday: 'long',
                                year: 'numeric',
                                month: 'long',
                                day: 'numeric'
                            });
                            
                            const timeStr = `${courseDate.startTime} - ${courseDate.endTime}`;
                            const status = courseDate.available > 0 ? 'available' : 'full';
                            const statusText = courseDate.available > 0 ? 'Verfügbar' : 'Ausgebucht';
                            
                            const scheduleItem = document.createElement('div');
                            scheduleItem.className = 'schedule-item';
                            scheduleItem.innerHTML = `
                                <div class="date">${formattedDate}</div>
                                <div class="time">${timeStr}</div>
                                <div class="location">${courseDate.location.name}</div>
                                <div class="status ${status}">${statusText} (${courseDate.available}/${courseDate.max})</div>
                            `;
                            
                            scheduleList.appendChild(scheduleItem);
                        });
                    } else {
                        scheduleList.innerHTML = '<div class="alert alert-info">Keine Termine verfügbar</div>';
                        console.log('Keine Termine gefunden:', data); // Debug-Ausgabe
                    }
                })
                .catch(error => {
                    console.error('Fehler beim Laden der Kurstermine:', error);
                    scheduleList.innerHTML = '<div class="alert alert-danger">Fehler beim Laden der Termine</div>';
                });
        } else {
            courseSchedule.style.display = 'none';
        }
        
        // Setze die Formularwerte
        const courseIdInput = document.getElementById('courseId');
        const startTimeInput = document.getElementById('startTime');
        const endTimeInput = document.getElementById('endTime');
        const locationInput = document.getElementById('location');
        
        if (courseIdInput) courseIdInput.value = slot.courseId;
        if (startTimeInput) startTimeInput.value = slot.start;
        if (endTimeInput) endTimeInput.value = slot.end;
        if (locationInput) locationInput.value = slot.location;
        
        // Aktiviere den Submit-Button
        const submitButton = document.getElementById('bookButton');
        if (submitButton) {
            submitButton.disabled = false;
            submitButton.classList.remove('btn-secondary');
            submitButton.classList.add('btn-success');
        }
        
        // Lade und zeige Zusatzfelder
        if (slot.extraFields && slot.extraFields.length > 0) {
            renderExtraFields(slot.extraFields);
        } else {
            // Verstecke Zusatzfelder-Container wenn keine vorhanden
            const containerWrapper = document.getElementById('extraFieldsContainer');
            if (containerWrapper) {
                containerWrapper.style.display = 'none';
            }
        }
    }

    // Function to render extra fields
    function renderExtraFields(extraFields) {
        const container = document.getElementById('extraFieldsList');
        const containerWrapper = document.getElementById('extraFieldsContainer');
        
        if (!extraFields || !extraFields.length) {
            if (containerWrapper) {
                containerWrapper.style.display = 'none';
            }
            return;
        }
        
        if (containerWrapper) {
            containerWrapper.style.display = 'block';
        }
        if (container) {
            container.innerHTML = '';
            
            extraFields.forEach((field, idx) => {
                let html = '';
                const required = field.required === true;
                const requiredAttr = required ? 'required' : '';
                const requiredLabel = required ? ' <span class="text-danger">*</span>' : '';
                
                if (field.type === 'text') {
                    html = `
                        <div class="mb-3">
                            <label class="form-label">${field.label}${requiredLabel}</label>
                            <input type="text" class="form-control" name="extraField_${idx}" id="extraField_${idx}" ${requiredAttr}>
                        </div>
                    `;
                } else if (field.type === 'checkbox') {
                    html = `
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" name="extraField_${idx}" id="extraField_${idx}" ${requiredAttr}>
                            <label class="form-check-label" for="extraField_${idx}">${field.label}${requiredLabel}</label>
                        </div>
                    `;
                }
                container.innerHTML += html;
            });
        }
    }

    // Sammle die Werte der Zusatzfelder
    function collectExtraFieldValues() {
        const extraFieldValues = {};
        const extraFields = document.querySelectorAll('#extraFieldsList [name^="extraField_"]');
        extraFields.forEach(input => {
            const fieldIndex = input.name.replace('extraField_', '');
            if (input.type === 'checkbox') {
                extraFieldValues[fieldIndex] = input.checked;
            } else {
                extraFieldValues[fieldIndex] = input.value;
            }
        });
        return extraFieldValues;
    }

    // Validiere verpflichtende Zusatzfelder
    function validateExtraFields() {
        const extraFields = document.querySelectorAll('#extraFieldsList [name^="extraField_"]');
        for (let input of extraFields) {
            const fieldIndex = input.name.replace('extraField_', '');
            const isRequired = input.hasAttribute('required');
            
            if (isRequired) {
                if (input.type === 'checkbox') {
                    if (!input.checked) {
                        const label = input.closest('.form-check').querySelector('label').textContent.replace(' *', '');
                        alert(`Bitte füllen Sie das verpflichtende Feld "${label}" aus.`);
                        input.focus();
                        return false;
                    }
                } else {
                    if (!input.value.trim()) {
                        const label = input.closest('.mb-3').querySelector('label').textContent.replace(' *', '');
                        alert(`Bitte füllen Sie das verpflichtende Feld "${label}" aus.`);
                        input.focus();
                        return false;
                    }
                }
            }
        }
        return true;
    }

    // Handle time slot click
    function handleTimeSlotClick(startTime, endTime, courseId) {
        const formContainer = document.getElementById('bookingForm');
        
        // Setze nur die Kurs-ID im Formular
        document.getElementById('courseId').value = courseId;
        
        // Zeige das Buchungsformular
        formContainer.style.display = 'block';
    }

    // Live-Check vor Buchungsformular-Anzeige
    async function checkSlotAvailability(courseId) {
        try {
            const response = await fetch(`{{ path('appointment_course_dates') }}?courseId=${courseId}`);
            const data = await response.json();
            if (!data.success || data.totalBookings >= data.maxSlots) {
                showSlotMessage('Platz vergeben', 'Der Termin ist leider gerade vergeben worden. Bitte wählen Sie einen anderen Termin.');
                return false;
            }
            return true;
        } catch (e) {
            showSlotMessage('Fehler', 'Die Verfügbarkeit konnte nicht geprüft werden.');
            return false;
        }
    }
});

// ENTFERNT: Doppelter Event-Handler - wird bereits über Button-Click behandelt
// Das verhindert mehrfache Requests und damit mehrfache E-Mails
</script>

{% if isPublic is defined and isPublic %}
<!-- Footer für öffentlichen Kalender -->
<footer class="public-footer mt-5 py-3 bg-light border-top">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-auto">
                <small class="text-muted">
                    powered by Kreissportbund Düren | 
                    <a href="{{ path('public_privacy') }}" target="_blank" class="text-muted text-decoration-none">Datenschutz</a> | 
                    <a href="{{ path('public_imprint') }}" target="_blank" class="text-muted text-decoration-none">Impressum</a>
                </small>
            </div>
        </div>
    </div>
</footer>

<style>
.public-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    padding: 1rem 0 !important;
    background-color: #f8f9fa !important;
    border-top: 1px solid #dee2e6 !important;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1) !important;
}

.public-footer a:hover {
    color: #495057 !important;
    text-decoration: underline !important;
}
</style>
{% endif %}
{% endblock %}