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

{% block title %}Admin Dashboard{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/appointment/admin.css') }}" />
    <style>
        .admin-card {
            background: linear-gradient(135deg, #44a3c3 0%, #0e2234 100%);
            border: none;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            color: white;
            overflow: hidden;
            position: relative;
        }
        
        .admin-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, transparent 100%);
            pointer-events: none;
        }
        
        .admin-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
        }
        
        .admin-card .card-body {
            padding: 2rem;
            position: relative;
            z-index: 1;
        }
        
        .admin-card .card-icon {
            font-size: 3rem;
            opacity: 0.8;
            margin-bottom: 1rem;
        }
        
        .admin-card .card-title {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .admin-card .card-text {
            opacity: 0.9;
            margin-bottom: 1.5rem;
        }
        
        .admin-card .btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .admin-card .btn:hover {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.5);
            color: white;
            transform: translateY(-2px);
        }
        
        .stats-card {
            background: white;
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .stats-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .stats-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: #44a3c3;
        }
        
        .stats-label {
            color: #6c757d;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .quick-actions {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .breadcrumb {
            background: transparent;
            padding: 0;
            margin-bottom: 1rem;
        }
        
        .breadcrumb-item + .breadcrumb-item::before {
            color: #6c757d;
        }
        
        .page-header {
            background: linear-gradient(135deg, #44a3c3 0%, #0e2234 100%);
            color: white;
            padding: 2rem;
            border-radius: 15px;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }
        
        .page-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
            pointer-events: none;
        }
        
        .page-header h1 {
            margin: 0;
            position: relative;
            z-index: 1;
        }
        
        .recent-activity {
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
        }
        
        .activity-item {
            padding: 1rem;
            border-left: 3px solid #44a3c3;
            margin-bottom: 1rem;
            background: #f8f9fa;
            border-radius: 0 10px 10px 0;
        }
        
        .activity-time {
            font-size: 0.8rem;
            color: #6c757d;
        }
    </style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="page-header">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item active">Admin Dashboard</li>
                    </ol>
                </nav>
                <h1 class="h2 mb-0">
                    <i class="fas fa-tachometer-alt me-3"></i>Willkommen im Admin-Bereich
                </h1>
                <p class="mb-0 mt-2 opacity-75">Verwalten Sie Ihre Schwimmschule effizient und übersichtlich</p>
            </div>
            <div class="text-end">
                <div class="h5 mb-0">{{ "now"|date("H:i") }} Uhr</div>
                <div class="small opacity-75">{{ "now"|date("d.m.Y") }}</div>
            </div>
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="row mb-4">
        <div class="col-md-3 mb-3">
            <div class="card stats-card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-calendar-alt text-primary mb-3" style="font-size: 2rem;"></i>
                    <div class="stats-number">{{ totalCourses ?? 0 }}</div>
                    <div class="stats-label">Aktive Kurse</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card stats-card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-users text-success mb-3" style="font-size: 2rem;"></i>
                    <div class="stats-number">{{ totalBookings ?? 0 }}</div>
                    <div class="stats-label">Buchungen heute</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card stats-card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-map-marker-alt text-info mb-3" style="font-size: 2rem;"></i>
                    <div class="stats-number">{{ totalLocations ?? 0 }}</div>
                    <div class="stats-label">Standorte</div>
                </div>
            </div>
        </div>
        <div class="col-md-3 mb-3">
            <div class="card stats-card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-envelope text-warning mb-3" style="font-size: 2rem;"></i>
                    <div class="stats-number">{{ totalTemplates ?? 0 }}</div>
                    <div class="stats-label">E-Mail Templates</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Management Cards -->
    <div class="row mb-4">
        <div class="col-lg-4 mb-4">
            <div class="card admin-card h-100">
                <div class="card-body text-center">
                    <div class="card-icon">
                        <i class="fas fa-calendar-plus"></i>
                    </div>
                    <h3 class="card-title">Kurse verwalten</h3>
                    <p class="card-text">
                        Erstellen, bearbeiten und verwalten Sie Ihre Schwimmkurse. 
                        Legen Sie Zeiten, Standorte und Kapazitäten fest.
                    </p>
                    <a href="{{ path('admin_courses_index') }}" class="btn btn-lg">
                        <i class="fas fa-arrow-right me-2"></i>Kurse verwalten
                    </a>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 mb-4">
            <div class="card admin-card h-100">
                <div class="card-body text-center">
                    <div class="card-icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </div>
                    <h3 class="card-title">Standorte verwalten</h3>
                    <p class="card-text">
                        Verwalten Sie Ihre Schwimmhallen und Standorte. 
                        Fügen Sie neue Locations hinzu oder bearbeiten Sie bestehende.
                    </p>
                    <a href="{{ path('admin_locations_index') }}" class="btn btn-lg">
                        <i class="fas fa-arrow-right me-2"></i>Standorte verwalten
                    </a>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 mb-4">
            <div class="card admin-card h-100">
                <div class="card-body text-center">
                    <div class="card-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <h3 class="card-title">E-Mail Templates</h3>
                    <p class="card-text">
                        Erstellen und verwalten Sie E-Mail-Vorlagen für 
                        Buchungsbestätigungen, Erinnerungen und mehr.
                    </p>
                    <a href="{{ path('admin_email_templates_index') }}" class="btn btn-lg">
                        <i class="fas fa-arrow-right me-2"></i>Templates verwalten
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Additional Management Options -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="quick-actions">
                <h4 class="mb-3">
                    <i class="fas fa-bolt me-2 text-primary"></i>Schnellzugriff
                </h4>
                <div class="row">
                    <div class="col-md-3 mb-2">
                        <a href="{{ path('appointment_admin') }}" class="btn btn-outline-primary w-100">
                            <i class="fas fa-chart-bar me-2"></i>Detailliertes Dashboard
                        </a>
                    </div>
                    <div class="col-md-3 mb-2">
                        <button class="btn btn-outline-success w-100" onclick="exportData()">
                            <i class="fas fa-download me-2"></i>Daten exportieren
                        </button>
                    </div>
                    <div class="col-md-3 mb-2">
                        <button class="btn btn-outline-info w-100" onclick="sendBulkEmail()">
                            <i class="fas fa-paper-plane me-2"></i>Massen-E-Mail
                        </button>
                    </div>
                    <div class="col-md-3 mb-2">
                        <button class="btn btn-outline-warning w-100" onclick="showReports()">
                            <i class="fas fa-file-alt me-2"></i>Berichte
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activity and Warnings -->
    <div class="row">
        <div class="col-lg-8 mb-4">
            <div class="recent-activity">
                <h4 class="mb-3">
                    <i class="fas fa-clock me-2 text-primary"></i>Letzte Aktivitäten
                </h4>
                <div id="recentActivities">
                    <div class="activity-item">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>Neue Buchung</strong><br>
                                <small>Schwimmkurs für Anfänger - Max Mustermann</small>
                            </div>
                            <div class="activity-time">vor 5 Min.</div>
                        </div>
                    </div>
                    <div class="activity-item">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>Kurs aktualisiert</strong><br>
                                <small>Aquafitness Montag - Kapazität erhöht</small>
                            </div>
                            <div class="activity-time">vor 15 Min.</div>
                        </div>
                    </div>
                    <div class="activity-item">
                        <div class="d-flex justify-content-between">
                            <div>
                                <strong>E-Mail Template erstellt</strong><br>
                                <small>Neue Erinnerungsvorlage hinzugefügt</small>
                            </div>
                            <div class="activity-time">vor 1 Std.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4 mb-4">
            <div class="card border-warning">
                <div class="card-header bg-warning text-dark">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>Wichtige Hinweise
                    </h5>
                </div>
                <div class="card-body">
                    {% if coursesWithoutTemplates|length > 0 %}
                    <div class="alert alert-warning">
                        <strong>{{ coursesWithoutTemplates|length }} Kurse</strong> haben noch keine E-Mail-Templates zugewiesen.
                        <a href="{{ path('admin_email_templates_index') }}" class="alert-link">Jetzt zuweisen</a>
                    </div>
                    {% endif %}
                    
                    <div class="alert alert-info">
                        <strong>Tipp:</strong> Nutzen Sie die neuen separaten Verwaltungsseiten für eine bessere Übersicht.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        function exportData() {
            alert('Export-Funktion wird implementiert...');
        }
        
        function sendBulkEmail() {
            alert('Massen-E-Mail-Funktion wird implementiert...');
        }
        
        function showReports() {
            alert('Berichts-Funktion wird implementiert...');
        }
        
        // Auto-refresh recent activities every 30 seconds
        setInterval(function() {
            // This would load recent activities via AJAX
            console.log('Refreshing recent activities...');
        }, 30000);
    </script>
{% endblock %}