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

{% block title %}Termine verwalten{% endblock %}
{% block header_title %}Termine verwalten{% endblock %}

{% block stylesheets %}
<style>
    /* Modal System Styles */
    .modal-alert {
        z-index: 9999;
    }
    
    .modal-alert .modal-content {
        border: none;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    
    .modal-alert .modal-header {
        border-bottom: none;
        padding: 1.5rem 1.5rem 0;
    }
    
    .modal-alert .modal-body {
        padding: 1rem 1.5rem 1.5rem;
        text-align: center;
    }
    
    .modal-alert .modal-footer {
        border-top: none;
        padding: 0 1.5rem 1.5rem;
        justify-content: center;
    }
    
    .alert-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }
    
    .alert-success .alert-icon {
        color: #28a745;
    }
    
    .alert-error .alert-icon {
        color: #dc3545;
    }
    
    .alert-warning .alert-icon {
        color: #ffc107;
    }
    
    .alert-info .alert-icon {
        color: #17a2b8;
    }
    .filter-card {
        background: #f8f9fc;
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .table-modern {
        font-size: 0.9rem;
    }
    
    .table-modern thead th {
        background: linear-gradient(135deg, #1a1d2e 0%, #252938 100%);
        color: #fff;
        font-weight: 600;
        border: none;
        padding: 1rem;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .table-modern tbody tr {
        transition: all 0.2s;
    }
    
    .table-modern tbody tr:hover {
        background: #f8f9fc;
        transform: scale(1.01);
    }
    
    .table-modern tbody td {
        vertical-align: middle;
        padding: 1rem;
    }
    
    .badge-status {
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.75rem;
    }
    
    .customer-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    .customer-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #4e73df, #375fc7);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 600;
        font-size: 0.9rem;
    }
    
    .customer-details strong {
        display: block;
        color: #5a5c69;
    }
    
    .customer-details small {
        color: #858796;
    }
    
    .action-btn {
        width: 32px;
        height: 32px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: all 0.2s;
    }
    
    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    .course-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: #f8f9fc;
        border-radius: 8px;
        font-weight: 600;
    }
    
    .stats-mini {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .stat-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem 1.5rem;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        color: #fff;
    }
    
    .stat-info strong {
        display: block;
        font-size: 1.5rem;
        color: #5a5c69;
    }
    
    .stat-info span {
        font-size: 0.8rem;
        color: #858796;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .loading-skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: loading 1.5s ease-in-out infinite;
        border-radius: 4px;
        height: 20px;
    }
    
    @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    
    /* Zielgruppen-Badge Styles */
    .target-group-badge {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
        border-radius: 0.4rem;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .target-group-badge.kids-45 {
        background-color: rgba(13, 202, 240, 0.1);
        color: #0dcaf0;
        border: 1px solid rgba(13, 202, 240, 0.3);
    }
    
    .target-group-badge.kids-68 {
        background-color: rgba(25, 135, 84, 0.1);
        color: #198754;
        border: 1px solid rgba(25, 135, 84, 0.3);
    }
    
    .target-group-badge.adults {
        background-color: rgba(255, 193, 7, 0.1);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.3);
    }
    
    .target-group-badge.family {
        background-color: rgba(111, 66, 193, 0.1);
        color: #6f42c1;
        border: 1px solid rgba(111, 66, 193, 0.3);
    }
    
    .target-group-badge.custom {
        background-color: rgba(108, 117, 125, 0.1);
        color: #6c757d;
        border: 1px solid rgba(108, 117, 125, 0.3);
    }
    
    .btn-outline-purple {
        color: #6f42c1;
        border-color: #6f42c1;
    }
    
    .btn-outline-purple:hover,
    .btn-outline-purple.active {
        background-color: #6f42c1;
        border-color: #6f42c1;
        color: white;
    }
    
    #targetGroupQuickFilters .btn {
        transition: all 0.2s ease;
    }
    
    #targetGroupQuickFilters .btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    #targetGroupQuickFilters .btn.active {
        font-weight: 600;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }
</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-check me-2"></i>Termine verwalten</h1>
            <div class="page-breadcrumb">
                <a href="{{ path('admin_dashboard') }}"><i class="fas fa-home"></i> Dashboard</a>
                <i class="fas fa-chevron-right"></i>
                <span>Termine</span>
            </div>
        </div>
        <button class="btn btn-primary btn-lg" onclick="createAppointment()">
            <i class="fas fa-plus me-2"></i>Neuer Termin
        </button>
    </div>
</div>

<!-- Mini Stats -->
<div class="stats-mini">
    <div class="stat-item">
        <div class="stat-icon" style="background: linear-gradient(135deg, #4e73df, #375fc7);">
            <i class="fas fa-calendar-day"></i>
        </div>
        <div class="stat-info">
            <strong id="totalCount">-</strong>
            <span>Gesamt</span>
        </div>
    </div>
    <div class="stat-item">
        <div class="stat-icon" style="background: linear-gradient(135deg, #1cc88a, #17a673);">
            <i class="fas fa-check-circle"></i>
        </div>
        <div class="stat-info">
            <strong id="confirmedCount">-</strong>
            <span>Bestätigt</span>
        </div>
    </div>
    <div class="stat-item">
        <div class="stat-icon" style="background: linear-gradient(135deg, #f6c23e, #dda20a);">
            <i class="fas fa-clock"></i>
        </div>
        <div class="stat-info">
            <strong id="pendingCount">-</strong>
            <span>Ausstehend</span>
        </div>
    </div>
</div>

<!-- Filter Card -->
<div class="filter-card">
    <div class="row g-3">
        <div class="col-md-3">
            <label class="form-label small fw-semibold">
                <i class="fas fa-calendar me-1"></i>Datum
            </label>
            <input type="date" class="form-control" id="dateFilter">
        </div>
        <div class="col-md-3">
            <label class="form-label small fw-semibold">
                <i class="fas fa-list me-1"></i>Status
            </label>
            <select class="form-select" id="statusFilter">
                <option value="">Alle Status</option>
                <option value="confirmed">Bestätigt</option>
                <option value="pending">Ausstehend</option>
                <option value="cancelled">Storniert</option>
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label small fw-semibold">
                <i class="fas fa-map-marker-alt me-1"></i>Standort
            </label>
            <select class="form-select" id="locationFilter">
                <option value="">Alle Standorte</option>
                {% for location in locations %}
                    <option value="{{ location.id }}">{{ location.name }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label small fw-semibold">
                <i class="fas fa-user-friends me-1"></i>Zielgruppe
            </label>
            <select class="form-select" id="targetGroupFilter">
                <option value="">Alle Zielgruppen</option>
                <option value="Kinder 4-5 Jahre">👶 Kinder 4-5 Jahre</option>
                <option value="Kinder 6-8 Jahre">🧒 Kinder 6-8 Jahre</option>
                <option value="Erwachsene">🧑 Erwachsene</option>
                <option value="Eltern-Kind-Kurs">👨‍👩‍👧 Eltern-Kind</option>
                <option value="_custom">✏️ Eigene</option>
                <option value="_none">❌ Ohne</option>
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label small fw-semibold">
                <i class="fas fa-search me-1"></i>Suche
            </label>
            <input type="text" class="form-control" id="searchFilter" placeholder="Name, E-Mail, Kurs...">
        </div>
    </div>
    
    <!-- Zielgruppen-Schnellfilter -->
    <div class="d-flex gap-2 mt-3 flex-wrap" id="targetGroupQuickFilters">
        <button class="btn btn-sm btn-outline-primary active" data-filter="" onclick="quickFilterTargetGroup(this, '')">
            <i class="fas fa-list me-1"></i>Alle (<span class="target-group-count-all">0</span>)
        </button>
        <button class="btn btn-sm btn-outline-info" data-filter="Kinder 4-5 Jahre" onclick="quickFilterTargetGroup(this, 'Kinder 4-5 Jahre')">
            <i class="fas fa-baby me-1"></i>Kinder 4-5 (<span class="target-group-count-kids45">0</span>)
        </button>
        <button class="btn btn-sm btn-outline-success" data-filter="Kinder 6-8 Jahre" onclick="quickFilterTargetGroup(this, 'Kinder 6-8 Jahre')">
            <i class="fas fa-child me-1"></i>Kinder 6-8 (<span class="target-group-count-kids68">0</span>)
        </button>
        <button class="btn btn-sm btn-outline-warning" data-filter="Erwachsene" onclick="quickFilterTargetGroup(this, 'Erwachsene')">
            <i class="fas fa-user me-1"></i>Erwachsene (<span class="target-group-count-adults">0</span>)
        </button>
        <button class="btn btn-sm btn-outline-purple" data-filter="Eltern-Kind-Kurs" onclick="quickFilterTargetGroup(this, 'Eltern-Kind-Kurs')">
            <i class="fas fa-users me-1"></i>Eltern-Kind (<span class="target-group-count-family">0</span>)
        </button>
        <button class="btn btn-sm btn-outline-secondary" data-filter="_none" onclick="quickFilterTargetGroup(this, '_none')">
            <i class="fas fa-question me-1"></i>Ohne (<span class="target-group-count-none">0</span>)
        </button>
    </div>
    
    <div class="mt-3 d-flex gap-2">
        <button class="btn btn-primary" onclick="loadAppointments()">
            <i class="fas fa-filter me-2"></i>Filtern
        </button>
        <button class="btn btn-outline-secondary" onclick="clearFilters()">
            <i class="fas fa-times me-2"></i>Zurücksetzen
        </button>
        <button class="btn btn-outline-info ms-auto" onclick="exportAppointments()">
            <i class="fas fa-download me-2"></i>Exportieren
        </button>
    </div>
</div>

<!-- Appointments Table -->
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="fas fa-list me-2"></i>Terminübersicht</span>
        <span class="badge bg-primary" id="resultsCount">Wird geladen...</span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-modern mb-0" id="appointmentsTable">
                <thead>
                    <tr>
                        <th>Buchungsdatum</th>
                        <th>Termin & Zeit</th>
                        <th>Kurs & Zielgruppe</th>
                        <th>Kunde</th>
                        <th>Standort</th>
                        <th>Status</th>
                        <th>Zahlung</th>
                        <th>Aktionen</th>
                    </tr>
                </thead>
                <tbody id="appointmentsTableBody">
                    <tr>
                        <td colspan="8" class="text-center py-5">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">Lädt...</span>
                            </div>
                            <p class="mt-3 text-muted">Lade Termine...</p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
    let appointments = [];
    let allAppointments = [];
    
    // Lade Termine beim Seitenaufruf
    document.addEventListener('DOMContentLoaded', function() {
        loadAppointments();
    });
    
    async function loadAppointments() {
        const dateFilter = document.getElementById('dateFilter').value;
        const statusFilter = document.getElementById('statusFilter').value;
        const locationFilter = document.getElementById('locationFilter').value;
        const targetGroupFilter = document.getElementById('targetGroupFilter').value;
        const searchFilter = document.getElementById('searchFilter').value;
        
        const params = new URLSearchParams();
        if (dateFilter) params.append('date', dateFilter);
        if (statusFilter) params.append('status', statusFilter);
        if (locationFilter) params.append('location', locationFilter);
        if (targetGroupFilter) params.append('targetGroup', targetGroupFilter);
        if (searchFilter) params.append('search', searchFilter);
        
        try {
             const response = await fetch('{{ path('admin_appointments_api_list') }}?' + params.toString());
            const data = await response.json();
            
            if (data.success) {
                appointments = data.appointments;
                allAppointments = data.appointments; // Für Statistiken
                renderAppointments(appointments);
                updateStats(appointments);
                updateTargetGroupCounts(appointments);
            } else {
                showError('Fehler beim Laden der Termine');
            }
        } catch (error) {
            console.error('Load error:', error);
            showError('Netzwerkfehler beim Laden der Termine');
        }
    }
    
    function renderAppointments(data) {
        const tbody = document.getElementById('appointmentsTableBody');
        document.getElementById('resultsCount').textContent = data.length + ' Termine';
        
        if (data.length === 0) {
            tbody.innerHTML = `
                <tr>
                    <td colspan="7" class="text-center py-5">
                        <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>
                    </td>
                </tr>
            `;
            return;
        }
        
        tbody.innerHTML = data.map(appointment => `
            <tr>
                <td>
                    <div class="text-center">
                        <div style="background: linear-gradient(135deg, #1cc88a, #17a673); color: #fff; padding: 0.5rem; border-radius: 8px; min-width: 100px;">
                            <small style="display: block; font-size: 0.7rem; opacity: 0.9;">Gebucht am</small>
                            <strong style="display: block; font-size: 0.9rem;">${appointment.createdAt}</strong>
                        </div>
                    </div>
                </td>
                <td>
                    ${getAppointmentDateDisplay(appointment)}
                </td>
                <td>
                    <div class="course-badge">
                        <i class="fas fa-chalkboard-teacher text-primary"></i>
                        <div>
                            <strong>${appointment.course}</strong>
                            <br>
                            <small class="text-muted">${getTypeLabel(appointment.courseType)}</small>
                            ${appointment.targetGroup ? '<br>' + getTargetGroupBadge(appointment.targetGroup) : ''}
                        </div>
                    </div>
                </td>
                <td>
                    <div class="customer-info">
                        <div class="customer-avatar">
                            ${appointment.customer.firstName.charAt(0)}${appointment.customer.lastName.charAt(0)}
                        </div>
                        <div class="customer-details">
                            <strong>${appointment.customer.firstName} ${appointment.customer.lastName}</strong>
                            <small>
                                <i class="fas fa-envelope me-1"></i>${appointment.customer.email}
                                <br>
                                <i class="fas fa-phone me-1"></i>${appointment.customer.phone}
                            </small>
                        </div>
                    </div>
                </td>
                <td>
                    <i class="fas fa-map-marker-alt text-primary me-2"></i>
                    ${appointment.location}
                </td>
                <td>
                    <span class="badge badge-status ${getStatusClass(appointment.status)}">
                        ${getStatusLabel(appointment.status)}
                    </span>
                </td>
                <td>
                    ${getPaymentStatusBadge(appointment)}
                </td>
                <td>
                    <div class="d-flex gap-1">
                        <button class="btn btn-sm btn-outline-primary action-btn" onclick="viewAppointment(${appointment.id})" title="Details">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-success action-btn" onclick="confirmAppointment(${appointment.id})" title="Bestätigen" ${appointment.status === 'confirmed' ? 'disabled' : ''}>
                            <i class="fas fa-check"></i>
                        </button>
                        ${appointment.isPaymentRequired && appointment.paymentStatus !== 'confirmed' ? `
                            <button class="btn btn-sm btn-outline-warning action-btn" onclick="markAsPaid(${appointment.id})" title="Als bezahlt markieren">
                                <i class="fas fa-euro-sign"></i>
                            </button>
                        ` : ''}
                        <button class="btn btn-sm btn-outline-warning action-btn" onclick="cancelDays(${appointment.id})" title="Tage abmelden" ${appointment.courseType === 'event' ? 'disabled' : ''}>
                            <i class="fas fa-calendar-times"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-danger action-btn" onclick="deleteAppointment(${appointment.id})" title="Löschen">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </td>
            </tr>
        `).join('');
    }
    
    function updateStats(data) {
        document.getElementById('totalCount').textContent = data.length;
        document.getElementById('confirmedCount').textContent = data.filter(a => a.status === 'confirmed').length;
        document.getElementById('pendingCount').textContent = data.filter(a => a.status === 'pending').length;
    }
    
    function updateTargetGroupCounts(data) {
        const counts = {
            all: data.length,
            kids45: 0,
            kids68: 0,
            adults: 0,
            family: 0,
            none: 0
        };
        
        data.forEach(appointment => {
            if (!appointment.targetGroup) {
                counts.none++;
            } else {
                switch(appointment.targetGroup) {
                    case 'Kinder 4-5 Jahre':
                        counts.kids45++;
                        break;
                    case 'Kinder 6-8 Jahre':
                        counts.kids68++;
                        break;
                    case 'Erwachsene':
                        counts.adults++;
                        break;
                    case 'Eltern-Kind-Kurs':
                        counts.family++;
                        break;
                }
            }
        });
        
        document.querySelector('.target-group-count-all').textContent = counts.all;
        document.querySelector('.target-group-count-kids45').textContent = counts.kids45;
        document.querySelector('.target-group-count-kids68').textContent = counts.kids68;
        document.querySelector('.target-group-count-adults').textContent = counts.adults;
        document.querySelector('.target-group-count-family').textContent = counts.family;
        document.querySelector('.target-group-count-none').textContent = counts.none;
    }
    
    function getTargetGroupBadge(targetGroup) {
        if (!targetGroup) return '';
        
        let badgeClass = 'custom';
        let icon = 'fas fa-tag';
        
        switch(targetGroup) {
            case 'Kinder 4-5 Jahre':
                badgeClass = 'kids-45';
                icon = 'fas fa-baby';
                break;
            case 'Kinder 6-8 Jahre':
                badgeClass = 'kids-68';
                icon = 'fas fa-child';
                break;
            case 'Erwachsene':
                badgeClass = 'adults';
                icon = 'fas fa-user';
                break;
            case 'Eltern-Kind-Kurs':
                badgeClass = 'family';
                icon = 'fas fa-users';
                break;
            default:
                badgeClass = 'custom';
                icon = 'fas fa-pencil-alt';
        }
        
        return `<span class="target-group-badge ${badgeClass}"><i class="${icon}"></i>${targetGroup}</span>`;
    }
    
    function getTypeLabel(type) {
        const labels = {
            'event': 'Event',
            'recurring_course': 'Dauerhaft',
            'limited_course': 'Zeitlich begrenzt',
            'holiday_course': 'Ferienkurs'
        };
        return labels[type] || type;
    }
    
    function getAppointmentDateDisplay(appointment) {
        const dayNames = {
            1: 'Montag', 2: 'Dienstag', 3: 'Mittwoch', 4: 'Donnerstag', 
            5: 'Freitag', 6: 'Samstag', 7: 'Sonntag'
        };
        const dayNamesShort = {
            1: 'Mo', 2: 'Di', 3: 'Mi', 4: 'Do', 5: 'Fr', 6: 'Sa', 7: 'So'
        };
        
        let html = '<div>';
        
        switch(appointment.courseType) {
            case 'event':
                // Einmaliges Event - Zeige Datum prominent
                html += `
                    <div class="d-flex align-items-center gap-2">
                        <div class="text-center">
                            <div style="background: linear-gradient(135deg, #4e73df, #375fc7); color: #fff; padding: 0.5rem; border-radius: 8px; min-width: 50px;">
                                <strong style="display: block; font-size: 1.25rem;">${appointment.dateFormatted.split('.')[0]}</strong>
                                <small style="font-size: 0.7rem;">${appointment.dateFormatted.split('.')[1]}.${appointment.dateFormatted.split('.')[2]}</small>
                            </div>
                        </div>
                        <div>
                            <div class="mb-1"><i class="fas fa-clock text-primary me-1"></i><strong>${appointment.startTime === appointment.endTime ? appointment.startTime : appointment.startTime + ' - ' + appointment.endTime} Uhr</strong></div>
                            <small class="text-muted"><i class="fas fa-calendar-day me-1"></i>Einmaliges Event</small>
                        </div>
                    </div>
                `;
                break;
                
            case 'recurring_course':
                // Dauerhafter Kurs - Zeige Wochentage
                if (appointment.daysOfWeek && appointment.daysOfWeek.length > 0) {
                    const days = appointment.daysOfWeek.map(d => dayNamesShort[d]).join(', ');
                    const fullDays = appointment.daysOfWeek.map(d => dayNames[d]).join(', ');
                    html += `
                        <div>
                            <div class="mb-2">
                                <span class="badge bg-primary" style="font-size: 0.85rem; padding: 0.5rem 0.75rem;">
                                    <i class="fas fa-sync-alt me-1"></i>Jeden ${days}
                                </span>
                            </div>
                            <div class="mb-1"><i class="fas fa-clock text-primary me-1"></i><strong>${appointment.startTime === appointment.endTime ? appointment.startTime : appointment.startTime + ' - ' + appointment.endTime} Uhr</strong></div>
                            <small class="text-muted">Dauerhafter Kurs</small>
                        </div>
                    `;
                } else {
                    html += `
                        <div>
                            <div class="mb-1"><i class="fas fa-clock text-primary me-1"></i><strong>${appointment.startTime === appointment.endTime ? appointment.startTime : appointment.startTime + ' - ' + appointment.endTime} Uhr</strong></div>
                            <small class="text-muted"><i class="fas fa-sync-alt me-1"></i>Dauerhafter Kurs</small>
                        </div>
                    `;
                }
                break;
                
            case 'limited_course':
                // Zeitlich begrenzter Kurs - Zeige Zeitraum + Wochentage
                if (appointment.startDate && appointment.endDate) {
                    const days = appointment.daysOfWeek && appointment.daysOfWeek.length > 0 
                        ? appointment.daysOfWeek.map(d => dayNamesShort[d]).join(', ')
                        : '';
                    html += `
                        <div>
                            <div class="mb-2">
                                <i class="fas fa-calendar-alt text-info me-1"></i>
                                <strong>${appointment.startDate} - ${appointment.endDate}</strong>
                            </div>
                            ${days ? `<div class="mb-2"><span class="badge bg-info" style="font-size: 0.75rem; padding: 0.4rem 0.6rem;">${days}</span></div>` : ''}
                            <div><i class="fas fa-clock text-primary me-1"></i><strong>${appointment.startTime === appointment.endTime ? appointment.startTime : appointment.startTime + ' - ' + appointment.endTime} Uhr</strong></div>
                        </div>
                    `;
                } else {
                    html += `
                        <div>
                            <div class="mb-1"><i class="fas fa-clock text-primary me-1"></i><strong>${appointment.startTime === appointment.endTime ? appointment.startTime : appointment.startTime + ' - ' + appointment.endTime} Uhr</strong></div>
                            <small class="text-muted"><i class="fas fa-calendar-alt me-1"></i>Zeitlich begrenzt</small>
                        </div>
                    `;
                }
                break;
                
            case 'holiday_course':
                // Ferienkurs - Zeige Zeitraum + "Ferienkurs" Badge
                if (appointment.startDate && appointment.endDate) {
                    html += `
                        <div>
                            <div class="mb-2">
                                <span class="badge bg-warning text-dark" style="padding: 0.5rem 0.75rem;">
                                    <i class="fas fa-umbrella-beach me-1"></i>Ferienkurs
                                </span>
                            </div>
                            <div class="mb-2">
                                <i class="fas fa-calendar-alt text-warning me-1"></i>
                                <strong>${appointment.startDate} - ${appointment.endDate}</strong>
                            </div>
                            <div><i class="fas fa-clock text-primary me-1"></i><strong>${appointment.startTime === appointment.endTime ? appointment.startTime : appointment.startTime + ' - ' + appointment.endTime} Uhr</strong></div>
                        </div>
                    `;
                } else if (appointment.specificDate) {
                    html += `
                        <div>
                            <div class="mb-2">
                                <span class="badge bg-warning text-dark" style="padding: 0.5rem 0.75rem;">
                                    <i class="fas fa-umbrella-beach me-1"></i>Ferienkurs
                                </span>
                            </div>
                            <div class="mb-2">
                                <i class="fas fa-calendar-day text-warning me-1"></i>
                                <strong>${appointment.specificDate}</strong>
                            </div>
                            <div><i class="fas fa-clock text-primary me-1"></i><strong>${appointment.startTime === appointment.endTime ? appointment.startTime : appointment.startTime + ' - ' + appointment.endTime} Uhr</strong></div>
                        </div>
                    `;
                } else {
                    html += `
                        <div>
                            <div class="mb-1"><i class="fas fa-clock text-primary me-1"></i><strong>${appointment.startTime === appointment.endTime ? appointment.startTime : appointment.startTime + ' - ' + appointment.endTime} Uhr</strong></div>
                            <small class="text-muted"><i class="fas fa-umbrella-beach me-1"></i>Ferienkurs</small>
                        </div>
                    `;
                }
                break;
                
            default:
                // Fallback
                html += `
                    <div class="d-flex align-items-center gap-2">
                        <div class="text-center">
                            <div style="background: linear-gradient(135deg, #4e73df, #375fc7); color: #fff; padding: 0.5rem; border-radius: 8px; min-width: 50px;">
                                <strong style="display: block; font-size: 1.25rem;">${appointment.dateFormatted.split('.')[0]}</strong>
                                <small style="font-size: 0.7rem;">${appointment.dateFormatted.split('.')[1]}.${appointment.dateFormatted.split('.')[2]}</small>
                            </div>
                        </div>
                        <div>
                            <div><i class="fas fa-clock text-primary me-1"></i><strong>${appointment.startTime === appointment.endTime ? appointment.startTime : appointment.startTime + ' - ' + appointment.endTime} Uhr</strong></div>
                        </div>
                    </div>
                `;
        }
        
        html += '</div>';
        return html;
    }
    
    function getStatusClass(status) {
        const classes = {
            'confirmed': 'bg-success',
            'pending': 'bg-warning',
            'cancelled': 'bg-danger'
        };
        return classes[status] || 'bg-secondary';
    }
    
    function getStatusLabel(status) {
        const labels = {
            'confirmed': 'Bestätigt',
            'pending': 'Ausstehend',
            'cancelled': 'Storniert'
        };
        return labels[status] || status;
    }

    function getPaymentStatusBadge(appointment) {
        if (!appointment.isPaymentRequired) {
            return '<span class="badge badge-status bg-secondary">Nicht erforderlich</span>';
        }

        const paymentStatus = appointment.paymentStatus || 'pending';
        const statusClasses = {
            'pending': 'bg-warning',
            'confirmed': 'bg-success',
            'overdue': 'bg-danger'
        };

        const statusLabels = {
            'pending': 'Ausstehend',
            'confirmed': 'Bezahlt',
            'overdue': 'Überfällig'
        };

        const statusClass = statusClasses[paymentStatus] || 'bg-warning';
        const statusLabel = statusLabels[paymentStatus] || 'Unbekannt';

        let badge = `<span class="badge badge-status ${statusClass}">${statusLabel}</span>`;

        // Füge Preis hinzu, falls verfügbar
        if (appointment.coursePrice) {
            badge += `<br><small class="text-muted">${appointment.coursePrice} €</small>`;
        }

        return badge;
    }

    async function markAsPaid(appointmentId) {
        showConfirm('Bestätigung', 'Möchten Sie diesen Termin wirklich als bezahlt markieren?', 'executeMarkAsPaid');
        
        // Speichere appointmentId für die Ausführung
        window.currentAppointmentId = appointmentId;
    }
    
    async function executeMarkAsPaid() {
        const appointmentId = window.currentAppointmentId;

        try {
            const response = await fetch(`{{ path('admin_appointments_api_mark_paid', {'id': '__ID__'}) }}`.replace('__ID__', appointmentId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            });

            const data = await response.json();

            if (data.success) {
                showAlert('✅ Zahlung wurde als bestätigt markiert', 'success');
                loadAppointments(); // Tabelle neu laden
            } else {
                showAlert('❌ Fehler: ' + (data.error || 'Unbekannter Fehler'), 'danger');
            }
        } catch (error) {
            console.error('Error marking payment as paid:', error);
            showAlert('❌ Netzwerkfehler beim Markieren der Zahlung', 'danger');
        }
    }
    
    function quickFilterTargetGroup(button, filterValue) {
        // Update active state
        document.querySelectorAll('#targetGroupQuickFilters .btn').forEach(btn => {
            btn.classList.remove('active');
        });
        button.classList.add('active');
        
        // Update dropdown
        document.getElementById('targetGroupFilter').value = filterValue;
        
        // Apply filter
        loadAppointments();
    }
    
    function clearFilters() {
        document.getElementById('dateFilter').value = '';
        document.getElementById('statusFilter').value = '';
        document.getElementById('locationFilter').value = '';
        document.getElementById('targetGroupFilter').value = '';
        document.getElementById('searchFilter').value = '';
        
        // Reset quick filter buttons
        document.querySelectorAll('#targetGroupQuickFilters .btn').forEach(btn => {
            btn.classList.remove('active');
            if (btn.dataset.filter === '') {
                btn.classList.add('active');
            }
        });
        
        loadAppointments();
    }
    
    function createAppointment() {
        window.location.href = '{{ path('admin_courses_index') }}';
    }
    
    async function viewAppointment(id) {
        const appointment = appointments.find(a => a.id === id);
        if (!appointment) return;
        
        // Modal mit Termin-Details anzeigen
        fillAppointmentDetailsModal(appointment);
        const modal = new bootstrap.Modal(document.getElementById('appointmentDetailsModal'));
        modal.show();
    }
    
    async function confirmAppointment(id) {
        showConfirm('Bestätigung', 'Möchten Sie diesen Termin bestätigen?', 'executeConfirmAppointment');
        
        // Speichere ID für die Ausführung
        window.currentAppointmentId = id;
    }
    
    async function executeConfirmAppointment() {
        const id = window.currentAppointmentId;
        
        try {
             const response = await fetch(`{{ path('appointment_admin_confirm', {'id': '__ID__'}) }}`.replace('__ID__', id), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                }
            });
            
            const data = await response.json();
            
            if (data.success) {
                showSuccess('Erfolg', 'Termin wurde bestätigt!', 'loadAppointments');
            } else {
                showError('Fehler', 'Fehler: ' + (data.error || 'Unbekannter Fehler'));
            }
        } catch (error) {
            showError('Netzwerkfehler', 'Netzwerkfehler beim Bestätigen');
        }
    }
    
    async function deleteAppointment(id) {
        showConfirm('Löschen bestätigen', 'Möchten Sie diesen Termin wirklich löschen?', 'executeDeleteAppointment');
        
        // Speichere ID für die Ausführung
        window.currentAppointmentId = id;
    }
    
    async function executeDeleteAppointment() {
        const id = window.currentAppointmentId;
        
        try {
             const response = await fetch(`{{ path('appointment_admin_delete', {'id': '__ID__'}) }}`.replace('__ID__', id), {
                method: 'DELETE',
                headers: {
                    'Content-Type': 'application/json',
                }
            });
            
            const data = await response.json();
            
            if (data.success) {
                showSuccess('Erfolg', 'Termin wurde gelöscht!', 'loadAppointments');
            } else {
                showError('Fehler', 'Fehler: ' + (data.error || 'Unbekannter Fehler'));
            }
        } catch (error) {
            showError('Netzwerkfehler', 'Netzwerkfehler beim Löschen');
        }
    }
    
    function exportAppointments() {
        const csv = generateCSV(appointments);
        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
        const link = document.createElement('a');
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        link.setAttribute('download', `termine_export_${new Date().toISOString().split('T')[0]}.csv`);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }
    
    function generateCSV(data) {
        // Sammle alle einzigartigen Zusatzfelder (basierend auf label)
        const allExtraFieldLabels = new Set();
        data.forEach(a => {
            if (a.extraFieldValues && Array.isArray(a.extraFieldValues)) {
                a.extraFieldValues.forEach(field => {
                    if (field.label) {
                        allExtraFieldLabels.add(field.label);
                    }
                });
            }
        });
        
        // Header mit Zusatzfeldern
        const baseHeaders = ['Buchungsdatum', 'Termin-Datum', 'Startzeit', 'Endzeit', 'Kurs', 'Kurstyp', 'Zielgruppe', 'Vorname', 'Nachname', 'E-Mail', 'Telefon', 'Geburtsdatum', 'Standort', 'Status', 'Notizen'];
        const extraFieldHeaders = Array.from(allExtraFieldLabels);
        const headers = [...baseHeaders, ...extraFieldHeaders];
        
        const rows = data.map(a => {
            const baseRow = [
                a.createdAt,
                a.dateFormatted,
                a.startTime,
                a.endTime,
                a.course,
                getTypeLabel(a.courseType),
                a.targetGroup || '-',
                a.customer.firstName,
                a.customer.lastName,
                a.customer.email,
                a.customer.phone,
                a.customer.birthDate || '-',
                a.location,
                getStatusLabel(a.status),
                (a.notes || '-').replace(/\n/g, ' ')
            ];
            
            // Füge Zusatzfeld-Werte hinzu (in der Reihenfolge der Header)
            const extraFieldValues = Array.from(allExtraFieldLabels).map(label => {
                if (a.extraFieldValues && Array.isArray(a.extraFieldValues)) {
                    const field = a.extraFieldValues.find(f => f.label === label);
                    if (field && field.value !== undefined && field.value !== null && field.value !== '') {
                        if (field.type === 'checkbox') {
                            return field.value ? 'Ja' : 'Nein';
                        }
                        return String(field.value);
                    }
                }
                return '-';
            });
            
            return [...baseRow, ...extraFieldValues];
        });
        
        return [headers, ...rows].map(row => row.map(cell => {
            const cellStr = String(cell || '');
            // Escape Anführungszeichen in Zellwerten
            return `"${cellStr.replace(/"/g, '""')}"`;
        }).join(';')).join('\n');
    }
    
    function showError(message) {
        const tbody = document.getElementById('appointmentsTableBody');
        tbody.innerHTML = `
            <tr>
                <td colspan="7" class="text-center py-5">
                    <i class="fas fa-exclamation-triangle text-danger" style="font-size: 3rem;"></i>
                    <p class="mt-3 text-danger mb-0">${message}</p>
                </td>
            </tr>
        `;
    }
    
    // Enter-Taste in Suchfeld
    document.getElementById('searchFilter').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            loadAppointments();
        }
    });
    
    // Wochentage-Mapping
    const dayNames = {
        1: 'Montag',
        2: 'Dienstag', 
        3: 'Mittwoch',
        4: 'Donnerstag',
        5: 'Freitag',
        6: 'Samstag',
        7: 'Sonntag'
    };
    
    // Termin-Details Modal Funktionen
    function fillAppointmentDetailsModal(appointment) {
        document.getElementById('appointmentId').value = appointment.id;
        
        // Kursinformationen
        document.getElementById('courseName').value = appointment.course;
        document.getElementById('courseType').value = getTypeLabel(appointment.courseType);
        document.getElementById('courseDays').value = appointment.daysOfWeek ? appointment.daysOfWeek.map(d => dayNames[d]).join(', ') : 'Keine Angabe';
        document.getElementById('courseTime').value = appointment.startTime === appointment.endTime ? appointment.startTime : appointment.startTime + ' - ' + appointment.endTime;
        
        // Kursdatum/Zeitraum
        let courseDateText = '';
        if (appointment.specificDate) {
            courseDateText = appointment.specificDate;
        } else if (appointment.startDate && appointment.endDate) {
            courseDateText = appointment.startDate + ' - ' + appointment.endDate;
        } else if (appointment.startDate) {
            courseDateText = appointment.startDate;
        } else {
            courseDateText = 'Keine Angabe';
        }
        document.getElementById('courseDate').value = courseDateText;
        
        // Kundeninformationen
        document.getElementById('customerFirstName').value = appointment.customer.firstName;
        document.getElementById('customerLastName').value = appointment.customer.lastName;
        document.getElementById('customerEmail').value = appointment.customer.email;
        document.getElementById('customerPhone').value = appointment.customer.phone || '';
        document.getElementById('customerBirthDate').value = appointment.customer.birthDate || '';
        
        // Dynamische Zusatzfelder
        const dynamicExtraFieldsContainer = document.getElementById('dynamicExtraFields');
        dynamicExtraFieldsContainer.innerHTML = '';
        
        if (appointment.extraFieldValues && Array.isArray(appointment.extraFieldValues) && appointment.extraFieldValues.length > 0) {
            appointment.extraFieldValues.forEach((fieldValue) => {
                const value = fieldValue.value || '';
                const escapedValue = String(value).replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                
                let fieldHTML = '<div class="col-md-6 mb-3">';
                fieldHTML += `<label class="form-label fw-semibold">${fieldValue.label || 'Feld'}</label>`;
                
                if (fieldValue.type === 'checkbox') {
                    fieldHTML += `<div class="form-check">`;
                    fieldHTML += `<input type="checkbox" class="form-check-input" ${value ? 'checked' : ''} disabled>`;
                    fieldHTML += `<label class="form-check-label">${value ? 'Ja' : 'Nein'}</label>`;
                    fieldHTML += `</div>`;
                } else if (fieldValue.type === 'textarea') {
                    fieldHTML += `<textarea class="form-control" rows="3" readonly>${escapedValue}</textarea>`;
                } else {
                    fieldHTML += `<input type="text" class="form-control" value="${escapedValue}" readonly>`;
                }
                
                fieldHTML += '</div>';
                dynamicExtraFieldsContainer.innerHTML += fieldHTML;
            });
        }
        
        // Termin-Details
        document.getElementById('bookingDate').value = appointment.createdAt || 'Keine Angabe';
        document.getElementById('bookingToken').value = appointment.bookingToken || 'Keine Angabe';
        document.getElementById('targetGroup').value = appointment.targetGroup || 'Keine Angabe';
        document.getElementById('appointmentStatus').value = appointment.status;
        document.getElementById('appointmentNotes').value = appointment.notes || '';
        
        // Verifizierungs-E-Mail Button anzeigen/verstecken
        const resendBtn = document.getElementById('resendVerificationBtn');
        if (appointment.status === 'pending' || appointment.status === 'confirmed') {
            resendBtn.style.display = 'inline-block';
        } else {
            resendBtn.style.display = 'none';
        }
        
        // Standort setzen
        const locationSelect = document.getElementById('location');
        locationSelect.innerHTML = `<option value="${appointment.location}">${appointment.location}</option>`;
    }
    
    async function saveAppointment() {
        const formData = new FormData(document.getElementById('appointmentDetailsForm'));
        const appointmentId = formData.get('id');
        
        try {
             const response = await fetch(`{{ path('appointment_admin_update', {'id': '__ID__'}) }}`.replace('__ID__', appointmentId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    customerFirstName: formData.get('customerFirstName'),
                    customerLastName: formData.get('customerLastName'),
                    customerEmail: formData.get('customerEmail'),
                    customerPhone: formData.get('customerPhone'),
                    customerBirthDate: formData.get('customerBirthDate'),
                    status: formData.get('status'),
                    notes: formData.get('notes')
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                showSuccess('Erfolg', 'Termin wurde erfolgreich aktualisiert!', function() {
                    bootstrap.Modal.getInstance(document.getElementById('appointmentDetailsModal')).hide();
                    loadAppointments();
                });
            } else {
                showError('Fehler', 'Fehler: ' + (data.error || 'Unbekannter Fehler'));
            }
        } catch (error) {
            showError('Netzwerkfehler', 'Netzwerkfehler beim Speichern');
        }
    }
    
    function rebookAppointment() {
        const appointmentId = document.getElementById('appointmentId').value;
        const customerName = document.getElementById('customerFirstName').value + ' ' + document.getElementById('customerLastName').value;
        const courseName = document.getElementById('courseName').value;
        
        showConfirm('Umbuchung', `Möchten Sie ${customerName} von "${courseName}" umbuchen?`, 'executeRebookAppointment');
        return;
    }
    
    function executeRebookAppointment() {
        
        // Modal schließen
        bootstrap.Modal.getInstance(document.getElementById('appointmentDetailsModal')).hide();
        
        // Booking Token aus den geladenen Appointments holen
        const appointment = appointments.find(a => a.id == appointmentId);
        if (!appointment || !appointment.bookingToken) {
            showError('Fehler', 'Buchungscode nicht gefunden!');
            return;
        }
        
        // Zur Umbuchungsseite mit bookingToken weiterleiten (wie im alten System)
        setTimeout(() => {
            window.location.href = `/public/appointments/reschedule/${appointment.bookingToken}`;
        }, 300);
    }
    
    async function cancelAppointment() {
        const appointmentId = document.getElementById('appointmentId').value;
        const customerName = document.getElementById('customerFirstName').value + ' ' + document.getElementById('customerLastName').value;
        const courseName = document.getElementById('courseName').value;
        
        showConfirm('Stornierung', `Möchten Sie ${customerName} von "${courseName}" wirklich stornieren?\n\nDies kann nicht rückgängig gemacht werden!`, 'executeCancelAppointment');
        return;
    }
    
    async function executeCancelAppointment() {
        const appointmentId = document.getElementById('appointmentId').value;
        
        try {
             const response = await fetch(`{{ path('appointment_admin_cancel', {'id': '__ID__'}) }}`.replace('__ID__', appointmentId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    reason: 'Admin cancellation',
                    sendNotification: true
                })
            });
            
            const data = await response.json();
            
            if (data.success) {
                showSuccess('Erfolg', 'Termin wurde erfolgreich storniert!', function() {
                    bootstrap.Modal.getInstance(document.getElementById('appointmentDetailsModal')).hide();
                    loadAppointments();
                });
            } else {
                showError('Fehler', 'Fehler beim Stornieren: ' + (data.error || 'Unbekannter Fehler'));
            }
        } catch (error) {
            showError('Netzwerkfehler', 'Netzwerkfehler beim Stornieren');
        }
    }
    
    // Verifizierungs-E-Mail erneut senden
    async function resendVerificationEmail() {
        const appointmentId = document.getElementById('appointmentId').value;
        const customerEmail = document.getElementById('customerEmail').value;
        const customerName = document.getElementById('customerFirstName').value + ' ' + document.getElementById('customerLastName').value;
        
        if (!customerEmail) {
            showError('Fehler', 'Keine E-Mail-Adresse vorhanden!');
            return;
        }
        
        showConfirm('E-Mail senden', `Möchten Sie die Verifizierungs-E-Mail an ${customerName} (${customerEmail}) erneut senden?`, 'executeResendVerificationEmail');
        return;
    }
    
    async function executeResendVerificationEmail() {
        const appointmentId = document.getElementById('appointmentId').value;
        
        try {
            const response = await fetch(`{{ path('admin_appointment_resend_verification', {'id': '__ID__'}) }}`.replace('__ID__', appointmentId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            
            const data = await response.json();
            
            if (data.success) {
                showSuccess('Erfolg', 'Verifizierungs-E-Mail wurde erfolgreich erneut gesendet!');
            } else {
                showError('Fehler', 'Fehler beim Senden: ' + (data.error || 'Unbekannter Fehler'));
            }
        } catch (error) {
            console.error('Error resending verification email:', error);
            showError('Netzwerkfehler', 'Netzwerkfehler beim Senden der Verifizierungs-E-Mail');
        }
    }
    
    // E-Mail Modal Funktionen
    function openEmailModal() {
        const appointmentId = document.getElementById('appointmentId').value;
        const customerEmail = document.getElementById('customerEmail').value;
        const customerName = document.getElementById('customerFirstName').value + ' ' + document.getElementById('customerLastName').value;
        const courseName = document.getElementById('courseName').value;
        
        if (!customerEmail) {
            showError('Fehler', 'Keine E-Mail-Adresse vorhanden!');
            return;
        }
        
        // Modal-Daten setzen
        document.getElementById('emailAppointmentId').value = appointmentId;
        document.getElementById('recipientEmail').value = customerEmail;
        
        // Standard-Betreff und Nachricht setzen
        document.getElementById('emailSubject').value = `Termin-Information: ${courseName}`;
        document.getElementById('emailMessage').value = `Hallo ${customerName},\n\nvielen Dank für Ihre Buchung!\n\nKurs: ${courseName}\n\nMit freundlichen Grüßen\nIhr SwimMonitor Team`;
        
        // Modal öffnen
        const modal = new bootstrap.Modal(document.getElementById('emailModal'));
        modal.show();
        
        // Vorschau aktualisieren
        previewEmail();
    }
    
    function toggleCustomEmail() {
        const emailType = document.getElementById('emailType').value;
        const customFields = document.getElementById('customEmailFields');
        
        if (emailType === 'custom') {
            customFields.style.display = 'block';
        } else {
            customFields.style.display = 'none';
            // Standard-Texte setzen
            setStandardEmailContent(emailType);
        }
        
        previewEmail();
    }
    
    function setStandardEmailContent(emailType) {
        const customerName = document.getElementById('customerFirstName').value + ' ' + document.getElementById('customerLastName').value;
        const courseName = document.getElementById('courseName').value;
        
        switch (emailType) {
            case 'confirmation':
                document.getElementById('emailSubject').value = `Termin-Bestätigung: ${courseName}`;
                document.getElementById('emailMessage').value = `Hallo ${customerName},\n\nIhr Termin wurde bestätigt!\n\nKurs: ${courseName}\n\nMit freundlichen Grüßen\nIhr SwimMonitor Team`;
                break;
            case 'reminder':
                document.getElementById('emailSubject').value = `Termin-Erinnerung: ${courseName}`;
                document.getElementById('emailMessage').value = `Hallo ${customerName},\n\ndies ist eine freundliche Erinnerung an Ihren Termin.\n\nKurs: ${courseName}\n\nMit freundlichen Grüßen\nIhr SwimMonitor Team`;
                break;
            case 'cancellation':
                document.getElementById('emailSubject').value = `Termin-Stornierung: ${courseName}`;
                document.getElementById('emailMessage').value = `Hallo ${customerName},\n\nleider müssen wir Ihnen mitteilen, dass Ihr Termin storniert wurde.\n\nKurs: ${courseName}\n\nBei Fragen wenden Sie sich gerne an uns.\n\nMit freundlichen Grüßen\nIhr SwimMonitor Team`;
                break;
        }
    }
    
    function previewEmail() {
        const subject = document.getElementById('emailSubject').value;
        const message = document.getElementById('emailMessage').value;
        const preview = document.getElementById('emailPreview');
        
        if (!subject && !message) {
            preview.innerHTML = '<em class="text-muted">Wählen Sie einen E-Mail-Typ oder geben Sie eine benutzerdefinierte Nachricht ein...</em>';
            return;
        }
        
        let previewHtml = '';
        if (subject) {
            previewHtml += `<div class="mb-2"><strong>Betreff:</strong> ${subject}</div>`;
        }
        if (message) {
            previewHtml += `<div><strong>Nachricht:</strong></div><div class="mt-2" style="white-space: pre-line;">${message}</div>`;
        }
        
        preview.innerHTML = previewHtml;
    }
    
    async function sendCustomEmail() {
        const appointmentId = document.getElementById('emailAppointmentId').value;
        const emailType = document.getElementById('emailType').value;
        const subject = document.getElementById('emailSubject').value;
        const message = document.getElementById('emailMessage').value;
        const recipientEmail = document.getElementById('recipientEmail').value;
        
        if (!subject.trim()) {
            showError('Fehler', 'Bitte geben Sie einen Betreff ein!');
            return;
        }
        
        if (!message.trim()) {
            showError('Fehler', 'Bitte geben Sie eine Nachricht ein!');
            return;
        }
        
        showConfirm('E-Mail senden', `E-Mail an ${recipientEmail} senden?`, 'executeSendEmail');
        return;
    }
    
    async function executeSendEmail() {
        const appointmentId = document.getElementById('emailAppointmentId').value;
        const emailType = document.getElementById('emailType').value;
        const subject = document.getElementById('emailSubject').value;
        const message = document.getElementById('emailMessage').value;
        const recipientEmail = document.getElementById('recipientEmail').value;
        
         try {
             const response = await fetch(`{{ path('appointment_admin_send_custom_email', {'id': '__ID__'}) }}`.replace('__ID__', appointmentId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    emailType: emailType,
                    subject: subject,
                    message: message,
                    recipientEmail: recipientEmail
                })
            });
            
            console.log('Response status:', response.status);
            console.log('Response URL:', response.url);
            
            const data = await response.json();
            
            if (data.success) {
                showSuccess('Erfolg', 'E-Mail wurde erfolgreich gesendet!', function() {
                    bootstrap.Modal.getInstance(document.getElementById('emailModal')).hide();
                });
            } else {
                showError('Fehler', 'Fehler beim Senden: ' + (data.error || 'Unbekannter Fehler'));
            }
        } catch (error) {
            showError('Netzwerkfehler', 'Netzwerkfehler beim Senden der E-Mail');
        }
    }

    // Tag-Abmeldung Funktion
    async function cancelDays(appointmentId) {
        const appointment = appointments.find(a => a.id === appointmentId);
        if (!appointment) return;

        // Hole Kurs-Details für verfügbare Tage
        try {
            // Verwende relativen Pfad basierend auf aktueller URL
            const baseUrl = window.location.origin + window.location.pathname.split('/').slice(0, -1).join('/');
            const response = await fetch(`${baseUrl}/appointments/api/${appointmentId}/course-days`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
            const courseDays = await response.json();
            
            if (!courseDays.success) {
                showError('Fehler beim Laden der Kurs-Tage');
                return;
            }

            // Erstelle Modal für Tag-Auswahl
            const modalHtml = `
                <div class="modal fade" id="cancelDaysModal" tabindex="-1">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">
                                    <i class="fas fa-calendar-times me-2"></i>Tage abmelden
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
                            <div class="modal-body">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    <strong>Kunde:</strong> ${appointment.customer.firstName} ${appointment.customer.lastName}<br>
                                    <strong>Kurs:</strong> ${appointment.course}
                                </div>
                                
                                <div class="mb-3">
                                    <label class="form-label">Wählen Sie die Tage aus, die abgemeldet werden sollen:</label>
                                    <div class="row" id="daySelectionList">
                                        ${courseDays.days.map(day => `
                                            <div class="col-md-6 mb-2">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="${day.date}" id="day_${day.date}" ${appointment.cancelledDays && appointment.cancelledDays.includes(day.date) ? 'checked' : ''}>
                                                    <label class="form-check-label" for="day_${day.date}">
                                                        <strong>${day.dayName}</strong> - ${day.date}<br>
                                                        <small class="text-muted">${day.startTime} - ${day.endTime}</small>
                                                    </label>
                                                </div>
                                            </div>
                                        `).join('')}
                                    </div>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="cancelReason" class="form-label">Grund für die Abmeldung (optional)</label>
                                    <textarea class="form-control" id="cancelReason" rows="3" placeholder="z.B. Krankheit, Terminkonflikt, etc."></textarea>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                    <i class="fas fa-times me-2"></i>Abbrechen
                                </button>
                                <button type="button" class="btn btn-warning" onclick="saveDayCancellations(${appointmentId})">
                                    <i class="fas fa-calendar-times me-2"></i>Tage abmelden
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            `;

            // Entferne existierendes Modal falls vorhanden
            const existingModal = document.getElementById('cancelDaysModal');
            if (existingModal) {
                existingModal.remove();
            }

            // Füge neues Modal hinzu
            document.body.insertAdjacentHTML('beforeend', modalHtml);
            
            // Zeige Modal
            const modal = new bootstrap.Modal(document.getElementById('cancelDaysModal'));
            modal.show();

        } catch (error) {
            console.error('Error loading course days:', error);
            showError('Fehler beim Laden der Kurs-Tage');
        }
    }

    // Speichere Tag-Abmeldungen
    async function saveDayCancellations(appointmentId) {
        const selectedDays = Array.from(document.querySelectorAll('#daySelectionList input:checked')).map(cb => cb.value);
        const reason = document.getElementById('cancelReason').value;

        try {
            // Verwende relativen Pfad basierend auf aktueller URL
            const baseUrl = window.location.origin + window.location.pathname.split('/').slice(0, -1).join('/');
            const response = await fetch(`${baseUrl}/appointments/api/${appointmentId}/cancel-days`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    cancelledDays: selectedDays,
                    reason: reason
                })
            });

            const result = await response.json();

            if (result.success) {
                // Schließe Modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('cancelDaysModal'));
                modal.hide();
                
                // Lade Termine neu
                loadAppointments();
                
                // Zeige Erfolgsmeldung
                showSuccess(`Tage erfolgreich abgemeldet: ${selectedDays.length} Tag(e)`);
            } else {
                showError(result.error || 'Fehler beim Abmelden der Tage');
            }
        } catch (error) {
            console.error('Error saving day cancellations:', error);
            showError('Fehler beim Speichern der Tag-Abmeldungen');
        }
    }

    // Hilfsfunktion für Erfolgsmeldungen
    function showSuccess(message) {
        // Erstelle Toast oder Alert
        const alertHtml = `
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <i class="fas fa-check-circle me-2"></i>${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        
        // Füge Alert oben auf der Seite hinzu
        const container = document.querySelector('.container-fluid');
        container.insertAdjacentHTML('afterbegin', alertHtml);
        
        // Entferne Alert nach 5 Sekunden
        setTimeout(() => {
            const alert = container.querySelector('.alert-success');
            if (alert) {
                alert.remove();
            }
        }, 5000);
    }
    
    // Universelles Modal-System
    function showModalAlert(type, title, message, callback = null) {
        const modalHtml = `
            <div class="modal fade modal-alert" id="alertModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="alert-icon">
                                ${type === 'success' ? '<i class="fas fa-check-circle"></i>' : 
                                  type === 'error' ? '<i class="fas fa-exclamation-circle"></i>' :
                                  type === 'warning' ? '<i class="fas fa-exclamation-triangle"></i>' :
                                  '<i class="fas fa-info-circle"></i>'}
                            </div>
                            <h5 class="modal-title">${title}</h5>
                            <p class="mb-0">${message}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="${callback ? callback + '()' : ''}">
                                OK
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Entferne existierendes Modal
        const existingModal = document.getElementById('alertModal');
        if (existingModal) {
            existingModal.remove();
        }
        
        // Füge neues Modal hinzu
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        
        // Zeige Modal
        const modal = new bootstrap.Modal(document.getElementById('alertModal'));
        modal.show();
        
        // Entferne Modal nach dem Schließen
        document.getElementById('alertModal').addEventListener('hidden.bs.modal', function() {
            this.remove();
        });
    }
    
    // Convenience-Funktionen
    function showSuccess(title, message, callback = null) {
        showModalAlert('success', title, message, callback);
    }
    
    function showError(title, message, callback = null) {
        showModalAlert('error', title, message, callback);
    }
    
    function showWarning(title, message, callback = null) {
        showModalAlert('warning', title, message, callback);
    }
    
    function showInfo(title, message, callback = null) {
        showModalAlert('info', title, message, callback);
    }
    
    // Bestätigungs-Modal
    function showConfirm(title, message, confirmCallback, cancelCallback = null) {
        const modalHtml = `
            <div class="modal fade modal-alert" id="confirmModal" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="alert-icon">
                                <i class="fas fa-question-circle" style="color: #ffc107;"></i>
                            </div>
                            <h5 class="modal-title">${title}</h5>
                            <p class="mb-0">${message}</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="${cancelCallback ? cancelCallback + '()' : ''}">
                                Abbrechen
                            </button>
                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal" onclick="${confirmCallback}()">
                                OK
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        // Entferne existierendes Modal
        const existingModal = document.getElementById('confirmModal');
        if (existingModal) {
            existingModal.remove();
        }
        
        // Füge neues Modal hinzu
        document.body.insertAdjacentHTML('beforeend', modalHtml);
        
        // Zeige Modal
        const modal = new bootstrap.Modal(document.getElementById('confirmModal'));
        modal.show();
        
        // Entferne Modal nach dem Schließen
        document.getElementById('confirmModal').addEventListener('hidden.bs.modal', function() {
            this.remove();
        });
    }
</script>

<!-- Termin-Details Modal -->
<div class="modal fade" id="appointmentDetailsModal" tabindex="-1" aria-labelledby="appointmentDetailsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, #4e73df, #375fc7); color: white;">
                <h5 class="modal-title" id="appointmentDetailsModalLabel">
                    <i class="fas fa-calendar-check me-2"></i>Termin bearbeiten
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="appointmentDetailsForm">
                    <input type="hidden" id="appointmentId" name="id">
                    
                    <!-- Kursinformationen -->
                    <div class="mb-4">
                        <h6 class="text-primary mb-3">
                            <i class="fas fa-graduation-cap me-2"></i>Kursinformationen
                        </h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="courseName" class="form-label fw-semibold">Kursname</label>
                                <input type="text" class="form-control" id="courseName" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="courseType" class="form-label fw-semibold">Kurstyp</label>
                                <input type="text" class="form-control" id="courseType" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="courseDays" class="form-label fw-semibold">Kurstage</label>
                                <input type="text" class="form-control" id="courseDays" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="courseTime" class="form-label fw-semibold">Kurszeit</label>
                                <input type="text" class="form-control" id="courseTime" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="courseDate" class="form-label fw-semibold">Kursdatum/Zeitraum</label>
                                <input type="text" class="form-control" id="courseDate" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="location" class="form-label fw-semibold">Standort</label>
                                <select class="form-select" id="location" name="location">
                                    <option value="">Standort auswählen...</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Kundeninformationen -->
                    <div class="mb-4">
                        <h6 class="text-primary mb-3">
                            <i class="fas fa-user me-2"></i>Kundeninformationen
                        </h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="customerFirstName" class="form-label fw-semibold">Vorname</label>
                                <input type="text" class="form-control" id="customerFirstName" name="customerFirstName">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="customerLastName" class="form-label fw-semibold">Nachname</label>
                                <input type="text" class="form-control" id="customerLastName" name="customerLastName">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="customerEmail" class="form-label fw-semibold">E-Mail</label>
                                <input type="email" class="form-control" id="customerEmail" name="customerEmail">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="customerPhone" class="form-label fw-semibold">Telefon</label>
                                <input type="tel" class="form-control" id="customerPhone" name="customerPhone">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Zusatzfelder -->
                    <div class="mb-4">
                        <h6 class="text-primary mb-3">
                            <i class="fas fa-info-circle me-2"></i>Zusatzfelder
                        </h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="customerBirthDate" class="form-label fw-semibold">Geburtsdatum</label>
                                <input type="date" class="form-control" id="customerBirthDate" name="customerBirthDate">
                            </div>
                            <div class="col-12" id="dynamicExtraFields">
                                <!-- Dynamische Zusatzfelder werden hier eingefügt -->
                            </div>
                        </div>
                    </div>
                    
                    <!-- Termin-Details -->
                    <div class="mb-4">
                        <h6 class="text-primary mb-3">
                            <i class="fas fa-calendar-alt me-2"></i>Termin-Details
                        </h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="bookingDate" class="form-label fw-semibold">Buchungsdatum</label>
                                <input type="text" class="form-control" id="bookingDate" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="bookingToken" class="form-label fw-semibold">Buchungscode</label>
                                <input type="text" class="form-control" id="bookingToken" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="targetGroup" class="form-label fw-semibold">Zielgruppe</label>
                                <input type="text" class="form-control" id="targetGroup" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="appointmentStatus" class="form-label fw-semibold">Status</label>
                                <select class="form-select" id="appointmentStatus" name="status">
                                    <option value="pending">Ausstehend</option>
                                    <option value="confirmed">Bestätigt</option>
                                    <option value="cancelled">Storniert</option>
                                    <option value="completed">Abgeschlossen</option>
                                </select>
                            </div>
                            <div class="col-12 mb-3">
                                <label for="appointmentNotes" class="form-label fw-semibold">Notizen</label>
                                <textarea class="form-control" id="appointmentNotes" name="notes" rows="3" placeholder="Interne Notizen zum Termin..."></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="saveAppointment()">
                    <i class="fas fa-save me-2"></i>Speichern
                </button>
                <button type="button" class="btn btn-warning" onclick="rebookAppointment()">
                    <i class="fas fa-calendar-alt me-2"></i>Umbuchen
                </button>
                <button type="button" class="btn btn-danger" onclick="cancelAppointment()">
                    <i class="fas fa-times me-2"></i>Abmelden
                </button>
                <button type="button" class="btn btn-info" onclick="openEmailModal()">
                    <i class="fas fa-envelope me-2"></i>E-Mail senden
                </button>
                <button type="button" class="btn btn-success" onclick="resendVerificationEmail()" id="resendVerificationBtn" style="display: none;">
                    <i class="fas fa-paper-plane me-2"></i>Verifizierungs-E-Mail erneut senden
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Schließen
                </button>
            </div>
        </div>
    </div>
</div>

<!-- E-Mail Modal -->
<div class="modal fade" id="emailModal" tabindex="-1" aria-labelledby="emailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header" style="background: linear-gradient(135deg, #17a2b8, #138496); color: white;">
                <h5 class="modal-title" id="emailModalLabel">
                    <i class="fas fa-envelope me-2"></i>E-Mail an Kunden senden
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="emailForm">
                    <input type="hidden" id="emailAppointmentId" name="appointmentId">
                    
                    <!-- Empfänger -->
                    <div class="mb-3">
                        <label for="recipientEmail" class="form-label fw-semibold">Empfänger</label>
                        <input type="email" class="form-control" id="recipientEmail" name="recipientEmail" readonly>
                        <div class="form-text">E-Mail-Adresse des Kunden</div>
                    </div>
                    
                    <!-- E-Mail-Typ -->
                    <div class="mb-3">
                        <label for="emailType" class="form-label fw-semibold">E-Mail-Typ</label>
                        <select class="form-select" id="emailType" name="emailType" onchange="toggleCustomEmail()">
                            <option value="custom">Benutzerdefiniert</option>
                            <option value="confirmation">Bestätigung</option>
                            <option value="reminder">Erinnerung</option>
                            <option value="cancellation">Stornierung</option>
                        </select>
                    </div>
                    
                    <!-- Benutzerdefinierte E-Mail -->
                    <div id="customEmailFields">
                        <div class="mb-3">
                            <label for="emailSubject" class="form-label fw-semibold">Betreff</label>
                            <input type="text" class="form-control" id="emailSubject" name="subject" placeholder="Betreff der E-Mail...">
                        </div>
                        
                        <div class="mb-3">
                            <label for="emailMessage" class="form-label fw-semibold">Nachricht</label>
                            <textarea class="form-control" id="emailMessage" name="message" rows="8" placeholder="Ihre Nachricht an den Kunden..."></textarea>
                            <div class="form-text">
                                <strong>Verfügbare Platzhalter:</strong><br>
                                <code>{{ "{{customer_name}}" }}</code> - Name des Kunden<br>
                                <code>{{ "{{course_name}}" }}</code> - Name des Kurses<br>
                                <code>{{ "{{appointment_date}}" }}</code> - Termindatum<br>
                                <code>{{ "{{appointment_time}}" }}</code> - Terminzeit<br>
                                <code>{{ "{{location}}" }}</code> - Standort
                            </div>
                        </div>
                    </div>
                    
                    <!-- Vorschau -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Vorschau</label>
                        <div class="border rounded p-3 bg-light" id="emailPreview" style="min-height: 100px;">
                            <em class="text-muted">Wählen Sie einen E-Mail-Typ oder geben Sie eine benutzerdefinierte Nachricht ein...</em>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Abbrechen
                </button>
                <button type="button" class="btn btn-info" onclick="previewEmail()">
                    <i class="fas fa-eye me-2"></i>Vorschau
                </button>
                <button type="button" class="btn btn-primary" onclick="sendCustomEmail()">
                    <i class="fas fa-paper-plane me-2"></i>E-Mail senden
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}