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

{% block title %}Lancer un Nouveau Projet - {{ block.super }}{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'css/orders/order_form.css' %}">
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12 col-xl-10 mx-auto">
        <!-- En-tête de la page -->
        <div class="mb-5 text-center">
            <h1 class="display-5 fw-bold text-dark mb-3">
                <i class="fas fa-rocket me-3 text-primary"></i>
                Démarrons votre projet
            </h1>
            <p class="lead text-muted">
                Ce formulaire nous aidera à comprendre parfaitement votre vision. Prenez votre temps pour le remplir.
            </p>
            
            <!-- Barre de progression visuelle -->
            <div class="progress mt-4" style="height: 6px;">
                <div class="progress-bar bg-primary progress-bar-striped progress-bar-animated" role="progressbar" 
                     style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="form-progress">
                </div>
            </div>
        </div>
        
        <!-- Structure du formulaire -->
        <form method="post" novalidate id="project-form">
            {% csrf_token %}
            
            <!-- Affichage des erreurs générales -->
            {% if form.non_field_errors %}
                <div class="alert alert-danger mb-4" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    <strong>Erreur :</strong> {{ form.non_field_errors }}
                </div>
            {% endif %}
            
            <!-- Section 1 : Vous et Votre Projet -->
            <div class="card shadow-sm mb-4" data-section="1">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-user-circle me-2"></i>
                        Étape 1 : Vous et Votre Projet
                    </h4>
                </div>
                <div class="card-body">
                    <!-- Champ project_for (radio buttons) -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="fas fa-question-circle me-1 text-muted"></i>
                            {{ form.project_for.label }}
                            {% if form.project_for.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        {% for value, text in form.project_for.field.choices %}
                            <div class="form-check">
                                <input class="form-check-input" type="radio" 
                                       name="{{ form.project_for.name }}" 
                                       id="{{ form.project_for.id_for_label }}_{{ forloop.counter0 }}"
                                       value="{{ value }}" 
                                       {% if form.project_for.value == value %}checked{% endif %}
                                       {% if form.project_for.field.required %}required{% endif %}>
                                <label class="form-check-label" for="{{ form.project_for.id_for_label }}_{{ forloop.counter0 }}">
                                    {{ text }}
                                </label>
                            </div>
                        {% endfor %}
                        {% if form.project_for.errors %}
                            <div class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.project_for.errors.as_text }}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Champ project_name (text input) -->
                    <div class="mb-3">
                        <label for="{{ form.project_name.id_for_label }}" class="form-label fw-semibold">
                            <i class="fas fa-tag me-1 text-muted"></i>
                            {{ form.project_name.label }}
                            {% if form.project_name.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        <input type="text" 
                               name="{{ form.project_name.name }}" 
                               id="{{ form.project_name.id_for_label }}"
                               class="form-control{% if form.project_name.errors %} is-invalid{% endif %}"
                               value="{{ form.project_name.value|default_if_none:'' }}"
                               {% if form.project_name.field.required %}required{% endif %}>
                        {% if form.project_name.errors %}
                            <div class="invalid-feedback">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.project_name.errors.as_text }}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Champ project_description (textarea) -->
                    <div class="mb-3">
                        <label for="{{ form.project_description.id_for_label }}" class="form-label fw-semibold">
                            <i class="fas fa-align-left me-1 text-muted"></i>
                            {{ form.project_description.label }}
                            {% if form.project_description.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        <textarea 
                            name="{{ form.project_description.name }}" 
                            id="{{ form.project_description.id_for_label }}"
                            class="form-control{% if form.project_description.errors %} is-invalid{% endif %}"
                            rows="4"
                            placeholder="Décrivez votre projet en détail..."
                            {% if form.project_description.field.required %}required{% endif %}>{{ form.project_description.value|default_if_none:"" }}</textarea>
                        {% if form.project_description.errors %}
                            <div class="invalid-feedback">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.project_description.errors.as_text }}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Champ main_goal (select dropdown) -->
                    <div class="mb-3">
                        <label for="{{ form.main_goal.id_for_label }}" class="form-label fw-semibold">
                            <i class="fas fa-bullseye me-1 text-muted"></i>
                            {{ form.main_goal.label }}
                            {% if form.main_goal.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        <select name="{{ form.main_goal.name }}" 
                                id="{{ form.main_goal.id_for_label }}" 
                                class="form-select{% if form.main_goal.errors %} is-invalid{% endif %}"
                                {% if form.main_goal.field.required %}required{% endif %}>
                            {% for value, text in form.main_goal.field.choices %}
                                <option value="{{ value }}" {% if form.main_goal.value == value %}selected{% endif %}>{{ text }}</option>
                            {% endfor %}
                        </select>
                        {% if form.main_goal.errors %}
                            <div class="invalid-feedback">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.main_goal.errors.as_text }}
                            </div>
                        {% endif %}
                        
                        <!-- Zone de texte pour préciser "Autre" - cachée par défaut -->
                        <div class="mt-2" id="main-goal-other-container" style="display: none;">
                            <label for="main-goal-other-text" class="form-label fw-semibold">
                                <i class="fas fa-edit me-1 text-muted"></i>
                                Précisez votre objectif principal :
                            </label>
                            <textarea 
                                id="main-goal-other-text"
                                class="form-control"
                                rows="3"
                                placeholder="Décrivez en détail votre objectif principal..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Section 2 : Envergure et Fonctionnalités -->
            <div class="card shadow-sm mb-4" data-section="2">
                <div class="card-header bg-success text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-cogs me-2"></i>
                        Étape 2 : Envergure et Fonctionnalités
                    </h4>
                </div>
                <div class="card-body">
                    <!-- Champ site_type (checkboxes) -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="fas fa-globe me-1 text-muted"></i>
                            {{ form.site_type.label }}
                            {% if form.site_type.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        {% for value, text in form.site_type.field.choices %}
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" 
                                       name="{{ form.site_type.name }}" 
                                       id="{{ form.site_type.id_for_label }}_{{ forloop.counter0 }}"
                                       value="{{ value }}" 
                                       {% if value in form.site_type.value %}checked{% endif %}>
                                <label class="form-check-label" for="{{ form.site_type.id_for_label }}_{{ forloop.counter0 }}">
                                    {{ text }}
                                </label>
                            </div>
                        {% endfor %}
                        {% if form.site_type.errors %}
                            <div class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.site_type.errors.as_text }}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Champ page_count (select) -->
                    <div class="mb-3">
                        <label for="{{ form.page_count.id_for_label }}" class="form-label fw-semibold">
                            <i class="fas fa-file-alt me-1 text-muted"></i>
                            {{ form.page_count.label }}
                            {% if form.page_count.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        <select name="{{ form.page_count.name }}" 
                                id="{{ form.page_count.id_for_label }}" 
                                class="form-select{% if form.page_count.errors %} is-invalid{% endif %}"
                                {% if form.page_count.field.required %}required{% endif %}>
                            {% for value, text in form.page_count.field.choices %}
                                <option value="{{ value }}" {% if form.page_count.value == value %}selected{% endif %}>{{ text }}</option>
                            {% endfor %}
                        </select>
                        {% if form.page_count.errors %}
                            <div class="invalid-feedback">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.page_count.errors.as_text }}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Champ features (multiple checkboxes) -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="fas fa-puzzle-piece me-1 text-muted"></i>
                            {{ form.features.label }}
                            {% if form.features.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        <div class="form-text mb-2">
                            <small>Sélectionnez toutes les fonctionnalités qui vous intéressent.</small>
                        </div>
                        {% for value, text in form.features.field.choices %}
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" 
                                       name="{{ form.features.name }}" 
                                       id="{{ form.features.id_for_label }}_{{ forloop.counter0 }}"
                                       value="{{ value }}" 
                                       {% if value in form.features.value %}checked{% endif %}>
                                <label class="form-check-label" for="{{ form.features.id_for_label }}_{{ forloop.counter0 }}">
                                    {{ text }}
                                </label>
                            </div>
                        {% endfor %}
                        {% if form.features.errors %}
                            <div class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.features.errors.as_text }}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Champ other_features (textarea) -->
                    <div class="mb-3">
                        <label for="{{ form.other_features.id_for_label }}" class="form-label fw-semibold">
                            <i class="fas fa-plus-circle me-1 text-muted"></i>
                            {{ form.other_features.label }}
                        </label>
                        <textarea 
                            name="{{ form.other_features.name }}" 
                            id="{{ form.other_features.id_for_label }}"
                            class="form-control{% if form.other_features.errors %} is-invalid{% endif %}"
                            rows="3"
                            placeholder="Décrivez d'autres fonctionnalités spécifiques...">{{ form.other_features.value|default_if_none:"" }}</textarea>
                        {% if form.other_features.errors %}
                            <div class="invalid-feedback">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.other_features.errors.as_text }}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- Section 3 : Design et Identité Visuelle -->
            <div class="card shadow-sm mb-4" data-section="3">
                <div class="card-header bg-info text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-palette me-2"></i>
                        Étape 3 : Design et Identité Visuelle
                    </h4>
                </div>
                <div class="card-body">
                    <!-- Champ design_references (textarea) -->
                    <div class="mb-3">
                        <label for="{{ form.design_references.id_for_label }}" class="form-label fw-semibold">
                            <i class="fas fa-link me-1 text-muted"></i>
                            {{ form.design_references.label }}
                        </label>
                        <textarea 
                            name="{{ form.design_references.name }}" 
                            id="{{ form.design_references.id_for_label }}"
                            class="form-control{% if form.design_references.errors %} is-invalid{% endif %}"
                            rows="4"
                            placeholder="Partagez des liens de sites que vous aimez, des couleurs préférées, etc...">{{ form.design_references.value|default_if_none:"" }}</textarea>
                        {% if form.design_references.errors %}
                            <div class="invalid-feedback">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.design_references.errors.as_text }}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Champ style_ambiance (input text) -->
                    <div class="mb-3">
                        <label for="{{ form.style_ambiance.id_for_label }}" class="form-label fw-semibold">
                            <i class="fas fa-magic me-1 text-muted"></i>
                            {{ form.style_ambiance.label }}
                            {% if form.style_ambiance.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        <input type="text" 
                               name="{{ form.style_ambiance.name }}" 
                               id="{{ form.style_ambiance.id_for_label }}"
                               class="form-control{% if form.style_ambiance.errors %} is-invalid{% endif %}"
                               value="{{ form.style_ambiance.value|default_if_none:'' }}"
                               placeholder="Ex: Professionnel, créatif, minimaliste..."
                               {% if form.style_ambiance.field.required %}required{% endif %}>
                        {% if form.style_ambiance.errors %}
                            <div class="invalid-feedback">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.style_ambiance.errors.as_text }}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
            <!-- Section 4 : Gestion et Budget -->
            <div class="card shadow-sm mb-4" data-section="4">
                <div class="card-header bg-warning text-dark">
                    <h4 class="mb-0">
                        <i class="fas fa-euro-sign me-2"></i>
                        Étape 4 : Gestion et Budget
                    </h4>
                </div>
                <div class="card-body">
                    <!-- Champ content_management (radio buttons) -->
                    <div class="mb-3">
                        <label class="form-label fw-semibold">
                            <i class="fas fa-edit me-1 text-muted"></i>
                            {{ form.content_management.label }}
                            {% if form.content_management.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        {% for value, text in form.content_management.field.choices %}
                            <div class="form-check">
                                <input class="form-check-input" type="radio" 
                                       name="{{ form.content_management.name }}" 
                                       id="{{ form.content_management.id_for_label }}_{{ forloop.counter0 }}"
                                       value="{{ value }}" 
                                       {% if form.content_management.value == value %}checked{% endif %}
                                       {% if form.content_management.field.required %}required{% endif %}>
                                <label class="form-check-label" for="{{ form.content_management.id_for_label }}_{{ forloop.counter0 }}">
                                    {{ text }}
                                </label>
                            </div>
                        {% endfor %}
                        {% if form.content_management.errors %}
                            <div class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.content_management.errors.as_text }}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Champ budget_range (select) -->
                    <div class="mb-3">
                        <label for="{{ form.budget_range.id_for_label }}" class="form-label fw-semibold">
                            <i class="fas fa-calculator me-1 text-muted"></i>
                            {{ form.budget_range.label }}
                            {% if form.budget_range.field.required %}
                                <span class="text-danger">*</span>
                            {% endif %}
                        </label>
                        <select name="{{ form.budget_range.name }}" 
                                id="{{ form.budget_range.id_for_label }}" 
                                class="form-select{% if form.budget_range.errors %} is-invalid{% endif %}"
                                {% if form.budget_range.field.required %}required{% endif %}>
                            {% for value, text in form.budget_range.field.choices %}
                                <option value="{{ value }}" {% if form.budget_range.value == value %}selected{% endif %}>{{ text }}</option>
                            {% endfor %}
                        </select>
                        {% if form.budget_range.errors %}
                            <div class="invalid-feedback">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.budget_range.errors.as_text }}
                            </div>
                        {% endif %}
                    </div>
                    
                    <!-- Champ additional_comments (textarea) -->
                    <div class="mb-3">
                        <label for="{{ form.additional_comments.id_for_label }}" class="form-label fw-semibold">
                            <i class="fas fa-comment me-1 text-muted"></i>
                            {{ form.additional_comments.label }}
                        </label>
                        <textarea 
                            name="{{ form.additional_comments.name }}" 
                            id="{{ form.additional_comments.id_for_label }}"
                            class="form-control{% if form.additional_comments.errors %} is-invalid{% endif %}"
                            rows="4"
                            placeholder="Ajoutez toute information que vous jugez utile pour votre projet...">{{ form.additional_comments.value|default_if_none:"" }}</textarea>
                        {% if form.additional_comments.errors %}
                            <div class="invalid-feedback">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.additional_comments.errors.as_text }}
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            
             <div class="card shadow-sm mb-4 border-warning" data-section="5">
                <div class="card-header bg-warning text-dark">
                    <h4 class="mb-0">
                        <i class="fas fa-shield-alt me-2"></i>
                        Étape 5 : Finalisation
                    </h4>
                </div>
                <div class="card-body bg-light">
                    <div class="mb-3">
                        <div class="form-check my-4">
                            <input class="form-check-input{% if form.terms_agreement.errors %} is-invalid{% endif %}" 
                                   type="checkbox" 
                                   name="{{ form.terms_agreement.name }}" 
                                   id="{{ form.terms_agreement.id_for_label }}"
                                   {% if form.terms_agreement.field.required %}required{% endif %}>
                            <label class="form-check-label fw-semibold" for="{{ form.terms_agreement.id_for_label }}">
                                {% if form.terms_agreement.label %}
                                    {{ form.terms_agreement.label|safe }}
                                {% else %}
                                    J'ai lu et j'accepte les <a href="{% url 'legal:document_detail' 'TERMS_CLIENT' %}" target="_blank">Conditions Générales</a> et la <a href="{% url 'legal:document_detail' 'PRIVACY_CLIENT' %}" target="_blank">Politique de Confidentialité</a>.
                                {% endif %}
                                {% if form.terms_agreement.field.required %}
                                    <span class="text-danger ms-1">*</span>
                                {% endif %}
                            </label>
                        </div>
                        {% if form.terms_agreement.errors %}
                            <div class="invalid-feedback d-block">
                                <i class="fas fa-exclamation-triangle me-1"></i>
                                {{ form.terms_agreement.errors.as_text }}
                            </div>
                        {% endif %}
                    </div>
                    
                    <div class="alert alert-info mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        <small>
                            <strong>Confidentialité assurée :</strong> Vos informations sont traitées de manière confidentielle 
                            et utilisées uniquement pour établir votre devis personnalisé.
                        </small>
                    </div>
                </div>
            </div>
            
            <!-- Bouton de Soumission -->
            <div class="text-center mb-5">
                <button type="submit" class="btn btn-secondary btn-lg px-5 py-3 shadow" id="submit-btn" disabled>
                    <i class="fas fa-paper-plane me-2"></i>
                    Soumettre ma demande de projet
                </button>
                
                <div class="mt-3">
                    <small class="text-muted">
                        <i class="fas fa-clock me-1"></i>
                        Vous recevrez une réponse sous 24-48 heures ouvrées
                    </small>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- Script pour la gestion de la progression et les interactions -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('project-form');
    const progressBar = document.getElementById('form-progress');
    const submitBtn = document.getElementById('submit-btn');
    const termsCheckbox = document.getElementById('{{ form.terms_agreement.id_for_label }}');
    const mainGoalSelect = document.getElementById('{{ form.main_goal.id_for_label }}');
    const mainGoalOtherContainer = document.getElementById('main-goal-other-container');
    
    // État de soumission pour éviter les doubles envois
    let isSubmitting = false;
    
    // Fonction principale de validation du formulaire
    function validateFormState() {
        // 1. Vérifier tous les champs requis
        const requiredFields = form.querySelectorAll('input[required], select[required], textarea[required]');
        let filledRequiredFields = 0;
        let totalRequiredFields = 0;
        
        // Créer un Set pour éviter de compter plusieurs fois les groupes radio/checkbox
        const processedGroups = new Set();
        
        requiredFields.forEach(field => {
            const fieldName = field.name;
            
            if (field.type === 'radio') {
                // Pour les radio buttons, ne compter qu'une fois par groupe
                if (!processedGroups.has(fieldName)) {
                    processedGroups.add(fieldName);
                    totalRequiredFields++;
                    const checkedRadio = form.querySelector(`input[name="${fieldName}"]:checked`);
                    if (checkedRadio) {
                        filledRequiredFields++;
                    }
                }
            } else if (field.type === 'checkbox' && field.hasAttribute('required')) {
                // Pour les checkboxes requises, vérifier par groupe
                if (!processedGroups.has(fieldName)) {
                    processedGroups.add(fieldName);
                    totalRequiredFields++;
                    const checkedCheckboxes = form.querySelectorAll(`input[name="${fieldName}"]:checked`);
                    if (checkedCheckboxes.length > 0) {
                        filledRequiredFields++;
                    }
                }
            } else {
                // Pour les autres types de champs (text, textarea, select)
                totalRequiredFields++;
                if (field.value && field.value.trim() !== '') {
                    filledRequiredFields++;
                }
            }
        });
        
        // 2. Vérifier la case de consentement
        const termsAccepted = termsCheckbox && termsCheckbox.checked;
        
        // 3. Mettre à jour la barre de progression
        const progressPercentage = totalRequiredFields > 0 ? Math.round((filledRequiredFields / totalRequiredFields) * 100) : 0;
        progressBar.style.width = progressPercentage + '%';
        progressBar.setAttribute('aria-valuenow', progressPercentage);
        
        // 4. Activer/désactiver le bouton de soumission
        const allRequiredFieldsFilled = filledRequiredFields === totalRequiredFields;
        const canSubmit = allRequiredFieldsFilled && termsAccepted && !isSubmitting;
        
        if (canSubmit) {
            submitBtn.disabled = false;
            submitBtn.classList.remove('btn-secondary');
            submitBtn.classList.add('btn-primary');
        } else {
            submitBtn.disabled = true;
            submitBtn.classList.remove('btn-primary');
            submitBtn.classList.add('btn-secondary');
        }
    }
    
    // Fonction pour gérer l'affichage du champ "Autre" pour main_goal
    function toggleMainGoalOther() {
        if (mainGoalSelect && mainGoalOtherContainer) {
            if (mainGoalSelect.value === 'OTHER') {
                mainGoalOtherContainer.style.display = 'block';
            } else {
                mainGoalOtherContainer.style.display = 'none';
            }
        }
    }
    
    // Initialisation
    toggleMainGoalOther();
    validateFormState();
    
    // Écouter les changements sur le select main_goal
    if (mainGoalSelect) {
        mainGoalSelect.addEventListener('change', function() {
            toggleMainGoalOther();
            validateFormState();
        });
    }
    
    // Attacher les écouteurs d'événements à tous les champs du formulaire
    const allFields = form.querySelectorAll('input, select, textarea');
    allFields.forEach(field => {
        field.addEventListener('input', validateFormState);
        field.addEventListener('change', validateFormState);
    });
    
    // Gestion de la soumission du formulaire
    form.addEventListener('submit', function(e) {
        if (isSubmitting) {
            e.preventDefault();
            return false;
        }
        
        if (submitBtn.disabled) {
            e.preventDefault();
            return false;
        }
        
        // Marquer comme en cours de soumission
        isSubmitting = true;
        
        // Changer le texte et l'état du bouton
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Envoi en cours...';
        submitBtn.disabled = true;
        submitBtn.classList.remove('btn-primary');
        submitBtn.classList.add('btn-secondary');
    });
});
</script>
{% endblock %}

{% block extra_js %}
    <script src="{% static 'js/orders/order_form.js' %}"></script>
{% endblock %}