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

{% block title %}E-Mail Templates verwalten - Admin{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/appointment/admin.css') }}" />
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ path('appointment_admin') }}">Admin Dashboard</a></li>
                            <li class="breadcrumb-item active">E-Mail Templates</li>
                        </ol>
                    </nav>
                    <h1 class="h3 mb-0">
                        <i class="fas fa-envelope me-2"></i>E-Mail Templates verwalten
                    </h1>
                </div>
                <div class="btn-group">
                    <button class="btn btn-primary" id="showCreateTemplateForm">
                        <i class="fas fa-plus me-2"></i>Neues Template anlegen
                    </button>
                    <a href="{{ path('appointment_admin') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Zurück zum Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Template Form (initially hidden) -->
    <div class="row mb-4" id="createTemplateSection" style="display: none;">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-plus me-2"></i>Neues E-Mail Template anlegen
                    </h5>
                </div>
                <div class="card-body">
                    <form id="createTemplateForm">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">
                                    <i class="fas fa-font me-1"></i>Name des Templates
                                </label>
                                <input type="text" class="form-control" id="templateName" required>
                                <div class="form-text">Ein eindeutiger Name für das Template</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">
                                    <i class="fas fa-tag me-1"></i>Template-Typ
                                </label>
                                <select class="form-select" id="templateType" required>
                                    <option value="">Bitte wählen...</option>
                                    <option value="booking_confirmation">Buchungsbestätigung</option>
                                    <option value="booking_validation">Buchungsvalidierung</option>
                                    <option value="payment">Zahlung</option>
                                    <option value="booking_change">Buchung umbuchen</option>
                                    <option value="cancellation">Abmeldung/Stornierung</option>
                                    <option value="waitlist">Warteliste</option>
                                    <option value="reminder">Erinnerung</option>
                                    <option value="booking_position">Positionsmail</option>
                                </select>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">
                                    <i class="fas fa-heading me-1"></i>E-Mail Betreff
                                </label>
                                <input type="text" class="form-control" id="templateSubject" required>
                                <div class="form-text">Verwenden Sie Platzhalter wie {customer_name}, {course_name}, etc.</div>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label">
                                    <i class="fas fa-edit me-1"></i>E-Mail Inhalt
                                </label>
                                <textarea class="form-control" id="templateBody" rows="10" required></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_name}</code> - Standortname<br>
                                    <code>{booking_reference}</code> - Buchungsreferenz
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">
                                    <i class="fas fa-calendar-alt me-1"></i>Zugeordnete Kurse
                                </label>
                                <div class="border rounded p-3" style="max-height: 200px; overflow-y: auto; background-color: #f8f9fa;">
                                    {% if courses|length > 0 %}
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="selectAllCoursesCreate" onchange="toggleAllCoursesCreate(this)">
                                            <label class="form-check-label fw-bold" for="selectAllCoursesCreate">
                                                Alle Kurse auswählen
                                            </label>
                                        </div>
                                        <hr class="my-2">
                                        {% for course in courses %}
                                            <div class="form-check">
                                                <input class="form-check-input template-course-checkbox-create" type="checkbox" value="{{ course.id }}" id="course_create_{{ course.id }}">
                                                <label class="form-check-label" for="course_create_{{ course.id }}">
                                                    {{ course.name }}
                                                </label>
                                            </div>
                                        {% endfor %}
                                    {% else %}
                                        <p class="text-muted mb-0">Keine Kurse verfügbar</p>
                                    {% endif %}
                                </div>
                                <div class="form-text">Leer = gilt für alle Kurse</div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-check mt-4">
                                    <input class="form-check-input" type="checkbox" id="templateActive" checked>
                                    <label class="form-check-label" for="templateActive">
                                        <i class="fas fa-toggle-on me-1"></i>Template aktiv
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-success me-2">
                                <i class="fas fa-save me-1"></i>Template speichern
                            </button>
                            <button type="button" class="btn btn-secondary me-2" id="cancelCreateTemplate">
                                <i class="fas fa-times me-1"></i>Abbrechen
                            </button>
                            <button type="button" class="btn btn-info" id="previewTemplate">
                                <i class="fas fa-eye me-1"></i>Vorschau
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Existing Templates -->
    <div class="row">
        <div class="col-12">
            <div class="card shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-list me-2"></i>Bestehende E-Mail Templates
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Filter Section -->
                    <div class="row mb-3">
                        <div class="col-md-4">
                            <label class="form-label">Nach Typ filtern:</label>
                            <select class="form-select" id="filterType">
                                <option value="">Alle Typen</option>
                                <option value="booking_confirmation">Buchungsbestätigung</option>
                                <option value="booking_validation">Buchungsvalidierung</option>
                                <option value="payment">Zahlung</option>
                                <option value="booking_change">Buchung umbuchen</option>
                                <option value="cancellation">Abmeldung/Stornierung</option>
                                <option value="waitlist">Warteliste</option>
                                <option value="reminder">Erinnerung</option>
                                <option value="booking_position">Positionsmail</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Nach Status filtern:</label>
                            <select class="form-select" id="filterStatus">
                                <option value="">Alle Status</option>
                                <option value="active">Aktiv</option>
                                <option value="inactive">Inaktiv</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Suchen:</label>
                            <input type="text" class="form-control" id="searchTemplate" placeholder="Template-Name oder Betreff...">
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-hover" id="templatesTable">
                            <thead class="table-dark">
                                <tr>
                                    <th><i class="fas fa-font me-1"></i>Name</th>
                                    <th><i class="fas fa-tag me-1"></i>Typ</th>
                                    <th><i class="fas fa-heading me-1"></i>Betreff</th>
                                    <th><i class="fas fa-calendar-alt me-1"></i>Kurse</th>
                                    <th><i class="fas fa-toggle-on me-1"></i>Status</th>
                                    <th><i class="fas fa-clock me-1"></i>Erstellt</th>
                                    <th><i class="fas fa-cogs me-1"></i>Aktionen</th>
                                </tr>
                            </thead>
                            <tbody id="templatesTableBody">
                                <!-- Templates will be loaded here via JavaScript -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Preview Modal -->
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-eye me-2"></i>Template Vorschau
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <strong>Betreff:</strong>
                    <div class="border p-2 bg-light" id="previewSubject"></div>
                </div>
                <div class="mb-3">
                    <strong>Inhalt:</strong>
                    <div class="border p-3 bg-light" id="previewBody" style="white-space: pre-wrap;"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Template Modal -->
<div class="modal fade" id="editTemplateModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit me-2"></i>Template bearbeiten
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editTemplateForm">
                    <input type="hidden" id="editTemplateId">
                    <!-- Same form fields as create form -->
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-font me-1"></i>Name des Templates
                            </label>
                            <input type="text" class="form-control" id="editTemplateName" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-tag me-1"></i>Template-Typ
                            </label>
                            <select class="form-select" id="editTemplateType" required>
                                <option value="">Bitte wählen...</option>
                                <option value="booking_confirmation">Buchungsbestätigung</option>
                                <option value="booking_validation">Buchungsvalidierung</option>
                                <option value="payment">Zahlung</option>
                                <option value="booking_change">Buchung umbuchen</option>
                                <option value="cancellation">Abmeldung/Stornierung</option>
                                <option value="waitlist">Warteliste</option>
                                <option value="reminder">Erinnerung</option>
                                <option value="booking_position">Positionsmail</option>
                            </select>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-heading me-1"></i>E-Mail Betreff
                            </label>
                            <input type="text" class="form-control" id="editTemplateSubject" required>
                        </div>
                        <div class="col-md-12">
                            <label class="form-label">
                                <i class="fas fa-edit me-1"></i>E-Mail Inhalt
                            </label>
                            <textarea class="form-control" id="editTemplateBody" rows="10" required></textarea>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">
                                <i class="fas fa-calendar-alt me-1"></i>Zugeordnete Kurse
                            </label>
                            <div class="border rounded p-3" style="max-height: 200px; overflow-y: auto; background-color: #f8f9fa;">
                                {% if courses|length > 0 %}
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" id="selectAllCoursesEdit" onchange="toggleAllCoursesEdit(this)">
                                        <label class="form-check-label fw-bold" for="selectAllCoursesEdit">
                                            Alle Kurse auswählen
                                        </label>
                                    </div>
                                    <hr class="my-2">
                                    {% for course in courses %}
                                        <div class="form-check">
                                            <input class="form-check-input template-course-checkbox-edit" type="checkbox" value="{{ course.id }}" id="course_edit_{{ course.id }}">
                                            <label class="form-check-label" for="course_edit_{{ course.id }}">
                                                {{ course.name }}
                                            </label>
                                        </div>
                                    {% endfor %}
                                {% else %}
                                    <p class="text-muted mb-0">Keine Kurse verfügbar</p>
                                {% endif %}
                            </div>
                            <div class="form-text">Leer = gilt für alle Kurse</div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check mt-4">
                                <input class="form-check-input" type="checkbox" id="editTemplateActive">
                                <label class="form-check-label" for="editTemplateActive">
                                    <i class="fas fa-toggle-on me-1"></i>Template aktiv
                                </label>
                            </div>
                        </div>
                    </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" id="saveEditTemplate">
                    <i class="fas fa-save me-1"></i>Änderungen speichern
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Show/hide create template form
            document.getElementById('showCreateTemplateForm').addEventListener('click', function() {
                const section = document.getElementById('createTemplateSection');
                section.style.display = section.style.display === 'none' ? 'block' : 'none';
            });

            document.getElementById('cancelCreateTemplate').addEventListener('click', function() {
                document.getElementById('createTemplateSection').style.display = 'none';
                document.getElementById('createTemplateForm').reset();
            });

            // Load existing templates
            loadTemplates();

            // Handle create template form submission
            document.getElementById('createTemplateForm').addEventListener('submit', function(e) {
                e.preventDefault();
                createTemplate();
            });

            // Handle preview
            document.getElementById('previewTemplate').addEventListener('click', function() {
                previewTemplate();
            });

            // Handle filters
            document.getElementById('filterType').addEventListener('change', filterTemplates);
            document.getElementById('filterStatus').addEventListener('change', filterTemplates);
            document.getElementById('searchTemplate').addEventListener('input', filterTemplates);
            
            // Handle edit template save button
            document.getElementById('saveEditTemplate').addEventListener('click', function() {
                updateTemplate();
            });
        });

        function loadTemplates() {
            // Load templates from backend data
            {% if templates %}
                const templates = {{ templates|map(t => {
                    id: t.id,
                    name: t.name,
                    subject: t.subject,
                    body: t.body,
                    type: t.type,
                    isActive: t.isActive,
                    courses: t.courses|map(c => {id: c.id, name: c.name})
                })|json_encode|raw }};
                displayTemplates(templates);
            {% else %}
                document.getElementById('templatesTableBody').innerHTML = `
                    <tr>
                        <td colspan="7" class="text-center text-muted">
                            <i class="fas fa-inbox me-2"></i>Keine Templates vorhanden
                        </td>
                    </tr>
                `;
            {% endif %}
        }

        function displayTemplates(templates) {
            const tbody = document.getElementById('templatesTableBody');
            if (templates.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="7" class="text-center text-muted">
                            <i class="fas fa-inbox me-2"></i>Keine Templates vorhanden
                        </td>
                    </tr>
                `;
                return;
            }

            tbody.innerHTML = templates.map(template => `
                <tr>
                    <td><strong>${template.name}</strong></td>
                    <td><span class="badge bg-secondary">${getTypeLabel(template.type)}</span></td>
                    <td>${template.subject}</td>
                    <td>
                        ${template.courses.length > 0 
                            ? template.courses.map(course => `<span class="badge bg-info me-1">${course.name}</span>`).join('')
                            : '<span class="text-muted">Keine Kurse</span>'
                        }
                    </td>
                    <td>
                        <span class="badge ${template.isActive ? 'bg-success' : 'bg-danger'}">
                            ${template.isActive ? 'Aktiv' : 'Inaktiv'}
                        </span>
                    </td>
                    <td><small class="text-muted">-</small></td>
                    <td>
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-outline-info" onclick="previewTemplateById(${template.id})" title="Vorschau">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-outline-primary" onclick="editTemplate(${template.id})" title="Bearbeiten">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-outline-${template.isActive ? 'warning' : 'success'}" 
                                    onclick="toggleTemplate(${template.id})" 
                                    title="${template.isActive ? 'Deaktivieren' : 'Aktivieren'}">
                                <i class="fas fa-toggle-${template.isActive ? 'off' : 'on'}"></i>
                            </button>
                            <button class="btn btn-outline-danger" onclick="deleteTemplate(${template.id})" title="Löschen">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </td>
                </tr>
            `).join('');
        }

        function getTypeLabel(type) {
            const labels = {
                'booking_confirmation': 'Buchungsbestätigung',
                'booking_validation': 'Buchungsvalidierung',
                'payment': 'Zahlung',
                'booking_change': 'Buchung umbuchen',
                'cancellation': 'Abmeldung/Stornierung',
                'waitlist': 'Warteliste',
                'reminder': 'Erinnerung',
                'booking_position': 'Positionsmail'
            };
            return labels[type] || type;
        }

        function toggleAllCoursesCreate(selectAllCheckbox) {
            const checkboxes = document.querySelectorAll('.template-course-checkbox-create');
            checkboxes.forEach(cb => {
                cb.checked = selectAllCheckbox.checked;
            });
        }
        
        function toggleAllCoursesEdit(selectAllCheckbox) {
            const checkboxes = document.querySelectorAll('.template-course-checkbox-edit');
            checkboxes.forEach(cb => {
                cb.checked = selectAllCheckbox.checked;
            });
        }
        
        function updateSelectAllCoursesCreate() {
            const checkboxes = document.querySelectorAll('.template-course-checkbox-create');
            const selectAll = document.getElementById('selectAllCoursesCreate');
            if (checkboxes.length > 0) {
                const allChecked = Array.from(checkboxes).every(cb => cb.checked);
                const someChecked = Array.from(checkboxes).some(cb => cb.checked);
                selectAll.checked = allChecked;
                selectAll.indeterminate = someChecked && !allChecked;
            }
        }
        
        function updateSelectAllCoursesEdit() {
            const checkboxes = document.querySelectorAll('.template-course-checkbox-edit');
            const selectAll = document.getElementById('selectAllCoursesEdit');
            if (checkboxes.length > 0) {
                const allChecked = Array.from(checkboxes).every(cb => cb.checked);
                const someChecked = Array.from(checkboxes).some(cb => cb.checked);
                selectAll.checked = allChecked;
                selectAll.indeterminate = someChecked && !allChecked;
            }
        }
        
        // Event Listeners für Checkbox-Änderungen
        document.addEventListener('DOMContentLoaded', function() {
            document.addEventListener('change', function(e) {
                if (e.target.classList.contains('template-course-checkbox-create')) {
                    updateSelectAllCoursesCreate();
                }
                if (e.target.classList.contains('template-course-checkbox-edit')) {
                    updateSelectAllCoursesEdit();
                }
            });
        });

        function createTemplate() {
            const form = document.getElementById('createTemplateForm');
            
            // Get selected courses
            const selectedCourses = Array.from(document.querySelectorAll('.template-course-checkbox-create:checked'))
                .map(cb => parseInt(cb.value));
            
            fetch('{{ path('app_email_template_create') }}', {
                method: 'POST',
                body: JSON.stringify({
                    name: document.getElementById('templateName').value,
                    subject: document.getElementById('templateSubject').value,
                    body: document.getElementById('templateBody').value,
                    content: document.getElementById('templateBody').value, // For compatibility (controller expects "content")
                    type: document.getElementById('templateType').value,
                    isActive: document.getElementById('templateActive').checked,
                    courseIds: selectedCourses
                }),
                headers: {
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Hide form and reset
                    document.getElementById('createTemplateSection').style.display = 'none';
                    form.reset();
                    
                    // Reload templates
                    loadTemplates();
                    
                    // Show success message
                    showAlert('Template erfolgreich erstellt!', 'success');
                } else {
                    showAlert('Fehler beim Erstellen des Templates: ' + (data.message || 'Unbekannter Fehler'), 'danger');
                }
            })
            .catch(error => {
                console.error('Error creating template:', error);
                showAlert('Fehler beim Erstellen des Templates: ' + error.message, 'danger');
            });
        }

        function previewTemplate() {
            const subject = document.getElementById('templateSubject').value;
            const body = document.getElementById('templateBody').value;
            
            document.getElementById('previewSubject').textContent = subject;
            document.getElementById('previewBody').textContent = body;
            
            new bootstrap.Modal(document.getElementById('previewModal')).show();
        }

        function previewTemplateById(templateId) {
            // Implementation for previewing an existing template
            console.log('Previewing template:', templateId);
        }
        
        function updateTemplate() {
            const templateId = document.getElementById('editTemplateId').value;
            if (!templateId) {
                showAlert('Template-ID fehlt', 'danger');
                return;
            }
            
            // Get selected courses
            const selectedCourses = Array.from(document.querySelectorAll('.template-course-checkbox-edit:checked'))
                .map(cb => parseInt(cb.value));
            
            const formData = {
                name: document.getElementById('editTemplateName').value,
                subject: document.getElementById('editTemplateSubject').value,
                body: document.getElementById('editTemplateBody').value,
                content: document.getElementById('editTemplateBody').value, // For compatibility
                type: document.getElementById('editTemplateType').value,
                isActive: document.getElementById('editTemplateActive').checked,
                courseIds: selectedCourses
            };
            
            fetch(`{{ path('app_email_template_update', {'id': '__ID__'}) }}`.replace('__ID__', templateId), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(formData)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Close modal
                    const modal = bootstrap.Modal.getInstance(document.getElementById('editTemplateModal'));
                    modal.hide();
                    
                    // Reload templates
                    loadTemplates();
                    
                    // Show success message
                    showAlert('Template erfolgreich aktualisiert!', 'success');
                } else {
                    showAlert('Fehler beim Aktualisieren des Templates: ' + (data.message || 'Unbekannter Fehler'), 'danger');
                }
            })
            .catch(error => {
                console.error('Error updating template:', error);
                showAlert('Fehler beim Aktualisieren des Templates: ' + error.message, 'danger');
            });
        }

        function editTemplate(templateId) {
            // Load template data and populate edit modal
            fetch(`{{ path('app_email_template_get', {'id': '__ID__'}) }}`.replace('__ID__', templateId))
                .then(response => response.json())
                .then(data => {
                    if (!data.success) {
                        showAlert('Fehler beim Laden des Templates: ' + (data.message || 'Unbekannter Fehler'), 'danger');
                        return;
                    }
                    
                    const template = data.template;
                    
                    // Populate edit form with template data
                    document.getElementById('editTemplateId').value = template.id;
                    document.getElementById('editTemplateName').value = template.name || '';
                    document.getElementById('editTemplateSubject').value = template.subject || '';
                    document.getElementById('editTemplateBody').value = template.body || template.content || '';
                    document.getElementById('editTemplateType').value = template.type || '';
                    document.getElementById('editTemplateActive').checked = template.isActive || false;
                    
                    // Set selected courses
                    if (template.courses && Array.isArray(template.courses)) {
                        // Clear all first
                        document.querySelectorAll('.template-course-checkbox-edit').forEach(cb => cb.checked = false);
                        // Set selected
                        template.courses.forEach(course => {
                            const checkbox = document.querySelector(`.template-course-checkbox-edit[value="${course.id}"]`);
                            if (checkbox) {
                                checkbox.checked = true;
                            }
                        });
                        updateSelectAllCoursesEdit();
                    }
                    
                    // Show edit modal
                    new bootstrap.Modal(document.getElementById('editTemplateModal')).show();
                })
                .catch(error => {
                    console.error('Error loading template:', error);
                    showAlert('Fehler beim Laden des Templates', 'danger');
                });
        }

        function deleteTemplate(templateId) {
            if (confirm('Sind Sie sicher, dass Sie dieses Template löschen möchten?')) {
                fetch(`{{ path('app_email_template_delete', {'id': '__ID__'}) }}`.replace('__ID__', templateId), {
                    method: 'DELETE'
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        loadTemplates();
                        showAlert('Template erfolgreich gelöscht!', 'success');
                    } else {
                        showAlert('Fehler beim Löschen des Templates', 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error deleting template:', error);
                    showAlert('Fehler beim Löschen des Templates', 'danger');
                });
            }
        }

        function toggleTemplate(templateId) {
            fetch(`{{ path('app_email_template_toggle', {'id': '__ID__'}) }}`.replace('__ID__', templateId), {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    loadTemplates();
                    showAlert('Template-Status erfolgreich geändert!', 'success');
                } else {
                    showAlert('Fehler beim Ändern des Template-Status', 'danger');
                }
            })
            .catch(error => {
                console.error('Error toggling template:', error);
                showAlert('Fehler beim Ändern des Template-Status', 'danger');
            });
        }

        function filterTemplates() {
            const typeFilter = document.getElementById('filterType').value;
            const statusFilter = document.getElementById('filterStatus').value;
            const searchTerm = document.getElementById('searchTemplate').value.toLowerCase();
            
            const rows = document.querySelectorAll('#templatesTableBody tr');
            
            rows.forEach(row => {
                const cells = row.cells;
                if (cells.length < 7) return; // Skip empty/loading rows
                
                const name = cells[0].textContent.toLowerCase();
                const subject = cells[2].textContent.toLowerCase();
                const type = cells[1].querySelector('.badge').textContent;
                const status = cells[4].querySelector('.badge').classList.contains('bg-success') ? 'active' : 'inactive';
                
                let show = true;
                
                // Type filter
                if (typeFilter && !type.includes(getTypeLabel(typeFilter))) {
                    show = false;
                }
                
                // Status filter
                if (statusFilter && status !== statusFilter) {
                    show = false;
                }
                
                // Search filter
                if (searchTerm && !name.includes(searchTerm) && !subject.includes(searchTerm)) {
                    show = false;
                }
                
                row.style.display = show ? '' : 'none';
            });
        }
        
        function showAlert(message, type = 'info') {
            // Create alert element
            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>
            `;
            
            // Insert at top of container
            const container = document.querySelector('.container-fluid');
            container.insertBefore(alertDiv, container.firstChild);
            
            // Auto-remove after 5 seconds
            setTimeout(() => {
                if (alertDiv.parentNode) {
                    alertDiv.remove();
                }
            }, 5000);
        }
    </script>
{% endblock %}