<form method="post" class="box-form clearfix form-default"
	action="{{ formAction }}"
	onsubmit="return ajaxSubmit(event);"
	data-onsuccess="arianePop"
>
	<div class="clearfix">
		<div class="colonne2">
			{{ inputAdvance('ZOOMADVANCE',{
				titre: 'Article' | trad,
				name: 'CODE_ART',
				value: post.CODE_ART,
				pahtZoom: path('Ajax.liste.articles'),
				titreZoom: 'Liste articles',
				paramZoom: "",
				entity: 'Articles',
				pathValidator: path('Ajax.validator.zoom'),
				paramsValidator: "{'entity' : 'Articles','nomChamp' : '"~( 'Articles' |trad)~"', 'null' : false}",
				pathConvert: path('Ajax.outil.convertLibelle'),
				convertLibelle: 'convertLibelleGlobal',
			}) }}

			{{ inputAdvance('DEVISE', {
				titre: 'Prix unitaire de base' | trad,
				name: 'PU',
				value: post.PU | prixUnitaire,
				pathValidator: path('Ajax.validator.float'),
				paramsValidator: "{'format': '"~getConst('formatPU')~"'}",
				devise: devise
			}) }}
		</div>
		<div class="colonne2 last">
			{{ inputAdvance('TEXT',{
				'name' : 'DELAI',
				'titre' : 'Délai' | trad,
				'value' : (post.DELAI ?? delaisLivraison),
				'pathValidator' : path('Ajax.validator.integer'),
				'paramsValidator' : "{'sizeMax' : '3'}",
			}) }}
			{{ inputAdvance('TEXT', {
				titre: 'Quantité maximum' | trad,
				name: 'QTEMAX',
				value: post.QTEMAX ?? 0,
				pathValidator: path('Ajax.validator.float'),
				paramsValidator: "{'format': '"~getConst('formatQTE')~"'}",
			}) }}
			
		</div>
	</div>
	
	<hr class="clearfix"></hr>  
	<fieldset class="scheduler-border">
		<legend class="scheduler-border">{{'Détail du prix' | trad}}</legend>
		
		<div data-detail-ligne-container>
			{% for accDetail in listAccDetail %}
				{% include '@Contrat/article/ajax-dupliquer-article.twig' with {
					ligneId: loop.index,
					accDetail: accDetail,
					devise: devise,
				} %}
			{% endfor %}
		</div>
		<a class="button principal" onclick="createRowDetail();">{{ 'Ajouter détails' | trad }}</a>
	</fieldset>
			
			
	<div class="row text-right">
		{{ arianeAnnuler() }}
		<button class="button principal" type="submit">
			{{- 'Valider' | trad -}}
		</button>
	</div>
</form>

<script id="tpl-rowdetail" type="template/html">
{% apply escape %}
	{% include '@Contrat/article/ajax-dupliquer-article.twig' with {
		ligneId: '%INDEX%',
		accDetail: {
			TYPTAR: 'P',
			ASS_PU: 'B',
			QTEMIN: '',
			PU_TX: '',
			TAUX: '',
		},
		codeAcd: accId,
		devise: devise,
	} %}
{% endapply %}
</script>
<script>

function createRowDetail() {

	let tpl = document.getElementById('tpl-rowdetail').textContent;

	let tmp = document.createElement('div');

    // Decode html entities
    tmp.innerHTML = tpl; 
    tpl = tmp.textContent;

	// Generate uniq id
	let id = '';
	do {
		id = ((new Date().getTime())+Math.floor(Math.random() * 10000)).toString(16); // TODO : improve
	} while( document.querySelector('[data-detail-ligne="'+id+'"]') != null );
	
	// Inject parameter
    tpl = tpl.replaceAll('%INDEX%', id);

	// Transform string into Elements
    tmp.innerHTML = tpl;

    document
		.querySelector('[data-detail-ligne-container]')
		.append( tmp.children[0] );
}

function deleteRowDetail(el) {
	el.closest('[data-detail-ligne]').remove();
}

document.addEventListener('change', function(event) {
	// TODO  :use HTML attribute to mark select instead of searching the name
	if (! event.target.name.includes('TYPTAR')) return;

	var select = event.target;
	var row = select.closest('[data-detail-ligne]');
	let wrapperPrix = row.querySelector('[data-inputprix-wrapper]');
	let wrapperTaux = row.querySelector('[data-inputtaux-wrapper]');
	
	if(select.value == 'P') {
		// Show Prix, hide Taux
		wrapperPrix.style.display = '';
		wrapperPrix.querySelector('input').disabled = false;

		wrapperTaux.style.display = 'none';
		wrapperTaux.querySelector('input').disabled = true;
	}

	if(select.value == 'T') {
		// Show Taux, hide Prix
		wrapperTaux.style.display = '';
		wrapperTaux.querySelector('input').disabled = false;

		wrapperPrix.style.display = 'none';
		wrapperPrix.querySelector('input').disabled = true;
	}	
});

</script>