{% extends 'public/cancellation/public_base.html.twig' %}

{% block title %}Meine Buchungen - Übersicht{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .bookings-overview-container {
        max-width: 1200px;
        margin: 2rem auto;
        padding: 2rem;
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }

    .overview-header {
        text-align: center;
        margin-bottom: 2rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #e9ecef;
    }

    .overview-header h1 {
        color: #2c3e50;
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .customer-info {
        background: #e8f5e8;
        border: 1px solid #c3e6c3;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 2rem;
        text-align: center;
    }

    .customer-info h3 {
        color: #2d5a2d;
        margin-bottom: 0.5rem;
    }

    .booking-number {
        font-family: 'Courier New', monospace;
        font-size: 1.2rem;
        font-weight: bold;
        color: #007bff;
        background: #f8f9fa;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        display: inline-block;
    }

    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        background: #fff;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        padding: 1.5rem;
        text-align: center;
        transition: all 0.3s ease;
    }

    .stat-card:hover {
        border-color: #007bff;
        box-shadow: 0 4px 12px rgba(0,123,255,0.15);
    }

    .stat-icon {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .stat-number {
        font-size: 2rem;
        font-weight: bold;
        color: #2c3e50;
        margin-bottom: 0.25rem;
    }

    .stat-label {
        color: #6c757d;
        font-size: 0.9rem;
        font-weight: 500;
    }

    .course-card {
        background: #fff;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        transition: all 0.3s ease;
        position: relative;
    }

    .course-card:hover {
        border-color: #007bff;
        box-shadow: 0 4px 12px rgba(0,123,255,0.15);
    }

    .course-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

    .course-title {
        font-size: 1.3rem;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }

    .course-type {
        background: #007bff;
        color: white;
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
    }

    .course-details {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .detail-item {
        display: flex;
        align-items: center;
        color: #6c757d;
    }

    .detail-item i {
        margin-right: 0.5rem;
        width: 16px;
        color: #007bff;
    }

    .appointments-list {
        margin-top: 1rem;
    }

    .appointment-item {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 0.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        transition: all 0.3s ease;
    }

    .appointment-item:hover {
        background: #e3f2fd;
        border-color: #bbdefb;
    }

    .appointment-info {
        flex: 1;
    }

    .appointment-date {
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0.25rem;
    }

    .appointment-time {
        color: #6c757d;
        font-size: 0.9rem;
    }

    .appointment-status {
        padding: 0.25rem 0.75rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 500;
        margin-left: 1rem;
    }

    .status-pending {
        background: #fff3cd;
        color: #856404;
    }

    .status-confirmed {
        background: #d4edda;
        color: #155724;
    }

    .status-cancelled {
        background: #f8d7da;
        color: #721c24;
    }

    .status-completed {
        background: #d1ecf1;
        color: #0c5460;
    }

    .appointment-actions {
        display: flex;
        gap: 0.5rem;
        margin-left: 1rem;
    }

    .action-btn {
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 6px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        font-size: 0.9rem;
    }

    .action-btn:hover {
        transform: translateY(-1px);
        text-decoration: none;
    }

    .btn-cancel {
        background: #dc3545;
        color: white;
    }

    .btn-cancel:hover {
        background: #c82333;
        color: white;
    }

    .btn-reschedule {
        background: #ffc107;
        color: #212529;
    }

    .btn-reschedule:hover {
        background: #e0a800;
        color: #212529;
    }

    .btn-view {
        background: #6c757d;
        color: white;
    }

    .btn-view:hover {
        background: #5a6268;
        color: white;
    }

    .btn-disabled {
        background: #e9ecef;
        color: #6c757d;
        cursor: not-allowed;
    }

    .btn-disabled:hover {
        transform: none;
        background: #e9ecef;
        color: #6c757d;
    }

    .back-btn {
        background: #6c757d;
        border: none;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }

    .back-btn:hover {
        background: #5a6268;
        color: white;
        text-decoration: none;
    }

    .no-appointments {
        text-align: center;
        padding: 2rem;
        color: #6c757d;
    }

    .no-appointments i {
        font-size: 3rem;
        margin-bottom: 1rem;
        color: #dee2e6;
    }

    .email-history {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        margin-top: 1rem;
    }

    .email-history h6 {
        color: #2c3e50;
        margin-bottom: 0.5rem;
    }

    .email-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid #e9ecef;
    }

    .email-item:last-child {
        border-bottom: none;
    }

    .email-subject {
        font-weight: 500;
        color: #2c3e50;
    }

    .email-date {
        color: #6c757d;
        font-size: 0.9rem;
    }

    .location-details {
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .location-details h6 {
        color: #2c3e50;
        margin-bottom: 0.75rem;
        font-weight: 600;
    }

    .location-address {
        color: #495057;
        line-height: 1.5;
    }

    .location-contact {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .contact-item {
        display: flex;
        align-items: center;
        color: #6c757d;
    }

    .contact-item a {
        color: #007bff;
        text-decoration: none;
    }

    .contact-item a:hover {
        text-decoration: underline;
    }

    .location-description {
        border-top: 1px solid #e9ecef;
        padding-top: 0.75rem;
    }

    @media (max-width: 768px) {
        .bookings-overview-container {
            margin: 1rem;
            padding: 1.5rem;
        }
        
        .overview-header h1 {
            font-size: 1.5rem;
        }
        
        .course-details {
            grid-template-columns: 1fr;
        }
        
        .appointment-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 0.75rem;
        }
        
        .appointment-actions {
            margin-left: 0;
            width: 100%;
            justify-content: flex-start;
        }
        
        .action-btn {
            flex: 1;
            justify-content: center;
        }
        
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="bookings-overview-container">
    <a href="{{ path('public_my_bookings') }}" class="back-btn">
        <i class="fas fa-arrow-left me-2"></i>Neue Buchungsnummer eingeben
    </a>

    <div class="overview-header">
        <h1><i class="fas fa-user-circle me-2"></i>Meine Buchungen</h1>
        <p>Übersicht über alle Ihre Termine und Buchungen</p>
    </div>

    <div class="customer-info">
        <h3><i class="fas fa-user me-2"></i>Willkommen, {{ customer.firstName }} {{ customer.lastName }}!</h3>
        <p>Buchungsnummer: <span class="booking-number">{{ bookingNumber }}</span></p>
    </div>

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-calendar-check" style="color: #007bff;"></i>
            </div>
            <div class="stat-number">{{ stats.total }}</div>
            <div class="stat-label">Gesamt</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-clock" style="color: #ffc107;"></i>
            </div>
            <div class="stat-number">{{ stats.active }}</div>
            <div class="stat-label">Aktiv</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-times-circle" style="color: #dc3545;"></i>
            </div>
            <div class="stat-number">{{ stats.cancelled }}</div>
            <div class="stat-label">Abgesagt</div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <i class="fas fa-check-circle" style="color: #28a745;"></i>
            </div>
            <div class="stat-number">{{ stats.completed }}</div>
            <div class="stat-label">Abgeschlossen</div>
        </div>
    </div>

    {% if groupedAppointments is empty %}
        <div class="no-appointments">
            <i class="fas fa-calendar-times"></i>
            <h3>Keine Buchungen gefunden</h3>
            <p>Es wurden keine Buchungen für diese Buchungsnummer gefunden.</p>
            <a href="{{ path('public_my_bookings') }}" class="btn btn-primary">
                <i class="fas fa-arrow-left me-2"></i>Neue Buchungsnummer eingeben
            </a>
        </div>
    {% else %}
        {% for courseId, courseData in groupedAppointments %}
            {% set course = courseData.course %}
            {% set appointments = courseData.appointments %}
            
            <div class="course-card">
                <div class="course-header">
                    <div>
                        <div class="course-title">{{ course.name }}</div>
                        <div class="course-type">{{ course.type|title }}</div>
                    </div>
                </div>

                <div class="course-details">
                    <div class="detail-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>{{ course.location ? course.location.name : 'Standort nicht zugewiesen' }}</span>
                    </div>
                    <div class="detail-item">
                        <i class="fas fa-users"></i>
                        <span>Max. {{ course.maxSlots }} Teilnehmer</span>
                    </div>
                    {% if course.targetGroup %}
                        <div class="detail-item">
                            <i class="fas fa-tag"></i>
                            <span>{{ course.targetGroup }}</span>
                        </div>
                    {% endif %}
                    <div class="detail-item">
                        <i class="fas fa-calendar"></i>
                        <span>{{ appointments|length }} Termin{{ appointments|length != 1 ? 'e' : '' }}</span>
                    </div>
                </div>

                {% if course.location %}
                    <div class="location-details">
                        <h6><i class="fas fa-map-marker-alt me-2"></i>Standort-Details</h6>
                        <div class="location-info">
                            <div class="location-address">
                                <strong>{{ course.location.name }}</strong><br>
                                {{ course.location.address }}<br>
                                {{ course.location.postalCode }} {{ course.location.city }}
                            </div>
                            
                            {% if course.location.phone or course.location.email %}
                                <div class="location-contact mt-2">
                                    {% if course.location.phone %}
                                        <div class="contact-item">
                                            <i class="fas fa-phone me-2"></i>
                                            <a href="tel:{{ course.location.phone }}">{{ course.location.phone }}</a>
                                        </div>
                                    {% endif %}
                                    {% if course.location.email %}
                                        <div class="contact-item">
                                            <i class="fas fa-envelope me-2"></i>
                                            <a href="mailto:{{ course.location.email }}">{{ course.location.email }}</a>
                                        </div>
                                    {% endif %}
                                </div>
                            {% endif %}
                            
                            {% if course.location.description %}
                                <div class="location-description mt-2">
                                    <small class="text-muted">{{ course.location.description }}</small>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endif %}

                <div class="appointments-list">
                    <h5><i class="fas fa-calendar me-2"></i>Ihre Termine:</h5>
                    
                    {% if courseData.courseDates is defined and courseData.courseDates|length > 0 %}
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Datum</th>
                                        <th>Uhrzeit</th>
                                        <th>Ort</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for d in courseData.courseDates %}
                                        <tr>
                                            <td>{{ d.date|date('d.m.Y') }}</td>
                                            <td>{{ d.startTime|date('H:i') }} - {{ d.endTime|date('H:i') }}</td>
                                            <td>{{ d.location }}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="no-appointments">
                            <i class="fas fa-calendar-times"></i>
                            <h3>Keine Termine gefunden</h3>
                            <p>Es wurden keine Termine für diesen Kurs gefunden.</p>
                        </div>
                    {% endif %}
                </div>

                <!-- E-Mail-Historie für diesen Kurs -->
                <div class="email-history">
                    <h6><i class="fas fa-envelope me-2"></i>E-Mail-Historie</h6>
                    <div class="email-item">
                        <div>
                            <div class="email-subject">Buchungsbestätigung</div>
                            <div class="email-date">{{ appointments[0].createdAt|date('d.m.Y H:i') }}</div>
                        </div>
                        <i class="fas fa-check-circle text-success"></i>
                    </div>
                    {% if appointments[0].status == 'confirmed' %}
                        <div class="email-item">
                            <div>
                                <div class="email-subject">Terminbestätigung</div>
                                <div class="email-date">Nach Buchung</div>
                            </div>
                            <i class="fas fa-check-circle text-success"></i>
                        </div>
                    {% endif %}
                    {% for appointment in appointments %}
                        {% if appointment.status == 'cancelled' %}
                            <div class="email-item">
                                <div>
                                    <div class="email-subject">Abmeldungsbestätigung</div>
                                    <div class="email-date">{{ appointment.updatedAt ? appointment.updatedAt|date('d.m.Y H:i') : 'Unbekannt' }}</div>
                                </div>
                                <i class="fas fa-times-circle text-danger"></i>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
        {% endfor %}
    {% endif %}
</div>

<!-- Abmeldungs-Modal -->
<div class="modal fade" id="cancellationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>Abmeldung bestätigen
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning">
                    <i class="fas fa-info-circle me-2"></i>
                    <strong>Wichtiger Hinweis:</strong> Diese Aktion kann nicht rückgängig gemacht werden.
                </div>
                
                <div id="appointmentDetails"></div>
                
                <form id="cancellationForm">
                    <input type="hidden" id="appointmentId" name="appointment_id">
                    <input type="hidden" name="booking_number" value="{{ bookingNumber }}">
                    
                    <div class="mb-3">
                        <label for="reason" class="form-label">Grund für die Abmeldung (optional)</label>
                        <textarea 
                            id="reason" 
                            name="reason" 
                            class="form-control" 
                            rows="3" 
                            placeholder="z.B. Krankheit, Terminkonflikt, etc."
                        ></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label for="email" class="form-label">E-Mail-Adresse zur Bestätigung</label>
                        <input 
                            type="email" 
                            id="email" 
                            name="email" 
                            class="form-control" 
                            placeholder="{{ customer.email }}"
                            value="{{ customer.email }}"
                            required
                        >
                        <div class="form-text">
                            Sie erhalten eine Bestätigungs-E-Mail an diese Adresse
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Abbrechen
                </button>
                <button type="button" class="btn btn-danger" onclick="confirmCancellation()">
                    <i class="fas fa-check me-2"></i>Abmeldung bestätigen
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Termin-Details Modal -->
<div class="modal fade" id="appointmentDetailsModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-calendar-check me-2"></i>Termin-Details
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="appointmentDetailsContent">
                <!-- Wird von JavaScript gefüllt -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Schließen
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
    let selectedAppointmentId = null;

    function cancelAppointment(appointmentId, courseName, appointmentDate) {
        selectedAppointmentId = appointmentId;
        
        // Fülle Modal mit Termin-Details
        document.getElementById('appointmentDetails').innerHTML = `
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Termin-Details</h6>
                    <p><strong>Kurs:</strong> ${courseName}</p>
                    <p><strong>Datum:</strong> ${appointmentDate}</p>
                    <p><strong>Buchungsnummer:</strong> {{ bookingNumber }}</p>
                </div>
            </div>
        `;
        
        document.getElementById('appointmentId').value = appointmentId;
        
        // Zeige Modal
        const modal = new bootstrap.Modal(document.getElementById('cancellationModal'));
        modal.show();
    }

    function confirmCancellation() {
        const form = document.getElementById('cancellationForm');
        const formData = new FormData(form);
        
        // Validierung
        const email = document.getElementById('email').value.trim();
        if (!email) {
            alert('Bitte geben Sie Ihre E-Mail-Adresse ein.');
            return;
        }
        
        if (!isValidEmail(email)) {
            alert('Bitte geben Sie eine gültige E-Mail-Adresse ein.');
            return;
        }
        
        // Bestätigung
        if (!confirm('Sind Sie sicher, dass Sie sich von diesem Termin abmelden möchten?')) {
            return;
        }
        
        // Formular absenden
        fetch('{{ path('public_cancellation_cancel') }}', {
            method: 'POST',
            body: formData
        })
        .then(response => response.text())
        .then(html => {
            // Redirect zur Hauptseite (mit Flash-Message)
            window.location.href = '{{ path('public_my_bookings') }}';
        })
        .catch(error => {
            console.error('Fehler:', error);
            alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
        });
    }

    function viewAppointmentDetails(appointmentId) {
        // Hier könnten wir AJAX verwenden, um die Details zu laden
        // Für jetzt zeigen wir eine einfache Nachricht
        alert('Termin-Details werden geladen... (Feature in Entwicklung)');
    }

    function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }

    // Auto-Focus auf E-Mail-Feld wenn Modal geöffnet wird
    document.getElementById('cancellationModal').addEventListener('shown.bs.modal', function() {
        document.getElementById('email').focus();
    });

</script>
{% endblock %}