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

{% block title %}Termin umbuchen{% endblock %}
{% block header_title %}Termin umbuchen{% endblock %}

{% block stylesheets %}
{{ parent() }}
<link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.css' rel='stylesheet' />
<style>
    .reschedule-container {
        background: #f8f9fc;
        border-radius: 15px;
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    .current-appointment-card {
        background: linear-gradient(135deg, #4e73df, #375fc7);
        color: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 2rem;
    }
    
    .appointment-info {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
    }
    
    .appointment-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 600;
    }
    
    .appointment-details h5 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
    }
    
    .appointment-details p {
        margin: 0.25rem 0;
        opacity: 0.9;
    }
    
    .status-badge {
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        text-transform: uppercase;
    }
    
    .status-confirmed {
        background: rgba(40, 167, 69, 0.2);
        color: #28a745;
        border: 1px solid rgba(40, 167, 69, 0.3);
    }
    
    .status-pending {
        background: rgba(255, 193, 7, 0.2);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.3);
    }
    
    .calendar-section {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .filter-card {
        background: #f8f9fc;
        border-radius: 10px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .calendar-container {
        position: relative;
        margin-bottom: 1rem;
        min-height: 600px;
    }
    
    .calendar-loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9);
        display: none;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        z-index: 1000;
        border-radius: 12px;
    }
    
    .loading-spinner {
        width: 3rem;
        height: 3rem;
        border: 0.25rem solid #dee2e6;
        border-right-color: #4e73df;
        border-radius: 50%;
        animation: spinner-border 0.75s linear infinite;
    }
    
    .selected-slot-info {
        background: linear-gradient(135deg, #17a2b8, #138496);
        color: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        border-left: 4px solid #0dcaf0;
    }
    
    .reschedule-form {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .legend-card {
        background: #f8f9fc;
        border-radius: 10px;
        padding: 1.5rem;
        margin-top: 1.5rem;
    }
    
    .legend-badge {
        font-size: 0.8rem;
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
        font-weight: 600;
    }
    
    /* FullCalendar Anpassungen */
    .fc-event {
        cursor: pointer;
        transition: all 0.2s ease;
        border-radius: 6px;
    }
    
    .fc-event:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .fc-event.available-slot {
        background-color: #28a745 !important;
        border-color: #28a745 !important;
    }
    
    .fc-event.partially-booked-slot {
        background-color: #ffc107 !important;
        border-color: #ffc107 !important;
        color: #000 !important;
    }
    
    .fc-event.booked-slot {
        background-color: #dc3545 !important;
        border-color: #dc3545 !important;
    }
    
    .fc-event.unavailable-slot {
        background-color: #6c757d !important;
        border-color: #6c757d !important;
    }
    
    .fc-event.selected-slot {
        background-color: #4e73df !important;
        border-color: #4e73df !important;
        box-shadow: 0 0 0 3px rgba(78, 115, 223, 0.3);
    }
    
    .fc-toolbar-title {
        font-size: 1.5rem !important;
        font-weight: 700;
        color: #5a5c69;
    }
    
    .fc-button {
        background-color: #4e73df !important;
        border-color: #4e73df !important;
        border-radius: 6px !important;
        font-weight: 600;
    }
    
    .fc-button:hover {
        background-color: #375fc7 !important;
        border-color: #375fc7 !important;
    }
    
    .fc-button:focus {
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25) !important;
    }
    
    .fc-daygrid-day.fc-day-today {
        background-color: rgba(78, 115, 223, 0.1) !important;
    }
    
    .fc-timegrid-slot.fc-slot-today {
        background-color: rgba(78, 115, 223, 0.05) !important;
    }
    
    .btn-modern {
        border-radius: 8px;
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        transition: all 0.2s ease;
    }
    
    .btn-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1><i class="fas fa-calendar-alt me-2"></i>Termin umbuchen</h1>
            <div class="page-breadcrumb">
                <a href="{{ path('admin_dashboard') }}"><i class="fas fa-home"></i> Dashboard</a>
                <i class="fas fa-chevron-right"></i>
                <a href="{{ path('admin_appointments_list') }}">Termine</a>
                <i class="fas fa-chevron-right"></i>
                <span>Umbuchen</span>
            </div>
        </div>
    </div>
</div>

<!-- Aktueller Termin -->
<div class="current-appointment-card">
    <div class="appointment-info">
        <div class="appointment-avatar">
            {{ appointment.customer.firstName|first }}{{ appointment.customer.lastName|first }}
        </div>
        <div class="appointment-details">
            <h5>{{ appointment.customer.firstName }} {{ appointment.customer.lastName }}</h5>
            <p><i class="fas fa-calendar me-2"></i>{{ appointment.startTime|date('d.m.Y H:i') }} Uhr</p>
            <p><i class="fas fa-graduation-cap me-2"></i>{{ appointment.availability ? appointment.availability.name : 'Unbekannt' }}</p>
            <p><i class="fas fa-map-marker-alt me-2"></i>{{ appointment.location ? appointment.location.name : 'Unbekannt' }}</p>
            <p><i class="fas fa-ticket-alt me-2"></i>Buchungsnummer: {{ appointment.bookingToken }}</p>
        </div>
        <div class="ms-auto">
            <span class="status-badge status-{{ appointment.status }}">
                {{ appointment.status|upper }}
            </span>
        </div>
    </div>
    
    {% if appointment.extraFieldValues %}
    <div class="mt-3">
        <h6><i class="fas fa-info-circle me-2"></i>Zusatzfelder:</h6>
        <div class="row">
            {% for field in appointment.extraFieldValues %}
            <div class="col-md-6">
                <strong>{{ field.label }}:</strong> {{ field.value }}
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>

<!-- Ausgewählter neuer Termin -->
<div id="selected-slot-info" class="selected-slot-info" style="display: none;">
    <h5><i class="fas fa-check-circle me-2"></i>Ausgewählter neuer Termin</h5>
    <div id="selected-slot-details"></div>
</div>

<!-- Kalender Sektion -->
<div class="calendar-section">
    <h5 class="mb-4"><i class="fas fa-calendar-week me-2"></i>Verfügbare Termine auswählen</h5>
    
    <!-- Filter -->
    <div class="filter-card">
        <div class="row g-3">
            <div class="col-md-4">
                <label for="location-filter" class="form-label fw-semibold">
                    <i class="fas fa-map-marker-alt me-1"></i>Standort
                </label>
                <select id="location-filter" class="form-select">
                    <option value="">Alle Standorte</option>
                </select>
            </div>
            <div class="col-md-4">
                <label for="course-filter" class="form-label fw-semibold">
                    <i class="fas fa-graduation-cap me-1"></i>Kurs
                </label>
                <select id="course-filter" class="form-select">
                    <option value="">Alle Kurse</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label fw-semibold">&nbsp;</label>
                <button id="refresh-calendar" class="btn btn-outline-primary btn-modern w-100">
                    <i class="fas fa-sync-alt me-2"></i>Kalender aktualisieren
                </button>
            </div>
        </div>
    </div>
    
    <!-- Kalender -->
    <div class="calendar-container">
        <div id="calendar"></div>
        <div class="calendar-loading-overlay">
            <div class="loading-spinner"></div>
            <p class="mt-3 text-muted">Lade verfügbare Termine...</p>
        </div>
    </div>
    
    <!-- Legende -->
    <div class="legend-card">
        <h6 class="mb-3"><i class="fas fa-info-circle me-2"></i>Legende</h6>
        <div class="row">
            <div class="col-md-3">
                <span class="legend-badge bg-success">Verfügbar</span>
                <small class="text-muted d-block">Freie Plätze vorhanden</small>
            </div>
            <div class="col-md-3">
                <span class="legend-badge bg-warning text-dark">Teilweise belegt</span>
                <small class="text-muted d-block">Wenige Plätze verfügbar</small>
            </div>
            <div class="col-md-3">
                <span class="legend-badge bg-danger">Ausgebucht</span>
                <small class="text-muted d-block">Keine Plätze verfügbar</small>
            </div>
            <div class="col-md-3">
                <span class="legend-badge bg-secondary">Nicht verfügbar</span>
                <small class="text-muted d-block">Kurs nicht an diesem Tag</small>
            </div>
        </div>
    </div>
</div>

<!-- Umbuchungsformular -->
<div class="reschedule-form" id="rescheduleForm" style="display: none;">
    <h5 class="mb-4"><i class="fas fa-calendar-check me-2"></i>Umbuchung bestätigen</h5>
    
    <div class="row">
        <div class="col-md-8">
            <input type="hidden" id="newStartTime" name="newStartTime">
            <input type="hidden" id="newEndTime" name="newEndTime">
            <input type="hidden" id="selectedCourseId" name="selectedCourseId">
            <input type="hidden" id="selectedLocationId" name="selectedLocationId">
            
            <div class="alert alert-info">
                <h6><i class="fas fa-info-circle me-2"></i>Bestätigung der Umbuchung</h6>
                <p class="mb-0">Bitte überprüfen Sie die ausgewählten Termindaten vor der Umbuchung. Sie erhalten eine Bestätigungs-E-Mail.</p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary btn-modern">
                    <i class="fas fa-calendar-check me-2"></i>Termin umbuchen
                </button>
                <a href="{{ path('admin_appointments_list') }}" class="btn btn-secondary btn-modern">
                    <i class="fas fa-times me-2"></i>Abbrechen
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.11.3/main.min.js'></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    let calendar;
    let selectedEvent = null;
    let locations = [];
    let courses = [];

    // Initialize calendar
    function initializeCalendar() {
        const calendarEl = document.getElementById('calendar');
        calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'timeGridWeek',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'timeGridWeek,timeGridDay'
            },
            locale: 'de',
            firstDay: 1,
            slotMinTime: '08:00:00',
            slotMaxTime: '20:00:00',
            slotDuration: '00:30:00',
            selectable: true,
            selectMirror: true,
            dayMaxEvents: true,
            height: 'auto',
            contentHeight: 650,
            expandRows: true,
            buttonText: {
                today: 'Heute',
                week: 'Woche',
                day: 'Tag'
            },
            weekText: 'KW',
            allDaySlot: false,
            nowIndicator: true,
            slotLabelFormat: {
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            },
            eventTimeFormat: {
                hour: '2-digit',
                minute: '2-digit',
                hour12: false
            },
            eventClick: function(info) {
                handleEventClick(info);
            },
            select: function(info) {
                handleDateSelect(info);
            },
            eventDidMount: function(info) {
                info.el.title = info.event.title;
            }
        });

        calendar.render();
    }

    // Handle event click
    function handleEventClick(info) {
        const event = info.event;
        
        if (event.classNames.includes('booked-slot') || event.classNames.includes('unavailable-slot')) {
            if (event.classNames.includes('booked-slot')) {
                showError('Dieser Termin ist bereits ausgebucht. Bitte wählen Sie einen anderen Termin.');
            }
            return;
        }
        
        // Markiere alle Termine des gleichen Kurses
        const courseId = event.extendedProps.courseId;
        calendar.getEvents().forEach(ev => {
            if (ev.extendedProps.courseId === courseId) {
                const newClassNames = [...ev.classNames.filter(cls => cls !== 'selected-slot'), 'selected-slot'];
                ev.setProp('classNames', newClassNames);
            } else {
                ev.setProp('classNames', ev.classNames.filter(cls => cls !== 'selected-slot'));
            }
        });
        
        selectedEvent = event;
        showSelectedSlotInfo(event);
        document.getElementById('rescheduleForm').style.display = 'block';
        
        // Set form values
        document.getElementById('newStartTime').value = event.start.toISOString();
        document.getElementById('newEndTime').value = event.end.toISOString();
        document.getElementById('selectedCourseId').value = event.extendedProps.courseId || '';
        document.getElementById('selectedLocationId').value = event.extendedProps.locationId || '';
    }

    // Handle date select
    function handleDateSelect(info) {
        const startTime = info.start;
        const endTime = info.end;
        
        const event = calendar.getEvents().find(event => 
            event.start.getTime() === startTime.getTime() &&
            event.end.getTime() === endTime.getTime()
        );

        if (event) {
            handleEventClick({ event: event });
        }
    }

    // Show selected slot info
    function showSelectedSlotInfo(event) {
        const infoDiv = document.getElementById('selected-slot-info');
        const detailsDiv = document.getElementById('selected-slot-details');
        const type = event.extendedProps.type;
        
        if (type === 'limited_course' || type === 'holiday_course') {
            const courseEvents = calendar.getEvents().filter(ev => ev.extendedProps.courseId === event.extendedProps.courseId);
            courseEvents.sort((a, b) => a.start - b.start);
            const courseDatesHtml = courseEvents.map(ev => {
                const date = ev.start.toLocaleDateString('de-DE', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
                const startTime = ev.start.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
                const endTime = ev.end.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
                return `<li><strong>${date}:</strong> ${startTime} - ${endTime} Uhr</li>`;
            }).join('');
            
            detailsDiv.innerHTML = `
                <div class="row">
                    <div class="col-md-6">
                        <strong>Kurs:</strong> ${event.extendedProps.courseName || 'Unbekannt'}<br>
                        <strong>Standort:</strong> ${event.extendedProps.locationName || 'Unbekannt'}<br>
                        <strong>Anzahl Termine:</strong> ${courseEvents.length}
                    </div>
                    <div class="col-md-6">
                        <strong>Kurstermine:</strong><br>
                        <ul class="list-unstyled ms-3">${courseDatesHtml}</ul>
                    </div>
                </div>
            `;
        } else {
            const startTime = event.start.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
            const endTime = event.end.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
            const date = event.start.toLocaleDateString('de-DE', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
            
            detailsDiv.innerHTML = `
                <div class="row">
                    <div class="col-md-6">
                        <strong>${date}</strong><br>
                        <strong>Zeit:</strong> ${startTime} - ${endTime}<br>
                        <strong>Kurs:</strong> ${event.extendedProps.courseName || 'Unbekannt'}
                    </div>
                    <div class="col-md-6">
                        <strong>Standort:</strong> ${event.extendedProps.locationName || 'Unbekannt'}<br>
                        <strong>Verfügbare Plätze:</strong> ${event.extendedProps.available || 0} von ${event.extendedProps.max || 0}
                    </div>
                </div>
            `;
        }
        infoDiv.style.display = 'block';
    }

    // Load available slots
    async function loadSlotsForDateRange(startDate, endDate) {
        const params = new URLSearchParams({
            start: startDate.toISOString().split('T')[0],
            end: endDate.toISOString().split('T')[0]
        });

        try {
            const response = await fetch(`{{ path('appointment_available_slots_range') }}?${params.toString()}`, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            });
            if (!response.ok) {
                throw new Error(`HTTP-Fehler! Status: ${response.status}`);
            }
            const data = await response.json();
            if (!data.slots || data.slots.length === 0) {
                return [];
            }
            
            return data.slots.map(slot => {
                const date = slot.date;
                const startTime = new Date(date + 'T' + slot.start);
                const endTime = new Date(date + 'T' + slot.end);
                
                const isOverbooked = slot.available < 0;
                const isFullyBooked = slot.available === 0;
                const isPartiallyBooked = slot.available > 0 && slot.available < slot.max;
                const isAvailable = slot.available > 0;
                
                let className = 'unavailable-slot';
                if (isAvailable) {
                    className = isPartiallyBooked ? 'partially-booked-slot' : 'available-slot';
                } else if (isOverbooked || isFullyBooked) {
                    className = 'booked-slot';
                }

                const title = [
                    slot.courseName || 'Kurs',
                    `${slot.start} - ${slot.end}`,
                    slot.location || 'Kein Standort',
                    `${slot.available}/${slot.max} Plätze`
                ].filter(Boolean).join('\n');

                return {
                    id: `slot_${slot.containerId}_${startTime.getTime()}`,
                    title: title,
                    start: startTime,
                    end: endTime,
                    classNames: [className],
                    extendedProps: {
                        available: slot.available || 0,
                        max: slot.max || 0,
                        containerId: slot.containerId || null,
                        locationId: slot.containerId || null,
                        locationName: slot.location || 'Unbekannt',
                        courseName: slot.courseName || 'Kurs',
                        courseId: slot.courseId || null,
                        type: slot.type || 'unknown'
                    }
                };
            });
        } catch (error) {
            console.error('Fehler beim Laden der verfügbaren Slots:', error);
            return [];
        }
    }

    // Load slots for current view
    function loadCurrentViewSlots(viewOrInfo) {
        const startDate = (viewOrInfo && (viewOrInfo.currentStart || viewOrInfo.start)) || (calendar && calendar.view && calendar.view.currentStart);
        const endDate = (viewOrInfo && (viewOrInfo.currentEnd || viewOrInfo.end)) || (calendar && calendar.view && calendar.view.currentEnd);
        if (!startDate || !endDate) return;
        
        showLoading();
        loadSlotsForDateRange(startDate, endDate)
            .then(slots => {
                const eventsToRemove = calendar.getEvents().filter(event => {
                    return event.start >= startDate && event.start <= endDate;
                });
                eventsToRemove.forEach(event => event.remove());

                slots.forEach(slot => {
                    calendar.addEvent(slot);
                    if (slot.extendedProps.containerId && !locations.find(l => l.id === slot.extendedProps.containerId)) {
                        locations.push({
                            id: slot.extendedProps.containerId,
                            name: slot.extendedProps.locationName || 'Unbekannt'
                        });
                    }
                    if (slot.extendedProps.courseId && !courses.find(c => c.id === slot.extendedProps.courseId)) {
                        courses.push({
                            id: slot.extendedProps.courseId,
                            name: slot.extendedProps.courseName || 'Kurs'
                        });
                    }
                });
                updateFilters();
            })
            .catch(error => {
                console.error('Fehler beim Laden der Termine:', error);
                showError('Fehler beim Laden der Termine: ' + error.message);
            })
            .finally(() => {
                setTimeout(() => {
                    hideLoading();
                }, 300);
            });
    }

    // Update filters
    function updateFilters() {
        const locationFilter = document.getElementById('location-filter');
        const courseFilter = document.getElementById('course-filter');

        locationFilter.innerHTML = '<option value="">Alle Standorte</option>';
        locations.forEach(location => {
            locationFilter.innerHTML += `<option value="${location.id}">${location.name}</option>`;
        });

        courseFilter.innerHTML = '<option value="">Alle Kurse</option>';
        courses.forEach(course => {
            courseFilter.innerHTML += `<option value="${course.id}">${course.name}</option>`;
        });
    }

    // Apply filters
    function applyFilters() {
        const locationId = document.getElementById('location-filter').value;
        const courseId = document.getElementById('course-filter').value;

        calendar.getEvents().forEach(event => {
            let show = true;

            if (locationId && event.extendedProps.locationId != locationId) {
                show = false;
            }

            if (courseId && event.extendedProps.courseId != courseId) {
                show = false;
            }

            if (show) {
                event.setProp('display', 'auto');
            } else {
                event.setProp('display', 'none');
            }
        });
    }

    // Show/hide loading
    function showLoading() {
        document.querySelector('.calendar-loading-overlay').style.display = 'flex';
    }

    function hideLoading() {
        document.querySelector('.calendar-loading-overlay').style.display = 'none';
    }

    // Show error
    function showError(message) {
        alert('Fehler: ' + message);
    }

    // Initialize
    initializeCalendar();
    loadCurrentViewSlots(calendar.view);

    // Event listeners
    calendar.on('datesSet', function(info) {
        loadCurrentViewSlots(info);
    });

    document.getElementById('location-filter').addEventListener('change', applyFilters);
    document.getElementById('course-filter').addEventListener('change', applyFilters);
    document.getElementById('refresh-calendar').addEventListener('click', function() {
        loadCurrentViewSlots();
    });

    // Handle form submission
    document.getElementById('rescheduleForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        if (!selectedEvent) {
            showError('Bitte wählen Sie einen Termin aus.');
            return;
        }
        
        const submitButton = this.querySelector('button[type="submit"]');
        submitButton.disabled = true;
        submitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Umbuchen...';
        
        try {
            const response = await fetch('{{ path('appointment_reschedule_post', {'token': appointment.bookingToken}) }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({
                    startTime: document.getElementById('newStartTime').value,
                    endTime: document.getElementById('newEndTime').value,
                    courseId: document.getElementById('selectedCourseId').value,
                    locationId: document.getElementById('selectedLocationId').value,
                    extraFieldValues: {{ appointment.extraFieldValues ? appointment.extraFieldValues|json_encode|raw : '{}' }}
                })
            });

            const data = await response.json();
            
            if (data.success) {
                alert('Termin wurde erfolgreich umgebucht! Sie erhalten eine Bestätigungs-E-Mail.');
                window.location.href = '{{ path('admin_appointments_list') }}';
            } else {
                throw new Error(data.error || 'Unbekannter Fehler');
            }
        } catch (error) {
            console.error('Umbuchungsfehler:', error);
            showError('Fehler bei der Terminumbuchung: ' + error.message);
        } finally {
            submitButton.disabled = false;
            submitButton.innerHTML = '<i class="fas fa-calendar-check me-2"></i>Termin umbuchen';
        }
    });
});
</script>
{% endblock %}