{% 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="space-y-8">
    <!-- Page Header -->
    <div class="dashboard-card p-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 flex-shrink-0">
                    <svg class="w-full h-full text-slate-900 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                    </svg>
                </div>
                <div>
                    <h1 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Gastanfrage</h1>
                    <p class="text-slate-500 dark:text-slate-400 mt-1">Antrag für 3D-Druckauftrag einreichen</p>
                </div>
            </div>
            <div class="flex flex-wrap gap-3">
                <a href="{{ url_for('guest.guest_requests_overview') }}" 
                   class="btn-secondary flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    <span>Anträge Übersicht</span>
                </a>
                <a href="{{ url_for('index') }}" 
                   class="btn-secondary flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
                    </svg>
                    <span>Startseite</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Info Banner -->
    <div class="dashboard-card p-6">
        <div class="flex items-start gap-4">
            <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900/30 rounded-xl flex items-center justify-center flex-shrink-0">
                <svg class="h-6 w-6 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                </svg>
            </div>
            <div class="flex-1">
                <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">
                    Wichtige Hinweise
                </h3>
                <div class="text-slate-600 dark:text-slate-400 space-y-2">
                    <p>• Alle Anträge werden sorgfältig geprüft und genehmigt</p>
                    <p>• Die Bearbeitungszeit beträgt in der Regel 24-48 Stunden</p>
                    <p>• Sie erhalten eine E-Mail-Benachrichtigung über den Status</p>
                    <p>• Nach Genehmigung können Sie den Druckauftrag starten</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Antragsformular -->
    <div class="dashboard-card p-6">
        <div class="mb-6">
            <h2 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
                Druckantrag einreichen
            </h2>
            <p class="text-slate-500 dark:text-slate-400">
                Füllen Sie alle erforderlichen Felder aus, um Ihren Druckantrag zu stellen
            </p>
        </div>

        <form method="POST" enctype="multipart/form-data" class="space-y-6">
            {{ form.hidden_tag() }}
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Name -->
                <div>
                    {{ form.name.label(class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2") }}
                    {{ form.name(class="block w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500", placeholder="Ihr vollständiger Name") }}
                    {% if form.name.errors %}
                        <div class="mt-1 text-sm text-red-600">
                            {% for error in form.name.errors %}
                                <p>{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <!-- E-Mail -->
                <div>
                    {{ form.email.label(class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2") }}
                    {{ form.email(class="block w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500", placeholder="ihre.email@example.com") }}
                    {% if form.email.errors %}
                        <div class="mt-1 text-sm text-red-600">
                            {% for error in form.email.errors %}
                                <p>{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Drucker -->
                <div>
                    {{ form.printer_id.label(class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2") }}
                    {{ form.printer_id(class="block w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500") }}
                    {% if form.printer_id.errors %}
                        <div class="mt-1 text-sm text-red-600">
                            {% for error in form.printer_id.errors %}
                                <p>{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <!-- Geschätzte Dauer -->
                <div>
                    {{ form.duration_min.label(class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2") }}
                    <div class="relative">
                        {{ form.duration_min(class="block w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500", placeholder="z.B. 120") }}
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                            <span class="text-slate-500 dark:text-slate-400 text-sm">Minuten</span>
                        </div>
                    </div>
                    {% if form.duration_min.errors %}
                        <div class="mt-1 text-sm text-red-600">
                            {% for error in form.duration_min.errors %}
                                <p>{{ error }}</p>
                            {% endfor %}
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Projektbeschreibung -->
            <div>
                {{ form.reason.label(class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2") }}
                {{ form.reason(class="block w-full px-3 py-2 border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none", rows="4", placeholder="Beschreiben Sie Ihr Projekt und den geplanten Verwendungszweck...") }}
                {% if form.reason.errors %}
                    <div class="mt-1 text-sm text-red-600">
                        {% for error in form.reason.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <!-- Datei-Upload -->
            <div>
                {{ form.file.label(class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2") }}
                <div class="flex items-center justify-center w-full">
                    <label for="{{ form.file.id }}" class="flex flex-col items-center justify-center w-full h-32 border-2 border-gray-300 dark:border-slate-600 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-slate-700/30 hover:bg-gray-100 dark:hover:bg-slate-700/50 transition-colors">
                        <div class="flex flex-col items-center justify-center pt-5 pb-6">
                            <svg class="w-8 h-8 mb-3 text-gray-400 dark:text-gray-500" 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-gray-500 dark:text-gray-400"><span class="font-semibold">Klicken Sie zum Hochladen</span> oder ziehen Sie die Datei hierher</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">STL, OBJ oder andere 3D-Dateien (max. 50MB)</p>
                        </div>
                        {{ form.file(class="hidden") }}
                    </label>
                </div>
                {% if form.file.errors %}
                    <div class="mt-2 text-sm text-red-600">
                        {% for error in form.file.errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>

            <!-- Submit Button -->
            <div class="flex items-center justify-end pt-6 border-t border-gray-200 dark:border-slate-600">
                <button type="submit" class="btn-primary flex items-center gap-2">
                    <svg class="w-5 h-5" 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>
                    <span>Antrag einreichen</span>
                </button>
            </div>
        </form>
    </div>

    <!-- Status Check Section -->
    <div class="dashboard-card p-6">
        <div class="text-center">
            <h3 class="text-lg font-semibold text-slate-900 dark:text-white mb-2">
                Status Ihres Antrags prüfen
            </h3>
            <p class="text-slate-500 dark:text-slate-400 mb-6">
                Haben Sie bereits einen Antrag gestellt? Prüfen Sie hier den aktuellen Status.
            </p>
            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
                <a href="{{ url_for('guest.guest_requests_overview') }}" 
                   class="btn-secondary flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                    </svg>
                    <span>Alle Anträge ansehen</span>
                </a>
                <a href="{{ url_for('guest.guest_status') }}" 
                   class="btn-secondary flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m3-6l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2M7 20l4-16m2 16l4-16"/>
                    </svg>
                    <span>Status mit Code prüfen</span>
                </a>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // File upload preview
    const fileInput = document.getElementById('{{ form.file.id }}');
    if (fileInput) {
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const label = fileInput.closest('label');
                const textElement = label.querySelector('p');
                textElement.innerHTML = `<span class="font-semibold">Datei ausgewählt:</span> ${file.name}`;
            }
        });
    }
});
</script>
{% endblock %}