{% extends 'layout.twig' %}

{% block body %}

	<div class="contenu clearfix"  id="controleQualite">
	
		<h1>
			{{ 'Contrôles qualité' | trad }}
		</h1>
		
		{{ ariane() }}

		<h2>
			{{ 'Contrôle qualité du bon de réception' | trad }} {{ idDoc }}

			<button class="principal" type="button" onClick="ajaxPopupV2('{{ path('Reception.ControleQualite.validate', {idDoc:idDoc}) }}', 'formControleQualite');">{{ 'Enregistrer' | trad }}</button>
			{{ arianeAnnuler() }}
		</h2>

		<form method="post" name="formControleQualite" id="formControleQualite">
			<ul class="nav nav-tabs" role="tablist" id="tablistArt">
				<li	id="ongletLigne" role="presentation" class="perma active">
					<a href="#ligne" aria-controls="ligne" role="tab" data-toggle="tab">
						{{ 'Lignes' | trad }}
					</a>
				</li>
				<li	id="ongletIncident" role="presentation" class="perma">
					<a href="#incident" aria-controls="incident" role="tab" data-toggle="tab" id="aIncident">
						{{ 'Incidents' | trad }}
						<span id="pastilleIncident" style="display: none;" class=" alerte_orange"></span>
						<span class="infos_tooltip top">
							<span class="tooltip-arrow">
							</span>
							{{ 'La quantité saisie est différente de la quantité attendue, un incident doit être déclaré.' | trad }}
						</span>
					</a>
				</li>
			</ul>

			<div class="tab-content">
				<div role="tabpanel" class="tab-pane clearfix active" id="ligne">
					<table class="table table-hover">
						<thead class="thead-dark">
							<tr>
								<th scope="col" width="">{{'N° Poste' | trad }}</th>

								<th scope="col" width="">{{'Code' | trad }}</th>
								<th scope="col" width="">{{'Libellé' | trad }}</th>
								<th scope="col" width="">{{'Unité' | trad }}</th>

								<th scope="col" width="">{{'Reçue' | trad }}</th>
								<th scope="col" width="">{{'Comptée' | trad }}</th>
								<th scope="col" width="">{{'Acceptée' | trad }}</th>

								<th scope="col" width="">{{'Reste à livrer' | trad }}</th>
								<th scope="col" width="" style="text-align:center;">{{'Contrôlé ?' | trad }}</th>
								<th scope="col" width="">{{'Type Contrôle' | trad }}</th>
							</tr>
						</thead>
						<tbody>
							{% for ligne in listeLigne %}
								<tr>
									<td>{{ ligne.NO_PO }}</td>
									
									<td>{{ ligne.CODE_ART }}</td>
									<td>{{ ligne.DES_SOMM }}</td>
									<td>{{ ligne.UNITE }}</td>

									<td class="montant">{{ ligne.QTE_RECUE |qte }}</td>
									<td class="montant">{{ ligne.QTE_COMPT |qte }}</td>
									<td>
										<input type="hidden" name="qte_c-{{ligne.NO_PO_BR}}" value="{{ligne.QTE_COMPT}}"/>
										{{ inputAdvance('TEXT', {
											'name'              	: 'qte_a' ~ '-' ~ ligne.NO_PO_BR,
											'value'             	: qteByUnite((ligne.QTE_COMPT), line.UNITE),
											'pathValidator' 		: path('Ajax.validator.float'),
											'paramsValidator' 		: "{'format' : "~getConst('formatQTE')~", 'max' : '"~ligne.QTE_COMPT~"'}",
											'numerique'             : true,
											'addClass'				: 'qteA',
											'parameter'				: {'inputAttr' : {'data-qtea':ligne.NO_PO_BR, 'data-qtec' : ligne.QTE_COMPT}}
										}) }}
									</td>

									<td class="montant">
										{{ qteByUnite(ligne.RAL, ligne.UNITE) }}
										{% if droits.HA_BR_PX %}
											{{ ' (' ~ (ligne.RAL * ligne.PU_REMISE) |tva ~ ' ' ~ (ligne.DEVISE) ~ ')'}}
										{% endif %}
									</td>
									<td style="text-align:center;">
										<input type="checkbox" data-qtea="{{ligne.NO_PO_BR}}" class="form-control checkbox checkBoxControle" id="controle{{ ligne.NO_PO_BR }}"  name="controle{{ ligne.NO_PO_BR }}"/>
									</td>
									<td>{{ ligne.LIBELLE }} {% if ligne.TYPE_CTRL %}({{ ligne.TYPE_CTRL }}){% endif %}</td>
								</tr>
							{% endfor %}
						</tbody>

					</table>
				</div>
				<div role="tabpanel" class="tab-pane clearfix" id="incident">
					<table id="tableIncident" class="table table-hover">
						<thead class="thead-dark">
							<tr>
								<th scope="col" width="">{{'N° Poste' | trad }}</th>

								<th scope="col" width="">{{'Code' | trad }}</th>
								<th scope="col" width="">{{'Libellé' | trad }}</th>
								<th scope="col" width="">{{'Unité' | trad }}</th>
								<th scope="col" width="">{{'Ecart' | trad }}</th>

								<th scope="col" style="text-align:center;" width="">{{'Sél. ?' | trad }}</th>

								<th scope="col" width="">{{' Commentaire (facultatif)' | trad }}</th>
							</tr>
						</thead>
						<tbody>
							{% for ligne in listeLigne %}
								<tr id="trIncident{{ligne.NO_PO_BR}}" style="display:none">
									<td>{{ ligne.NO_PO }}</td>
									
									<td>{{ ligne.CODE_ART }}</td>
									<td>{{ ligne.DES_SOMM }}</td>
									<td>{{ ligne.UNITE }}</td>

									<td class="montant" id="idEcart{{ligne.NO_PO_BR}}"></td>

									<td style="text-align:center;">
										<input type="checkbox" data-incident ="{{ligne.NO_PO_BR}}" class="form-control checkbox checkBoxIncident" id="incident-{{ligne.NO_PO_BR}}" name="incident-{{ligne.NO_PO_BR}}" />
									</td>

									<td>
										{{ inputAdvance('TEXTAREA', {
											'name'              	: 'comment_inc-' ~ ligne.NO_PO_BR,
											'value'             	: '',
											'pathValidator' 		: path('Ajax.validator.isStringAvecEspace'),
											'paramsValidator' 		: "{'sizeMin' : '0', 'sizeMax' : '3000'}",
											'option'				: 'disabled',
											'addStyle'				: 'height:60px;'
										}) }}
									</td>
								</tr>
							{% endfor %}
						</tbody>

					</table>
				</div>
			</div>

		</form>
		
    </div>

	<script>
		$('.checkBoxIncident').change(function(){
			var id = $(this).data('incident');

			if ($(this).is(':checked')) {
				$('#input_comment_inc-'+id).prop("disabled", false);
			} else {
				$('#input_comment_inc-'+id).prop("disabled", true);
			}
		});

		$('.qteA, .checkBoxControle' ).change(function(){
			var id = $(this).data('qtea');

			if ($(this).hasClass('qteA')) {
				$('#controle'+id).prop( "checked", true );
			}

			var value = parseFloat($('#input_qte_a-'+id).val());
			var qteC = parseFloat($('#input_qte_a-'+id).data('qtec'));

			if (value != qteC && $('#controle'+id).is(':checked')) {
				var diff = qteC-value;

				$('#trIncident'+id).show();
				$('#trIncident'+id).addClass('trActif');
				$('#idEcart'+id).html(parseFloat(diff));
			} else {
				$('#trIncident'+id).hide();
				$('#trIncident'+id).removeClass('trActif');

				$('#incident-'+id).prop( "checked", false );
				$('#input_comment_inc-'+id).prop("disabled", true);
				$('#input_comment_inc-'+id).val('');
				$('#idEcart'+id).html('');
			}

			if ($('#tableIncident >tbody >tr.trActif').length) {
				$('#aIncident').addClass('white-tooltip');
				$('#pastilleIncident').show();
			} else {
				$('#aIncident').removeClass('white-tooltip');
				$('#pastilleIncident').hide();
			}
		});
	</script>
{% endblock %}