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

{% block stylesheets %}
	<style type="text/css">

    </style>
{% endblock %}

{% block title %}ENVIRONNEMENT MAPSI{% endblock %}

{% block headertitle %}
    Système de management environnemental
{% 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('objectif_create',{'r' : app.request.get('_route'), 'rr' : conformite })}}"><b class="bi bi-plus-circle" style="font-size: 1.2rem;"></b>  Objectif</a>
			<a class="dropdown-item dropdowncreate" href="{{path('aspectenv_create',{'r' : app.request.get('_route'), 'rr' : conformite })}}"><b class="bi bi-plus-circle" style="font-size: 1.2rem;"></b>  Aspect env.</a>
			<a class="dropdown-item dropdowncreate" href="{{path('audit_create',{'r' : app.request.get('_route'), 'rr' : conformite })}}"><b class="bi bi-plus-circle" style="font-size: 1.2rem;"></b>  Audit</a>
			<a class="dropdown-item dropdowncreate" href="{{path('action_create',{'r' : app.request.get('_route'), 'rr' : conformite })}}"><b class="bi bi-plus-circle" style="font-size: 1.2rem;"></b>  Action</a>
			<a class="dropdown-item dropdowncreate" href="{{path('dysfonctionnement_create', {'r' : app.request.get('_route'), 'rr' : conformite })}}"><b class="bi bi-plus-circle" style="font-size: 1.2rem;"></b>  Dysfonctionnement </a>
			<a class="dropdown-item dropdowncreate" href="{{path('reclamation_create', {'r' : app.request.get('_route'), 'rr' : conformite })}}"><b class="bi bi-plus-circle" style="font-size: 1.2rem;"></b>  Réclamation </a>
			<a class="dropdown-item dropdowncreate" href="{{path('visite_create', {'r' : app.request.get('_route'), 'rr' : conformite })}}"><b class="bi bi-plus-circle" style="font-size: 1.2rem;"></b>  Visite </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="#dashboard"> <i class="bi bi-speedometer" style="font-size: 0.8rem;"></i> </a></li>
						<li><a class="nav-link" data-toggle="tab" href="#objectif"> Objectifs <span class="badge">{{ objectifs | length }}</span></a></li>
						<li><a class="nav-link" data-toggle="tab" href="#aes"> AES <span class="badge">{{ aspectenvs | length }}</span></a></li>
						<li><a class="nav-link" data-toggle="tab" href="#visite"> Visites <span class="badge">{{ visites | length }}</span></a></li>
						<li><a class="nav-link" data-toggle="tab" href="#dysfonctionnement"> Dysfonctionnements <span class="badge">{{ dysfonctionnements | length }}</span></a></li>
						<li><a class="nav-link" data-toggle="tab" href="#reclamation"> Réclamations <span class="badge">{{ reclamations | length }}</span></a></li>
						<li><a class="nav-link" data-toggle="tab" href="#audit"> Audits <span class="badge">{{ audits | length }}</span></a></li>
						<li><a class="nav-link" data-toggle="tab" href="#action"><i class="bi bi-list-task" style="font-size: 0.8rem;"></i><span class="badge"> {{ actions | length }}</span></a></li>
						<li><a class="nav-link" data-toggle="tab" href="#files"><i class="bi bi-files" style="font-size: 0.8rem;"></i></a></li>
					</ul>				
					<div class="tab-content">
						<div role="tabpanel" id="dashboard" class="tab-pane active show">
							<div class="panel-body">
								<div class="row">
									<div class="col-lg-12">
									<h2>Indicateurs environnementaux 2021</h2>
										<div class="row">
											<div class="col-lg-8">
												<div class="card">
													<div class="card-body">
														<h4 class="card-title">Tracking</h4>
														<h6 class="card-subtitle mb-2 text-muted">Evènements Environnement</h6>
														<div class="card-text">
															<canvas id="myTracking" height="80"></canvas>
															
														</div>
													</div>
												</div>
											</div>
											<div class="col-lg-4">
												<div class="card">
													<div class="card-body">
														<h4 class="card-title">Tracking</h4>
														<h6 class="card-subtitle mb-2 text-muted">Suivi des objectifs</h6>
														<div class="card-text">
															<table class="table table-hover no-margins">
																{% for objectif in objectifs %}
																<tr>
																	<td class="table-title"><a class="" href="{{path('objectif_edit',{'slug' : objectif.slug, 'id' : objectif.id, 'r' : app.request.get('_route'), 'rr' : conformite} ) }}">{{ objectif.designation }}</a></td>
																	<td>
																	{% for indicateur in objectif.indicateurs | sortbyfield('PublishedAt') | slice(0, 1)  if indicateur.PublishedAt is not null %}
																			<strong>{{ indicateur.valeur }} {{ objectif.type }}</strong> <small>(Cible {{ objectif.valeurcible }})</small>
																	{% endfor %}<br>
																	<span class="line">{% for indicateur in objectif.indicateurs | sortbyfield('PublishedAt') %}{{ indicateur.valeur }}{% if loop.last == false  %},{% endif%}{% endfor %}</span>
																	</td>
																</tr>
																{% endfor %}
																</tbody>
															</table>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-lg-8">
												<div class="card">
													<div class="card-body">
														<h4 class="card-title">PLANNING</h4>
														<h6 class="card-subtitle mb-2 text-muted">Audits et événements environementaux</h6>
														<div class="card-text text-center">
															<div id="planningaudit"></div>
															
														</div>
													</div>
												</div>
											</div>
											<div class="col-lg-4">
												<div class="card">
													<div class="card-body">
														<h4 class="card-title">AES</h4>
														<h6 class="card-subtitle mb-2 text-muted">Aspects environementaux significatifs</h6>
														<div class="card-text">
															<table class="table table-hover no-margins">
																{% for aes in aspectenvs %}
																<tr>
																	<td class="table-title"><a class="" href="{{path('aspectenv_edit',{'slug' : aes.slug, 'id' : aes.id, 'r' : app.request.get('_route'), 'rr' : conformite} ) }}">{{ aes.designation }}</a></td>
																	<td class="text-center">
																		<strong><span class="badge scoreaes">{{ aes.criticite | default("")  }}</span></strong>
																	</td>
																</tr>
																{% endfor %}
																</tbody>
															</table>
														</div>
														<div class="hr-line-dashed"></div>
														<canvas id="myCharttypeaes"></canvas>
													</div>
												</div>
											</div>
										</div>
										<div class="row">
											<div class="col-lg-8">
												<div class="card">
													<div class="card-body">
														<h4 class="card-title">PLAN DE MISE EN CONFORMITE</h4>
														<h6 class="card-subtitle mb-2 text-muted">Suivi des actions</h6>
														<div class="card-text">
															{{ include('datatable/actionminitable.html.twig', {r : app.request.get('_route'), rr : conformite }) }}
															
														</div>
													</div>
												</div>
											</div>
										</div>
										{# <div class="row">
											<div class="col-lg-6">
												<div class="card">
													<div class="card-body">
														<h4 class="card-title">PLAN DE MISE EN CONFORMITE</h4>
														<h6 class="card-subtitle mb-2 text-muted">Suivi des actions</h6>
														<div class="card-text">
															{{ app.user.customer.designation }} CONTEXTE<br>
															Tableaux de bord environnementale<br>
															Contexte de l'entreprise, définition des enjeux internes et externes, identification des partis interessés<br>
															Cartographie des processus avec des indicateurs supplementaires de performance envinementale<br>
															Gestion de projet Programme, plan d'action SME avec suivi budgétaire<br>
															Gestion ds risques<br>
															Rôles et responsabilités<br>
															Politique Environementale<br>
															Liste des aspects environementaux et des impacts AES (Activités, domaine, site, impact en situation normale, anormale ou d'urgence)(Gravité, fréquence, sensibilité, avant maitrise maitrise finale) flag AES<br>
															Documentation et procédures opérationnelles et de test<br>
															Tracking des tests<br>
															Audits<br>
															Revue de direction (Résultats Audit, Planification)<br>
															Incidents<br>
															Problèmes<br>
															Réclamations<br>
														</div>
													</div>
												</div>
											</div>
										</div> #}
									</div>
								</div>
							</div>
						</div>
						<div id="objectif" role="tabpanel" class="tab-pane">
							<div class="panel-body">
								<div class="row">
									<div class="col-lg-12">
										{{ include('datatable/objectiftable.html.twig', {r : app.request.get('_route'), rr : conformite }) }}
									</div>
								</div>
							</div>
						</div>
						<div id="aes" role="tabpanel" class="tab-pane">
							<div class="panel-body">
								<div class="row">
									<div class="col-lg-12">
										{{ include('datatable/aspectenvtable.html.twig', {r : app.request.get('_route'), rr : conformite }) }}
									</div>
								</div>
							</div>
						</div>
						<div id="visite" role="tabpanel" class="tab-pane">
							<div class="panel-body">
								<div class="row">
									<div class="col-lg-12">
										{{ include('datatable/visitetable.html.twig', {r : app.request.get('_route'), rr : conformite }) }}
									</div>
								</div>
							</div>
						</div>
						<div id="dysfonctionnement" role="tabpanel" class="tab-pane">
							<div class="panel-body">
								<div class="row">
									<div class="col-lg-12">
										{{ include('datatable/dysfonctionnementtable.html.twig', {r : app.request.get('_route'), rr : conformite }) }}
									</div>
								</div>
							</div>
						</div>
						<div id="reclamation" role="tabpanel" class="tab-pane">
							<div class="panel-body">
								<div class="row">
									<div class="col-lg-12">
										{{ include('datatable/reclamationtable.html.twig', {r : app.request.get('_route'), rr : conformite }) }}
									</div>
								</div>
							</div>
						</div>
						<div id="audit" role="tabpanel" class="tab-pane">
							<div class="panel-body">
								<div class="row">
									<div class="col-lg-12">
										{{ include('datatable/audittable.html.twig', {r : app.request.get('_route'), rr : conformite }) }}
									</div>
								</div>
							</div>
						</div>
						<div id="action" role="tabpanel" class="tab-pane">
							<div class="panel-body">
								<div class="row">
									<div class="col-lg-12">
										{{ include('datatable/actiontable.html.twig', {r : app.request.get('_route'), rr : conformite }) }}
									</div>
								</div>
							</div>
						</div>
						<div id="files" role="tabpanel" class="tab-pane">
							<div class="panel-body">
								<div class="row">
									<div class="col-lg-12">
										<iframe id="myframe" src="{{ path('file_manager', {module:1, conf:'entity', tree:0, extra: {'customer':app.user.customer.id, 'bigentity': 'Environnement'}}) }}" width="100%" height="500" frameborder="0"></iframe>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}


{% block javascripts %}
<script>
	$(document).ready(function(){

		///////////// Graphique type aspect environnementaux
	var ctx = document.getElementById('myCharttypeaes').getContext('2d');
	var myChart = new Chart(ctx, {
	    type: 'doughnut',
	    data: {
	        labels: [{% for typeaes in typeaspectenvs if typeaes.aspectEnvs|length > 0 %}"{{ typeaes.designation }}",{% endfor %}],
	        datasets: [{
	            label: 'Occurences',
	            data: [{% for typeaes in typeaspectenvs if typeaes.aspectEnvs|length > 0  %}{{ typeaes.aspectEnvs|length }},{% endfor %}]
	      }]
	    },
	    options: {
		    plugins: {
					labels: [
						{
							render: 'value',
							fontSize: 15,
							fontStyle: 'bold',
							fontColor:'#fff',
						},
						{
							render: 'label',
							fontSize: 10,
							fontStyle: 'bold',
							position: 'outside',
						},
					],
					colorschemes: {
				        scheme: 'tableau.Classic10'
				      }
			    },
					legend: {
			            display: false,
			            position:'bottom'
			    }
	    }
	});


		///////////// GANTT

			// create a dataset with items
			// note that months are zero-based in the JavaScript Date object, so month 3 is April
			var items = new vis.DataSet([
			
					{% for audit in audits  %}
					  {
					    id: 'aud{{ audit.id }}',
					    content: "{{ audit.designation }}",
					    start: new Date({{audit.startedat|date_modify("-1 month")|date("Y, m, d")}}),
						type: "box",
						className: "orange",
					  },
					{% endfor %}
			]);
			// create visualization
			var container = document.getElementById("planningaudit");
			var options = {
			  editable: false,
			};

			var timeline = new vis.Timeline(container);
			timeline.setOptions(options);
			timeline.setItems(items);



		///////////// TRACKING RGPD
		var ctxi = document.getElementById('myTracking').getContext('2d');
		var myChart = new Chart(ctxi, {
			type: 'horizontalBar',
			data: {
				labels: ['Visites', 'Dysfonctionnements', 'Réclamations', 'Actions conformité'],
				datasets: [{
					label: 'En cours',
					data: [
						{% set visitecount = 0 %}{% for visite in visites if visite.statut is null or visite.statut == "" or visite.statut=="draft" %}{% set visitecount = visitecount + 1 %}{% endfor %}{{visitecount}},
						{% set dyscount = 0 %}{% for dysfonctionnement in dysfonctionnements if dysfonctionnement.statut is not null or dysfonctionnement.statut == "" or dysfonctionnement.statut =="draft" %}{% set dyscount = dyscount + 1 %}{% endfor %}{{dyscount}},
						{% set reccount = 0 %}{% for reclamation in reclamations if reclamation.statut is not null or reclamation.statut  == "" or reclamation.statut == "draft" %}{% set reccount = reccount + 1 %}{% endfor %}{{reccount}},
						{% if actions|length > 0 %}{% set count = 0 %}{% for action in actions if action.progression != 100 %}{% for typeconformit in action.typeconformite if typeconformit.designation == "Environnement" %}{% set count = count + 1 %}{% endfor %}{% endfor %}{{ count }}{% endif%}
					]
				}, {
					label: 'Terminé',
					data: [
						{% set visitecount = 0 %}{% for visite in visites if visite.statut is not null and visite.statut != ""  and visite.statut!="draft" %}{% set visitecount = visitecount + 1 %}{% endfor %}{{visitecount}},
						{% set dyscount = 0 %}{% for dysfonctionnement in dysfonctionnements if dysfonctionnement.statut is not null and dysfonctionnement.statut != "" and dysfonctionnement.statut !="draft" %}{% set dyscount = dyscount + 1 %}{% endfor %}{{dyscount}},
						{% set reccount = 0 %}{% for reclamation in reclamations if reclamation.statut is not null and reclamation.statut != "" and reclamation.statut != "draft" %}{% set reccount = reccount + 1 %}{% endfor %}{{reccount}},
						{% set count = 0 %}{% for action in actions if action.statut is not null and action.statut.code is defined and action.statut.code==1 %}{% for typeconformit in action.typeconformite if typeconformit.designation == "Environnement" %}{% set count = count + 1 %}{% endfor %}{% endfor %}{{ count }}
					]
				}]
			},
			options: {
				tooltips: {
				callbacks: {
					labelTextColor:function(tooltipItem, chart){
						return '#ffffff';
					}
				}
				},
				scales: {
					xAxes: [{
						stacked: true,
						ticks: {
							beginAtZero: true,
							min: 0,					
							// forces step size to be 5 units
							stepSize: 1 // <----- This prop sets the stepSize
							
						},
						scaleLabel: {
									display: true,
									labelString: 'Nb.'
								},
						gridLines: {
							display:false
									}
					}],
					yAxes: [{
						stacked: true, 
						gridLines: {
						display:false
									}
					}]
				},	
				plugins: {
						labels: [
							{
							render: 'value'
							}
						],
						colorschemes: {
							scheme: 'tableau.Tableau20'
						}
					},
						legend: {
							display: true,
							position:'bottom'
				}
			}
		}); 
		


		$(function () {

		$(".scoreaes").each(function(index){
			var score = parseInt($(this).text().trim());
			var classaes = '';
			if (!isNaN(score)) {
				if (score <= 99) {
					classaes = 'badge-primary';
				}
				if (score >= 101) {
					classaes = 'badge-danger';
				}
				$(this).addClass(classaes);
			}
			})
		});

		

        });

        /// 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 %}