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

{% block title %}QR-Code Scanner{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">QR-Code Scanner</h5>
            </div>
            <div class="card-body">
                <div class="text-center mb-4">
                    <p class="lead">Scannen Sie den QR-Code des Teilnehmers, um die Buchung zu überprüfen und den Check-in durchzuführen.</p>
                </div>
                
                <div class="row justify-content-center">
                    <div class="col-md-8">
                        <div id="reader" class="mb-4"></div>
                    </div>
                </div>

                <div id="result" class="mt-4" style="display: none;">
                    <div class="alert alert-info">
                        <h5 class="alert-heading">Buchungsinformationen</h5>
                        <div id="bookingDetails"></div>
                        <div id="checkInButton" class="mt-3" style="display: none;">
                            <button class="btn btn-success w-100" onclick="performCheckIn()">
                                <i class="fas fa-check-circle me-2"></i>Check-in durchführen
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block stylesheets %}
<style>
    #reader {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
    }

    #reader video {
        width: 100%;
        border-radius: 8px;
    }

    .booking-detail {
        margin-bottom: 0.5rem;
    }

    .booking-detail strong {
        margin-right: 0.5rem;
    }

    .valid-booking {
        color: var(--available-slot-bg);
    }

    .invalid-booking {
        color: var(--booked-slot-bg);
    }

    .checked-in {
        color: var(--available-slot-bg);
        font-weight: bold;
    }

    .check-in-time {
        font-size: 0.9em;
        color: var(--navbar-text);
        opacity: 0.8;
    }
</style>
{% endblock %}

{% block javascripts %}
<script src="https://unpkg.com/html5-qrcode"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const html5QrCode = new Html5Qrcode("reader");
    const resultDiv = document.getElementById('result');
    const bookingDetailsDiv = document.getElementById('bookingDetails');
    const checkInButton = document.getElementById('checkInButton');
    let currentBookingId = null;
    
    // Konfiguration für den Scanner
    const config = {
        fps: 10,
        qrbox: { width: 250, height: 250 },
        aspectRatio: 1.0
    };

    // Starte den Scanner
    html5QrCode.start(
        { facingMode: "environment" },
        config,
        onScanSuccess,
        onScanFailure
    );

    function onScanSuccess(decodedText, decodedResult) {
        // Stoppe den Scanner nach erfolgreicher Erkennung
        html5QrCode.stop();
        
        // Verarbeite den gescannten QR-Code
        processQRCode(decodedText);
    }

    function onScanFailure(error) {
        // Fehlerbehandlung (optional)
        console.warn(`QR Code Scan fehlgeschlagen: ${error}`);
    }

    function processQRCode(qrData) {
        // Extrahiere die Buchungs-ID aus dem QR-Code
        const bookingId = qrData.split('/').pop();
        currentBookingId = bookingId;
        
        // Sende Anfrage an den Server
        fetch(`/ksbdueren/public/appointments/verify/${bookingId}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showBookingDetails(data.booking);
                } else {
                    showError(data.message);
                }
            })
            .catch(error => {
                showError('Fehler beim Überprüfen der Buchung');
                console.error('Fehler:', error);
            });
    }

    function showBookingDetails(booking) {
        const statusClass = booking.isValid ? 'valid-booking' : 'invalid-booking';
        const statusText = booking.isValid ? 'Gültige Buchung' : 'Ungültige Buchung';
        
        let checkInStatus = '';
        if (booking.checkedIn) {
            checkInStatus = `
                <div class="booking-detail">
                    <strong>Check-in Status:</strong>
                    <span class="checked-in">Eingecheckt</span>
                    <div class="check-in-time">am ${new Date(booking.checkedInAt).toLocaleString()}</div>
                </div>
            `;
        }
        
        bookingDetailsDiv.innerHTML = `
            <div class="booking-detail">
                <strong>Status:</strong>
                <span class="${statusClass}">${statusText}</span>
            </div>
            ${checkInStatus}
            <div class="booking-detail">
                <strong>Name:</strong>
                ${booking.firstName} ${booking.lastName}
            </div>
            <div class="booking-detail">
                <strong>Datum:</strong>
                ${new Date(booking.startTime).toLocaleDateString()}
            </div>
            <div class="booking-detail">
                <strong>Zeit:</strong>
                ${new Date(booking.startTime).toLocaleTimeString()} - ${new Date(booking.endTime).toLocaleTimeString()}
            </div>
            <div class="booking-detail">
                <strong>Container:</strong>
                ${booking.containerName}
            </div>
        `;
        
        // Zeige Check-in Button nur wenn die Buchung gültig ist und noch nicht eingecheckt wurde
        if (booking.isValid && !booking.checkedIn) {
            checkInButton.style.display = 'block';
        } else {
            checkInButton.style.display = 'none';
        }
        
        resultDiv.style.display = 'block';
    }

    function performCheckIn() {
        if (!currentBookingId) return;

        fetch(`/ksbdueren/public/appointments/check-in/${currentBookingId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Aktualisiere die Anzeige mit dem Check-in Status
                processQRCode(currentBookingId);
            } else {
                showError(data.message || 'Fehler beim Check-in');
            }
        })
        .catch(error => {
            showError('Fehler beim Check-in');
            console.error('Fehler:', error);
        });
    }

    function showError(message) {
        bookingDetailsDiv.innerHTML = `
            <div class="alert alert-danger">
                ${message}
            </div>
        `;
        
        resultDiv.style.display = 'block';
        checkInButton.style.display = 'none';
        
        // Starte den Scanner nach 3 Sekunden neu
        setTimeout(() => {
            resultDiv.style.display = 'none';
            html5QrCode.start(
                { facingMode: "environment" },
                config,
                onScanSuccess,
                onScanFailure
            );
        }, 3000);
    }
});
</script>
{% endblock %}