{% extends 'layout.html' %}

{% block title %}Ajouter 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-plus-circle me-2"></i>Nouvelle commande
        </h2>
    </div>
    <div class="col-md-4 text-end">
        <a href="{{ url_for('liste_commandes') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Retour à la liste
        </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 commande</h5>
    </div>
    <div class="card-body">
        <form method="post" action="{{ url_for('ajouter_commande') }}">
            <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" 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="{{ today_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 }}">{{ fournisseur.nom }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Informations complémentaires -->
                <div class="col-md-6 mb-4">
                    <div class="card h-100">
                        <div class="card-header bg-light">
                            <h5 class="mb-0">Informations complémentaires</h5>
                        </div>
                        <div class="card-body">
                            <div class="alert alert-info">
                                <i class="fas fa-info-circle me-2"></i>Les articles de la commande seront enregistrés dans la section ci-dessous.
                            </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">
                        <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>
                    </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 la commande
                </button>
                <a href="{{ url_for('liste_commandes') }}" 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;
        });
        
        // Afficher le total quelque part si nécessaire
        // (Montant n'est plus stocké dans la table commande)
    }
    
    // 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 %}