{% extends 'base.html.twig' %}
{% block title %}Commande d'achat{% endblock %}
{% block body %}<h2 class="mb-4"><i class="bi bi-bag-plus"></i> Commande d'achat</h2><div class="card border-0 shadow-sm p-4">{{ form_start(form) }}<div class="row">{{ form_row(form.fournisseur) }}{{ form_row(form.numeroFacture) }}{{ form_row(form.dateCommande) }}{{ form_row(form.commentaire) }}</div><h5 class="mt-4">Lignes</h5><div id="lignes" data-index="{{ form.lignes|length }}" data-prototype="{{ form_widget(form.lignes.vars.prototype)|e('html_attr') }}">{% for ligne in form.lignes %}<div class="row g-2 align-items-end mb-2 ligne-commande">{{ form_row(ligne.produit, {row_attr: {class: 'col-md-5'}}) }}{{ form_row(ligne.quantite, {row_attr: {class: 'col-md-2'}}) }}{{ form_row(ligne.prixUnitaireAchat, {row_attr: {class: 'col-md-3'}}) }}<div class="col-md-2"><button type="button" class="btn btn-outline-danger remove-ligne">Supprimer</button></div></div>{% endfor %}</div><button type="button" id="add-ligne" class="btn btn-outline-secondary mt-2">Ajouter une ligne</button><div class="mt-4"><button class="btn btn-primary">Enregistrer le brouillon</button> <a class="btn btn-outline-secondary" href="{{ path('commande_index') }}">Annuler</a></div>{{ form_end(form) }}</div>{% endblock %}
{% block javascripts %}<script>const container=document.getElementById('lignes');document.getElementById('add-ligne').addEventListener('click',()=>{const index=container.dataset.index;const html=container.dataset.prototype.replace(/__name__/g,index);container.insertAdjacentHTML('beforeend','<div class="row g-2 align-items-end mb-2 ligne-commande">'+html+'<div class="col-md-2"><button type="button" class="btn btn-outline-danger remove-ligne">Supprimer</button></div></div>');container.dataset.index=Number(index)+1;});document.addEventListener('click',event=>{if(event.target.classList.contains('remove-ligne'))event.target.closest('.ligne-commande').remove();});</script>{% endblock %}