{% block body %}

	<div class="box-form clearfix" id="hierarchyRefresh">

		<h2 class="separateur_bottom" style="padding-bottom:5px;">
		    {{ infoHierarchy.LIB }}
            {% if categorieAFille == false and canEdit %}
				<a class="ajouter_blanc_v2 button_v2 white-tooltip" onClick="generateTab('{{ path('ProjetAchat.Task.create', {typeObjet:typeObjet,idObjet:idObjet,idHierarchy: idHierarchy}) }}', '{{ 'Nouvelle tâche' | trad }}','div_donnee_externe');" style="float:right;">
    				<span class="infos_tooltip left">
    					{{ 'Ajouter une tâche' | trad }}
                    </span>
		    	</a>
		    {% endif %}
		</h2>
		
		{% if infoHierarchy.DESCR %}
		<div>
			<p>
				<span class="champs_label" style="width: 19.3%;">{{ 'Description' | trad }}</span>
				<span class="resultat left" style="width:76.7%;">{{ infoHierarchy.DESCR }}</span>
			</p>
		</div>
		{% endif %}
		
		<div id="dataWrapperH" data-Hierarchy="{{ idHierarchy }}">
		{% for task in tasks %}
    		<div class="clearfix hoverrable divTask" id="task_{{ loop.index }}" style="margin-bottom: 35px;position:relative;" data-order="{{ task.NUM_ORDRE }}">
    			<div class="informations" style="margin-top: 0px;">
            		<p class="gras">{{ task.LIB }}</p>
    				<p>{{ task.DESCR }}</p>
            	    <p>
                    	<span class="champs_label" style="width:25%;">{{ 'Responsable' | trad }} : </span>
						{% if typeObjet == 'D' %}
							<span>{{ task.NOM }} ({{ task.RESPONSABLE }})</span>
						{% else %}
							<span>
							    {% if task.RESPONSABLE == 'P' %} 
							        {{ 'Propriétaire' | trad }} 
						        {% elseif task.RESPONSABLE == 'S' %} 
						            {{ 'Prescripteur' | trad }}
								{% elseif userCS[task.RESPONSABLE] %}	
									 {{ userCS[task.RESPONSABLE] }}
					            {% else %}  
					                {{ 'A définir dans le projet' | trad }} 
				                {% endif %}
			                </span>
						{% endif %}
                    </p>
            	    <p>
                    	<span class="champs_label" style="width:25%;">{{ 'Durée' | trad }} : </span>
                        <span>{{ task.DUREE_PREV }} {% if task.DUREE_PREV == 1 %} {{ 'jour' | trad }} {% else %} {{ 'jours' | trad }} {% endif %}</span>
                    </p>
    				{% if canEdit %}
        				<div class="clearfix" style="position:absolute;top:0;right:0;">
        				    {{ menuContextuel('task_'~loop.index, false, task.menuContextuel) }}
        				</div>
    				{% endif %}
				</div>
				<ul style="margin-left:5%;" class="list dataWrapper" data-cat="{{ task.ID_TACHE }}">
    				{% for action in task.listAction  %}
    					<li id="action{{ action.ID_TACHE }}{{ action.ID_ACTION }}" data-order="{{ action.NUM_ORDRE }}">
    						<div class="lib">{{ action.LIB }}</div>
    						<div class="parametrage statut" style="position: relative;">
    							{% if typeObjet == 'D' %}
    						        {{ (action.TERMINEE | boolSql)? 'Terminée' | trad:'Pas terminée' | trad }}
						        {% endif %}
    						    {% if canEdit %}
    						        {{ menuContextuel('action'~action.ID_TACHE~action.ID_ACTION, false, action.menuContextuel) }}
						        {% else %}						        	
						            {{ hover_action('action'~action.ID_TACHE~action.ID_ACTION, 'visualiser_v2' , "generateTab(\'"~path('ProjetAchat.Action.showDetail', {typeObjet:typeObjet,idObjet:idObjet,idAction : action.ID_ACTION})~"\', \'"~'Détail action' | trad~"\', \'div_donnee_externe\');", 'float: right;') }}
						        {% endif %}
						        
								{% if action.TERMINEE | boolSql == false and action.isExecutable is same as (true) and typeObjet == 'D' %}
                                    <a class="button principal" style="float: right; position: absolute; right: 30px; top: -5px;" onClick="generateTab('{{ path('ProjetAchat.Action.execute', {typeObjet: typeObjet, idObjet: idObjet, idAction:action.ID_ACTION}) }}', '{{ 'Exécution action' | trad |e('js')|raw }}','div_execute_externe');">{{ 'Exécuter' | trad }}</a>
								{% endif %}
    						</div>
						</li>
    				{% endfor %}
				</ul>
				<hr>
			</div>
		{% endfor %}
		</div>
	{% if canEdit %}
    	<script>
    	
    		$('#dataWrapperH').sortable({
    			update: function( event, ui ) {
    				let initialPosition = parseInt(ui.item.attr('data-order'))
    				let prevItem = parseInt(ui.item.prev().attr('data-order'))
    				let nextItem = parseInt(ui.item.next().attr('data-order'))
    				let sign = ""
    				const idHierarchy = $(this).attr('data-Hierarchy')
    
    				if(initialPosition > prevItem || initialPosition > nextItem) {
    					sign = "+"
    				} else if (initialPosition < prevItem || initialPosition < nextItem) {
    					sign = "-"
    				}
    				const newPosition = findNewPosition(prevItem, nextItem, sign)
    				reOrder(this, 'tr', ui.item, ui.item.prev(), ui.item.next(), newPosition, sign)

    				$.ajax({
    					type: "POST",
    					url: "{{ path('ProjetAchat.Task.ajaxReorderTask') }}",
    					data: {
    						initialPosition: initialPosition,
    						newPosition: newPosition,
    						idHierarchy: idHierarchy
    					},
    					success: function() {
    						console.log("success")
    					},
    					dataType: 'json'
    				});
    			}
    		});
    	
    		$('.dataWrapper').sortable({
    			update: function( event, ui ) {
    				let initialPosition = parseInt(ui.item.attr('data-order'))
    				let prevItem = parseInt(ui.item.prev().attr('data-order'))
    				let nextItem = parseInt(ui.item.next().attr('data-order'))
    				let sign = ""
    				const idCat = $(this).attr('data-cat')
    
    				if(initialPosition > prevItem || initialPosition > nextItem) {
    					sign = "+"
    				} else if (initialPosition < prevItem || initialPosition < nextItem) {
    					sign = "-"
    				}
    				const newPosition = findNewPosition(prevItem, nextItem, sign)
    				reOrder(this, 'ul', ui.item, ui.item.prev(), ui.item.next(), newPosition, sign)
    
    				$.ajax({
    					type: "POST",
    					url: "{{ path('ProjetAchat.BibliothequeDonnee.ajaxReorderActions') }}",
    					data: {
    						initialPosition: initialPosition,
    						newPosition: newPosition,
    						idData: idCat
    					},
    					success: function() {
    						console.log("success")
    					},
    					dataType: 'json'
    				});
    			}
    		});
    	</script>
	{% endif %}
    	
	</div>

	<style>
	.list li {
		padding:10px;
	}
	.list li:hover{
		background-color:#ebebeb;
	}
	.list li div.lib {
		display:inline-block;
		width:70%;
	}
	.list li div.statut {
		width:29%;
	}
</style>

{% endblock %}

