{% extends "base.html" %}

{% block title %}Neuer Druckauftrag - Mercedes-Benz MYP Platform{% endblock %}

{% block content %}
<div class="space-y-8">
    <!-- Page Header -->
    <div class="dashboard-card p-6">
        <div class="flex items-center gap-4 mb-4">
            <div class="w-12 h-12 bg-mercedes-blue text-white rounded-xl flex items-center justify-center">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
                </svg>
            </div>
            <div>
                <h1 class="text-3xl font-bold text-mercedes-black dark:text-white">Neuer Druckauftrag</h1>
                <p class="text-mercedes-gray dark:text-slate-400">Erstellen Sie einen neuen 3D-Druckauftrag</p>
            </div>
        </div>
    </div>

    <!-- Job Creation Form -->
    <div class="dashboard-card p-8">
        <form id="newJobForm" action="{{ url_for('create_job') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <!-- Job Details -->
                <div>
                    <label for="job_title" class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">
                        Job-Titel <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="job_title" name="job_title" required
                           class="block w-full px-4 py-3 border border-gray-300 dark:border-slate-600 rounded-lg"
                           placeholder="Beschreibender Titel für den Druckauftrag">
                </div>
                
                <!-- Printer Selection -->
                <div>
                    <label for="printer_id" class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">
                        Drucker <span class="text-red-500">*</span>
                    </label>
                    <select id="printer_id" name="printer_id" required
                            class="block w-full px-4 py-3 border border-gray-300 dark:border-slate-600 rounded-lg">
                        <option value="">Drucker auswählen...</option>
                        {% for printer in printers %}
                        <option value="{{ printer.id }}">{{ printer.name }} ({{ printer.location }})</option>
                        {% endfor %}
                    </select>
                </div>
                
                <!-- Start Time -->
                <div>
                    <label for="start_time" class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">
                        Startzeit <span class="text-red-500">*</span>
                    </label>
                    <input type="datetime-local" id="start_time" name="start_time" required
                           class="block w-full px-4 py-3 border border-gray-300 dark:border-slate-600 rounded-lg">
                </div>
                
                <!-- Duration -->
                <div>
                    <label for="duration" class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">
                        Geschätzte Dauer (Minuten) <span class="text-red-500">*</span>
                    </label>
                    <input type="number" id="duration" name="duration" required min="1" max="7200"
                           class="block w-full px-4 py-3 border border-gray-300 dark:border-slate-600 rounded-lg"
                           placeholder="60">
                </div>
            </div>
            
            <!-- Description -->
            <div>
                <label for="description" class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">
                    Beschreibung
                </label>
                <textarea id="description" name="description" rows="3"
                          class="block w-full px-4 py-3 border border-gray-300 dark:border-slate-600 rounded-lg resize-none"
                          placeholder="Beschreibung des Druckauftrags..."></textarea>
            </div>
            
            <!-- File Upload -->
            <div>
                <label for="stl_file" class="block text-sm font-medium text-mercedes-black dark:text-slate-300 mb-2">
                    3D-Datei hochladen (optional)
                </label>
                <input type="file" id="stl_file" name="stl_file" accept=".stl,.obj,.3mf,.gcode"
                       class="block w-full px-4 py-3 border border-gray-300 dark:border-slate-600 rounded-lg">
                <p class="text-sm text-mercedes-gray dark:text-slate-400 mt-1">
                    Unterstützte Formate: STL, OBJ, 3MF, GCODE (max. 100MB)
                </p>
            </div>
            
            <!-- Submit Button -->
            <div class="flex items-center justify-end pt-6 border-t border-gray-200 dark:border-slate-600">
                <a href="{{ url_for('jobs_page') }}" class="btn-secondary mr-3">
                    Abbrechen
                </a>
                <button type="submit" class="btn-primary">
                    Auftrag erstellen
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Set default start time to now + 1 hour
    const now = new Date();
    now.setHours(now.getHours() + 1);
    const formatted = now.toISOString().slice(0, 16);
    document.getElementById('start_time').value = formatted;
});
</script>
{% endblock %}