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

{% block title %}Dashboard Bewegungszentrum{% endblock %}
{% block header_title %}Dashboard Bewegungszentrum{% endblock %}

{% block stylesheets %}
<style>
    .stats-card {
        border: none;
        border-radius: 12px;
        box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.1);
        transition: transform 0.2s, box-shadow 0.2s;
        overflow: hidden;
    }

    .stats-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 2rem 0 rgba(58, 59, 69, 0.2);
    }

    .stats-card .card-body {
        padding: 1.5rem;
    }

    .stats-icon {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        color: #fff;
        margin-bottom: 1rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .stats-value {
        font-size: 2rem;
        font-weight: 700;
        color: #5a5c69;
        margin: 0;
    }

    .stats-label {
        color: #858796;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .stats-change {
        font-size: 0.8rem;
        margin-top: 0.5rem;
    }

    .stats-change.positive {
        color: #1cc88a;
    }

    .quick-action-card {
        text-align: center;
        padding: 2rem;
        border: 2px dashed #e3e6f0;
        border-radius: 12px;
        transition: all 0.2s;
        cursor: pointer;
        text-decoration: none;
        display: block;
        color: inherit;
    }

    .quick-action-card:hover {
        border-color: #3d7a4a;
        background: #f4faf5;
        color: #3d7a4a;
        text-decoration: none;
    }

    .quick-action-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 1rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        background: linear-gradient(135deg, #3d7a4a, #8fd99c);
        color: #fff;
        box-shadow: 0 4px 12px rgba(61, 122, 74, 0.3);
    }

    .table-modern {
        font-size: 0.9rem;
    }

    .table-modern thead th {
        background: linear-gradient(135deg, #2d5a38 0%, #3d7a4a 100%);
        color: #fff;
        font-weight: 600;
        border: none;
        padding: 1rem;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .table-modern tbody tr {
        transition: background 0.2s;
    }

    .table-modern tbody tr:hover {
        background: #f4faf5;
    }

    .badge-status {
        padding: 0.4rem 0.8rem;
        border-radius: 6px;
        font-weight: 600;
        font-size: 0.75rem;
    }

    .course-spot-indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        background: #f8f9fc;
        font-size: 0.85rem;
    }

    .spot-bar {
        width: 100px;
        height: 6px;
        background: #e3e6f0;
        border-radius: 3px;
        overflow: hidden;
    }

    .spot-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, #1cc88a, #17a673);
        border-radius: 3px;
        transition: width 0.3s;
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1><i class="fas fa-tachometer-alt me-2"></i>Dashboard Bewegungszentrum</h1>
    <div class="page-breadcrumb">
        <i class="fas fa-home"></i>
        <span>Admin</span>
        <i class="fas fa-chevron-right"></i>
        <span>Bewegungszentrum</span>
        <i class="fas fa-chevron-right"></i>
        <span>Dashboard</span>
    </div>
</div>

<div class="row g-3 mb-4">
    <div class="col-md-3 col-6">
        <a href="{{ path('admin_switch_system', {system: 'swim'}) }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #1a7a8c !important;">
                <div class="card-body py-3">
                    <div class="fw-bold" style="color:#1a7a8c;"><i class="fas fa-swimmer me-1"></i> Schwimmcontainer</div>
                    <small class="text-muted">Termine &amp; Kurse</small>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3 col-6">
        <a href="{{ path('admin_switch_system', {system: 'bz'}) }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #3d7a4a !important;">
                <div class="card-body py-3">
                    <div class="fw-bold" style="color:#3d7a4a;"><i class="fas fa-person-walking me-1"></i> Bewegungszentrum</div>
                    <small class="text-muted">Kurse &amp; Event Center</small>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3 col-6">
        <a href="{{ path('admin_switch_system', {system: 'fisch'}) }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #0e5f8a !important;">
                <div class="card-body py-3">
                    <div class="fw-bold" style="color:#0e5f8a;"><i class="fas fa-fish me-1"></i> Fit wie ein Fisch</div>
                    <small class="text-muted">Portal</small>
                </div>
            </div>
        </a>
    </div>
    <div class="col-md-3 col-6">
        <a href="{{ path('admin_switch_system', {system: 'ksb'}) }}" class="text-decoration-none">
            <div class="card border-0 shadow-sm h-100" style="border-left: 4px solid #8a3d5c !important;">
                <div class="card-body py-3">
                    <div class="fw-bold" style="color:#8a3d5c;"><i class="fas fa-building me-1"></i> Kreissportbund</div>
                    <small class="text-muted">Website &amp; Infos</small>
                </div>
            </div>
        </a>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="stats-card">
            <div class="card-body">
                <div class="stats-icon" style="background: linear-gradient(135deg, #3d7a4a, #2d5a38);">
                    <i class="fas fa-calendar-day"></i>
                </div>
                <div class="stats-label">Heute</div>
                <h2 class="stats-value">{{ todayBookingsCount }}</h2>
                <p class="text-muted mb-0 small">Neue Buchungen heute</p>
                {% if todayBookingsCount > 0 %}
                <div class="stats-change positive">
                    <i class="fas fa-arrow-up"></i> +{{ todayBookingsCount }} heute
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="stats-card">
            <div class="card-body">
                <div class="stats-icon" style="background: linear-gradient(135deg, #28a745, #20c997);">
                    <i class="fas fa-calendar-week"></i>
                </div>
                <div class="stats-label">Diese Woche</div>
                <h2 class="stats-value">{{ weekBookingsCount }}</h2>
                <p class="text-muted mb-0 small">Neue Buchungen</p>
                {% if weekBookingsCount > 0 %}
                <div class="stats-change positive">
                    <i class="fas fa-check"></i> Ø {{ (weekBookingsCount / 7) | number_format(1) }} pro Tag
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="stats-card">
            <div class="card-body">
                <div class="stats-icon" style="background: linear-gradient(135deg, #17a2b8, #138496);">
                    <i class="fas fa-dumbbell"></i>
                </div>
                <div class="stats-label">Kurse</div>
                <h2 class="stats-value">{{ activeCoursesCount }}</h2>
                <p class="text-muted mb-0 small">Aktive Kurse</p>
                <div class="stats-change">
                    <i class="fas fa-users"></i> {{ uniqueParticipants }} Teilnehmer
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6">
        <div class="stats-card">
            <div class="card-body">
                <div class="stats-icon" style="background: linear-gradient(135deg, #ffc107, #ff9800);">
                    <i class="fas fa-clock"></i>
                </div>
                <div class="stats-label">Warteliste</div>
                <h2 class="stats-value">{{ waitingListCount }}</h2>
                <p class="text-muted mb-0 small">Wartende / Angebote</p>
                {% if waitingListCount > 0 %}
                <div class="stats-change" style="color: #f6c23e;">
                    <i class="fas fa-exclamation-triangle"></i> Benötigt Aufmerksamkeit
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-bolt me-2"></i>Schnellaktionen
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <a href="{{ path('admin_bz_courses_index') }}" class="quick-action-card">
                            <div class="quick-action-icon">
                                <i class="fas fa-dumbbell"></i>
                            </div>
                            <strong>Kurse</strong>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <a href="{{ path('admin_course_bookings_index') }}" class="quick-action-card">
                            <div class="quick-action-icon">
                                <i class="fas fa-clipboard-list"></i>
                            </div>
                            <strong>Kursbuchungen</strong>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <a href="{{ path('admin_bz_courses_waitlist') }}" class="quick-action-card">
                            <div class="quick-action-icon">
                                <i class="fas fa-list-ol"></i>
                            </div>
                            <strong>Warteliste</strong>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <a href="{{ path('admin_instructors_index') }}" class="quick-action-card">
                            <div class="quick-action-icon">
                                <i class="fas fa-chalkboard-teacher"></i>
                            </div>
                            <strong>Kursleiter</strong>
                            <div class="small text-muted mt-1">{{ instructorsCount }}</div>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <a href="{{ path('admin_event_center_bookings') }}" class="quick-action-card">
                            <div class="quick-action-icon">
                                <i class="fas fa-gift"></i>
                            </div>
                            <strong>Ehrentag</strong>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <a href="{{ path('admin_event_center_email_templates') }}" class="quick-action-card">
                            <div class="quick-action-icon">
                                <i class="fas fa-envelope-open-text"></i>
                            </div>
                            <strong>E-Mail Templates</strong>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="fas fa-layer-group me-2"></i>Kursarten-Übersicht</span>
                <span class="badge bg-success">{{ courseTypeStats.total }} Kurse</span>
            </div>
            <div class="card-body">
                {% if courseTypeStats.total > 0 %}
                    {% for typeKey, groupData in courseTypeStats.groups %}
                        {% if groupData.count > 0 %}
                        <div class="d-flex align-items-center justify-content-between mb-3 pb-3 border-bottom">
                            <div class="d-flex align-items-center">
                                <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                                     style="width: 45px; height: 45px; background-color: {{ groupData.color }}22; color: {{ groupData.color }};">
                                    <i class="fas {{ groupData.icon }}"></i>
                                </div>
                                <div>
                                    <div class="fw-semibold">{{ groupData.label }}</div>
                                    <small class="text-muted">{{ groupData.count }} Kurse</small>
                                </div>
                            </div>
                            <div class="text-end">
                                <div class="h5 mb-0" style="color: {{ groupData.color }};">{{ ((groupData.count / courseTypeStats.total) * 100)|number_format(1) }}%</div>
                            </div>
                        </div>
                        {% endif %}
                    {% endfor %}

                    {% if courseTypeStats.other > 0 %}
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle d-flex align-items-center justify-content-center me-3"
                                 style="width: 45px; height: 45px; background-color: #6c757d22; color: #6c757d;">
                                <i class="fas fa-ellipsis-h"></i>
                            </div>
                            <div>
                                <div class="fw-semibold">Sonstige</div>
                                <small class="text-muted">{{ courseTypeStats.other }} Kurse</small>
                            </div>
                        </div>
                        <div class="text-end">
                            <div class="h5 mb-0 text-secondary">{{ ((courseTypeStats.other / courseTypeStats.total) * 100)|number_format(1) }}%</div>
                        </div>
                    </div>
                    {% endif %}
                {% else %}
                    <div class="text-center text-muted py-4">
                        <i class="fas fa-info-circle fa-2x mb-2"></i>
                        <p class="mb-0">Keine aktiven Kurse vorhanden</p>
                    </div>
                {% endif %}
            </div>
            <div class="card-footer bg-light">
                <a href="{{ path('admin_bz_courses_index') }}" class="btn btn-sm btn-outline-success w-100">
                    <i class="fas fa-filter me-1"></i>Alle Kurse verwalten
                </a>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="fas fa-chair me-2"></i>Kurse mit freien Plätzen</span>
                <a href="{{ path('admin_bz_courses_index') }}" class="btn btn-sm btn-success">
                    <i class="fas fa-eye me-1"></i>Alle Kurse
                </a>
            </div>
            <div class="card-body p-0">
                {% if coursesWithFreeSpots|length > 0 %}
                <div class="table-responsive">
                    <table class="table table-modern mb-0">
                        <thead>
                            <tr>
                                <th>Kurs</th>
                                <th>Termin</th>
                                <th>Auslastung</th>
                                <th>Verfügbar</th>
                                <th>Aktion</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in coursesWithFreeSpots %}
                            <tr>
                                <td>
                                    <strong>{{ item.course.name }}</strong>
                                    <br><small class="text-muted">{{ item.course.typeLabel }}</small>
                                </td>
                                <td>
                                    {% if item.course.weekdayLabel %}
                                        <i class="fas fa-calendar text-success me-1"></i>
                                        {{ item.course.weekdayLabel }}
                                        {% if item.course.startTime %}
                                            {{ item.course.startTime|date('H:i') }} Uhr
                                        {% endif %}
                                    {% else %}
                                        <span class="text-muted">—</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="course-spot-indicator">
                                        <span>{{ item.bookedCount }}/{{ item.maxSlots }}</span>
                                        <div class="spot-bar">
                                            <div class="spot-bar-fill" style="width: {{ item.maxSlots > 0 ? (item.bookedCount / item.maxSlots * 100) : 0 }}%"></div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-success">{{ item.freeSpots }} frei</span>
                                </td>
                                <td>
                                    <a href="{{ path('admin_course_bookings_index') }}" class="btn btn-sm btn-outline-success">
                                        <i class="fas fa-plus me-1"></i>Buchen
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
                    <p class="mt-3 text-muted">Keine Kurse mit freien Plätzen (oder Kapazität unbegrenzt).</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-calendar-check me-2"></i>Neueste Buchungen heute
            </div>
            <div class="card-body">
                {% if todayBookings|length > 0 %}
                <div class="list-group list-group-flush">
                    {% for booking in todayBookings %}
                    <div class="list-group-item px-0">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <strong>{{ booking.course ? booking.course.name : '—' }}</strong>
                                <br>
                                <small class="text-muted">
                                    <i class="fas fa-user me-1"></i>
                                    {{ booking.firstName }} {{ booking.lastName }}
                                </small>
                                <br>
                                <small class="text-muted">
                                    <i class="fas fa-clock me-1"></i>
                                    {{ booking.createdAt|date('H:i') }} Uhr
                                </small>
                            </div>
                            <span class="badge badge-status {% if booking.status == 'confirmed' %}bg-success{% elseif booking.status == 'pending' %}bg-warning{% elseif booking.status starts with 'waitlist' %}bg-info{% else %}bg-secondary{% endif %}">
                                {{ booking.statusLabel }}
                            </span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-calendar-times text-muted" style="font-size: 2.5rem;"></i>
                    <p class="mt-3 text-muted mb-0">Keine neuen Buchungen heute</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <span><i class="fas fa-list me-2"></i>Buchungen ({{ allBookingsTotal }})</span>
                <a href="{{ path('admin_course_bookings_index') }}" class="btn btn-sm btn-success">
                    <i class="fas fa-external-link-alt me-1"></i>Vollansicht
                </a>
            </div>
            <div class="card-body p-0">
                {% if allBookingsLimited %}
                <div class="px-3 pt-3">
                    <div class="alert alert-light border mb-0 py-2 small text-muted">
                        Zeigt die neuesten {{ allBookings|length }} von {{ allBookingsTotal }} Buchungen.
                        <a href="{{ path('admin_course_bookings_index') }}">Alle anzeigen</a>
                    </div>
                </div>
                {% endif %}
                {% if allBookings|length > 0 %}
                <div class="table-responsive">
                    <table class="table table-modern mb-0" id="bzBookingsTable">
                        <thead>
                            <tr>
                                <th>Buchungsdatum</th>
                                <th>Kurs</th>
                                <th>Teilnehmer</th>
                                <th>Status</th>
                                <th>Zahlung</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for booking in allBookings %}
                            <tr>
                                <td>
                                    <div class="text-center">
                                        <div style="background: linear-gradient(135deg, #3d7a4a, #2d5a38); color: #fff; padding: 0.5rem; border-radius: 8px; min-width: 100px;">
                                            <small style="display: block; font-size: 0.7rem; opacity: 0.9;">Gebucht am</small>
                                            <strong style="display: block; font-size: 0.9rem;">{{ booking.createdAt|date('d.m.Y H:i') }}</strong>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <i class="fas fa-dumbbell text-success me-1"></i>
                                        <strong>{{ booking.course ? booking.course.name : '—' }}</strong>
                                        {% if booking.course %}
                                        <br>
                                        <small class="text-muted">{{ booking.course.typeLabel }}</small>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>
                                    <i class="fas fa-user me-1"></i>
                                    <strong>{{ booking.firstName }} {{ booking.lastName }}</strong>
                                    <br>
                                    <small class="text-muted">
                                        <i class="fas fa-envelope me-1"></i>{{ booking.email }}
                                    </small>
                                </td>
                                <td>
                                    <span class="badge badge-status {% if booking.status == 'confirmed' %}bg-success{% elseif booking.status == 'pending' %}bg-warning{% elseif booking.status starts with 'waitlist' %}bg-info{% elseif booking.status == 'cancelled' %}bg-secondary{% else %}bg-secondary{% endif %}">
                                        {{ booking.statusLabel }}
                                    </span>
                                </td>
                                <td>
                                    {% if booking.paymentReceived %}
                                        <span class="badge bg-success">Bezahlt</span>
                                    {% else %}
                                        <span class="badge bg-warning text-dark">Offen</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-calendar-check text-muted" style="font-size: 3rem;"></i>
                    <p class="mt-3 text-muted mb-0">Keine Buchungen vorhanden</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
    $(document).ready(function() {
        {% if allBookings|length > 0 %}
        $('#bzBookingsTable').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/de-DE.json'
            },
            order: [[0, 'desc']],
            pageLength: 25,
            responsive: true,
            dom: 'frtip',
            columnDefs: [
                { orderable: true, targets: [0, 1, 2, 3, 4] }
            ]
        });
        {% endif %}
    });

    setTimeout(function() {
        location.reload();
    }, 300000);
</script>
{% endblock %}