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

{% block title %}Bewegungszentrum - Pakete verwalten{% endblock %}

{% block header_title %}Bewegungszentrum - Pakete{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* Stats Cards - wie Kursseite */
        .stats-card {
            background: white;
            border: 2px solid #e9ecef;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            transition: all 0.3s ease;
        }
        
        .stats-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border-color: #0d6efd;
        }
        
        .stats-card .card-body {
            padding: 1.5rem;
        }
        
        .stats-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #0d6efd;
        }
        
        .stats-label {
            color: #6c757d;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 500;
        }
        
        /* Package Cards */
        .package-card {
            background: white;
            transition: all 0.3s ease;
            border-radius: 0.75rem;
            overflow: hidden;
            border: 2px solid #e9ecef;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .package-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
            border-color: #0d6efd;
        }
        
        .package-header {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: white;
            padding: 1.25rem 1.5rem;
            position: relative;
        }
        
        .package-header h5 {
            margin: 0 0 0.25rem 0;
            font-size: 1.15rem;
            font-weight: 700;
            color: white;
            line-height: 1.3;
        }
        
        .package-header small {
            display: block;
            opacity: 0.9;
            font-size: 0.875rem;
            color: rgba(255, 255, 255, 0.95);
            margin-top: 0.25rem;
        }
        
        .package-header .badge {
            position: absolute;
            top: 1rem;
            right: 1.5rem;
            font-size: 0.75rem;
            padding: 0.35rem 0.75rem;
        }
        
        .package-body {
            padding: 1.5rem;
            background: #fff;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .detail-box {
            background: #f8f9fa;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1rem;
            border: 1px solid #e9ecef;
        }
        
        .detail-box:last-of-type {
            margin-bottom: 0;
        }
        
        .detail-box .detail-label {
            font-size: 0.75rem;
            text-transform: uppercase;
            color: #495057;
            font-weight: 700;
            letter-spacing: 0.5px;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
        }
        
        .detail-box .detail-label i {
            margin-right: 0.5rem;
            color: #0d6efd;
        }
        
        .detail-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            font-size: 0.925rem;
            border-bottom: 1px solid #e9ecef;
        }
        
        .detail-item:last-child {
            border-bottom: none;
        }
        
        .detail-item span {
            color: #495057;
            display: flex;
            align-items: center;
        }
        
        .detail-item strong {
            color: #2c3e50;
            font-weight: 700;
        }
        
        .detail-item i {
            color: #6c757d;
            font-size: 0.85rem;
            width: 18px;
            text-align: center;
        }
        
        .duration-item {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            padding: 0.75rem 1rem;
            border-radius: 0.375rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
            box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
            transition: all 0.2s ease;
        }
        
        .duration-item:hover {
            transform: translateX(3px);
            box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3);
        }
        
        .duration-item.inactive {
            opacity: 0.7;
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
        }
        
        .duration-info {
            flex: 1;
            color: white;
        }
        
        .duration-hours {
            font-size: 0.9rem;
            font-weight: 600;
            color: white;
        }
        
        .duration-price {
            font-size: 1.1rem;
            font-weight: 700;
            color: white;
        }
        
        .duration-actions {
            display: flex;
            gap: 0.5rem;
        }
        
        .duration-actions .btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.85rem;
            background: rgba(255,255,255,0.25);
            border: 1px solid rgba(255,255,255,0.4);
            color: white;
            transition: all 0.2s ease;
        }
        
        .duration-actions .btn:hover {
            background: rgba(255,255,255,0.35);
            border-color: rgba(255,255,255,0.6);
            transform: scale(1.05);
            color: white;
        }
        
        /* Buttons */
        .btn-gradient-primary {
            background: linear-gradient(135deg, var(--bs-primary) 0%, #0056b3 100%);
            border: none;
            color: white;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        
        .btn-gradient-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(13, 110, 253, 0.4);
            color: white;
        }
        
        .action-btn {
            transition: all 0.2s ease;
        }
        
        .action-btn:hover {
            transform: scale(1.1);
        }
        
        /* Modal Styles - wie Kursseite */
        .modal-header {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: white;
            border-bottom: none;
            padding: 1rem 1.5rem;
        }
        
        .modal-header .btn-close {
            filter: invert(1);
        }
        
        .modal-content {
            border: none;
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        
        .form-label {
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
        }
        
        .form-control, .form-select {
            border: 2px solid #e9ecef;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--bs-primary);
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
        }
        
        /* Success Modal */
        .success-modal .modal-header {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
        }
        
        .success-modal .modal-body {
            text-align: center;
            padding: 2rem;
        }
        
        .success-icon {
            font-size: 4rem;
            color: #28a745;
            margin-bottom: 1rem;
        }
        
        /* Confirm Modal */
        .confirm-modal .modal-header {
            background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
        }
        
        .confirm-modal .modal-body {
            padding: 2rem;
            text-align: center;
        }
        
        .confirm-icon {
            font-size: 3rem;
            color: #ffc107;
            margin-bottom: 1rem;
        }
        
        /* Error Modal */
        #errorModal .modal-header {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        }
    </style>
{% endblock %}

{% block content %}
    <div class="row mb-4">
        <div class="col">
            <h1 class="mb-1">
                <i class="fas fa-gift me-2 text-primary"></i>
                Bewegungszentrum - Pakete & Preise
            </h1>
            <p class="text-muted">Max. Kinderzahl und buchbare Dauern gelten nur für neue Buchungen. Bereits gebuchte Ehrentage behalten Stundenanzahl und Teilnehmer.</p>
        </div>
        <div class="col-auto">
            <button class="btn btn-gradient-primary btn-lg" onclick="openCreatePackageModal()">
                <i class="fas fa-plus me-2"></i>
                Neues Paket erstellen
            </button>
        </div>
    </div>

    <!-- Statistiken -->
    <div class="row mb-4">
        <div class="col-md-3 mb-3">
            <div class="stats-card">
                <div class="card-body text-center">
                    <div class="stats-number">{{ packages|length }}</div>
                    <div class="stats-label">Gesamt Pakete</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="stats-card">
                <div class="card-body text-center">
                    <div class="stats-number text-success">{{ packages|filter(p => p.isActive)|length }}</div>
                    <div class="stats-label">Aktive Pakete</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="stats-card">
                <div class="card-body text-center">
                    <div class="stats-number text-info">{{ packages|reduce((carry, p) => carry + p.durations|length, 0) }}</div>
                    <div class="stats-label">Konfigurierte Dauern</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="stats-card">
                <div class="card-body text-center">
                    <div class="stats-number text-warning">{{ packages|reduce((carry, p) => carry + p.bookings|length, 0) }}</div>
                    <div class="stats-label">Gesamt Buchungen</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pakete -->
    <div class="row">
        {% for package in packages %}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="package-card">
                <div class="package-header">
                    {% if package.isActive %}
                        <span class="badge bg-success">Aktiv</span>
                    {% else %}
                        <span class="badge bg-secondary">Inaktiv</span>
                    {% endif %}
                    <h5>{{ package.name }}</h5>
                    <small>{{ package.displayName }}</small>
                </div>
                
                <div class="package-body">
                    <!-- Details Box -->
                    <div class="detail-box mb-3">
                        <div class="detail-label">
                            <i class="fas fa-info-circle"></i>
                            Paket-Details
                        </div>
                        <div class="detail-item">
                            <span><i class="fas fa-users"></i> Max. Kinder</span>
                            <strong>{{ package.maxChildren }}</strong>
                        </div>
                        <div class="detail-item">
                            <span><i class="fas fa-user-friends"></i> Mitarbeiter</span>
                            <strong>{{ package.staffRequired }} MA</strong>
                        </div>
                        <div class="detail-item">
                            <span><i class="fas fa-child"></i> Altersgruppe</span>
                            <strong>{{ package.ageGroup == 'bis_6' ? 'bis 6 Jahre' : 'ab 7 Jahre' }}</strong>
                        </div>
                        {% if package.bookings|length > 0 %}
                        <div class="detail-item">
                            <span><i class="fas fa-calendar-check"></i> Buchungen</span>
                            <button type="button" class="btn btn-sm btn-link p-0 align-baseline" onclick="loadAndShowPackageBookings({{ package.id }})">
                                {{ package.bookings|length }} anzeigen / verwalten
                            </button>
                        </div>
                        {% endif %}
                    </div>
                    
                    {% if package.description %}
                    <div class="detail-box mb-3">
                        <div class="detail-label">
                            <i class="fas fa-file-alt"></i>
                            Beschreibung
                        </div>
                        <p class="mb-0 text-dark" style="font-size: 0.9rem; line-height: 1.5;">{{ package.description }}</p>
                    </div>
                    {% endif %}
                    
                    <!-- Dauern & Preise -->
                    <div class="mb-3 flex-grow-1">
                        <div class="detail-label mb-2" style="color: #495057; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center;">
                            <i class="fas fa-clock me-2" style="color: #0d6efd;"></i>
                            Verfügbare Dauern & Preise
                        </div>
                        {% if package.durations|length > 0 %}
                            <div style="display: flex; flex-direction: column; gap: 0.5rem;">
                                {% for duration in package.durations %}
                                    <div class="duration-item {% if not duration.isActive %}inactive{% endif %}">
                                        <div class="duration-info">
                                            <div class="duration-hours">{{ duration.formattedDuration }}</div>
                                            <div class="duration-price">{{ duration.formattedPrice }}</div>
                                        </div>
                                        <div class="duration-actions">
                                            <button class="btn btn-sm" 
                                                    onclick="editDuration({{ duration.id }}, {{ package.id }}, '{{ duration.durationHours }}', '{{ duration.price }}', {{ duration.isActive ? 'true' : 'false' }})"
                                                    title="Bearbeiten">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn btn-sm" 
                                                    onclick="deleteDuration({{ duration.id }})"
                                                    title="Löschen">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% else %}
                            <div class="alert alert-light mb-0 text-center" style="font-size: 0.875rem; padding: 0.75rem; border: 1px solid #e9ecef; background: #f8f9fa;">
                                <i class="fas fa-info-circle me-2" style="color: #6c757d;"></i>
                                <span style="color: #6c757d;">Keine Dauern konfiguriert</span>
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Actions -->
                    <div class="mt-auto pt-3" style="border-top: 2px solid #e9ecef; margin-top: auto;">
                        <div class="d-flex justify-content-between align-items-center gap-2">
                            <button class="btn btn-sm btn-primary flex-grow-1" onclick="addDurationToPackage({{ package.id }})" style="font-weight: 600;">
                                <i class="fas fa-plus me-1"></i> Dauer hinzufügen
                            </button>
                            <button class="btn btn-sm btn-outline-primary" onclick="editPackage({{ package.id }})" title="Paket bearbeiten">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger" onclick="deletePackage({{ package.id }})" title="Paket löschen">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% else %}
        <div class="col-12">
            <div class="alert alert-info text-center">
                <i class="fas fa-info-circle me-2"></i>
                Noch keine Pakete vorhanden. Erstellen Sie Ihr erstes Paket!
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Modal: Paket erstellen/bearbeiten -->
<div class="modal fade" id="packageModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="packageModalTitle">Neues Paket erstellen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="packageForm">
                    <input type="hidden" id="packageId">
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="packageName" class="form-label">Paketname *</label>
                            <input type="text" class="form-control" id="packageName" required>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="packageSize" class="form-label">Paketgröße *</label>
                            <select class="form-select" id="packageSize" required>
                                <option value="">Bitte wählen...</option>
                                <option value="klein">Kleines Paket</option>
                                <option value="gross">Großes Paket</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="ageGroup" class="form-label">Altersgruppe *</label>
                            <select class="form-select" id="ageGroup" required>
                                <option value="">Bitte wählen...</option>
                                <option value="bis_6">Bis 6 Jahre</option>
                                <option value="ab_7">Ab 7 Jahre</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="maxChildren" class="form-label">Max. Anzahl Kinder *</label>
                            <input type="number" class="form-control" id="maxChildren" min="1" required>
                            <div class="form-text">Nur für zukünftige Buchungen. Bestehende Buchungen bleiben unverändert.</div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="staffRequired" class="form-label">Benötigte Mitarbeiter *</label>
                            <input type="number" class="form-control" id="staffRequired" min="1" max="5" required>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="isActive" class="form-label">Status</label>
                            <select class="form-select" id="isActive">
                                <option value="true">Aktiv</option>
                                <option value="false">Inaktiv</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">Beschreibung (optional)</label>
                        <textarea class="form-control" id="description" rows="3"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="inquiryNote" class="form-label">Hinweis unter den Paketangaben</label>
                        <textarea class="form-control" id="inquiryNote" rows="2" placeholder="Individuelle Anfragen können Sie gerne an folgende Mailadresse stellen: bz@ksb-dueren.de"></textarea>
                        <div class="form-text">Wird auf der öffentlichen Paketseite angezeigt. Identischer Text auf mehreren Paketen erscheint nur einmal.</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-gradient-primary" onclick="savePackage()">Speichern</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Dauer hinzufügen/bearbeiten -->
<div class="modal fade" id="durationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="durationModalTitle">Dauer hinzufügen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="durationForm">
                    <input type="hidden" id="durationId">
                    <input type="hidden" id="durationPackageId">
                    
                    <div class="mb-3">
                        <label for="durationHours" class="form-label">Dauer (Stunden) *</label>
                        <input type="number" class="form-control" id="durationHours" min="0.1" max="12" step="0.1" required>
                        <div class="form-text">Beliebige Dauer, z.&nbsp;B. 2,5. Für neue Buchungen über Status aktiv/inaktiv steuern, nicht löschen.</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="price" class="form-label">Preis (€) *</label>
                        <input type="number" class="form-control" id="price" step="0.01" min="0" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="durationActive" class="form-label">Status</label>
                        <select class="form-select" id="durationActive">
                            <option value="true">Aktiv (neue Buchungen)</option>
                            <option value="false">Inaktiv (nur bestehende Buchungen)</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-gradient-primary" onclick="saveDuration()">Speichern</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Success Message -->
<div class="modal fade success-modal" id="successModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-check-circle me-2"></i>
                    Erfolgreich
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="success-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <p id="successMessage" class="mb-0 fs-5"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Confirm Action -->
<div class="modal fade confirm-modal" id="confirmModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    Bestätigung erforderlich
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <div class="confirm-icon">
                    <i class="fas fa-question-circle"></i>
                </div>
                <p id="confirmMessage" class="mb-0 fs-5"></p>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-warning" id="confirmActionBtn">Bestätigen</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Error Message -->
<div class="modal fade" id="errorModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    Fehler
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" style="filter: invert(1) brightness(2);"></button>
            </div>
            <div class="modal-body text-center py-4">
                <div style="font-size: 3rem; color: #dc3545; margin-bottom: 1rem;">
                    <i class="fas fa-times-circle"></i>
                </div>
                <p id="errorMessage" class="mb-0 fs-5"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Schließen</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Buchungen zu diesem Paket (bei Löschblockade / Anzeige) -->
<div class="modal fade" id="packageBookingsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-calendar-check me-2"></i>
                    <span id="packageBookingsModalTitle">Buchungen zu diesem Paket</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="packageBookingsModalIntro" class="text-muted mb-3">
                    Damit das Paket gelöscht werden kann, müssen alle Buchungen in der Buchungsübersicht einem anderen Paket zugewiesen werden. Stornieren reicht nicht aus – jede Buchung (auch stornierte) muss bearbeitet und auf ein anderes Paket/Dauer umgestellt werden.
                </p>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Datum</th>
                                <th>Uhrzeit</th>
                                <th>Geburtstagskind</th>
                                <th>Erziehungsberechtigter</th>
                                <th>Status</th>
                                <th>Aktionen</th>
                            </tr>
                        </thead>
                        <tbody id="packageBookingsTableBody">
                        </tbody>
                    </table>
                </div>
                <p class="mt-3 mb-0 small text-muted">
                    <i class="fas fa-info-circle me-1"></i>
                    <strong>Bearbeiten</strong> öffnet die Buchungsübersicht (Buchung anderem Paket zuweisen). <strong>Stornieren</strong> setzt nur den Status. <strong>Löschen</strong> entfernt die Buchung endgültig inkl. Outlook-Termin. Wenn keine Buchung mehr dieses Paket verwendet, kann das Paket gelöscht werden.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
                <button type="button" class="btn btn-primary" id="packageBookingsRefreshBtn">
                    <i class="fas fa-sync-alt me-1"></i>Liste aktualisieren
                </button>
                <button type="button" class="btn btn-danger" id="packageBookingsRetryDeleteBtn">
                    <i class="fas fa-trash me-1"></i>Paket erneut löschen
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Dauer wird noch von Buchungen verwendet -->
<div class="modal fade" id="durationBookingsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-clock me-2"></i>
                    <span id="durationBookingsModalTitle">Dauer wird noch verwendet</span>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="durationBookingsModalIntro" class="text-muted mb-3"></p>
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Datum</th>
                                <th>Uhrzeit</th>
                                <th>Geburtstagskind</th>
                                <th>Erziehungsberechtigter</th>
                                <th>Status</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="durationBookingsTableBody">
                        </tbody>
                    </table>
                </div>
                <p class="mt-3 mb-0 small text-muted">
                    <i class="fas fa-info-circle me-1"></i>
                    Weisen Sie die Buchungen in der <strong>Buchungsübersicht</strong> einer anderen Dauer zu. Danach kann diese Dauer gelöscht werden.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
                <a href="#" id="durationBookingsPageLink" class="btn btn-primary">
                    <i class="fas fa-external-link-alt me-1"></i>Buchungsübersicht öffnen
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Modal: Buchung bearbeiten (aus Paket-Buchungsliste) -->
<div class="modal fade" id="bookingEditModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-edit me-2"></i>
                    Termin bearbeiten
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="editBookingId">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label">Datum</label>
                        <input type="date" class="form-control" id="editSelectedDate" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Startzeit</label>
                        <input type="time" class="form-control" id="editSelectedStartTime" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Endzeit</label>
                        <input type="time" class="form-control" id="editSelectedEndTime" required>
                    </div>
                    <div class="col-12"><hr class="my-2"><h6 class="text-primary">Erziehungsberechtigter</h6></div>
                    <div class="col-md-6">
                        <label class="form-label">Vorname</label>
                        <input type="text" class="form-control" id="editParentFirstName" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Nachname</label>
                        <input type="text" class="form-control" id="editParentLastName" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">E-Mail</label>
                        <input type="email" class="form-control" id="editParentEmail" required>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Telefon</label>
                        <input type="text" class="form-control" id="editParentPhone">
                    </div>
                    <div class="col-12"><hr class="my-2"><h6 class="text-primary">Geburtstagskind</h6></div>
                    <div class="col-md-4">
                        <label class="form-label">Vorname</label>
                        <input type="text" class="form-control" id="editChildFirstName" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Nachname</label>
                        <input type="text" class="form-control" id="editChildLastName" required>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Alter</label>
                        <input type="number" class="form-control" id="editChildAge" min="1" max="18" required>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Anzahl Kinder</label>
                        <input type="number" class="form-control" id="editTotalChildren" min="1" required>
                    </div>
                    <div class="col-12"><hr class="my-2"><h6 class="text-primary">Buchung</h6></div>
                    <div class="col-md-6">
                        <label class="form-label">Paket</label>
                        <select class="form-select" id="editPackageId" required>
                            <option value="">Bitte wählen</option>
                            {% for p in packagesForEdit %}
                                <option value="{{ p.id }}">{{ p.displayName }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Dauer / Preis</label>
                        <select class="form-select" id="editDurationId" required>
                            <option value="">Zuerst Paket wählen</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Status</label>
                        <select class="form-select" id="editStatus">
                            <option value="unter_vorbehalt">Unter Vorbehalt</option>
                            <option value="gebucht">Gebucht</option>
                            <option value="storniert">Storniert</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Anmerkungen</label>
                        <textarea class="form-control" id="editNotes" rows="2"></textarea>
                    </div>
                </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="saveBookingEditBtn">
                    <i class="fas fa-save me-1"></i>Speichern
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let packageModal;
let durationModal;
let successModal;
let confirmModal;
let errorModal;
let packageBookingsModal;
let durationBookingsModal;
let bookingEditModal;
let pendingAction = null;
let packageBookingsCurrentId = null;
let durationBookingsCurrentId = null;

// Symfony-generierte URL-Basen (ohne IDs)
const URL_BASE = '{{ app.request.baseUrl }}';
const PACKAGES_FOR_EDIT = {{ packagesForEdit|json_encode|raw }};

function getPackageUrl(id) {
    return URL_BASE + '/admin/event-center/packages/' + id;
}

function getPackageEditUrl(id) {
    return URL_BASE + '/admin/event-center/packages/' + id + '/edit';
}

function getPackageDeleteUrl(id) {
    return URL_BASE + '/admin/event-center/packages/' + id + '/delete';
}

function getDurationAddUrl(packageId) {
    return URL_BASE + '/admin/event-center/packages/' + packageId + '/durations/add';
}

function getDurationEditUrl(id) {
    return URL_BASE + '/admin/event-center/durations/' + id + '/edit';
}

function getDurationDeleteUrl(id) {
    return URL_BASE + '/admin/event-center/durations/' + id + '/delete';
}

function getDurationBookingsUrl(durationId) {
    return URL_BASE + '/admin/event-center/durations/' + durationId + '/bookings';
}

function getPackageBookingsUrl(packageId) {
    return URL_BASE + '/admin/event-center/packages/' + packageId + '/bookings';
}

function getBookingStatusUrl(bookingId) {
    return URL_BASE + '/admin/event-center/bookings/' + bookingId + '/status';
}

function getBookingDeleteUrl(bookingId) {
    return URL_BASE + '/admin/event-center/bookings/' + bookingId + '/delete';
}

function getBookingShowUrl(bookingId) {
    return URL_BASE + '/admin/event-center/bookings/' + bookingId;
}

function getBookingUpdateUrl(bookingId) {
    return URL_BASE + '/admin/event-center/bookings/' + bookingId;
}

function getBookingsPageUrl(packageId) {
    return packageId ? (URL_BASE + '/admin/event-center/bookings?package=' + packageId) : (URL_BASE + '/admin/event-center/bookings');
}

const URLS = {
    packageCreate: '{{ path('admin_event_center_package_create') }}'
};

// Helper Functions for Modals
function showSuccessModal(message) {
    document.getElementById('successMessage').textContent = message;
    successModal.show();
    
    // Auto-reload after 1.5 seconds
    setTimeout(() => {
        successModal.hide();
        location.reload();
    }, 1500);
}

function showErrorModal(message) {
    document.getElementById('errorMessage').textContent = message;
    errorModal.show();
}

function showConfirmModal(message, onConfirm) {
    document.getElementById('confirmMessage').textContent = message;
    pendingAction = onConfirm;
    confirmModal.show();
}

// Warte bis DOM geladen ist
document.addEventListener('DOMContentLoaded', function() {
    packageModal = new bootstrap.Modal(document.getElementById('packageModal'));
    durationModal = new bootstrap.Modal(document.getElementById('durationModal'));
    successModal = new bootstrap.Modal(document.getElementById('successModal'));
    confirmModal = new bootstrap.Modal(document.getElementById('confirmModal'));
    errorModal = new bootstrap.Modal(document.getElementById('errorModal'));
    packageBookingsModal = new bootstrap.Modal(document.getElementById('packageBookingsModal'));
    durationBookingsModal = new bootstrap.Modal(document.getElementById('durationBookingsModal'));
    bookingEditModal = new bootstrap.Modal(document.getElementById('bookingEditModal'));

    document.getElementById('editPackageId').addEventListener('change', function() {
        var pkgId = parseInt(this.value, 10);
        var durSel = document.getElementById('editDurationId');
        durSel.innerHTML = '<option value="">Bitte wählen</option>';
        if (!pkgId) return;
        var pkg = (PACKAGES_FOR_EDIT || []).find(function(p) { return p.id === pkgId; });
        if (pkg && pkg.durations) {
            pkg.durations.forEach(function(d) {
                var opt = document.createElement('option');
                opt.value = d.id;
                opt.textContent = d.displayText;
                durSel.appendChild(opt);
            });
        }
    });
    document.getElementById('saveBookingEditBtn').addEventListener('click', saveBookingEditInPackageModal);
    document.getElementById('bookingEditModal').addEventListener('hidden.bs.modal', function() {
        if (packageBookingsCurrentId) { loadAndShowPackageBookings(packageBookingsCurrentId); }
        else if (durationBookingsCurrentId) { loadAndShowDurationBookings(durationBookingsCurrentId); }
    });

    document.getElementById('packageBookingsRefreshBtn').addEventListener('click', function() {
        if (packageBookingsCurrentId) loadAndShowPackageBookings(packageBookingsCurrentId);
    });
    document.getElementById('packageBookingsRetryDeleteBtn').addEventListener('click', function() {
        if (packageBookingsCurrentId) retryDeletePackage(packageBookingsCurrentId);
    });
    
    // Confirm Button Handler
    document.getElementById('confirmActionBtn').addEventListener('click', function() {
        if (pendingAction) {
            confirmModal.hide();
            pendingAction();
            pendingAction = null;
        }
    });
    
    // Verhindere Formular-Submit
    document.getElementById('packageForm').addEventListener('submit', function(e) {
        e.preventDefault();
        savePackage();
    });
    
    document.getElementById('durationForm').addEventListener('submit', function(e) {
        e.preventDefault();
        saveDuration();
    });
});

function openCreatePackageModal() {
    document.getElementById('packageModalTitle').textContent = 'Neues Paket erstellen';
    document.getElementById('packageForm').reset();
    document.getElementById('packageId').value = '';
    packageModal.show();
}

function editPackage(packageId) {
    fetch(getPackageUrl(packageId))
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const pkg = data.package;
                document.getElementById('packageModalTitle').textContent = 'Paket bearbeiten';
                document.getElementById('packageId').value = pkg.id;
                document.getElementById('packageName').value = pkg.name;
                document.getElementById('packageSize').value = pkg.packageSize;
                document.getElementById('ageGroup').value = pkg.ageGroup;
                document.getElementById('maxChildren').value = pkg.maxChildren;
                document.getElementById('staffRequired').value = pkg.staffRequired;
                document.getElementById('description').value = pkg.description || '';
                document.getElementById('inquiryNote').value = pkg.inquiryNote || '';
                document.getElementById('isActive').value = pkg.isActive ? 'true' : 'false';
                packageModal.show();
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showErrorModal('Fehler beim Laden des Pakets');
        });
}

function savePackage() {
    const packageId = document.getElementById('packageId').value;
    const isEdit = packageId !== '';
    
    const data = {
        name: document.getElementById('packageName').value,
        packageSize: document.getElementById('packageSize').value,
        ageGroup: document.getElementById('ageGroup').value,
        maxChildren: parseInt(document.getElementById('maxChildren').value),
        staffRequired: parseInt(document.getElementById('staffRequired').value),
        description: document.getElementById('description').value,
        inquiryNote: document.getElementById('inquiryNote').value,
        isActive: document.getElementById('isActive').value === 'true'
    };
    
    const url = isEdit 
        ? getPackageEditUrl(packageId)
        : URLS.packageCreate;
    const method = isEdit ? 'PUT' : 'POST';
    
    fetch(url, {
        method: method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            packageModal.hide();
            showSuccessModal(result.message);
        } else {
            showErrorModal('Fehler: ' + result.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorModal('Fehler beim Speichern des Pakets');
    });
}

function deletePackage(packageId) {
    showConfirmModal('Möchten Sie dieses Paket wirklich löschen?', function() {
        fetch(getPackageDeleteUrl(packageId), {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                showSuccessModal(result.message);
            } else if (result.bookings && result.bookings.length > 0) {
                showPackageBookingsModal(result.packageId, result.packageName, result.bookings);
            } else {
                showErrorModal('Fehler: ' + result.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showErrorModal('Fehler beim Löschen des Pakets');
        });
    });
}

// Buchungsnamen stammen aus dem öffentlichen Formular und sind reiner Text.
function escapeBookingText(value) {
    var element = document.createElement('span');
    element.textContent = value == null ? '' : String(value);
    return element.innerHTML;
}

function showPackageBookingsModal(packageId, packageName, bookings) {
    packageBookingsCurrentId = packageId;
    durationBookingsCurrentId = null;
    document.getElementById('packageBookingsModalTitle').textContent = 'Buchungen zu: ' + (packageName || 'Paket');
    var tbody = document.getElementById('packageBookingsTableBody');
    var bookingStatusBadgeClass = { 'unter_vorbehalt': 'warning', 'gebucht': 'success', 'storniert': 'secondary' };
    tbody.innerHTML = bookings.map(function(b) {
        var badgeClass = bookingStatusBadgeClass[b.status] || 'secondary';
        return '<tr data-booking-id="' + b.id + '">' +
            '<td>' + escapeBookingText((b.selectedDate || '')) + '</td>' +
            '<td>' + escapeBookingText((b.selectedStartTime || '')) + '</td>' +
            '<td>' + escapeBookingText((b.childName || '')) + '</td>' +
            '<td>' + escapeBookingText((b.parentName || '')) + '</td>' +
            '<td><span class="badge bg-' + badgeClass + '">' + escapeBookingText((b.statusLabel || b.status)) + '</span></td>' +
            '<td>' +
            '<button type="button" class="btn btn-sm btn-outline-primary me-1" onclick="editBookingFromPackageModal(' + b.id + ', ' + packageId + ')" title="Termin bearbeiten"><i class="fas fa-edit"></i></button>' +
            (b.status !== 'storniert' ? '<button type="button" class="btn btn-sm btn-outline-warning me-1" onclick="cancelBookingFromPackageModal(' + b.id + ', ' + packageId + ')" title="Stornieren"><i class="fas fa-ban"></i></button>' : '') +
            '<button type="button" class="btn btn-sm btn-outline-danger" onclick="deleteBookingFromPackageModal(' + b.id + ', ' + packageId + ')" title="Buchung endgültig löschen"><i class="fas fa-trash"></i></button>' +
            '</td></tr>';
    }).join('');
    packageBookingsModal.show();
}

function loadAndShowPackageBookings(packageId) {
    fetch(getPackageBookingsUrl(packageId))
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success && data.bookings) {
                showPackageBookingsModal(data.packageId, data.packageName, data.bookings);
            } else {
                showErrorModal('Buchungen konnten nicht geladen werden.');
            }
        })
        .catch(function() {
            showErrorModal('Fehler beim Laden der Buchungen.');
        });
}

function cancelBookingFromPackageModal(bookingId, packageId) {
    if (!confirm('Diese Buchung wirklich stornieren?')) return;
    fetch(getBookingStatusUrl(bookingId), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: 'storniert' })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            loadAndShowPackageBookings(packageId);
        } else {
            showErrorModal(data.error || 'Stornierung fehlgeschlagen.');
        }
    })
    .catch(function() {
        showErrorModal('Fehler beim Stornieren.');
    });
}

function deleteBookingFromPackageModal(bookingId, packageId) {
    if (!confirm('Diese Buchung wirklich endgültig löschen? Die Buchung und der zugehörige Outlook-Termin werden entfernt. Dieser Vorgang kann nicht rückgängig gemacht werden.')) return;
    fetch(getBookingDeleteUrl(bookingId), {
        method: 'DELETE'
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            loadAndShowPackageBookings(packageId);
        } else {
            showErrorModal(data.error || 'Löschen fehlgeschlagen.');
        }
    })
    .catch(function() {
        showErrorModal('Fehler beim Löschen der Buchung.');
    });
}

function editBookingFromPackageModal(bookingId, packageId) {
    packageBookingsCurrentId = packageId;
    fetch(getBookingShowUrl(bookingId))
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (!data.success || !data.booking) {
                showErrorModal('Buchung konnte nicht geladen werden.');
                return;
            }
            var b = data.booking;
            document.getElementById('editBookingId').value = b.id;
            document.getElementById('editSelectedDate').value = b.selectedDate || '';
            document.getElementById('editSelectedStartTime').value = b.selectedStartTime || '';
            document.getElementById('editSelectedEndTime').value = b.selectedEndTime || '';
            document.getElementById('editParentFirstName').value = b.parentFirstName || '';
            document.getElementById('editParentLastName').value = b.parentLastName || '';
            document.getElementById('editParentEmail').value = b.parentEmail || '';
            document.getElementById('editParentPhone').value = b.parentPhone || '';
            document.getElementById('editChildFirstName').value = b.childFirstName || '';
            document.getElementById('editChildLastName').value = b.childLastName || '';
            document.getElementById('editChildAge').value = b.childAge ?? '';
            document.getElementById('editTotalChildren').value = b.totalChildren ?? '';
            document.getElementById('editNotes').value = b.notes || '';
            document.getElementById('editStatus').value = b.status || 'unter_vorbehalt';
            document.getElementById('editPackageId').value = b.packageId || '';
            document.getElementById('editPackageId').dispatchEvent(new Event('change'));
            setTimeout(function() {
                document.getElementById('editDurationId').value = b.durationId || '';
            }, 50);
            packageBookingsModal.hide();
            bookingEditModal.show();
        })
        .catch(function() {
            showErrorModal('Fehler beim Laden der Buchung.');
        });
}

function saveBookingEditInPackageModal() {
    var id = document.getElementById('editBookingId').value;
    if (!id) return;
    var payload = {
        selectedDate: document.getElementById('editSelectedDate').value,
        selectedStartTime: document.getElementById('editSelectedStartTime').value,
        selectedEndTime: document.getElementById('editSelectedEndTime').value,
        parentFirstName: document.getElementById('editParentFirstName').value.trim(),
        parentLastName: document.getElementById('editParentLastName').value.trim(),
        parentEmail: document.getElementById('editParentEmail').value.trim(),
        parentPhone: document.getElementById('editParentPhone').value.trim(),
        childFirstName: document.getElementById('editChildFirstName').value.trim(),
        childLastName: document.getElementById('editChildLastName').value.trim(),
        childAge: parseInt(document.getElementById('editChildAge').value, 10) || 0,
        totalChildren: parseInt(document.getElementById('editTotalChildren').value, 10) || 1,
        notes: document.getElementById('editNotes').value.trim() || null,
        status: document.getElementById('editStatus').value,
        packageId: parseInt(document.getElementById('editPackageId').value, 10) || null,
        durationId: parseInt(document.getElementById('editDurationId').value, 10) || null
    };
    fetch(getBookingUpdateUrl(id), {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.success) {
            bookingEditModal.hide();
            // Liste wird durch hidden.bs.modal-Handler wieder geöffnet
        } else {
            showErrorModal(data.error || 'Speichern fehlgeschlagen.');
        }
    })
    .catch(function() {
        showErrorModal('Fehler beim Speichern.');
    });
}

function retryDeletePackage(packageId) {
    fetch(getPackageDeleteUrl(packageId), { method: 'DELETE' })
        .then(function(r) { return r.json(); })
        .then(function(result) {
            if (result.success) {
                packageBookingsModal.hide();
                showSuccessModal(result.message);
            } else if (result.bookings && result.bookings.length > 0) {
                showPackageBookingsModal(result.packageId, result.packageName, result.bookings);
            } else {
                showErrorModal('Fehler: ' + result.error);
            }
        })
        .catch(function() {
            showErrorModal('Fehler beim Löschen des Pakets');
        });
}

function addDurationToPackage(packageId) {
    document.getElementById('durationModalTitle').textContent = 'Dauer hinzufügen';
    document.getElementById('durationForm').reset();
    document.getElementById('durationId').value = '';
    document.getElementById('durationPackageId').value = packageId;
    durationModal.show();
}

function editDuration(durationId, packageId, hours, price, isActive) {
    document.getElementById('durationModalTitle').textContent = 'Dauer bearbeiten';
    document.getElementById('durationId').value = durationId;
    document.getElementById('durationPackageId').value = packageId;
    document.getElementById('durationHours').value = hours;
    document.getElementById('price').value = price;
    document.getElementById('durationActive').value = isActive ? 'true' : 'false';
    durationModal.show();
}

function saveDuration() {
    const durationId = document.getElementById('durationId').value;
    const packageId = document.getElementById('durationPackageId').value;
    const isEdit = durationId !== '';
    
    const data = {
        durationHours: document.getElementById('durationHours').value,
        price: document.getElementById('price').value,
        isActive: document.getElementById('durationActive').value === 'true'
    };
    
    const url = isEdit 
        ? getDurationEditUrl(durationId)
        : getDurationAddUrl(packageId);
    const method = isEdit ? 'PUT' : 'POST';
    
    fetch(url, {
        method: method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            durationModal.hide();
            showSuccessModal(result.message);
        } else {
            showErrorModal('Fehler: ' + result.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorModal('Fehler beim Speichern der Dauer');
    });
}

function deleteDuration(durationId) {
    showConfirmModal('Möchten Sie diese Dauer wirklich löschen?', function() {
        fetch(getDurationDeleteUrl(durationId), {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(result => {
            if (result.success) {
                showSuccessModal(result.message);
            } else if (result.bookings && result.bookings.length > 0) {
                showDurationBookingsModal(result.error, result.durationLabel, result.bookings, result.durationId);
            } else {
                showErrorModal('Fehler: ' + result.error);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showErrorModal('Fehler beim Löschen der Dauer');
        });
    });
}

function showDurationBookingsModal(errorMessage, durationLabel, bookings, durationId) {
    durationBookingsCurrentId = durationId || null;
    packageBookingsCurrentId = null;
    document.getElementById('durationBookingsModalTitle').textContent = 'Dauer wird noch verwendet' + (durationLabel ? ': ' + durationLabel : '');
    document.getElementById('durationBookingsModalIntro').textContent = errorMessage || 'Diese Dauer wird noch von Buchungen verwendet.';
    var tbody = document.getElementById('durationBookingsTableBody');
    var bookingStatusBadgeClass = { 'unter_vorbehalt': 'warning', 'gebucht': 'success', 'storniert': 'secondary' };
    tbody.innerHTML = bookings.map(function(b) {
        var badgeClass = bookingStatusBadgeClass[b.status] || 'secondary';
        return '<tr>' +
            '<td>' + escapeBookingText((b.selectedDate || '')) + '</td>' +
            '<td>' + escapeBookingText((b.selectedStartTime || '')) + '</td>' +
            '<td>' + escapeBookingText((b.childName || '')) + '</td>' +
            '<td>' + escapeBookingText((b.parentName || '')) + '</td>' +
            '<td><span class="badge bg-' + badgeClass + '">' + escapeBookingText((b.statusLabel || b.status)) + '</span></td>' +
            '<td><button type="button" class="btn btn-sm btn-outline-primary" onclick="editBookingFromDurationModal(' + b.id + ', ' + (durationId || 0) + ')" title="Termin bearbeiten"><i class="fas fa-edit"></i></button></td></tr>';
    }).join('');
    document.getElementById('durationBookingsPageLink').href = getBookingsPageUrl();
    durationBookingsModal.show();
}

function editBookingFromDurationModal(bookingId, durationId) {
    packageBookingsCurrentId = null;
    durationBookingsCurrentId = durationId;
    fetch(getBookingShowUrl(bookingId))
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (!data.success || !data.booking) {
                showErrorModal('Buchung konnte nicht geladen werden.');
                return;
            }
            var b = data.booking;
            document.getElementById('editBookingId').value = b.id;
            document.getElementById('editSelectedDate').value = b.selectedDate || '';
            document.getElementById('editSelectedStartTime').value = b.selectedStartTime || '';
            document.getElementById('editSelectedEndTime').value = b.selectedEndTime || '';
            document.getElementById('editParentFirstName').value = b.parentFirstName || '';
            document.getElementById('editParentLastName').value = b.parentLastName || '';
            document.getElementById('editParentEmail').value = b.parentEmail || '';
            document.getElementById('editParentPhone').value = b.parentPhone || '';
            document.getElementById('editChildFirstName').value = b.childFirstName || '';
            document.getElementById('editChildLastName').value = b.childLastName || '';
            document.getElementById('editChildAge').value = b.childAge ?? '';
            document.getElementById('editTotalChildren').value = b.totalChildren ?? '';
            document.getElementById('editNotes').value = b.notes || '';
            document.getElementById('editStatus').value = b.status || 'unter_vorbehalt';
            document.getElementById('editPackageId').value = b.packageId || '';
            document.getElementById('editPackageId').dispatchEvent(new Event('change'));
            setTimeout(function() {
                document.getElementById('editDurationId').value = b.durationId || '';
            }, 50);
            durationBookingsModal.hide();
            bookingEditModal.show();
        })
        .catch(function() {
            showErrorModal('Fehler beim Laden der Buchung.');
        });
}

function loadAndShowDurationBookings(durationId) {
    fetch(getDurationBookingsUrl(durationId))
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success && data.bookings) {
                showDurationBookingsModal(
                    data.count === 0 ? 'Keine Buchungen mehr mit dieser Dauer.' : 'Diese Dauer wird noch von folgenden Buchungen verwendet.',
                    data.durationLabel,
                    data.bookings,
                    data.durationId
                );
            }
        })
        .catch(function() {
            showErrorModal('Fehler beim Laden der Buchungen.');
        });
}
</script>
{% endblock %}