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

{% block title %}Dashboard{% endblock %}
{% block header_title %}Dashboard Übersicht{% 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;
    }
    
    .stats-change.negative {
        color: #e74a3b;
    }
    
    .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: #4e73df;
        background: #f8f9fc;
        color: #4e73df;
        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, #0099cc, #4dd0e1);
        color: #fff;
        box-shadow: 0 4px 12px rgba(0, 153, 204, 0.3);
    }
    
    .table-modern {
        font-size: 0.9rem;
    }
    
    .table-modern thead th {
        background: linear-gradient(135deg, #003d5c 0%, #005580 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: #f8f9fc;
    }
    
    .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;
    }
    
    .chart-container {
        position: relative;
        height: 300px;
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1><i class="fas fa-tachometer-alt me-2"></i>Dashboard</h1>
    <div class="page-breadcrumb">
        <i class="fas fa-home"></i>
        <span>Admin</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 & 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 & 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">Buchungstool (Demo)</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 & Infos</small>
                </div>
            </div>
        </a>
    </div>
</div>

<!-- Stats Cards Row -->
<div class="row g-4 mb-4">
    <!-- Heutige Termine -->
    <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, #0099cc, #007399);">
                    <i class="fas fa-calendar-day"></i>
                </div>
                <div class="stats-label">Heute</div>
                <h2 class="stats-value">{{ todayAppointmentsCount }}</h2>
                <p class="text-muted mb-0 small">Neue Buchungen heute</p>
                {% if todayAppointmentsCount > 0 %}
                <div class="stats-change positive">
                    <i class="fas fa-arrow-up"></i> +{{ todayAppointmentsCount }} heute
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Termine diese Woche -->
    <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">{{ weekAppointmentsCount }}</h2>
                <p class="text-muted mb-0 small">Neue Buchungen</p>
                {% if weekAppointmentsCount > 0 %}
                <div class="stats-change positive">
                    <i class="fas fa-check"></i> Ø {{ (weekAppointmentsCount / 7) | number_format(1) }} pro Tag
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Aktive Kurse -->
    <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-chalkboard-teacher"></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> {{ totalCustomers }} Kunden
                </div>
            </div>
        </div>
    </div>
    
    <!-- Warteliste -->
    <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 Kunden</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>

<!-- Quick Actions -->
<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_courses_index') }}" class="quick-action-card">
                            <div class="quick-action-icon">
                                <i class="fas fa-chalkboard"></i>
                            </div>
                            <strong>Kurs hinzufügen</strong>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <a href="{{ path('admin_waiting_list') }}" class="quick-action-card">
                            <div class="quick-action-icon">
                                <i class="fas fa-list"></i>
                            </div>
                            <strong>Warteliste</strong>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <a href="{{ path('admin_calendar_index') }}" class="quick-action-card">
                            <div class="quick-action-icon">
                                <i class="fas fa-sync"></i>
                            </div>
                            <strong>Kalender Sync</strong>
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <a href="{{ path('admin_locations_index') }}" class="quick-action-card">
                            <div class="quick-action-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <strong>Standorte</strong>
                        </a>
                    </div>
                    {# Kunden-Verwaltung - Route noch nicht implementiert
                    <div class="col-lg-2 col-md-4 col-sm-6">
                        <a href="#" class="quick-action-card" onclick="alert('Kunden-Verwaltung kommt bald!'); return false;">
                            <div class="quick-action-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <strong>Kunden</strong>
                        </a>
                    </div>
                    #}
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <!-- Zielgruppen-Statistiken -->
    <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-user-friends me-2"></i>Zielgruppen-Übersicht</span>
                <span class="badge bg-primary">{{ targetGroupStats.total }} Kurse</span>
            </div>
            <div class="card-body">
                {% if targetGroupStats.total > 0 %}
                    <!-- Standard-Zielgruppen -->
                    {% for groupName, groupData in targetGroupStats.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">{{ groupName }}</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 / targetGroupStats.total) * 100)|number_format(1) }}%</div>
                            </div>
                        </div>
                        {% endif %}
                    {% endfor %}
                    
                    <!-- Eigene Zielgruppen -->
                    {% if targetGroupStats.custom > 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: #6c757d22; color: #6c757d;">
                                <i class="fas fa-pencil-alt"></i>
                            </div>
                            <div>
                                <div class="fw-semibold">Eigene Zielgruppen</div>
                                <small class="text-muted">{{ targetGroupStats.custom }} Kurse</small>
                            </div>
                        </div>
                        <div class="text-end">
                            <div class="h5 mb-0 text-secondary">{{ ((targetGroupStats.custom / targetGroupStats.total) * 100)|number_format(1) }}%</div>
                        </div>
                    </div>
                    {% endif %}
                    
                    <!-- Ohne Zielgruppe -->
                    {% if targetGroupStats.none > 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: #dc354522; color: #dc3545;">
                                <i class="fas fa-question"></i>
                            </div>
                            <div>
                                <div class="fw-semibold">Ohne Zielgruppe</div>
                                <small class="text-muted">{{ targetGroupStats.none }} Kurse</small>
                            </div>
                        </div>
                        <div class="text-end">
                            <div class="h5 mb-0 text-danger">{{ ((targetGroupStats.none / targetGroupStats.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_courses_index') }}" class="btn btn-sm btn-outline-primary w-100">
                    <i class="fas fa-filter me-1"></i>Nach Zielgruppe filtern
                </a>
            </div>
        </div>
    </div>
    
    <!-- Kurse mit freien Plätzen -->
    <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_courses_index') }}" class="btn btn-sm btn-primary">
                    <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>Standort</th>
                                <th>Auslastung</th>
                                <th>Verfügbar</th>
                                <th>Aktion</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in coursesWithFreeSpots|slice(0, 5) %}
                            <tr>
                                <td>
                                    <strong>{{ item.course.name }}</strong>
                                    <br><small class="text-muted">{{ item.course.type }}</small>
                                </td>
                                <td>
                                    <i class="fas fa-map-marker-alt text-primary me-1"></i>
                                    {{ item.course.location.name }}
                                </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.bookedCount / item.maxSlots * 100) }}%"></div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-success">{{ item.freeSpots }} frei</span>
                                </td>
                                <td>
                                    <a href="{{ path('admin_appointments_list') }}" class="btn btn-sm btn-outline-primary">
                                        <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">Alle Kurse sind ausgebucht!</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Neueste Termine -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <i class="fas fa-calendar-check me-2"></i>Neueste Termine
            </div>
            <div class="card-body">
                {% if todayAppointments|length > 0 %}
                <div class="list-group list-group-flush">
                    {% for appointment in todayAppointments|slice(0, 5) %}
                    <div class="list-group-item px-0">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <strong>{{ appointment.availability.name }}</strong>
                                <br>
                                <small class="text-muted">
                                    <i class="fas fa-user me-1"></i>
                                    {{ appointment.customer.firstName }} {{ appointment.customer.lastName }}
                                </small>
                                <br>
                                <small class="text-muted">
                                    <i class="fas fa-clock me-1"></i>
                                    {{ appointment.availability.startTime|date('H:i') }} Uhr
                                </small>
                            </div>
                            <span class="badge badge-status {% if appointment.status == 'confirmed' %}bg-success{% elseif appointment.status == 'pending' %}bg-warning{% else %}bg-secondary{% endif %}">
                                {{ appointment.status }}
                            </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 Termine</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Buchungen -->
<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_appointments_list') }}" class="btn btn-sm btn-primary">
                    <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_appointments_list') }}">Alle anzeigen</a>
                    </div>
                </div>
                {% endif %}
                {% if allBookings|length > 0 %}
                <div class="table-responsive">
                    <table class="table table-modern mb-0" id="bookingsTable">
                        <thead>
                            <tr>
                                <th>Buchungsdatum</th>
                                <th>Kurs</th>
                                <th>Kunde</th>
                                <th>Standort</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for appointment in allBookings %}
                            <tr>
                                <td>
                                    <div class="text-center">
                                        <div style="background: linear-gradient(135deg, #1cc88a, #17a673); 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;">{{ appointment.createdAt|date('d.m.Y H:i') }}</strong>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <i class="fas fa-chalkboard-teacher text-primary me-1"></i>
                                        <strong>{{ appointment.availability.name }}</strong>
                                        <br>
                                        <small class="text-muted">
                                            {% if appointment.availability.type == 'event' %}Event
                                            {% elseif appointment.availability.type == 'recurring_course' %}Dauerhaft
                                            {% elseif appointment.availability.type == 'limited_course' %}Zeitlich begrenzt
                                            {% elseif appointment.availability.type == 'holiday_course' %}Ferienkurs
                                            {% else %}{{ appointment.availability.type }}
                                            {% endif %}
                                        </small>
                                        {% if appointment.availability.targetGroup %}
                                            <br>
                                            <span class="badge bg-info">{{ appointment.availability.targetGroup }}</span>
                                        {% endif %}
                                    </div>
                                </td>
                                <td>
                                    <i class="fas fa-user me-1"></i>
                                    <strong>{{ appointment.customer.firstName }} {{ appointment.customer.lastName }}</strong>
                                    <br>
                                    <small class="text-muted">
                                        <i class="fas fa-envelope me-1"></i>{{ appointment.customer.email }}
                                    </small>
                                </td>
                                <td>
                                    <i class="fas fa-map-marker-alt text-primary me-1"></i>
                                    {{ appointment.availability.location.name }}
                                </td>
                                <td>
                                    <span class="badge badge-status {% if appointment.status == 'confirmed' %}bg-success{% elseif appointment.status == 'pending' %}bg-warning{% else %}bg-secondary{% endif %}">
                                        {% if appointment.status == 'confirmed' %}Bestätigt
                                        {% elseif appointment.status == 'pending' %}Ausstehend
                                        {% elseif appointment.status == 'cancelled' %}Abgesagt
                                        {% else %}{{ appointment.status }}
                                        {% endif %}
                                    </span>
                                </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>
    // Initialize DataTables für Buchungen-Tabelle
    $(document).ready(function() {
        {% if allBookings|length > 0 %}
        $('#bookingsTable').DataTable({
            language: {
                url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/de-DE.json'
            },
            order: [[0, 'desc']], // Sortiere nach Buchungsdatum abwärts (neueste zuerst)
            pageLength: 25,
            responsive: true,
            dom: 'frtip', // Filter, Table, Info, Pagination
            columnDefs: [
                { orderable: true, targets: [0, 1, 2, 3, 4] } // Alle Spalten sortierbar
            ]
        });
        {% endif %}
    });
    
    // Auto-refresh alle 5 Minuten
    setTimeout(function() {
        location.reload();
    }, 300000);
</script>
{% endblock %}