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

{% block title %}Termin abmelden{% endblock %}

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

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

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

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

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

    .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;
    }

    .step-indicator {
        display: flex;
        justify-content: center;
        margin-bottom: 2rem;
    }

    .step {
        display: flex;
        align-items: center;
        color: #6c757d;
        font-weight: 500;
    }

    .step.active {
        color: #007bff;
    }

    .step-number {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #e9ecef;
        color: #6c757d;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.5rem;
        font-weight: 600;
    }

    .step.active .step-number {
        background: #007bff;
        color: white;
    }

    .step:not(:last-child)::after {
        content: '→';
        margin: 0 1rem;
        color: #e9ecef;
    }

    @media (max-width: 768px) {
        .cancellation-container {
            margin: 1rem;
            padding: 1.5rem;
        }
        
        .cancellation-header h1 {
            font-size: 1.5rem;
        }
        
        .step-indicator {
            flex-direction: column;
            gap: 1rem;
        }
        
        .step:not(:last-child)::after {
            content: '↓';
            margin: 0.5rem 0;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="cancellation-container">
    <div class="cancellation-header">
        <h1><i class="fas fa-calendar-times me-2"></i>Termin abmelden</h1>
        <p>Geben Sie Ihre Buchungsnummer ein, um sich von einem Termin abzumelden</p>
    </div>

    <div class="step-indicator">
        <div class="step active">
            <div class="step-number">1</div>
            <span>Buchungsnummer eingeben</span>
        </div>
        <div class="step">
            <div class="step-number">2</div>
            <span>Termin auswählen</span>
        </div>
        <div class="step">
            <div class="step-number">3</div>
            <span>Abmeldung bestätigen</span>
        </div>
    </div>

    <div class="info-box">
        <h3><i class="fas fa-info-circle me-2"></i>So funktioniert die Abmeldung:</h3>
        <ul>
            <li>Geben Sie Ihre Buchungsnummer ein (finden Sie in Ihrer Bestätigungs-E-Mail)</li>
            <li>Wählen Sie den Termin aus, von dem Sie sich abmelden möchten</li>
            <li>Bestätigen Sie Ihre Abmeldung</li>
            <li>Sie erhalten eine Bestätigungs-E-Mail</li>
        </ul>
    </div>

    <form method="POST" action="{{ path('public_cancellation_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
            </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>Termine suchen
        </button>
    </form>

    <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 %}