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

{% block title %}Kursleiter-Verwaltung - Admin{% endblock %}
{% block header_title %}Kursleiter-Verwaltung{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <!-- Actions -->
    <div class="card mb-4">
        <div class="card-body">
            <button class="btn btn-primary" onclick="showCreateModal()">
                <i class="fas fa-plus me-2"></i>Neuen Kursleiter einladen
            </button>
        </div>
    </div>

    <!-- Instructors Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Kursleiter</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>E-Mail</th>
                            <th>Telefon</th>
                            <th>Status</th>
                            <th>Passwort gesetzt</th>
                            <th>Einladung gesendet</th>
                            <th>Zuweisungen</th>
                            <th>Aktionen</th>
                        </tr>
                    </thead>
                    <tbody id="instructorsTableBody">
                        <tr>
                            <td colspan="8" class="text-center">
                                <div class="spinner-border" role="status">
                                    <span class="visually-hidden">Lädt...</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Create/Edit Modal -->
<div class="modal fade" id="instructorModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Neuen Kursleiter einladen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="instructorForm">
                    <input type="hidden" id="instructorId">
                    <div class="mb-3">
                        <label class="form-label">Vorname <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="instructorFirstName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Nachname <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="instructorLastName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">E-Mail <span class="text-danger">*</span></label>
                        <input type="email" class="form-control" id="instructorEmail" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Telefon</label>
                        <input type="tel" class="form-control" id="instructorPhone">
                    </div>
                    <div class="mb-3 form-check" id="sendInvitationCheckbox">
                        <input type="checkbox" class="form-check-input" id="sendInvitation" checked>
                        <label class="form-check-label" for="sendInvitation">
                            Einladungs-E-Mail sofort senden
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" onclick="saveInstructor()">
                    <span id="saveButtonText">Einladen</span>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let instructorModal;
let editMode = false;

document.addEventListener('DOMContentLoaded', function() {
    instructorModal = new bootstrap.Modal(document.getElementById('instructorModal'));
    loadInstructors();
});

function loadInstructors() {
    fetch('{{ path('admin_instructors_api_list') }}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                renderInstructors(data.instructors);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Fehler beim Laden der Kursleiter', 'error');
        });
}

function renderInstructors(instructors) {
    const tbody = document.getElementById('instructorsTableBody');
    
    if (instructors.length === 0) {
        tbody.innerHTML = '<tr><td colspan="8" class="text-center">Keine Kursleiter gefunden</td></tr>';
        return;
    }

    tbody.innerHTML = instructors.map(instructor => `
        <tr>
            <td><strong>${instructor.fullName}</strong></td>
            <td>${instructor.email}</td>
            <td>${instructor.phone || '-'}</td>
            <td>${instructor.isActive ? '<span class="badge bg-success">Aktiv</span>' : '<span class="badge bg-secondary">Inaktiv</span>'}</td>
            <td>${instructor.hasSetPassword 
                ? '<span class="badge bg-success"><i class="fas fa-check me-1"></i>' + (instructor.passwordSetAt || 'Ja') + '</span>'
                : '<span class="badge bg-warning"><i class="fas fa-clock me-1"></i>Ausstehend</span>'
            }</td>
            <td>${instructor.invitationSentAt || '-'}</td>
            <td>
                <div class="d-flex flex-wrap gap-1">
                    <span class="badge bg-info">${instructor.assignedCoursesCount} Kurse</span>
                    <span class="badge bg-primary">${instructor.assignedEventCenterCount || 0} Events</span>
                </div>
            </td>
            <td>
                <div class="btn-group" role="group">
                    <button class="btn btn-sm btn-info" onclick="editInstructor(${instructor.id})" title="Bearbeiten">
                        <i class="fas fa-edit"></i>
                    </button>
                    ${!instructor.hasSetPassword ? `
                        <button class="btn btn-sm btn-warning" onclick="resendInvitation(${instructor.id})" title="Einladung erneut senden">
                            <i class="fas fa-envelope"></i>
                        </button>
                    ` : `
                        <button class="btn btn-sm btn-warning" onclick="resetPassword(${instructor.id})" title="Passwort zurücksetzen (E-Mail senden)">
                            <i class="fas fa-key"></i>
                        </button>
                    `}
                    <button class="btn btn-sm btn-danger" onclick="deleteInstructor(${instructor.id})" title="Löschen">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');
}

function showCreateModal() {
    editMode = false;
    document.getElementById('modalTitle').textContent = 'Neuen Kursleiter einladen';
    document.getElementById('saveButtonText').textContent = 'Einladen';
    document.getElementById('instructorForm').reset();
    document.getElementById('instructorId').value = '';
    document.getElementById('sendInvitationCheckbox').style.display = 'block';
    instructorModal.show();
}

function editInstructor(id) {
    editMode = true;
    document.getElementById('modalTitle').textContent = 'Kursleiter bearbeiten';
    document.getElementById('saveButtonText').textContent = 'Speichern';
    document.getElementById('sendInvitationCheckbox').style.display = 'none';
    
    fetch(`{{ path('admin_instructors_api_get', {id: '__ID__'}) }}`.replace('__ID__', id))
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const instructor = data.instructor;
                document.getElementById('instructorId').value = instructor.id;
                document.getElementById('instructorFirstName').value = instructor.firstName;
                document.getElementById('instructorLastName').value = instructor.lastName;
                document.getElementById('instructorEmail').value = instructor.email;
                document.getElementById('instructorPhone').value = instructor.phone || '';
                instructorModal.show();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Fehler beim Laden der Daten', 'error');
        });
}

function saveInstructor() {
    const id = document.getElementById('instructorId').value;
    const data = {
        firstName: document.getElementById('instructorFirstName').value,
        lastName: document.getElementById('instructorLastName').value,
        email: document.getElementById('instructorEmail').value,
        phone: document.getElementById('instructorPhone').value || null,
        sendInvitation: document.getElementById('sendInvitation')?.checked ?? false
    };

    const url = id 
        ? `{{ path('admin_instructors_api_update', {id: '__ID__'}) }}`.replace('__ID__', id)
        : '{{ path('admin_instructors_api_create') }}';
    
    const method = id ? 'PUT' : 'POST';

    fetch(url, {
        method: method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast(id ? 'Kursleiter aktualisiert' : 'Einladung versendet', 'success');
            instructorModal.hide();
            loadInstructors();
        } else {
            showToast('Fehler: ' + data.error, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Fehler beim Speichern', 'error');
    });
}

function resendInvitation(id) {
    if (!confirm('Einladungs-E-Mail erneut senden?')) return;

    fetch(`{{ path('admin_instructors_api_resend_invitation', {id: '__ID__'}) }}`.replace('__ID__', id), {
        method: 'POST'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('Einladung erneut versendet', 'success');
            loadInstructors();
        } else {
            showToast('Fehler: ' + data.error, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Fehler beim Versenden', 'error');
    });
}

function resetPassword(id) {
    if (!confirm('Passwort-Zurücksetzen-E-Mail an diesen Kursleiter senden?')) return;

    fetch(`{{ path('admin_instructors_api_reset_password', {id: '__ID__'}) }}`.replace('__ID__', id), {
        method: 'POST'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('Passwort-Zurücksetzen-E-Mail versendet', 'success');
        } else {
            showToast('Fehler: ' + data.error, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Fehler beim Versenden der Passwort-E-Mail', 'error');
    });
}

function deleteInstructor(id) {
    if (!confirm('Kursleiter wirklich löschen?')) return;

    fetch(`{{ path('admin_instructors_api_delete', {id: '__ID__'}) }}`.replace('__ID__', id), {
        method: 'DELETE'
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('Kursleiter gelöscht', 'success');
            loadInstructors();
        } else {
            showToast('Fehler: ' + data.error, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Fehler beim Löschen', 'error');
    });
}

function showToast(message, type = 'info') {
    const toast = document.createElement('div');
    toast.className = `alert alert-${type === 'error' ? 'danger' : type} position-fixed top-0 end-0 m-3`;
    toast.style.zIndex = '9999';
    toast.textContent = message;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 3000);
}
</script>
{% endblock %}