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

{% block title %}Event Center - E-Mail Templates{% endblock %}
{% block header_title %}Event Center - E-Mail Templates{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link href="https://cdn.jsdelivr.net/npm/tinymce@6.8.3/skins/ui/oxide/skin.min.css" rel="stylesheet">
<style>
    .template-card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        transition: all 0.3s ease;
    }
    
    .template-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }
    
    .template-card.inactive {
        opacity: 0.6;
        background: #f8f9fa;
    }
    
    .template-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 1rem;
    }
    
    .template-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }
    
    .template-meta {
        display: flex;
        gap: 1rem;
        font-size: 0.85rem;
        color: #6c757d;
        margin-bottom: 1rem;
    }
    
    .template-actions {
        display: flex;
        gap: 0.5rem;
    }
    
    .placeholder-info {
        background: #e3f2fd;
        border-left: 4px solid #2196f3;
        padding: 1rem;
        margin: 2rem 0;
        border-radius: 4px;
    }
    
    .placeholder-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.5rem;
        margin-top: 1rem;
    }
    
    .placeholder-item {
        background: white;
        padding: 0.5rem;
        border-radius: 4px;
        font-family: monospace;
        font-size: 0.85rem;
        cursor: pointer;
    }
    
    .placeholder-item:hover {
        background: #bbdefb;
    }
    
    .editor-container {
        margin: 1rem 0;
    }
    
    .editor-label {
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #2c3e50;
    }
    
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1>
                <i class="fas {% if showTrash %}fa-trash-restore{% else %}fa-envelope-open-text{% endif %} me-2"></i>
                {% if showTrash %}Event Center E-Mail Papierkorb{% else %}Event Center E-Mail Templates{% endif %}
            </h1>
            <div class="page-breadcrumb">
                <a href="{{ path('admin_dashboard') }}"><i class="fas fa-home"></i> Dashboard</a>
                <i class="fas fa-chevron-right"></i>
                <a href="{{ path('admin_event_center_bookings') }}">Event Center</a>
                <i class="fas fa-chevron-right"></i>
                <span>{% if showTrash %}Papierkorb{% else %}E-Mail Templates{% endif %}</span>
            </div>
        </div>
        <div class="d-flex gap-2">
            {% if not showTrash %}
                <button class="btn btn-primary btn-lg" onclick="showCreateModal()">
                    <i class="fas fa-plus me-2"></i>Neues Template
                </button>
            {% endif %}
            <a class="btn btn-outline-warning btn-lg" href="{{ path('admin_event_center_email_templates', showTrash ? {} : {'trash': 1}) }}">
                <i class="fas {% if showTrash %}fa-arrow-left{% else %}fa-trash{% endif %} me-2"></i>
                {% if showTrash %}Zur Übersicht{% else %}Papierkorb{% endif %}
            </a>
        </div>
    </div>
</div>

<!-- Ablauf nach Buchung -->
<div class="alert alert-light border mb-4">
    <h6 class="alert-heading"><i class="fas fa-list-ol me-2"></i>Ablauf nach einer Buchung</h6>
    <ul class="mb-0">
        <li><strong>Zahlungsinformation:</strong> Wird nach der Buchung versendet (mit Zahlungsinformationen und Bestätigung) – Template zum Kurs/Paket.</li>
        <li><strong>Zahlungsbestätigung:</strong> Wird nach Bestätigung der Zahlung durch den Admin versendet – Template zum Kurs/Paket.</li>
        <li><strong>Erinnerung:</strong> Kann vor dem Event automatisch versendet werden.</li>
    </ul>
    <p class="mb-0 mt-2"><strong>Kursbuchung</strong> (Buchung unter <code>/booking/courses/</code>): Template-Typ „Kursbuchung – Zahlungsinformation“ wählen und <strong>mindestens einen Kurs zuordnen</strong>. Templates ohne Kurszuordnung gelten als globaler DB-Fallback nur für Bestätigung/Warteliste – nicht für Zahlungsinfo (damit z.&nbsp;B. Probestunden-Texte nicht an Athletikcamp gehen). Fehlt jedes passende Template, wird die <strong>neutrale System-Fallback-E-Mail</strong> versendet (siehe Vorschau unten).</p>
</div>

<!-- Neutrale System-Fallback-E-Mail (hardcoded) -->
{% if not showTrash %}
{% include 'admin/email_templates/_system_fallbacks.html.twig' with {
    fallbackEmails: fallbackEmails|default([])|filter(e => e.system == 'bz')
} %}
{% endif %}

<!-- Platzhalter-Info (einklappbar) -->
<div class="mb-4">
    <button class="btn btn-outline-info" type="button" data-bs-toggle="collapse" data-bs-target="#placeholderReference" aria-expanded="false">
        <i class="fas fa-info-circle me-2"></i>Verfügbare Platzhalter anzeigen/ausblenden
    </button>
    <div class="collapse mt-2" id="placeholderReference">
    <div class="placeholder-info" style="margin-top: 0;">
    <p class="mb-2"><strong>Klicken Sie auf einen Platzhalter</strong> um ihn direkt in den Editor einzufügen:</p>
    <div class="placeholder-grid">
        <div class="placeholder-item" onclick="copyToClipboard('{buchungs_token}')" title="Eindeutige Buchungsnummer">{buchungs_token}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{paket_name}')" title="Name des Event-Pakets">{paket_name}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{dauer}')" title="Dauer in Minuten">{dauer}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{datum}')" title="Buchungsdatum">{datum}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{start_zeit}')" title="Startzeit">{start_zeit}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{end_zeit}')" title="Endzeit">{end_zeit}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{preis}')" title="Gesamtpreis">{preis}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{eltern_name}')" title="Vollständiger Name Eltern">{eltern_name}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{eltern_vorname}')" title="Vorname Eltern">{eltern_vorname}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{eltern_nachname}')" title="Nachname Eltern">{eltern_nachname}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{eltern_email}')" title="E-Mail Eltern">{eltern_email}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{eltern_telefon}')" title="Telefon Eltern">{eltern_telefon}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{kind_name}')" title="Vollständiger Name Kind">{kind_name}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{kind_vorname}')" title="Vorname Kind">{kind_vorname}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{kind_nachname}')" title="Nachname Kind">{kind_nachname}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{kind_geschlecht}')" title="Geschlecht Kind">{kind_geschlecht}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{kind_alter}')" title="Alter des Kindes">{kind_alter}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{anzahl_kinder}')" title="Gesamtzahl Kinder">{anzahl_kinder}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{anmerkungen}')" title="Besondere Wünsche">{anmerkungen}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{erstellt_am}')" title="Erstellungsdatum">{erstellt_am}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{admin_email}')" title="Kontakt-E-Mail">{admin_email}</div>
    </div>
    <h6 class="mt-3"><i class="fas fa-euro-sign me-2"></i>Zahlungsinformationen</h6>
    <div class="placeholder-grid">
        <div class="placeholder-item" onclick="copyToClipboard('{empfaenger}')" title="Zahlungsempfänger">{empfaenger}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{iban}')" title="IBAN für Überweisung">{iban}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{bic}')" title="BIC für Überweisung">{bic}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{verwendungszweck}')" title="Verwendungszweck">{verwendungszweck}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{betrag}')" title="Zu zahlender Betrag">{betrag}</div>
        <div class="placeholder-item" onclick="copyToClipboard('{preis_betrag}')" title="Preis ohne € Symbol">{preis_betrag}</div>
    </div>
    <h6 class="mt-3"><i class="fas fa-dumbbell me-2"></i>Für Kursbuchung – Format [[Platzhalter]] (wie im anderen System)</h6>
    <div class="placeholder-grid">
        <div class="placeholder-item" onclick="copyToClipboard('[[BuchungsID]]')" title="Buchungsnummer">[[BuchungsID]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[ValidierungsLink]]')" title="Link zum Bestätigen (Button/Link)">[[ValidierungsLink]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[ClaimLink]]')" title="Link zum Annehmen eines Wartelistenangebots">[[ClaimLink]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Ablauf]]')" title="Ablaufzeit des Wartelistenangebots">[[Ablauf]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[eltern_name]]')" title="Name (Anrede)">[[eltern_name]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Kurs]]')" title="Kursname">[[Kurs]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[KursTyp]]')" title="Kurstyp">[[KursTyp]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Datum]]')" title="Termin(e)">[[Datum]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Zeit]]')" title="Uhrzeit">[[Zeit]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Ort]]')" title="Ort">[[Ort]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Adresse]]')" title="Adresse">[[Adresse]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[PLZ]]')" title="PLZ">[[PLZ]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Stadt]]')" title="Stadt">[[Stadt]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Preis]]')" title="Preis">[[Preis]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Vorname]]')" title="Vorname">[[Vorname]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Nachname]]')" title="Nachname">[[Nachname]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Email]]')" title="E-Mail">[[Email]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Telefon]]')" title="Telefon">[[Telefon]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Buchungsdatum]]')" title="Buchungsdatum">[[Buchungsdatum]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Notizen]]')" title="Notizen">[[Notizen]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[TeilnehmerName]]')" title="Name Teilnehmer">[[TeilnehmerName]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[TeilnehmerAlter]]')" title="Alter Teilnehmer">[[TeilnehmerAlter]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Vorerkrankungen]]')" title="Vorerkrankungen">[[Vorerkrankungen]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Unverträglichkeiten]]')" title="Unverträglichkeiten / Allergien / Medikamente">[[Unverträglichkeiten]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[Ernährung]]')" title="Ernährung">[[Ernährung]]</div>
        <div class="placeholder-item" onclick="copyToClipboard('[[ÜbermittelteDaten]]')" title="Alle übermittelten Informationen als Block">[[ÜbermittelteDaten]]</div>
    </div>
    <p class="small text-muted mt-2">Gültig auch mit geschweiften Klammern: {buchungs_token}, {kurs_name}, {termine} usw.</p>
    </div>
    </div>
</div>

<!-- Template Liste (nach Kategorie gruppiert) -->
<div class="templates-list">
    {% if templates is empty %}
        <div class="alert alert-info">
            <i class="fas fa-info-circle me-2"></i>
            {% if showTrash %}
                Der Papierkorb ist leer.
            {% else %}
                Noch keine Templates erstellt. Erstellen Sie Ihr erstes Template!
            {% endif %}
        </div>
    {% else %}
        {% set eventItems = [] %}
        {% set courseItems = [] %}
        {% set existingTypes = [] %}
        {% for template in templates %}
            {% if template.type starts with 'event_center' %}
                {% set eventItems = eventItems|merge([template]) %}
            {% else %}
                {% set courseItems = courseItems|merge([template]) %}
            {% endif %}
            {% set existingTypes = existingTypes|merge([template.type]) %}
        {% endfor %}

        {# Fehlende Typen pro Kategorie ermitteln (veralteten Bestätigungstyp ignorieren) #}
        {% set ignoredTypes = ['event_center_confirmation', 'course_booking_confirmation'] %}
        {% set missingEvent = [] %}
        {% set missingCourse = [] %}
        {% if not showTrash %}
            {% for typeValue, typeLabel in availableTypes %}
                {% if typeValue not in existingTypes and typeValue not in ignoredTypes %}
                    {% if typeValue starts with 'event_center' %}
                        {% set missingEvent = missingEvent|merge([typeLabel]) %}
                    {% else %}
                        {% set missingCourse = missingCourse|merge([typeLabel]) %}
                    {% endif %}
                {% endif %}
            {% endfor %}
        {% endif %}

        {% if eventItems|length > 0 or missingEvent|length > 0 %}
            <h4 class="mt-2 mb-3 text-secondary">
                <i class="fas fa-gift me-2"></i>Event Center
                <span class="badge bg-secondary">{{ eventItems|length }}</span>
            </h4>
            {% if missingEvent|length > 0 %}
                <div class="alert alert-warning py-2 px-3">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    <strong>Noch nicht angelegt:</strong>
                    {% for label in missingEvent %}<span class="badge bg-warning text-dark me-1">{{ label }}</span>{% endfor %}
                </div>
            {% endif %}
            <div class="row">
                {% for template in eventItems %}
                    <div class="col-xl-6">
                        {{ include('admin/event_center/email_templates/_card.html.twig', { template: template, showTrash: showTrash }) }}
                    </div>
                {% endfor %}
            </div>
        {% endif %}

        {% if courseItems|length > 0 or missingCourse|length > 0 %}
            <h4 class="mt-4 mb-3 text-secondary">
                <i class="fas fa-dumbbell me-2"></i>Kursbuchung <small class="text-muted fw-normal">(/booking/courses/)</small>
                <span class="badge bg-secondary">{{ courseItems|length }}</span>
            </h4>
            {% if missingCourse|length > 0 %}
                <div class="alert alert-warning py-2 px-3">
                    <i class="fas fa-exclamation-triangle me-1"></i>
                    <strong>Noch nicht angelegt:</strong>
                    {% for label in missingCourse %}<span class="badge bg-warning text-dark me-1">{{ label }}</span>{% endfor %}
                </div>
            {% endif %}
            <div class="row">
                {% for template in courseItems %}
                    <div class="col-xl-6">
                        {{ include('admin/event_center/email_templates/_card.html.twig', { template: template, showTrash: showTrash }) }}
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endif %}
</div>

<!-- Modal: Template erstellen/bearbeiten -->
<div class="modal fade" id="templateModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Neues Template erstellen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="templateId">
                
                <div class="mb-3">
                    <label class="editor-label">Template-Name</label>
                    <input type="text" class="form-control" id="templateName" placeholder="z.B. Standard Buchungsbestätigung">
                </div>

                <div class="mb-3">
                    <label class="editor-label">Email-Typ</label>
                    <select class="form-select" id="templateType" required>
                        {% for typeValue, typeLabel in availableTypes %}
                            <option value="{{ typeValue }}">{{ typeLabel }}</option>
                        {% endfor %}
                    </select>
                    <small class="form-text text-muted">
                        <strong>Event Center:</strong> Zahlungsinformation / Zahlungsbestätigung / Erinnerung – Paket oder Kurs zuordnen.<br>
                        <strong>Kursbuchung:</strong> Für Buchungen unter /booking/courses/ – Typ „Kursbuchung – Zahlungsinformation“ bzw. „Zahlungsbestätigung“ wählen und <strong>Kurse zuordnen</strong>, sonst kommt die Standard-E-Mail.
                    </small>
                </div>

                <div class="mb-3">
                    <label class="editor-label">E-Mail-Betreff</label>
                    <input type="text" class="form-control" id="templateSubject" placeholder="z.B. Ihre Buchung im BewegungsZentrum - {buchungs_token}">
                </div>

                <div class="mb-3">
                    <label class="editor-label">Zugeordnete Event-Pakete (optional)</label>
                    <div class="border rounded p-3" style="max-height: 200px; overflow-y: auto; background-color: #f8f9fa;">
                        {% if packages|length > 0 %}
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="selectAllPackages" onchange="toggleAllPackages(this)">
                                <label class="form-check-label fw-bold" for="selectAllPackages">
                                    Alle Pakete auswählen
                                </label>
                            </div>
                            <hr class="my-2">
                            {% for package in packages %}
                                <div class="form-check">
                                    <input class="form-check-input template-package-checkbox" type="checkbox" value="{{ package.id }}" id="package_{{ package.id }}">
                                    <label class="form-check-label" for="package_{{ package.id }}">
                                        {{ package.name }}
                                    </label>
                                </div>
                            {% endfor %}
                        {% else %}
                            <p class="text-muted mb-0">Keine Pakete verfügbar</p>
                        {% endif %}
                    </div>
                    <small class="form-text text-muted">Leer = gilt für alle Pakete.</small>
                </div>

                <div class="mb-3">
                    <label class="editor-label">Zugeordnete Kurse (optional)</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="selectAllCourses" onchange="toggleAllCourses(this)">
                                <label class="form-check-label fw-bold" for="selectAllCourses">
                                    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" type="checkbox" value="{{ course.id }}" id="course_{{ course.id }}">
                                    <label class="form-check-label" for="course_{{ course.id }}">
                                        {{ course.name }}
                                        {% if not course.isActive %}<span class="badge bg-secondary ms-1">inaktiv</span>{% endif %}
                                        <small class="text-muted">({{ course.typeLabel }})</small>
                                    </label>
                                </div>
                            {% endfor %}
                        {% else %}
                            <p class="text-muted mb-0">Keine Kurse verfügbar</p>
                        {% endif %}
                    </div>
                    <small class="form-text text-muted">Leer = globaler DB-Fallback für Kurse ohne eigenes Template (nicht für Zahlungsinfo). Für kurs-spezifische Texte immer Kurse zuordnen.</small>
                </div>

                <div class="mb-3">
                    <label class="editor-label d-block">Verfügbare Platzhalter</label>
                    <p class="small text-muted mb-2">Klicken zum Einfügen in Betreff oder Inhalt.</p>
                    <div class="accordion" id="modalPlaceholderAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#modalPlaceholderEvent" aria-expanded="false">
                                    Event Center (z. B. {buchungs_token}, {eltern_name}, {paket_name} …)
                                </button>
                            </h2>
                            <div id="modalPlaceholderEvent" class="accordion-collapse collapse" data-bs-parent="#modalPlaceholderAccordion">
                                <div class="accordion-body py-2">
                                    <div class="placeholder-grid">
                                        <div class="placeholder-item" onclick="copyToClipboard('{buchungs_token}')">{buchungs_token}</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('{paket_name}')">{paket_name}</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('{eltern_name}')">{eltern_name}</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('{eltern_vorname}')">{eltern_vorname}</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('{eltern_nachname}')">{eltern_nachname}</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('{eltern_email}')">{eltern_email}</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('{datum}')">{datum}</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('{start_zeit}')">{start_zeit}</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('{end_zeit}')">{end_zeit}</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('{preis}')">{preis}</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('{admin_email}')">{admin_email}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed py-2" type="button" data-bs-toggle="collapse" data-bs-target="#modalPlaceholderKurs" aria-expanded="false">
                                    Kursbuchung – Format [[…]] (z. B. [[BuchungsID]], [[ValidierungsLink]], [[Kurs]] …)
                                </button>
                            </h2>
                            <div id="modalPlaceholderKurs" class="accordion-collapse collapse" data-bs-parent="#modalPlaceholderAccordion">
                                <div class="accordion-body py-2">
                                    <div class="placeholder-grid">
                                        <div class="placeholder-item" onclick="copyToClipboard('[[BuchungsID]]')">[[BuchungsID]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[ValidierungsLink]]')">[[ValidierungsLink]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[ClaimLink]]')">[[ClaimLink]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[Ablauf]]')">[[Ablauf]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[eltern_name]]')">[[eltern_name]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[Kurs]]')">[[Kurs]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[KursTyp]]')">[[KursTyp]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[Datum]]')">[[Datum]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[Zeit]]')">[[Zeit]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[Ort]]')">[[Ort]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[Adresse]]')">[[Adresse]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[Preis]]')">[[Preis]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[Vorname]]')">[[Vorname]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[Nachname]]')">[[Nachname]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[Email]]')">[[Email]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[Telefon]]')">[[Telefon]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[Buchungsdatum]]')">[[Buchungsdatum]]</div>
                                        <div class="placeholder-item" onclick="copyToClipboard('[[Notizen]]')">[[Notizen]]</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="editor-container">
                    <label class="editor-label">E-Mail-Inhalt (HTML)</label>
                    <textarea id="templateContent" rows="20"></textarea>
                </div>

                <div class="form-check mt-3">
                    <input class="form-check-input" type="checkbox" id="templateActive" checked>
                    <label class="form-check-label" for="templateActive">
                        Template aktiv
                    </label>
                </div>
            </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="saveTemplate()">
                    <i class="fas fa-save me-2"></i>Speichern
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script src="https://cdn.jsdelivr.net/npm/tinymce@6.8.3/tinymce.min.js"></script>
<script>
let templateModal;
let editorInitialized = false;

document.addEventListener('DOMContentLoaded', function() {
    templateModal = new bootstrap.Modal(document.getElementById('templateModal'));
    
    // TinyMCE Event-Listener für Modal
    document.getElementById('templateModal').addEventListener('shown.bs.modal', function() {
        if (!editorInitialized) {
            initTinyMCE('templateContent');
            editorInitialized = true;
        }
    });
});

function initTinyMCE(elementId) {
    tinymce.init({
        selector: '#' + elementId,
        plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code fullscreen',
        toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | code fullscreen | removeformat',
        height: 500,
        menubar: true,
        branding: false,
        promotion: false,
        content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.6; }',
        setup: function(editor) {
            editor.on('change', function() {
                editor.save();
            });
        }
    });
}

function showCreateModal() {
    document.getElementById('modalTitle').textContent = 'Neues Template erstellen';
    document.getElementById('templateId').value = '';
    document.getElementById('templateName').value = '';
    document.getElementById('templateSubject').value = '';
    document.getElementById('templateActive').checked = true;
    // Clear package selections
    document.querySelectorAll('.template-package-checkbox').forEach(cb => cb.checked = false);
    document.getElementById('selectAllPackages').checked = false;
    // Clear course selections
    document.querySelectorAll('.template-course-checkbox').forEach(cb => cb.checked = false);
    document.getElementById('selectAllCourses').checked = false;
    
    // TinyMCE Content setzen
    if (tinymce.get('templateContent')) {
        tinymce.get('templateContent').setContent(getDefaultTemplate());
    } else {
        document.getElementById('templateContent').value = getDefaultTemplate();
    }
    
    templateModal.show();
}

async function editTemplate(id) {
    try {
        const response = await fetch(`{{ path('admin_event_center_email_template_get', {id: '__ID__'}) }}`.replace('__ID__', id));
        const data = await response.json();
        
        if (data.success) {
            document.getElementById('modalTitle').textContent = 'Template bearbeiten';
            document.getElementById('templateId').value = data.template.id;
            document.getElementById('templateName').value = data.template.name;
            document.getElementById('templateType').value = data.template.type;
            document.getElementById('templateSubject').value = data.template.subject;
            document.getElementById('templateActive').checked = data.template.isActive;
            
            // TinyMCE Content setzen
            if (tinymce.get('templateContent')) {
                tinymce.get('templateContent').setContent(data.template.content);
            } else {
                document.getElementById('templateContent').value = data.template.content;
            }
            
            // Set selected packages
            document.querySelectorAll('.template-package-checkbox').forEach(checkbox => {
                checkbox.checked = data.template.packageIds && data.template.packageIds.includes(parseInt(checkbox.value));
            });
            updateSelectAllPackages();
            
            // Set selected courses
            document.querySelectorAll('.template-course-checkbox').forEach(checkbox => {
                checkbox.checked = data.template.courseIds && data.template.courseIds.includes(parseInt(checkbox.value));
            });
            updateSelectAllCourses();
            
            templateModal.show();
        } else {
            alert('Fehler: ' + data.error);
        }
    } catch (error) {
        alert('Fehler beim Laden: ' + error.message);
    }
}

async function saveTemplate() {
    const id = document.getElementById('templateId').value;
    const isEdit = id !== '';
    
    // TinyMCE Content abrufen
    let content = '';
    if (tinymce.get('templateContent')) {
        content = tinymce.get('templateContent').getContent();
    } else {
        content = document.getElementById('templateContent').value;
    }
    
    const data = {
        name: document.getElementById('templateName').value,
        type: document.getElementById('templateType').value,
        subject: document.getElementById('templateSubject').value,
        content: content,
        isActive: document.getElementById('templateActive').checked,
        packageIds: Array.from(document.querySelectorAll('.template-package-checkbox:checked'))
            .map(cb => parseInt(cb.value)),
        courseIds: Array.from(document.querySelectorAll('.template-course-checkbox:checked'))
            .map(cb => parseInt(cb.value))
    };
    
    try {
        const url = isEdit 
            ? `{{ path('admin_event_center_email_template_edit', {id: '__ID__'}) }}`.replace('__ID__', id)
            : `{{ path('admin_event_center_email_template_create') }}`;
        
        const response = await fetch(url, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data)
        });
        
        const result = await response.json();
        
        if (result.success) {
            alert(result.message);
            templateModal.hide();
            location.reload();
        } else {
            alert('Fehler: ' + result.error);
        }
    } catch (error) {
        alert('Fehler beim Speichern: ' + error.message);
    }
}

function toggleAllPackages(selectAllCheckbox) {
    const checkboxes = document.querySelectorAll('.template-package-checkbox');
    checkboxes.forEach(cb => {
        cb.checked = selectAllCheckbox.checked;
    });
}

function toggleAllCourses(selectAllCheckbox) {
    const checkboxes = document.querySelectorAll('.template-course-checkbox');
    checkboxes.forEach(cb => {
        cb.checked = selectAllCheckbox.checked;
    });
}

function updateSelectAllPackages() {
    const checkboxes = document.querySelectorAll('.template-package-checkbox');
    const selectAll = document.getElementById('selectAllPackages');
    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 updateSelectAllCourses() {
    const checkboxes = document.querySelectorAll('.template-course-checkbox');
    const selectAll = document.getElementById('selectAllCourses');
    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() {
    // Packages
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('template-package-checkbox')) {
            updateSelectAllPackages();
        }
        if (e.target.classList.contains('template-course-checkbox')) {
            updateSelectAllCourses();
        }
    });
});

async function deleteTemplate(id) {
    if (!confirm('Template in den Papierkorb verschieben?')) return;
    
    try {
        const response = await fetch(`{{ path('admin_event_center_email_template_delete', {id: '__ID__'}) }}`.replace('__ID__', id), {
            method: 'POST'
        });
        
        const data = await response.json();
        
        if (data.success) {
            alert(data.message);
            location.reload();
        } else {
            alert('Fehler: ' + data.error);
        }
    } catch (error) {
        alert('Fehler beim Löschen: ' + error.message);
    }
}

async function restoreTemplate(id) {
    try {
        const response = await fetch(`{{ path('admin_event_center_email_template_restore', {id: '__ID__'}) }}`.replace('__ID__', id), {
            method: 'POST'
        });

        const data = await response.json();

        if (data.success) {
            alert(data.message);
            location.reload();
        } else {
            alert('Fehler: ' + data.error);
        }
    } catch (error) {
        alert('Fehler beim Wiederherstellen: ' + error.message);
    }
}

async function toggleTemplate(id) {
    try {
        const response = await fetch(`{{ path('admin_event_center_email_template_toggle', {id: '__ID__'}) }}`.replace('__ID__', id), {
            method: 'POST'
        });
        
        const data = await response.json();
        
        if (data.success) {
            location.reload();
        } else {
            alert('Fehler: ' + data.error);
        }
    } catch (error) {
        alert('Fehler: ' + error.message);
    }
}

function copyToClipboard(text) {
    // Wenn TinyMCE aktiv ist, direkt einfügen
    if (tinymce.get('templateContent')) {
        tinymce.get('templateContent').execCommand('mceInsertContent', false, text);
        
        // Visual feedback
        const toast = document.createElement('div');
        toast.className = 'alert alert-success position-fixed top-0 end-0 m-3';
        toast.style.zIndex = '9999';
        toast.innerHTML = `<i class="fas fa-check me-2"></i>Eingefügt: ${text}`;
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 2000);
    } else {
        // Fallback: In Zwischenablage kopieren
        navigator.clipboard.writeText(text).then(() => {
            const toast = document.createElement('div');
            toast.className = 'alert alert-success position-fixed top-0 end-0 m-3';
            toast.style.zIndex = '9999';
            toast.innerHTML = `<i class="fas fa-check me-2"></i>Kopiert: ${text}`;
            document.body.appendChild(toast);
            setTimeout(() => toast.remove(), 2000);
        });
    }
}

function getDefaultTemplate() {
    return `<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
        .container { max-width: 600px; margin: 0 auto; padding: 20px; }
        .header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; text-align: center; border-radius: 10px 10px 0 0; }
        .content { background: #f9f9f9; padding: 30px; border-radius: 0 0 10px 10px; }
        .info-box { background: white; padding: 20px; margin: 20px 0; border-left: 4px solid #667eea; border-radius: 5px; }
        .info-row { margin: 10px 0; }
        .label { font-weight: bold; color: #667eea; }
        .footer { text-align: center; color: #666; font-size: 12px; margin-top: 30px; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🎉 Buchung bestätigt!</h1>
            <p>Vielen Dank für Ihre Buchung im BewegungsZentrum</p>
        </div>
        
        <div class="content">
            <p>Liebe/r {eltern_vorname} {eltern_nachname},</p>
            
            <p>vielen Dank für Ihre Buchung! Wir freuen uns, den Geburtstag von <strong>{kind_vorname}</strong> zu einem unvergesslichen Erlebnis zu machen.</p>

            <div class="info-box">
                <h2>📋 Ihre Buchungsdetails</h2>
                <div class="info-row"><span class="label">Buchungs-Token:</span> {buchungs_token}</div>
                <div class="info-row"><span class="label">Paket:</span> {paket_name}</div>
                <div class="info-row"><span class="label">Dauer:</span> {dauer}</div>
                <div class="info-row"><span class="label">Datum:</span> {datum}</div>
                <div class="info-row"><span class="label">Uhrzeit:</span> {start_zeit} - {end_zeit} Uhr</div>
                <div class="info-row"><span class="label">Gesamtpreis:</span> <strong>{preis}</strong></div>
            </div>

            <div class="info-box">
                <h2>ℹ️ Wichtige Hinweise</h2>
                <ul>
                    <li>Bitte erscheinen Sie <strong>15 Minuten vor Beginn</strong></li>
                    <li>Sportkleidung und Hallenschuhe nicht vergessen</li>
                    <li>Anzahl der Kinder: {anzahl_kinder}</li>
                </ul>
            </div>

            <p>Wir freuen uns auf Sie!</p>
            <p>Mit sportlichen Grüßen<br>Ihr BewegungsZentrum-Team</p>
        </div>

        <div class="footer">
            <p><strong>Kreissportbund Düren e.V.</strong><br>E-Mail: {admin_email}</p>
        </div>
    </div>
</body>
</html>`;
}
</script>
{% endblock %}