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

{% block title %}Bewegungszentrum - Buchungen{% endblock %}

{% block header_title %}Bewegungszentrum - Buchungen{% 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;
        }
        
        .stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            line-height: 1;
            color: #0d6efd;
        }
        
        .stat-label {
            color: #6c757d;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 0.5rem;
            font-weight: 500;
        }
        
        /* Table Container - wie Kursseite */
        .booking-table-container {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            overflow: hidden;
        }
        
        .table-header {
            background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
            color: white;
            padding: 1rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .table-header h5 {
            font-weight: 600;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            margin: 0;
        }
        
        .filter-pills .btn {
            border-radius: 50px;
            padding: 0.5rem 1.5rem;
            margin: 0 0.25rem;
            transition: all 0.2s ease;
            font-weight: 500;
            font-size: 0.875rem;
        }
        
        .filter-pills .btn.active {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
        }
        
        /* Tabellen-Styles wie Kursseite */
        .table {
            margin-bottom: 0;
        }
        
        .table thead.table-light th {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border: none;
            padding: 1rem 0.75rem;
            font-weight: 600;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: #2c3e50;
        }
        .table thead th.sortable {
            cursor: pointer;
            user-select: none;
        }
        .table thead th.sortable:hover {
            background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
        }
        .table thead th .sort-icon {
            opacity: 0.5;
        }
        .table thead th.sort-asc .sort-icon,
        .table thead th.sort-desc .sort-icon {
            opacity: 1;
        }
        
        .booking-row {
            border-bottom: 1px solid #e9ecef;
            transition: all 0.2s ease;
        }
        
        .booking-row:hover {
            background-color: #f8f9fa;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .booking-row td {
            padding: 1rem 0.75rem;
            vertical-align: middle;
            border: none;
        }
        
        .booking-row:last-child {
            border-bottom: none;
        }
        
        .status-badge {
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-weight: 500;
            font-size: 0.75rem;
        }
        
        .action-button {
            transition: all 0.2s ease;
        }
        
        .action-button: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);
        }
        
        .detail-row {
            border-bottom: 1px solid #e9ecef;
            padding: 0.75rem 0;
        }
        
        .detail-row:last-child {
            border-bottom: none;
        }
        
        .detail-label {
            font-weight: 600;
            color: #6c757d;
            font-size: 0.85rem;
        }
        
        .detail-value {
            color: #2c3e50;
            font-size: 1rem;
        }
        
        /* 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;
        }

        /* Period Tabs (Aktuell / Vergangen) */
        #bookingPeriodTabs {
            border-bottom: 1px solid #dfe5ec;
            gap: 0.5rem;
        }

        #bookingPeriodTabs .nav-item {
            margin-bottom: -1px;
        }

        #bookingPeriodTabs .nav-link {
            border: 1px solid #dfe5ec;
            border-bottom: none;
            border-radius: 0.75rem 0.75rem 0 0;
            background: #f6f8fb;
            color: #4f5d6b;
            font-weight: 600;
            padding: 0.65rem 1.1rem;
            transition: all 0.2s ease;
        }

        #bookingPeriodTabs .nav-link:hover {
            background: #eef3f8;
            color: #2c3e50;
            border-color: #cfd8e3;
        }

        #bookingPeriodTabs .nav-link.active {
            background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
            color: #ffffff;
            border-color: #0284c7;
            box-shadow: 0 4px 10px rgba(2, 132, 199, 0.25);
        }

        .booking-search-wrap {
            max-width: 420px;
        }
        
        /* 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-calendar-check me-2 text-primary"></i>
                Bewegungszentrum - Buchungen
            </h1>
            <p class="text-muted">Verwalten Sie alle Buchungen für das Bewegungszentrum</p>
        </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="stat-number">{{ stats.total }}</div>
                    <div class="stat-label">Gesamt Buchungen</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="stats-card">
                <div class="card-body text-center">
                    <div class="stat-number text-warning">{{ stats.unter_vorbehalt }}</div>
                    <div class="stat-label">Unter Vorbehalt</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="stats-card">
                <div class="card-body text-center">
                    <div class="stat-number text-success">{{ stats.gebucht }}</div>
                    <div class="stat-label">Bestätigt</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="stats-card">
                <div class="card-body text-center">
                    <div class="stat-number text-info">{{ stats.upcoming }}</div>
                    <div class="stat-label">Kommende</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filter & Tabelle -->
    <div class="booking-table-container">
        <div class="table-header">
            <h5 class="mb-0">Alle Buchungen</h5>
            <div class="d-flex align-items-center gap-2">
                <button type="button" class="btn btn-sm btn-success" id="createBookingBtn" title="Geburtstag manuell anlegen">
                    <i class="fas fa-plus me-1"></i>Geburtstag manuell anlegen
                </button>
                {% if hasOutlookSync %}
                    <button id="syncOutlookBtn" class="btn btn-sm btn-outline-light" title="Outlook-Kalender synchronisieren">
                        <i class="fas fa-sync-alt"></i> Outlook synchronisieren
                    </button>
                    <a href="{{ path('admin_event_center_bookings_export_csv', {status: currentStatus}) }}" 
                       class="btn btn-sm btn-outline-light" 
                       title="Buchungen als CSV exportieren">
                        <i class="fas fa-download"></i> CSV Export
                    </a>
                    <a href="{{ path('admin_outlook_import_test') }}" class="btn btn-sm btn-outline-light" title="Outlook-Events debuggen">
                        <i class="fas fa-bug"></i> Events prüfen
                    </a>
                {% endif %}
                <div class="filter-pills">
                    <a href="{{ path('admin_event_center_bookings', {status: 'all'}) }}" 
                       class="btn btn-sm {% if currentStatus == 'all' %}btn-light active{% else %}btn-outline-light{% endif %}">
                        Alle
                    </a>
                    <a href="{{ path('admin_event_center_bookings', {status: 'unter_vorbehalt'}) }}" 
                       class="btn btn-sm {% if currentStatus == 'unter_vorbehalt' %}btn-warning active{% else %}btn-outline-light{% endif %}">
                        Unter Vorbehalt
                    </a>
                    <a href="{{ path('admin_event_center_bookings', {status: 'gebucht'}) }}" 
                       class="btn btn-sm {% if currentStatus == 'gebucht' %}btn-success active{% else %}btn-outline-light{% endif %}">
                        Gebucht
                    </a>
                    <a href="{{ path('admin_event_center_bookings', {status: 'storniert'}) }}" 
                       class="btn btn-sm {% if currentStatus == 'storniert' %}btn-danger active{% else %}btn-outline-light{% endif %}">
                        Storniert
                    </a>
                </div>
            </div>
        </div>

        <div class="px-3 pt-3">
            <ul class="nav nav-tabs" id="bookingPeriodTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="activeBookingsTab" type="button" data-period-tab="active">
                        Aktuelle Buchungen ({{ activeBookingsCount }})
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pastBookingsTab" type="button" data-period-tab="past">
                        Vergangene Buchungen ({{ pastBookingsCount }})
                    </button>
                </li>
            </ul>
        </div>
        <div class="px-3 py-2 border-bottom bg-light">
            <div class="booking-search-wrap">
                <div class="input-group input-group-sm">
                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                    <input
                        type="text"
                        class="form-control"
                        id="bookingSearchInput"
                        placeholder="Im aktuellen Tab suchen (Name, E-Mail, Paket, Datum ...)"
                        autocomplete="off"
                    >
                    <button class="btn btn-outline-secondary" type="button" id="clearBookingSearchBtn" title="Suche leeren">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th class="sortable sort-asc" data-sort="0" data-type="date" title="Nach Datum sortieren">
                            Datum <i class="fas fa-sort-up ms-1 sort-icon"></i>
                        </th>
                        <th class="sortable" data-sort="1" data-type="time" title="Nach Uhrzeit sortieren">
                            Uhrzeit <i class="fas fa-sort ms-1 sort-icon"></i>
                        </th>
                        <th class="sortable" data-sort="2" data-type="text" title="Nach Geburtstagskind sortieren">
                            Geburtstagskind <i class="fas fa-sort ms-1 sort-icon"></i>
                        </th>
                        <th class="sortable" data-sort="3" data-type="text" title="Nach Erziehungsberechtigter sortieren">
                            Erziehungsberechtigter <i class="fas fa-sort ms-1 sort-icon"></i>
                        </th>
                        <th class="sortable" data-sort="4" data-type="text" title="Nach Paket sortieren">
                            Paket <i class="fas fa-sort ms-1 sort-icon"></i>
                        </th>
                        <th class="sortable" data-sort="5" data-type="text" title="Nach Dauer/Preis sortieren">
                            Dauer/Preis <i class="fas fa-sort ms-1 sort-icon"></i>
                        </th>
                        <th class="sortable" data-sort="6" data-type="num" title="Nach Personal sortieren">
                            Personal <i class="fas fa-sort ms-1 sort-icon"></i>
                        </th>
                        <th class="sortable" data-sort="7" data-type="text" title="Nach Status sortieren">
                            Status <i class="fas fa-sort ms-1 sort-icon"></i>
                        </th>
                        <th>Aktionen</th>
                    </tr>
                </thead>
                <tbody id="bookingsTableBody">
                    {% for booking in bookings %}
                    <tr class="booking-row" data-booking-id="{{ booking.id }}" data-period="{{ pastBookingIds[booking.id] ? 'past' : 'active' }}">
                        <td data-sort="{{ booking.selectedDate|date('Y-m-d') }} {{ booking.selectedStartTime|date('H:i') }}">
                            <strong>{{ booking.selectedDate|date('d.m.Y') }}</strong>
                        </td>
                        <td data-sort="{{ booking.selectedStartTime|date('H:i') }}">
                            {{ booking.selectedStartTime|date('H:i') }} - {{ booking.selectedEndTime|date('H:i') }}
                        </td>
                        <td data-sort="{{ (booking.childLastName ~ ' ' ~ booking.childFirstName)|lower }}">
                            <strong>{{ booking.childFirstName }} {{ booking.childLastName }}</strong><br>
                            <small class="text-muted">
                                {{ booking.childAge }} Jahre
                                {% if booking.childGender %} | {{ booking.childGender|replace({'maennlich':'Männlich','weiblich':'Weiblich','divers':'Divers'}) }}{% endif %}
                            </small>
                        </td>
                        <td data-sort="{{ (booking.parentLastName ~ ' ' ~ booking.parentFirstName)|lower }}">
                            {{ booking.parentFirstName }} {{ booking.parentLastName }}<br>
                            <small class="text-muted">
                                <i class="fas fa-envelope me-1"></i>{{ booking.parentEmail }}<br>
                                <i class="fas fa-phone me-1"></i>{{ booking.parentPhone }}
                            </small>
                        </td>
                        <td data-sort="{{ booking.eventPackage.displayName|lower }}">
                            <small>{{ booking.eventPackage.displayName }}</small>
                        </td>
                        <td data-sort="{{ booking.duration.durationHours }}">
                            <strong>{{ booking.duration.formattedDuration }}</strong><br>
                            <small class="text-success">{{ booking.duration.formattedPrice }}</small>
                        </td>
                        {% set activeStaffMembers = booking.activeStaffMembers %}
                        {% set registeredStaff = activeStaffMembers|length %}
                        {% set requiredStaff = booking.eventPackage.staffRequired %}
                        <td data-sort="{{ registeredStaff }}">
                            <span class="{% if registeredStaff < requiredStaff %}text-danger{% else %}text-success{% endif %}">
                                <i class="fas fa-user-friends me-1"></i>
                                <strong>{{ registeredStaff }} / {{ requiredStaff }}</strong>
                            </span>
                            {% if registeredStaff < requiredStaff %}
                                <i class="fas fa-exclamation-triangle text-warning ms-1" title="Personal fehlt"></i>
                            {% endif %}
                            <br>
                            <small class="text-muted">
                                {% for staff in activeStaffMembers %}
                                    {{ staff.firstName }} {{ staff.lastName|slice(0, 1) }}.<br>
                                {% endfor %}
                            </small>
                        </td>
                        <td data-sort="{{ booking.status }}">
                            <span class="status-badge bg-{{ booking.statusBadgeClass }}">
                                {{ booking.statusLabel }}
                            </span>
                        </td>
                        <td>
                            <button class="btn btn-sm btn-outline-primary action-button" 
                                    onclick="viewBooking({{ booking.id }})"
                                    title="Details anzeigen">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-secondary action-button" 
                                    onclick="editBooking({{ booking.id }})"
                                    title="Buchung bearbeiten">
                                <i class="fas fa-edit"></i>
                            </button>
                            {% if booking.status == 'unter_vorbehalt' %}
                                <button class="btn btn-sm btn-outline-success action-button" 
                                        onclick="confirmBooking({{ booking.id }})"
                                        title="Bestätigen">
                                    <i class="fas fa-check"></i>
                                </button>
                            {% endif %}
                            {% if booking.status != 'storniert' %}
                                <button class="btn btn-sm btn-outline-danger action-button" 
                                        onclick="cancelBooking({{ booking.id }})"
                                        title="Stornieren">
                                    <i class="fas fa-times"></i>
                                </button>
                            {% endif %}
                            {% if hasOutlookSync and booking.status != 'storniert' %}
                                <button class="btn btn-sm btn-outline-info action-button" 
                                        onclick="syncBookingOutlook({{ booking.id }})"
                                        title="{% if booking.outlookEventId %}Outlook-Termin aktualisieren{% else %}Outlook-Termin anlegen{% endif %}">
                                    <i class="fas fa-sync-alt"></i>
                                </button>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="9" class="text-center py-5 text-muted">
                            <i class="fas fa-inbox fa-3x mb-3 d-block"></i>
                            Keine Buchungen vorhanden
                        </td>
                        
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div id="bookingPeriodEmptyState" class="text-center py-4 text-muted d-none">
            Für diesen Bereich sind keine Buchungen vorhanden.
        </div>
    </div>
</div>

<!-- Modal: Buchungsdetails -->
<div class="modal fade" id="bookingDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-file-alt me-2"></i>
                    Buchungsdetails
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="bookingDetailContent">
                <!-- Wird dynamisch gefüllt -->
            </div>
            <div class="modal-footer">
                {% if hasOutlookSync %}
                <button type="button" class="btn btn-outline-info d-none" id="syncBookingOutlookBtn">
                    <i class="fas fa-sync-alt me-1"></i>Outlook synchronisieren
                </button>
                {% endif %}
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
            </div>

        </div>
    </div>
</div>

<!-- Modal: Buchung bearbeiten / manuell anlegen -->
<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" id="bookingEditModalTitle">
                    <i class="fas fa-edit me-2"></i>
                    Buchung 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-12"><h6 class="text-primary mb-2"><i class="fas fa-calendar-check me-1"></i>Termin</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-4">
                        <label class="form-label">Datum</label>
                        <input type="date" class="form-control" id="editSelectedDate" required>
                        <small class="text-muted">Buchbar nur Freitag, Samstag, Sonntag</small>
                        <span id="editDateError" class="text-danger small d-none"></span>
                    </div>
                    <div class="col-md-4 edit-time-wrap">
                        <label class="form-label">Startzeit</label>
                        <input type="time" class="form-control" id="editSelectedStartTime">
                    </div>
                    <div class="col-md-4 edit-time-wrap">
                        <label class="form-label">Endzeit</label>
                        <input type="time" class="form-control" id="editSelectedEndTime">
                    </div>
                    <div class="col-md-4 create-time-wrap d-none">
                        <label class="form-label">Startzeit</label>
                        <select class="form-select" id="editStartTimeSlot">
                            <option value="">— Zuerst Paket, Dauer und Datum wählen —</option>
                        </select>
                        <small class="text-muted">Nur freie Zeiten (Fr 13:30–21:30, Sa–So 9:30–21:30)</small>
                    </div>
                    <div class="col-md-4 create-time-wrap d-none">
                        <label class="form-label">Endzeit</label>
                        <div class="form-control-plaintext" id="editEndTimeDisplay">—</div>
                    </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-3">
                        <label class="form-label">Vorname</label>
                        <input type="text" class="form-control" id="editChildFirstName" required>
                    </div>
                    <div class="col-md-3">
                        <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">Geschlecht</label>
                        <select class="form-select" id="editChildGender" required>
                            <option value="">Bitte wählen</option>
                            <option value="weiblich">Weiblich</option>
                            <option value="maennlich">Männlich</option>
                            <option value="divers">Divers</option>
                        </select>
                    </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">Sonstiges</h6></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><span id="saveBookingEditBtnText">Speichern</span>
                </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>

<script>
let bookingDetailModal;
let successModal;
let confirmModal;
let errorModal;
let bookingEditModal;
let pendingAction = null;
let currentPeriodFilter = 'active';
let currentSearchQuery = '';

// Symfony-generierte URL-Basen
const URL_BASE = '{{ app.request.baseUrl }}';

// Pakete mit Dauern für Bearbeitungs-Modal
const PACKAGES_FOR_EDIT = {{ packagesForEdit|json_encode|raw }};

// Kursleiter für Geburtstags-Buchungen (wird beim Laden gefüllt)
let EVENT_CENTER_INSTRUCTORS = [];

// Tabellen-Sortierung (Standard: Datum aufsteigend)
(function initTableSort() {
    const tbody = document.getElementById('bookingsTableBody');
    const thead = tbody && tbody.closest('table') && tbody.closest('table').querySelector('thead');
    if (!tbody || !thead) return;

    let sortCol = 0;
    let sortAsc = true;

    function getSortValue(cell) {
        const val = (cell && cell.getAttribute('data-sort')) || (cell && cell.textContent) || '';
        return String(val).trim();
    }

    function sortTable() {
        const rows = Array.from(tbody.querySelectorAll('tr.booking-row'));
        const type = thead.querySelector('th[data-sort="' + sortCol + '"]')?.getAttribute('data-type') || 'text';
        rows.sort(function(a, b) {
            const cellA = a.cells[sortCol];
            const cellB = b.cells[sortCol];
            let va = getSortValue(cellA);
            let vb = getSortValue(cellB);
            if (type === 'date' || type === 'time') {
                return sortAsc ? (va.localeCompare(vb)) : (vb.localeCompare(va));
            }
            if (type === 'num') {
                const na = parseFloat(va) || 0;
                const nb = parseFloat(vb) || 0;
                return sortAsc ? (na - nb) : (nb - na);
            }
            va = va.toLowerCase();
            vb = vb.toLowerCase();
            return sortAsc ? va.localeCompare(vb) : vb.localeCompare(va);
        });
        rows.forEach(function(row) { tbody.appendChild(row); });
    }

    function updateHeaderIcons() {
        thead.querySelectorAll('th.sortable').forEach(function(th, idx) {
            const icon = th.querySelector('.sort-icon');
            if (!icon) return;
            icon.className = 'fas ms-1 sort-icon ' + (idx === sortCol ? (sortAsc ? 'fa-sort-up' : 'fa-sort-down') : 'fa-sort');
            th.classList.toggle('sort-asc', idx === sortCol && sortAsc);
            th.classList.toggle('sort-desc', idx === sortCol && !sortAsc);
        });
    }

    thead.querySelectorAll('th.sortable').forEach(function(th) {
        th.addEventListener('click', function() {
            const col = parseInt(th.getAttribute('data-sort'), 10);
            if (col === sortCol) sortAsc = !sortAsc; else { sortCol = col; sortAsc = true; }
            sortTable();
            updateHeaderIcons();
        });
    });

    sortTable();
    updateHeaderIcons();
})();

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

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

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

function getBookingSyncOutlookUrl(id) {
    return URL_BASE + '/admin/event-center/bookings/' + id + '/sync-outlook';
}

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

function editBooking(bookingId) {
    fetch(getBookingShowUrl(bookingId))
        .then(function(response) { return response.json(); })

        .then(function(data) {
            if (!data.success || !data.booking) {
                showErrorModal('Buchung konnte nicht geladen werden.');
                return;
            }
            const 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('editChildGender').value = b.childGender || '';
            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);

            document.getElementById('bookingEditModalTitle').innerHTML = '<i class="fas fa-edit me-2"></i>Buchung bearbeiten';
            document.getElementById('saveBookingEditBtnText').textContent = 'Speichern';
            document.getElementById('editSelectedDate').removeAttribute('min');
            document.getElementById('editDateError').classList.add('d-none');
            document.querySelectorAll('.create-time-wrap').forEach(function(el) { el.classList.add('d-none'); });
            document.querySelectorAll('.edit-time-wrap').forEach(function(el) { el.classList.remove('d-none'); });
            bookingEditModal.show();
        })
        .catch(function() {
            showErrorModal('Fehler beim Laden der Buchung.');
        });
}

function saveBookingEdit() {
    const id = document.getElementById('editBookingId').value;
    const isCreate = !id;
    const startTime = isCreate
        ? document.getElementById('editStartTimeSlot').value
        : document.getElementById('editSelectedStartTime').value;
    if (isCreate && !startTime) {
        showErrorModal('Bitte wählen Sie Datum, Dauer und eine freie Startzeit.');
        return;
    }
    const payload = {
        selectedDate: document.getElementById('editSelectedDate').value,
        selectedStartTime: startTime,
        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(),
        childGender: document.getElementById('editChildGender').value || null,
        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
    };
    if (!payload.childGender) {
        showErrorModal('Bitte wählen Sie das Geschlecht des Geburtstagskindes.');
        return;
    }
    if (!isCreate) {
        payload.selectedEndTime = document.getElementById('editSelectedEndTime').value;
    }

    const url = isCreate ? getBookingCreateUrl() : getBookingUpdateUrl(id);
    const method = isCreate ? 'POST' : 'PUT';

    fetch(url, {
        method: method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
    })
    .then(function(response) { return response.json(); })
    .then(function(data) {
        if (data.success) {
            bookingEditModal.hide();
            showSuccessModal(data.message || (data.outlookUpdated ? 'Buchung und Outlook-Termin wurden aktualisiert.' : 'Buchung wurde gespeichert.'));
        } else {
            showErrorModal(data.error || 'Speichern fehlgeschlagen.');
        }
    })
    .catch(function() {
        showErrorModal('Fehler beim Speichern.');
    });
}

// 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();
}

function applyBookingPeriodFilter(period) {
    currentPeriodFilter = period;
    applyCombinedBookingFilters();
}

function applyCombinedBookingFilters() {
    const rows = Array.from(document.querySelectorAll('#bookingsTableBody tr.booking-row'));
    const emptyState = document.getElementById('bookingPeriodEmptyState');
    let visibleCount = 0;

    rows.forEach(function(row) {
        const rowPeriod = row.getAttribute('data-period');
        const rowText = (row.textContent || '').toLowerCase();
        const matchesSearch = !currentSearchQuery || rowText.includes(currentSearchQuery);
        const shouldShow = rowPeriod === currentPeriodFilter && matchesSearch;
        row.classList.toggle('d-none', !shouldShow);
        if (shouldShow) visibleCount++;
    });

    if (emptyState) {
        emptyState.classList.toggle('d-none', visibleCount > 0);
    }

    document.querySelectorAll('[data-period-tab]').forEach(function(btn) {
        btn.classList.toggle('active', btn.getAttribute('data-period-tab') === currentPeriodFilter);
    });
}

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

    document.querySelectorAll('[data-period-tab]').forEach(function(btn) {
        btn.addEventListener('click', function() {
            applyBookingPeriodFilter(btn.getAttribute('data-period-tab'));
        });
    });
    const bookingSearchInput = document.getElementById('bookingSearchInput');
    const clearBookingSearchBtn = document.getElementById('clearBookingSearchBtn');
    if (bookingSearchInput) {
        bookingSearchInput.addEventListener('input', function() {
            currentSearchQuery = bookingSearchInput.value.trim().toLowerCase();
            applyCombinedBookingFilters();
        });
    }
    if (clearBookingSearchBtn && bookingSearchInput) {
        clearBookingSearchBtn.addEventListener('click', function() {
            bookingSearchInput.value = '';
            currentSearchQuery = '';
            applyCombinedBookingFilters();
            bookingSearchInput.focus();
        });
    }
    applyBookingPeriodFilter(currentPeriodFilter);

    // Kursleiter-Liste für Geburtstags-Buchungen laden
    fetch(URL_BASE + '/admin/event-center/instructors')
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.success && data.instructors) {
                EVENT_CENTER_INSTRUCTORS = data.instructors;
            }
        })
        .catch(function() {});

    // Geburtstag manuell anlegen: Modal leeren und als Anlegen öffnen
    document.getElementById('createBookingBtn').addEventListener('click', function() {
        document.getElementById('editBookingId').value = '';
        document.getElementById('editSelectedDate').value = '';
        var today = new Date();
        var todayStr = today.toISOString().slice(0, 10);
        var maxDate = new Date(today);
        maxDate.setMonth(maxDate.getMonth() + 4);
        var maxStr = maxDate.toISOString().slice(0, 10);
        document.getElementById('editSelectedDate').setAttribute('min', todayStr);
        document.getElementById('editSelectedDate').setAttribute('max', maxStr);
        document.getElementById('editSelectedStartTime').value = '';
        document.getElementById('editSelectedEndTime').value = '';
        document.getElementById('editDateError').classList.add('d-none');
        document.getElementById('editDateError').textContent = '';
        document.querySelectorAll('.edit-time-wrap').forEach(function(el) { el.classList.add('d-none'); });
        document.querySelectorAll('.create-time-wrap').forEach(function(el) { el.classList.remove('d-none'); });
        var slotSel = document.getElementById('editStartTimeSlot');
        slotSel.innerHTML = '<option value="">— Zuerst Paket, Dauer und Datum wählen —</option>';
        slotSel.disabled = false;
        document.getElementById('editEndTimeDisplay').textContent = '—';
        document.getElementById('editParentFirstName').value = '';
        document.getElementById('editParentLastName').value = '';
        document.getElementById('editParentEmail').value = '';
        document.getElementById('editParentPhone').value = '';
        document.getElementById('editChildFirstName').value = '';
        document.getElementById('editChildLastName').value = '';
        document.getElementById('editChildGender').value = '';
        document.getElementById('editChildAge').value = '';
        document.getElementById('editTotalChildren').value = '1';
        document.getElementById('editNotes').value = '';
        document.getElementById('editStatus').value = 'unter_vorbehalt';
        document.getElementById('editPackageId').value = '';
        document.getElementById('editDurationId').innerHTML = '<option value="">Zuerst Paket wählen</option>';
        document.getElementById('bookingEditModalTitle').innerHTML = '<i class="fas fa-plus me-2"></i>Geburtstag manuell anlegen';
        document.getElementById('saveBookingEditBtnText').textContent = 'Anlegen';
        bookingEditModal.show();
    });

    // Paket-Wechsel: Dauer-Dropdown füllen
    document.getElementById('editPackageId').addEventListener('change', function() {
        const pkgId = parseInt(this.value, 10);
        const durSel = document.getElementById('editDurationId');
        durSel.innerHTML = '<option value="">Bitte wählen</option>';
        if (!pkgId) return;
        const pkg = (PACKAGES_FOR_EDIT || []).find(function(p) { return p.id === pkgId; });
        if (pkg && pkg.durations) {
            pkg.durations.forEach(function(d) {
                const opt = document.createElement('option');
                opt.value = d.id;
                opt.textContent = d.displayText;
                opt.setAttribute('data-minutes', String(d.durationMinutes || 0));
                durSel.appendChild(opt);
            });
        }
        loadAvailableSlotsForCreate();
    });

    // Create-Modus: Nur Fr/Sa/So erlauben
    document.getElementById('editSelectedDate').addEventListener('change', function() {
        if (document.getElementById('editBookingId').value) return;
        const val = this.value;
        const errEl = document.getElementById('editDateError');
        if (!val) { errEl.classList.add('d-none'); errEl.textContent = ''; loadAvailableSlotsForCreate(); return; }
        const d = new Date(val + 'T12:00:00');
        const day = d.getDay();
        if (day !== 0 && day !== 5 && day !== 6) {
            this.value = '';
            errEl.textContent = 'Buchbar nur Freitag, Samstag, Sonntag.';
            errEl.classList.remove('d-none');
            document.getElementById('editStartTimeSlot').innerHTML = '<option value="">— Zuerst Paket, Dauer und Datum wählen —</option>';
            document.getElementById('editEndTimeDisplay').textContent = '—';
        } else {
            errEl.classList.add('d-none');
            errEl.textContent = '';
            loadAvailableSlotsForCreate();
        }
    });

    document.getElementById('editDurationId').addEventListener('change', function() {
        loadAvailableSlotsForCreate();
        updateEndTimeDisplay();
    });

    document.getElementById('editStartTimeSlot').addEventListener('change', updateEndTimeDisplay);

    function loadAvailableSlotsForCreate() {
        if (document.getElementById('editBookingId').value) return;
        const dateVal = document.getElementById('editSelectedDate').value;
        const durationId = document.getElementById('editDurationId').value;
        const slotSel = document.getElementById('editStartTimeSlot');
        if (!dateVal || !durationId) {
            slotSel.innerHTML = '<option value="">— Zuerst Paket, Dauer und Datum wählen —</option>';
            document.getElementById('editEndTimeDisplay').textContent = '—';
            return;
        }
        const d = new Date(dateVal + 'T12:00:00');
        if (d.getDay() !== 0 && d.getDay() !== 5 && d.getDay() !== 6) {
            slotSel.innerHTML = '<option value="">— Nur Fr, Sa, So buchbar —</option>';
            return;
        }
        slotSel.innerHTML = '<option value="">Lade Zeiten…</option>';
        slotSel.disabled = true;
        fetch(URL_BASE + '/admin/event-center/bookings/available-slots', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ date: dateVal, durationId: parseInt(durationId, 10) })
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            slotSel.disabled = false;
            if (!data.success) {
                slotSel.innerHTML = '<option value="">Fehler beim Laden</option>';
                return;
            }
            const available = (data.slots || []).filter(function(s) { return s.available; });
            slotSel.innerHTML = '<option value="">— Startzeit wählen —</option>';
            available.forEach(function(s) {
                const opt = document.createElement('option');
                opt.value = s.time;
                opt.textContent = s.time + ' Uhr';
                slotSel.appendChild(opt);
            });
            if (available.length === 0) {
                slotSel.innerHTML = '<option value="">Keine freien Zeiten an diesem Tag</option>';
            }
            updateEndTimeDisplay();
        })
        .catch(function() {
            slotSel.disabled = false;
            slotSel.innerHTML = '<option value="">Fehler beim Laden</option>';
        });
    }

    function updateEndTimeDisplay() {
        const slotSel = document.getElementById('editStartTimeSlot');
        const durSel = document.getElementById('editDurationId');
        const displayEl = document.getElementById('editEndTimeDisplay');
        if (!slotSel.value || !durSel.value) { displayEl.textContent = '—'; return; }
        const opt = durSel.options[durSel.selectedIndex];
        const minutes = parseInt(opt.getAttribute('data-minutes') || '0', 10) || 0;
        const [h, m] = slotSel.value.split(':').map(Number);
        const end = new Date(1970, 0, 1, h, m + minutes, 0);
        displayEl.textContent = (String(end.getHours()).padStart(2, '0') + ':' + String(end.getMinutes()).padStart(2, '0')) + ' Uhr';
    }

    // Speichern-Button Bearbeitung
    document.getElementById('saveBookingEditBtn').addEventListener('click', saveBookingEdit);

    // Confirm Button Handler
    document.getElementById('confirmActionBtn').addEventListener('click', function() {
        if (pendingAction) {
            confirmModal.hide();
            pendingAction();
            pendingAction = null;
        }
    });
});

function viewBooking(bookingId) {
    fetch(getBookingShowUrl(bookingId))
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const booking = data.booking;
                const content = `
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-primary mb-3"><i class="fas fa-child me-2"></i>Geburtstagskind</h6>
                            <div class="detail-row">
                                <div class="detail-label">Name:</div>
                                <div class="detail-value">${booking.childName}</div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">Alter:</div>
                                <div class="detail-value">${booking.childAge} Jahre</div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">Geschlecht:</div>
                                <div class="detail-value">${booking.childGender === 'weiblich' ? 'Weiblich' : (booking.childGender === 'maennlich' ? 'Männlich' : (booking.childGender === 'divers' ? 'Divers' : '-'))}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-primary mb-3"><i class="fas fa-user me-2"></i>Erziehungsberechtigter</h6>
                            <div class="detail-row">
                                <div class="detail-label">Name:</div>
                                <div class="detail-value">${booking.parentName}</div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">E-Mail:</div>
                                <div class="detail-value">${booking.parentEmail}</div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">Telefon:</div>
                                <div class="detail-value">${booking.parentPhone}</div>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <h6 class="text-primary mb-3"><i class="fas fa-gift me-2"></i>Buchungsdetails</h6>
                            <div class="detail-row">
                                <div class="detail-label">Paket:</div>
                                <div class="detail-value">${booking.package}</div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">Dauer & Preis:</div>
                                <div class="detail-value">${booking.duration}</div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">Datum:</div>
                                <div class="detail-value">${booking.date}</div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">Uhrzeit:</div>
                                <div class="detail-value">${booking.startTime} - ${booking.endTime} Uhr</div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">Anzahl Kinder:</div>
                                <div class="detail-value">${booking.totalChildren}</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h6 class="text-primary mb-3"><i class="fas fa-info-circle me-2"></i>Status & System</h6>
                            <div class="detail-row">
                                <div class="detail-label">Status:</div>
                                <div class="detail-value">
                                    <span class="badge bg-${getStatusBadge(booking.status)}">${booking.statusLabel}</span>
                                </div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">Buchungsnummer:</div>
                                <div class="detail-value"><code>${booking.bookingToken}</code></div>
                            </div>
                            <div class="detail-row">
                                <div class="detail-label">Erstellt am:</div>
                                <div class="detail-value">${booking.createdAt}</div>
                            </div>
                            ${booking.confirmedAt ? `
                            <div class="detail-row">
                                <div class="detail-label">Bestätigt am:</div>
                                <div class="detail-value">${booking.confirmedAt}</div>
                            </div>
                            ` : ''}
                            ${booking.outlookEventId ? `
                            <div class="detail-row">
                                <div class="detail-label">Outlook Event ID:</div>
                                <div class="detail-value"><code>${booking.outlookEventId}</code></div>
                            </div>
                            ` : `
                            <div class="detail-row">
                                <div class="detail-label">Outlook-Termin:</div>
                                <div class="detail-value"><span class="badge bg-warning text-dark">Nicht synchronisiert</span></div>
                            </div>
                            `}

                            ${booking.staffToken ? `
                            <div class="detail-row">
                                <div class="detail-label">Staff-Anmeldelink:</div>
                                <div class="detail-value">
                                    <a href="${booking.staffUrl}" target="_blank" class="text-decoration-none">
                                        <i class="fas fa-external-link-alt me-1"></i>${booking.staffUrl}
                                    </a>
                                </div>
                            </div>
                            ` : ''}
                        </div>
                    </div>
                    <hr>
                    <h6 class="text-primary mb-3">
                        <i class="fas fa-user-tie me-2"></i>
                        Kursleiter / Betreuer (${booking.staffRegistered || 0} / ${booking.staffRequired})
                    </h6>
                    ${booking.staffMembers && booking.staffMembers.length > 0 ? `
                    <div class="staff-list mb-2">
                        ${booking.staffMembers.map(staff => {
                            const otherInstructors = (EVENT_CENTER_INSTRUCTORS || []).filter(i => i.id !== staff.instructorId);
                            const editOptions = otherInstructors.length ? otherInstructors.map(i => `<option value="${i.id}">${i.displayName}</option>`).join('') : '';
                            return `
                            <div class="detail-row staff-row${staff.isRegistered ? '' : ' opacity-75'}" style="background: #f8f9fa; padding: 0.75rem; border-radius: 0.375rem; margin-bottom: 0.5rem;">
                                <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                                    <div>
                                        <div class="detail-value" style="margin-bottom: 0.25rem;">
                                            ${staff.name}
                                            ${staff.isRegistered ? '<span class="badge bg-success ms-1">Zugewiesen</span>' : '<span class="badge bg-secondary ms-1">Abgemeldet</span>'}
                                        </div>
                                        <small class="text-muted">
                                            <i class="fas fa-envelope me-1"></i>${staff.email}
                                            ${staff.unregisteredAt ? `<br><i class="fas fa-sign-out-alt me-1"></i>Abgemeldet am ${staff.unregisteredAt}` : ''}
                                        </small>
                                    </div>
                                    <div class="d-flex align-items-center gap-2 flex-wrap">
                                        ${editOptions ? `
                                        <select class="form-select form-select-sm staff-edit-select" style="width: auto; max-width: 220px;" data-staff-id="${staff.id}" data-booking-id="${booking.id}" onchange="updateStaffInstructor(this)">
                                            <option value="">— Kursleiter wechseln —</option>
                                            ${editOptions}
                                        </select>
                                        ` : ''}
                                        <small class="text-muted">${staff.createdAt}</small>
                                        <button type="button" class="btn btn-sm btn-danger" data-booking-id="${booking.id}" data-staff-id="${staff.id}" data-staff-name="${(staff.name || '').replace(/"/g, '&quot;')}" onclick="removeStaffFromEvent(this)" title="Betreuer entfernen">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `; }).join('')}
                    </div>
                    ` : ''}
                    ${booking.staffAvailableSlots > 0 ? `
                    <div class="add-staff-row mb-2">
                        <label class="form-label small mb-1">Kursleiter hinzufügen (anhand der Anzahl: noch ${booking.staffAvailableSlots} frei)</label>
                        <div class="d-flex gap-2 align-items-center flex-wrap">
                            <select class="form-select form-select-sm" id="addStaffInstructorSelect-${booking.id}" style="max-width: 280px;">
                                <option value="">— Bitte wählen —</option>
                                ${(EVENT_CENTER_INSTRUCTORS || []).filter(i => !(booking.staffMembers || []).some(s => s.instructorId === i.id && s.isRegistered)).map(i => `<option value="${i.id}">${i.displayName}</option>`).join('')}
                            </select>
                            <button type="button" class="btn btn-sm btn-success" onclick="addStaffToBooking(${booking.id})">
                                <i class="fas fa-plus me-1"></i>Hinzufügen
                            </button>
                        </div>
                    </div>
                    ` : ''}
                    ${booking.notes ? `
                    <hr>
                    <h6 class="text-primary mb-3"><i class="fas fa-comment me-2"></i>Sonstige Anmerkungen</h6>
                    <p class="mb-0">${booking.notes}</p>
                    ` : ''}
                `;
                
                document.getElementById('bookingDetailContent').innerHTML = content;

                const syncBtn = document.getElementById('syncBookingOutlookBtn');
                if (syncBtn) {
                    if (booking.status !== 'storniert') {
                        syncBtn.classList.remove('d-none');
                        syncBtn.dataset.bookingId = booking.id;
                        syncBtn.innerHTML = booking.outlookEventId
                            ? '<i class="fas fa-sync-alt me-1"></i>Outlook aktualisieren'
                            : '<i class="fas fa-sync-alt me-1"></i>Outlook-Termin anlegen';
                    } else {
                        syncBtn.classList.add('d-none');
                        delete syncBtn.dataset.bookingId;
                    }
                }

                bookingDetailModal.show();
            } else {
                showErrorModal('Fehler beim Laden der Buchung');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showErrorModal('Fehler beim Laden der Buchung');
        });
}

function getStatusBadge(status) {
    switch(status) {
        case 'unter_vorbehalt': return 'warning';
        case 'gebucht': return 'success';
        case 'storniert': return 'danger';
        default: return 'secondary';
    }
}

function confirmBooking(bookingId) {
    showConfirmModal('Möchten Sie diese Buchung wirklich auf "Gebucht" setzen?\n\nHINWEIS: Der Outlook-Event wird auf "Beschäftigt" gesetzt.', function() {
        changeBookingStatus(bookingId, 'gebucht');
    });
}

function cancelBooking(bookingId) {
    showConfirmModal('Möchten Sie diese Buchung wirklich stornieren?', function() {
        changeBookingStatus(bookingId, 'storniert');
    });
}

// Outlook-Synchronisation
document.addEventListener('DOMContentLoaded', function() {
    const syncBtn = document.getElementById('syncOutlookBtn');
    if (syncBtn) {
        syncBtn.addEventListener('click', function() {
            syncOutlookEvents();
        });
    }

    const syncBookingBtn = document.getElementById('syncBookingOutlookBtn');
    if (syncBookingBtn) {
        syncBookingBtn.addEventListener('click', function() {
            const bookingId = this.dataset.bookingId;
            if (bookingId) {
                syncBookingOutlook(parseInt(bookingId, 10));
            }
        });
    }
});


function syncOutlookEvents() {
    const btn = document.getElementById('syncOutlookBtn');
    if (!btn) return;
    
    const originalHtml = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Synchronisiere...';
    
    fetch('{{ path("admin_event_center_bookings_sync_outlook") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
    })
    .then(response => response.json())
    .then(result => {
        btn.disabled = false;
        btn.innerHTML = originalHtml;
        
        if (result.success) {
            let message = result.message || 'Outlook-Events erfolgreich synchronisiert';
            
            // Zeige Details falls verfügbar
            if (result.details) {
                const details = result.details;
                message += '\n\n';
                message += `Gefunden: ${details.total}\n`;
                message += `Importiert: ${details.imported || 0}\n`;
                if (details.updated && details.updated > 0) {
                    message += `Aktualisiert: ${details.updated}\n`;
                }
                if (details.synced_to_outlook && details.synced_to_outlook > 0) {
                    message += `Zu Outlook synchronisiert: ${details.synced_to_outlook}\n`;
                }
                message += `Übersprungen: ${details.skipped || 0}`;
                
                if (details.errors && details.errors.length > 0) {
                    message += '\n\nFehler/Übersprungen (fehlerhafte Termine wurden übersprungen):\n' + details.errors.slice(0, 15).join('\n');
                    if (details.errors.length > 15) {
                        message += `\n... und ${details.errors.length - 15} weitere`;
                    }
                    message += '\n\nWeitere Details: var/log/prod.log (auf dem Server).';
                }
                
                // Zeige besondere Meldung wenn nichts importiert wurde
                if (details.total === 0) {
                    message += '\n\nKeine Events im ausgewählten Zeitraum gefunden.';
                } else if (details.imported === 0 && details.total > 0) {
                    message += '\n\nKeine Events wurden importiert. Mögliche Gründe:';
                    message += '\n- Events sind bereits importiert';
                    message += '\n- Events sind keine Bewegungszentrum-Termine';
                    message += '\n- Event-Daten konnten nicht geparst werden';
                    message += '\n\nBitte prüfe die Logs für Details.';
                }
            }
            
            // Verwende Alert für bessere Lesbarkeit bei vielen Details
            if (result.details && (result.details.errors.length > 0 || result.details.imported === 0)) {
                alert(message);
            } else {
                showSuccessModal(message);
            }
            
            // Reload nur wenn Events importiert, aktualisiert oder zu Outlook synchronisiert wurden
            if (result.details && (
                (result.details.imported && result.details.imported > 0) || 
                (result.details.updated && result.details.updated > 0) ||
                (result.details.synced_to_outlook && result.details.synced_to_outlook > 0)
            )) {
                setTimeout(() => {
                    window.location.reload();
                }, 2000);
            } else {
                // Zeige Info, dass keine Änderungen gemacht wurden
                setTimeout(() => {
                    // Optional: Seite neu laden um sicherzustellen, dass alles aktuell ist
                    // window.location.reload();
                }, 1000);
            }

        } else {
            let errMsg = result.message || 'Unbekannter Fehler';
            if (result.details && result.details.errors && result.details.errors.length > 0) {
                errMsg += '\n\n' + result.details.errors.slice(0, 5).join('\n');
                if (result.details.errors.length > 5) errMsg += '\n... (siehe var/log/prod.log)';
            }
            showErrorModal(errMsg);
        }
    })
    .catch(error => {
        btn.disabled = false;
        btn.innerHTML = originalHtml;
        console.error('Error:', error);
        showErrorModal('Fehler beim Synchronisieren: ' + error.message);
    });
}

function syncBookingOutlook(bookingId) {
    if (!bookingId) return;

    fetch(getBookingSyncOutlookUrl(bookingId), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            showSuccessModal(result.message || 'Outlook-Synchronisation erfolgreich.');
            setTimeout(() => window.location.reload(), 1500);
        } else {
            showErrorModal(result.error || 'Outlook-Synchronisation fehlgeschlagen.');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorModal('Fehler bei der Outlook-Synchronisation: ' + error.message);
    });
}

function changeBookingStatus(bookingId, newStatus) {
    fetch(getBookingStatusUrl(bookingId), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ status: newStatus })
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            showSuccessModal(result.message);
        } else {
            showErrorModal('Fehler: ' + result.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorModal('Fehler beim Ändern des Status');
    });
}

function addStaffToBooking(bookingId) {
    const sel = document.getElementById('addStaffInstructorSelect-' + bookingId);
    if (!sel || !sel.value) {
        showErrorModal('Bitte wählen Sie einen Kursleiter aus.');
        return;
    }
    fetch('{{ path("admin_event_center_add_staff") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ bookingId: parseInt(bookingId, 10), instructorId: parseInt(sel.value, 10) })
    })
    .then(function(r) { return r.json(); })
    .then(function(result) {
        if (result.success) {
            viewBooking(bookingId);
        } else {
            showErrorModal(result.error || 'Hinzufügen fehlgeschlagen.');
        }
    })
    .catch(function() {
        showErrorModal('Fehler beim Hinzufügen.');
    });
}

function updateStaffInstructor(selectEl) {
    const staffId = selectEl.getAttribute('data-staff-id');
    const bookingId = selectEl.getAttribute('data-booking-id');
    const instructorId = selectEl.value;
    if (!instructorId) return;
    fetch('{{ path("admin_event_center_update_staff") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ staffId: parseInt(staffId, 10), instructorId: parseInt(instructorId, 10) })
    })
    .then(function(r) { return r.json(); })
    .then(function(result) {
        if (result.success) {
            viewBooking(parseInt(bookingId, 10));
        } else {
            showErrorModal(result.error || 'Aktualisieren fehlgeschlagen.');
        }
    })
    .catch(function() {
        showErrorModal('Fehler beim Aktualisieren.');
    });
}

function removeStaffFromEvent(btnOrBookingId, staffId, staffName) {
    let bookingId, name;
    if (typeof btnOrBookingId === 'object' && btnOrBookingId && btnOrBookingId.getAttribute) {
        const btn = btnOrBookingId;
        bookingId = btn.getAttribute('data-booking-id');
        staffId = btn.getAttribute('data-staff-id');
        name = (btn.getAttribute('data-staff-name') || '').replace(/&quot;/g, '"');
    } else {
        bookingId = btnOrBookingId;
        name = staffName || '';
    }
    if (!bookingId || !staffId) return;
    if (!confirm('Möchten Sie ' + (name || 'diesen Betreuer') + ' wirklich von dieser Buchung entfernen?')) {
        return;
    }

    fetch('{{ path("admin_event_center_remove_staff") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ bookingId: parseInt(bookingId, 10), staffId: parseInt(staffId, 10) })
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            showSuccessModal('Betreuer erfolgreich entfernt');
            bootstrap.Modal.getInstance(document.getElementById('bookingDetailModal')).hide();
            if (typeof loadBookings === 'function') loadBookings(); else location.reload();
        } else {
            showErrorModal('Fehler: ' + result.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showErrorModal('Fehler beim Entfernen des Betreuers');
    });
}
</script>
{% endblock %}