{% do setAriane(2, 'Ajout fournisseur' | trad, getRouteName()) %}

{% extends 'layout.twig' %}

{% block body %}

<section class="contenu">

	<h1>{{ 'Consultations' | trad }}</h1>
	
	{{ ariane() }}
	
	<h2 id="divMenu" style="position:relative;">
		{{ consultation.OBJET_AO is empty ? 
			'Consultation' | trad :
			consultation.OBJET_AO
		}}
		{{ 'créé le' | trad }} 
		{{ consultation.DTE_AO | dateTrad }}
		{% if AOEventCreat.NOM %}
			{{ 'par' | trad }} {{ AOEventCreat.NOM }}
		{% endif %}
	</h2>
	
	<form method="post" name="form-main" id="form-main" class="tab-content my-base form-default">
	
		{% include '@Consultation/Fournisseur/_tableFilter.twig' with {
			form_id: 'form-main',
			form: formFilter,
			post: post,
			initFiltreAvance: initFiltreAvance,
			filtreAvance: filtreAvance,
		} only %}

		<div id="buttonRegroup" class="bs-row  flex-y-center  my-small">
			<span class="bs-col-auto">
				{{ 'Nombre de fournisseur(s) sélectionné(s)' | trad }} :
				<span id="countSelected">{{ post.selected_frs | length }}</span>
			</span>
			
			<div class="bs-col-auto ml-auto">
				<a href={{ path('Consultation.Consultation.details', { idAO, onglet: 'Fournisseur' } ) }}
					class="secondaire button mr-1"
				>{{ 'Annuler' | trad }}</a>

				<a href="javascript:addFrs()" 
					class="button principal m-0"
				>{{ 'Ajouter le(s) fournisseur(s)' | trad }}</a>
			</div>
		</div>  
		<table class="table table-hover">
			<thead class="thead-dark">
				<tr>
					<th scope="col" width="">{{ triTable('TYPE_FG',  post.tri_TYPE_FG, 'Type' | trad, '', 'divRefreshFrs', 'form-main') }}</th>
					<th scope="col" width="">{{ triTable('CODE',  post.tri_CODE, 'Code' | trad, '', 'divRefreshFrs', 'form-main') }}</th>
					<th scope="col" width="">{{ triTable('RS',  post.tri_RS, 'Raison sociale' | trad, '', 'divRefreshFrs', 'form-main') }}</th>
					<th scope="col" width="">{{ triTable('NO_SIRET',  post.tri_NO_SIRET, 'SIRET' | trad, '', 'divRefreshFrs', 'form-main') }}</th>
					<th scope="col" width="">{{ triTable('CPOSTAL',  post.tri_CPOSTAL, 'Code postal' | trad, '', 'divRefreshFrs', 'form-main') }}</th>
					<th scope="col" width="">{{ triTable('VILLE1',  post.tri_VILLE1, 'Ville' | trad, '', 'divRefreshFrs', 'form-main') }}</th>
					<th scope="col" width="">{{ 'Sous-famille' | trad }}</th>
					<th scope="col" width="180px">{{'Actions' | trad }}</th>
				</tr>
			</thead>
			<tbody>
				<tr class="recherche" >
					<td>{{ filterSelect(
						'TYPE_FG',
						post.filter_TYPE_FG,
						{
							'': 'Tous les fournisseurs' | trad,
							'F': 'Fournisseur' | trad,
							'G': 'Groupement' | trad,
						},
						'form-main',
						'',
						'divRefreshFrs',
						path('Consultation.AjoutFournisseur.listeFournisseur', {idAO:idAO}),
						'',
						''
					) }}</td>
					<td>{{ filterTable('CODE', post.filter_CODE, '', 'divRefreshFrs', '','form-main', '','Code' | trad,'',true) }}</td>
					<td>{{ filterTable('RS', post.filter_RS, '', 'divRefreshFrs', '','form-main', '','Raison sociale' | trad,'',true) }}</td>
					<td>{{ filterTable('NO_SIRET', post.filter_NO_SIRET, '', 'divRefreshFrs', '','form-main', '','SIRET' | trad,'',true) }}</td>
					<td>{{ filterTable('CPOSTAL', post.filter_CPOSTAL, '', 'divRefreshFrs', '','form-main', '','Code postal' | trad,'',true) }}</td>
					<td>{{ filterTable('VILLE1', post.filter_VILLE1, '', 'divRefreshFrs', '','form-main', '','Ville' | trad,'',true) }}</td>
					<td>{{ filterTable('listeSousFamille', post.filter_listeSousFamille, '', 'divRefreshFrs', '','form-main', '','Sous-famille' | trad,'',true) }}</td>
					<td class="text-center" class="white-tooltip">
						<input name="selectAll" type="checkbox"
							data-checkall-input="table-main" 
							class="form-control checkbox"
						>
						<span class='infos_tooltip left'>{{ 'Tout sélectionner' | trad }}</span>
					</td>
				</tr>
			</tbody>
			{% set listFourDisplayed = [] %}
			{% for frs in listeFrs %}
				<tr id="Frs{{ loop.index }}">
					<td>{{ {
						'': 'Tous les fournisseurs' | trad,
						'F': 'Fournisseur' | trad,
						'G': 'Groupement' | trad,
					}[frs.TYPE_FG] }}</td>
					<td>{{ frs.CODE }}</td>
					<td>{{ frs.RS }}</td>
					<td>{{ frs.NO_SIRET }}</td>
					<td>{{ frs.CPOSTAL }}</td>
					<td>{{ frs.VILLE1 }}</td>
					<td>{{ shortLibelle( frs.listeSousFamille , 50) }}</td>
					<td class="text-center">
						{% set fourFullId = frs.TYPE_FG ~ '|' ~ frs.CODE %}
						<input type="checkbox" 
							class="form-control checkbox selected_frs" 
							data-id="{{ frs.TYPE_FG }}{{ spliter() }}{{ frs.CODE }}" 
							data-checkall="table-main"
							id="input_selected_frs_{{ frs.TYPE_FG }}{{ spliter() }}{{ frs.CODE }}" 
							name="selected_frs[]"
							value="{{ fourFullId }}"
							{{ fourFullId in (post.selected_frs ?? []) ? 'checked' }}
						/>
						{% set listFourDisplayed = listFourDisplayed | merge([fourFullId]) %}
					</td>
				</tr>
			{% endfor %}
		</table>
		{# TODO : factorize pagination #}
		{# Note : due to post.selected_frs we used a custom pagination #}
		<nav aria-label="Page navigation">
			<ul class="pagination" id="pagination"></ul>
		</nav>
		<script>
			ajaxPagination("#pagination", "#form-main", {
				pageCount: {{ infoPagination.nombreDePage ?? 0 }},
				page: {{ infoPagination.page }},
				path: {{ path(
					'Consultation.AjoutFournisseur.listeFournisseur',
					{idAO:idAO}
				) | json }},
				postKey: 'page',
			}, function() {
				return new FormData(document.getElementById('form-main'));
			});
		</script>

		{% for fourFullId in 
			(post.selected_frs ?? []) 
			| filter((v) => v not in listFourDisplayed ) 
		%}
			<input class="selected_hidden" type="hidden" 
				name="selected_frs[]" value="{{ fourFullId }}"
			/>
		{% endfor %}
	</form>
	
</section>
<script>

function addFrs() {
	activeLoader();
	$.ajax({
		url: {{ path(
			'Consultation.AjoutFournisseur.ajoutFournisseur',
			{idAO: idAO}
		) | json }},
		data: new FormData(document.getElementById('form-main')),
		type: "POST",
		contentType: false,
		processData: false,
		success: function(result){
			let data = jQuery.parseJSON(result);

			if(data.statut == "O") {
				desactiveLoader();
				if(data.file){
					for (let id in data.file) {
						window.open(data.file[id],'_blank');
					}            			
				}
				$("#modal-content").addClass("modal_small");
				$("#modal-body").html(data.content);
				activePopup();
				document.querySelector(".button.secondaire.button_right").addEventListener("click", () => {
					window.location.href = {{ path(
						'Consultation.Consultation.details',
						{idAO: idAO, onglet: 'Fournisseur'}
						) | json }};
				});
				document.querySelector('.modal-close').addEventListener("click", () => {
					window.location.href = {{ path(
						'Consultation.Consultation.details',
						{idAO: idAO, onglet: 'Fournisseur'}
						) | json }};
				})

			} else {
				location.href = {{ path(
					'Consultation.Consultation.details',
					{idAO: idAO, onglet: 'Fournisseur'}
				) | json }};
			}
		},
		error: function (xhr) {
			desactiveLoader();
			activePopupError(
				window.oxaproc.trad['Erreur validation'],
				xhr.responseText,
				'modal_small'
			);
		}
	});
}

var four_count = {{ post.selected_frs | length }};

document.addEventListener('change', function(event) {

	var formdata = new FormData(document.getElementById('form-main'));
	document.getElementById('countSelected').innerHTML = 
		formdata.getAll('selected_frs[]').length;
});



</script>
<!--
<script type="text/javascript" src="{{ baseUrl('js/parametre.js') }}" id="parametreJS"></script>
	-->
{% endblock %}