{% extends 'basev2.html.twig' %}

{% block stylesheets %}
<style type="text/css">
    .myDivIcon {
  		text-align: center; /* Horizontally center the text (icon) */
  		line-height: 20px; /* Vertically center the text (icon) */
	}
	.mynode {
		border: 0px;
		background-color: #bfdbf7;
	}
</style>
{% endblock %}

{% block headertitle %}
   Référentiels des assets
{% endblock %}	
{% block headercreate %}
	<div class="btn-group dropleft buttonnew" role="group">
		<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
			<strong>Créer</strong>
		</button>
		<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
			<a class="dropdown-item dropdowncreate" href="{{path('metier_create',{'r' : app.request.get('_route'), 'rr' : conformite } )}}"><b class="bi bi-plus-circle" style="font-size: 1.2rem;"></b> Métier / Fonction</a>
			<a class="dropdown-item dropdowncreate" href="{{path('people_create',{'r' : app.request.get('_route'), 'rr' : conformite } )}}"><b class="bi bi-plus-circle" style="font-size: 1.2rem;"></b> Collaborateur</a>
			<a class="dropdown-item dropdowncreate" href="{{path('site_create',{'r' : app.request.get('_route'), 'rr' : conformite } )}}"><b class="bi bi-plus-circle" style="font-size: 1.2rem;"></b> Site</a>
			<a class="dropdown-item dropdowncreate" href="{{path('tier_create',{'r' : app.request.get('_route'), 'rr' : conformite } )}}"><b class="bi bi-plus-circle" style="font-size: 1.2rem;"></b> Tier</a>
			<a class="dropdown-item dropdowncreate" href="{{path('ressource_create',{'r' : app.request.get('_route'), 'rr' : conformite } )}}"><b class="bi bi-plus-circle" style="font-size: 1.2rem;"></b> Ressource</a>
		</div>
	</div>
{% endblock %}


{% block body %}
<div class="wrapper wrapper-content animated fadeIn">
	<div class="row">
		<div class="col-lg-12">
			<div class="tabs-container">
				<ul class="nav nav-tabs" role="tablist">
					<li><a class="nav-link active show" data-toggle="tab" href="#org"> Organigramme</a></li>
					<li><a class="nav-link" data-toggle="tab" href="#metiers">Métiers / Fonctions <span class="badge">{{ metiers | length }}</span></a></li>
					<li><a class="nav-link" data-toggle="tab" href="#collaborateurs"> Collaborateurs <span class="badge">{{ peoples | length }}</span></a></li>
					<li><a class="nav-link" data-toggle="tab" href="#sites"> Sites <span class="badge">{{ sites | length }}</span></a></li>
					<li><a class="nav-link" data-toggle="tab" href="#tiers"> Tiers <span class="badge">{{ tiers | length }}</span></a></li>
					<li><a class="nav-link" data-toggle="tab" href="#ressources"> Ressources <span class="badge">{{ ressources | length }}</span></a></li>
					<li><a class="nav-link" data-toggle="tab" href="#files"> Documents</a></li>
				</ul>
				<div class="tab-content">
					<div id="org" class="tab-pane active show">
						<div class="panel-body">
							<div class="row">
								<div class="col-lg-12">
									<div id="orgchart"></div>
																
								</div>
							</div>
						</div>
					</div>
					
					<div id="metiers" class="tab-pane">
						<div class="panel-body">
							<div class="row">
								<div class="col-lg-12">
									
									{{ include('datatable/metiertable.html.twig', {r : app.request.get('_route'), rr : conformite }) }}
									
								</div>
							</div>
						</div>
					</div>
					<div id="collaborateurs" class="tab-pane">
						<div class="panel-body">
							<div class="row">
								<div class="col-lg-12">
									{{ include('datatable/peopletable.html.twig', {r : app.request.get('_route'), rr : conformite }) }}									
								</div>
							</div>
						</div>
					</div>
					<div id="sites" class="tab-pane">
						<div class="panel-body">
	                        <div class="row">
								<div class="col-lg-12">
									{{ include('datatable/sitetable.html.twig', {r : app.request.get('_route'), rr : conformite }) }}
								</div>
							</div>
						</div>
					</div>
					<div id="tiers" class="tab-pane">
						<div class="panel-body">
							<div class="row">
								<div class="col-lg-12">
									{{ include('datatable/tiertable.html.twig', {r : app.request.get('_route'), rr : conformite }) }}
								</div>
							</div>
						</div>
					</div>
					<div id="ressources" class="tab-pane">
						<div class="panel-body">
							<div class="row">
								<div class="col-lg-12">
									{{ include('datatable/ressourcetable.html.twig', {r : app.request.get('_route'), rr : conformite }) }}
								</div>
							</div>
						</div>
					</div>
				
					<div id="files" class="tab-pane">
						<div class="panel-body">		                                
							<div class="row">				
								<div class="col-sm-12">
									<iframe id="myframe" src="{{ path('file_manager', {module:1, conf:'entity', tree:0, extra: {'customer':app.user.customer.id, 'bigentity': 'Asset'}}) }}" width="100%" height="500" frameborder="0"></iframe>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}

{% block javascripts %}
    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function(){
	        
	        $('a.del').confirm({
			    title: 'Attention',
			    content: 'Voulez vous vraiment supprimer cet asset ?',
			    buttons: {
			        supprimer: function () {
			           location.href = this.$target.attr('href');
			        },
			        annuler: function () {
			        }    
			    }
			});

			

			

	        
            $('.dataTables-metier').DataTable({
                pageLength: 25,
                responsive: false,
                stateSave: true,
				info:     false,
                dom: '<"html5buttons"B>Tfgitlp',
                columnDefs: [ 
                { targets: 'no-sort', orderable: false },
                { targets: 'no-show-metier',visible: false, searchable: false	},
	             ],
                buttons: [
                    {extend: 'excel', title: 'ExampleFile'},
                    {extend: 'pdf', title: 'ExampleFile'},

                    {extend: 'print',
                     customize: function (win){
                            $(win.document.body).addClass('white-bg');
                            $(win.document.body).css('font-size', '10px');

                            $(win.document.body).find('table')
                                    .addClass('compact')
                                    .css('font-size', 'inherit');
                    }
                    }
                ],
                language: {
	                 "decimal":        "",
					    "emptyTable":     "Pas de données disponibles",
					    "info":           "De _START_ à _END_ sur _TOTAL_",
					    "infoEmpty":      "De 0 à 0 sur 0 activités",
					    "infoFiltered":   "(filtrée sur _MAX_ au total)",
					    "infoPostFix":    "",
					    "thousands":      ",",
					    "lengthMenu":     "Afficher _MENU_",
					    "loadingRecords": "Loading...",
					    "processing":     "Processing...",
					    "search":         "Rechercher :",
					    "zeroRecords":    "Pas de résultat pour cette recherche",
					    "paginate": {
					        "first":      "Premier",
					        "last":       "Dernier",
					        "next":       "Suivant",
					        "previous":   "Précédent"
					    },
					    "aria": {
					        "sortAscending":  ": Tri montant",
					        "sortDescending": ": Tri descendant"
					    }
		        }

            });

			$('.dataTables-people').DataTable({
                pageLength: 25,
                responsive: false,
                stateSave: true,
				info:     false,
                dom: '<"html5buttons"B>Tfgitlp',
                columnDefs: [ 
                { targets: 'no-sort', orderable: false },
                { targets: 'no-show-metier',visible: false, searchable: false	},
	             ],
                buttons: [
                    {extend: 'excel', title: 'Référentiel des collaborateurs'},
                    {extend: 'pdf', title: 'Référentiel des collaborateurs'},

                    {extend: 'print',
                     customize: function (win){
                            $(win.document.body).addClass('white-bg');
                            $(win.document.body).css('font-size', '10px');

                            $(win.document.body).find('table')
                                    .addClass('compact')
                                    .css('font-size', 'inherit');
                    }
                    }
                ],
                language: {
	                 "decimal":        "",
					    "emptyTable":     "Pas de données disponibles",
					    "info":           "De _START_ à _END_ sur _TOTAL_",
					    "infoEmpty":      "De 0 à 0 sur 0 activités",
					    "infoFiltered":   "(filtrée sur _MAX_ au total)",
					    "infoPostFix":    "",
					    "thousands":      ",",
					    "lengthMenu":     "Afficher _MENU_",
					    "loadingRecords": "Loading...",
					    "processing":     "Processing...",
					    "search":         "Rechercher :",
					    "zeroRecords":    "Pas de résultat pour cette recherche",
					    "paginate": {
					        "first":      "Premier",
					        "last":       "Dernier",
					        "next":       "Suivant",
					        "previous":   "Précédent"
					    },
					    "aria": {
					        "sortAscending":  ": Tri montant",
					        "sortDescending": ": Tri descendant"
					    }
		        }

            });

			$('.dataTables-site').DataTable({
				pageLength: 25,
				responsive: false,
				info:     false,
				dom: '<"html5buttons"B>Tfgitlp',
				columnDefs: [ 
				{ targets: 'no-sort', orderable: false },
				{ targets: 'no-show-metier',visible: false, searchable: false	},
				],
				buttons: [
					{extend: 'excel', title: 'ExampleFile'},
					{extend: 'pdf', title: 'ExampleFile'},

					{extend: 'print',
					customize: function (win){
							$(win.document.body).addClass('white-bg');
							$(win.document.body).css('font-size', '10px');

							$(win.document.body).find('table')
									.addClass('compact')
									.css('font-size', 'inherit');
					}
					}
				],
				language: {
					"decimal":        "",
						"emptyTable":     "Pas de données disponibles",
						"info":           "De _START_ à _END_ sur _TOTAL_",
						"infoEmpty":      "De 0 à 0 sur 0 activités",
						"infoFiltered":   "(filtrée sur _MAX_ au total)",
						"infoPostFix":    "",
						"thousands":      ",",
						"lengthMenu":     "Afficher _MENU_",
						"loadingRecords": "Loading...",
						"processing":     "Processing...",
						"search":         "Rechercher :",
						"zeroRecords":    "Pas de résultat pour cette recherche",
						"paginate": {
							"first":      "Premier",
							"last":       "Dernier",
							"next":       "Suivant",
							"previous":   "Précédent"
						},
						"aria": {
							"sortAscending":  ": Tri montant",
							"sortDescending": ": Tri descendant"
						}
				}

			});
			$('.dataTables-tier').DataTable({
                pageLength: 25,
                responsive: false,
                stateSave: true,
				info:     false,
                dom: '<"html5buttons"B>Tfgitlp',
                columnDefs: [ 
                { targets: 'no-sort', orderable: false },
                { targets: 'no-show-action',visible: false, searchable: false	},
	             ],
                buttons: [
                    {extend: 'excel', title: 'MAPSI-Tiers'},
                    {extend: 'pdf', title: 'MAPSI-Tiers'},

                    {extend: 'print',
                     customize: function (win){
                            $(win.document.body).addClass('white-bg');
                            $(win.document.body).css('font-size', '10px');

                            $(win.document.body).find('table')
                                    .addClass('compact')
                                    .css('font-size', 'inherit');
                    }
                    }
                ],
                language: {
	                 "decimal":        "",
					    "emptyTable":     "Pas de données disponibles",
					    "info":           "De _START_ à _END_ sur _TOTAL_",
					    "infoEmpty":      "De 0 à 0 sur 0 activités",
					    "infoFiltered":   "(filtrée sur _MAX_ au total)",
					    "infoPostFix":    "",
					    "thousands":      ",",
					    "lengthMenu":     "Afficher _MENU_",
					    "loadingRecords": "Loading...",
					    "processing":     "Processing...",
					    "search":         "Rechercher :",
					    "zeroRecords":    "Pas de résultat pour cette recherche",
					    "paginate": {
					        "first":      "Premier",
					        "last":       "Dernier",
					        "next":       "Suivant",
					        "previous":   "Précédent"
					    },
					    "aria": {
					        "sortAscending":  ": Tri montant",
					        "sortDescending": ": Tri descendant"
					    }
		        }

            });

			$('.dataTables-ressource').DataTable({
                pageLength: 50,
                responsive: false,
                stateSave: true,
				info:     false,
                columnDefs: [ 
                { targets: 'no-sort', orderable: false },
                { targets: 'no-show-action',visible: false, searchable: false	},
	             ],
                dom: '<"html5buttons"B>Tfgitlp',
                buttons: [
                    {extend: 'excel', title: 'Ressources'},
                    {extend: 'pdf', title: 'Ressources'},

                    {extend: 'print',
                     customize: function (win){
                            $(win.document.body).addClass('white-bg');
                            $(win.document.body).css('font-size', '10px');

                            $(win.document.body).find('table')
                                    .addClass('compact')
                                    .css('font-size', 'inherit');
                    }
                    }
                ],
                language: {
	                 "decimal":        "",
					    "emptyTable":     "Pas de données disponibles",
					    "info":           "De _START_ à _END_ sur _TOTAL_",
					    "infoEmpty":      "De 0 à 0 sur 0 activités",
					    "infoFiltered":   "(filtrée sur _MAX_ au total)",
					    "infoPostFix":    "",
					    "thousands":      ",",
					    "lengthMenu":     "Afficher _MENU_",
					    "loadingRecords": "Loading...",
					    "processing":     "Processing...",
					    "search":         "Rechercher :",
					    "zeroRecords":    "Pas de résultat pour cette recherche",
					    "paginate": {
					        "first":      "Premier",
					        "last":       "Dernier",
					        "next":       "Suivant",
					        "previous":   "Précédent"
					    },
					    "aria": {
					        "sortAscending":  ": Tri montant",
					        "sortDescending": ": Tri descendant"
					    }
		        }

            });

        });




		//////////////////////////orgchart

		google.charts.load('current', {packages:["orgchart"]});
			google.charts.setOnLoadCallback(drawChart);
			function drawChart() {
				var data = new google.visualization.DataTable();
				data.addColumn('string', 'Name');
				data.addColumn('string', 'Manager');
				data.addColumn('string', 'ToolTip');

				data.addRows([
					{% for people in peoples %}
					[{'v':'{{ people.id }}', 'f':'{{ people.firstname }} {{ people.lastname }}'}, '{% if people.n1.id is defined and people.n1.id is not null %}{{ people.n1.id }}{% endif %}', '{{ people.role }}'],
					{% endfor %}
				]);
				
				var chart = new google.visualization.OrgChart(document.getElementById('orgchart'));
				chart.draw(data,  {'allowHtml':true, 'size':'medium', 'allowCollapse':true, 'nodeClass': 'mynode'});
			}


			

		/// Save tab state
		if (location.hash) {
		  $('a[href=\'' + location.hash + '\']').tab('show');
		}
		var activeTab = localStorage.getItem('activeTab');
		if (activeTab) {
		  $('a[href="' + activeTab + '"]').tab('show');
		}
		
		$('body').on('click', 'a[data-toggle=\'tab\']', function (e) {
		  e.preventDefault()
		  var tab_name = this.getAttribute('href')
		  if (history.pushState) {
		    history.pushState(null, null, tab_name)
		  }
		  else {
		    location.hash = tab_name
		  }
		  localStorage.setItem('activeTab', tab_name)
		
		  $(this).tab('show');
		  return false;
		});
		$(window).on('popstate', function () {
		  var anchor = location.hash ||
		    $('a[data-toggle=\'tab\']').first().attr('href');
		  $('a[href=\'' + anchor + '\']').tab('show');
		});

    </script>
{% endblock %}