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

{% block title %}Outlook Kalender Integration{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Flash Messages -->
    {% for type, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ type == 'error' ? 'danger' : type }} alert-dismissible fade show" role="alert">
                {{ message|raw }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        {% endfor %}
    {% endfor %}
    
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1 class="h3 mb-0">Outlook Kalender Integration</h1>
                <div class="btn-group">
                    <a href="{{ path('admin_outlook_auth') }}" class="btn btn-primary">
                        <i class="fas fa-plus"></i> Mit Outlook verbinden
                    </a>
                    <button type="button" class="btn btn-success" onclick="testConnection()">
                        <i class="fas fa-wifi"></i> Verbindung testen
                    </button>
                    <button type="button" class="btn btn-warning" onclick="fixTimezone()">
                        <i class="fas fa-clock"></i> Zeitzone korrigieren
                    </button>
                </div>
            </div>

            <!-- Status Cards -->
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card bg-primary text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">Aktive Synchronisationen</h6>
                                    <h3 class="mb-0">{{ sync_status.total_syncs }}</h3>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-sync fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">Synchronisierte Kurse</h6>
                                    <h3 class="mb-0">{{ synchronized_courses|length }}</h3>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-calendar-check fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-info text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">Verfügbare Kurse</h6>
                                    <h3 class="mb-0">{{ available_courses|length }}</h3>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-graduation-cap fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">Nicht synchronisiert</h6>
                                    <h3 class="mb-0">{{ available_courses|length - synchronized_courses|length }}</h3>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-exclamation-triangle fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-success text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">Gültige Token</h6>
                                    <h3 class="mb-0">{{ sync_status.valid_tokens }}</h3>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-check-circle fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card bg-warning text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">Abgelaufene Token</h6>
                                    <h3 class="mb-0">{{ sync_status.expired_tokens }}</h3>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-exclamation-triangle fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card {{ sync_status.all_valid ? 'bg-success' : 'bg-danger' }} text-white">
                        <div class="card-body">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="card-title">Status</h6>
                                    <h6 class="mb-0">{{ sync_status.all_valid ? 'Alle OK' : 'Probleme' }}</h6>
                                </div>
                                <div class="align-self-center">
                                    <i class="fas fa-{{ sync_status.all_valid ? 'check' : 'times' }}-circle fa-2x"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Active Synchronisations -->
            {% if active_syncs is not empty %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Aktive Outlook-Synchronisationen</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>E-Mail</th>
                                    <th>Status</th>
                                    <th>Erstellt</th>
                                    <th>Letzte Aktualisierung</th>
                                    <th>Aktionen</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for sync in active_syncs %}
                                <tr>
                                    <td>
                                        <i class="fas fa-envelope text-primary me-2"></i>
                                        {{ sync.userEmail }}
                                    </td>
                                    <td>
                                        {% if sync.tokenValid %}
                                            <span class="badge bg-success">
                                                <i class="fas fa-check"></i> Aktiv
                                            </span>
                                        {% else %}
                                            <span class="badge bg-warning">
                                                <i class="fas fa-exclamation-triangle"></i> Token abgelaufen
                                            </span>
                                        {% endif %}
                                    </td>
                                    <td>{{ sync.createdAt|date('d.m.Y H:i') }}</td>
                                    <td>{{ sync.updatedAt ? sync.updatedAt|date('d.m.Y H:i') : '-' }}</td>
                                    <td>
                                        <div class="btn-group btn-group-sm">
                                            {% if not sync.isTokenValid() %}
                                                <a href="{{ path('admin_outlook_auth') }}" class="btn btn-warning btn-sm">
                                                    <i class="fas fa-sync"></i> Erneuern
                                                </a>
                                            {% endif %}
                                            <button type="button" class="btn btn-danger btn-sm" onclick="disconnectSync({{ sync.id }})">
                                                <i class="fas fa-unlink"></i> Trennen
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    {% if active_syncs|length > 1 %}
                    <div class="mt-3">
                        <button type="button" class="btn btn-outline-danger" onclick="disconnectAllSyncs()">
                            <i class="fas fa-unlink"></i> Alle Synchronisationen trennen
                        </button>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <!-- Courses Section -->
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Kurse synchronisieren</h5>
                        <div class="btn-group">
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="selectAllCourses()">
                                <i class="fas fa-check-square"></i> Alle auswählen
                            </button>
                            <button type="button" class="btn btn-outline-secondary btn-sm" onclick="deselectAllCourses()">
                                <i class="fas fa-square"></i> Alle abwählen
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    {% if credentials_configured %}
                        {% if active_syncs is not empty %}
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-success" onclick="syncAllCourses()">
                                        <i class="fas fa-sync"></i> Alle Kurse synchronisieren
                                    </button>
                                </div>
                                <div class="col-md-4">
                                    <button type="button" class="btn btn-primary" onclick="syncSelectedCourses()">
                                        <i class="fas fa-sync"></i> Ausgewählte synchronisieren
                                    </button>
                                </div>
                                <div class="col-md-4 text-end">
                                    <small class="text-muted">
                                        {{ available_courses|length }} Kurse verfügbar | 
                                        <span id="selected-count">0</span> ausgewählt
                                    </small>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th width="50">
                                                <input type="checkbox" id="select-all-courses" onchange="toggleAllCourses(this)">
                                            </th>
                                            <th>Kurs</th>
                                            <th>Status</th>
                                            <th>Standort</th>
                                            <th>Synchronisiert für</th>
                                            <th>Aktionen</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for course in available_courses %}
                                        <tr>
                                            <td>
                                                <input type="checkbox" class="course-checkbox" value="{{ course.id }}" onchange="updateSelectedCount()">
                                            </td>
                                            <td>
                                                <strong>{{ course.name }}</strong>
                                                {% if course.learningGoals %}
                                                    <br><small class="text-muted">{{ course.learningGoals|slice(0, 100) }}{% if course.learningGoals|length > 100 %}...{% endif %}</small>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if course_email_mapping[course.id] is defined %}
                                                    <span class="badge bg-success">
                                                        <i class="fas fa-check"></i> Synchronisiert
                                                    </span>
                                                {% else %}
                                                    {% if course.isAvailable %}
                                                        <span class="badge bg-warning">
                                                            <i class="fas fa-exclamation-triangle"></i> Nicht synchronisiert
                                                        </span>
                                                    {% else %}
                                                        <span class="badge bg-secondary">
                                                            <i class="fas fa-ban"></i> Nicht verfügbar
                                                        </span>
                                                    {% endif %}
                                                {% endif %}
                                            </td>
                                            <td>{{ course.location ? course.location.name : 'Kein Standort' }}</td>
                                            <td>
                                                {% if course_email_mapping[course.id] is defined %}
                                                    <small class="text-success">
                                                        <i class="fas fa-check"></i> 
                                                        {% for email in course_email_mapping[course.id] %}
                                                            {{ email }}{% if not loop.last %}, {% endif %}
                                                        {% endfor %}
                                                    </small>
                                                {% else %}
                                                    <small class="text-muted">Nicht synchronisiert</small>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if course.isAvailable %}
                                                    <div class="btn-group btn-group-sm">
                                                        <button type="button" class="btn btn-primary btn-sm" onclick="syncCourse({{ course.id }})">
                                                            <i class="fas fa-sync"></i> Sync
                                                        </button>
                                                        {% if course_email_mapping[course.id] is defined %}
                                                            <button type="button" class="btn btn-warning btn-sm" onclick="removeCourseSync({{ course.id }})">
                                                                <i class="fas fa-trash"></i> Entfernen
                                                            </button>
                                                        {% endif %}
                                                    </div>
                                                {% else %}
                                                    <button type="button" class="btn btn-secondary btn-sm" disabled>
                                                        <i class="fas fa-ban"></i> Nicht verfügbar
                                                    </button>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% else %}
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle"></i>
                                <strong>Keine aktive Synchronisation</strong><br>
                                Bitte verbinden Sie sich zuerst mit Outlook, um Kurse zu synchronisieren.
                            </div>
                        {% endif %}
                    {% else %}
                        <div class="alert alert-warning">
                            <i class="fas fa-exclamation-triangle"></i>
                            <strong>Outlook nicht konfiguriert</strong><br>
                            Bitte konfigurieren Sie zuerst die Microsoft Outlook Credentials in der .env Datei.
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Loading Modal -->
<div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog modal-sm modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Lädt...</span>
                </div>
                <p class="mt-2 mb-0">Synchronisiere...</p>
            </div>
        </div>
    </div>
</div>

<script>
function showLoading() {
    const modal = new bootstrap.Modal(document.getElementById('loadingModal'));
    modal.show();
}

function hideLoading() {
    const modal = bootstrap.Modal.getInstance(document.getElementById('loadingModal'));
    if (modal) {
        modal.hide();
    }
}

function showAlert(message, type = 'info') {
    const alertDiv = document.createElement('div');
    alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
    alertDiv.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    const container = document.querySelector('.container-fluid');
    container.insertBefore(alertDiv, container.firstChild);
    
    setTimeout(() => {
        alertDiv.remove();
    }, 5000);
}

// Loading Overlay Funktionen
function showLoading() {
    // Erstelle Loading-Overlay falls es nicht existiert
    let overlay = document.getElementById('loadingOverlay');
    if (!overlay) {
        overlay = document.createElement('div');
        overlay.id = 'loadingOverlay';
        overlay.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        `;
        
        const modal = document.createElement('div');
        modal.style.cssText = `
            background: white;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        `;
        
        modal.innerHTML = `
            <div class="spinner-border text-primary mb-3" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <div>Synchronisiere...</div>
            <div class="mt-3">
                <button type="button" class="btn btn-sm btn-outline-danger" onclick="forceHideLoading()">
                    <i class="fas fa-times"></i> Abbrechen
                </button>
            </div>
        `;
        
        overlay.appendChild(modal);
        document.body.appendChild(overlay);
    } else {
        overlay.style.display = 'flex';
    }
}

function hideLoading() {
    const overlay = document.getElementById('loadingOverlay');
    if (overlay) {
        overlay.style.display = 'none';
    }
}

// Notfall-Funktion: Overlay manuell schließen
function forceHideLoading() {
    const overlay = document.getElementById('loadingOverlay');
    if (overlay) {
        overlay.remove();
    }
}

// ESC-Taste zum Schließen des Overlays
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        forceHideLoading();
    }
});

// Timeout-Fallback: Overlay nach 30 Sekunden automatisch schließen
let loadingTimeout;
function showLoadingWithTimeout() {
    showLoading();
    loadingTimeout = setTimeout(() => {
        console.warn('Loading timeout reached - forcing hide');
        forceHideLoading();
    }, 30000);
}

function hideLoadingWithTimeout() {
    hideLoading();
    if (loadingTimeout) {
        clearTimeout(loadingTimeout);
        loadingTimeout = null;
    }
}

async function testConnection() {
    showLoading();
    
    try {
        const response = await fetch('{{ path('admin_outlook_test') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        
        const data = await response.json();
        hideLoading();
        
        if (data.success) {
            let debugInfo = `✅ ${data.message}<br>Getestet: ${data.total_syncs} Synchronisationen`;
            if (data.debug_info && data.debug_info.length > 0) {
                debugInfo += '<br><br><strong>Debug-Informationen:</strong><br>';
                data.debug_info.forEach(debug => {
                    debugInfo += `📧 ${debug.email}: Token gültig: ${debug.token_valid ? '✅' : '❌'} | `;
                    debugInfo += `Läuft ab: ${debug.expires_at} | `;
                    debugInfo += `Zeitdifferenz: ${debug.time_difference_seconds}s<br>`;
                    debugInfo += `&nbsp;&nbsp;&nbsp;Test-Status: ${debug.test_status}<br>`;
                    debugInfo += `&nbsp;&nbsp;&nbsp;Datenbank sagt: ${debug.database_token_valid ? '✅ Gültig' : '❌ Abgelaufen'}<br>`;
                });
            }
            showAlert(debugInfo, 'success');
        } else {
            let errorInfo = `❌ ${data.message}`;
            if (data.debug_info && data.debug_info.length > 0) {
                errorInfo += '<br><br><strong>Debug-Informationen:</strong><br>';
                data.debug_info.forEach(debug => {
                    errorInfo += `📧 ${debug.email}: Token gültig: ${debug.token_valid ? '✅' : '❌'} | `;
                    errorInfo += `Läuft ab: ${debug.expires_at} | `;
                    errorInfo += `Zeitdifferenz: ${debug.time_difference_seconds}s<br>`;
                    errorInfo += `&nbsp;&nbsp;&nbsp;Test-Status: ${debug.test_status}<br>`;
                    errorInfo += `&nbsp;&nbsp;&nbsp;Datenbank sagt: ${debug.database_token_valid ? '✅ Gültig' : '❌ Abgelaufen'}<br>`;
                });
            }
            showAlert(errorInfo, 'danger');
        }
    } catch (error) {
        hideLoading();
        showAlert(`❌ Fehler beim Testen der Verbindung: ${error.message}`, 'danger');
    }
}

async function syncCourse(courseId) {
    showLoadingWithTimeout();
    
    try {
        const response = await fetch(`{{ path('admin_outlook_sync_course', {id: 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', courseId), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        
        const data = await response.json();
        hideLoadingWithTimeout();
        
        if (data.success) {
            showAlert(`✅ ${data.message}`, 'success');
            // Aktualisiere die Tabelle nach erfolgreicher Synchronisation
            setTimeout(() => {
                updateTableAfterSync();
            }, 1000);
        } else {
            showAlert(`❌ ${data.message}`, 'danger');
        }
    } catch (error) {
        hideLoadingWithTimeout();
        showAlert(`❌ Fehler bei der Synchronisation: ${error.message}`, 'danger');
    }
}



async function syncAllCourses() {
    if (!confirm('Möchten Sie wirklich alle Kurse synchronisieren? Dies kann einige Zeit dauern.')) {
        return;
    }
    
    showLoadingWithTimeout();
    
    try {
        const response = await fetch('{{ path('admin_outlook_sync_all') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        
        const data = await response.json();
        hideLoadingWithTimeout();
        
        if (data.success) {
            showAlert(`✅ ${data.message}`, 'success');
            // Aktualisiere die Tabelle nach erfolgreicher Synchronisation
            setTimeout(() => {
                updateTableAfterSync();
            }, 1500);
        } else {
            showAlert(`❌ ${data.message}`, 'danger');
        }
    } catch (error) {
        hideLoadingWithTimeout();
        showAlert(`❌ Fehler bei der Synchronisation: ${error.message}`, 'danger');
    }
}

async function disconnectSync(syncId) {
    if (!confirm('Möchten Sie diese Synchronisation wirklich trennen?')) {
        return;
    }
    
    try {
        const response = await fetch(`{{ path('admin_outlook_disconnect', {id: 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', syncId), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            showAlert(`✅ ${data.message}`, 'success');
            setTimeout(() => {
                location.reload();
            }, 1000);
        } else {
            showAlert(`❌ ${data.message}`, 'danger');
        }
    } catch (error) {
        showAlert(`❌ Fehler beim Trennen: ${error.message}`, 'danger');
    }
}

async function disconnectAllSyncs() {
    if (!confirm('Möchten Sie wirklich ALLE Synchronisationen trennen?')) {
        return;
    }
    
    try {
        const response = await fetch('{{ path('admin_outlook_disconnect_all') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        
        const data = await response.json();
        
        if (data.success) {
            showAlert(`✅ ${data.message}`, 'success');
            setTimeout(() => {
                location.reload();
            }, 1000);
        } else {
            showAlert(`❌ ${data.message}`, 'danger');
        }
    } catch (error) {
        showAlert(`❌ Fehler beim Trennen: ${error.message}`, 'danger');
    }
}

async function fixTimezone() {
    if (!confirm('Möchten Sie die Zeitzone für alle Synchronisationen korrigieren?')) {
        return;
    }
    
    showLoading();
    
    try {
        const response = await fetch('{{ path('admin_outlook_fix_timezone') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            }
        });
        
        const data = await response.json();
        hideLoading();
        
        if (data.success) {
            showAlert(`✅ ${data.message}`, 'success');
            setTimeout(() => {
                location.reload();
            }, 1000);
        } else {
            showAlert(`❌ ${data.message}`, 'danger');
        }
    } catch (error) {
        hideLoading();
        showAlert(`❌ Fehler bei der Zeitzone-Korrektur: ${error.message}`, 'danger');
    }
}

// Kurs-Auswahl Funktionen
function toggleAllCourses(checkbox) {
    const courseCheckboxes = document.querySelectorAll('.course-checkbox');
    courseCheckboxes.forEach(cb => {
        cb.checked = checkbox.checked;
    });
    updateSelectedCount();
}

function selectAllCourses() {
    const courseCheckboxes = document.querySelectorAll('.course-checkbox');
    courseCheckboxes.forEach(cb => {
        cb.checked = true;
    });
    document.getElementById('select-all-courses').checked = true;
    updateSelectedCount();
}

function deselectAllCourses() {
    const courseCheckboxes = document.querySelectorAll('.course-checkbox');
    courseCheckboxes.forEach(cb => {
        cb.checked = false;
    });
    document.getElementById('select-all-courses').checked = false;
    updateSelectedCount();
}

function updateSelectedCount() {
    const selectedCheckboxes = document.querySelectorAll('.course-checkbox:checked');
    const count = selectedCheckboxes.length;
    document.getElementById('selected-count').textContent = count;
    
    // Update "Alle auswählen" Checkbox
    const allCheckboxes = document.querySelectorAll('.course-checkbox');
    const selectAllCheckbox = document.getElementById('select-all-courses');
    
    if (count === 0) {
        selectAllCheckbox.indeterminate = false;
        selectAllCheckbox.checked = false;
    } else if (count === allCheckboxes.length) {
        selectAllCheckbox.indeterminate = false;
        selectAllCheckbox.checked = true;
    } else {
        selectAllCheckbox.indeterminate = true;
        selectAllCheckbox.checked = false;
    }
}

async function syncSelectedCourses() {
    const selectedCheckboxes = document.querySelectorAll('.course-checkbox:checked');
    const selectedIds = Array.from(selectedCheckboxes).map(cb => cb.value);
    
    if (selectedIds.length === 0) {
        showAlert('❌ Bitte wählen Sie mindestens einen Kurs aus!', 'warning');
        return;
    }
    
    if (!confirm(`Möchten Sie ${selectedIds.length} ausgewählte Kurse synchronisieren?`)) {
        return;
    }
    
    showLoadingWithTimeout();
    
    try {
        const response = await fetch('{{ path('admin_outlook_sync_selected') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                courseIds: selectedIds
            })
        });
        
        const data = await response.json();
        hideLoadingWithTimeout();
        
        if (data.success) {
            showAlert(`✅ ${data.message}`, 'success');
            setTimeout(() => {
                updateTableAfterSync();
            }, 1500);
        } else {
            showAlert(`❌ ${data.message}`, 'danger');
        }
    } catch (error) {
        hideLoadingWithTimeout();
        showAlert(`❌ Fehler bei der Synchronisation: ${error.message}`, 'danger');
    }
}

async function removeCourseSync(courseId) {
    if (!confirm('Möchten Sie die Synchronisation für diesen Kurs entfernen?')) {
        return;
    }
    
    showLoadingWithTimeout();
    
    try {
        const response = await fetch('{{ path('admin_outlook_remove_course_sync') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                courseId: courseId
            })
        });
        
        const data = await response.json();
        hideLoadingWithTimeout();
        
        if (data.success) {
            showAlert(`✅ ${data.message}`, 'success');
            setTimeout(() => {
                updateTableAfterSync();
            }, 1000);
        } else {
            showAlert(`❌ ${data.message}`, 'danger');
        }
    } catch (error) {
        hideLoadingWithTimeout();
        showAlert(`❌ Fehler beim Entfernen: ${error.message}`, 'danger');
    }
}

// Tabelle nach Synchronisation aktualisieren
async function updateTableAfterSync() {
    try {
        // Lade die Seite neu, um die aktuellen Daten zu bekommen
        location.reload();
    } catch (error) {
        console.error('Fehler beim Aktualisieren der Tabelle:', error);
        // Fallback: Seite neu laden
        location.reload();
    }
}

// Initialisierung
document.addEventListener('DOMContentLoaded', function() {
    updateSelectedCount();
});
</script>
{% endblock %}