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

{% block title %}Kursbuchungen - Admin{% endblock %}
{% block header_title %}Kursbuchungen{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <!-- Filter & Actions -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label">Status</label>
                    <select class="form-select" id="statusFilter" onchange="loadBookings()">
                        <option value="all">Alle</option>
                        <option value="pending">Ausstehend</option>
                        <option value="confirmed">Bestätigt</option>
                        <option value="waitlist">Warteliste</option>
                        <option value="cancelled">Storniert</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label">Kurs</label>
                    <select class="form-select" id="courseFilter" onchange="loadBookings()">
                        <option value="">Alle Kurse</option>
                    </select>
                </div>
                <div class="col-md-6 d-flex align-items-end justify-content-end gap-2">
                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#createBookingModal">
                        <i class="fas fa-plus me-2"></i>Manuelle Buchung
                    </button>
                    <button class="btn btn-success" onclick="exportCsv()">
                        <i class="fas fa-file-csv me-2"></i>CSV Export
                    </button>
                    <button class="btn btn-primary" onclick="loadBookings()">
                        <i class="fas fa-sync me-2"></i>Aktualisieren
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card border-primary">
                <div class="card-body">
                    <h6 class="text-muted">Gesamt</h6>
                    <h3 class="mb-0" id="statTotal">0</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-warning">
                <div class="card-body">
                    <h6 class="text-muted">Ausstehend</h6>
                    <h3 class="mb-0" id="statPending">0</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-success">
                <div class="card-body">
                    <h6 class="text-muted">Bestätigt</h6>
                    <h3 class="mb-0" id="statConfirmed">0</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-info">
                <div class="card-body">
                    <h6 class="text-muted">Warteliste</h6>
                    <h3 class="mb-0" id="statWaitlist">0</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- Bookings Table -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">Buchungen</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="bookingsTable">
                    <thead>
                        <tr>
                            <th>Token</th>
                            <th>Name</th>
                            <th>Kontakt</th>
                            <th>Kurs</th>
                            <th>Kursleiter</th>
                            <th>Zeit</th>
                            <th>Status</th>
                            <th>Bezahlt</th>
                            <th>Buchungsdatum</th>
                            <th>Aktionen</th>
                        </tr>
                    </thead>
                    <tbody id="bookingsTableBody">
                        <tr>
                            <td colspan="10" 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>

<!-- Manuelle Buchung Modal (kursspezifische Felder) -->
<div class="modal fade" id="createBookingModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Manuelle Buchung anlegen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="createBookingForm">
                    <div class="mb-3">
                        <label class="form-label">Kurs <span class="text-danger">*</span></label>
                        <select class="form-select" name="courseId" id="createBookingCourseId" required>
                            <option value="">Bitte wählen</option>
                        </select>
                        <small class="text-muted" id="createBookingCourseTypeHint"></small>
                    </div>

                    <!-- Standard-Kurse (inkl. Abo, Workshop, Mannschaftstraining etc.) -->
                    <div class="create-booking-section" data-course-type="standard">
                        <h6 class="border-bottom pb-1 mb-2">Teilnehmer / Kontakt</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Vorname <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="firstName">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nachname <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="lastName">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">E-Mail <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" name="email_standard">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Telefon</label>
                                <input type="text" class="form-control" name="phone_standard">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Geburtsdatum</label>
                                <input type="date" class="form-control" name="birthDate">
                            </div>
                            <div class="col-md-6 mb-3 create-booking-team-size d-none">
                                <label class="form-label">Teamgröße (Personen)</label>
                                <input type="number" class="form-control" name="teamSize" min="1">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Termin (Datum)</label>
                                <input type="date" class="form-control" name="selectedDate">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Uhrzeit</label>
                                <input type="time" class="form-control" name="selectedTime">
                            </div>
                        </div>
                        <div class="mb-3 create-booking-siblings d-none">
                            <label class="form-label">Geschwisterkinder (eine Zeile pro Kind: Vorname Nachname, Geburtsdatum optional)</label>
                            <textarea class="form-control" name="siblingsRaw" rows="2" placeholder="z.B. Max Mustermann, 01.01.2015"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">10er-Karte</label>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="useTicketCard" value="1">
                                <label class="form-check-label">Buchung mit 10er-Karte</label>
                            </div>
                        </div>
                    </div>

                    <!-- Familien-Bewegungszeit -->
                    <div class="create-booking-section d-none" data-course-type="family_time">
                        <h6 class="border-bottom pb-1 mb-2">Erziehungsberechtigte</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Vorname <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="guardianFirstName">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nachname <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="guardianLastName">
                            </div>
                        </div>
                        <h6 class="border-bottom pb-1 mb-2 mt-3">Kind</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Vorname Kind <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="childFirstName_family">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nachname Kind <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="childLastName_family">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Geburtsdatum Kind</label>
                                <input type="date" class="form-control" name="childBirthDate_family">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Zweites Kind (Infos)</label>
                            <input type="text" class="form-control" name="secondChildInfo" placeholder="Name, Alter o.ä.">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Weitere Geschwisterkinder (eine Zeile pro Kind)</label>
                            <textarea class="form-control" name="siblingInfosRaw_family" rows="2"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Samstagstermine <span class="text-danger">*</span> (mind. einer, Format YYYY-MM-DD)</label>
                            <div id="createBookingSaturdayDates">
                                <input type="date" class="form-control mb-2" name="selectedSaturdayDate_0">
                            </div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="addSaturdayDate">+ weiterer Samstag</button>
                        </div>
                        <div class="row mt-2">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">E-Mail <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" name="email_family">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Telefon</label>
                                <input type="text" class="form-control" name="phone_family">
                            </div>
                        </div>
                    </div>

                    <!-- Kind-Formular: Pflichtfelder für alle BZ-Kurse (außer Familien-Bewegungszeit) -->
                    <div class="create-booking-section d-none" data-course-type="holiday_games">
                        <h6 class="border-bottom pb-1 mb-2">Kind / Erziehungsberechtigte</h6>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Vorname Kind <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="childFirstName_holiday">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Nachname Kind <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="childLastName_holiday">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Geburtsdatum Kind</label>
                                <input type="date" class="form-control" name="childBirthDate_holiday">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Geschlecht Kind</label>
                                <select class="form-select" name="childGender">
                                    <option value="">–</option>
                                    <option value="m">männlich</option>
                                    <option value="w">weiblich</option>
                                    <option value="d">divers</option>
                                </select>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Erziehungsberechtigte(r) (Name)</label>
                            <input type="text" class="form-control" name="guardianName" placeholder="Vorname Nachname">
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Geburtsdatum Teilnehmer</label>
                                <input type="date" class="form-control" name="birthDate_holiday">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Adresse</label>
                                <input type="text" class="form-control" name="address">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Geschwisterkinder (eine Zeile pro Kind)</label>
                            <textarea class="form-control" name="siblingInfosRaw_holiday" rows="2"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Vorerkrankungen / Gesundheit</label>
                            <textarea class="form-control" name="preExistingConditions" rows="2"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Allergien / Medikamente</label>
                            <textarea class="form-control" name="allergiesMedications" rows="2"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Ernährungshinweise</label>
                            <textarea class="form-control" name="dietNotes" rows="2"></textarea>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="imageVideoConsent" value="1">
                                <label class="form-check-label">Bild-/Videoerlaubnis für Dokumentation</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">E-Mail <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" name="email_holiday">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Telefon <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="phone_holiday">
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="agbAccepted_holiday" value="1" checked>
                                <label class="form-check-label">AGB akzeptiert</label>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="datenschutzAccepted_holiday" value="1" checked>
                                <label class="form-check-label">Datenschutz akzeptiert</label>
                            </div>
                        </div>
                    </div>

                    <!-- Gemeinsam: Anmerkungen, Status -->
                    <div class="mt-3 pt-2 border-top">
                        <div class="mb-3">
                            <label class="form-label">Anmerkungen</label>
                            <textarea class="form-control" name="notes" rows="2"></textarea>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Status</label>
                            <select class="form-select" name="status">
                                <option value="pending">Ausstehend</option>
                                <option value="confirmed">Bestätigt</option>
                                <option value="waitlist">Warteliste</option>
                            </select>
                        </div>
                        <div class="mb-0">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="sendEmails" id="createBookingSendEmails" value="1" checked>
                                <label class="form-check-label" for="createBookingSendEmails">Kunden- und Admin-E-Mails automatisch versenden</label>
                            </div>
                        </div>
                    </div>
                </form>
                <div id="createBookingError" class="alert alert-danger d-none mt-2"></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" id="createBookingSubmit">
                    <i class="fas fa-save me-1"></i>Buchung anlegen
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Details Modal -->
<div class="modal fade" id="detailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Buchungsdetails</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="detailsModalBody">
                <!-- Wird dynamisch gefüllt -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<script>
let bookingsData = [];
let detailsModal;
let coursesList = [];

document.addEventListener('DOMContentLoaded', function() {
    detailsModal = new bootstrap.Modal(document.getElementById('detailsModal'));
    loadBookings();
    loadCourseFilter();

    document.getElementById('createBookingCourseId').addEventListener('change', function() {
        const id = parseInt(this.value, 10);
        const course = coursesList.find(c => c.id === id);
        document.querySelectorAll('.create-booking-section').forEach(el => el.classList.add('d-none'));
        document.getElementById('createBookingCourseTypeHint').textContent = '';
        document.querySelectorAll('.create-booking-team-size').forEach(el => el.classList.add('d-none'));
        document.querySelectorAll('.create-booking-siblings').forEach(el => el.classList.add('d-none'));
        document.getElementById('createBookingCourseTypeHint').textContent = course ? (course.typeLabel || course.type || '') : '';
        let section = document.querySelector('.create-booking-section[data-course-type="standard"]');
        if (!course) {
            if (section) section.classList.remove('d-none');
            return;
        }
        if (course.type === 'family_time') {
            section = document.querySelector('.create-booking-section[data-course-type="family_time"]');
        } else if (usesChildBookingForm(course)) {
            section = document.querySelector('.create-booking-section[data-course-type="holiday_games"]');
        }
        if (section) section.classList.remove('d-none');
        if (course.type !== 'family_time' && !usesChildBookingForm(course)) {
            if (course.requiresTeamSize) document.querySelectorAll('.create-booking-team-size').forEach(el => el.classList.remove('d-none'));
            if (course.allowSiblings) document.querySelectorAll('.create-booking-siblings').forEach(el => el.classList.remove('d-none'));
        }
    });

    document.getElementById('addSaturdayDate').addEventListener('click', function() {
        const wrap = document.getElementById('createBookingSaturdayDates');
        const n = wrap.querySelectorAll('input[type="date"]').length;
        const inp = document.createElement('input');
        inp.type = 'date';
        inp.className = 'form-control mb-2';
        inp.name = 'selectedSaturdayDate_' + n;
        wrap.appendChild(inp);
    });

    document.getElementById('createBookingSubmit').addEventListener('click', function() {
        const form = document.getElementById('createBookingForm');
        const errEl = document.getElementById('createBookingError');
        const courseId = parseInt(form.querySelector('[name="courseId"]').value, 10);
        const course = coursesList.find(c => c.id === courseId);
        if (!courseId || !course) {
            errEl.textContent = 'Bitte einen Kurs wählen.';
            errEl.classList.remove('d-none');
            return;
        }
        const emailKey = course.type === 'family_time' ? 'email_family' : (usesChildBookingForm(course) ? 'email_holiday' : 'email_standard');
        const emailEl = form.querySelector('[name="' + emailKey + '"]');
        const email = emailEl ? emailEl.value.trim() : '';
        if (!email) {
            errEl.textContent = 'E-Mail ist erforderlich.';
            errEl.classList.remove('d-none');
            return;
        }
        const payload = buildCreatePayload(form, course);
        if (!payload) {
            errEl.textContent = 'Bitte alle Pflichtfelder ausfüllen.';
            errEl.classList.remove('d-none');
            return;
        }
        payload.sendEmails = form.querySelector('[name="sendEmails"]')?.checked !== false;
        errEl.classList.add('d-none');
        this.disabled = true;
        fetch('{{ path('admin_course_bookings_create') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            body: JSON.stringify(payload)
        })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (data.success) {
                    bootstrap.Modal.getInstance(document.getElementById('createBookingModal')).hide();
                    form.reset();
                    document.getElementById('createBookingSaturdayDates').innerHTML = '<input type="date" class="form-control mb-2" name="selectedSaturdayDate_0">';
                    loadBookings();
                    showToast('Buchung ' + (data.bookingToken || '') + ' wurde angelegt.', 'success');
                } else {
                    errEl.textContent = data.error || 'Fehler beim Anlegen.';
                    errEl.classList.remove('d-none');
                }
            })
            .catch(function() {
                errEl.textContent = 'Netzwerkfehler. Bitte erneut versuchen.';
                errEl.classList.remove('d-none');
            })
            .finally(function() {
                document.getElementById('createBookingSubmit').disabled = false;
            });
    });
});

function usesChildBookingForm(course) {
    if (!course) return false;
    return course.type !== 'family_time';
}

function buildCreatePayload(form, course) {
    const get = (name) => { const el = form.querySelector('[name="' + name + '"]'); return el ? el.value : ''; };
    const trim = (v) => (v && String(v).trim()) || null;
    const emailKey = course.type === 'family_time' ? 'email_family' : (usesChildBookingForm(course) ? 'email_holiday' : 'email_standard');
    const phoneKey = course.type === 'family_time' ? 'phone_family' : (usesChildBookingForm(course) ? 'phone_holiday' : 'phone_standard');
    const payload = {
        courseId: course.id,
        email: trim(get(emailKey)),
        phone: trim(get(phoneKey)),
        notes: trim(get('notes')),
        status: get('status') || 'pending'
    };
    if (course.type === 'family_time') {
        payload.guardianFirstName = trim(get('guardianFirstName'));
        payload.guardianLastName = trim(get('guardianLastName'));
        payload.childFirstName = trim(get('childFirstName_family'));
        payload.childLastName = trim(get('childLastName_family'));
        if (!payload.guardianFirstName || !payload.guardianLastName || !payload.childFirstName || !payload.childLastName) return null;
        payload.childBirthDate = trim(get('childBirthDate_family')) || null;
        payload.secondChildInfo = trim(get('secondChildInfo')) || null;
        const siblingRaw = trim(get('siblingInfosRaw_family'));
        payload.siblingInfos = siblingRaw ? siblingRaw.split(/\n/).map(s => s.trim()).filter(Boolean) : [];
        const dates = [];
        form.querySelectorAll('#createBookingSaturdayDates input[type="date"]').forEach(inp => {
            if (inp.value) dates.push(inp.value);
        });
        if (dates.length === 0) return null;
        payload.selectedSaturdayDates = dates;
        payload.selectedSaturdayDate = dates[0];
    } else if (usesChildBookingForm(course)) {
        payload.childFirstName = trim(get('childFirstName_holiday'));
        payload.childLastName = trim(get('childLastName_holiday'));
        if (!payload.childFirstName || !payload.childLastName) return null;
        payload.guardianName = trim(get('guardianName')) || null;
        const gName = trim(get('guardianName'));
        if (gName) {
            const parts = gName.split(/\s+/, 2);
            payload.firstName = parts[0] || '';
            payload.lastName = parts[1] || '';
        } else {
            payload.firstName = '';
            payload.lastName = '';
        }
        payload.childGender = trim(get('childGender')) || null;
        payload.childBirthDate = trim(get('childBirthDate_holiday')) || null;
        payload.birthDate = trim(get('birthDate_holiday')) || null;
        payload.address = trim(get('address')) || null;
        const siblingRaw = trim(get('siblingInfosRaw_holiday'));
        payload.siblingInfos = siblingRaw ? siblingRaw.split(/\n/).map(s => s.trim()).filter(Boolean) : [];
        payload.preExistingConditions = trim(get('preExistingConditions')) || null;
        payload.allergiesMedications = trim(get('allergiesMedications')) || null;
        payload.dietNotes = trim(get('dietNotes')) || null;
        payload.imageVideoConsent = form.querySelector('[name="imageVideoConsent"]') && form.querySelector('[name="imageVideoConsent"]').checked;
        payload.agbAccepted = !form.querySelector('[name="agbAccepted_holiday"]') || form.querySelector('[name="agbAccepted_holiday"]').checked;
        payload.datenschutzAccepted = !form.querySelector('[name="datenschutzAccepted_holiday"]') || form.querySelector('[name="datenschutzAccepted_holiday"]').checked;
        if (!payload.guardianName || !payload.address || !payload.phone) return null;
    } else {
        payload.firstName = trim(get('firstName'));
        payload.lastName = trim(get('lastName'));
        if (!payload.firstName || !payload.lastName) return null;
        payload.birthDate = trim(get('birthDate')) || null;
        payload.selectedDate = trim(get('selectedDate')) || null;
        const t = trim(get('selectedTime'));
        payload.selectedTime = t ? t.substring(0, 5) : null;
        const tsEl = form.querySelector('[name="teamSize"]');
        payload.teamSize = tsEl && tsEl.value ? parseInt(tsEl.value, 10) : null;
        const siblingsRaw = trim(get('siblingsRaw'));
        if (siblingsRaw) {
            payload.siblings = siblingsRaw.split(/\n/).map(line => {
                const parts = line.trim().split(',').map(p => p.trim());
                return { firstName: parts[0] || '', lastName: parts[1] || '', birthDate: parts[2] || '' };
            }).filter(o => o.firstName || o.lastName);
        }
        payload.useTicketCard = form.querySelector('[name="useTicketCard"]') && form.querySelector('[name="useTicketCard"]').checked;
    }
    return payload;
}

function isCourseCurrentForFilter(course) {
    if (!course || !course.isActive) {
        return false;
    }
    if (!course.endDate) {
        return true;
    }
    // endDate kommt als d.m.Y
    const parts = String(course.endDate).split('.');
    if (parts.length !== 3) {
        return true;
    }
    const end = new Date(parseInt(parts[2], 10), parseInt(parts[1], 10) - 1, parseInt(parts[0], 10), 23, 59, 59);
    return end >= new Date();
}

function loadCourseFilter() {
    fetch('{{ path('admin_bz_courses_api_list') }}')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                coursesList = data.courses || [];
                const select = document.getElementById('courseFilter');
                const createSelect = document.getElementById('createBookingCourseId');
                data.courses.forEach(course => {
                    if (!isCourseCurrentForFilter(course)) {
                        return;
                    }
                    const option = document.createElement('option');
                    option.value = course.id;
                    option.textContent = course.name || course.title || ('Kurs #' + course.id);
                    select.appendChild(option);
                    if (createSelect) {
                        const createOpt = document.createElement('option');
                        createOpt.value = course.id;
                        createOpt.textContent = course.name || course.title || ('Kurs #' + course.id);
                        createSelect.appendChild(createOpt);
                    }
                });
            }
        })
        .catch(error => console.error('Error loading courses:', error));
}

function loadBookings() {
    const status = document.getElementById('statusFilter').value;
    const courseId = document.getElementById('courseFilter').value;
    
    let url = '{{ path('admin_course_bookings_api_list') }}?status=' + status;
    if (courseId) {
        url += '&course=' + courseId;
    }

    fetch(url)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                bookingsData = data.bookings;
                renderBookings(data.bookings);
                updateStatistics(data.bookings);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Fehler beim Laden der Buchungen', 'error');
        });
}

function renderBookings(bookings) {
    const tbody = document.getElementById('bookingsTableBody');
    
    if (bookings.length === 0) {
        tbody.innerHTML = '<tr><td colspan="10" class="text-center">Keine Buchungen gefunden</td></tr>';
        return;
    }

    tbody.innerHTML = bookings.map(booking => {
        // Kursleiter anzeigen
        let instructorsHtml = '<span class="text-muted">Keine</span>';
        if (booking.instructors && booking.instructors.length > 0) {
            instructorsHtml = booking.instructors.map(instructor => 
                `<span class="badge bg-info me-1">${instructor.firstName} ${instructor.lastName.charAt(0)}.</span>`
            ).join('');
        } else if (booking.instructorCount > 0) {
            instructorsHtml = `<span class="text-success">${booking.instructorCount} Kursleiter</span>`;
        }

        return `
        <tr>
            <td><strong>${booking.bookingToken}</strong></td>
            <td>
                ${booking.fullName}
                ${booking.totalParticipants > 1 ? `<br><small class="text-muted">(+${booking.totalParticipants - 1} Geschwister)</small>` : ''}
            </td>
            <td>
                ${booking.email}<br>
                <small class="text-muted">${booking.phone || 'Keine Telefonnummer'}</small>
            </td>
            <td>
                <strong>${booking.courseName}</strong><br>
                <small class="text-muted">${booking.courseType}</small>
            </td>
            <td>${instructorsHtml}</td>
            <td>
                ${booking.bookedTimeSlot
                    ? `${booking.bookedDate ? `${booking.bookedDate}<br>` : ''}<small class="text-muted">${booking.bookedTimeSlot} Uhr</small>`
                    : `${booking.weekday || ''}<br><small class="text-muted">${booking.startTime || ''} ${booking.startTime && booking.endTime ? '-' : ''} ${booking.endTime || ''}</small>`}
            </td>
            <td>${getStatusBadge(booking.status)}</td>
            <td>${getPaymentBadge(booking.paymentReceived)}</td>
            <td>${booking.createdAt}</td>
            <td>
                <div class="btn-group" role="group">
                    <button class="btn btn-sm btn-info" onclick="showDetails(${booking.id})" title="Details">
                        <i class="fas fa-eye"></i>
                    </button>
                    <button class="btn btn-sm btn-primary" onclick="changeStatus(${booking.id})" title="Status ändern">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-${booking.paymentReceived ? 'warning' : 'success'}" 
                            onclick="togglePayment(${booking.id}, ${!booking.paymentReceived})" 
                            title="${booking.paymentReceived ? 'Als unbezahlt markieren' : 'Als bezahlt markieren'}">
                        <i class="fas fa-${booking.paymentReceived ? 'times' : 'check'}"></i>
                    </button>
                    <button class="btn btn-sm btn-danger" onclick="deleteBooking(${booking.id})" title="Löschen">
                        <i class="fas fa-trash"></i>
                    </button>
                </div>
            </td>
        </tr>
        `;
    }).join('');
}

function updateStatistics(bookings) {
    document.getElementById('statTotal').textContent = bookings.length;
    document.getElementById('statPending').textContent = bookings.filter(b => b.status === 'pending').length;
    document.getElementById('statConfirmed').textContent = bookings.filter(b => b.status === 'confirmed').length;
    document.getElementById('statWaitlist').textContent = bookings.filter(b => b.status === 'waitlist').length;
}

function getStatusBadge(status) {
    const badges = {
        'pending': '<span class="badge bg-warning">Ausstehend</span>',
        'confirmed': '<span class="badge bg-success">Bestätigt</span>',
        'waitlist': '<span class="badge bg-info">Warteliste</span>',
        'cancelled': '<span class="badge bg-danger">Storniert</span>',
        'completed': '<span class="badge bg-secondary">Abgeschlossen</span>'
    };
    return badges[status] || status;
}

function getPaymentBadge(paid) {
    return paid 
        ? '<span class="badge bg-success"><i class="fas fa-check me-1"></i>Bezahlt</span>'
        : '<span class="badge bg-secondary"><i class="fas fa-clock me-1"></i>Offen</span>';
}

function renderConsentBadge(value) {
    if (value === true) return '<span class="badge bg-success">Ja</span>';
    if (value === false) return '<span class="badge bg-danger">Nein</span>';
    return '<span class="badge bg-secondary">Nicht angegeben</span>';
}

function isEmptyFieldValue(value) {
    if (value === null || value === undefined) return true;
    if (typeof value === 'string' && value.trim() === '') return true;
    if (Array.isArray(value) && value.length === 0) return true;
    return false;
}

function formatIsoDate(value) {
    if (typeof value !== 'string') return value;
    const match = value.match(/^(\d{4})-(\d{2})-(\d{2})/);
    return match ? `${match[3]}.${match[2]}.${match[1]}` : value;
}

function renderDetailRow(label, value, options = {}) {
    const empty = isEmptyFieldValue(value);
    const classes = `mb-1 field-row${empty ? ' empty-field d-none' : ''}`;
    const display = empty ? '<span class="text-muted">Nicht angegeben</span>' : value;
    return {
        html: `<p class="${classes}"><strong>${label}:</strong> ${display}</p>`,
        missing: empty ? 1 : 0,
    };
}

function renderConsentRow(label, value) {
    const empty = value !== true && value !== false;
    const classes = `mb-2 field-row${empty ? ' empty-field d-none' : ''}`;
    return {
        html: `<p class="${classes}"><strong>${label}:</strong> ${renderConsentBadge(value)}</p>`,
        missing: empty ? 1 : 0,
    };
}

function showDetails(bookingId) {
    fetch(`{{ path('admin_course_bookings_api_get', {id: '__ID__'}) }}`.replace('__ID__', bookingId))
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const booking = data.booking;
                const participantName = [booking.childFirstName, booking.childLastName].filter(Boolean).join(' ').trim() || `${booking.firstName} ${booking.lastName}`.trim();
                const participantBirthDate = booking.childBirthDate || booking.birthDate || 'Nicht angegeben';
                const childGenderLabelMap = { maennlich: 'Männlich', weiblich: 'Weiblich', divers: 'Divers', m: 'Männlich', w: 'Weiblich', d: 'Divers' };
                const childGenderLabel = booking.childGender ? (childGenderLabelMap[booking.childGender] || booking.childGender) : 'Nicht angegeben';
                const selectedDatesList = Array.isArray(booking.selectedDates) && booking.selectedDates.length
                    ? booking.selectedDates.map(d => `<li class="small">${d}</li>`).join('')
                    : '';
                let missingFieldsCount = 0;
                const personalRows = [];
                const bookingRows = [];
                const familyRows = [];
                const extraRows = [];
                const healthRows = [];

                [booking.firstName && booking.lastName ? `${booking.firstName} ${booking.lastName}` : null, booking.email, booking.phone, booking.birthDate, booking.address]
                    .forEach((value, index) => {
                        const labels = ['Name', 'E-Mail', 'Telefon', 'Geburtsdatum', 'Adresse'];
                        const row = renderDetailRow(labels[index], value);
                        personalRows.push(row.html);
                        missingFieldsCount += row.missing;
                    });

                [booking.courseName, getStatusBadge(booking.status), `${booking.totalPrice || 'N/A'}€`, getPaymentBadge(booking.paymentReceived), booking.paymentDate]
                    .forEach((value, index) => {
                        const labels = ['Kurs', 'Status', 'Preis', 'Bezahlt', 'Zahlungsdatum'];
                        const row = renderDetailRow(labels[index], value, { isHtml: index === 1 || index === 3 });
                        bookingRows.push(row.html.replace(
                            '<strong>Status:</strong> ' + (index === 1 ? value : ''),
                            index === 1 ? `<strong>Status:</strong> ${value}` : ''
                        ).replace(
                            '<strong>Bezahlt:</strong> ' + (index === 3 ? value : ''),
                            index === 3 ? `<strong>Bezahlt:</strong> ${value}` : ''
                        ));
                        missingFieldsCount += row.missing;
                    });

                if (booking.bookedTimeSlot) {
                    const timeLabel = booking.bookedDate ? `${booking.bookedDate}, ${booking.bookedTimeSlot} Uhr` : `${booking.bookedTimeSlot} Uhr`;
                    const timeRow = renderDetailRow('Zeitslot', timeLabel);
                    bookingRows.push(timeRow.html);
                }

                const siblingsCount = Array.isArray(booking.siblings) ? booking.siblings.length : 0;
                const participantsLabel = booking.teamSize
                    ? `${booking.totalParticipants} (Teamgröße)`
                    : `${booking.totalParticipants}${siblingsCount > 0 ? ` (1 Hauptkind + ${siblingsCount} Geschwisterkind${siblingsCount > 1 ? 'er' : ''})` : ''}`;
                bookingRows.push(renderDetailRow('Teilnehmer (belegte Plätze)', participantsLabel).html);

                [
                    booking.childFirstName,
                    booking.childLastName,
                    booking.childBirthDate,
                    booking.childGender ? childGenderLabel : null,
                    [booking.guardianFirstName, booking.guardianLastName].filter(Boolean).join(' ')
                        || [booking.firstName, booking.lastName].filter(Boolean).join(' ')
                        || null,
                    booking.secondChildInfo,
                ].forEach((value, index) => {
                    const labels = ['Vorname Kind', 'Nachname Kind', 'Geburtsdatum Kind', 'Geschlecht Kind', 'Erziehungsberechtigte(r)', '2. Kind / Zusatzinfo'];
                    const row = renderDetailRow(labels[index], value);
                    familyRows.push(row.html);
                    missingFieldsCount += row.missing;
                });

                [booking.holidayWeek, booking.selectedSaturdayDate].forEach((value, index) => {
                    const labels = ['Ferienwoche', 'Samstag (erstes Datum)'];
                    const row = renderDetailRow(labels[index], value);
                    extraRows.push(row.html);
                    missingFieldsCount += row.missing;
                });

                const consentRows = [
                    renderConsentRow('Bild/Video', booking.imageVideoConsent),
                    renderConsentRow('AGB', booking.agbAccepted),
                    renderConsentRow('Datenschutz', booking.datenschutzAccepted),
                ];
                consentRows.forEach(row => {
                    extraRows.push(row.html);
                    missingFieldsCount += row.missing;
                });

                [participantName, participantBirthDate, booking.preExistingConditions, booking.allergiesMedications, booking.dietNotes]
                    .forEach((value, index) => {
                        const labels = ['Name Teilnehmer', 'Geburtsdatum Teilnehmer', 'Vorerkrankungen', 'Allergien / Medikamente', 'Ernährung'];
                        const row = renderDetailRow(labels[index], value);
                        healthRows.push(row.html);
                        missingFieldsCount += row.missing;
                    });

                // Geschwisterkinder: alle Angaben aus dem Buchungsformular einzeln ausweisen
                const siblingBlocks = (Array.isArray(booking.siblings) ? booking.siblings : []).map((s, idx) => {
                    const rows = [];
                    const pushRow = (label, value) => {
                        const row = renderDetailRow(label, value);
                        rows.push(row.html);
                        missingFieldsCount += row.missing;
                    };
                    if (s.raw) {
                        pushRow('Angabe (Freitext)', s.raw);
                    } else {
                        pushRow('Vorname', s.firstName);
                        pushRow('Nachname', s.lastName);
                    }
                    pushRow('Geburtsdatum', formatIsoDate(s.birthDate));
                    pushRow('Vorerkrankungen', s.preExistingConditions);
                    pushRow('Allergien / Medikamente / Unverträglichkeiten', s.allergiesMedications);
                    pushRow('Ernährung', s.dietNotes);
                    const consentRow = renderConsentRow('Foto/Video-Einwilligung', s.imageVideoConsent);
                    rows.push(consentRow.html);
                    missingFieldsCount += consentRow.missing;

                    return `
                        <div class="border rounded p-3 mb-2" style="background: #fff;">
                            <p class="mb-2 fw-bold"><i class="fas fa-child me-2 text-primary"></i>Geschwisterkind ${idx + 1}</p>
                            ${rows.join('')}
                        </div>
                    `;
                }).join('');

                document.getElementById('detailsModalBody').innerHTML = `
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <small class="text-muted">Leere Felder sind standardmäßig ausgeblendet.</small>
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge bg-light text-dark border" id="emptyFieldsCountBadge">${missingFieldsCount} ausgeblendete Felder</span>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="toggleEmptyFieldsBtn">Leere Felder anzeigen</button>
                        </div>
                    </div>
                    <div class="row g-3">
                        <div class="col-md-6">
                            <div class="card h-100 shadow-sm border-0" style="background: #f8f9fa;">
                                <div class="card-body py-3">
                                    <h6 class="mb-3"><i class="fas fa-user me-2 text-primary"></i>Persönliche Daten</h6>
                                    ${personalRows.join('')}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card h-100 shadow-sm border-0" style="background: #f8f9fa;">
                                <div class="card-body py-3">
                                    <h6 class="mb-3"><i class="fas fa-receipt me-2 text-primary"></i>Buchungsinfos</h6>
                                    ${bookingRows.join('')}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row g-3 mt-1">
                        <div class="col-md-6">
                            <div class="card h-100 shadow-sm border-0" style="background: #f8f9fa;">
                                <div class="card-body py-3">
                                    <h6 class="mb-3"><i class="fas fa-child me-2 text-primary"></i>Kind / Familie</h6>
                                    ${familyRows.join('')}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card h-100 shadow-sm border-0" style="background: #f8f9fa;">
                                <div class="card-body py-3">
                                    <h6 class="mb-3"><i class="fas fa-shield-alt me-2 text-primary"></i>Einwilligungen / Zusatz</h6>
                                    ${extraRows.join('')}
                                </div>
                            </div>
                        </div>
                    </div>
                    ${selectedDatesList ? `
                        <div class="card mt-3 shadow-sm border-0" style="background: #f8f9fa;">
                            <div class="card-body py-3">
                                <h6 class="mb-2">Gewählte Termine</h6>
                                <ul class="mb-0">${selectedDatesList}</ul>
                            </div>
                        </div>
                    ` : ''}
                    ${(booking.preExistingConditions || booking.allergiesMedications || booking.dietNotes) ? `
                        <div class="card mt-3 shadow-sm border-0" style="background: #f8f9fa;">
                            <div class="card-body py-3">
                                <h6 class="mb-2">Übermittelte Gesundheitsdaten</h6>
                                ${healthRows.join('')}
                            </div>
                        </div>
                    ` : ''}
                    ${siblingsCount > 0 ? `
                        <div class="card mt-3 shadow-sm border-0" style="background: #f8f9fa;">
                            <div class="card-body py-3">
                                <h6 class="mb-3"><i class="fas fa-child me-2 text-primary"></i>Geschwisterkinder (${siblingsCount})</h6>
                                ${siblingBlocks}
                            </div>
                        </div>
                    ` : ''}
                    ${booking.notes ? `
                        <div class="card mt-3 shadow-sm border-0" style="background: #f8f9fa;">
                            <div class="card-body py-3">
                                <h6 class="mb-2">Notizen</h6>
                                <p class="mb-0">${booking.notes}</p>
                            </div>
                        </div>
                    ` : ''}
                    ${booking.instructors && booking.instructors.length > 0 ? `
                        <div class="card mt-3">
                            <div class="card-body py-3">
                                <h6 class="mb-2">Zugewiesene Kursleiter (${booking.instructors.length}${booking.requiredInstructors ? ' / ' + booking.requiredInstructors : ''})</h6>
                                <div class="list-group">
                            ${booking.instructors.map(instructor => `
                                <div class="list-group-item d-flex justify-content-between align-items-center">
                                    <div>
                                        <strong>${instructor.firstName} ${instructor.lastName}</strong><br>
                                        <small class="text-muted"><i class="fas fa-envelope me-1"></i>${instructor.email}</small>
                                    </div>
                                    <button class="btn btn-sm btn-danger" onclick="removeInstructorFromCourse(${booking.courseId}, ${instructor.id}, '${instructor.firstName} ${instructor.lastName}')" title="Kursleiter entfernen">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>
                            `).join('')}
                                </div>
                            </div>
                        </div>
                    ` : ''}
                    <div class="card mt-3 border-primary border-opacity-25">
                        <div class="card-body py-3">
                            <h6 class="mb-2"><i class="fas fa-envelope me-2"></i>E-Mail erneut senden</h6>
                            <div class="d-flex flex-wrap gap-2">
                                <button type="button" class="btn btn-sm btn-outline-primary" onclick="resendBookingEmail(${booking.id}, 'confirmation')">Zahlungsinfo / Buchung</button>
                                <button type="button" class="btn btn-sm btn-outline-success" onclick="resendBookingEmail(${booking.id}, 'confirmed')">Zahlungsbestätigung</button>
                                <button type="button" class="btn btn-sm btn-outline-warning" onclick="resendBookingEmail(${booking.id}, 'waitlist')">Warteliste</button>
                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="resendBookingEmail(${booking.id}, 'reminder')">Erinnerung</button>
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="resendBookingEmail(${booking.id}, 'cancelled')">Stornierung</button>
                            </div>
                        </div>
                    </div>
                    <hr class="my-3">
                    <p class="text-muted mb-1"><small>Buchungs-Token: ${booking.bookingToken}</small></p>
                    <p class="text-muted"><small>Erstellt am: ${booking.createdAt}</small></p>
                `;

                const toggleBtn = document.getElementById('toggleEmptyFieldsBtn');
                const emptyRows = document.querySelectorAll('#detailsModalBody .empty-field');
                const badge = document.getElementById('emptyFieldsCountBadge');
                if (toggleBtn && emptyRows.length > 0) {
                    let isVisible = false;
                    toggleBtn.addEventListener('click', function() {
                        isVisible = !isVisible;
                        emptyRows.forEach(row => row.classList.toggle('d-none', !isVisible));
                        this.textContent = isVisible ? 'Leere Felder ausblenden' : 'Leere Felder anzeigen';
                    });
                } else if (toggleBtn) {
                    toggleBtn.classList.add('d-none');
                }
                if (badge && emptyRows.length === 0) {
                    badge.textContent = 'Keine ausgeblendeten Felder';
                }
                detailsModal.show();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showToast('Fehler beim Laden der Details', 'error');
        });
}

function changeStatus(bookingId) {
    const booking = bookingsData.find(b => b.id === bookingId);
    if (!booking) return;

    const newStatus = prompt('Neuer Status:\npending = Ausstehend\nconfirmed = Bestätigt\nwaitlist = Warteliste\ncancelled = Storniert', booking.status);
    
    if (!newStatus || newStatus === booking.status) return;

    fetch(`{{ path('admin_course_bookings_api_update_status', {id: '__ID__'}) }}`.replace('__ID__', bookingId), {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: newStatus })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('Status aktualisiert', 'success');
            loadBookings();
        } else {
            showToast('Fehler: ' + data.error, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Fehler beim Aktualisieren', 'error');
    });
}

function togglePayment(bookingId, paid) {
    fetch(`{{ path('admin_course_bookings_api_mark_paid', {id: '__ID__'}) }}`.replace('__ID__', bookingId), {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ paid: paid })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('Zahlungsstatus aktualisiert', 'success');
            loadBookings();
        } else {
            showToast('Fehler: ' + data.error, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Fehler beim Aktualisieren', 'error');
    });
}

function deleteBooking(bookingId) {
    if (!confirm('Buchung wirklich löschen?')) return;

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

function exportCsv() {
    const status = document.getElementById('statusFilter').value;
    const courseId = document.getElementById('courseFilter').value;
    let url = '{{ path('admin_course_bookings_export_csv') }}?status=' + encodeURIComponent(status);
    if (courseId) {
        url += '&course=' + encodeURIComponent(courseId);
    }
    window.location.href = url;
}

function resendBookingEmail(bookingId, type) {
    if (!confirm('E-Mail wirklich erneut senden?')) return;
    fetch(`{{ path('admin_course_bookings_api_resend_email', {id: '__ID__'}) }}`.replace('__ID__', bookingId), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ type: type })
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) showToast(data.message || 'E-Mail eingeplant', 'success');
        else showToast('Fehler: ' + (data.error || 'Unbekannt'), 'error');
    })
    .catch(() => showToast('Fehler beim Senden', 'error'));
}

function showToast(message, type = 'info') {
    // Simple toast notification
    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);
}

function removeInstructorFromCourse(courseId, instructorId, instructorName) {
    if (!confirm(`Möchten Sie ${instructorName} wirklich von diesem Kurs entfernen?\n\nHinweis: Dies entfernt den Kursleiter vom gesamten Kurs, nicht nur von dieser Buchung.`)) {
        return;
    }

    fetch('{{ path("admin_courses_remove_instructor") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ courseId: courseId, instructorId: instructorId })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showToast('Kursleiter erfolgreich entfernt', 'success');
            // Modal schließen und Tabelle neu laden
            detailsModal.hide();
            loadBookings();
        } else {
            showToast('Fehler: ' + data.error, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Fehler beim Entfernen des Kursleiters', 'error');
    });
}
</script>
{% endblock %}