{% extends 'layout.twig' %}

{% block body %}

	<div class="contenu clearfix">

		<h1>{{ 'Consultations' | trad }}</h1>
		
		{{ ariane() }}
		
		<div style="display: flex; justify-content : space-between; gap: 1em">
			<h1>
				{{ 'Consultation' | trad }} {{ consultation.NO_AO }} : {{ consultation.OBJET_AO }} {{ 'créé le' | trad }} {{ consultation.DTE_AO | dateTrad }} {% if AOEventCreat.NOM %} {{ 'par' | trad }} {{ AOEventCreat.NOM }} {% endif %}
			</h1>
			<div style="display: flex; height: 100%">
				<a onClick="ajaxSend('{{ path('Consultation.GestionConsultation.ajaxEnvoie', {idAO:idAO}) }}');" class="button principal">{{ 'Envoyer' | trad}}</a>
				<a onClick="$('.nav-tabs li:eq( '+ ($('.nav-tabs li').length -3)+')').click();" class="button secondaire" style="margin-right: 0px">{{ 'Retour' | trad }}</a>
			</div>
		</div>

    	<form id="formEnvoieConsultation">
    
        	<div clas="clearfix">
        		<div class="single">
            		<div class=" row">
            			{{ inputAdvance('SELECT', {
            			    'name' : 'typeConsult',
            			    'titre' : 'Type de consultation' | trad,
            			    'listeValue' : listeType,
            			    'value' : 'P',
            			}) }}
            		</div>
        		</div>    
        	</div>
        	<div class="clearfix">
            	<table class="table table-hover" id="frsEnvoieConsult">
                  	<thead class="thead-dark">
                        <tr>
                        	<th scope="col" width="20px">
                        		<input 
									type="checkbox" name="checkAll_ligneFrs" 
									class="form-control checkbox"
									data-checkall-input="checkAll"
									checked 
								/>
                        	</th>
							<th scope="col" width="30px"></th>
                            <th scope="col" width="200px">{{ 'Nom' | trad }}</th>
                            <th scope="col" width="125px">{{ 'Par mail ?' | trad }}</th>
                            <th scope="col" width="550px">{{ 'Destinataires' | trad }}</th>
                            <th scope="col" width="140px">{{ 'Format Excel ?' | trad }}</th>
                            <th scope="col" width="150px">{{ 'Format Excel' | trad }}</th>
                            <th scope="col" width="150px">{{ 'Statut' | trad }}</th>
							<th scope="col"></th>
                        </tr>
                	<tbody>
                		{% for frs in listeFrs %}
                			<tr>
                				<td>
                                    {% if (consultation.ACC_CONF | boolSql and (frs.FIC_ACC_CONF_SIGNE != '' and frs.ACC_CONF_VALID | boolSql == false )) or (frs.EVE_IMP != 0) %}{% endif %}
									<input type="checkbox" name="ligneFrs{{ frs.TYPE_FG }}{{ spliter() }}{{ frs.CODE_FOU }}" 
										class="form-control checkbox checkboxLigne" 
										data-checkall="checkAll"
										data-checkall-input-keep="checkAll{{ frs.TYPE_FG }}{{ spliter() }}{{ frs.CODE_FOU }}"
										checked
									/>
									<input type="hidden" name="ACC_CONF{{ frs.TYPE_FG }}{{ spliter() }}{{ frs.CODE_FOU }}" value="{% if (consultation.ACC_CONF | boolSql and frs.ACC_CONF_VALID | boolSql == false) %}1{% endif %}" />
                				</td>
								<td class="toggleSlide" onclick="openRow('{{ frs.TYPE_FG }}{{ spliter() }}{{ frs.CODE_FOU }}')"></td>
                				<td style="cursor:pointer" onclick="openRow('{{ frs.TYPE_FG }}{{ spliter() }}{{ frs.CODE_FOU }}')">
                					{% if frs.GEREPORTAIL | boolSql and frs.ctcOxalinkActif %}
        								<span class="oxalink white-tooltip" style="opacity: 1;display: inline list-item;margin-right: 5px;">
                                        	<span class="infos_tooltip top-right">
                                        		{{ 'Fournisseur géré par le portail fournisseur' | trad }}
                                        	</span>
        								</span>
    								{% endif %}
                				    {{ convertLibelleGlobal(frs.TYPE_FG=='F'? 'FOURNISS':'GRPFOU', '', frs.CODE_FOU, true) }}
            				    </td>
                				<td>
                					{{ inputAdvance('SWITCH', {
                					    'name' : 'parMail'~frs.TYPE_FG~spliter()~frs.CODE_FOU,
                					    'value' : true,
                					    'addClass' : 'parMail',
                					}) }}
                				</td>
								<td style="cursor:pointer" onclick="openRow('{{ frs.TYPE_FG }}{{ spliter() }}{{ frs.CODE_FOU }}')">
									{{ "Liste des destinataires" | trad }}							
								</td>
                				<td>
									{% set canSendExcel = not
										(frs.GEREPORTAIL | boolSql and frs.ctcOxalinkActif) 
										or (consultation.ACC_CONF | boolSql and frs.ACC_CONF_VALID | boolSql == false) 
										or (frs.typeFormatExcel == '' and frs.versionFormat == '')
									%}
                					{{ inputAdvance('SWITCH', {
                					    'name' : 'formatExcel'~frs.TYPE_FG~spliter()~frs.CODE_FOU,
                					    'value' : canSendExcel, 
                					    'addClass' : 'formatExcel',          
                					    'option' : canSendExcel ? '' : 'disabled',  					    
                					}) }}
                				</td>
                				<td>
                					{{ inputAdvance('ZOOM', {
                					    'name' : 'typeFormatExcel'~frs.TYPE_FG~spliter()~frs.CODE_FOU,
                					    'value' : (frs.typeFormatExcel and frs.versionFormat) ? (frs.typeFormatExcel~'|'~frs.versionFormat) : '',
                					    'addClass' : 'width: 100%;',
                					    'option' : canSendExcel ? 'desactiveSaisie' : 'readOnly',  
                					    
                                        'pahtZoom' : path('Ajax.liste.aoFormatExcel'),
                                        'paramZoom' : {"SOCIETE": consultation.CODE_STE, "CTRE": consultation.EMETTEUR},
                                        'titleZoom' : 'Liste des formats Excel' | trad,
                                        'pathConvert' : path('Ajax.outil.convertLibelle'),
                					}) }}
                				</td>
                				<td {% if consultation.ACC_CONF | boolSql %}style="cursor:pointer;" onClick="ajaxPopupV2('{{ path('Consultation.Consultation.popupStepBar', {idAO:idAO, idFrs:frs.CODE_FOU, typeFG:frs.TYPE_FG}) }}');"{% endif %}>
                					{% if consultation.ACC_CONF | boolSql  %}
                						{% if frs.FIC_ACC_CONF_SIGNE == '' and frs.EVE_IMP == 0 %}
                							{{ 'Accord à envoyer' | trad }}
                						{% elseif frs.FIC_ACC_CONF_SIGNE == '' and frs.EVE_IMP != 0 %}	
                                            {{ 'Accord envoyé' | trad }}
                                        {% elseif frs.FIC_ACC_CONF_SIGNE != '' and frs.ACC_CONF_VALID | boolSql == false  %}
                                        	{{ 'Accord à valider' | trad }}
                                        {% elseif frs.EVE_IMP == 0  %}	
                                        	{{ 'Consultation à envoyer' | trad }}	  
            					        {% elseif frs.EVE_IMP != 0 %}
            					        	{{ 'Consultation envoyée' | trad }}	  
                    					{% endif %}	  
                					{% else %}
                						{% if frs.EVE_IMP == 0 %}
                							{{ 'Consultation à envoyer' | trad }}	
                						{% else %}
                							{{ 'Consultation envoyée' | trad }}	  
                						{% endif %}
                					{% endif %}   
                				</td>
								<td width="1rem">
									<a onClick="addContact('{{ frs.TYPE_FG }}{{ spliter() }}{{ frs.CODE_FOU }}')" id="newContact" style="cursor: pointer; color: black" class="ajouter_v2 white-tooltip" href="javascript:void(0);">
										<span class="infos_tooltip top-left">
											{{ "Ajouter un contact à" | trad ~ ' ' ~ convertLibelleGlobal(frs.TYPE_FG=='F'? 'FOURNISS':'GRPFOU', '', frs.CODE_FOU, true) }}
										</span>
									</a>
								</td>
            				</tr >
							<tr id="openMe{{ frs.TYPE_FG }}{{ spliter() }}{{ frs.CODE_FOU }}">
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td colspan="2">
									{% include "@Consultation/GestionConsultation/_sousTableauDestinataires.twig" with {
										listeContact: frs.listeContact,
										typeFG : frs.TYPE_FG,
										codeFrs : frs.CODE_FOU
										}
									%}	
								</td>
								<td></td>
								<td></td>
								<td></td>
							</tr>
							<script id="tpl-rowdetail{{ frs.TYPE_FG }}{{ spliter() }}{{ frs.CODE_FOU }}" type="template/html">
								{% apply escape %}
									{% include '@Consultation/GestionConsultation/_ajouterLigneEmail.twig' with {
										idAO,
										frs
									} %}
								{% endapply %}
							</script>
                		{% endfor %}
                	</tbody>
            	</table>
            	<div class="messageErreur zoneError" style="text-align: center;"></div>
        	</div>
    	</form>
	</div>
	
	<script>
		const deleteRowJS = (id) => {
			console.log(id);
			const element = document.getElementById('tr'+id);
			element.remove();
		}

		const openRow = (id) => {
			const element = document.querySelector("#openMe"+id);
			if (element.style.display === "none") {
				element.style.display = "table-row";
			} else {
				element.style.display = "none";
			}
		}

		let addContactCounter = [];

		function addContact(frs) {

			const openRow = document.querySelector("#openMe"+frs);
			if (openRow.style.display === "none") {
				openRow.style.display = "table-row";
			}

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

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

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

			if((frs in addContactCounter) == false ) {
				addContactCounter[frs] = 1;
			}

			// Inject parameter
			tpl = tpl.replaceAll('%INDEX%', addContactCounter[frs]);

			// Transform string into Elements
			tmp.innerHTML = tpl;
			tmp.id = 'tr' + frs + '_JS' + addContactCounter[frs];

			document
				.querySelector('#tableemail'+frs)
				.append(tmp);

			addContactCounter[frs]++;
		}

		function ajaxSend(path){
			activeLoader();
			$.ajax({
				url: path,
				data: $('#formEnvoieConsultation').serialize(),
				type: "POST",
				success: function(data){
					var data = jQuery.parseJSON(data);
					if(data.statut == 'O') {
						desactiveLoader();
						$("#modal-content").addClass("modal_small");
						$("#modal-body").html(data.content);
						activePopup();
						
						if(data.file){
							for (var id in data.file) {
								window.open(data.file[id],'_blank');
							}            			
						}
					}else{
						desactiveLoader();
						$("#modal-content").addClass("modal_small");
						$("#modal-body").html(data.content);
						activePopup();
					}
				}
			});
		};
	
        $( document ).ready(function() {
			$("#modal-title").html('{{ 'Impression consultation N°' | trad }}{{ idAO }}');
            
            $('.selectFrs').change(function(){
            	var id = $(this).attr('id');
            	id = id.substring(9);
            	
            	$('#input_email'+id).val($(this).val());
            });

			// $('.selectFrs').each(function(){
            // 	var id = $(this).attr('id');
            // 	id = id.substring(9);
            	
            // 	$('#input_email'+id).val($(this).val());
            // });
            
            $('.parMail').change(function(){
            	var id=$(this).attr('id');
            	id = id.substring(13);
				
            	$('#input_email'+id).prop("readonly", !$(this).is(':checked'));
            	$('#input_ctc'+id).prop("disabled", !$(this).is(':checked'));
            });
            
            $('.formatExcel').change(function() {
				let id=$(this).attr('id');
				id = id.substring(17);
				
				if($(this).is(':checked')){
					$('#zoom_typeFormatExcel'+id).show();
				} else {
					$('#zoom_typeFormatExcel'+id).hide();
				}
			});
        });
	</script>

	
{% endblock %}