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

{% block title %}Termin auswählen - Abmeldung{% endblock %}

{% block stylesheets %}
{{ parent() }}
<style>
    .cancellation-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);
    }

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

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

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

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

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

    .cancel-btn {
        background: linear-gradient(135deg, #dc3545, #c82333);
        border: none;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 6px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-left: 1rem;
    }

    .cancel-btn:hover {
        background: linear-gradient(135deg, #c82333, #bd2130);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(220,53,69,0.3);
    }

    .cancel-btn:disabled {
        background: #6c757d;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .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.completed {
        color: #28a745;
    }

    .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.completed .step-number {
        background: #28a745;
        color: white;
    }

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

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

    @media (max-width: 768px) {
        .cancellation-container {
            margin: 1rem;
            padding: 1.5rem;
        }
        
        .cancellation-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-status {
            margin-left: 0;
            align-self: flex-start;
        }
        
        .cancel-btn {
            margin-left: 0;
            width: 100%;
        }
        
        .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">
    <a href="{{ path('public_cancellation') }}" class="back-btn">
        <i class="fas fa-arrow-left me-2"></i>Zurück zur Buchungsnummer
    </a>

    <div class="cancellation-header">
        <h1><i class="fas fa-calendar-check me-2"></i>Termin auswählen</h1>
        <p>Wählen Sie den Termin aus, von dem Sie sich abmelden möchten</p>
    </div>

    <div class="step-indicator">
        <div class="step completed">
            <div class="step-number">1</div>
            <span>Buchungsnummer eingeben</span>
        </div>
        <div class="step active">
            <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="booking-info">
        <h3><i class="fas fa-ticket-alt me-2"></i>Ihre Buchung</h3>
        <p>Buchungsnummer: <span class="booking-number">{{ bookingNumber }}</span></p>
    </div>

    {% if groupedAppointments is empty %}
        <div class="no-appointments">
            <i class="fas fa-calendar-times"></i>
            <h3>Keine Termine gefunden</h3>
            <p>Es wurden keine aktiven Termine für diese Buchungsnummer gefunden.</p>
            <a href="{{ path('public_cancellation') }}" 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>

                <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 %}
                        {% for d in courseData.courseDates %}
                            {% if d.appointment %}
                                <div class="appointment-item">
                                    <div class="appointment-info">
                                        <div class="appointment-date">
                                            {{ d.date|date('d.m.Y') }}
                                        </div>
                                        <div class="appointment-time">
                                            {{ d.startTime|date('H:i') }} - {{ d.endTime|date('H:i') }} Uhr
                                        </div>
                                    </div>
                                    
                                    <div class="appointment-status status-{{ d.appointment.status }}">
                                        {% if d.appointment.status == 'pending' %}
                                            Ausstehend
                                        {% elseif d.appointment.status == 'confirmed' %}
                                            Bestätigt
                                        {% else %}
                                            {{ d.appointment.status|title }}
                                        {% endif %}
                                    </div>

                                    <button 
                                        class="cancel-btn" 
                                        onclick="cancelAppointment({{ d.appointment.id }}, '{{ course.name }}', '{{ d.date|date('d.m.Y H:i') }}')"
                                    >
                                        <i class="fas fa-times me-2"></i>Abmelden
                                    </button>
                                </div>
                            {% endif %}
                        {% endfor %}
                    {% 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>
            </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 }}">
                    
                    <!-- Tag-Auswahl für Ferienkurse -->
                    <div class="mb-3" id="daySelectionContainer" style="display: none;">
                        <label class="form-label">Wählen Sie die Tage aus, von denen Sie sich abmelden möchten:</label>
                        <div id="daySelectionList" class="row">
                            <!-- Wird von JavaScript gefüllt -->
                        </div>
                    </div>
                    
                    <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="ihre@email.de"
                            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>
{% 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;
        
        // Prüfe ob es ein Ferienkurs ist und zeige Tag-Auswahl
        const courseData = getCourseDataByAppointmentId(appointmentId);
        if (courseData && courseData.courseDates && courseData.courseDates.length > 1) {
            showDaySelection(courseData.courseDates);
        } else {
            hideDaySelection();
        }
        
        // Zeige Modal
        const modal = new bootstrap.Modal(document.getElementById('cancellationModal'));
        modal.show();
    }
    
    function getCourseDataByAppointmentId(appointmentId) {
        // Finde die Kursdaten für das Appointment
        {% for courseId, courseData in groupedAppointments %}
            {% for d in courseData.courseDates %}
                {% if d.appointment and d.appointment.id %}
                    if ({{ d.appointment.id }} == appointmentId) {
                        return {
                            courseDates: {{ courseData.courseDates|json_encode|raw }}
                        };
                    }
                {% endif %}
            {% endfor %}
        {% endfor %}
        return null;
    }
    
    function showDaySelection(courseDates) {
        const container = document.getElementById('daySelectionContainer');
        const list = document.getElementById('daySelectionList');
        
        list.innerHTML = '';
        
        courseDates.forEach((day, index) => {
            if (day.appointment) {
                const dayElement = document.createElement('div');
                dayElement.className = 'col-md-6 mb-2';
                
                // Extrahiere DateTime-Objekte aus PHP
                let dateStr, startTime, endTime, dateValue;
                
                try {
                    // Datum aus PHP DateTime-Objekt extrahieren
                    if (day.date && day.date.date) {
                        const dateObj = new Date(day.date.date);
                        if (!isNaN(dateObj.getTime())) {
                            dateStr = dateObj.toLocaleDateString('de-DE');
                            dateValue = dateObj.toISOString().split('T')[0];
                        } else {
                            dateStr = day.date.date;
                            dateValue = day.date.date.split(' ')[0];
                        }
                    } else {
                        dateStr = 'Unbekannt';
                        dateValue = '';
                    }
                    
                    // Start-Zeit aus PHP DateTime-Objekt extrahieren
                    if (day.startTime && day.startTime.date) {
                        const startTimeObj = new Date(day.startTime.date);
                        if (!isNaN(startTimeObj.getTime())) {
                            startTime = startTimeObj.toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit'});
                        } else {
                            startTime = day.startTime.date.split(' ')[1] || '00:00';
                        }
                    } else {
                        startTime = '00:00';
                    }
                    
                    // End-Zeit aus PHP DateTime-Objekt extrahieren
                    if (day.endTime && day.endTime.date) {
                        const endTimeObj = new Date(day.endTime.date);
                        if (!isNaN(endTimeObj.getTime())) {
                            endTime = endTimeObj.toLocaleTimeString('de-DE', {hour: '2-digit', minute: '2-digit'});
                        } else {
                            endTime = day.endTime.date.split(' ')[1] || '00:00';
                        }
                    } else {
                        endTime = '00:00';
                    }
                } catch (error) {
                    console.error('Datum-Formatierungsfehler:', error);
                    dateStr = 'Unbekannt';
                    startTime = '00:00';
                    endTime = '00:00';
                    dateValue = '';
                }
                
                dayElement.innerHTML = `
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" 
                               id="day_${index}" 
                               name="selected_days[]" 
                               value="${dateValue}"
                               checked>
                        <label class="form-check-label" for="day_${index}">
                            <strong>${dateStr}</strong> - ${startTime} - ${endTime}
                        </label>
                    </div>
                `;
                list.appendChild(dayElement);
            }
        });
        
        container.style.display = 'block';
    }
    
    function hideDaySelection() {
        document.getElementById('daySelectionContainer').style.display = 'none';
    }
    
    function showSuccessModal() {
        // Erstelle Erfolgs-Modal
        const successModal = document.createElement('div');
        successModal.className = 'modal fade';
        successModal.id = 'successModal';
        successModal.innerHTML = `
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-success text-white">
                        <h5 class="modal-title">
                            <i class="fas fa-check-circle me-2"></i>
                            Abmeldung erfolgreich!
                        </h5>
                    </div>
                    <div class="modal-body text-center">
                        <div class="mb-3">
                            <i class="fas fa-check-circle text-success" style="font-size: 3rem;"></i>
                        </div>
                        <h6>Ihre Abmeldung wurde erfolgreich verarbeitet!</h6>
                        <p class="text-muted mb-0">Sie erhalten eine Bestätigungs-E-Mail an die angegebene Adresse.</p>
                    </div>
                    <div class="modal-footer justify-content-center">
                        <button type="button" class="btn btn-success" onclick="redirectToMain()">
                            <i class="fas fa-home me-2"></i>
                            Zurück zur Hauptseite
                        </button>
                    </div>
                </div>
            </div>
        `;
        
        // Füge Modal zum Body hinzu
        document.body.appendChild(successModal);
        
        // Zeige Modal
        const modal = new bootstrap.Modal(successModal);
        modal.show();
        
        // Entferne Modal nach Schließen
        successModal.addEventListener('hidden.bs.modal', function() {
            document.body.removeChild(successModal);
        });
    }
    
    function redirectToMain() {
        window.location.href = '/cancellation';
    }

    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 => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.text();
        })
        .then(html => {
            // Zeige Erfolgs-Modal statt Redirect
            showSuccessModal();
        })
        .catch(error => {
            console.error('Fehler:', error);
            alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
        });
    }

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