{% extends 'layout.twig' %}

{% block body %}
<div class="contenu clearfix titre_div" id="Commande">
	<h1>
		{{ 'Commandes' | trad }}
		<button type="button" class="principal boutton " onClick="$('#zoom_regroupement').trigger('click');">{{ 'Critères de regroupement' | trad }}</button>
	</h1>

	{{ ariane() }}
	<form method="post" name="filtre_GareDeTriage" id="filtre_GareDeTriage" class="clearfix">
		<div class="row" style="display:none;">
			{{ 
				inputAdvance('ZOOM', {
					'name' : 'regroupement',
					'value' : post.regroupement,
					'pahtZoom' : path('Commande.GareDeTriage.popupCritereRegroup'),
					'paramZoom' : "{'titre' : 'Critères de regroupement','value' : $('#input_regroupement').val()}",
					'titleZoom' : 'Critères de regroupement' | trad,
					'option' : 'desactiveSaisie',
					'addStyle' : 'full',
				})
			}}
		</div>

		<div>
			<ul class="nav nav-tabs sous_onglet sous_onglet_filter" id="filterTab">   
				<li id="tab_filter" class="active"><a data-toggle="tab" href="#filtre">{{ 'Filtres' | trad }}</a></li>
				<li id="tab_advance"><a data-toggle="tab" href="#filtreAdvance">{{ 'Filtres complémentaires' | trad }}</a></li>
				
                {{ initTabFilter(post, 'filterTab') }}
			</ul>
		</div>
		<div class="tab-content">
			<div class="tab-pane active in box-form" id="filtre">
				<div class="filtre first">	
					<div class="row">
						{{ labelCreateur({
							'name' : 'societe',
							'code' : societe,
							'libelle' : societe | societeTrad,
							'titre' : 'Société' | trad,
							'textTooltip' : 'Filtrer sur ma société' | trad,
							'orientation' : 'top-left',
							'form' : 'filtre_GareDeTriage',
						}) }}
						{{ inputZoomAdvance("", "societe", path('Ajax.liste.societe'), "", 
						post.societe, 'societeTrad', 
						path('Ajax.validator.zoom'), "{'entity' : 'SOCIETE','nomChamp' : 'societe', 'null' : true}" , "" , "",
						path('Ajax.outil.convertLibelle'), "SOCIETE","CODE_STE", "RAIS_SOC", '', '', '', 'Liste des sociétés' | trad) }}
					</div>
				</div>
				<div class="filtre">
					<div class="row">
						{{ inputAdvance('ZOOM', {
								'titre' : 'Fournisseurs' | trad,
								'name' : 'CODE_FOU',
								'value' : post.CODE_FOU,
								'pahtZoom' : path('GlobalApplication.MultiSelect.afficher'),
								'paramZoom' : "{'titre' : '"~('Fournisseurs' | trad |e('js')|raw)~"','value' : $('#input_CODE_FOU').val(),'entity' : 'Fourniss', 'CODFILTRE' : 'FOURNISS'}",
								'titleZoom' : 'Liste des fournisseurs' | trad,
								'option' : 'desactiveSaisie',
								'bulle' : true,
						}) }}
					</div>
				</div>
				<div class="filtre">
					<div class="row">
						{{ inputAdvance('ZOOM', {
								'titre' : 'Centre de livraison' | trad,
								'name' : 'CTRLIVR',
								'value' : post.CTRLIVR,
								'pahtZoom' : path('GlobalApplication.MultiSelect.afficher'),
								'paramZoom' : "{'titre' : '"~('Centre de livraison' | trad |e('js')|raw)~"','value' : $('#input_CTRLIVR').val(), arrayPost : {'filter_egal_CODE_STE' : $('#input_societe').val()},'entity' : 'CENTRE_L', 'CODFILTRE' : 'CENTRE_L'}",
								'titleZoom' : 'Liste des centres' | trad,
								'option' : 'desactiveSaisie',
								'bulle' : true,
						}) }}
					</div>
				</div>
			
			
				<button type="submit" onclick="activeLoader();" class="principal button btn_filtre last button_right">{{ 'Filtrer' | trad }}</button>
			</div>
			<style>
				.divFiltreV2 {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					position: relative;
				}

				.divFiltreV2 .filtreV2 {
					width:32%;
					margin-right:1%;
				}
			</style>
			<div class="tab-pane fade box-form" id="filtreAdvance">
				<div class="divFiltreV2">
				<div class="filtreV2">
					<div class="row">
						{{ inputAdvance('ZOOM', {
							'titre' : 'Sous-famille' | trad,
							'name' : 'SSFAM',
							'value' : post.SSFAM,
							'pahtZoom' : path('GlobalApplication.MultiSelect.afficher'),
							'paramZoom' : "{'titre' : '"~('Sous-famille' | trad |e('js')|raw)~"','value' : $('#input_SSFAM').val(),'entity' : 'SousFamille', 'CODFILTRE' : 'SSFAMILL'}",
							'titleZoom' : 'Sous-famille' | trad,
							'option' : 'desactiveSaisie',
							'bulle' : true,
						}) }}
					</div>
				</div>
				<div class="filtreV2">
					<div class="row">
						{{ inputAdvance('SWITCH', {
							'titre' : 'Lignes non affectées' | trad,
							'name' : 'LIGNE_NON_AFFECT',
							'value' : post.LIGNE_NON_AFFECT,
							'bulle' : true,
						}) }}
					</div>
				</div>
				<div class="filtreV2">
					<div class="row">
						{{ inputAdvance('ZOOM', {
							'titre' : 'Acheteur' | trad,
							'name' : 'ACHETEUR',
							'value' : post.ACHETEUR,
							'pahtZoom' : path('GlobalApplication.MultiSelect.afficher'),
							'paramZoom' : "{'titre' : '"~('Acheteur' | trad |e('js')|raw)~"','value' : $('#input_ACHETEUR').val(),'entity' : 'ACHETEUR', 'CODFILTRE' : 'ACHETEUR', arrayPost : {'VALIDE' : 'On', 'CODE_STE' : $('#input_societe').val()}}",
							'titleZoom' : 'Acheteur' | trad,
							'option' : (userLog.SEL_MYDA | boolSql)? 'readOnly':'desactiveSaisie',
							'bulle' : true,
						}) }}
					</div>
				</div>
				<div class="filtreV2">
					<div class="row">
						{{ inputAdvance('ZOOM', {
							'titre' : 'Type de document' | trad,
							'name' : 'TYPE_DOC',
							'value' : post.TYPE_DOC,
							'pahtZoom' : path('GlobalApplication.MultiSelect.afficher'),
							'paramZoom' : "{'titre' : '"~('Type de document' | trad |e('js')|raw)~"','value' : $('#input_TYPE_DOC').val(),'entity' : 'typeDoc', 'CODFILTRE' : 'TYPDOC', arrayPost : {'valide' : 'On'}}",
							'titleZoom' : 'Type de document' | trad,
							'option' : 'desactiveSaisie',
							'bulle' : true,
						}) }}
					</div>
				</div>
				<div class="filtreV2">
					{% if param.MODTRANS %}
						<div class="row">
							{{ inputAdvance('ZOOM', {
								'titre' : 'Mode de transport' | trad,
								'name' : 'MODTRANS',
								'value' : post.MODTRANS,
								'pahtZoom' : path('GlobalApplication.MultiSelect.afficher'),
								'paramZoom' : "{'titre' : '"~('Mode de transport' | trad |e('js')|raw)~"','value' : $('#input_MODTRANS').val(),'entity' : 'modTrans', 'CODFILTRE' : 'MODTRANS'}",
								'titleZoom' : 'Mode de transport' | trad,
								'option' : 'desactiveSaisie',
								'bulle' : true,
							}) }}
						</div>
					{% endif %}
				</div>
				<div class="filtreV2">
					<div class="row">
						{{ inputAdvance('ZOOM', {
								'titre' : 'Centre émetteur' | trad,
								'name' : 'DAENT_CENTRE_EMETTEUR',
								'value' : post.DAENT_CENTRE_EMETTEUR,
								'pahtZoom' : path('GlobalApplication.MultiSelect.afficher'),
								'paramZoom' : "{'titre' : '"~('Centre émetteur' | trad |e('js')|raw)~"','value' : $('#input_DAENT_CENTRE_EMETTEUR').val(),'entity' : 'CENTRE_E', 'CODFILTRE' : 'CENTRE_E', arrayPost : {'filter_egal_CODE_STE' : $('#input_societe').val()}}",
								'titleZoom' : 'Centre émetteur' | trad,
								'option' : 'desactiveSaisie',
								'bulle' : true,
						}) }}
					</div>
				</div>
				<div class="filtreV2">
					<div class="row">
						{{ inputAdvance('DEVISE', {
							'titre' : 'DA en attente depuis' | trad,
							'name' : 'DA_EN_ATTENTE',
							'value' : post.DA_EN_ATTENTE,
							'bulle' : true,
							'DEVISE': 'Jours' | trad,
						}) }}
					</div>
				</div>

				<button type="submit" onclick="activeLoader();" class="principal button btn_filtre last button_right" style="position: absolute; bottom: 10px; right: 25px;">{{ 'Filtrer' | trad }}</button>
				</div>
			</div>
		</div>

		{# <div class="resultat_filtre">
			{{ bullFiltre(post, 'filtre_GareDeTriage') }}
		</div> #}

	{% if listeProjet %}
		<div id="gareDeTriage" class="clearfix">
			<div class="headerGare">
				<div class="clearfix textSelected" >
					<span style="float: left;"><span id="countLigneSelected" style="margin-right:5px;">0</span> {{ 'Ligne(s) sélectionnée(s)' | trad }}</span>
					<span style="float: right;"><span id="countProjetSelected" style="margin-right:5px;">0</span>{{ 'projet(s) sélectionné(s)' | trad }}</span>
				</div>
				<div class="boutons">
					<button type="button" id="versNvProjet" class="secondaire button" disabled>{{ 'Vers nv projet de cde' | trad }}</button>
					<button type="button" id="versCeProjet" class="secondaire button" disabled>{{ 'Vers ce projet de cde' | trad }}</button>
					<button type="button" onClick="unCheckAll();" class="secondaire button">{{ 'Désélectionner' | trad }}</button>
					| 
					<button type="button" onClick="vueDetaile();" class="secondaire button" style="margin-left:10px;margin-right: 5px;">{{ 'Vue détaillée' | trad }}</button>
					<button type="button" onClick="vueFerme();" class="secondaire button">{{ 'Vue non détaillée' | trad }}</button>

					<img class="iconeShowHide" src="{{ baseUrl() }}IconeV2/Misc/{% if panelFermer %}Collapse_Back.png{% else %}Collapse.png{% endif %}" onClick="showHidePannel('{{ path('Commande.GareDeTriage.sessionPannel') }}');" style="opacity: 0.4;">
					<button type="button" class="secondaire button" id="createCde" style="float: right; margin-right: 0px;" disabled>{{ 'Créer commande(s)' | trad }}</button>
				</div>

			<style>
				.headerGare {
					position:sticky;
					top:0px;
					z-index:10;
					background-color:white;
				}
				.iconeShowHide{
					width: 32px !important;
					float: right;
					margin-top: 3px;
					margin-left: 10px;
					cursor:pointer;
				}
			</style>			
			</div>
			<div class="bs-row flex-y-start" style="gap: 10px;">
				<table id="table1" class="tableFullWhite table table-hover" style="width:{% if panelFermer %}100%{% else %}80%{% endif %};float: left;">
					<thead class="thead-dark">
						<tr>
							{% for critere in listeCritere %}
								<th scope="col">{{ libCritere[critere] }}</th>
							{% endfor %}
							<th scope="col"></th>
							<th scope="col" colspan='2' style="width: 200px;">{{ 'Montant' | trad }}</th>
							<th scope="col" colspan='3'>
								{{ 'Actions' | trad }}
							</th>
						</tr>
					</thead>
					<tbody>
						{% for key, projet in listeProjet %}
							<tr id="ligne{{ key }}" data-idProjet="{{ key }}" class="droppable">
								{% for critere in listeCritere %}
									{% set rand = random() %}
									<td class="{% if critere == 'CODE_FOU' %}  {% endif %} tooltipAjax white-tooltip" data-rand="{{ rand }}" data-critere="{{critere}}" data-id="{{projet.arrayRegroup[critere]}}">
										<span class="infos_tooltip right" style="text-align: left;white-space: nowrap;">
											<div id="{{rand}}"></div>
										</span>
										{{ projet.arrayRegroup[critere] }}
									</td>
								{% endfor %}
								<td class="multiOpenDetail"></td>
								<td>
									{{ 'Total DA :' | trad }}
								</td>
								{% set rand = random() %}
								<td class="montant {% if projet.arrayRegroup['CODE_FOU'] %}white-tooltip {% endif %}">
									<span class="infos_tooltip bottom-right" style="text-align: left;">
										<div id="{{rand}}">
											<span>{{ 'Minimum facturation' | trad }} : {{ projet.frs.MNTMINFAC | tva }} {{ projet.frs.DEVISE }}</span><br>
											<span>{{ 'Minimum Franco' | trad }} : {{ projet.frs.MNTMINFRA |tva }} {{ projet.frs.DEVISE }}</span>
										</div>
									</span>
									<span class="montant-{{key}}">{{ projet.montantProjet | tva }}</span> {{ projet.entete.DEVISE??projet.frs.DEVISE }}
								</td>
								<td style="width: 32px;">
									{% if projet.montantProjet < projet.frs.MNTMINFAC or projet.montantProjet < projet.frs.MNTMINFRA %}
										<span class="alerte_orange white-tooltip" style="white-space: nowrap;">
											<span class="infos_tooltip left" style="text-align: left;">
												{% if projet.montantProjet < projet.frs.MNTMINFRA %}
													<span>{{ 'Minimum de franco non atteint' | trad }} : {{ projet.frs.MNTMINFRA |tva}} {{ projet.frs.DEVISE }}</span><br>
												{% endif %}												
												{% if projet.montantProjet < projet.frs.MNTMINFAC %}
													<span>{{ 'Minimum de facturation non atteint' | trad }} : {{ projet.frs.MNTMINFAC |tva}} {{ projet.frs.DEVISE }}</span>
												{% endif %}
											</span>
										</span>
									{% endif %}
								</td>
								<td style="width: 25px;">
									<a class="visualiser_v2" style="opacity: 1; float: right;" href="{{ path('Commande.ProjetGareDeTriage.detailProjet', {guIdProjet:key}) }}" title="{{ 'Voir le projet de commande' | trad }}">	</a>
								</td>
								<td style="width: 50px;"><input type="checkbox" class="form-control checkbox checkboxProjet" id="tableProjet-{{ key }}" name="checkbox_CA-{{ key }}"/></td>
							</tr>
							<tr id="ligne{{ key }}detail" class="detail_ligne background_detail droppable" data-idProjet="{{ key }}">
								<td colspan='{{ 7 + (listeCritere | length) }}'>    
									<table id="table{{ key }}" class="table table-hover dataWrapper" data-id="{{ key }}">
										<thead>
											<tr>
												<th width='10px'></th>
												<th width='100px'>{{ 'N° de DA' | trad }}</th>
												<th width='100px'>{{ 'Rgp/SFam' | trad }}</th>
												<th width='100px'>{{ 'Article' | trad }}</th>
												<th>{{ 'Description' | trad }}</th>
												<th width='100px'>{{ 'Montant' | trad }}</th>
												<th width='120px'>{{ 'Date de livraison' | trad }}</th>
												
												<th width='35px'></th>
												<th width='35px'></th>
												<th width='35px'></th>
												<th width='75px'></th>
												<th width='70px'>{{ 'Signée ?' | trad }}</th>
											</tr>
										</thead>
										<tbody class="connectedSortable">
											{% for keyLigne, da in projet['ligne'] %}
												<tr id="ligne_DA{{ keyLigne }}" class="draggable" data-idProjet="{{ key }}" data-idLigne="{{ keyLigne }}" style="width:400px;height:40px;">
													<td><input type="checkbox" class="form-control checkbox checkboxLigne" name="checkbox_DA_LIGNE-{{ key }}-{{ keyLigne }}" /></td>
													<td class="ss_detail" onclick="SSDetail(this, '{{ path('Commande.GareDeTriage.ajaxDetailLigne', {idDa : da.NO_DA, idLigne: da.NO_PO}) }}' , 'ligne_DA{{ keyLigne }}detail');">{{ da.NO_DA }} / {{ da.NO_PO }}</td>
													<td class="white-tooltip">
														<span class="infos_tooltip bottom-right" style="text-align: left;">
															{{ da.LIB_SSFAM }}	
														</span>
														{{ da.SSFAM }}
													</td>
													<td>{{ da.CODE_ART }}</td>
													<td>{{ da.DES_SOMM }} {{ shortLibelle(da.CONTMEMO,0) }}</td>
													<td class="montant white-tooltip">
														<span class="infos_tooltip left" style="text-align: left;white-space: nowrap;width: 250px;">
																<span>{{ 'Quantité demandée' | trad }} : </span><span style="float:right">{{ da.QTE_DEM |tva}} {{ da.UNITE }}</span><br>
																<span>{{ 'Quantité déjà commandée' | trad }} : </span><span style="float:right">{{ da.DEJA_COMM |tva}} {{ da.UNITE }}</span><br>
																<span>{{ 'Reste à commander' | trad }} : </span><span style="float:right">{{ da.RAL |tva}} {{ da.UNITE }}</span><br>
																<span>{{ 'Dont sur cette commande' | trad }} : </span><span  style="float:right">{{ da.QTE |tva}} {{ da.UNITE }}</span>
														</span>
														{% if da.prix_budget %}
															<i>B {{ da.montantLigne |tva}} {{ da.DEVISE }}</i>
														{% else %}
															{{ da.montantLigne |tva}} {{ da.DEVISE }}											
														{% endif %}
														
													</td>
													<td>
														{% if da.PLANNING | length > 1 %}
															<button type="button" class="principal button " onClick="ajaxPopupV2('{{ path('Commande.GareDeTriage.popupPlanning', {idDa : da.NO_DA, idLigne: da.NO_PO}) }}', 'test', '{{ 'Planning' | trad }}');">{{ 'Voir planning' | trad }}</button>
														{% else %}
															{{ da.DTELIVSOU | dateTrad }}
														{% endif %}
													</td>
													
													<td>
														{% if da.NO_AO %}
															<span class="presence-of-consult white-tooltip" style="white-space: nowrap;">
																<span class="infos_tooltip left">
																	{{ 'Consultation' | trad }} : {{ da.NO_AO }}
																</span>
															</span>
														{% endif %}
													</td>
													<td>
														{% if da.NUM_CLEQ %}
															<span class="icone article white-tooltip" style="white-space: nowrap;cursor: pointer !important;" onClick="ajaxPopup('{{ path('Ajax.liste.equivArt', {numCleq:da.NUM_CLEQ, codeFou:da.CODE_FOU}) }}', '{{ 'Gestion d\'une classe Article' |e('js')|raw }}', '', '', {'societe' : '{{ da.CODE_STE }}'});">
																<span class="infos_tooltip left">
																	{{ 'Article appartenant a une classe' | trad }}
																</span>
															</span>
														{% endif %}
													</td>
													<td>
														{% if da.bestPrix > 0 and (da.bestPrix < da.PU_REMISE) %}
															<span class="bestPrice white-tooltip" style="white-space: nowrap;cursor: pointer !important;" onClick="ajaxPopup('{{ path('Commande.GareDeTriage.listBestPrice', {guIdProjet:key, guIdLigne:keyLigne}) }}', '{{ 'Liste des prix' | trad }} {{ da.DES_SOMM |e('js')|raw }} ({{ da.CODE_ART }})', '', '', '','modal_large' );">
																<span class="infos_tooltip left">
																	{{ 'Il existe un meilleur prix' | trad }} : {{ da.bestPrix | prixUnitaire }} {{ 'au lieu de' | trad }} {{ da.PU_REMISE | prixUnitaire }}
																</span>
															</span>
														{% endif %}
													</td>
													<td>
													{% if da.DATE_LIMITE_TT_DA < date and (da.DTELIVSOU!='00000000' or da.planningActif) %}<span class='urgent'>{{ 'URG' | trad }}</span>{% endif %}</td>
													<td class="align-center {% if da.SIGNEE | boolSql %}white-tooltip{% endif %}">
														{% if da.SIGNEE | boolSql %}Ok{% endif %}
														<span class="infos_tooltip left">
															{{ 'Signé le' | trad }} {{ da.SIG_DTE |dateTrad }} {{ 'Par' | trad }} {{ da.SIG_NOM }}
														</span>
													</td>
												</tr>
												<tr id="ligne_DA{{ keyLigne }}detail" data-idProjet="{{ key }}" data-idLigne="{{ keyLigne }}" class="view-details hide_detail"></tr>
											{% endfor %}
										</tbody>
									</table>
								</td>
							</tr>
						{% endfor %}
					</tbody>
				</table>
				<div id="filter_pannel" class="pannelFilter box-form {% if panelFermer %}off{% else %}on{% endif %}">
					<h4>{{ 'Projets' | trad }}</h4>
					<hr>
					<ul>
						{% for key, projet in listeProjet %}
							<li class="list droppable" style="margin-bottom: 10px;" id="rightProjet{{key}}" data-idProjet="{{ key }}">
								<div><input style="margin-right:10px;" type="checkbox" class="form-control checkbox checkboxPannel" id="projet{{key}}"/></div> 
								<a class="ref" style="cursor:pointer;" href="{{ path('Commande.ProjetGareDeTriage.detailProjet', {guIdProjet:key}) }}">{% for lib in projet.libProjet %}{{ lib }}{% if loop.last != loop.index %} - {% endif %}{% endfor %} </br>
									<span class="countArticle-{{key}}">{{ projet.count }}</span> {{ 'Lignes' | trad }} - <span class="montant-{{key}}">{{ projet.montantProjet |tva}}</span> {{ projet.entete.DEVISE??projet.frs.DEVISE }}
								</a>
							</li>
						{% endfor %}
					</ul>
				</div>
			</div>
		</div>
	{% endif %}	
	</form>
</div>
<script>
	$('.tooltipAjax').hover(function(){
		var tooltips = $(this);
		var critere = $(this).data('critere');
		var id = $(this).data('id');
		var rand = $(this).data('rand');

		if (critere != '' && id != '' && $('#'+rand).html() == '') {
			$('#'+rand).html(' ');
			$.ajax({
				dataType : 'html',
				url: '{{ path('Commande.GareDeTriage.ajaxGenerateTooltip') }}',
				data: {'critere' : critere, 'id': id, 'societe' : '{{ post.societe }}'},
				type: "POST",
				success: function(result){
					$('#'+rand).html(result);
					if (!$.trim(result)) {
						tooltips.removeClass('white-tooltip');
					}
				}
			});
		} else if (critere == '' || id == '') {
			$(this).html('');
			$(this).removeClass('white-tooltip');
		}

	});

	$('#versCeProjet').click(function(){
		activeLoader();
		var unindexed_array = $('#filtre_GareDeTriage').serializeArray();
		var indexed_array = {};

		$.map(unindexed_array, function(n, i){
			indexed_array[n['name']] = n['value'];
		});
		
		indexed_array['versCeProjet'] = '1';

		var inputSelected = $($('.checkboxProjet:checked')[0]).attr('id');
		guIdProjet = inputSelected.split('-');
		redirectJSWithPost('{{ baseUrl() }}Commande/gareDeTriage/projet/'+guIdProjet[1]+'/detail', indexed_array);
	});

	$('#versNvProjet').click(function(){
		activeLoader();
		$.ajax({
			dataType : 'html',
			url: "{{ path('Commande.GareDeTriage.ajaxNouveauProjet') }}",
			data: $('#filtre_GareDeTriage').serialize(),
			type: "POST",
			success: function(result){
				redirectJSWithPost(result);
			}
		});
	});

	$('#createCde').click(function(){
		activeLoader();
		$.ajax({
			dataType : 'html',
			url: "{{ path('Commande.GareDeTriage.createCommande') }}",
			data: $('#filtre_GareDeTriage').serialize(),
			type: "POST",
			success: function(result){
				desactiveLoader();

				var data = jQuery.parseJSON(result);

				if (data.statut == 'O') {
					redirectJSWithPost(data.path, data.post);
				} else {
					$("#modal-content").addClass("modal_small");
					$("#modal-body").html(data.content);
					$("#modal-title").html('{{ 'Erreur' | trad }}');

					activePopup();
				}
			}
		});
	});

	$('.checkboxPannel').click(function(){
		var id = $(this).attr('id');
		id = id.substr(6);
		if ($(this).is(':checked')) {
			$('#tableProjet-'+id).prop('checked', true);
		}else{
			$('#tableProjet-'+id).prop('checked', false);
		}

		var countProjet = $('.checkboxProjet:checked').length;
		var countLigne = $('.checkboxLigne:checked').length;

		if (countLigne>0 && countProjet == 1) {
			$('#versCeProjet').prop("disabled", false);
		} else {
			$('#versCeProjet').prop("disabled", true);
		}

		activeDesactiveButton();
	});

	function activeDesactiveButton() {
		var countProjet = $('.checkboxProjet:checked').length;

		if (countProjet>0) {
			$('#createCde').prop("disabled", false);
		} else {
			$('#createCde').prop("disabled", true);
		}

		$('#countProjetSelected').html(countProjet);
	}

	$('.checkboxProjet').click(function(){
		var countLigne = $('.checkboxLigne:checked').length;
		var countProjet = $('.checkboxProjet:checked').length;

		var id = $(this).attr('id');
		id = id.split("-");
		if ($(this).is(':checked')) {
			$('#projet'+id[1]).prop('checked', true);
		}else{
			$('#projet'+id[1]).prop('checked', false);
		}

		if (countLigne>0 && countProjet == 1) {
			$('#versCeProjet').prop("disabled", false);
		} else {
			$('#versCeProjet').prop("disabled", true);
		}

		activeDesactiveButton();
	});

	$('.checkboxLigne').click(function(){
		var countLigne = $('.checkboxLigne:checked').length;
		var countProjet = $('.checkboxProjet:checked').length;

		if (countLigne>0) {
			$('#versNvProjet').prop("disabled", false);

			if (countProjet == 1) {
				$('#versCeProjet').prop("disabled", false);
			}
		} else {
			$('#versNvProjet').prop("disabled", true);
			$('#versCeProjet').prop("disabled", true);
		}

		$('#countLigneSelected').html(countLigne);
	});

	function unCheckAll() {
		$('.checkbox').prop( 'checked', false );
		$('#countProjetSelected').html(0);
		$('#countLigneSelected').html(0);
		activeDesactiveButton();
	}

	$('.draggable').draggable({
		//helper: 'clone', 
		helper: function() {

			var html = $(this).find('td:nth-child(2)').html();
			if ($(this).find('td:nth-child(3)').html()) {
				html += ' | '+$(this).find('td:nth-child(4)').html();
			}
			if ($(this).find('td:nth-child(4)').html()) {
				html += ' | '+$(this).find('td:nth-child(5)').html();
			}

			return $("<div style='background-color: white; width: 300px; border: 1px solid #ddd; font-size: 12px; padding: 10px;z-index:999;'></div>").append(html);
		},
		stack: "tr", 
		cursor: "grabbing",
		cursorAt: { left: 20 }
	});

	$('.droppable').droppable({
		tolerance: "pointer",
		over: function(e, ui) {
			var idProjetDrop = e.target.getAttribute("data-idProjet");
			var idProjetSrc = ui.draggable[0].getAttribute("data-idProjet");
			var idLigneSrc = ui.draggable[0].getAttribute("data-idligne");

			var elementType = $(e.target).prev().prop('nodeName');
			
			if (elementType == 'TR') {
				if (idProjetDrop != idProjetSrc) {
					if ($('#ligne'+idProjetDrop+'detail').is(':visible')) {
						$('#ligne'+idProjetDrop).css({"border-top": "2px dashed #3377CB", "border-left" : "2px dashed #3377CB", "border-right": "2px dashed #3377CB"});
						$('#ligne'+idProjetDrop+'detail').css({"border-bottom": "2px dashed #3377CB", "border-left" : "2px dashed #3377CB", "border-right": "2px dashed #3377CB"});
					} else {
						$('#ligne'+idProjetDrop).css({"border": "2px dashed #3377CB"});
					}
				}
			} else {
				$('#rightProjet'+idProjetDrop).css({"border": "2px dashed #3377CB"});
			}
		},
		out: function(e, ui) {
			var idProjetDrop = e.target.getAttribute("data-idProjet");

			$('#ligne'+idProjetDrop).css({"border": "0px"});
			$('#ligne'+idProjetDrop+'detail').css({"border": "0px"});
			$('#rightProjet'+idProjetDrop).css({"border": "0px"});
		},
		drop: function(e, ui) {
			activeLoader();
			var idProjetDrop = e.target.getAttribute("data-idProjet");
			var idProjetSrc = ui.draggable[0].getAttribute("data-idProjet");
			var idLigneSrc = ui.draggable[0].getAttribute("data-idligne");

			if (idProjetDrop != idProjetSrc) {

				$.ajax({
					dataType : 'html',
					url: '{{ path('Commande.GareDeTriage.ajaxControleMove') }}',
					data: {
						'idProjetDrop'  : idProjetDrop,
						'idProjetSrc' : idProjetSrc,
						'idLigneSrc' : idLigneSrc,
					},
					type: "POST",
					success: function(result){
						desactiveLoader();

						var data = jQuery.parseJSON(result);

						if (data.statut == 'O') {
							moveTr(idLigneSrc,idProjetSrc, idProjetDrop, data.montantOldProjet, data.montantNewProjet);
						} else {
							$("#modal-content").addClass("modal_small");
							$("#modal-body").html(data.content);
							$("#modal-title").html('{{ 'Erreur' | trad }}');

							activePopup();
						}
					}
				});
			} else {
				desactiveLoader();
			}

			$('#ligne'+idProjetDrop).css({"border": "0px"});
			$('#ligne'+idProjetDrop+'detail').css({"border": "0px"});
			$('#rightProjet'+idProjetDrop).css({"border": "0px"});
		}
	});
	
	function moveTr(idLigneSrc,idProjetSrc, idProjetDrop, montantOldProjet, montantNewProjet)
	{
		$('.montant-'+idProjetSrc).html(montantOldProjet);
		$('.montant-'+idProjetDrop).html(montantNewProjet);

		var countArticleSrc = $('.countArticle-'+idProjetSrc).text();
		var countArticleDrop = $('.countArticle-'+idProjetDrop).text();

		countArticleSrc = parseInt(countArticleSrc) - 1;
		countArticleDrop = parseInt(countArticleDrop) +1;

		$('.countArticle-'+idProjetSrc).html(countArticleSrc);
		$('.countArticle-'+idProjetDrop).html(countArticleDrop);

		var newRowContent = $('#ligne_DA'+idLigneSrc).remove().clone();
		$("#table"+idProjetDrop).append(newRowContent);
		$('#ligne_DA'+idLigneSrc).draggable({helper: 'clone', stack: "tr"});
		$('#ligne_DA'+idLigneSrc+'detail').insertAfter($('#ligne_DA'+idLigneSrc));

		$('#ligne_DA'+idLigneSrc).attr("data-idprojet", idProjetDrop);
		$('#ligne_DA'+idLigneSrc+'detail').attr("data-idprojet", idProjetDrop);

		var lengthTable = $('#table'+idProjetSrc+' tbody tr').length;
		
		if (lengthTable == 0 ) {
			$('#ligne'+idProjetSrc).remove();
			$('#ligne'+idProjetSrc+'detail').remove();
			$('.montant-'+idProjetSrc).remove();
		}
	}

	$(document).scroll(function() {
		if ($(this).scrollTop() > 320) {
			$('.headerGare').css({ 
				"padding" : '10px',
				"box-shadow" : '5px 5px 5px #888',
				"position" : 'fixed',
				"width" : '95%',
			});
		} else {
			$('.headerGare').css({ "padding" : '0px', "box-shadow" : 'none', 'position' : 'sticky', "width" : "100%"});
		}
	});

	function showHidePannel(path)
	{
		if ($('#filter_pannel').hasClass('on')) {
			$('#filter_pannel').removeClass('on');
			$('#filter_pannel').addClass('off');
			$('#table1').css("width", '100%');
			var desactive = 1;
			$('.iconeShowHide').attr('src', "{{ baseUrl() }}IconeV2/Misc/Collapse_Back.png");
		} else {
			$('#filter_pannel').removeClass('off');
			$('#filter_pannel').addClass('on');
			$('#table1').css("width", '80%');
			var desactive = 0;
			$('.iconeShowHide').attr('src', "{{ baseUrl() }}IconeV2/Misc/Collapse.png");
		}

		$.ajax({
			url: path,
			data: {'desactive' : desactive},
			type: "POST",
			success: function(result){

			}
		})
	}
</script>
<style>
	.pannelFilter {
		position: sticky;
		top: 100px;
		max-height: calc(100vh - 105px);
		overflow-y: auto;
	}

	.list .ref {
		color:#5f5f5f;
	}
	.list .ref:hover {
		text-decoration: underline;
	}
	
</style>
{% endblock %}

