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

{% block stylesheets %}
	<link rel="stylesheet" href="/css/intervention.css">
{% endblock %}

{% block body %}

	<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 %}
	</datalist>


	<div class="absolute w-75">

		<div class="d-flex justify-content-between">
			
			<div id="heure_restante">
				<span>
					<b>Nombre d'heure restantes</b>
					:</span>
				<span>0</span>
				<span>H</span>
			</div>
		</div>


		{{form_start(form)}}
		<div>
			<label for="client">Client :</label>
			<input type="text" name='client' id="input_client" class="form-control" autocomplete="off" required="required" list="client" {% if client is defined %} value="{{client}}" readonly {% elseif client is defined %} value="{{client}}" readonly {% endif %}>

		</div>


		{{form_row(form.description)}}

		<div class="m-3">
		<label for="surplace">Sur place</label>
			<input type="radio" name="type" value="surplace" id="surplace" checked>
			
		<label for="commande">Commande</label>
			<input type="radio" name="type" value="commande" id="commande">
			
		<label for="reparation">Réparation</label>
			<input type="radio" name="type" value="reparation" id="reparation">
		</div>

		<div class="my-3 d-flex align-items-center">
			{{form_row(form.distance)}}

			{{form_row(form.heure)}}


		</div>

		<ul class="nav nav-tabs my-3" id="myTab" role="tablist">
			<li class="nav-item" role="presentation">
				<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#product" type="button" role="tab" aria-controls="product" aria-selected="true">Produit</button>
			</li>
			<li class="nav-item" role="presentation">
				<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#service" type="button" role="tab" aria-controls="service" aria-selected="false">Service</button>
			</li>

		</ul>

		<div class="tab-content" id="myTabContent">
			<div class="tab-pane fade show active" id="product" role="tabpanel" aria-labelledby="product-tab">
				<div class="d-flex"><input type="text" id="searchCompo" class="form-control w-100" value="" autocomplete="off" placeholder="Rechercher un Composant" name='search' list="products">
					<div class="mx-3">
						<label for="qte">Quantité</label>
						<input type="number" class="form-control" min="0" value="1" name="qte" id="qteCompo">
					</div>

					<button class="btn btn-success" type="button" onclick="addProductToDevis('{{path('reparation.template')}}')">Ajouter</button>
				</div>


			</div>
			<div class="tab-pane fade" id="service" role="tabpanel" aria-labelledby="service-tab">
				<div class="d-flex justify-content-between align-items-center m-5">
					<div>
						<label for="descr">Description :</label>
						<br>
						<textarea name="descr" id="descr" cols="50" rows="5"></textarea>
					</div>
					<div>
						<label for="qte">Quantité</label>
						<input type="number" class="form-control" min="0" value="1" name="qte" id="qte">
					</div>


					<div>
						<label for="price">Montant TTC :</label>
						<input type="number" class="form-control" min="0" value="0.00" name="price" id="price_TTC">

					</div>
					<button class="btn btn-success p-3" type="button" onclick="addLineToDevis('{{path('reparation.template')}}')">Ajouter</button>

				</div>

			</div>

			<table class="w-100 my-3">
				<thead>
					<tr>
						<td></td>
						<td>Description</td>
						<td>Quantité</td>
						<td>HT Unitaire</td>
						<td>TTC Unitaire</td>
						<td>Total TTC</td>
					</tr>
				</thead>
				<tbody id="product_list">
					{% if intervention is defined %}
						{% for article in intervention.getArticles() %}

							{% if article.isComposant() %}
								{% set compo = compoRepo.findOneByConcat(article.article.__toString()) %}
								{% include "reparations/templates/devisLine.html.twig" with { qte : article.quantite, tva :tva, id : loop.index, compo : compo} %}
								{% set compo = null %}
							{% elseif article.isPc() %}
								{% set pc =  pcRepo.findOneBy({'modele' : article.article.getModele() }) %}


								{% include "reparations/templates/devisLine.html.twig" with { qte : article.quantite,tva :tva, id : loop.index, pc : pc} %}

								{% set pc = null %}

							{% else %}
								{% include "reparations/templates/devisLine.html.twig" with {presta : article.article, tva :tva, id : loop.index} %}

							{% endif %}
						{% endfor %}

					{% endif %}
				</tbody>
			</table>

		</div>


		<div class="d-flex my-3">
			<a href="{{path('intervention',{submenu :'all'})}}" class="btn btn-danger">Annuler</a>
			<button type="submit" class="btn btn-success mx-3">
				{% if intervention is defined %}
					Modifier
				{% else %}

					Créer
				{% endif %}
			</button>
		</div>
		{{form_end(form)}}


	</div>

	<script src='/js/intervention.js'></script>
	<script>
		document.getElementById('input_client').addEventListener('change', (e) => {


$.ajax({
method: "POST",
url: "{{ path('client.get.quota') }}",
data: {
ref: e.target.value
},
success: function (data) {
if (data != 'null') {
document.getElementById('heure_restante').children[1].innerHTML = data;
document.getElementById('heure_restante').style.display = 'block';
} else {
document.getElementById('heure_restante').style.display = 'none';

}
}
});
});

function getTxHeure() {
return {{ txHeure }};
}
function getTarifKm() {
return {{ tarifKm }};
}
	</script>

{% endblock %}