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

{% block title %}Kurs-Absage{% endblock %}
{% block header_title %}Kurs-Absage{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .course-selection-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 2rem;
        margin-bottom: 2rem;
    }

    .appointment-selection-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 2rem;
        margin-bottom: 2rem;
        display: none;
    }

    .email-template-card {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 2rem;
        margin-bottom: 2rem;
        display: none;
    }

    .course-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1rem;
        margin-top: 1rem;
    }

    .course-card {
        background: #fff;
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .course-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #007bff, #28a745);
        transform: scaleX(0);
        transition: transform 0.3s ease;
    }

    .course-card:hover {
        border-color: #007bff;
        background: #f8f9fc;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,123,255,0.15);
    }

    .course-card:hover::before {
        transform: scaleX(1);
    }

    .course-card.selected {
        border-color: #007bff;
        background: #e3f2fd;
        box-shadow: 0 4px 12px rgba(0,123,255,0.2);
    }

    .course-card.selected::before {
        transform: scaleX(1);
        background: #007bff;
    }

    .course-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.75rem;
    }

    .course-title {
        font-size: 1rem;
        font-weight: 600;
        color: #333;
        margin: 0;
        line-height: 1.2;
    }

    .course-type-badge {
        background: #007bff;
        color: white;
        padding: 0.2rem 0.5rem;
        border-radius: 12px;
        font-size: 0.65rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .course-details {
        margin-bottom: 0.75rem;
    }

    .course-detail-item {
        display: flex;
        align-items: center;
        margin-bottom: 0.25rem;
        font-size: 0.8rem;
        color: #6c757d;
    }

    .course-detail-item i {
        width: 12px;
        margin-right: 0.4rem;
        color: #007bff;
        font-size: 0.7rem;
    }

    .course-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 0.75rem;
        border-top: 1px solid #e9ecef;
        margin-top: 0.75rem;
    }

    .course-stats {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .stat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .stat-number {
        font-size: 1.1rem;
        font-weight: 600;
        color: #007bff;
        line-height: 1;
    }

    .stat-label {
        font-size: 0.65rem;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .course-action {
        background: #007bff;
        color: white;
        border: none;
        padding: 0.4rem 0.8rem;
        border-radius: 4px;
        font-weight: 500;
        font-size: 0.75rem;
        transition: all 0.2s ease;
    }

    .course-action:hover {
        background: #0056b3;
        transform: translateY(-1px);
    }

    .course-card.selected .course-action {
        background: #28a745;
    }

    .course-card.selected .course-action:hover {
        background: #1e7e34;
    }

    /* Filter Styling */
    .course-filters {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1.5rem;
    }

    .course-filters .form-label {
        font-weight: 600;
        color: #495057;
        margin-bottom: 0.5rem;
    }

    .course-filters .form-select,
    .course-filters .form-control {
        border: 1px solid #ced4da;
        border-radius: 6px;
        font-size: 0.875rem;
    }

    .course-filters .form-select:focus,
    .course-filters .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    }

    .appointment-item {
        display: flex;
        align-items: center;
        padding: 1rem;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        margin-bottom: 0.5rem;
        transition: all 0.2s ease;
    }

    .appointment-item:hover {
        background: #f8f9fc;
    }

    .appointment-item.selected {
        background: #e3f2fd;
        border-color: #007bff;
    }

    .appointment-checkbox {
        margin-right: 1rem;
    }

    .appointment-info {
        flex: 1;
    }

    .appointment-customer {
        font-weight: 600;
        color: #333;
        margin-bottom: 0.25rem;
    }

    .appointment-details {
        font-size: 0.875rem;
        color: #6c757d;
    }

    .appointment-status {
        text-align: right;
    }

    .status-badge {
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .status-confirmed {
        background: #d4edda;
        color: #155724;
    }

    .status-pending {
        background: #fff3cd;
        color: #856404;
    }

    .status-cancelled {
        background: #f8d7da;
        color: #721c24;
    }

    .email-template {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1.5rem;
    }

    .email-preview {
        background: #fff;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        margin-top: 1rem;
        min-height: 200px;
    }

    .btn-modern {
        border-radius: 8px;
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        transition: all 0.2s ease;
    }

    .btn-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .loading {
        display: none;
        text-align: center;
        padding: 2rem;
    }

    .loading i {
        font-size: 2rem;
        color: #007bff;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .notification {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1050;
        max-width: 400px;
        animation: slideIn 0.3s ease-out;
    }

    .notification-content {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    .notification-success {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .notification-error {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    .notification-info {
        background: #d1ecf1;
        color: #0c5460;
        border: 1px solid #bee5eb;
    }

    .notification-close {
        background: none;
        border: none;
        color: inherit;
        cursor: pointer;
        padding: 0;
        margin-left: auto;
    }

    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .selected-dates-list {
        max-height: 300px;
        overflow-y: auto;
    }

    .selected-date-item {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 0.5rem;
        transition: all 0.2s ease;
    }

    .selected-date-item:hover {
        background: #e9ecef;
    }

    .modal-xl {
        max-width: 90%;
    }

    .appointment-item.card {
        border: 2px solid #e9ecef;
        transition: all 0.2s ease;
    }

    .appointment-item.card:hover {
        border-color: #007bff;
        box-shadow: 0 2px 8px rgba(0,123,255,0.15);
    }

    .form-check-input:checked + .form-check-label .card {
        border-color: #007bff;
        background: #e3f2fd;
    }

    /* Schritt-Indikator */
    .step-indicator {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 2rem;
    }

    .step {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 2rem;
        position: relative;
    }

    .step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 20px;
        left: 50px;
        width: 100px;
        height: 2px;
        background: #e9ecef;
        z-index: 1;
    }

    .step.active:not(:last-child)::after {
        background: #007bff;
    }

    .step-number {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #e9ecef;
        color: #6c757d;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        margin-bottom: 0.5rem;
        position: relative;
        z-index: 2;
    }

    .step.active .step-number {
        background: #007bff;
        color: white;
    }

    .step.completed .step-number {
        background: #28a745;
        color: white;
    }

    .step-title {
        font-size: 0.875rem;
        color: #6c757d;
        text-align: center;
    }

    .step.active .step-title {
        color: #007bff;
        font-weight: 600;
    }

    .step.completed .step-title {
        color: #28a745;
    }

    .step-content {
        min-height: 400px;
    }

    .selected-dates-review {
        max-height: 200px;
        overflow-y: auto;
        background: #f8f9fa;
        border-radius: 8px;
        padding: 1rem;
    }

    .review-date-item {
        background: white;
        border: 1px solid #e9ecef;
        border-radius: 6px;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1><i class="fas fa-calendar-times me-2"></i>Kurs-Absage</h1>
            <div class="page-breadcrumb">
                <a href="{{ path('admin_dashboard') }}">Dashboard</a>
                <span class="mx-2">/</span>
                <span>Kurs-Absage</span>
            </div>
        </div>
    </div>
</div>

<!-- Kurs-Auswahl -->
<div class="course-selection-card">
    <h5 class="mb-3"><i class="fas fa-list me-2"></i>Kurs auswählen</h5>
    
    <!-- Filter -->
    <div class="course-filters mb-4">
        <div class="row">
            <div class="col-md-4">
                <label for="courseTypeFilter" class="form-label">Kurstyp</label>
                <select class="form-select" id="courseTypeFilter" onchange="filterCourses()">
                    <option value="">Alle Typen</option>
                    <option value="event">Einzeltermin</option>
                    <option value="recurring_course">Wiederkehrend</option>
                    <option value="limited_course">Begrenzt</option>
                    <option value="holiday_course">Ferienkurs</option>
                </select>
            </div>
            <div class="col-md-4">
                <label for="locationFilter" class="form-label">Standort</label>
                <select class="form-select" id="locationFilter" onchange="filterCourses()">
                    <option value="">Alle Standorte</option>
                </select>
            </div>
            <div class="col-md-4">
                <label for="searchFilter" class="form-label">Suche</label>
                <input type="text" class="form-control" id="searchFilter" placeholder="Kursname suchen..." onkeyup="filterCourses()">
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-6">
                <label for="participantFilter" class="form-label">Teilnehmer</label>
                <select class="form-select" id="participantFilter" onchange="filterCourses()">
                    <option value="">Alle</option>
                    <option value="1-5">1-5 Teilnehmer</option>
                    <option value="6-10">6-10 Teilnehmer</option>
                    <option value="11-20">11-20 Teilnehmer</option>
                    <option value="20+">20+ Teilnehmer</option>
                </select>
            </div>
            <div class="col-md-6">
                <div class="d-flex align-items-end h-100">
                    <button class="btn btn-outline-secondary btn-modern" onclick="clearFilters()">
                        <i class="fas fa-times me-2"></i>Filter zurücksetzen
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <div id="courseList">
        <div class="loading">
            <i class="fas fa-spinner"></i>
            <p class="mt-2 mb-0">Kurse werden geladen...</p>
        </div>
    </div>
</div>


<!-- Schritt-für-Schritt Modal -->
<div class="modal fade" id="cancellationModal" tabindex="-1" aria-labelledby="cancellationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cancellationModalLabel">
                    <i class="fas fa-calendar-times me-2"></i>Kurs-Absage
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Schritt-Indikator -->
                <div class="step-indicator mb-4">
                    <div class="step active" id="step1-indicator">
                        <div class="step-number">1</div>
                        <div class="step-title">Termine auswählen</div>
                    </div>
                    <div class="step" id="step2-indicator">
                        <div class="step-number">2</div>
                        <div class="step-title">E-Mail verfassen</div>
                    </div>
                    <div class="step" id="step3-indicator">
                        <div class="step-number">3</div>
                        <div class="step-title">Prüfen & Absenden</div>
                    </div>
                </div>

                <!-- Schritt 1: Termine auswählen -->
                <div id="step1" class="step-content">
                    <h6 class="mb-3"><i class="fas fa-calendar-alt me-2"></i>Verfügbare Termine</h6>
                    <div id="modalDateList">
                        <div class="loading text-center py-4">
                            <i class="fas fa-spinner fa-spin" style="font-size: 2rem; color: #007bff;"></i>
                            <p class="mt-2 mb-0">Termine werden geladen...</p>
                        </div>
                    </div>
                </div>

                <!-- Schritt 2: E-Mail verfassen -->
                <div id="step2" class="step-content" style="display: none;">
                    <h6 class="mb-3"><i class="fas fa-envelope me-2"></i>E-Mail verfassen</h6>
                    <div class="email-template">
                        <div class="mb-3">
                            <label for="modalEmailSubject" class="form-label">Betreff</label>
                            <input type="text" class="form-control" id="modalEmailSubject" placeholder="z.B. Termin-Absage: Schwimmkurs">
                        </div>
                        <div class="mb-3">
                            <label for="modalEmailMessage" class="form-label">Nachricht</label>
                            <textarea class="form-control" id="modalEmailMessage" rows="6" placeholder="Geben Sie hier Ihre Nachricht ein..."></textarea>
                            <div class="form-text">
                                Verfügbare Platzhalter: {{ "{{customer_name}}" }}, {{ "{{course_name}}" }}, {{ "{{appointment_date}}" }}, {{ "{{appointment_time}}" }}, {{ "{{location}}" }}
                            </div>
                        </div>
                        <div class="mb-3">
                            <button class="btn btn-outline-primary btn-modern" onclick="previewModalEmail()">
                                <i class="fas fa-eye me-2"></i>Vorschau
                            </button>
                        </div>
                        <div class="email-preview" id="modalEmailPreview">
                            <p class="text-muted">Klicken Sie auf "Vorschau" um eine E-Mail-Vorschau zu sehen.</p>
                        </div>
                    </div>
                </div>

                <!-- Schritt 3: Prüfen & Absenden -->
                <div id="step3" class="step-content" style="display: none;">
                    <h6 class="mb-3"><i class="fas fa-check-circle me-2"></i>Prüfen & Absenden</h6>
                    <div class="review-section">
                        <div class="mb-4">
                            <h6>Ausgewählte Termine:</h6>
                            <div id="selectedDatesReview" class="selected-dates-review">
                                <!-- Wird dynamisch gefüllt -->
                            </div>
                        </div>
                        <div class="mb-4">
                            <h6>E-Mail-Vorschau:</h6>
                            <div id="finalEmailPreview" class="email-preview">
                                <!-- Wird dynamisch gefüllt -->
                            </div>
                        </div>
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            <strong>Achtung:</strong> Diese Aktion kann nicht rückgängig gemacht werden. Alle ausgewählten Termine werden abgesagt und E-Mails an die betroffenen Teilnehmer gesendet.
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="d-flex justify-content-between w-100">
                    <div>
                        <button type="button" class="btn btn-secondary btn-modern" data-bs-dismiss="modal">
                            <i class="fas fa-times me-2"></i>Abbrechen
                        </button>
                    </div>
                    <div>
                        <button type="button" class="btn btn-outline-secondary btn-modern" id="prevStepBtn" onclick="prevStep()" style="display: none;">
                            <i class="fas fa-arrow-left me-2"></i>Zurück
                        </button>
                        <button type="button" class="btn btn-primary btn-modern" id="nextStepBtn" onclick="nextStep()">
                            <i class="fas fa-arrow-right me-2"></i>Weiter
                        </button>
                        <button type="button" class="btn btn-danger btn-modern" id="confirmBtn" onclick="confirmCancellation()" style="display: none;">
                            <i class="fas fa-calendar-times me-2"></i>Termine absagen
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
    let selectedCourse = null;
    let selectedAppointments = [];
    let allAppointments = [];
    let allDates = [];
    let currentStep = 1;
    let allCourses = [];
    let filteredCourses = [];

    // Moderne Benachrichtigungen
    function showSuccess(message) {
        showNotification(message, 'success');
    }

    function showError(message) {
        showNotification(message, 'error');
    }

    function showInfo(message) {
        showNotification(message, 'info');
    }

    function showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.innerHTML = `
            <div class="notification-content">
                <i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
                <span>${message}</span>
                <button class="notification-close" onclick="this.parentElement.parentElement.remove()">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `;
        
        document.body.appendChild(notification);
        
        setTimeout(() => {
            if (notification.parentElement) {
                notification.remove();
            }
        }, 5000);
    }

    // Kurse laden
    async function loadCourses() {
        try {
            const response = await fetch('{{ path('admin_course_cancellation_api_courses') }}');
            const data = await response.json();
            
            if (data.success) {
                allCourses = data.courses;
                filteredCourses = [...allCourses];
                populateLocationFilter();
                renderCourses(filteredCourses);
            } else {
                showError('Fehler beim Laden der Kurse: ' + data.error);
            }
        } catch (error) {
            console.error('Load courses error:', error);
            showError('Netzwerkfehler beim Laden der Kurse');
        }
    }

    // Standort-Filter befüllen
    function populateLocationFilter() {
        const locationFilter = document.getElementById('locationFilter');
        const locations = [...new Set(allCourses.map(course => course.location))].sort();
        
        locationFilter.innerHTML = '<option value="">Alle Standorte</option>' +
            locations.map(location => `<option value="${location}">${location}</option>`).join('');
    }

    // Kurse rendern
    function renderCourses(courses) {
        const container = document.getElementById('courseList');
        
        if (courses.length === 0) {
            container.innerHTML = `
                <div class="text-center py-4">
                    <i class="fas fa-search text-muted" style="font-size: 3rem;"></i>
                    <p class="mt-3 text-muted mb-0">Keine Kurse gefunden</p>
                    <p class="text-muted small">Versuchen Sie andere Filter</p>
                </div>
            `;
            return;
        }

        container.innerHTML = `
            <div class="course-grid">
                ${courses.map(course => `
                    <div class="course-card" onclick="selectCourse(${course.id})">
                        <div class="course-header">
                            <h3 class="course-title">${course.name}</h3>
                            <span class="course-type-badge">${getCourseTypeLabel(course.type)}</span>
                        </div>
                        <div class="course-details">
                            <div class="course-detail-item">
                                <i class="fas fa-map-marker-alt"></i>
                                <span>${course.location}</span>
                            </div>
                            <div class="course-detail-item">
                                <i class="fas fa-users"></i>
                                <span>${course.targetGroup || 'Keine Zielgruppe'}</span>
                            </div>
                            ${course.specificDate ? `
                                <div class="course-detail-item">
                                    <i class="fas fa-calendar-day"></i>
                                    <span>${course.specificDate}</span>
                                </div>
                            ` : ''}
                            ${course.startDate && course.endDate ? `
                                <div class="course-detail-item">
                                    <i class="fas fa-calendar-alt"></i>
                                    <span>${course.startDate} - ${course.endDate}</span>
                                </div>
                            ` : ''}
                        </div>
                        <div class="course-footer">
                            <div class="course-stats">
                                <div class="stat-item">
                                    <div class="stat-number">${course.appointmentCount}</div>
                                    <div class="stat-label">Teilnehmer</div>
                                </div>
                            </div>
                            <button class="course-action" onclick="event.stopPropagation(); selectCourse(${course.id})">
                                <i class="fas fa-calendar-check me-1"></i>Auswählen
                            </button>
                        </div>
                    </div>
                `).join('')}
            </div>
        `;
    }

    // Kurs-Typ-Label
    function getCourseTypeLabel(type) {
        const labels = {
            'event': 'Einzeltermin',
            'recurring_course': 'Wiederkehrend',
            'limited_course': 'Begrenzt',
            'holiday_course': 'Ferienkurs'
        };
        return labels[type] || type;
    }

    // Filter-Funktionen
    function filterCourses() {
        const typeFilter = document.getElementById('courseTypeFilter').value;
        const locationFilter = document.getElementById('locationFilter').value;
        const searchFilter = document.getElementById('searchFilter').value.toLowerCase();
        const participantFilter = document.getElementById('participantFilter').value;

        filteredCourses = allCourses.filter(course => {
            // Kurstyp-Filter
            if (typeFilter && course.type !== typeFilter) {
                return false;
            }

            // Standort-Filter
            if (locationFilter && course.location !== locationFilter) {
                return false;
            }

            // Such-Filter
            if (searchFilter && !course.name.toLowerCase().includes(searchFilter)) {
                return false;
            }

            // Teilnehmer-Filter
            if (participantFilter) {
                const count = course.appointmentCount;
                switch (participantFilter) {
                    case '1-5':
                        if (count < 1 || count > 5) return false;
                        break;
                    case '6-10':
                        if (count < 6 || count > 10) return false;
                        break;
                    case '11-20':
                        if (count < 11 || count > 20) return false;
                        break;
                    case '20+':
                        if (count < 21) return false;
                        break;
                }
            }

            return true;
        });

        renderCourses(filteredCourses);
    }

    // Filter zurücksetzen
    function clearFilters() {
        document.getElementById('courseTypeFilter').value = '';
        document.getElementById('locationFilter').value = '';
        document.getElementById('searchFilter').value = '';
        document.getElementById('participantFilter').value = '';
        
        filteredCourses = [...allCourses];
        renderCourses(filteredCourses);
    }

    // Kurs auswählen
    async function selectCourse(courseId) {
        // Visuelle Auswahl
        document.querySelectorAll('.course-card').forEach(card => {
            card.classList.remove('selected');
        });
        document.querySelector(`[onclick="selectCourse(${courseId})"]`).classList.add('selected');

        selectedCourse = courseId;
        
        // Modal öffnen
        openCancellationModal();
    }

    // Modal öffnen
    function openCancellationModal() {
        const modal = new bootstrap.Modal(document.getElementById('cancellationModal'));
        modal.show();
        currentStep = 1;
        showStep(1);
        loadModalDates();
    }

    // Termine laden
    async function loadAppointments(courseId) {
        try {
            const response = await fetch(`/public/appointments/admin/course-cancellation/api/courses/${courseId}/dates`);
            const data = await response.json();
            
            if (data.success) {
                allAppointments = data.dates;
                document.getElementById('emailTemplate').style.display = 'block';
            } else {
                showError('Fehler beim Laden der Termine: ' + data.error);
            }
        } catch (error) {
            console.error('Load appointments error:', error);
            showError('Netzwerkfehler beim Laden der Termine');
        }
    }

    // Modal öffnen
    function openDateSelectionModal() {
        const modal = new bootstrap.Modal(document.getElementById('dateSelectionModal'));
        modal.show();
        loadModalDates();
    }

    // Modal-Daten laden
    async function loadModalDates() {
        try {
            const response = await fetch(`/public/appointments/admin/course-cancellation/api/courses/${selectedCourse}/dates`);
            const data = await response.json();
            
            if (data.success) {
                allDates = data.dates; // Wichtig: allDates setzen
                renderModalDates(data.dates);
            } else {
                showError('Fehler beim Laden der Termine: ' + data.error);
            }
        } catch (error) {
            console.error('Load modal dates error:', error);
            showError('Netzwerkfehler beim Laden der Termine');
        }
    }

    // Modal-Daten rendern
    function renderModalDates(dates) {
        const container = document.getElementById('modalDateList');
        
        if (dates.length === 0) {
            container.innerHTML = `
                <div class="text-center py-4">
                    <i class="fas fa-calendar-times text-muted" style="font-size: 3rem;"></i>
                    <p class="mt-3 text-muted mb-0">Keine Termine gefunden</p>
                </div>
            `;
            return;
        }

        // Gruppiere Termine nach Monat für bessere Übersicht
        const groupedDates = groupDatesByMonth(dates);
        
        let html = '';
        for (const [month, monthDates] of Object.entries(groupedDates)) {
            html += `
                <div class="mb-4">
                    <h6 class="text-primary mb-3">
                        <i class="fas fa-calendar me-2"></i>${month}
                    </h6>
                    <div class="row">
                        ${monthDates.map(date => `
                            <div class="col-md-6 col-lg-4 mb-3">
                                <div class="card appointment-item h-100">
                                    <div class="card-body">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="${date.id}" 
                                                   id="date_${date.id}" onchange="toggleAppointmentSelection('${date.id}')">
                                            <label class="form-check-label w-100" for="date_${date.id}">
                                                <div class="d-flex justify-content-between align-items-start">
                                                    <div>
                                                        <div class="fw-bold">
                                                            <i class="fas fa-calendar-day me-2"></i>${date.date}
                                                        </div>
                                                        <div class="text-muted small">
                                                            <i class="fas fa-clock me-1"></i>${date.time}
                                                        </div>
                                                        <div class="text-muted small">
                                                            <i class="fas fa-tag me-1"></i>${date.type}
                                                        </div>
                                                    </div>
                                                    <div class="text-end">
                                                        <span class="badge bg-primary">${date.appointmentCount}</span>
                                                    </div>
                                                </div>
                                                ${date.participants.length > 0 ? `
                                                    <div class="mt-2">
                                                        <small class="text-muted">
                                                            <i class="fas fa-users me-1"></i>Teilnehmer: ${date.participants.map(p => p.name).join(', ')}
                                                        </small>
                                                    </div>
                                                ` : ''}
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
        }
        
        container.innerHTML = html;
    }

    // Termine nach Monat gruppieren
    function groupDatesByMonth(dates) {
        const grouped = {};
        
        dates.forEach(date => {
            const dateObj = new Date(date.date.split('.').reverse().join('-'));
            const month = dateObj.toLocaleDateString('de-DE', { year: 'numeric', month: 'long' });
            
            if (!grouped[month]) {
                grouped[month] = [];
            }
            grouped[month].push(date);
        });
        
        return grouped;
    }

    // Auswahl bestätigen
    function confirmDateSelection() {
        const modal = bootstrap.Modal.getInstance(document.getElementById('dateSelectionModal'));
        modal.hide();
        
        // Zeige ausgewählte Termine an
        updateSelectedDatesDisplay();
    }

    // Ausgewählte Termine anzeigen
    function updateSelectedDatesDisplay() {
        const container = document.getElementById('appointmentSelection');
        if (!container) {
            console.warn('appointmentSelection element not found');
            return;
        }
        const selectedCount = selectedAppointments.length;
        
        if (selectedCount === 0) {
            container.innerHTML = `
                <h5 class="mb-3"><i class="fas fa-calendar-check me-2"></i>Termine/Tage auswählen</h5>
                <div class="text-center py-4">
                    <button class="btn btn-primary btn-modern btn-lg" onclick="openDateSelectionModal()">
                        <i class="fas fa-calendar-alt me-2"></i>Termine auswählen
                    </button>
                    <p class="mt-3 text-muted mb-0">Klicken Sie hier, um die verfügbaren Termine/Tage anzuzeigen</p>
                </div>
            `;
        } else {
            const selectedDates = allAppointments.filter(date => selectedAppointments.includes(date.id));
            container.innerHTML = `
                <h5 class="mb-3"><i class="fas fa-calendar-check me-2"></i>Ausgewählte Termine (${selectedCount})</h5>
                <div class="selected-dates-list">
                    ${selectedDates.map(date => `
                        <div class="selected-date-item">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <i class="fas fa-calendar-day me-2"></i>${date.date} - ${date.time}
                                    <span class="badge bg-secondary ms-2">${date.type}</span>
                                </div>
                                <div>
                                    <span class="badge bg-primary">${date.appointmentCount} Teilnehmer</span>
                                    <button class="btn btn-sm btn-outline-danger ms-2" onclick="removeSelectedDate('${date.id}')">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    `).join('')}
                </div>
                <div class="mt-3">
                    <button class="btn btn-outline-primary btn-modern" onclick="openDateSelectionModal()">
                        <i class="fas fa-edit me-2"></i>Auswahl bearbeiten
                    </button>
                </div>
            `;
        }
    }

    // Einzelnen Termin entfernen
    function removeSelectedDate(dateId) {
        selectedAppointments = selectedAppointments.filter(id => id !== dateId);
        updateSelectedDatesDisplay();
        updateCancelButton();
        updateReviewSection();
    }

    // Schritt anzeigen
    function showStep(step) {
        // Alle Schritte verstecken
        document.querySelectorAll('.step-content').forEach(content => {
            content.style.display = 'none';
        });
        
        // Aktuellen Schritt anzeigen
        document.getElementById(`step${step}`).style.display = 'block';
        
        // Schritt-Indikator aktualisieren
        document.querySelectorAll('.step').forEach((stepEl, index) => {
            stepEl.classList.remove('active', 'completed');
            if (index + 1 < step) {
                stepEl.classList.add('completed');
            } else if (index + 1 === step) {
                stepEl.classList.add('active');
            }
        });
        
        // Buttons aktualisieren
        updateStepButtons(step);
    }

    // Schritt-Buttons aktualisieren
    function updateStepButtons(step) {
        const prevBtn = document.getElementById('prevStepBtn');
        const nextBtn = document.getElementById('nextStepBtn');
        const confirmBtn = document.getElementById('confirmBtn');
        
        // Zurück-Button
        if (step > 1) {
            prevBtn.style.display = 'inline-block';
        } else {
            prevBtn.style.display = 'none';
        }
        
        // Weiter/Abbrechen-Button
        if (step < 3) {
            nextBtn.style.display = 'inline-block';
            confirmBtn.style.display = 'none';
        } else {
            nextBtn.style.display = 'none';
            confirmBtn.style.display = 'inline-block';
        }
    }

    // Nächster Schritt
    function nextStep() {
        if (currentStep === 1) {
            // Prüfe ob Termine ausgewählt wurden
            if (selectedAppointments.length === 0) {
                showError('Bitte wählen Sie mindestens einen Termin aus');
                return;
            }
            currentStep = 2;
            showStep(2);
        } else if (currentStep === 2) {
            // Prüfe ob E-Mail ausgefüllt wurde
            const subject = document.getElementById('modalEmailSubject').value;
            const message = document.getElementById('modalEmailMessage').value;
            
            if (!subject.trim() || !message.trim()) {
                showError('Bitte füllen Sie Betreff und Nachricht aus');
                return;
            }
            
            currentStep = 3;
            showStep(3);
            updateReviewSection();
        }
    }

    // Vorheriger Schritt
    function prevStep() {
        if (currentStep > 1) {
            currentStep--;
            showStep(currentStep);
        }
    }

    // Review-Sektion aktualisieren
    function updateReviewSection() {
        // Ausgewählte Termine anzeigen
        const selectedDates = allDates.filter(date => selectedAppointments.includes(date.id));
        const datesReview = document.getElementById('selectedDatesReview');
        
        if (!datesReview) {
            console.warn('selectedDatesReview element not found');
            return;
        }
        
        datesReview.innerHTML = selectedDates.map(date => `
            <div class="review-date-item">
                <div>
                    <i class="fas fa-calendar-day me-2"></i>${date.date} - ${date.time}
                    <span class="badge bg-secondary ms-2">${date.type}</span>
                </div>
                <div>
                    <span class="badge bg-primary">${date.appointmentCount} Teilnehmer</span>
                </div>
            </div>
        `).join('');
        
        // E-Mail-Vorschau
        const subject = document.getElementById('modalEmailSubject').value;
        const message = document.getElementById('modalEmailMessage').value;
        const emailPreview = document.getElementById('finalEmailPreview');
        
        emailPreview.innerHTML = `
            <div class="border-bottom pb-2 mb-2">
                <strong>Betreff:</strong> ${subject}
            </div>
            <div>
                <strong>Nachricht:</strong><br>
                ${message.replace(/\n/g, '<br>')}
            </div>
        `;
    }

    // E-Mail-Vorschau im Modal
    function previewModalEmail() {
        const subject = document.getElementById('modalEmailSubject').value || 'Termin-Absage';
        const message = document.getElementById('modalEmailMessage').value || 'Ihr Termin wurde leider abgesagt.';
        
        const preview = document.getElementById('modalEmailPreview');
        preview.innerHTML = `
            <div class="border-bottom pb-2 mb-2">
                <strong>Betreff:</strong> ${subject}
            </div>
            <div>
                <strong>Nachricht:</strong><br>
                ${message.replace(/\n/g, '<br>')}
            </div>
        `;
    }

    // Absage bestätigen
    async function confirmCancellation() {
        if (selectedAppointments.length === 0) {
            showError('Bitte wählen Sie mindestens einen Termin aus');
            return;
        }

        const subject = document.getElementById('modalEmailSubject').value;
        const message = document.getElementById('modalEmailMessage').value;

        if (!confirm(`Möchten Sie wirklich ${selectedAppointments.length} Termine absagen?\n\nE-Mails werden an alle betroffenen Teilnehmer gesendet.`)) {
            return;
        }

        try {
            const response = await fetch('{{ path('admin_course_cancellation_cancel_multiple') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    appointmentIds: selectedAppointments,
                    courseId: selectedCourse,
                    customSubject: subject,
                    customMessage: message
                })
            });

            const data = await response.json();

            if (data.success) {
                showSuccess(data.message);
                // Modal schließen
                const modal = bootstrap.Modal.getInstance(document.getElementById('cancellationModal'));
                modal.hide();
                // Auswahl zurücksetzen
                resetSelection();
            } else {
                showError('Fehler beim Absagen der Termine: ' + data.error);
            }
        } catch (error) {
            console.error('Cancel appointments error:', error);
            showError('Netzwerkfehler beim Absagen der Termine');
        }
    }

    // Termine rendern
    function renderAppointments(dates) {
        const container = document.getElementById('appointmentList');
        
        if (dates.length === 0) {
            container.innerHTML = `
                <div class="text-center py-4">
                    <i class="fas fa-calendar-times text-muted" style="font-size: 3rem;"></i>
                    <p class="mt-3 text-muted mb-0">Keine Termine gefunden</p>
                </div>
            `;
            return;
        }

        container.innerHTML = dates.map(date => `
            <div class="appointment-item">
                <div class="appointment-checkbox">
                    <input type="checkbox" class="form-check-input" value="${date.id}" 
                           onchange="toggleAppointmentSelection('${date.id}')">
                </div>
                <div class="appointment-info">
                    <div class="appointment-customer">
                        <i class="fas fa-calendar-day me-2"></i>${date.date} - ${date.time}
                    </div>
                    <div class="appointment-details">
                        <i class="fas fa-tag me-1"></i>${date.type}
                        <span class="mx-2">•</span>
                        <i class="fas fa-users me-1"></i>${date.appointmentCount} Teilnehmer
                        ${date.participants.length > 0 ? '<br><i class="fas fa-list me-1"></i>Teilnehmer: ' + date.participants.map(p => p.name).join(', ') : ''}
                    </div>
                </div>
                <div class="appointment-status">
                    <span class="status-badge status-confirmed">${date.appointmentCount} Teilnehmer</span>
                </div>
            </div>
        `).join('');
    }

    // Status-Label
    function getStatusLabel(status) {
        const labels = {
            'confirmed': 'Bestätigt',
            'pending': 'Ausstehend',
            'cancelled': 'Abgesagt'
        };
        return labels[status] || status;
    }

    // Termin-Auswahl umschalten
    function toggleAppointmentSelection(dateId) {
        const checkbox = document.querySelector(`input[value="${dateId}"]`);
        if (!checkbox) {
            console.warn('Checkbox not found for dateId:', dateId);
            return;
        }
        
        if (checkbox.checked) {
            if (!selectedAppointments.includes(dateId)) {
                selectedAppointments.push(dateId);
            }
        } else {
            selectedAppointments = selectedAppointments.filter(id => id !== dateId);
        }
        
        updateCancelButton();
        updateReviewSection();
    }

    // Alle Termine auswählen
    function selectAllAppointments() {
        selectedAppointments = allAppointments.map(appointment => appointment.id);
        document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
            checkbox.checked = true;
        });
        updateCancelButton();
        updateReviewSection();
    }

    // Alle Termine abwählen
    function deselectAllAppointments() {
        selectedAppointments = [];
        document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
            checkbox.checked = false;
        });
        updateCancelButton();
        updateReviewSection();
    }

    // Abbrechen-Button aktualisieren
    function updateCancelButton() {
        const button = document.getElementById('cancelButton');
        if (!button) {
            console.warn('cancelButton element not found');
            return;
        }
        button.disabled = selectedAppointments.length === 0;
        button.innerHTML = `<i class="fas fa-calendar-times me-2"></i>${selectedAppointments.length} Termine absagen`;
    }

    // E-Mail-Vorschau
    function previewEmail() {
        const subject = document.getElementById('emailSubject').value || 'Termin-Absage';
        const message = document.getElementById('emailMessage').value || 'Ihr Termin wurde leider abgesagt.';
        
        const preview = document.getElementById('emailPreview');
        preview.innerHTML = `
            <div class="border-bottom pb-2 mb-2">
                <strong>Betreff:</strong> ${subject}
            </div>
            <div>
                <strong>Nachricht:</strong><br>
                ${message.replace(/\n/g, '<br>')}
            </div>
        `;
    }

    // Ausgewählte Termine absagen
    async function cancelSelectedAppointments() {
        if (selectedAppointments.length === 0) {
            showError('Bitte wählen Sie mindestens einen Termin aus');
            return;
        }

        const subject = document.getElementById('emailSubject').value || 'Termin-Absage';
        const message = document.getElementById('emailMessage').value || 'Ihr Termin wurde leider abgesagt.';

        if (!confirm(`Möchten Sie wirklich ${selectedAppointments.length} Termine absagen?\n\nE-Mails werden an alle betroffenen Teilnehmer gesendet.`)) {
            return;
        }

        try {
            const response = await fetch('{{ path('admin_course_cancellation_cancel_multiple') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    appointmentIds: selectedAppointments,
                    courseId: selectedCourse,
                    customSubject: subject,
                    customMessage: message
                })
            });

            const data = await response.json();

            if (data.success) {
                showSuccess(data.message);
                resetSelection();
            } else {
                showError('Fehler beim Absagen der Termine: ' + data.error);
            }
        } catch (error) {
            console.error('Cancel appointments error:', error);
            showError('Netzwerkfehler beim Absagen der Termine');
        }
    }

    // Auswahl zurücksetzen
    function resetSelection() {
        selectedCourse = null;
        selectedAppointments = [];
        
        // Prüfe ob Elemente existieren, bevor sie manipuliert werden
        const appointmentSelection = document.getElementById('appointmentSelection');
        if (appointmentSelection) {
            appointmentSelection.style.display = 'none';
        }
        
        const emailTemplate = document.getElementById('emailTemplate');
        if (emailTemplate) {
            emailTemplate.style.display = 'none';
        }
        
        document.querySelectorAll('.course-item').forEach(item => {
            item.classList.remove('selected');
        });
        
        const emailSubject = document.getElementById('emailSubject');
        if (emailSubject) {
            emailSubject.value = '';
        }
        
        const emailMessage = document.getElementById('emailMessage');
        if (emailMessage) {
            emailMessage.value = '';
        }
        
        const emailPreview = document.getElementById('emailPreview');
        if (emailPreview) {
            emailPreview.innerHTML = '<p class="text-muted">Klicken Sie auf "Vorschau" um eine E-Mail-Vorschau zu sehen.</p>';
        }
    }

    // Seite laden
    document.addEventListener('DOMContentLoaded', function() {
        loadCourses();
    });
</script>
{% endblock %}