{% for cmd in cmds %}
	<div class="mb-5">
		<div class="d-flex justify-content-between {% if cmd.status.id == 9 %}bg-success text-white p-2{% endif %}">

			<div>
				<a href="{{path('fournisseur.print',{numero : cmd.numero})}}" target="_blank" class="cmd-icon "><img src="/img/printer.svg" alt="print" width="40"></a>


				<img src="/img/carte-right.svg" alt="arrow" id='arrow_{{cmd.numero}}' {% if cmd.status.id != 9 %} class="caret active" {% endif %} onclick="displayOrder('{{cmd.numero}}')">

				<b>{{cmd.numero}}</b>

				-
				<i>
					{{cmd.getFormattedDateOrder()}}

				</i>


				<div class="dropdown">
					<button class="btn btn-success rounded dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
						<img src="/img/plus.svg" alt="plus" width="30">
						Ajouter
					</button>
					<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
						<li>
							<button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#addCompoModal" data-id="{{cmd.numero}}">Composant</button>
						</li>
						<li>
							<button class="dropdown-item" data-bs-toggle="modal" data-bs-target="#addPjModal" data-id="{{cmd.id}}">

								<img src="/img/attachment.svg" alt="attachment" width="15">
								Piece Jointe</button>

						</li>

					</ul>
				</div>
			</div>


			<div>
				{% if cmd.hasPieceJointe() %}
					{% if cmd.pieceJointe | length > 1 %}
						<a href="{{path('fournisseur.order.see.pj',{id:cmd.id})}}" class="btn btn-info">
										<img src="/img/attachment.svg" alt="attachment" width="15">
										Voir les Pieces Jointes</a>
					{% else %}
						<a href="{{cmd.pieceJointe[0].getUrl()}}" target="_blank" class="btn btn-info">
							<img src="/img/attachment.svg" alt="attachment" width="15">
							Voir la Piece Jointe</button>
					</a>


				{% endif %}
			{% endif %}
				<a href="{{ path('fournisseur.order.set.status',{num:cmd.numero,status:4}) }}" class="btn btn-danger mx-5">
					<img src="/img/cancel.svg" alt="annuler" width="30"><span class="ms-2">Annuler</span></a>
			<a href="{{path('fournisseur.order.delete',{num : cmd.numero})}}" class="btn btn-danger"><img src="/img/trash.svg" alt="trash" width="30">Supprimer</a>

		</div>
	</div>


	<div id="content_{{cmd.numero}}" class="content" {% if cmd.status.id == 9 %} style=" display:none" {% endif %}>
		<table class="table">
			<thead>
				<tr class="text-center">
					<td></td>
					<th>Référence</th>
					<td>Modele</td>
					<td>EAN</td>
					<td>Fournisseur</td>
					<td>Stock Reel</td>
					<td>A Commander</td>
					<td></td>
				</tr>
			</thead>
			<tbody>
				{% for item in cmd.contenu | merge(cmd.details) %}

					<tr class="text-center">
						<td>
							{% if cmd.status.id != 9 %}
								<a href="{{path('fournisseur.order.product.delete',{num : cmd.numero, item : item.id})}}"><img src="/img/trash.svg" alt="trash"></a>
							{% endif %}

						</td>
						<td>
							{% if item.hasCommande()%}
								{{ item.commande }}
							{% elseif item.hasDevis() %}
								{{ item.devis }}
							{% endif %}

						</td>
						<td data-label="Article">{{item.article}}</td>
						<td data-label="EAN">
							{% if item.isComposant() %}
								{{item.article.isbn}}
							{% endif %}
						</td>
						<td id='frn_{{cmd.numero}}_{{item.id}}' data-label="Fournisseur">
							<div>
								<span>{{item.fournisseur}}</span>
								<img src="/img/edit.svg" alt="edit" onclick="showFournisseurEdit()">
							</div>

							<div style="display:none">

								<select name="fournisseur" id="select_{{cmd.numero}}_{{item.id}}" class="form-select">
									{% for frn in fournisseurs %}
										<option value="{{frn.id}}">{{frn.nom}}</option>
									{% endfor %}
								</select>
								<button class="btn btn-success" onclick="updateFournisseur('{{path('fournisseur.order.compo.edit',{num : cmd.numero,compo : item.article.id})}}','{{cmd.numero}}','{{item.id}}')"><img src="/img/check.svg" alt="check"></button>
							</div>
						</td>

						<td class="bg-danger bg-gradient text-white" data-label="Stock">{{item.article.quantite}}</td>

						<td class="bg-success bg-gradient text-white" data-label="A commander">{{item.quantite}}</td>
						{% if cmd.status.id == 13 %}
							<td><img src="/img/dash.svg" alt="moins" width="30" onclick="removeQte(null)">


								<span class="">0</span>
								<img src="/img/plus.svg" alt="plus" onclick="addQte()" width="30">

								<button class="btn btn-success" onclick="submitQteCompo('{{path('fournisseur.order.compo.edit',{num : cmd.numero,compo : item.article.id})}}')">OK</button>


							</td>
						{% endif %}


					</tr>

				{% endfor %}


			</tbody>
		</table>
			<div class="d-flex">
				<form action="{{path('fournisseur.order.set.status',{status: 13,num: cmd.numero})}}" method="POST">

					<div class="d-flex"><input type="date" class="form-control mx-2" name="date" value="{{ "now"|date("Y-m-d") }}">
						<button class="btn btn-success">Commander</button>
					</div>


				</form>

			</div>


	</div>
</div>

{% if loop.index != cmds | length %}
	<hr>
{% endif %}

{% else %}

	<div class="text-center fs-2">Il n'y a aucune commande dans ce segment</div>

{% endfor %}