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

{% form_theme formPeople  'bootstrap_4_layout.html.twig' %}

{% block stylesheets %}
	<style type="text/css">
            
        span.select2 {
		    display         : table;
		    table-layout    : fixed;
		    width           : 100% !important;
		}
    </style>
{% endblock %}


{% block header %}
	<div class="row wrapper border-bottom white-bg page-heading">
		<div class="col-sm-8">
			{% if editMode %}
			<h2>Fiche collaborateur</h2>
			{% else %}
			<h2>Créer une nouveau collaborateur</h2>
			{% endif %} 
			<ol class="breadcrumb">
				<li class="breadcrumb-item">
					<a href="{{path('start')}}">Organisation</a>
				</li>
				<li class="breadcrumb-item active">
					<strong><a href="{{path('asset_list')}}">Assets</a></strong>
				</li>
				{% if editMode %}
				
				{% else %}
				<li class="breadcrumb-item active">
					<strong><a>Nouveau collaborateur</a></strong>
				</li>
				{% endif %}
			</ol>
		</div>
		<div class="col-sm-4">
			<div class="title-action">
				
			</div>
		</div>
	</div>
{% endblock %}


{% block body %}
	{% if editMode %}
	<div class="row">
        <div class="col-lg-12">
			<div class="ibox">
				<div class="ibox-title">
					<div class="col-md-12">
						<div class="profile-image">
							<i class="fa fa-user-circle-o fa-5x" aria-hidden="true"></i>
						</div>
						<div class="profile-info">
							<div class="">
								<div>
									<h2 class="no-margins">
										{{ people.firstname | capitalize }} {{ people.lastname | capitalize }}
									</h2>
									<h4>{{ people.role| default("") }}</h4>
									<small>
										{{ people.metier.designation | default("Le métier n\'est pas défini") }}
									</small>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="ibox-content">
					<div class="row">
						<div class="col-lg-4">
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>N+1 :</dt>
								</div>
								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">
										{{ people.n1.firstname | default("N/C") }} {{ people.n1.lastname | default("N/C") }}
									</dd>
								</div>
							</dl>
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>Utilisateur MAPSI :</dt>
								</div>
								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">
										{{ people.user.email| default("N/C") }}
									</dd>
								</div>
							</dl>
							{% if app.user.people is defined and app.user.customer.people is not null and app.user.customer.people == people %}
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>Utilisateur MAPSI :</dt>
								</div>

								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">
										{{ people.user.email| default("N/C") }}
									</dd>
								</div>
							</dl>
							{% endif %}
							{% if app.user.customer.responsable.id is defined and app.user.customer.responsable.id is not null and app.user.customer.responsable.id == people.id %}
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>Représentant légale :</dt>
								</div>
								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">
										Oui
									</dd>
								</div>
							</dl>
							{% endif %}
							{% if app.user.customer.rse.id is defined and app.user.customer.rse.id is not null and app.user.customer.rse.id == people.id %}
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>Délégué du personnel :</dt>
								</div>
								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">
										Oui
									</dd>
								</div>
							</dl>
							{% endif %}
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>Activités :</dt>
								</div>
								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">{{ activites|length|default("N/C") }}</dd>
								</div>
							</dl>
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>Processus :</dt>
								</div>
								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">{{ people.processusesresponsable|length|default("N/C") }}</dd>
								</div>
							</dl>
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>Flux :</dt>
								</div>
								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">{{ people.fluxsresponsable|length|default("N/C") }}</dd>
								</div>
							</dl>
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>Applications :</dt>
								</div>
								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">{{ people.applicationsresponsable|length|default("N/C") }}</dd>
								</div>
							</dl>
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>Systèmes :</dt>
								</div>
								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">{{ people.systemesresponsable|length|default("N/C") }}</dd>
								</div>
							</dl>
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>Sites :</dt>
								</div>
								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">{{ people.sitesresponsable|length|default("N/C") }}</dd>
								</div>
							</dl>
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>Programmes :</dt>
								</div>
								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">{{ people.programs|length|default("N/C") }}</dd>
								</div>
							</dl>
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>Projets :</dt>
								</div>
								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">{{ people.projets|length|default("N/C") }}</dd>
								</div>
							</dl>
							<dl class="row mb-0">
								<div class="col-sm-4 text-sm-right">
									<dt>Actions :</dt>
								</div>
								<div class="col-sm-8 text-sm-left">
									<dd class="mb-1">{{ people.actionsresponsable|length|default("N/C") }}</dd>
								</div>
							</dl>
						</div>
						<div class="col-lg-8" id="cluster_info">
							<div id='calendar'></div>
						</div>
						
					</div>
				</div>
    		</div>
    	</div>
    </div>
	{% endif %}
    {{ form_start(formPeople) }}	
 	<div class="row">
        <div class="col-lg-12">
	        <div class="ibox" id="printed">
	            <div class="ibox-content">
					<div class="row">
						<div class="col-lg-12">
                            <div class="m-b-md">
                                <span class="float-right">
				                    <button type='button'  class="btn btn-white btn-sm" data-target="{{path('asset_list')}}"  data-action="leave">Quitter</button>
				                    {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_USER_EDITABLE')%}
									<button type='submit' class="btn btn-primary">
									{% if editMode %}
									Enregistrer
									{% else %}
									Ajouter
									{% endif %}
									</button>
									{% endif %}
			                    </span>
								<h2>
									{% if not editMode %}
										Nouvelle fiche
									{% endif %}
								</h2>
                            </div>
                        </div>
					</div>
		            <div class="row">
						<div class="col-lg-12">
		            		<div class="tabs-container">
		                        <ul class="nav nav-tabs">
		                            <li><a class="nav-link active show" data-toggle="tab" href="#tab-info"> 
				                            <span style="font-size: 18px;">
												<i class="fa fa-info-circle"></i>
											</span>
										</a>
									</li>
									{% if editMode %}
		                            <li>
		                            	<a class="nav-link" data-toggle="tab" href="#tab-files"> 
				                            <span style="font-size: 18px;">
												<i class="fa fa-files-o"></i>
											</span>
										</a>
									</li>
									{% endif %}
		                            <li><a class="nav-link" data-toggle="tab" href="#tab-note"> 
				                            <span style="font-size: 18px;">
												<i class="fa fa-pencil-square-o"></i>
											</span>
										</a>
									</li>
		                        </ul>
								<div class="tab-content">
		                            <div id="tab-info" class="tab-pane active show">
		                                <div class="panel-body">
			                                <div class="row">
												<div class="col-md-12"><h3>Informations générales</h3></div>
											</div>
											<br>
											<div class="form-group row"><label class="col-sm-2 col-form-label">Identification</label>
										        <div class="col-sm-10">
										            <div class="row">
										                <div class="col-md-5"><span class="form-text m-b-none text-navy">Prénom</span>{{ form_widget(formPeople.firstname)}}</div>
										                <div class="col-md-5"><span class="form-text m-b-none text-navy">Nom</span>{{ form_widget(formPeople.lastname)}}</div>
										            </div>
										        </div>
										    </div>
											
											<div class="hr-line-dashed"></div>
											
											<div class="form-group  row">
												<label class="col-sm-2 col-form-label">{{ form_label(formPeople.metier, 'Rattachement métier') }}</label>
												<div class="col-sm-10">{{ form_widget(formPeople.metier)}}</div>
										    </div>
										    
										    <div class="hr-line-dashed"></div>
											
											<div class="form-group  row">
												<label class="col-sm-2 col-form-label">{{ form_label(formPeople.n1, 'N+1') }}</label>
												<div class="col-sm-10">{{ form_widget(formPeople.n1)}}</div>
										    </div>
											
											<div class="hr-line-dashed"></div>
											
											
											<div class="form-group  row">
												<label class="col-sm-2 col-form-label">{{ form_label(formPeople.role, 'Fonction du collaborateur') }}</label>
												<div class="col-sm-10">{{ form_widget(formPeople.role)}}</div>
										    </div>
											
											<div class="hr-line-dashed"></div>
											
											<div class="form-group  row">
												<label class="col-sm-2 col-form-label">{{ form_label(formPeople.site, 'Site de Rattachement du collaborateur') }}</label>
												<div class="col-sm-10">{{ form_widget(formPeople.site)}}</div>
										    </div>
											
											<div class="hr-line-dashed"></div>
											
											<div class="form-group row"><label class="col-sm-2 col-form-label">Contact</label>
										        <div class="col-sm-10">
										            <div class="row">
										                <div class="col-md-5"><span class="form-text m-b-none text-navy">Email</span>{{ form_widget(formPeople.email)}}</div>
										                <div class="col-md-5"><span class="form-text m-b-none text-navy">Téléphone cellulaire</span>{{ form_widget(formPeople.cellular)}}</div>
										            </div>
										        </div>
										    </div>
										    <div class="hr-line-dashed"></div>
						
											<div class="form-group  row">
												<label class="col-sm-2 col-form-label">{{ form_label(formPeople.actionsresponsable, 'Actions associées') }}</label>
												<div class="col-sm-10">{{ form_widget(formPeople.actionsresponsable)}}</div>
										    </div>
		                                </div>
		                            </div>
		                           {% if editMode %}
		                           <div id="tab-files" class="tab-pane">
			                            <div class="panel-body">
			                                <div class="row">
												<div class="col-md-12"><h3>Gestionnaire de fichiers</h3></div>
											</div>
											<br>			                                
			                                <div class="form-group row">				
										        <div class="col-sm-12">
										            <iframe id="myframe" src="{{ path('file_manager', {module:1, conf:'entry', tree:0, extra: {'customer':app.user.customer.id, 'bigentity': 'Collaborateurs', 'entryprefix': 'COL', 'entryid': people.id}}) }}" width="100%" height="500" frameborder="0"></iframe>
										        </div>
										    </div>
			                            </div>
			                        </div>
			                        {% endif %}
		                            <div id="tab-note" class="tab-pane">
		                                <div class="panel-body">
			                                <div class="row">
												<div class="col-md-12"><h3>Notes</h3></div>
											</div>
											<br>			                                
			                                <div class="form-group row">				
										        <div class="col-sm-12">
											        {{ form_widget(formPeople.commentaire)}}
										        </div>
										    </div>
		                                </div>
		                            </div>
								</div>
		            		</div>
			            </div>
					</div>
				</div>
	        </div>
    	</div>
    </div>
    {{ form_end(formPeople) }}	
	
{% endblock %}



	{% block javascripts %}

	
	<script>
		$(document).ready(function() {
			$('#people_metier').select2();	
			$('#people_site').select2();
			$('#people_n1').select2();	
			$('#people_actionsresponsable').select2();
			CKEDITOR.replace( 'people_commentaire' );
		});
		
		function saveLeave (){
				$('button[data-action="leave"]').click(function(){
					const target = this.dataset.target;
					$.confirm({
					     title: 'Attention',
						    content: 'Voulez vous vraiment quitter cette fiche sans enregistrer les modifications ?',
						    buttons: {
						        quitter: function () {
						           $(location).attr('href', target);
						        },
						        annuler: function () {
						        }    
						    }
					});
				});
			}
		saveLeave();
		
		
		$('.appfield').select2();
		$('.fluxfield').select2();

		 ///////////// FULLCALENDAR
            var calendarEl = document.getElementById('calendar');
		
		       var calendar = new FullCalendar.Calendar(calendarEl, {
			        height: 230,
			        locale: 'fr',
		          	plugins: [ 'dayGrid', 'list', 'bootstrap' ],
		          	themeSystem: 'bootstrap',
				  	editable: false,
				  	droppable: false,
				  	weekNumbers: true,
				  	header: {left:   'title', center: 'today', right:  'prev,next' }, // buttons for switching between views
					defaultView: 'listMonth',
					eventLimit: true,
					views: {
					    dayGridMonth: { // name of view
					      titleFormat: { year: 'numeric', month: 'long' }
					      // other view-specific options here
					    },
					    dayGridWeek: { // name of view
					      titleFormat: { year: 'numeric', month: 'short', day: 'numeric' }
					      // other view-specific options here
					    },
					    listMonth: { // name of view
					      titleFormat: { year: 'numeric', month: 'long' },
					      buttonText: 'Planning'
					    }
					},
					events: [
						  {% for jalon in jalons %}
						  {% set desi = jalon.action.designation|replace({"'" : "`"}) %}
						  {% set jal = jalon.jalon|replace({"'" : "`"}) %}
						    { 
						      title: "{{ jal }} -> ACT-{{ jalon.action.id }} {{ desi }}",
						      start: "{{ jalon.daterevue | date("Y-m-d")  }}",
						      url: "{{path('action_edit',{'id' : jalon.action.id, 'r' : 'rgpd'} ) }}"
						    },
						  {% endfor %}
						  ],
					eventClick: function(info) {
					    info.jsEvent.preventDefault(); // don't let the browser navigate

						    if (info.event.url) {
						      window.open(info.event.url);
						    }
						  },
					businessHours: {
					  daysOfWeek: [ 1, 2, 3, 4, 5 ]
					}
										
				});
				calendar.render();
		
		/// 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 %}