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

{% block title %}Buchungssystem Dokumentation{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .doc-section {
        margin-bottom: 2rem;
        padding: 1.5rem;
        background-color: #f8f9fa;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    
    .doc-section h2 {
        color: #2c3e50;
        margin-bottom: 1.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 2px solid #e9ecef;
        font-weight: 600;
    }
    
    .doc-section h3 {
        color: #34495e;
        margin: 1.5rem 0 1rem;
        font-weight: 500;
    }
    
    .feature-list {
        list-style-type: none;
        padding-left: 0;
    }
    
    .feature-list li {
        margin-bottom: 1rem;
        padding-left: 1.5rem;
        position: relative;
    }
    
    .feature-list li:before {
        content: "•";
        color: #007bff;
        position: absolute;
        left: 0;
        font-weight: bold;
    }
    
    .code-block {
        background-color: #2d2d2d;
        color: #f8f8f2;
        padding: 1.5rem;
        border-radius: 8px;
        margin: 1rem 0;
        font-family: 'Consolas', 'Monaco', monospace;
        font-size: 0.9rem;
        line-height: 1.5;
        overflow-x: auto;
    }
    
    .note {
        background-color: #fff3cd;
        border-left: 4px solid #ffc107;
        padding: 1rem;
        margin: 1rem 0;
        border-radius: 0 8px 8px 0;
    }
    
    .warning {
        background-color: #f8d7da;
        border-left: 4px solid #dc3545;
        padding: 1rem;
        margin: 1rem 0;
        border-radius: 0 8px 8px 0;
    }

    .example-box {
        background-color: #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        margin: 1rem 0;
    }

    .example-box h4 {
        color: #495057;
        margin-bottom: 0.5rem;
        font-size: 1.1rem;
    }

    .screenshot {
        max-width: 100%;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin: 1rem 0;
    }

    .step-number {
        display: inline-block;
        width: 24px;
        height: 24px;
        background-color: #007bff;
        color: white;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
        margin-right: 0.5rem;
        font-size: 0.9rem;
    }

    .feature-card {
        background-color: white;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .feature-card h4 {
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }

    .feature-card p {
        color: #6c757d;
        margin-bottom: 0;
    }

    .calendar-example {
        border: 1px solid #ddd;
        border-radius: 4px;
        margin: 20px 0;
        background: white;
    }
    
    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        background: #f8f9fa;
    }
    
    .calendar-nav {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .current-week {
        font-weight: bold;
    }
    
    .calendar-views {
        display: flex;
        gap: 5px;
    }
    
    .calendar-grid {
        display: flex;
        height: 800px;
        overflow: hidden;
    }
    
    .time-column {
        width: 60px;
        border-right: 1px solid #ddd;
        background: #f8f9fa;
    }
    
    .time-slot {
        height: 30px;
        padding: 5px;
        font-size: 12px;
        color: #666;
    }
    
    .days-container {
        display: flex;
        flex: 1;
    }
    
    .day-column {
        flex: 1;
        border-right: 1px solid #ddd;
    }
    
    .day-column:last-child {
        border-right: none;
    }
    
    .day-header {
        padding: 10px;
        text-align: center;
        font-weight: bold;
        background: #f8f9fa;
        border-bottom: 1px solid #ddd;
    }
    
    .day-content {
        position: relative;
        height: calc(100% - 41px);
    }
    
    .event {
        position: absolute;
        left: 5px;
        right: 5px;
        padding: 5px;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
    }
    
    .event.available {
        background: #d4edda;
        border: 1px solid #c3e6cb;
    }
    
    .event.booked {
        background: #f8d7da;
        border: 1px solid #f5c6cb;
    }
    
    .event-time {
        font-weight: bold;
        margin-bottom: 2px;
    }
    
    .event-title {
        margin-bottom: 2px;
    }
    
    .event-info {
        font-size: 11px;
        color: #666;
    }

    .booking-form-example {
        max-width: 600px;
        margin: 20px auto;
        padding: 20px;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    
    .email-example {
        max-width: 600px;
        margin: 20px auto;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
    }
    
    .email-header {
        background: #f8f9fa;
        padding: 15px;
        border-bottom: 1px solid #ddd;
    }
    
    .email-subject {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    .email-meta {
        font-size: 12px;
        color: #666;
    }
    
    .email-meta span {
        display: block;
        margin-bottom: 5px;
    }
    
    .email-body {
        padding: 20px;
    }
    
    .booking-details {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 4px;
        margin: 20px 0;
    }
    
    .status-example {
        max-width: 600px;
        margin: 20px auto;
    }
    
    .status-timeline {
        position: relative;
        padding: 20px 0;
    }
    
    .status-timeline::before {
        content: '';
        position: absolute;
        left: 20px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #ddd;
    }
    
    .status-item {
        display: flex;
        margin-bottom: 30px;
        position: relative;
    }
    
    .status-icon {
        width: 40px;
        height: 40px;
        background: white;
        border: 2px solid #ddd;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        position: relative;
        z-index: 1;
    }
    
    .status-item.completed .status-icon {
        background: #28a745;
        border-color: #28a745;
        color: white;
    }
    
    .status-item.current .status-icon {
        background: #007bff;
        border-color: #007bff;
        color: white;
    }
    
    .status-content {
        flex: 1;
    }
    
    .status-content h5 {
        margin: 0 0 5px 0;
    }
    
    .status-content p {
        margin: 0;
        color: #666;
        font-size: 14px;
    }
    
    .qrcode-example {
        max-width: 600px;
        margin: 20px auto;
    }
    
    .qrcode-container {
        display: flex;
        align-items: center;
        background: white;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 20px;
    }
    
    .qrcode {
        margin-right: 20px;
    }
    
    .qrcode-info h5 {
        margin: 0 0 10px 0;
    }
    
    .qrcode-status {
        display: flex;
        align-items: center;
        margin-top: 10px;
    }
    
    .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin-right: 5px;
    }
    
    .qrcode-status.available .status-dot {
        background: #28a745;
    }
    
    .checkin-example {
        background: white;
        padding: 20px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    
    .checkin-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }
    
    .checkin-header h5 {
        margin: 0;
    }
    
    .checkin-details p {
        margin: 5px 0;
    }

    .admin-example {
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
    }
    
    .admin-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background: #f8f9fa;
        border-bottom: 1px solid #ddd;
    }
    
    .admin-header h5 {
        margin: 0;
    }
    
    .admin-actions {
        display: flex;
        gap: 10px;
    }
    
    .admin-table {
        padding: 15px;
    }
    
    .availability-example {
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 20px;
    }
    
    .availability-header {
        margin-bottom: 20px;
    }
    
    .availability-header h5 {
        margin: 0;
    }
    
    .availability-form {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .security-example {
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 20px;
    }
    
    .setting-group {
        margin-bottom: 20px;
    }
    
    .setting-group h6 {
        margin-bottom: 10px;
        color: #666;
    }
    
    .setting-item {
        display: flex;
        margin-bottom: 5px;
    }
    
    .setting-label {
        width: 200px;
        color: #666;
    }
    
    .email-sending-example {
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 20px;
    }
    
    .email-preview {
        display: flex;
        gap: 20px;
    }
    
    .template-info {
        margin-top: 10px;
        font-size: 12px;
        color: #666;
    }
    
    .waiting-list-example {
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 20px;
    }
    
    .waiting-list-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
    
    .waiting-list-header h5 {
        margin: 0;
    }
    
    .waiting-list-content {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .waiting-list-item {
        display: flex;
        align-items: center;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-bottom: 10px;
    }
    
    .waiting-list-position {
        width: 30px;
        height: 30px;
        background: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        font-weight: bold;
    }
    
    .waiting-list-details h6 {
        margin: 0 0 5px 0;
    }
    
    .waiting-list-details p {
        margin: 0;
        font-size: 12px;
        color: #666;
    }
    
    .reschedule-example {
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 20px;
    }
    
    .reschedule-header {
        margin-bottom: 20px;
    }
    
    .reschedule-header h5 {
        margin: 0 0 10px 0;
    }
    
    .current-appointment {
        background: #f8f9fa;
        padding: 10px;
        border-radius: 4px;
    }
    
    .reschedule-notification {
        margin-top: 20px;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 4px;
    }
    
    .notification-preview h6 {
        margin: 0 0 10px 0;
    }
    
    .stats-example {
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 20px;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 20px;
    }
    
    .stat-card {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 4px;
        text-align: center;
    }
    
    .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: #007bff;
        margin-bottom: 5px;
    }
    
    .stat-label {
        font-size: 14px;
        color: #666;
    }

    .section-content {
        margin-bottom: 2rem;
    }

    .architecture-diagram {
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .diagram-container {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .diagram-box {
        background-color: white;
        border-radius: 8px;
        padding: 1rem;
        flex: 1;
    }

    .diagram-arrow {
        font-size: 2rem;
        color: #007bff;
    }

    .email-template-system {
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 20px;
    }
    
    .template-structure {
        margin-bottom: 30px;
    }
    
    .template-files {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
        margin-top: 20px;
    }
    
    .template-file {
        background: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
    }
    
    .file-header {
        background: #e9ecef;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .file-name {
        font-family: monospace;
        font-weight: bold;
    }
    
    .file-type {
        background: #007bff;
        color: white;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
    }
    
    .file-content {
        padding: 15px;
    }
    
    .template-preview {
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 15px;
    }
    
    .email-header {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .email-logo {
        width: 150px;
        height: 50px;
        background: #f8f9fa;
        margin-bottom: 10px;
    }
    
    .email-body {
        color: #333;
    }
    
    .appointment-details {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 4px;
        margin: 15px 0;
    }
    
    .template-features {
        background: #f8f9fa;
        padding: 20px;
        border-radius: 4px;
    }
    
    .template-features h5 {
        margin-bottom: 15px;
    }
    
    .template-features ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .template-features li {
        padding: 8px 0;
        border-bottom: 1px solid #ddd;
    }
    
    .template-features li:last-child {
        border-bottom: none;
    }

    .course-overview {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }
    
    .course-card {
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .course-header {
        background: #f8f9fa;
        padding: 15px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .course-header h5 {
        margin: 0;
        color: #333;
    }
    
    .course-details {
        padding: 20px;
    }
    
    .course-info {
        margin-bottom: 15px;
    }
    
    .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        color: #666;
    }
    
    .info-item i {
        width: 20px;
        margin-right: 10px;
        color: #007bff;
    }
    
    .course-description {
        background: #f8f9fa;
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 15px;
    }
    
    .course-actions {
        display: flex;
        gap: 10px;
    }
    
    .booking-process {
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
    }
    
    .process-steps {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .step {
        display: flex;
        gap: 20px;
        padding: 20px;
        background: #f8f9fa;
        border-radius: 8px;
        border: 1px solid #ddd;
    }
    
    .step.active {
        background: #e3f2fd;
        border-color: #90caf9;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        background: #007bff;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        flex-shrink: 0;
    }
    
    .step-content {
        flex-grow: 1;
    }
    
    .step-content h5 {
        margin: 0 0 15px 0;
        color: #333;
    }
    
    .calendar {
        background: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
    }
    
    .calendar-header {
        background: #f8f9fa;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ddd;
    }
    
    .calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 5px;
        padding: 10px;
    }
    
    .calendar-day {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        cursor: pointer;
    }
    
    .calendar-day.available {
        background: #e3f2fd;
        color: #007bff;
    }
    
    .calendar-day.booked {
        background: #ffebee;
        color: #f44336;
    }
</style>
{% endblock %}

{% block content %}
<div class="container py-4">
    <h1 class="mb-4">Buchungssystem Dokumentation</h1>
    
    <div class="doc-section">
        <h2>1. Systemübersicht</h2>
        <p>Das Buchungssystem ist eine webbasierte Anwendung zur Verwaltung und Buchung von Terminen. Es bietet sowohl eine Kunden- als auch eine Admin-Oberfläche mit verschiedenen Funktionen zur Terminverwaltung.</p>
        
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="feature-card">
                    <h4><i class="fas fa-calendar-check me-2"></i>Terminbuchung</h4>
                    <p>Einfache und intuitive Terminbuchung über den Kalender</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <h4><i class="fas fa-user-cog me-2"></i>Admin-Verwaltung</h4>
                    <p>Umfassende Verwaltungsmöglichkeiten für Administratoren</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <h4><i class="fas fa-bell me-2"></i>Benachrichtigungen</h4>
                    <p>Automatische E-Mail-Benachrichtigungen für alle Aktionen</p>
                </div>
            </div>
        </div>
        
        <div class="note mt-4">
            <strong>Hinweis:</strong> Das System ist für die Verwaltung von Terminen optimiert und unterstützt verschiedene Buchungsszenarien.
        </div>
    </div>

    <div class="doc-section">
        <h2>2. Hauptfunktionen</h2>
        
        <h3>2.1 Terminbuchung</h3>
        <div class="feature-list">
            <li>
                <strong>Kalenderansicht</strong>
                <ul>
                    <li>Wochen- und Tagesansicht verfügbar</li>
                    <li>Farbkodierung der Termine:
                        <ul>
                            <li><span style="color: #28a745;">Grün</span>: Verfügbar</li>
                            <li><span style="color: #ffc107;">Gelb</span>: Teilweise gebucht</li>
                            <li><span style="color: #dc3545;">Rot</span>: Ausgebucht</li>
                        </ul>
                    </li>
                    <li>Zeitslots: 8:00 - 20:00 Uhr</li>
                </ul>

                <div class="example-box">
                    <h4>Beispiel: Kursübersicht</h4>
                    <div class="course-overview">
                        <div class="course-card">
                            <div class="course-header">
                                <h5>Schwimmkurs für Anfänger</h5>
                                <span class="badge bg-success">Verfügbar</span>
                            </div>
                            <div class="course-details">
                                <div class="course-info">
                                    <div class="info-item">
                                        <i class="fas fa-calendar"></i>
                                        <span>01.04.2024 - 30.04.2024</span>
                                    </div>
                                    <div class="info-item">
                                        <i class="fas fa-clock"></i>
                                        <span>Montag & Mittwoch, 16:00 - 17:00</span>
                                    </div>
                                    <div class="info-item">
                                        <i class="fas fa-map-marker-alt"></i>
                                        <span>Hallenbad Musterstadt</span>
                                    </div>
                                    <div class="info-item">
                                        <i class="fas fa-users"></i>
                                        <span>8/10 Teilnehmer</span>
                                    </div>
                                </div>
                                <div class="course-description">
                                    <p>Ideal für Anfänger: Grundlagen des Schwimmens, Wassergewöhnung und erste Schwimmtechniken.</p>
                                </div>
                                <div class="course-actions">
                                    <button class="btn btn-primary">Jetzt buchen</button>
                                    <button class="btn btn-outline-primary">Details</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="course-card">
                            <div class="course-header">
                                <h5>Yoga für Fortgeschrittene</h5>
                                <span class="badge bg-warning">Fast ausgebucht</span>
                            </div>
                            <div class="course-details">
                                <div class="course-info">
                                    <div class="info-item">
                                        <i class="fas fa-calendar"></i>
                                        <span>01.04.2024 - 30.04.2024</span>
                                    </div>
                                    <div class="info-item">
                                        <i class="fas fa-clock"></i>
                                        <span>Dienstag & Donnerstag, 18:00 - 19:30</span>
                                    </div>
                                    <div class="info-item">
                                        <i class="fas fa-map-marker-alt"></i>
                                        <span>Sportzentrum Musterstadt</span>
                                    </div>
                                    <div class="info-item">
                                        <i class="fas fa-users"></i>
                                        <span>14/15 Teilnehmer</span>
                                    </div>
                                </div>
                                <div class="course-description">
                                    <p>Vertiefte Yoga-Praxis: Fortgeschrittene Asanas, Meditation und Atemtechniken.</p>
                                </div>
                                <div class="course-actions">
                                    <button class="btn btn-primary">Jetzt buchen</button>
                                    <button class="btn btn-outline-primary">Details</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <strong>Buchungsprozess</strong>
                <ol>
                    <li>
                        <span class="step-number">1</span>
                        Auswahl eines verfügbaren Zeitslots
                        <div class="example-box">
                            <p>Klicken Sie auf einen grünen Zeitslot im Kalender, um einen Termin zu buchen.</p>
                        </div>
                    </li>
                    <li>
                        <span class="step-number">2</span>
                        Ausfüllen des Buchungsformulars:
                        <ul>
                            <li>Vor- und Nachname</li>
                            <li>E-Mail-Adresse</li>
                            <li>Telefonnummer (optional)</li>
                            <li>Geburtsdatum (optional)</li>
                            <li>Datenschutzerklärung</li>
                        </ul>
                        <div class="example-box">
                            <h4>Beispiel: Buchungsprozess</h4>
                            <div class="booking-process">
                                <div class="process-steps">
                                    <div class="step active">
                                        <div class="step-number">1</div>
                                        <div class="step-content">
                                            <h5>Kurs auswählen</h5>
                                            <div class="course-selection">
                                                <div class="form-group">
                                                    <label>Kurstyp</label>
                                                    <select class="form-control">
                                                        <option>Schwimmkurs für Anfänger</option>
                                                        <option>Yoga für Fortgeschrittene</option>
                                                        <option>Fitness für Senioren</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="step">
                                        <div class="step-number">2</div>
                                        <div class="step-content">
                                            <h5>Termin wählen</h5>
                                            <div class="date-selection">
                                                <div class="calendar">
                                                    <div class="calendar-header">
                                                        <button class="btn btn-sm btn-outline-primary">←</button>
                                                        <span>März 2024</span>
                                                        <button class="btn btn-sm btn-outline-primary">→</button>
                                                    </div>
                                                    <div class="calendar-grid">
                                                        <div class="calendar-day available">1</div>
                                                        <div class="calendar-day available">2</div>
                                                        <div class="calendar-day booked">3</div>
                                                        <div class="calendar-day available">4</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="step">
                                        <div class="step-number">3</div>
                                        <div class="step-content">
                                            <h5>Persönliche Daten</h5>
                                            <div class="personal-data">
                                                <div class="form-group">
                                                    <label>Name</label>
                                                    <input type="text" class="form-control" value="Max Mustermann" readonly>
                                                </div>
                                                <div class="form-group">
                                                    <label>E-Mail</label>
                                                    <input type="email" class="form-control" value="max@example.com" readonly>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <span class="step-number">3</span>
                        Bestätigung der Buchung
                        <div class="example-box">
                            <p>Nach erfolgreicher Buchung erhalten Sie eine Bestätigungs-E-Mail mit allen Details.</p>
                        </div>
                    </li>
                    <li>
                        <span class="step-number">4</span>
                        Automatische E-Mail-Benachrichtigung
                        <div class="example-box">
                            <h4>Beispiel: E-Mail-Benachrichtigung</h4>
                            <div class="email-example">
                                <div class="email-header">
                                    <div class="email-subject">Buchungsbestätigung - Schwimmkurs für Anfänger</div>
                                    <div class="email-meta">
                                        <span>Von: buchungssystem@example.com</span>
                                        <span>An: max@example.com</span>
                                        <span>Datum: 18.03.2024 10:15</span>
                                    </div>
                                </div>
                                
                                <div class="email-body">
                                    <h2>Buchungsbestätigung</h2>
                                    
                                    <p>Sehr geehrte(r) Max Mustermann,</p>
                                    
                                    <p>vielen Dank für Ihre Buchung. Hier sind Ihre Buchungsdetails:</p>
                                    
                                    <div class="booking-details">
                                        <p><strong>Datum:</strong> 20.03.2024</p>
                                        <p><strong>Uhrzeit:</strong> 16:00 - 17:00</p>
                                        <p><strong>Ort:</strong> Hallenbad Musterstadt</p>
                                        <p><strong>Buchungsnummer:</strong> ABC123XYZ</p>
                                    </div>
                                    
                                    <p>Sie können Ihre Buchung über folgenden Link verwalten:</p>
                                    <p><a href="#">https://example.com/booking/ABC123XYZ</a></p>
                                    
                                    <p>Mit freundlichen Grüßen<br>Ihr Buchungssystem</p>
                                </div>
                            </div>
                        </div>
                    </li>
                </ol>
            </li>
        </div>

        <h3>2.2 Terminverwaltung</h3>
        <div class="feature-list">
            <li>
                <strong>Terminübersicht</strong>
                <ul>
                    <li>Anzeige aller gebuchten Termine</li>
                    <li>Status-Tracking:
                        <ul>
                            <li><span style="color: #ffc107;">Pending</span> (Ausstehend)</li>
                            <li><span style="color: #28a745;">Confirmed</span> (Bestätigt)</li>
                            <li><span style="color: #dc3545;">Cancelled</span> (Storniert)</li>
                        </ul>
                    </li>
                    <li>Möglichkeit zur Terminänderung</li>
                    <li>Stornierungsfunktion</li>
                </ul>

                <div class="example-box">
                    <h4>Beispiel: Terminstatus</h4>
                    <div class="status-example">
                        <div class="status-timeline">
                            <div class="status-item completed">
                                <div class="status-icon">✓</div>
                                <div class="status-content">
                                    <h5>Termin gebucht</h5>
                                    <p>20.03.2024 10:15</p>
                                    <p>Buchungsnummer: ABC123XYZ</p>
                                </div>
                            </div>
                            
                            <div class="status-item completed">
                                <div class="status-icon">✓</div>
                                <div class="status-content">
                                    <h5>Termin bestätigt</h5>
                                    <p>20.03.2024 10:16</p>
                                    <p>E-Mail-Bestätigung versendet</p>
                                </div>
                            </div>
                            
                            <div class="status-item current">
                                <div class="status-icon">●</div>
                                <div class="status-content">
                                    <h5>Termin anstehend</h5>
                                    <p>20.03.2024 16:00 - 17:00</p>
                                    <p>Schwimmkurs für Anfänger</p>
                                </div>
                            </div>
                            
                            <div class="status-item">
                                <div class="status-icon">○</div>
                                <div class="status-content">
                                    <h5>Check-in</h5>
                                    <p>Noch nicht eingecheckt</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <strong>Check-in System</strong>
                <ul>
                    <li>QR-Code basierte Verifizierung</li>
                    <li>Mobile Scan-Funktion</li>
                    <li>Automatische Statusaktualisierung</li>
                </ul>

                <div class="example-box">
                    <h4>Beispiel: QR-Code System</h4>
                    <div class="qrcode-example">
                        <div class="qrcode-container">
                            <div class="qrcode">
                                <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="QR Code Beispiel" style="width: 200px; height: 200px; background: #f8f9fa; border: 1px solid #ddd;">
                            </div>
                            <div class="qrcode-info">
                                <h5>Buchungsnummer: ABC123XYZ</h5>
                                <p>Scannen Sie den QR-Code beim Check-in</p>
                                <div class="qrcode-status available">
                                    <span class="status-dot"></span>
                                    QR-Code aktiv
                                </div>
                            </div>
                        </div>
                        
                        <div class="checkin-example">
                            <div class="checkin-header">
                                <h5>Check-in Status</h5>
                                <span class="badge bg-warning">Ausstehend</span>
                            </div>
                            <div class="checkin-details">
                                <p><strong>Termin:</strong> 20.03.2024 16:00 - 17:00</p>
                                <p><strong>Kurs:</strong> Schwimmkurs für Anfänger</p>
                                <p><strong>Ort:</strong> Hallenbad Musterstadt</p>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </div>

        <h3>2.3 Admin-Funktionen</h3>
        <div class="feature-list">
            <li>
                <strong>Verwaltung</strong>
                <ul>
                    <li>Übersicht aller Buchungen</li>
                    <li>Bearbeitung von Terminen</li>
                    <li>Verfügbarkeitsverwaltung</li>
                    <li>E-Mail-Kommunikation</li>
                </ul>

                <div class="example-box">
                    <h4>Beispiel: Admin-Bereich</h4>
                    <div class="admin-example">
                        <div class="admin-header">
                            <h5>Terminverwaltung</h5>
                            <div class="admin-actions">
                                <button class="btn btn-sm btn-outline-primary">Export</button>
                                <button class="btn btn-sm btn-primary">+ Neuer Termin</button>
                            </div>
                        </div>
                        
                        <div class="admin-table">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Datum</th>
                                        <th>Zeit</th>
                                        <th>Kunde</th>
                                        <th>Status</th>
                                        <th>Aktionen</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>20.03.2024</td>
                                        <td>16:00 - 17:00</td>
                                        <td>Max Mustermann</td>
                                        <td><span class="badge bg-success">Bestätigt</span></td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-primary">Bearbeiten</button>
                                            <button class="btn btn-sm btn-outline-danger">Stornieren</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>20.03.2024</td>
                                        <td>18:00 - 19:30</td>
                                        <td>Anna Schmidt</td>
                                        <td><span class="badge bg-warning">Ausstehend</span></td>
                                        <td>
                                            <button class="btn btn-sm btn-outline-primary">Bearbeiten</button>
                                            <button class="btn btn-sm btn-outline-danger">Stornieren</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <strong>Verfügbarkeitsplanung</strong>
                <ul>
                    <li>Zeitslot-Definition</li>
                    <li>Teilnehmer-Limits</li>
                    <li>Pufferzeiten</li>
                    <li>Öffnungszeiten</li>
                </ul>

                <div class="example-box">
                    <h4>Beispiel: Verfügbarkeitsverwaltung</h4>
                    <div class="availability-example">
                        <div class="availability-header">
                            <h5>Verfügbarkeit einrichten</h5>
                        </div>
                        
                        <div class="availability-form">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Startzeit</label>
                                        <input type="time" class="form-control" value="09:00" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Endzeit</label>
                                        <input type="time" class="form-control" value="17:00" readonly>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Maximale Teilnehmer</label>
                                        <input type="number" class="form-control" value="10" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Pufferzeit (Minuten)</label>
                                        <input type="number" class="form-control" value="15" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </div>
    </div>

    <div class="doc-section">
        <h2>3. Technische Details</h2>
        
        <h3>3.1 Architektur</h3>
        <div class="section-content">
            <h4>3.1 Architektur</h4>
            <div class="architecture-diagram">
                <div class="diagram-container">
                    <div class="diagram-box frontend">
                        <h5>Frontend</h5>
                        <ul>
                            <li>Twig Templates</li>
                            <li>Bootstrap 5</li>
                            <li>JavaScript</li>
                        </ul>
                    </div>
                    <div class="diagram-arrow">→</div>
                    <div class="diagram-box backend">
                        <h5>Backend</h5>
                        <ul>
                            <li>Symfony 6</li>
                            <li>PHP 8.1</li>
                            <li>Doctrine ORM</li>
                        </ul>
                    </div>
                    <div class="diagram-arrow">→</div>
                    <div class="diagram-box database">
                        <h5>Datenbank</h5>
                        <ul>
                            <li>MySQL</li>
                            <li>InnoDB</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <h3>3.2 API-Endpunkte</h3>
        <div class="feature-list">
            <li>Automatische Bestätigungs-E-Mails</li>
            <li>Terminerinnerungen</li>
            <li>Änderungsbenachrichtigungen</li>
            <li>Admin-Benachrichtigungen</li>
        </div>

        <div class="example-box">
            <h4>Beispiel: E-Mail-Versand</h4>
            <div class="email-sending-example">
                <div class="email-preview">
                    <div class="email-meta">
                        <div class="meta-item">
                            <strong>Von:</strong> noreply@example.com
                        </div>
                        <div class="meta-item">
                            <strong>An:</strong> max@example.com
                        </div>
                        <div class="meta-item">
                            <strong>Betreff:</strong> Ihre Buchungsbestätigung
                        </div>
                    </div>
                    
                    <div class="email-template">
                        <div class="template-preview">
                            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="E-Mail Template Vorschau" style="width: 100%; height: 200px; background: #f8f9fa; border: 1px solid #ddd;">
                        </div>
                        <div class="template-info">
                            <p>Template: emails/booking_confirmation.html.twig</p>
                            <p>Kontext: appointment, customer</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <h3>3.3 E-Mail-Benachrichtigungen</h3>
        <div class="feature-list">
            <li>Automatische Bestätigungs-E-Mails</li>
            <li>Erinnerungen vor dem Termin</li>
            <li>Benachrichtigungen bei Änderungen</li>
            <li>Stornierungsbestätigungen</li>
        </div>

        <div class="example-box">
            <h4>Beispiel: E-Mail-Template-System</h4>
            <div class="email-template-system">
                <div class="template-structure">
                    <h5>Template-Struktur</h5>
                    <div class="template-files">
                        <div class="template-file">
                            <div class="file-header">
                                <span class="file-name">booking_confirmation.html.twig</span>
                                <span class="file-type">Bestätigung</span>
                            </div>
                            <div class="file-content">
                                <div class="template-preview">
                                    <div class="email-header">
                                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="Logo" class="email-logo">
                                        <h2>Buchungsbestätigung</h2>
                                    </div>
                                    <div class="email-body">
                                        <p>Sehr geehrte(r) Max Mustermann,</p>
                                        <p>vielen Dank für Ihre Buchung. Hier sind Ihre Kursdetails:</p>
                                        <div class="appointment-details">
                                            <p><strong>Kurs:</strong> Schwimmkurs für Anfänger</p>
                                            <p><strong>Datum:</strong> 20.03.2024</p>
                                            <p><strong>Uhrzeit:</strong> 16:00 - 17:00</p>
                                            <p><strong>Ort:</strong> Hallenbad Musterstadt</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="template-file">
                            <div class="file-header">
                                <span class="file-name">reminder.html.twig</span>
                                <span class="file-type">Erinnerung</span>
                            </div>
                            <div class="file-content">
                                <div class="template-preview">
                                    <div class="email-header">
                                        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="Logo" class="email-logo">
                                        <h2>Kurserinnerung</h2>
                                    </div>
                                    <div class="email-body">
                                        <p>Sehr geehrte(r) Anna Schmidt,</p>
                                        <p>wir möchten Sie an Ihren morgigen Kurs erinnern:</p>
                                        <div class="appointment-details">
                                            <p><strong>Kurs:</strong> Yoga für Fortgeschrittene</p>
                                            <p><strong>Datum:</strong> 21.03.2024</p>
                                            <p><strong>Uhrzeit:</strong> 18:00 - 19:30</p>
                                            <p><strong>Ort:</strong> Sportzentrum Musterstadt</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="template-features">
                    <h5>Template-Funktionen</h5>
                    <ul>
                        <li>Responsive Design für alle Geräte</li>
                        <li>Dynamische Inhalte mit Twig-Variablen</li>
                        <li>Mehrsprachige Unterstützung</li>
                        <li>Anpassbare Designs pro Fahrschule</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="doc-section">
        <h2>4. Benutzerführung</h2>
        
        <h3>4.1 Für Kunden</h3>
        <div class="feature-list">
            <li>
                <span class="step-number">1</span>
                Startseite besuchen
                <div class="example-box">
                    <p>Besuchen Sie die Startseite und klicken Sie auf "Termin buchen".</p>
                </div>
            </li>
            <li>
                <span class="step-number">2</span>
                Termin im Kalender auswählen
                <div class="example-box">
                    <p>Wählen Sie einen verfügbaren Termin aus dem Kalender aus.</p>
                </div>
            </li>
            <li>
                <span class="step-number">3</span>
                Buchungsformular ausfüllen
                <div class="example-box">
                    <p>Füllen Sie alle erforderlichen Felder im Buchungsformular aus.</p>
                </div>
            </li>
            <li>
                <span class="step-number">4</span>
                Buchung bestätigen
                <div class="example-box">
                    <p>Klicken Sie auf "Buchung bestätigen" und warten Sie auf die Bestätigungs-E-Mail.</p>
                </div>
            </li>
            <li>
                <span class="step-number">5</span>
                E-Mail-Bestätigung abwarten
                <div class="example-box">
                    <p>Überprüfen Sie Ihren E-Mail-Eingang für die Buchungsbestätigung.</p>
                </div>
            </li>
            <li>
                <span class="step-number">6</span>
                Terminverwaltung über E-Mail-Links
                <div class="example-box">
                    <p>Nutzen Sie die Links in der E-Mail für Änderungen oder Stornierungen.</p>
                </div>
            </li>
        </div>

        <h3>4.2 Für Administratoren</h3>
        <div class="feature-list">
            <li>
                <span class="step-number">1</span>
                Admin-Login durchführen
                <div class="example-box">
                    <p>Melden Sie sich mit Ihren Admin-Zugangsdaten an.</p>
                </div>
            </li>
            <li>
                <span class="step-number">2</span>
                Dashboard aufrufen
                <div class="example-box">
                    <p>Navigieren Sie zum Admin-Dashboard über das Hauptmenü.</p>
                </div>
            </li>
            <li>
                <span class="step-number">3</span>
                Buchungen verwalten
                <div class="example-box">
                    <p>Verwalten Sie alle Buchungen über die Übersichtstabelle.</p>
                </div>
            </li>
            <li>
                <span class="step-number">4</span>
                Check-in durchführen
                <div class="example-box">
                    <p>Führen Sie den Check-in für Teilnehmer über den QR-Code-Scanner durch.</p>
                </div>
            </li>
            <li>
                <span class="step-number">5</span>
                Kundenkommunikation
                <div class="example-box">
                    <p>Nutzen Sie das integrierte E-Mail-System für die Kundenkommunikation.</p>
                </div>
            </li>
        </div>
    </div>

    <div class="doc-section">
        <h2>5. Besondere Funktionen</h2>
        
        <h3>5.1 Warteliste</h3>
        <div class="feature-list">
            <li>Automatische Warteliste</li>
            <li>Platzverfügbarkeitsbenachrichtigung</li>
            <li>Priorisierte Buchung</li>
        </div>

        <div class="example-box">
            <h4>Beispiel: Warteliste</h4>
            <div class="waiting-list-example">
                <div class="waiting-list-header">
                    <h5>Warteliste - Schwimmkurs für Anfänger</h5>
                    <span class="badge bg-warning">Ausgebucht</span>
                </div>
                
                <div class="waiting-list-content">
                    <div class="waiting-list-item">
                        <div class="waiting-list-position">1</div>
                        <div class="waiting-list-details">
                            <h6>Max Mustermann</h6>
                            <p>Eingetragen am: 18.03.2024 10:15</p>
                        </div>
                    </div>
                    
                    <div class="waiting-list-item">
                        <div class="waiting-list-position">2</div>
                        <div class="waiting-list-details">
                            <h6>Anna Schmidt</h6>
                            <p>Eingetragen am: 18.03.2024 10:30</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <h3>5.2 Terminänderungen</h3>
        <div class="feature-list">
            <li>Flexible Umplanung</li>
            <li>Automatische Benachrichtigung</li>
            <li>Konfliktprüfung</li>
        </div>

        <div class="example-box">
            <h4>Beispiel: Terminänderung</h4>
            <div class="reschedule-example">
                <div class="reschedule-header">
                    <h5>Termin ändern</h5>
                    <div class="current-appointment">
                        <p><strong>Aktueller Termin:</strong> 20.03.2024 16:00 - 17:00</p>
                        <p><strong>Kurs:</strong> Schwimmkurs für Anfänger</p>
                    </div>
                </div>
                
                <div class="reschedule-form">
                    <div class="mb-3">
                        <label class="form-label">Neuer Termin</label>
                        <input type="datetime-local" class="form-control" value="2024-03-21T16:00" readonly>
                    </div>
                    
                    <div class="reschedule-notification">
                        <h6>Benachrichtigung an Kunden</h6>
                        <p>Sehr geehrte(r) Max Mustermann,</p>
                        <p>Ihr Schwimmkurs wurde auf den 21.03.2024 16:00 - 17:00 Uhr verschoben.</p>
                    </div>
                </div>
            </div>
        </div>

        <h3>5.3 Reporting</h3>
        <div class="feature-list">
            <li>Buchungsstatistiken</li>
            <li>Datenexport</li>
            <li>Teilnehmerlisten</li>
        </div>

        <div class="example-box">
            <h4>Beispiel: Statistiken</h4>
            <div class="stats-example">
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-value">150</div>
                        <div class="stat-label">Gesamtbuchungen</div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-value">120</div>
                        <div class="stat-label">Bestätigte Buchungen</div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-value">15</div>
                        <div class="stat-label">Stornierte Buchungen</div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-value">8.5</div>
                        <div class="stat-label">Durchschnittliche Teilnehmer</div>
                    </div>
                </div>
                
                <div class="stats-chart">
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==" alt="Statistik Diagramm" style="width: 100%; height: 200px; background: #f8f9fa; border: 1px solid #ddd;">
                </div>
            </div>
        </div>
    </div>


</div>
{% endblock %}