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

{% block title %}Meine Buchungen{% endblock %}

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

    .bookings-header {
        text-align: center;
        margin-bottom: 2rem;
    }

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

    .bookings-header p {
        color: #7f8c8d;
        font-size: 1.1rem;
    }

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

    .form-group {
        margin-bottom: 1.5rem;
    }

    .form-label {
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 0.5rem;
        display: block;
    }

    .form-control {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #e9ecef;
        border-radius: 6px;
        font-size: 1rem;
        transition: border-color 0.3s ease;
    }

    .form-control:focus {
        outline: none;
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    }

    .btn-primary {
        background: linear-gradient(135deg, #007bff, #0056b3);
        border: none;
        padding: 0.75rem 2rem;
        border-radius: 6px;
        color: white;
        font-weight: 600;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.3s ease;
        width: 100%;
    }

    .btn-primary:hover {
        background: linear-gradient(135deg, #0056b3, #004085);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,123,255,0.3);
    }

    .help-text {
        font-size: 0.9rem;
        color: #6c757d;
        margin-top: 0.5rem;
    }

    .alert {
        padding: 1rem;
        border-radius: 6px;
        margin-bottom: 1rem;
        border: 1px solid transparent;
    }

    .alert-success {
        background-color: #d4edda;
        border-color: #c3e6cb;
        color: #155724;
    }

    .alert-danger {
        background-color: #f8d7da;
        border-color: #f5c6cb;
        color: #721c24;
    }

    .info-box {
        background: #e3f2fd;
        border: 1px solid #bbdefb;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    .info-box h3 {
        color: #1976d2;
        margin-bottom: 1rem;
        font-size: 1.2rem;
    }

    .info-box ul {
        margin: 0;
        padding-left: 1.5rem;
    }

    .info-box li {
        margin-bottom: 0.5rem;
        color: #424242;
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
        margin-top: 2rem;
    }

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

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

    .feature-icon {
        font-size: 2.5rem;
        color: #007bff;
        margin-bottom: 1rem;
    }

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

    .feature-description {
        color: #6c757d;
        font-size: 0.9rem;
        line-height: 1.4;
    }

    .quick-actions {
        display: flex;
        gap: 1rem;
        justify-content: center;
        margin-top: 2rem;
        flex-wrap: wrap;
    }

    .quick-action-btn {
        background: #6c757d;
        border: none;
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 6px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        transition: all 0.3s ease;
        font-weight: 500;
    }

    .quick-action-btn:hover {
        background: #5a6268;
        color: white;
        text-decoration: none;
        transform: translateY(-1px);
    }

    .quick-action-btn.primary {
        background: #007bff;
    }

    .quick-action-btn.primary:hover {
        background: #0056b3;
    }

    @media (max-width: 768px) {
        .bookings-container {
            margin: 1rem;
            padding: 1.5rem;
        }
        
        .bookings-header h1 {
            font-size: 1.5rem;
        }
        
        .features-grid {
            grid-template-columns: 1fr;
        }
        
        .quick-actions {
            flex-direction: column;
        }
        
        .quick-action-btn {
            width: 100%;
            justify-content: center;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="bookings-container">
    <div class="bookings-header">
        <h1><i class="fas fa-user-circle me-2"></i>Meine Buchungen</h1>
        <p>Verwalten Sie Ihre Termine und Buchungen</p>
    </div>

    <div class="info-box">
        <h3><i class="fas fa-info-circle me-2"></i>Was Sie hier tun können:</h3>
        <ul>
            <li><strong>Alle Ihre Buchungen einsehen</strong> - Übersicht über alle Termine</li>
            <li><strong>Buchungsdetails anzeigen</strong> - Kursinformationen, Zeiten, Standorte</li>
            <li><strong>Termine abmelden</strong> - Einfache Abmeldung mit Grund</li>
            <li><strong>Termine umbuchen</strong> - Auf andere Termine wechseln</li>
            <li><strong>E-Mail-Historie</strong> - Alle versendeten E-Mails einsehen</li>
            <li><strong>Buchungsnummer verwalten</strong> - Sichere Authentifizierung</li>
        </ul>
    </div>

    <form method="POST" action="{{ path('public_my_bookings_verify') }}" class="booking-form">
        <div class="form-group">
            <label for="booking_number" class="form-label">
                <i class="fas fa-ticket-alt me-2"></i>Buchungsnummer eingeben
            </label>
            <input 
                type="text" 
                id="booking_number" 
                name="booking_number" 
                class="form-control" 
                placeholder="z.B. ABC123456"
                required
                autocomplete="off"
            >
            <div class="help-text">
                <i class="fas fa-question-circle me-1"></i>
                Die Buchungsnummer finden Sie in Ihrer Bestätigungs-E-Mail
            </div>
        </div>

        <button type="submit" class="btn-primary">
            <i class="fas fa-search me-2"></i>Meine Buchungen anzeigen
        </button>
    </form>

    <div class="features-grid">
        <div class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-calendar-check"></i>
            </div>
            <div class="feature-title">Buchungsübersicht</div>
            <div class="feature-description">
                Sehen Sie alle Ihre Termine auf einen Blick - aktive, abgesagte und abgeschlossene Buchungen
            </div>
        </div>

        <div class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-calendar-times"></i>
            </div>
            <div class="feature-title">Termin abmelden</div>
            <div class="feature-description">
                Melden Sie sich einfach von Terminen ab - mit Grund und automatischer Bestätigung
            </div>
        </div>

        <div class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-calendar-plus"></i>
            </div>
            <div class="feature-title">Termin umbuchen</div>
            <div class="feature-description">
                Wechseln Sie auf andere verfügbare Termine - flexibel und unkompliziert
            </div>
        </div>

        <div class="feature-card">
            <div class="feature-icon">
                <i class="fas fa-envelope"></i>
            </div>
            <div class="feature-title">E-Mail-Historie</div>
            <div class="feature-description">
                Alle versendeten E-Mails einsehen - Bestätigungen, Erinnerungen und Benachrichtigungen
            </div>
        </div>
    </div>

    <div class="quick-actions">
        <a href="{{ path('public_cancellation') }}" class="quick-action-btn">
            <i class="fas fa-calendar-times me-2"></i>Nur abmelden
        </a>
    </div>

    <div class="text-center mt-4">
        <p class="text-muted">
            <i class="fas fa-phone me-1"></i>
            Bei Problemen kontaktieren Sie uns unter: 
            <a href="mailto:info@swimmonitor.de">info@swimmonitor.de</a>
        </p>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
    // Auto-Focus auf Buchungsnummer-Feld
    document.addEventListener('DOMContentLoaded', function() {
        const bookingInput = document.getElementById('booking_number');
        if (bookingInput) {
            bookingInput.focus();
        }
    });

    // Form-Validierung
    document.querySelector('form').addEventListener('submit', function(e) {
        const bookingNumber = document.getElementById('booking_number').value.trim();
        
        if (!bookingNumber) {
            e.preventDefault();
            alert('Bitte geben Sie Ihre Buchungsnummer ein.');
            return;
        }
        
        if (bookingNumber.length < 3) {
            e.preventDefault();
            alert('Die Buchungsnummer scheint zu kurz zu sein. Bitte überprüfen Sie Ihre Eingabe.');
            return;
        }
    });
</script>
{% endblock %}