{% block body %}

	<div class="bg_form padding_form border_form clearfix" id="detailRefresh">

		<h2 class="separateur_bottom" style="padding-bottom:5px;">
		    {{ infoCategorie.LIB }}
		    {% if categorieAFille == false and (canEdit)  %}
		    	{% if typeObjet=='B' %}
		    		<a class="ajouter_blanc_v2 button_v2 white-tooltip" href="{{ path('ProjetAchat.Donnee.create', {typeObjet:typeObjet,idObjet:idObjet,idCategorie: idCategorie}) }}" style="float:right;">
				{% else %}
					<a class="ajouter_blanc_v2 button_v2 white-tooltip" onClick="generateTab('{{ path('ProjetAchat.Donnee.create', {typeObjet:typeObjet,idObjet:idObjet,idCategorie: idCategorie}) }}', '{{ 'Nouvelle donnée' | trad }}','div_donnee_externe',);" style="float:right;">
				{% endif %}
					<span class="infos_tooltip left">
						{{ 'Ajouter une donnée' | trad }}
                    </span>
		    	</a>
		    {% endif %}
		</h2>
		{% if infoCategorie.DESCR %}
		<div>
			<p>
				<span class="champs_label" style="width: 19.3%;">{{ 'Description' | trad }}</span>
				<span class="resultat left" style="width:76.7%;">{{ infoCategorie.DESCR }}</span>
			</p>
		</div>
		{% endif %}

		<div id="dataWrapper" data-cat="{{ infoDonne[0].ID_CAT }}">
		{% for donnee in infoDonne %}
    		<div class="clearfix" id="donnee_{{ loop.index }}" style="margin-bottom: 35px" data-order="{{ donnee.NUM_ORDRE }}">
        		<div class="colonne2" style="width:33%;">
        			{% if canEdit  %}
            			<div class="clearfix" style="position: absolute;top: 15px;right: 0px;">
    						{% if typeObjet=='B' %}
    						    {{ hover_action('donnee_'~loop.index, 'modifier_v2' , "window.location.href ='"~path('ProjetAchat.Donnee.edit', {idData: donnee.ID_DONNEE})~"';", 'float: right;') }}
                        	{% elseif donnee.ID_STRUCT == '0' %}
                        		{{ hover_action('donnee_'~loop.index, 'modifier_v2' , "generateTab('"~path('ProjetAchat.Donnee.edit', {idData: donnee.ID_DONNEE})~"', '"~'Modification donnée' | trad~"', 'div_donnee_externe');", 'float: right;') }}
                        	{% endif %}
    						{{ hover_action('donnee_'~loop.index, 'Supprimer_v2' , "popupConfirmation(\'"~path('Ajax.Erreur.popupConfirmationSuppresion')~"\', \'\', \'"~path('ProjetAchat.Donnee.delete', {typeObjet: typeObjet, idData: donnee.ID_DONNEE})~"\', \'"~('Etes-vous sûr de vouloir supprimer la donnée' | trad |e('js')|raw)~" "~(donnee.NOM_DONNEE |e('js')|raw)~" ?\', \'detailRefresh\', '', '', '', '', '', \'"~('Suppression de la donnée' | trad |e('js')|raw)~"\')", 'float: right;margin-right:5px;') }}
                        	{% if typeObjet != 'B' and donnee.ID_STRUCT != '0' %}
                        	    {{ hover_action('donnee_'~loop.index, 'desassocie_v2' , "popupConfirmation(\'"~path('Ajax.Erreur.popupConfirmationSuppresion')~"\', \'\', \'"~path('ProjetAchat.Donnee.briserHeritage', {typeObjet: typeObjet, idObjet: idObjet, idData: donnee.ID_DONNEE})~"\', \'"~('Cette donnée est héritée de la bibliothèque de données que vous avez utilisée lors de la création du projet.' | trad |e('js')|raw)~"<br />"~('Souhaitez-vous rompre l\'héritage avec la bibliothèque de données ?' | trad |e('js')|raw)~"<br /><br /><b>"~('Attention' | trad |e('js')|raw)~"</b> : "~('Les champs non reliés à la bibliothèque ne pourront pas être exploités dans le module de BI' | trad |e('js')|raw)~"\', \'detailRefresh\', '', '', '', '', '', \'"~('Briser l\'héritage' | trad |e('js')|raw)~"\')", 'float: right;margin-right:5px;', 'Briser l\'héritage' | trad) }}	
                        	{% endif %}
                        </div>
                    {% endif %}
        			<div class="informations">
                		<p style="margin-bottom:25px;">
                			<span class="champs_label">{{ 'Nom de la donnée' | trad }}</span>
                			<span class="resultat">
                                <span class="{% if donnee.MULTIPLE | boolSql == false %}container_Unique{% else %}container_Multiple{% endif %} white-tooltip">
                                	<span class="infos_tooltip left">
                                        {% if donnee.MULTIPLE | boolSql == false %}{{ 'Donnée unique' | trad }}{% else %}{{ 'Donnée multiple' | trad }}{% endif %}
                                    </span>
                                    <msg>{{ donnee.NOM_DONNEE }}</msg>
                                </span>
            				</span>
                		</p>                		
                		<p>
                			<span class="champs_label">{{ 'Description' | trad }}</span>
                			<span class="resultat">{{ donnee.DESCR |nl2br }}</span>
                		</p>
            		</div>
        		</div>
        		<div class="colonne2 last" style="width:63%!important;">
                    <table class="table table-hover">
                      	<thead class="thead-dark">
                      		 <th scope="col">{{ 'Champs' | trad }}</th>
                      		 <th scope="col">{{ 'Format' | trad }}</th>
                      		 <th scope="col" width="70px">
                      		 {% if canEdit %}
                      		 	{% if typeObjet=='B' %}
                  		 			<a class="ajouter_blanc_v2  white-tooltip" id="addChamps" href="{{ path('ProjetAchat.Champs.createEdit', {typeObjet:typeObjet,idObjet:idObjet,idDonnee:donnee.ID_DONNEE}) }}" style="float: right;">
                        		{% else %}
                        			<a class="ajouter_blanc_v2  white-tooltip"  onClick="generateTab('{{ path('ProjetAchat.Champs.createEdit', {typeObjet:typeObjet,idObjet:idObjet,idDonnee:donnee.ID_DONNEE}) }}', '{{ 'Nouveau champ' | trad }}','div_champs_externe');" style="float: right;">
                      		 	{% endif %}
                        			<span class="infos_tooltip left">
                        				{{ 'Ajouter un champ' | trad }}
                                    </span>
                      		 	</a>
                  		 	{% endif %}
                  		 	</th>
                      	</thead>
						<tbody data-donnee="{{ donnee.ID_DONNEE }}">
						{% for champ in donnee.ListeChamps %}
							<tr id="champ_{{ champ.ID_DATA }}" data-order="{{ champ.NUM_ORDRE }}">
								<td>{{ champ.NOM_DATA }}</td>
								
								{% if champ.TYPE_DATA == 'C' %}
									<td class="white-tooltip">
                            			<span class="infos_tooltip left">
                            				{{ champ.EXP_CALCUL }}
                                        </span>
									    {{ champ.FORMAT }}
									</td>
								{% else %}
									<td>{{ champ.FORMAT }}</td>
								{% endif %}
								
								<td class="parametrage">
								    {% if champ.ERREUR_CALCUL | boolSql %}
								    	<a class="erreur_V2 white-tooltip" style="width: 16px;">
                                			<span class="infos_tooltip left">
                                				{{ 'Calcul incorrect. Vous devez corriger la formule' | trad }}
                                            </span>
								    	</a>
							    	{% endif %}
									{% if canEdit %}
    									{% if typeObjet=='B' %}
    									    {{ hover_action('champ_'~champ.ID_DATA, 'modifier_v2' , "window.location.href ='"~path('ProjetAchat.Champs.createEdit', {typeObjet:typeObjet,idObjet:idObjet,idDonnee:donnee.ID_DONNEE, idChamp:champ.ID_DATA})~"';", 'float: right;') }}
    									{% elseif champ.ID_STRUCT == '0' %}
    										{{ hover_action('champ_'~champ.ID_DATA, 'modifier_v2' , "generateTab('"~path('ProjetAchat.Champs.createEdit', {typeObjet:typeObjet,idObjet:idObjet,idDonnee:donnee.ID_DONNEE, idChamp:champ.ID_DATA})~"', '"~'Modification champ' | trad~"', 'div_champs_externe');", 'float: right;') }}
    									{% endif %}
    									{% if (champ.LIE_A_OBJET | boolSql and champ.CLE_UNIQUE | boolSql) or champ.ID_STRUCT != '0' %}
    									{% else %}
    									    {{ hover_action('champ_'~champ.ID_DATA, 'Supprimer_v2' , "popupConfirmation(\'"~path('Ajax.Erreur.popupConfirmationSuppresion')~"\', \'\', \'"~path('ProjetAchat.Champs.delete', {idChamp:champ.ID_DATA})~"\', \'"~('Etes-vous sûr de vouloir supprimer le champ' | trad |e('js')|raw)~" "~(champ.NOM_DATA |e('js')|raw)~" ?\', \'detailRefresh\')", 'float: right;margin-right:5px;') }}
    									{% endif %}
                                    	{% if typeObjet != 'B' and champ.ID_STRUCT != '0' %}
                                    	    {{ hover_action('champ_'~champ.ID_DATA, 'desassocie_v2' , "popupConfirmation(\'"~path('Ajax.Erreur.popupConfirmationSuppresion')~"\', \'\', \'"~path('ProjetAchat.Champs.briserHeritage', {typeObjet: typeObjet, idObjet: idObjet, idDonnee: donnee.ID_DONNEE, idChamp:champ.ID_DATA})~"\', \'"~('Ce champ est hérité de la bibliothèque de données que vous avez utilisée lors de la création du projet.' | trad |e('js')|raw)~"<br />"~('Souhaitez-vous rompre l\'héritage avec la bibliothèque de données ?' | trad |e('js')|raw)~"<br /><br /><b>"~('Attention' | trad |e('js')|raw)~"</b> : "~('Les champs non reliés à la bibliothèque ne pourront pas être exploités dans le module de BI' | trad |e('js')|raw)~"\', \'detailRefresh\', '', '', '', '', '', \'"~('Briser l\'héritage' | trad |e('js')|raw)~"\')", 'float: right;margin-right:5px;', 'Briser l\'héritage' | trad ) }}	
                                    	{% endif %}
									{% endif %}
								</td>
							</tr>
						{% endfor %}
						</tbody>
                  	</table>
        		</div>
				<hr>
			</div>
		{% endfor %}
		</div>
	</div>

{% if canEdit %}
	<script type="text/javascript">
	
		$('#dataWrapper tbody').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 idDonnee = $(this).attr('data-donnee')

				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.BibliothequeDonnee.ajaxReorderFields') }}",
					data: {
						initialPosition: initialPosition,
						newPosition: newPosition,
						idData: idDonnee
					},
					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, 'div', ui.item, ui.item.prev(), ui.item.next(), newPosition, sign)

				$.ajax({
					type: "POST",
					url: "{{ path('ProjetAchat.BibliothequeDonnee.ajaxReorderDatas') }}",
					data: {
						initialPosition: initialPosition,
						newPosition: newPosition,
						idData: idCat
					},
					success: function() {
						console.log("success")
					},
					dataType: 'json'
				});
			}
		});
	</script>
	<style>
        #projetAchat .champs_label{
        	width: 100%;
        	margin-bottom: 5px;
        }
        #detailRefresh .resultat{
             width: 100%;
             float: none;
             text-align: left;            
        }
	</style>
{% endif %}
{% endblock %}

