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

{% block title %}Universal Kalender Integration - Admin{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .provider-card {
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid #e9ecef;
            border-radius: 0.5rem;
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        }
        
        .provider-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            border-color: #0d6efd;
        }
        
        .provider-card.selected {
            border-color: #0d6efd;
            background: linear-gradient(135deg, #e7f3ff 0%, #f0f8ff 100%);
        }
        
        .connection-item {
            border-left: 4px solid #28a745;
            background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
            border-radius: 0 0.5rem 0.5rem 0;
        }
        
        .credentials-form {
            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
            border: 2px solid #e9ecef;
            border-radius: 0.5rem;
            padding: 1.5rem;
            margin-top: 1rem;
        }
        
        .sync-progress {
            display: none;
        }
        
        .sync-progress.active {
            display: block;
        }
        
        .provider-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
        }
        
        .microsoft-icon { background: linear-gradient(135deg, #00a1f1 0%, #0078d4 100%); }
        .google-icon { background: linear-gradient(135deg, #4285f4 0%, #34a853 100%); }
        .caldav-icon { background: linear-gradient(135deg, #6f42c1 0%, #563d7c 100%); }
        .ical-icon { background: linear-gradient(135deg, #fd7e14 0%, #e63946 100%); }
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <h1 class="h3 mb-1">
                        <i class="fas fa-calendar-alt me-2 text-primary"></i>
                        Universal Kalender Integration
                    </h1>
                    <p class="text-muted mb-0">Synchronisieren Sie Ihre Kurse mit verschiedenen Kalender-Anbietern</p>
                </div>
                <div class="d-flex align-items-center gap-3">
                    <!-- Auto-Sync Toggle -->
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="autoSyncToggle" 
                               onchange="toggleAutoSync(this.checked)"
                               {{ app.session.get('calendar_auto_sync_enabled') ? 'checked' : '' }}>
                        <label class="form-check-label" for="autoSyncToggle">
                            <i class="fas fa-sync-alt me-1"></i>
                            <strong>Auto-Sync</strong>
                        </label>
                    </div>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="{{ path('appointment_admin') }}">Admin</a></li>
                            <li class="breadcrumb-item active">Kalender Integration</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- Provider-Auswahl -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-plug me-2"></i>
                        Kalender-Anbieter auswählen
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-4" id="providerSelection">
                        {% for key, provider in providers %}
                            <div class="col-md-6 col-lg-3">
                                <div class="provider-card p-3 h-100" data-provider="{{ key }}" onclick="selectProvider('{{ key }}')">
                                    <div class="text-center">
                                        <div class="provider-icon {{ key }}-icon">
                                            <i class="{{ provider.icon }} fa-2x text-white"></i>
                                        </div>
                                        <h6 class="fw-semibold">{{ provider.name }}</h6>
                                        <p class="text-muted small mb-0">{{ provider.description }}</p>
                                        <div class="mt-2">
                                            <span class="badge bg-light text-dark">{{ provider.auth_type|upper }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Gespeicherte Verbindungen -->
    {% if connections|length > 0 %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-link me-2"></i>
                        Gespeicherte Verbindungen ({{ connections|length }})
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        {% for connection in connections %}
                            <div class="col-md-6 col-lg-4">
                                <div class="connection-item p-3 rounded">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <div>
                                            <h6 class="mb-1 fw-semibold">{{ connection.name }}</h6>
                                            <small class="text-muted">
                                                <i class="{{ providers[connection.provider].icon }} me-1"></i>
                                                {{ providers[connection.provider].name }}
                                            </small>
                                        </div>
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                                <i class="fas fa-ellipsis-v"></i>
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#" onclick="useConnection('{{ connection.id }}')">
                                                    <i class="fas fa-play me-1"></i>Verwenden
                                                </a></li>
                                                <li><a class="dropdown-item" href="#" onclick="testConnection('{{ connection.id }}')">
                                                    <i class="fas fa-wifi me-1"></i>Testen
                                                </a></li>
                                                <li><hr class="dropdown-divider"></li>
                                                <li><a class="dropdown-item text-danger" href="#" onclick="deleteConnection('{{ connection.id }}')">
                                                    <i class="fas fa-trash me-1"></i>Löschen
                                                </a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <small class="text-muted">
                                            Erstellt: {{ connection.created_at.format('d.m.Y H:i') }}
                                        </small>
                                        <button class="btn btn-sm btn-success" onclick="useConnection('{{ connection.id }}')">
                                            <i class="fas fa-sync me-1"></i>Synchronisieren
                                        </button>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Anmeldedaten-Formular -->
    <div id="credentialsSection" style="display: none;">
        <div class="row mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-info text-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-key me-2"></i>
                            Anmeldedaten eingeben
                        </h5>
                    </div>
                    <div class="card-body">
                        <div id="credentialsForm">
                            <!-- Wird dynamisch befüllt -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Synchronisation-Aktionen -->
    <div id="syncSection" style="display: none;">
        <div class="row mb-4">
            <div class="col-12">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-sync-alt me-2"></i>
                            Synchronisation
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="text-center p-3 border rounded">
                                    <i class="fas fa-cloud-upload-alt fa-2x text-primary mb-3"></i>
                                    <h6>Alle Kurse synchronisieren</h6>
                                    <p class="text-muted small mb-3">Synchronisiert alle aktiven Kurse</p>
                                    <button class="btn btn-primary w-100" onclick="syncAllCourses()">
                                        <i class="fas fa-sync me-1"></i>Alle synchronisieren
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="text-center p-3 border rounded">
                                    <i class="fas fa-download fa-2x text-success mb-3"></i>
                                    <h6>iCal-Datei exportieren</h6>
                                    <p class="text-muted small mb-3">Für manuellen Import</p>
                                    <button class="btn btn-success w-100" onclick="exportAllIcal()">
                                        <i class="fas fa-file-download me-1"></i>iCal exportieren
                                    </button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Fortschrittsanzeige -->
                        <div class="sync-progress mt-4" id="syncProgress">
                            <div class="progress mb-2">
                                <div class="progress-bar progress-bar-striped progress-bar-animated" 
                                     role="progressbar" style="width: 0%" id="progressBar"></div>
                            </div>
                            <div class="text-center">
                                <small class="text-muted" id="progressText">Synchronisation läuft...</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Kursliste -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-0">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-list me-2 text-primary"></i>
                            Kurse ({{ courses|length }})
                        </h5>
                        <div class="d-flex gap-2">
                            <button class="btn btn-sm btn-outline-primary" onclick="selectAllCourses()">
                                <i class="fas fa-check-square me-1"></i>Alle auswählen
                            </button>
                            <button class="btn btn-sm btn-outline-secondary" onclick="deselectAllCourses()">
                                <i class="fas fa-square me-1"></i>Alle abwählen
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {% if courses|length > 0 %}
                        <div class="row g-3">
                            {% for course in courses %}
                                <div class="col-md-6 col-lg-4">
                                    <div class="card h-100 course-card" data-course-id="{{ course.id }}">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                <div class="form-check">
                                                    <input class="form-check-input course-checkbox" type="checkbox" 
                                                           value="{{ course.id }}" id="course{{ course.id }}">
                                                    <label class="form-check-label fw-semibold" for="course{{ course.id }}">
                                                        {{ course.name }}
                                                    </label>
                                                </div>
                                                <span class="badge bg-{% if course.isAvailable %}success{% else %}secondary{% endif %}">
                                                    {% if course.isAvailable %}Aktiv{% else %}Inaktiv{% endif %}
                                                </span>
                                            </div>
                                            
                                            <div class="mb-2">
                                                <small class="text-muted">
                                                    <i class="fas fa-tag me-1"></i>
                                                    {% set type_labels = {
                                                        'event': 'Einmaliges Event',
                                                        'recurring_course': 'Dauerhafter Kurs',
                                                        'limited_course': 'Zeitlich begrenzter Kurs',
                                                        'holiday_course': 'Ferienkurs'
                                                    } %}
                                                    {{ type_labels[course.type] ?? 'Unbekannt' }}
                                                </small>
                                            </div>
                                            
                                            {% if course.location %}
                                                <div class="mb-2">
                                                    <small class="text-muted">
                                                        <i class="fas fa-map-marker-alt me-1"></i>
                                                        {{ course.location.name }}
                                                    </small>
                                                </div>
                                            {% endif %}
                                            
                                            <div class="mb-3">
                                                <small class="text-muted">
                                                    <i class="fas fa-users me-1"></i>
                                                    Max. {{ course.maxSlots ?? 1 }} Teilnehmer
                                                </small>
                                            </div>
                                            
                                            <div class="d-grid gap-2">
                                                {% if course.isAvailable %}
                                                    <button class="btn btn-outline-primary btn-sm" 
                                                            onclick="syncSingleCourse({{ course.id }}, '{{ course.name|e('js') }}')">
                                                        <i class="fas fa-sync me-1"></i>Synchronisieren
                                                    </button>
                                                {% endif %}
                                                <button class="btn btn-outline-success btn-sm" 
                                                        onclick="exportSingleIcal({{ course.id }}, '{{ course.name|e('js') }}')">
                                                    <i class="fas fa-download me-1"></i>iCal exportieren
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="text-center py-5">
                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                            <h5 class="text-muted">Keine Kurse vorhanden</h5>
                            <p class="text-muted">Erstellen Sie zuerst Kurse, um sie zu synchronisieren.</p>
                            <a href="{{ path('admin_courses_index') }}" class="btn btn-primary">
                                <i class="fas fa-plus me-1"></i>Kurs erstellen
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Toast Container -->
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastContainer"></div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        let selectedProvider = null;
        let currentCredentials = {};
        let savedConnections = {{ connections|json_encode|raw }};
        
        function selectProvider(provider) {
            selectedProvider = provider;
            
            // Visuelle Auswahl
            document.querySelectorAll('.provider-card').forEach(card => {
                card.classList.remove('selected');
            });
            document.querySelector(`[data-provider="${provider}"]`).classList.add('selected');
            
            // Anmeldedaten-Formular anzeigen
            showCredentialsForm(provider);
        }
        
        function showCredentialsForm(provider) {
            const section = document.getElementById('credentialsSection');
            const form = document.getElementById('credentialsForm');
            
            let formHtml = '';
            
            switch(provider) {
                case 'microsoft':
                    formHtml = `
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">E-Mail-Adresse</label>
                                <input type="email" class="form-control" id="outlookEmail" placeholder="user@outlook.com" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Verbindungsname</label>
                                <input type="text" class="form-control" id="connectionName" placeholder="Mein Outlook" required>
                            </div>
                            <div class="col-12">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    Sie werden zu Microsoft weitergeleitet, um sich anzumelden.
                                </div>
                            </div>
                        </div>
                    `;
                    break;
                    
                case 'google':
                    formHtml = `
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Gmail-Adresse</label>
                                <input type="email" class="form-control" id="googleEmail" placeholder="user@gmail.com" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Verbindungsname</label>
                                <input type="text" class="form-control" id="connectionName" placeholder="Mein Google Calendar" required>
                            </div>
                            <div class="col-12">
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle me-2"></i>
                                    Sie werden zu Google weitergeleitet, um sich anzumelden.
                                </div>
                            </div>
                        </div>
                    `;
                    break;
                    
                case 'caldav':
                    formHtml = `
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">CalDAV-URL</label>
                                <input type="url" class="form-control" id="caldavUrl" placeholder="https://caldav.example.com/" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Verbindungsname</label>
                                <input type="text" class="form-control" id="connectionName" placeholder="Mein CalDAV" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Benutzername</label>
                                <input type="text" class="form-control" id="caldavUsername" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Passwort</label>
                                <input type="password" class="form-control" id="caldavPassword" required>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Kalender-Pfad (optional)</label>
                                <input type="text" class="form-control" id="calendarPath" placeholder="/calendar/" value="/calendar/">
                            </div>
                        </div>
                    `;
                    break;
                    
                case 'ical':
                    formHtml = `
                        <div class="alert alert-success">
                            <i class="fas fa-check-circle me-2"></i>
                            iCal-Export benötigt keine Anmeldung. Sie können direkt mit der Synchronisation beginnen.
                        </div>
                    `;
                    break;
            }
            
            formHtml += `
                <div class="d-flex gap-2 mt-3">
                    ${provider !== 'ical' ? `
                        <button class="btn btn-primary" onclick="testConnection()">
                            <i class="fas fa-wifi me-1"></i>Verbindung testen
                        </button>
                        <button class="btn btn-success" onclick="saveConnection()">
                            <i class="fas fa-save me-1"></i>Verbindung speichern
                        </button>
                    ` : ''}
                    <button class="btn btn-warning" onclick="proceedToSync()">
                        <i class="fas fa-arrow-right me-1"></i>Zur Synchronisation
                    </button>
                </div>
            `;
            
            form.innerHTML = formHtml;
            section.style.display = 'block';
        }
        
        function testConnection() {
            const credentials = gatherCredentials();
            if (!credentials) return;
            
            fetch('{{ path('admin_calendar_test_connection') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    provider: selectedProvider,
                    credentials: credentials
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast('Verbindung erfolgreich', data.message, 'success');
                } else {
                    showToast('Verbindung fehlgeschlagen', data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Connection test error:', error);
                showToast('Fehler', 'Netzwerkfehler beim Verbindungstest', 'error');
            });
        }
        
        function saveConnection() {
            const credentials = gatherCredentials();
            const name = document.getElementById('connectionName')?.value;
            
            if (!credentials || !name) {
                showToast('Fehler', 'Bitte füllen Sie alle Felder aus', 'error');
                return;
            }
            
            fetch('{{ path('admin_calendar_save_connection') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    provider: selectedProvider,
                    name: name,
                    credentials: credentials
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast('Gespeichert', 'Verbindung wurde gespeichert', 'success');
                    setTimeout(() => location.reload(), 1500);
                } else {
                    showToast('Fehler', data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Save connection error:', error);
                showToast('Fehler', 'Netzwerkfehler beim Speichern', 'error');
            });
        }
        
        function proceedToSync() {
            currentCredentials = gatherCredentials();
            if (selectedProvider === 'ical' || currentCredentials) {
                document.getElementById('syncSection').style.display = 'block';
                document.getElementById('syncSection').scrollIntoView({ behavior: 'smooth' });
            } else {
                showToast('Fehler', 'Bitte füllen Sie die Anmeldedaten aus', 'error');
            }
        }
        
        function gatherCredentials() {
            switch(selectedProvider) {
                case 'microsoft':
                    const outlookEmail = document.getElementById('outlookEmail')?.value;
                    return outlookEmail ? { email: outlookEmail } : null;
                    
                case 'google':
                    const googleEmail = document.getElementById('googleEmail')?.value;
                    return googleEmail ? { email: googleEmail } : null;
                    
                case 'caldav':
                    const caldavUrl = document.getElementById('caldavUrl')?.value;
                    const caldavUsername = document.getElementById('caldavUsername')?.value;
                    const caldavPassword = document.getElementById('caldavPassword')?.value;
                    const calendarPath = document.getElementById('calendarPath')?.value || '/calendar/';
                    
                    return (caldavUrl && caldavUsername && caldavPassword) ? {
                        caldav_url: caldavUrl,
                        username: caldavUsername,
                        password: caldavPassword,
                        calendar_path: calendarPath
                    } : null;
                    
                case 'ical':
                    return {};
                    
                default:
                    return null;
            }
        }
        
        function syncAllCourses() {
            if (!selectedProvider || (!currentCredentials && selectedProvider !== 'ical')) {
                showToast('Fehler', 'Bitte wählen Sie einen Provider und geben Sie Anmeldedaten ein', 'error');
                return;
            }
            
            const selectedCourseIds = Array.from(document.querySelectorAll('.course-checkbox:checked')).map(cb => cb.value);
            
            showSyncProgress();
            
            fetch('{{ path('admin_calendar_sync_bulk') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    provider: selectedProvider,
                    credentials: currentCredentials,
                    course_ids: selectedCourseIds.length > 0 ? selectedCourseIds : null
                })
            })
            .then(response => response.json())
            .then(data => {
                hideSyncProgress();
                if (data.success) {
                    showToast('Synchronisation erfolgreich', data.message, 'success');
                } else {
                    showToast('Synchronisation teilweise fehlgeschlagen', data.message, 'warning');
                }
            })
            .catch(error => {
                hideSyncProgress();
                console.error('Bulk sync error:', error);
                showToast('Fehler', 'Netzwerkfehler bei der Synchronisation', 'error');
            });
        }
        
        function syncSingleCourse(courseId, courseName) {
            if (!selectedProvider || (!currentCredentials && selectedProvider !== 'ical')) {
                showToast('Fehler', 'Bitte wählen Sie einen Provider und geben Sie Anmeldedaten ein', 'error');
                return;
            }
            
            fetch(`{{ path('admin_calendar_sync_course', {'id': '__ID__'}) }}`.replace('__ID__', courseId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    provider: selectedProvider,
                    credentials: currentCredentials
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast('Synchronisation erfolgreich', `Kurs "${courseName}" wurde synchronisiert`, 'success');
                } else {
                    showToast('Synchronisation fehlgeschlagen', data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Single sync error:', error);
                showToast('Fehler', 'Netzwerkfehler bei der Synchronisation', 'error');
            });
        }
        
        function exportSingleIcal(courseId, courseName) {
            // Direkt die URL öffnen für den Download
            const downloadUrl = `{{ path('admin_calendar_export_ical', {'id': '__ID__'}) }}`.replace('__ID__', courseId);
            
            // Erstelle einen unsichtbaren Link und klicke darauf
            const link = document.createElement('a');
            link.href = downloadUrl;
            link.download = `course-${courseId}.ics`;
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            
            showToast('Export gestartet', `iCal-Datei für "${courseName}" wird heruntergeladen`, 'success');
        }
        
        function selectAllCourses() {
            document.querySelectorAll('.course-checkbox').forEach(cb => cb.checked = true);
        }
        
        function deselectAllCourses() {
            document.querySelectorAll('.course-checkbox').forEach(cb => cb.checked = false);
        }
        
        function showSyncProgress() {
            document.getElementById('syncProgress').classList.add('active');
            // Simuliere Fortschritt
            let progress = 0;
            const interval = setInterval(() => {
                progress += Math.random() * 20;
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                }
                document.getElementById('progressBar').style.width = progress + '%';
            }, 500);
        }
        
        function hideSyncProgress() {
            document.getElementById('syncProgress').classList.remove('active');
            document.getElementById('progressBar').style.width = '0%';
        }
        
        function toggleAutoSync(enabled) {
            fetch('{{ path('admin_calendar_toggle_auto_sync') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ enabled: enabled })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const status = enabled ? 'aktiviert' : 'deaktiviert';
                    const icon = enabled ? 'fa-check-circle' : 'fa-times-circle';
                    const color = enabled ? 'success' : 'warning';
                    
                    showToast(
                        'Auto-Sync ' + status, 
                        enabled ? 'Kurse werden automatisch synchronisiert wenn sich etwas ändert' : 'Automatische Synchronisation wurde deaktiviert',
                        color
                    );
                } else {
                    showToast('Fehler', data.message || 'Konnte Auto-Sync nicht umschalten', 'error');
                    // Revert checkbox
                    document.getElementById('autoSyncToggle').checked = !enabled;
                }
            })
            .catch(error => {
                console.error('Toggle auto-sync error:', error);
                showToast('Fehler', 'Netzwerkfehler beim Umschalten', 'error');
                // Revert checkbox
                document.getElementById('autoSyncToggle').checked = !enabled;
            });
        }
        
        function showToast(title, message, type = 'info') {
            const toastContainer = document.getElementById('toastContainer');
            const toastId = 'toast-' + Date.now();
            
            const bgClass = {
                'success': 'bg-success',
                'error': 'bg-danger',
                'warning': 'bg-warning',
                'info': 'bg-info'
            }[type] || 'bg-info';
            
            const iconClass = {
                'success': 'fa-check-circle',
                'error': 'fa-exclamation-triangle',
                'warning': 'fa-exclamation-circle',
                'info': 'fa-info-circle'
            }[type] || 'fa-info-circle';
            
            const toastHtml = `
                <div class="toast" id="${toastId}" role="alert">
                    <div class="toast-header ${bgClass} text-white">
                        <i class="fas ${iconClass} me-2"></i>
                        <strong class="me-auto">${title}</strong>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
                    </div>
                    <div class="toast-body">${message}</div>
                </div>
            `;
            
            toastContainer.insertAdjacentHTML('beforeend', toastHtml);
            
            const toastElement = document.getElementById(toastId);
            const toast = new bootstrap.Toast(toastElement, {
                autohide: true,
                delay: type === 'error' ? 8000 : 5000
            });
            
            toast.show();
            
            toastElement.addEventListener('hidden.bs.toast', () => {
                toastElement.remove();
            });
        }
    </script>
{% endblock %}