{% extends "base.html" %}

{% block title %}Gastanfrage - Mercedes-Benz MYP Platform{% endblock %}

{% block head %}
{{ super() }}
<meta name="csrf-token" content="{{ csrf_token() }}">
{% endblock %}

{% block content %}
<div class="mercedes-page-container">
    <div class="mercedes-content-container">
        <!-- Vereinfachter Premium Header -->
        <div class="mercedes-page-header mercedes-fade-in">
            <div class="text-center">
                <h1 class="text-4xl font-bold mb-4">Gastanfrage</h1>
                <p class="text-xl opacity-90 max-w-3xl mx-auto">
                    Beantragen Sie Zugang zu unseren 3D-Produktionsanlagen
                </p>
            </div>
        </div>

        <div class="mercedes-grid mercedes-grid-1 mt-8">
            <!-- Vereinfachte Features -->
            <div class="mercedes-premium-card mercedes-slide-up">
                <div class="mercedes-grid mercedes-grid-3 text-center">
                    <div class="p-6">
                        <div class="w-12 h-12 bg-blue-500 rounded-xl mx-auto mb-4 flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">Schnelle Bearbeitung</h3>
                        <p class="text-slate-600 dark:text-slate-400 text-sm">Automatische Prüfung Ihrer Anfrage</p>
                    </div>
                    
                    <div class="p-6">
                        <div class="w-12 h-12 bg-green-500 rounded-xl mx-auto mb-4 flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">Professionelle Qualität</h3>
                        <p class="text-slate-600 dark:text-slate-400 text-sm">Industriestandard 3D-Drucker</p>
                    </div>
                    
                    <div class="p-6">
                        <div class="w-12 h-12 bg-purple-500 rounded-xl mx-auto mb-4 flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">Flexible Nutzung</h3>
                        <p class="text-slate-600 dark:text-slate-400 text-sm">24/7 nach Terminvereinbarung</p>
                    </div>
                </div>
            </div>
            
            <!-- Vereinfachtes Anfrageformular -->
            <div class="mercedes-premium-card mercedes-slide-up">
                <h2 class="text-2xl font-semibold text-slate-900 dark:text-white mb-8">
                    Neue Anfrage stellen
                </h2>
                
                <form id="guestRequestForm" class="space-y-8">
                    <div class="mercedes-grid mercedes-grid-2">
                        <!-- Name -->
                        <div>
                            <label for="name" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                                Vollständiger Name <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="name" id="name" required class="mercedes-form-input" placeholder="Max Mustermann">
                        </div>

                        <!-- E-Mail -->
                        <div>
                            <label for="email" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                                E-Mail-Adresse
                            </label>
                            <input type="email" name="email" id="email" class="mercedes-form-input" placeholder="max.mustermann@example.com">
                        </div>
                        
                        <!-- Druckdauer -->
                        <div>
                            <label for="duration_min" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                                Geschätzte Druckzeit (Minuten)
                            </label>
                            <input type="number" name="duration_min" id="duration_min" min="1" max="1440" class="mercedes-form-input" placeholder="120">
                        </div>

                        <!-- Präferierter Drucker -->
                        <div>
                            <label for="preferred_printer" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                                Bevorzugter Drucker (optional)
                            </label>
                            <select name="preferred_printer" id="preferred_printer" class="mercedes-form-input">
                                <option value="">Kein Präferenz</option>
                                {% for printer in printers %}
                                <option value="{{ printer.id }}">{{ printer.name }}{% if printer.location %} - {{ printer.location }}{% endif %}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <!-- Projektzweck -->
                    <div>
                        <label for="reason" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                            Projektbeschreibung & Verwendungszweck
                        </label>
                        <textarea name="reason" id="reason" rows="4" class="mercedes-form-input" placeholder="Beschreiben Sie Ihr Projekt und den geplanten Verwendungszweck..."></textarea>
                        <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
                            Eine detaillierte Beschreibung beschleunigt die Bearbeitung
                        </p>
                    </div>

                    <!-- Dateien -->
                    <div>
                        <label for="files" class="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-3">
                            Dateien hochladen (optional)
                        </label>
                        <div class="flex items-center justify-center w-full">
                            <label for="files" class="flex flex-col items-center justify-center w-full h-32 border-2 border-slate-300 dark:border-slate-600 border-dashed rounded-2xl cursor-pointer bg-slate-50 dark:bg-slate-700/30 hover:bg-slate-100 dark:hover:bg-slate-700/50 transition-all duration-300">
                                <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                    <svg class="w-10 h-10 mb-3 text-slate-500 dark:text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
                                    </svg>
                                    <p class="mb-2 text-sm text-slate-600 dark:text-slate-400">
                                        <span class="font-semibold">Klicken zum Hochladen</span> oder Dateien hierher ziehen
                                    </p>
                                    <p class="text-xs text-slate-500 dark:text-slate-500">STL, GCODE oder Projektdateien (max. 50MB)</p>
                                </div>
                                <input id="files" name="files" type="file" multiple accept=".stl,.gcode,.zip,.rar,.pdf,.jpg,.png" class="hidden">
                            </label>
                        </div>
                        <div id="file-list" class="mt-3 space-y-2 hidden"></div>
                    </div>

                    <!-- Submit Button -->
                    <div class="flex justify-end pt-6">
                        <button type="submit" id="submitBtn" class="mercedes-btn-primary">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                            </svg>
                            Anfrage absenden
                        </button>
                    </div>
                </form>
            </div>

            <!-- Informationen -->
            <div class="mercedes-premium-card mercedes-slide-up">
                <h3 class="text-xl font-semibold text-slate-900 dark:text-white mb-6">
                    Wichtige Informationen
                </h3>
                <div class="space-y-4 text-slate-600 dark:text-slate-400">
                    <div class="flex items-start space-x-3">
                        <div class="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                        <p>Ihre Anfrage wird automatisch geprüft und Sie erhalten innerhalb von 24 Stunden eine Rückmeldung</p>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                        <p>Bei Genehmigung erhalten Sie einen Zugangscode für die Buchung Ihrer Druckzeit</p>
                    </div>
                    <div class="flex items-start space-x-3">
                        <div class="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                        <p>Die Nutzung der 3D-Drucker erfolgt nach Absprache und unter Aufsicht unseres Teams</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success Modal -->
<div id="successModal" class="mercedes-modal">
    <div class="absolute inset-0 bg-black/60 backdrop-blur-sm"></div>
    <div class="mercedes-modal-content max-w-md">
        <div class="p-8 text-center">
            <div class="w-16 h-16 bg-green-500 rounded-full mx-auto mb-6 flex items-center justify-center">
                <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
            <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-4">Anfrage erfolgreich gesendet!</h3>
            <p class="text-slate-600 dark:text-slate-400 mb-8">
                Wir haben Ihre Anfrage erhalten und werden diese schnellstmöglich bearbeiten. Sie erhalten eine Benachrichtigung per E-Mail.
            </p>
            <button onclick="closeSuccessModal()" class="mercedes-btn-primary">
                Verstanden
            </button>
        </div>
    </div>
</div>

<script>
    // Form Submit Handler
    document.getElementById('guestRequestForm').addEventListener('submit', async function(e) {
        e.preventDefault();
        
        // Button Animation
        document.getElementById('submitBtn').disabled = true;
        document.getElementById('submitBtn').innerHTML = '<span class="flex items-center justify-center"><svg class="animate-spin w-5 h-5 mr-3" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>📡 Wird übertragen...</span>';
        
        try {
            const formData = new FormData(this);
            const data = {
                name: formData.get('name'),
                email: formData.get('email'),
                reason: formData.get('reason'),
                duration_min: parseInt(formData.get('duration_min')) || 60,
                printer_id: formData.get('preferred_printer') ? parseInt(formData.get('preferred_printer')) : null
            };
            
            // CSRF-Token aus Meta-Tag holen
            const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
            
            const headers = {
                'Content-Type': 'application/json',
            };
            
            // CSRF-Token hinzufügen falls verfügbar
            if (csrfToken) {
                headers['X-CSRFToken'] = csrfToken;
            }
            
            const response = await fetch('/api/guest/requests', {
                method: 'POST',
                headers: headers,
                body: JSON.stringify(data)
            });
            
            const result = await response.json();
            
            if (result.success) {
                // Status-URL anzeigen
                const url = window.location.origin + `/request/${result.request_id}`;
                document.getElementById('statusUrl').textContent = url;
                
                // Success Modal mit Animation anzeigen
                document.getElementById('successModal').classList.remove('hidden');
                setTimeout(() => {
                    document.getElementById('successModalContent').classList.remove('scale-95', 'opacity-0');
                    document.getElementById('successModalContent').classList.add('scale-100', 'opacity-100');
                }, 10);
                
                // Formular zurücksetzen
                this.reset();
                document.getElementById('durationProgress').style.width = '12.5%';
            } else {
                alert('❌ Fehler: ' + (result.error || 'Unbekannter Fehler'));
            }
        } catch (error) {
            console.error('Fehler beim Senden der Anfrage:', error);
            alert('❌ Fehler beim Senden der Anfrage. Bitte versuchen Sie es später erneut.');
        } finally {
            // Button zurücksetzen
            document.getElementById('submitBtn').disabled = false;
            document.getElementById('submitBtn').innerHTML = '<span class="flex items-center justify-center"><svg class="w-5 h-5 mr-3 group-hover:rotate-12 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>🚀 Anfrage übermitteln</span>';
        }
    });
</script>
{% endblock %}