{% extends 'layout.html' %}

{% block title %}Modifier une commande{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-8">
        <h2 class="border-bottom pb-2">
            <i class="fas fa-edit me-2"></i>Modifier la commande n° {{ commande.numero }}
        </h2>
    </div>
    <div class="col-md-4 text-end">
        <a href="{{ url_for('voir_commande', id=commande.id) }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Retour aux détails
        </a>
    </div>
</div>

<div class="card">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="fas fa-edit me-2"></i>Formulaire de modification</h5>
    </div>
    <div class="card-body">
        <form method="post" action="{{ url_for('modifier_commande', id=commande.id) }}">
            <div class="row">
                <!-- Informations générales -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">Informations générales</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="numero" class="form-label">Numéro de commande *</label>
                                <input type="text" class="form-control" id="numero" name="numero" value="{{ commande.numero }}" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="date" class="form-label">Date de commande *</label>
                                <input type="date" class="form-control" id="date" name="date" value="{{ commande.date }}" required>
                            </div>
                            
                            <div class="mb-3">
                                <label for="id_fournisseur" class="form-label">Fournisseur *</label>
                                <select class="form-select" id="id_fournisseur" name="id_fournisseur" required>
                                    <option value="">Sélectionner un fournisseur</option>
                                    {% for fournisseur in fournisseurs %}
                                    <option value="{{ fournisseur.id }}" {% if commande.id_fournisseur|string == fournisseur.id|string %}selected{% endif %}>
                                        {{ fournisseur.nom }}
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="description" class="form-label">Description</label>
                                <textarea class="form-control" id="description" name="description" rows="3">{{ commande.description }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Livraison et statut -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">Livraison et statut</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="montant" class="form-label">Montant (€)</label>
                                <input type="number" step="0.01" class="form-control" id="montant" name="montant" value="{{ commande.montant|default(0, true) }}">
                            </div>
                            
                            <div class="mb-3">
                                <label for="statut" class="form-label">Statut</label>
                                <select class="form-select" id="statut" name="statut">
                                    <option value="En attente" {% if commande.statut == 'En attente' %}selected{% endif %}>En attente</option>
                                    <option value="Validée" {% if commande.statut == 'Validée' %}selected{% endif %}>Validée</option>
                                    <option value="En cours" {% if commande.statut == 'En cours' %}selected{% endif %}>En cours</option>
                                    <option value="Livrée" {% if commande.statut == 'Livrée' %}selected{% endif %}>Livrée</option>
                                    <option value="Annulée" {% if commande.statut == 'Annulée' %}selected{% endif %}>Annulée</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="date_livraison" class="form-label">Date de livraison prévue</label>
                                <input type="date" class="form-control" id="date_livraison" name="date_livraison" value="{{ commande.date_livraison }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Articles de la commande -->
            <div class="card mb-4">
                <div class="card-header bg-light">
                    <h5 class="mb-0">Articles de la commande</h5>
                </div>
                <div class="card-body">
                    <div id="articles-container">
                        {% if articles %}
                        {% for article in articles %}
                        <div class="row mb-2 article-row">
                            <div class="col-md-5">
                                <select class="form-select piece-select" name="piece_id[]">
                                    <option value="">Sélectionner une pièce</option>
                                    {% for piece in pieces %}
                                    <option value="{{ piece.id }}" {% if article.id_pr|string == piece.id|string %}selected{% endif %} data-ref="{{ piece.ref }}">
                                        {{ piece.designation }} ({{ piece.ref }})
                                    </option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-2">
                                <input type="number" class="form-control" name="quantite[]" placeholder="Quantité" min="1" value="{{ article.quantite }}">
                            </div>
                            <div class="col-md-3">
                                <input type="number" step="0.01" class="form-control" name="prix_unitaire[]" placeholder="Prix unitaire" value="{{ article.prix_unitaire }}">
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-danger remove-article"><i class="fas fa-trash"></i></button>
                            </div>
                        </div>
                        {% endfor %}
                        {% else %}
                        <div class="row mb-2 article-row">
                            <div class="col-md-5">
                                <select class="form-select piece-select" name="piece_id[]">
                                    <option value="">Sélectionner une pièce</option>
                                    {% for piece in pieces %}
                                    <option value="{{ piece.id }}" data-ref="{{ piece.ref }}">{{ piece.designation }} ({{ piece.ref }})</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-2">
                                <input type="number" class="form-control" name="quantite[]" placeholder="Quantité" min="1" value="1">
                            </div>
                            <div class="col-md-3">
                                <input type="number" step="0.01" class="form-control" name="prix_unitaire[]" placeholder="Prix unitaire">
                            </div>
                            <div class="col-md-2">
                                <button type="button" class="btn btn-danger remove-article"><i class="fas fa-trash"></i></button>
                            </div>
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="text-center mt-3">
                        <button type="button" id="add-article" class="btn btn-success">
                            <i class="fas fa-plus me-2"></i>Ajouter un article
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="text-end">
                <button type="submit" class="btn btn-primary">
                    <i class="fas fa-save me-2"></i>Enregistrer les modifications
                </button>
                <a href="{{ url_for('voir_commande', id=commande.id) }}" class="btn btn-secondary">
                    <i class="fas fa-times me-2"></i>Annuler
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Fonction pour calculer le total
    function calculateTotal() {
        let total = 0;
        const rows = document.querySelectorAll('.article-row');
        
        rows.forEach(row => {
            const quantite = parseFloat(row.querySelector('input[name="quantite[]"]').value) || 0;
            const prix = parseFloat(row.querySelector('input[name="prix_unitaire[]"]').value) || 0;
            total += quantite * prix;
        });
        
        document.getElementById('montant').value = total.toFixed(2);
    }
    
    // Calculer le total initial
    calculateTotal();
    
    // Ajouter un nouvel article
    document.getElementById('add-article').addEventListener('click', function() {
        const container = document.getElementById('articles-container');
        const newRow = document.createElement('div');
        newRow.className = 'row mb-2 article-row';
        newRow.innerHTML = `
            <div class="col-md-5">
                <select class="form-select piece-select" name="piece_id[]">
                    <option value="">Sélectionner une pièce</option>
                    {% for piece in pieces %}
                    <option value="{{ piece.id }}" data-ref="{{ piece.ref }}">{{ piece.designation }} ({{ piece.ref }})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-2">
                <input type="number" class="form-control" name="quantite[]" placeholder="Quantité" min="1" value="1">
            </div>
            <div class="col-md-3">
                <input type="number" step="0.01" class="form-control" name="prix_unitaire[]" placeholder="Prix unitaire">
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-danger remove-article"><i class="fas fa-trash"></i></button>
            </div>
        `;
        container.appendChild(newRow);
        
        // Ajouter les écouteurs d'événements pour le nouveau champ
        attachEventListeners(newRow);
    });
    
    // Fonction pour attacher les écouteurs d'événements
    function attachEventListeners(element) {
        // Supprimer un article
        element.querySelector('.remove-article').addEventListener('click', function() {
            element.remove();
            calculateTotal();
        });
        
        // Recalculer le total quand les valeurs changent
        element.querySelector('input[name="quantite[]"]').addEventListener('input', calculateTotal);
        element.querySelector('input[name="prix_unitaire[]"]').addEventListener('input', calculateTotal);
    }
    
    // Attacher les écouteurs aux champs existants
    document.querySelectorAll('.article-row').forEach(attachEventListeners);
});
</script>
{% endblock %}