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

{% block title %}Betreuer-Anmeldung - Bewegungszentrum{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        :root {
            --ksb-green: #8bc34a;
            --ksb-purple: #9b7bb7;
            --ksb-dark: #37424a;
        }

        body {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            min-height: 100vh;
            padding: 2rem 1rem;
        }

        .staff-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .header-card {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
            border: 2px solid var(--ksb-green);
        }

        .header-card h1 {
            color: var(--ksb-dark);
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }

        .header-card .subtitle {
            color: #6c757d;
            font-size: 1.1rem;
        }

        .event-card {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .event-card h2 {
            color: var(--ksb-dark);
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            border-bottom: 2px solid var(--ksb-green);
            padding-bottom: 0.75rem;
        }

        .event-info {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .event-info-item {
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 0.5rem;
            border-left: 4px solid var(--ksb-green);
        }

        .event-info-item label {
            font-size: 0.85rem;
            color: #6c757d;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-bottom: 0.25rem;
            display: block;
        }

        .event-info-item .value {
            font-size: 1.1rem;
            color: var(--ksb-dark);
            font-weight: 600;
        }

        .staff-slot-info {
            background: linear-gradient(135deg, var(--ksb-green) 0%, #7cb342 100%);
            color: white;
            padding: 1.5rem;
            border-radius: 0.75rem;
            margin-bottom: 2rem;
            text-align: center;
        }

        .staff-slot-info h3 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
        }

        .staff-slot-info .slot-count {
            font-size: 2.5rem;
            font-weight: 700;
            margin: 0.5rem 0;
        }

        .staff-slot-info.full {
            background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
        }

        .form-card {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin-bottom: 2rem;
        }

        .form-card h3 {
            color: var(--ksb-dark);
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        .form-label {
            font-weight: 600;
            color: var(--ksb-dark);
            margin-bottom: 0.5rem;
        }

        .form-control {
            border: 2px solid #e9ecef;
            border-radius: 0.5rem;
            padding: 0.75rem;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: var(--ksb-green);
            box-shadow: 0 0 0 0.2rem rgba(139, 195, 74, 0.25);
        }

        .btn-register {
            background: linear-gradient(135deg, var(--ksb-green) 0%, #7cb342 100%);
            color: white;
            border: none;
            padding: 0.75rem 2rem;
            font-weight: 600;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            width: 100%;
            font-size: 1.1rem;
        }

        .btn-register:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(139, 195, 74, 0.4);
            color: white;
        }

        .btn-register:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .staff-list-card {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 2rem;
        }

        .staff-list-card h3 {
            color: var(--ksb-dark);
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        .staff-item {
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 0.75rem;
            border-left: 4px solid var(--ksb-green);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .staff-item:last-child {
            margin-bottom: 0;
        }

        .staff-item .name {
            font-weight: 600;
            color: var(--ksb-dark);
        }

        .staff-item .email {
            color: #6c757d;
            font-size: 0.9rem;
        }

        .alert {
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }

        .success-message {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }

        .error-message {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="staff-container">
        <!-- Header -->
        <div class="header-card">
            <h1><i class="fas fa-user-tie me-2"></i>Betreuer-Anmeldung</h1>
            <p class="subtitle">Melden Sie sich als Betreuer für diesen Termin an</p>
        </div>

        <!-- Event Information -->
        <div class="event-card">
            <h2><i class="fas fa-calendar-alt me-2"></i>Termin-Informationen</h2>
            
            <div class="event-info">
                <div class="event-info-item">
                    <label>Datum</label>
                    <div class="value">{{ booking.selectedDate|date('d.m.Y') }}</div>
                </div>
                <div class="event-info-item">
                    <label>Uhrzeit</label>
                    <div class="value">{{ booking.selectedStartTime|date('H:i') }} - {{ booking.selectedEndTime|date('H:i') }} Uhr</div>
                </div>
                <div class="event-info-item">
                    <label>Paket</label>
                    <div class="value">{{ booking.eventPackage.displayName }}</div>
                </div>
                <div class="event-info-item">
                    <label>Dauer</label>
                    <div class="value">{{ booking.duration.formattedDuration }}</div>
                </div>
            </div>
        </div>

        <!-- Staff Slot Info -->
        <div class="staff-slot-info {% if not hasSlotsAvailable %}full{% endif %}">
            <h3>
                {% if hasSlotsAvailable %}
                    <i class="fas fa-users me-2"></i>Es werden noch Betreuer gesucht
                {% else %}
                    <i class="fas fa-check-circle me-2"></i>Alle Betreuer-Positionen sind besetzt
                {% endif %}
            </h3>
            <div class="slot-count">{{ registeredCount }} / {{ requiredCount }}</div>
            {% if hasSlotsAvailable %}
                <p>Noch {{ availableSlots }} Platz/Plätze frei</p>
            {% else %}
                <p>Vielen Dank für Ihr Interesse!</p>
            {% endif %}
        </div>

        <!-- Registration Form -->
        {% if hasSlotsAvailable %}
            <div class="form-card">
                <h3><i class="fas fa-user-plus me-2"></i>Anmeldung als Betreuer</h3>
                
                <div id="alertContainer"></div>
                
                <form id="staffRegistrationForm">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="firstName" class="form-label">Vorname *</label>
                            <input type="text" class="form-control" id="firstName" name="firstName" required>
                        </div>
                        <div class="col-md-6">
                            <label for="lastName" class="form-label">Nachname *</label>
                            <input type="text" class="form-control" id="lastName" name="lastName" required>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="email" class="form-label">E-Mail-Adresse *</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    
                    <button type="submit" class="btn btn-register" id="submitBtn">
                        <i class="fas fa-check me-2"></i>Anmelden
                    </button>
                </form>
            </div>
        {% endif %}

        <!-- Staff List -->
        <div class="staff-list-card">
            <h3><i class="fas fa-list me-2"></i>Angemeldete Betreuer ({{ registeredCount }})</h3>
            
            {% if staffMembers|length > 0 %}
                <div id="staffList">
                    {% for staff in staffMembers %}
                        <div class="staff-item">
                            <div>
                                <div class="name">{{ staff.fullName }}</div>
                                <div class="email">{{ staff.email }}</div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            {% else %}
                <p class="text-muted">Noch keine Betreuer angemeldet.</p>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        const token = '{{ token }}';
        const staffListHtml = `{{ staffMembers|map(s => '<div class="staff-item"><div><div class="name">' ~ s.fullName ~ '</div><div class="email">' ~ s.email ~ '</div></div></div>')|join('')|raw }}`;

        document.getElementById('staffRegistrationForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const submitBtn = document.getElementById('submitBtn');
            const alertContainer = document.getElementById('alertContainer');
            const originalText = submitBtn.innerHTML;
            
            // Disable button
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Wird verarbeitet...';
            
            // Clear previous alerts
            alertContainer.innerHTML = '';
            
            const formData = {
                firstName: document.getElementById('firstName').value.trim(),
                lastName: document.getElementById('lastName').value.trim(),
                email: document.getElementById('email').value.trim().toLowerCase()
            };
            
            try {
                const registerUrl = '{{ path('public_event_staff_register', {'token': token}) }}';
                const response = await fetch(registerUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(formData)
                });
                
                const data = await response.json();
                
                if (data.success) {
                    // Show success message
                    alertContainer.innerHTML = `<div class="alert success-message"><i class="fas fa-check-circle me-2"></i>${data.message}</div>`;
                    
                    // Clear form
                    document.getElementById('staffRegistrationForm').reset();
                    
                    // Update staff list
                    updateStaffList(data);
                    
                    // Reload page after 2 seconds to show updated list
                    setTimeout(() => {
                        window.location.reload();
                    }, 2000);
                } else {
                    // Show error message
                    alertContainer.innerHTML = `<div class="alert error-message"><i class="fas fa-exclamation-circle me-2"></i>${data.error}</div>`;
                }
            } catch (error) {
                alertContainer.innerHTML = `<div class="alert error-message"><i class="fas fa-exclamation-circle me-2"></i>Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.</div>`;
            } finally {
                // Re-enable button
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        });
        
        function updateStaffList(data) {
            // Update slot info
            const slotInfo = document.querySelector('.staff-slot-info');
            const slotCount = slotInfo.querySelector('.slot-count');
            const slotText = slotInfo.querySelector('p');
            
            slotCount.textContent = `${data.registeredCount} / ${data.requiredCount}`;
            
            if (data.hasSlotsAvailable) {
                slotInfo.classList.remove('full');
                slotInfo.querySelector('h3').innerHTML = '<i class="fas fa-users me-2"></i>Es werden noch Betreuer gesucht';
                slotText.textContent = `Noch ${data.availableSlots} Platz/Plätze frei`;
            } else {
                slotInfo.classList.add('full');
                slotInfo.querySelector('h3').innerHTML = '<i class="fas fa-check-circle me-2"></i>Alle Betreuer-Positionen sind besetzt';
                slotText.textContent = 'Vielen Dank für Ihr Interesse!';
                
                // Hide registration form
                document.querySelector('.form-card').style.display = 'none';
            }
        }
    </script>
{% endblock %}