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

{% block body %}
	<div class="container absolute">
		<datalist id="client">
			{% for client in clients %}
				<option value="{{client}}">{{client}}</option>
			{% endfor %}
		</datalist>

		<datalist id="products">
			{% for compo in composants %}
				<option value="{{compo}}">{{compo}}</option>
			{% endfor %}
			{% for pc in pcs %}
				<option value="{{pc}}">{{pc}}</option>
			{% endfor %}
			{% for item in laptops %}
				<option value="{{item}}">{{item}}</option>
			{% endfor %}
		</datalist>

		<form action="{{path('commande.create.boutique')}}" onsubmit="return checkEmptyProductList()" method="POST">
			<div class="d-flex align-items-center">
				<div>
					<img src="/img/shop.svg" alt="shop" width="100">

				</div>
				<div class="mx-3">
					<label for="date">Date de la commande</label>
					<input type="datetime-local" name="date" id="date" value="{{ "now" | date("Y-m-d H:i:s","Europe/Paris") }}" class="form-control">
				</div>
				<div class="flex-fill p-3">
					<div>
						<label for="client">Client :</label><input type="text" name='client' id="input_client" class="form-select" autocomplete="off" required="required" list="client" {% if client is defined %} value="{{client}}" readonly {% endif %}>

					</div>
				</div>
			</div>
			<div>
				<div>
					<div class="d-flex justify-content-between my-3">
						<div class="flex-fill">
							<label for="search">Produit</label>
							<input type="text" name='search' id="input_product" class="form-select" autocomplete="off" list="products">
						</div>
						<div class="ms-3">
							<label for="qte">Quantité</label>
							<input type="number" class="form-control w-50 " value="1" min="0" name="qte" id="input_qte">

						</div>
						<button type="button" id="add_item_to_cmd_button" class="btn btn-success mx-3" onclick="addToCmd('{{path('commande.new.boutique.line')}}')">Ajouter</button>

					</div>
					<span class="search-list shadow" style="display: none"></span>
				</div>
			</div>

			<table class="container mt-3 w-100" id="product_table" style="display:none">
				<thead>
					<tr>
						<td>Produit</td>
						<td>Quantité</td>
						<td>Stock</td>
						<td>P.U HT</td>
						<td>Total HT</td>
						<td></td>
					</tr>
				</thead>
				<tbody id="product_list"></tbody>
			</table>

			<div class="d-flex mt-3">
			<a href="{{path('commande',{submenu : 'all'})}}" class="btn btn-danger">Annuler</a>
				<input type="submit" class="btn btn-success mx-3" value="Valider">
			</div>
		</form>
	</div>

	<script src='{{ asset('js/commande.js') }}'></script>

{% endblock %}