{% extends 'layout.twig' %}

{% block body %}

    <div class="clearfix contenu titre_div"  id="detailDoA">
        {% if typeObjet=='M' %}
        	<h1>{{ 'Gestion des modèles' | trad }}</h1>
        {% else %}
        	<h1>{{ 'Gestion des projets' | trad }}</h1>
        {% endif %}
        
        {{ ariane() }}
        
        <h2 id="divMenu" style="position:relative;">
			<span class="title-to-long">{{ "#{ model.LIB }, #{ 'créé le' | trad } #{ model.DATE_CREAT } #{ 'par' | trad } #{ createrEvent.NOM??model.NOM }" }}</span>
            
			{{ menuContextuel('detailDoA', false, menuContextuel, 6) }}
        </h2>
        
    	<div class="tab-content">
        	<div class="padding15">
        	
            	<details open class="block_edition clearfix" id="divEntete">
                	<summary class="titre_block">
                		{% if typeObjet=='M' %}
                		    {{ 'Entête modèle' | trad }}
            		    {% else %}
            		    	{{ 'Entête projet' | trad }}
            		    {% endif %}
                	</summary>
                	<div class="clearfix">
                        <div class="colonne2">
                        	<div class="informations">
                        	    <p>
                                	<span class="champs_label">{{ 'Référence' | trad }}</span>
                                    <span class="resultat">{{ model.REF }}</span>
                                </p>
                        	    <p>
                                	<span class="champs_label">{{ 'Description' | trad }}</span>
                                    <span class="resultat">{{ shortLibelle(model.DESCR, 100) }}</span>
                                </p>
                                {% if typeObjet=='D' %}
                            	    <p>
                                    	<span class="champs_label">{{ 'Prescripteur' | trad }}</span>
                                        <span class="resultat">{{ model.NOM_PRESC }} ({{ model.PRESCRIPTEUR }})</span>
                                    </p>
                            	    <p>
                                    	<span class="champs_label">{{ 'Date début prévue' | trad }}</span>
                                        <span class="resultat">{{ model.DATE_DEB | dateTrad }}</span>
                                    </p>
                            	    <p>
                                    	<span class="champs_label">{{ 'Statut' | trad }}</span>
                                        <span class="resultat">
                              				{% if model.SUSPENDU | boolSql %}
                              					{{ listeStatut[model.STATUT~'S'] }}
                              				{% else %}
                              			        {{ listeStatut[model.STATUT] }}
                          			        {% endif %}
                                        </span>
                                    </p>
                                {% endif %}
                            </div>
                        </div>
                        <div class="colonne2 last">
                        	<div class="informations">
                        	    <p>
                                	<span class="champs_label">{{ 'Type de projet' | trad }}</span>
                                    <span class="resultat">
                                        {{ model.TYPE_LIB }}
                                        {% if(model.TYPE_LIB) %}
                                            ({{ model.ID_TYPE }})
                                        {% endif %}
                                    </span>
                                </p>
                        	    <p>
                                	<span class="champs_label">{{ 'Propriétaire' | trad }}</span>
                                    <span class="resultat">
                                        {{ model.NOM }}
                                        {% if(model.NOM) %}
                                            ({{ model.CODE_PROPRIO }})
                                        {% endif %}
                                    </span>
                                </p>
                                {% if typeObjet=='D' %}
                            	    <p>
                                    	<span class="champs_label">{{ 'Opération' | trad }}</span>
                                        <span class="resultat">{{ model.CODE_OPE }}</span>
                                    </p>
                            	    <p>
                                    	<span class="champs_label">{{ 'Date fin prévue' | trad }}</span>
                                        <span class="resultat">{{ model.DATE_FIN | dateTrad }}</span>
                                    </p>
                            	    <p>
                                    	<span class="champs_label">{{ 'Centre émetteur' | trad }}</span>
                                        <span class="resultat">{{ convertLibelleGlobal('Centre', '', model.CTR_EMETT, true) }}</span>
                                    </p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {{ VisualisationCS('DOA', str_pad(model.ID, 9, 0, 'STR_PAD_LEFT'), null, false, 'colonne2 last') }}
            	</details>
				
                <div>
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist" id="tablist">
                    	{% if typeObjet=='M' or (typeObjet=='D' and statut != 'I') %}
                        	<li id="ongletdata" role="presentation" class="perma"><a href="#data" aria-controls="data" role="tab" data-toggle="tab">{{ 'Données' | trad }}</a></li>
                        	<li id="onglettasks" role="presentation" class="perma"><a href="#tasks" aria-controls="tasks" role="tab" data-toggle="tab">{{ 'Tâches' | trad }} </a></li>
                        {% endif %}
                        {% if typeObjet=='D' %}
                        	{% if typeObjet=='M' or (typeObjet=='D' and statut != 'I') %}
                        		<li id="ongletplanning" role="planning" class="perma"><a href="#planning" aria-controls="planning" role="tab" data-toggle="tab">{{ 'Planning' | trad }}</a></li>
                        	{% endif %}
                        	{% if droit.DOA_DOC_VI or getAll() %}
                        		<li id="ongletdocument" role="document" class="perma"><a href="#document" aria-controls="document" role="tab" data-toggle="tab">{{ 'Documents' | trad }}</a></li>
                        	{% endif %}
                        {% endif %}
                        <li id="ongletcompanies" role="presentation" class="perma"><a href="#companies" aria-controls="companies" role="tab" data-toggle="tab">{{ 'Sociétés' | trad }}</a></li>
                        <li id="ongletsubjectsElements" role="presentation" class="perma"><a href="#subjectsElements" aria-controls="subjectsElements" role="tab" data-toggle="tab">{{ 'Eléments concernés' | trad }} </a></li>
                        {% if model.IS_PERE | boolSql or model.ID_PERE != '0' %}
                        	<li id="ongletfamille" role="presentation" class="perma"><a href="#familles" aria-controls="familles" role="tab" data-toggle="tab">{{ (model.IS_PERE | boolSql)? 'Liste projets fils' | trad:'Liste projets liés' | trad }}</a></li>
                        {% endif %}
                        <li id="onglet_DivModulable" style="display:none"><a data-toggle="tab" aria-controls="divModulable" href="#DivModulable" class="ephemere"></a></li>
                        <li id="onglet_DivModulable2" style="display:none"><a data-toggle="tab" aria-controls="divModulable2" href="#DivModulable2" class="ephemere"></a></li>
                        <li id="onglet_DivModulable3" style="display:none"><a data-toggle="tab" aria-controls="divModulable3" href="#DivModulable3" class="ephemere"></a></li>
                        <li id="liAddHierarchy" role="presentation" style="display: none"><a href="#divAddHierarchy" aria-controls="divAddHierarchy" role="tab" data-toggle="tab">{{ 'Ajout catégorie de tâche' | trad }} </a></li>
                    </ul>
            
                    <!-- Tab panes -->
                    <div class="tab-content">
                    
    					<div id="DivModulable" class="tab-pane fade clearfix box-form">
    					</div>
    					
    					<div id="DivModulable2" class="tab-pane fade clearfix box-form">
    					</div>
    		
    					<div id="DivModulable3" class="tab-pane fade clearfix box-form">
    					</div>
                    
                        <div role="tabpanel" class="tab-pane" id="data">
                            {% include '@projetAchat/ProjetAchat/tabs/donnees.twig' %}
                        </div>
                        <div role="tabpanel" class="tab-pane" id="planning">
                        	{% include '@projetAchat/ProjetAchat/tabs/planning.twig' %}
                        </div>
                        <div role="tabpanel" class="tab-pane" id="document">
                        	{% include '@projetAchat/ProjetAchat/tabs/document.twig' %}
                        </div>
                        <div role="tabpanel" class="tab-pane" id="tasks">
                            {% include '@projetAchat/ProjetAchat/tabs/taches.twig' %}
                        </div>
                        <div role="tabpanel" class="tab-pane" id="companies">
                            {% include '@projetAchat/ProjetAchat/tabs/societes.twig' %}
                        </div>
                        <div role="tabpanel" class="tab-pane" id="subjectsElements">
                            {% include '@projetAchat/ProjetAchat/tabs/elements_concernes.twig' %}
                        </div>
                        <div role="tabpanel" class="tab-pane" id="familles">
                        	{% include '@projetAchat/ProjetAchat/tabs/listFamily.twig' %}
                        </div>
                        <div role="tabpanel" class="tab-pane" id="divAddHierarchy">
                            {% include '@projetAchat/ProjetAchat/tabs/add_hierarchy.twig' %}
                        </div>
                    </div>
            
                </div>
            	
        	</div>
    	</div>
        
    </div>
    <script>

    	{% if post.onglet == 'data' %}
    		$(document).ready(function(){
    			setTimeout(function(){$('#treeview #{{ post.id }}_anchor').trigger( "click" );},100); 
    		});
    	{% endif %}

    	{% if post.onglet == 'tasks' %}
    		$(document).ready(function(){
				setTimeout(function(){$('#treeviewH #{{ post.id }}_anchor').trigger( "click" );},100); 
    		});
    	{% endif %}

		function triggerTab(tab)
		{
			$("a[aria-controls="+tab+"]").trigger('click');
		}

    	$( document ).ready(function() {
    		{% if post.onglet != '' %}
    			$('#{{ post.onglet }}').addClass('active');
    			$('#onglet{{ post.onglet }}').addClass('active');
    		{% else %}
        		{% if typeObjet=='M' %}
        			$('#data').addClass('active');
        			$('#ongletdata').addClass('active');
        		{% endif %}
        		
        		{% if typeObjet=='D' and statut != 'I' %}
        			$('#planning').addClass('active');
        			$('#ongletplanning').addClass('active');
        		{% endif %}
        		
        		{% if typeObjet=='D' and statut == 'I' %}
        			$('#document').addClass('active');
        			$('#ongletdocument').addClass('active');
    		    {% endif %}
    		{% endif %}
    	});
    
		function generateTab(path, titre, div, idDiv)
		{
			if(typeof idDiv == 'undefined')
			{
				idDiv = '';
			}
			
			activeLoader();
        	$('#onglet_DivModulable'+idDiv).show();
        	$('#onglet_DivModulable'+idDiv).find('a').html(titre);
        	$('#onglet_DivModulable'+idDiv).find('a').trigger('click');

        	$.ajax({
    		  	dataType : 'html',
        		url: path,
        		type: "POST",
        		success: function(htmlData){
        			var result = $('<div />').append(htmlData).find('#'+div).html();
        			$('#DivModulable'+idDiv).html(result);
        			desactiveLoader();
        		},
    		});
		}
    
        let clicked = false;

        function AfficheMenuTop() {
            clicked = !clicked
            event.stopPropagation();
            $('.ss_params').toggle();

            if(clicked) {
                setTimeout(function () {
                    $('.ss_params').toggle();
                }, 5000)
            }
        }
        
        $('.perma').click(function(){
    		$('#liAddHierarchy').hide();

    		$('#onglet_DivModulable').hide();
    		$('#DivModulable').html('');
    		
    		$('#onglet_DivModulable2').hide();
    		$('#DivModulable2').html('');
    		
    		$('#onglet_DivModulable3').hide();
    		$('#DivModulable3').html('');
        });
        
        $('#onglet_DivModulable').click(function(){
    		$('#onglet_DivModulable2').hide();
    		$('#DivModulable2').html('');
    		
    		$('#onglet_DivModulable3').hide();
    		$('#DivModulable3').html('');
        });
        
        $('#onglet_DivModulable2').click(function(){
    		$('#onglet_DivModulable3').hide();
    		$('#DivModulable3').html('');
        });

		function displayConfirmationAjournerPopup(path)
		{
			activeLoader();
			$.ajax({
				url: path,
				type: 'POST',
				success: function(result) {
					desactiveLoader();
					$('#modal-content').addClass("modal_small");
					$('#modal-body').html(result);
					activePopup();
				}
			});
		}
    </script>

    <style>
        .block_edition .colonne2 {
        	margin: 0%;
        }
        .panel {
            margin-top: 30px;
        }
        .contain p {
            font-size: 15px;
        }
        .contain {
            padding-top: 40px;
        }
        .contain .row {
            padding-bottom: 18px;
        }
        .divTabs {
            margin-top: 30px;
        }
        p.value {
            font-weight: bold;
        }
    </style>


{% endblock %}