{% extends "base.html.twig" %}


{% block body %}

<datalist id="compo">
		{% for compo in composants %}
			<option value="{{compo}}">{{compo}}</option>
		{% endfor %}
	</datalist>

	<div class="absolute w-75">


		<div class="d-flex justify-content-between">
			<div class="d-flex">
				<div class="fs-2">{{cmd.numero}}</div>
				{% if cmd.status.id == 9 %}
					<div class="bg-success text-white ms-3 p-3 rounded">Validé</div>
				{% endif %}


			</div>
			<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 class="fs-6">{{cmd.date}}</div>

		{% if cmd.status.id == 13 %}
			<button class="btn btn-success rounded" type="button" data-bs-toggle="modal" data-bs-target="#addCompoModal" data-id="{{cmd.numero}}"><img src="/img/plus.svg" alt="plus" width="30">
				Ajouter un composant</button>
		{% endif %}
		<div id="content_{{cmd.numero}}" class="content">
			<table class="table">
				<thead>
					<tr class="text-center">
						<td></td>
						<td></td>
						<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 %}

						<tr class="text-center">
							<td>

								<a href="{{path('fournisseur.order.product.delete',{num : cmd.numero, item : item.id})}}" class="btn btn-danger"><img src="/img/trash.svg" alt="trash" width="20"></a>


							</td>
							<td>
								{% if item.isComposant() and item.article.hasImage() %}
									<img src="/img/" alt="">
								{% endif %}
							</td>
							<td>{{item.article}}</td>
							<td>
								{% if item.isComposant() %}
									{{item.article.isbn}}
								{% endif %}
							</td>
							<td id='frn_{{cmd.numero}}_{{item.id}}'>
								<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">{{item.article.quantite}}</td>

							<td class="bg-success bg-gradient text-white">{{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>
			{% if cmd.status.id ==  13 %}
				<div class="d-flex">
					<form action="{{path('fournisseur.order.validate',{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">Valider</button>
						</div>


					</form>

				</div>


			{% endif %}
		</div>

	</div>


	{# Modal ajout qte Composant #}
	<div class="modal fade" id="addCompoModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Ajouter un composant</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">

					{{form_start(addComposant)}}
					<div class="fetched-data"></div>
					<div>
						<div class="d-flex">
							<input type="text" class="form-control " name='search' placeholder="Nom du composant" autocomplete="off" list="compo">
						</div>
						<div class="shadow search-list" style="display : none"></div>
					</div>


					{{form_row(addComposant.quantite)}}</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Annuler</button>
					{{form_row(addComposant.submit)}}
					{{form_end(addComposant)}}</div>
			</div>
		</div>
	</div>

	<script src="/js/fournisseur.js"></script>
{% endblock %}