{% extends 'base.html' %}
{% load static %}

{% block title %}Custom Fursuit Bestellung - {{ block.super }}{% endblock %}

{% block content %}
<div class="custom-order-container">
    <!-- Hero-Header -->
    <div class="custom-order-hero furry-card text-center mb-5">
        <div class="custom-order-hero-content">
            <h1 class="custom-order-title">🎨 Custom Fursuit Anfrage</h1>
            <p class="custom-order-subtitle">Lass deinen Traum-Fursuit Realität werden!</p>
            <div class="custom-order-stats">
                <span class="stat-item">⚡ 8-12 Wochen Produktionszeit</span>
                <span class="stat-item">💰 30% Anzahlung</span>
                <span class="stat-item">🎯 Individuelles Design</span>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Informationen -->
        <div class="col-lg-4 mb-4">
            <div class="info-section furry-card h-100">
                <div class="info-header text-center mb-4">
                    <div class="info-icon">✨</div>
                    <h3 class="info-title">Bestellprozess</h3>
                    <p class="info-subtitle">So wird dein Fursuit Realität</p>
                </div>
                
                <div class="process-steps">
                    <div class="process-step">
                        <div class="step-number">1</div>
                        <div class="step-content">
                            <h5>📝 Formular ausfüllen</h5>
                            <p>Beschreibe deinen Character und deine Wünsche</p>
                        </div>
                    </div>
                    <div class="process-step">
                        <div class="step-number">2</div>
                        <div class="step-content">
                            <h5>💰 Angebot erhalten</h5>
                            <p>Wir erstellen ein individuelles Angebot für dich</p>
                        </div>
                    </div>
                    <div class="process-step">
                        <div class="step-number">3</div>
                        <div class="step-content">
                            <h5>💳 Anzahlung leisten</h5>
                            <p>30% Anzahlung sichert deinen Auftrag</p>
                        </div>
                    </div>
                    <div class="process-step">
                        <div class="step-number">4</div>
                        <div class="step-content">
                            <h5>🎨 Design-Abstimmung</h5>
                            <p>Gemeinsam entwickeln wir das perfekte Design</p>
                        </div>
                    </div>
                    <div class="process-step">
                        <div class="step-number">5</div>
                        <div class="step-content">
                            <h5>🛠️ Produktion & Updates</h5>
                            <p>Regelmäßige Updates während der Produktion</p>
                        </div>
                    </div>
                    <div class="process-step">
                        <div class="step-number">6</div>
                        <div class="step-content">
                            <h5>📦 Fertigstellung & Versand</h5>
                            <p>Dein Fursuit kommt sicher zu dir</p>
                        </div>
                    </div>
                </div>

                <div class="important-notes">
                    <h4 class="notes-title">⚠️ Wichtige Hinweise</h4>
                    <div class="note-item">
                        <span class="note-icon">⏰</span>
                        <span class="note-text">Produktionszeit: 8-12 Wochen</span>
                    </div>
                    <div class="note-item">
                        <span class="note-icon">💳</span>
                        <span class="note-text">Anzahlung: 30% des Gesamtpreises</span>
                    </div>
                    <div class="note-item">
                        <span class="note-icon">📏</span>
                        <span class="note-text">Genaue Maße sind erforderlich</span>
                    </div>
                    <div class="note-item">
                        <span class="note-icon">🎨</span>
                        <span class="note-text">Referenzbilder sind sehr hilfreich</span>
                    </div>
                </div>

                <div class="gallery-link">
                    <a href="{% url 'products:gallery' %}" class="btn furry-btn-outline">
                        🖼️ Beispielarbeiten ansehen
                    </a>
                </div>
            </div>
        </div>

        <!-- Formular -->
        <div class="col-lg-8">
            <div class="form-section furry-card">
                <div class="form-header text-center mb-4">
                    <h2 class="form-title">🎭 Character Anfrage</h2>
                    <p class="form-subtitle">Erzähl uns von deinem Traum-Fursuit</p>
                </div>
                
                <form method="post" enctype="multipart/form-data" class="custom-order-form needs-validation" novalidate>
                    {% csrf_token %}
                    
                    {% if form.non_field_errors %}
                        <div class="alert alert-danger">
                            {% for error in form.non_field_errors %}
                                {{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    
                    <!-- Character Informationen -->
                    <div class="form-section-group">
                        <h4 class="section-header">🐺 Character Informationen</h4>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="character_name" class="form-label">🎭 Character Name</label>
                                    <input type="text" class="form-control furry-input" id="character_name" name="character_name" required placeholder="Name deines Characters">
                                    <div class="form-hint" id="character_name-hint"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="fursuit_type" class="form-label">🎪 Fursuit Typ</label>
                                    <select class="form-select furry-select" id="fursuit_type" name="fursuit_type" required>
                                        <option value="">Bitte wählen...</option>
                                        <option value="fullsuit">🐺 Fullsuit (Komplett)</option>
                                        <option value="partial">🎭 Partial (Kopf + Pfoten)</option>
                                        <option value="head">🦊 Nur Kopf</option>
                                    </select>
                                    <div class="form-hint" id="fursuit_type-hint"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Design Präferenzen -->
                    <div class="form-section-group">
                        <h4 class="section-header">🎨 Design Präferenzen</h4>
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="character_description" class="form-label">📝 Character Beschreibung</label>
                                    <textarea class="form-control furry-textarea" id="character_description" name="character_description" rows="4" required placeholder="Beschreibe deinen Character detailliert..."></textarea>
                                    <div class="form-hint" id="character_description-hint"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="style" class="form-label">🎭 Gewünschter Stil</label>
                                    <select class="form-select furry-select" id="style" name="style" required>
                                        <option value="">Bitte wählen...</option>
                                        <option value="toony">😊 Toony (Verspielt)</option>
                                        <option value="semi_realistic">🦊 Semi-Realistic (Gemischt)</option>
                                        <option value="realistic">🐺 Realistic (Realistisch)</option>
                                    </select>
                                    <div class="form-hint" id="style-hint"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="budget_range" class="form-label">💰 Budget</label>
                                    <select class="form-select furry-select" id="budget_range" name="budget_range" required>
                                        <option value="">Bitte wählen...</option>
                                        <option value="2000-3000">2.000€ - 3.000€</option>
                                        <option value="3000-4000">3.000€ - 4.000€</option>
                                        <option value="4000+">4.000€+</option>
                                    </select>
                                    <div class="form-hint" id="budget_range-hint"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Zusätzliche Details -->
                    <div class="form-section-group">
                        <h4 class="section-header">✨ Zusätzliche Details</h4>
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="color_preferences" class="form-label">🎨 Farbwünsche</label>
                                    <textarea class="form-control furry-textarea" id="color_preferences" name="color_preferences" rows="3" placeholder="Beschreibe deine Farbwünsche..."></textarea>
                                    <div class="form-hint" id="color_preferences-hint"></div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="special_requests" class="form-label">💫 Besondere Wünsche</label>
                                    <textarea class="form-control furry-textarea" id="special_requests" name="special_requests" rows="3" placeholder="Besondere Features oder Wünsche..."></textarea>
                                    <div class="form-hint" id="special_requests-hint"></div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="reference_images" class="form-label">🖼️ Referenzbilder</label>
                                    <div class="file-upload-area">
                                        <input type="file" class="form-control furry-file-input" id="reference_images" name="reference_images" accept="image/*" multiple>
                                        <div class="file-upload-hint">
                                            <span class="upload-icon">📁</span>
                                            <span>Bilder hierher ziehen oder klicken zum Auswählen</span>
                                        </div>
                                    </div>
                                    <div class="form-hint" id="reference_images-hint"></div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="deadline_request" class="form-label">📅 Gewünschter Fertigstellungstermin</label>
                                    <input type="date" class="form-control furry-input" id="deadline_request" name="deadline_request">
                                    <div class="form-hint" id="deadline_request-hint"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn furry-btn">
                            🚀 Anfrage absenden
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
:root {
    --primary-color: #8B5CF6;
    --secondary-color: #EC4899;
    --accent-color: #F59E0B;
    --dark-color: #1F2937;
    --light-color: #F3E8FF;
    --white-color: #FFFFFF;
    --gradient-start: #8B5CF6;
    --gradient-middle: #EC4899;
}

.custom-order-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.custom-order-hero {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    color: white;
    padding: 3rem 2rem;
    border-radius: 20px;
    margin-bottom: 2rem;
}

.custom-order-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.custom-order-subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.custom-order-stats {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.stat-item {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
}

.info-section {
    padding: 2rem;
}

.info-header {
    margin-bottom: 2rem;
}

.info-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.info-title {
    color: var(--dark-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.info-subtitle {
    color: var(--dark-color);
    opacity: 0.7;
    margin-bottom: 0;
}

.process-steps {
    margin-bottom: 2rem;
}

.process-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--light-color);
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.process-step:hover {
    transform: translateX(5px);
}

.step-number {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.step-content h5 {
    color: var(--dark-color);
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.step-content p {
    color: var(--dark-color);
    opacity: 0.8;
    margin-bottom: 0;
    font-size: 0.9rem;
}

.important-notes {
    margin-bottom: 2rem;
}

.notes-title {
    color: var(--dark-color);
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.note-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem;
    background: white;
    border-radius: 10px;
}

.note-icon {
    font-size: 1.2rem;
    min-width: 1.5rem;
}

.note-text {
    color: var(--dark-color);
    font-weight: 500;
}

.gallery-link {
    text-align: center;
}

.form-section {
    padding: 2rem;
}

.form-header {
    margin-bottom: 2rem;
}

.form-title {
    color: var(--dark-color);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.form-subtitle {
    color: var(--dark-color);
    opacity: 0.7;
    margin-bottom: 0;
}

.form-section-group {
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: var(--light-color);
    border-radius: 15px;
}

.section-header {
    color: var(--dark-color);
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

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

.furry-input, .furry-select, .furry-textarea {
    width: 100%;
    padding: 0.75rem;
    border-radius: 10px;
    border: 2px solid var(--light-color);
    transition: all 0.3s ease;
    font-size: 1rem;
    background: white;
}

.furry-input:focus, .furry-select:focus, .furry-textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
    outline: none;
}

.furry-input.invalid, .furry-select.invalid, .furry-textarea.invalid {
    border-color: #EF4444;
    box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.25);
}

.furry-input.valid, .furry-select.valid, .furry-textarea.valid {
    border-color: #10B981;
    box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25);
}

.furry-textarea {
    min-height: 120px;
    resize: vertical;
}

.file-upload-area {
    position: relative;
    border: 2px dashed var(--light-color);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    background: white;
    cursor: pointer;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.file-upload-area:hover {
    border-color: var(--primary-color);
    background: var(--light-color);
}

.furry-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
}

.file-upload-hint {
    color: var(--dark-color);
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
}

.upload-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
}

.form-hint {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    font-weight: 500;
}

.form-hint:empty {
    display: none;
}

.form-actions {
    text-align: center;
    margin-top: 2rem;
}

.furry-btn {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.furry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.furry-btn-outline {
    background: white;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 0.75rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.furry-btn-outline:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
    text-decoration: none;
}

.alert-danger {
    background: linear-gradient(135deg, #FEE2E2, #FECACA);
    border: 2px solid #EF4444;
    border-radius: 10px;
    color: #991B1B;
    padding: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .custom-order-container {
        padding: 1rem;
    }
    
    .custom-order-title {
        font-size: 2rem;
    }
    
    .custom-order-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .stat-item {
        width: 100%;
        text-align: center;
    }
    
    .process-step {
        flex-direction: column;
        text-align: center;
    }
    
    .step-number {
        align-self: center;
    }
}

/* Animation für erfolgreiche Anfrage */
@keyframes success-bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

.success-animation {
    animation: success-bounce 1s ease-in-out;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.custom-order-form');
    const fields = [
        {id: 'character_name', hint: 'Bitte gib den Namen deines Characters ein.'},
        {id: 'fursuit_type', hint: 'Bitte wähle einen Fursuit-Typ aus.'},
        {id: 'character_description', hint: 'Bitte beschreibe deinen Character.'},
        {id: 'style', hint: 'Bitte wähle einen Stil aus.'},
        {id: 'budget_range', hint: 'Bitte wähle ein Budget aus.'}
    ];
    
    // Live-Validierung
    fields.forEach(f => {
        const input = document.getElementById(f.id);
        const hint = document.getElementById(f.id+'-hint');
        
        if (input) {
            input.addEventListener('blur', function() {
                validateField(this, f.hint);
            });
            
            input.addEventListener('input', function() {
                if (this.classList.contains('invalid')) {
                    validateField(this, f.hint);
                }
            });
        }
    });
    
    function validateField(field, hintText) {
        const hint = document.getElementById(field.id+'-hint');
        let isValid = true;
        
        if (!field.value.trim()) {
            isValid = false;
        }
        
        if (isValid) {
            field.classList.remove('invalid');
            field.classList.add('valid');
            hint.textContent = '✅ Alles super!';
            hint.style.color = '#10B981';
        } else {
            field.classList.remove('valid');
            field.classList.add('invalid');
            hint.textContent = hintText + ' 🐾';
            hint.style.color = '#EF4444';
        }
    }
    
    // File upload handling
    const fileInput = document.getElementById('reference_images');
    const fileArea = document.querySelector('.file-upload-area');
    
    if (fileInput) {
        fileInput.addEventListener('change', function() {
            const files = this.files;
            if (files.length > 0) {
                fileArea.style.borderColor = '#10B981';
                fileArea.style.background = '#F0FDF4';
                const hint = document.getElementById('reference_images-hint');
                hint.textContent = `✅ ${files.length} Datei(en) ausgewählt`;
                hint.style.color = '#10B981';
            }
        });
        
        // Drag and drop
        fileArea.addEventListener('dragover', function(e) {
            e.preventDefault();
            this.style.borderColor = '#8B5CF6';
            this.style.background = '#F3E8FF';
        });
        
        fileArea.addEventListener('drop', function(e) {
            e.preventDefault();
            fileInput.files = e.dataTransfer.files;
            fileInput.dispatchEvent(new Event('change'));
        });
    }
    
    // Formular-Submission
    form.addEventListener('submit', function(e) {
        let valid = true;
        
        fields.forEach(f => {
            const input = document.getElementById(f.id);
            if (input && !input.value.trim()) {
                input.classList.add('invalid');
                input.classList.remove('valid');
                valid = false;
            }
        });
        
        if (!valid) {
            e.preventDefault();
            // Smooth scroll to first invalid field
            const firstInvalid = document.querySelector('.invalid');
            if (firstInvalid) {
                firstInvalid.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        } else {
            // Success animation
            document.querySelector('.form-section').classList.add('success-animation');
        }
    });
});
</script>
{% endblock %}