{% extends 'layout.twig' %}

{% block body %}

	<div class="contenu clearfix" id="fournisseurs">
		<h1>
			{{ 'Fournisseurs' | trad }}
		</h1>

		{{ ariane() }}

		<div class="tab-content">
			<div id="detail_fournisseur" class="clearfix">
				<h2>
					{{ 'Fournisseur' | trad }}
					{{ libelle_fournisseur }}
					{% if code_fournisseur!='noId' %}
						(
						{{ code_fournisseur }}
						)
					{% endif %}
				</h2>

				{{ arianeSub() }}
				{% if partenaireDocument == 'HIVEO' %}

					<div
						style="position: absolute;float: right;right: 39px;text-align:center;top: 360px;color: #e99e76;">
					</div>
				{% endif %}

				<div id="listeArticlesSansCommande" class="padding15">

						<div style="display: flex; justify-content: flex-end; align-items: center; margin-bottom: 1em">
							
						</div>

					{% if listes.0.ART_SANS_CMD|length > 0 %}
						<div style="display: flex; justify-content: space-between; align-items: center;">
							<div>
								<h3>
									{{ "Liste des articles" | trad ~ " :"}}
								</h3>
							</div>
							{% if sectorise or modificationArticlesSansCommande %}
								<div style="display: flex; justify-content: space-between; gap: 1em">
								{% if sectorise %}
									<div class="{{ sectorise ? 'sectorise' : " " }}">
										<form method="post" name="formSocieteUser" id="formSocieteUser">
											{{ inputAdvance('ZOOMADVANCE', {
										'titre': 'Filtre société' | trad ~ colon(),
										'name' : 'societe',
										'value' : post.societe,
										'pahtZoom' : path('Ajax.liste.societe'),
										'paramZoom' : "{}",
										'entity' : 'Societe',
										'titleZoom' : 'Liste des sociétés' | trad,
										'pathConvert' : path('Ajax.outil.convertLibelle'),
										'convertLibelle' : 'convertLibelleGlobal',
										'pathValidator' : path('Ajax.validator.zoom'),
										'paramsValidator' : "{'entity' : 'Societe', 'nomChamp' : '"~ 'Société' | trad ~"', 'null' : true}",
										'myFunction' : 'visibiliteAxeImputation',
										'myParams' : '["'~ params.SISECTOR ~'", "'~ params.CDCSECTO ~'", "'~ params.SCASECTO ~'"]',
										'addCss' : 'width: 230px; margin-left : 20px;'
									}) }}
										</form>
									</div>
								{% endif %}
								{% if modificationArticlesSansCommande %}
									<form method="post" id="articleFactSansCommande" name="articleFactSansCommande" action="{{ path('Parametrage.ParametrageLAD.createOrModifyRedirect', {codeFournisseur: code_fournisseur, codeSte: post.societe ?? 'none'}) }}" , data-onsuccess="redirectionJSFactSansCommande">
										<button class="last button principal" id="addNewArticles" type="submit" style="text-wrap: nowrap;">
											{{ "Ajouter / modifier articles" | trad }}
										</button>
									</form>
								{% endif %}
								</div>
							{% endif %}

						</div>

						<table class="table">
							<thead>
								<tr>
									<th scope="col">
										{{ 'Code article' | trad }}
									</th>
									<th scope="col">
										{{ 'Désignation' | trad }}
									</th>
									<th scope="col">
										{{ 'SI' | trad }}
									</th>
									<th scope="col">
										{{ 'CDC' | trad }}
									</th>
									<th scope="col">
										{{ 'SCA' | trad }}
									</th>
									<th scope="col">
										{{ 'Pourcentage attribué' | trad }}
									</th>
								</tr>
							</thead>
							<tbody>
								{# TODO: Implémenter la boucle lorsqu'on pourra attribuer plusieurs articles par fournisseurs #}
								{% for liste in listes.0.ART_SANS_CMD %}
									<tr
										id="article{{liste.CODE_ART}}fournisseur{{listes.0.CODE}}">
										{# <tr id="fournisseur{{liste.CODE}}articles"> #}
										<td class="article">
											{{liste.CODE_ART}}
										</td>
										<td>
											{{liste.DESIGN}}
										</td>
										<td>
											{{liste.LIBELLE_SI | convert_encoding('UTF-8', 'ISO-8859-1') ~ (liste.SI ? " (" : "") ~ liste.SI | convert_encoding('UTF-8', 'ISO-8859-1') ~ (liste.SI ? ")" : "")}}
										</td>
										<td>
											{{liste.LIBELLE_CDC | convert_encoding('UTF-8', 'ISO-8859-1') ~ (liste.CDC ? " (" : "") ~ liste.CDC | convert_encoding('UTF-8', 'ISO-8859-1') ~ (liste.CDC ? ")" : "")}}
										</td>
										<td>
											{{liste.LIBELLE_SCA | convert_encoding('UTF-8', 'ISO-8859-1') ~ (liste.SCA ? " (" : "") ~ liste.SCA | convert_encoding('UTF-8', 'ISO-8859-1') ~ (liste.SCA ? ")" : "")}}
										</td>
										<td>
											{{ liste.POURCENTAGE ~ " %"}}
										</td>
									</tr>
								{% endfor %}
							</tbody>
						</table>

					{% else %}
					<div style="display: flex; justify-content: space-between">
						<h3>
							{{ "Aucun article n'est rattaché à ce fournisseur pour la gestion des factures sans commande." | trad}}							
						</h3>
						{% if modificationArticlesSansCommande %}
							<form method="post" id="articleFactSansCommande" name="articleFactSansCommande" action="{{ path('Parametrage.ParametrageLAD.createOrModifyRedirect', {codeFournisseur: code_fournisseur, codeSte: post.societe ?? 'none'}) }}" , data-onsuccess="redirectionJSFactSansCommande">
								<button class="last button principal" id="addNewArticles" type="submit" style="text-wrap: nowrap;">
									{{ "Ajouter / modifier articles" | trad }}
								</button>
							</form>
						{% endif %}
					</div>
					{% endif %}

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

	<script>
		$( 'form input' ).on( 'change', function () {
			$( this ).closest( 'form' ).submit();
		} )

		function handleSendFormFactSsCommande( e ) {
			const response = ajaxSubmit( event );
		}
		document.querySelector( '#articleFactSansCommande' ).addEventListener( "submit", handleSendFormFactSsCommande );
		
		window.action.redirectionJSFactSansCommande = function ( data ) {
			const json = JSON.parse( data );

			if ( json.path ) {
				redirectJSWithPost( json.path )
			}
		}
	</script>

{% endblock %}
