<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">

<head th:replace="~{layouts/common.html :: head}"></head>

<link th:href="@{/js/gijgo/css/gijgo.min.css}" rel="stylesheet"/>
<link th:href="@{/js/jquery/datatables.min.css}" rel="stylesheet"/>
<link th:href="@{/js/frappe-gantt/frappe-gantt.min.css}" rel="stylesheet"/>

<style>
	table.tableizer-table {
		font-size: 12px;
		border: 1px solid #CCC; 
		font-family: Arial, Helvetica, sans-serif;
	} 
	
	.tableizer-table td {
		padding: 4px;
		margin: 3px;
		border: 1px solid #CCC;
	}

	.tableizer-table th {
		background-color: #1B3552; 
		color: #FFF;
		font-weight: bold;
	}

	.chart-container{
		min-height:150px;
	}

	.gantt-container{
		height: calc(100vh - 250px);
	}

	.input-group-text{
		background-color:#f5f5f5 !important;
	}

	.dropdown-colvis ~ .dropdown-menu {
		transform: translate(-100px, 0px);
	}

	.datepicker {
      z-index: 1600 !important; 
    }

</style>

<body id="page-top">

	<!-- Navigation -->
	<nav th:replace="~{layouts/common.html :: navbar}"></nav>
 
 	<!-- Content -->
	<div class="content uv-content d-flex" id="uv-wrapper">
		<div class="bg-light border-right" id="uv-sidebar-wrapper" th:replace="~{layouts/sidebar.html :: sidebar}"></div>
		
		<div class="container uv-home-section navVisible" id="uv-content-wrapper">
			<div class="uv-loading-spinner" th:text="#{global.loading}"></div>
			<div class="col-sm-12"></div>
			<div class="uv-container">
				<div class="row">
                     <div class="col-sm-10">
                         <h5 style="margin-bottom:3px;"><span style="text-transform: uppercase;" th:text="${#locale.language} == 'es' ? ${organ.nomCas}:${organ.nomVal}">nombre titulación</span></h5>
                         <h5 style="text-transform: uppercase;margin-bottom:3px;"><small th:text="${#locale.language} == 'es' ? ${organ.nomCas2}:${organ.nomVal2}">nombre centro</small></h5>
                         <h5 style="margin-bottom:0px;"><a target="_blank" th:href="${'/public/reports/'+organ.ruct}"><small><i class="fa fa-link"></i></small> <small th:text="#{dashboard.header.published}">Informes publicados</small></a></h5>
                     </div>
                     <div class="col-sm-2" style="padding:0;">
						<h6 style="margin-bottom:10px;margin-top:-5px;text-align: right;"><small style="font-weight: bold;">RUCT: </small><small class="pointer" style="font-weight: bold;"><a tabindex="0" role="button" data-container="body" data-trigger="focus" data-toggle="popover" data-placement="left" th:attr="title=#{dashboard.acred.codes}, data-content=${organ.codis}" th:text="${organ.ruct}"></a></small></h6>
                     	<img th:src="@{${'/logos/C' + organ.lugar2 +'.png'}}" class="float-right img-responsive img-rounded" style="width:80px;max-width:80px;margin-top:0px;">
                     </div>
                 </div>
				<div class="clearfix"></div>
                <div class="row" style="margin-top:5px;">
                    <div class="card card-default card-body" style="padding: 0 !important;">
                        <ul id="tabsJustified" class="nav nav-tabs nav-justified">
                        	<li class="nav-item">
                                <a class="nav-link active" href="" data-target="#tab0" data-toggle="tab" th:text="#{dashboard.menu.summary}">Resumen</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="" data-target="#tab1" data-toggle="tab" th:text="#{dashboard.menu.procedures}">Procedimientos SAIC</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="" data-target="#tab2" data-toggle="tab" th:text="#{dashboard.menu.docs}">Seguimiento/Acreditación</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="" data-target="#tab3" data-toggle="tab" th:text="#{dashboard.menu.data}">Indicadores</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="" data-target="#tab4" data-toggle="tab" th:text="#{dashboard.menu.managers}">Responsables</a>
                            </li>
                        </ul>
                        <!--/tabs-->
                        <br>
                        <div id="viewTabsProcYears" class="tab-content">
                        	<div class="tab-pane active" id="tab0">  
                        		<div class="row">
	                        		<div class="col-lg-12" style="margin-top:-10px;margin-bottom:5px;padding-left:30px;padding-right:30px;">  
										<span class="gantt-legend-done"><span th:text="#{dashboard.summary.legend.active}">Finalizado</span></span>
										<span class="gantt-legend-active"><span th:text="#{dashboard.summary.legend.ontime}">En curso</span></span>
										<span class="gantt-legend-expired"><span th:text="#{dashboard.summary.legend.delayed}">Atrasado</span></span>
										<span class="gantt-legend-closed"><span th:text="#{dashboard.summary.legend.closed}">Cerrado</span></span>
	                            	</div> 
	                                <div class="col-lg-12" style="position:relative;z-index:0;">  
	                            		<svg id="gantt"></svg>     
	                            	</div>  
                        		</div>     
                            </div>
                            <div class="tab-pane" id="tab1">  
                            	<div class="col-lg-12" style="margin-top:-10px;margin-bottom:20px;">  
									<span class="gantt-legend-done"><span th:text="#{dashboard.summary.legend.active}">Finalizado</span></span>
									<span class="gantt-legend-active"><span th:text="#{dashboard.summary.legend.ontime}">En curso</span></span>
									<span class="gantt-legend-closed"><span th:text="#{dashboard.summary.legend.closed}">Cerrado</span></span>
                            	</div> 
                                <div class="col-lg-12">  
                            		<div id="treeProcedures"></div>      
                            	</div>      
                            </div>
                            <div class="tab-pane" id="tab2">
                            		<span th:if="${editable}" class="btn btn-primary pointer" style="z-index:100;float:right;margin-right:25px;font-size:75%;padding: 5px 8px 3px 8px;" onclick="$('#newDocumentModal').modal('toggle');"><i class="fa fa-plus"></i></span>
									<span th:if="${editable}" class="btn btn-warning pointer" style="z-index:100;float:right;margin-right:10px;font-size:75%;padding: 5px 8px 3px 8px;" onclick="$('#hideDocumentsModal').modal('toggle');"><i class="fas fa-eye-slash"></i></span>
                               		<span th:if="${editable}" class="btn btn-secondary pointer" style="z-index:100;float:right;margin-right:10px;font-size:75%;padding: 5px 8px 3px 8px;" onclick="$('#updateAcreditaModal').modal('toggle');"><i class="fas fa-calendar-alt"></i></span>
                               		
                               	<div class="row" style="padding-left:25px;width:100%;">
                               		<div class="col-lg-12" th:if="${organ.acreditacio != null}" style="margin-left:-5px;">
                          				<div class="input-group date-group-lg">
											<div class="input-group-prepend date-group-prep">
												<span class="input-group-text date-group-icon" style="background-color: transparent !important;"><i class="fas fa-medal"></i></span>
											</div>
											<div class="input-group-prepend">
												<span class="input-group-text date-group-text-lg" style="background-color: transparent !important;"><strong th:text="#{dashboard.acred.date.acred}">Prox. acreditación: </strong>:&nbsp;<span id="dataAcred"><span th:text="${organ.acreditacio?.grup}"></span>&nbsp;-&nbsp;<span th:text="${organ.acreditacio?.grupCurs}"></span></span></span>
											</div>
                          				</div>
                           			</div>
                           			<div class="row" th:if="${organ.acreditacio != null}" style="padding-left:25px;">
                           				<div style="display:contents;">
                           					<div class="input-group date-group-lg">
												<div class="input-group-prepend date-group-prep">
													<span class="input-group-text date-group-icon" style="background-color: transparent !important;"><i class="fas fa-splotch"></i></span>
												</div>
												<div class="input-group-prepend">
													<span class="input-group-text date-group-text-lg" style="background-color: transparent !important;"><strong th:text="#{dashboard.acred.date.renov}">Fecha Renovación: </strong>:&nbsp;<span id="dataRenov" th:text="${#temporals.format(organ.acreditacio?.dataRenov, 'dd/MM/yyyy')}"></span></span>
												</div>
											</div>
											<div class="input-group date-group-sm">
												<div class="input-group-prepend date-group-prep">
													<span class="input-group-text date-group-icon" style="background-color: transparent !important;"><i class="fas fa-check-double"></i></span>
												</div>
												<div class="input-group-prepend">
													<span class="input-group-text date-group-text-sm" style="background-color: transparent !important;"><strong th:text="#{dashboard.acred.date.segui}">Fecha seguimiento: </strong>:&nbsp;<span id="dataSegui" th:text="${#temporals.format(organ.acreditacio?.dataSegui, 'yyyy')}"></span></span>
												</div>
											</div>
											<div class="input-group date-group-sm">
												<div class="input-group-prepend date-group-prep">
													<span class="input-group-text date-group-icon" style="background-color: transparent !important;"><i class="fas fa-check"></i></span>
												</div>
												<div class="input-group-prepend">
													<span class="input-group-text date-group-text-sm" style="background-color: transparent !important;"><strong th:text="#{dashboard.acred.date.verif}">Fecha verificación: </strong>:&nbsp;<span id="dataVerif" th:text="${#temporals.format(organ.acreditacio?.dataVerif, 'dd/MM/yyyy')}"></span></span>
												</div>
											</div>
											<div class="input-group date-group-sm">
												<div class="input-group-prepend date-group-prep">
													<span class="input-group-text date-group-icon" style="background-color: transparent !important;"><i class="fas fa-flag"></i></span>
												</div>
												<div class="input-group-prepend">
													<span class="input-group-text date-group-text-sm" style="background-color: transparent !important;"><strong th:text="#{dashboard.acred.date.impla}">Fecha implantación: </strong>:&nbsp;<span id="cursImpla" th:text="${organ.acreditacio?.cursImpla}"></span></span>
												</div>
											</div>
											<div class="input-group row" id="acredRecomsContainer" th:style="${organ.acreditacio?.recom ? 'padding-left:15px;' : 'padding-left:15px; display:none;'}">
												<div class="input-group-prepend date-group-prep">
													<span class="input-group-text date-group-icon" style="background-color: transparent !important;"><i class="fas fa-exclamation-triangle" style="color:orange"></i></span>
												</div>
												<div class="input-group-prepend">
													<span class="input-group-text date-group-text-sm" style="background-color: transparent !important;" th:text="#{dashboard.acred.recom.msg}">Hay recomendaciones de obligado cumplimiento derivadas de la última renovación</span>
												</div>
											</div>
											<div class="input-group row" id="acredSeguiContainer" th:style="${organ.acreditacio?.segui ? 'padding-left:15px;' : 'padding-left:15px; display:none;'}">
												<div class="input-group-prepend date-group-prep">
													<span class="input-group-text date-group-icon" style="background-color: transparent !important;"><i class="fas fa-exclamation-triangle" style="color:orange"></i></span>
												</div>
												<div class="input-group-prepend">
													<span class="input-group-text date-group-text-sm" style="background-color: transparent !important;" th:text="#{dashboard.acred.segui.msg}">La titulación debe pasar seguimiento obligatoriamente</span>
												</div>
											</div>
										</div>
                            		</div>
	                            	<div class="col-lg-12"  style="margin-top:25px;">
                           				<strong th:text="#{dashboard.acred.docs.title}">Documentación:</strong>
										<span th:if="${editable}" class="btn btn-primary pointer" style="z-index:100;float:right;margin-right:0;font-size:75%;padding: 5px 8px 3px 8px;" onclick="$('#linksModal').modal('toggle');"><i class="fa fa-link"></i></span>
                            		</div>
                            		<div class="col-lg-12" id="treeDocuments"></div>
                           		</div>     
                            </div>
                            <div class="tab-pane" id="tab3">
                            	<div class="row" id="dataContainer" th:if="${editable}" style="display:none;padding-right:10px;padding-left:10px;"> 
                            		<div class="col-lg-12">
                            			<table id="dataTabular" class="table table-striped table-bordered display responsive no-wrap" style="width:100%;position:relative;z-index:0;">
										    <thead>
										        <tr>
										        	<th class="uv-table" th:text="#{dashboard.data.table.hr1}">Encuesta</th>
										        	<th class="uv-table" th:text="#{dashboard.data.table.hr2}">Indicador</th>
										        	<th class="uv-table" th:text="#{dashboard.data.table.hr3}">Ámbito</th>
										        	<th class="uv-table" th:text="#{dashboard.data.table.hr4}">Estudio</th>
										        	<th class="uv-table" th:text="#{dashboard.data.table.hr5}">Valor</th>
										        	<th class="uv-table" th:text="#{dashboard.data.table.hr6}">Curso</th>
										        	<th class="uv-table" th:text="#{dashboard.data.table.hr7}">CursoD</th>
										        	<th class="uv-table" th:text="#{dashboard.data.table.hr8}">Tipo</th>
										        	<th class="uv-table" th:text="#{dashboard.data.table.hr9}">NºEnq</th>
										        	<th class="uv-table" th:text="#{dashboard.data.table.hr10}">Curso Enq</th>
										        	<th class="uv-table" th:text="#{dashboard.data.table.hr11}">Centro Orig</th>
										        	<th class="uv-table" th:text="#{dashboard.data.table.hr12}">Tit. Orig</th>
										        	<th class="uv-table" th:text="#{dashboard.data.table.hr13}">RUCT</th>
										        </tr>
										    </thead>
											<tbody></tbody>
										</table>
                            		</div>
                            	</div>
                            	<div class="row" id="graphsContainer" style="margin-left:0px;">  
                            		<div class="col-lg-4">
                            			<div style="margin-bottom:5px;">
                            				<select class="form-control pointer data-selector">
                            					<option value="1" th:text="#{dashboard.data.sel.rates}">Tasas</option>
                            					<option value="2" th:if="${organ.tambit == 'G'}" th:text="#{dashboard.data.sel.estud1}">Satisfacción Estudiantes 1º</option>
                            					<option value="2" th:if="${organ.tambit == 'M' or organ.tambit == 'D'}" th:text="#{dashboard.data.sel.estud}">Satisfacción Estudiantes</option>
                            					<option value="3" th:if="${organ.tambit == 'G'}" th:text="#{dashboard.data.sel.estud3}">Satisfacción Estudiantes 3º</option>
                            					<option value="4" th:text="#{dashboard.data.sel.gradu}">Satisfacción Graduados</option>
                            					<option value="5" th:text="#{dashboard.data.sel.prof}">Satisfacción Profesorado</option>
                            					<option value="6" th:text="#{dashboard.data.sel.ptgas}">Satisfacción PTGAS</option>
                            					<option value="7" th:if="${organ.tambit != 'D'}" th:text="#{dashboard.data.sel.eval}">Evaluación Docente</option>
                            				</select>
                            			</div>
                            			<div class="data-inds data-inds-1" data-id="1"></div>
	                            		<div class="data-inds data-inds-2" data-id="2"></div>
	                            		<div class="data-inds data-inds-3" data-id="3" th:if="${organ.tambit == 'G'}"></div>
	                            		<div class="data-inds data-inds-4" data-id="4"></div>
	                            		<div class="data-inds data-inds-5" data-id="5"></div>
	                            		<div class="data-inds data-inds-6" data-id="6"></div>
	                            		<div class="data-inds data-inds-7" data-id="7"></div>
                            		</div>
	                                <div class="col-lg-8">  
	                                	<div class="data-legend row" style="margin-top:-15px;">
	                                		<div class="col-lg-4" style="text-align:right;">
	                                			<small>
	                                				<span><span class="btn data-legend-t"></span> <span th:text="#{dashboard.data.legend.1}">Titulación</span></span>
	                                			</small>
	                                		</div>
	                                		<div class="col-lg-4" style="text-align:center;">
	                                			<small>
	                                				<span><span class="btn data-legend-c"></span> <span th:text="#{dashboard.data.legend.2}">Centro</span></span>
	                                			</small>
	                                		</div>
	                                		<div class="col-lg-4" style="text-align:left;">
	                                			<small>
	                                				<span><span class="btn data-legend-u"></span> <span th:text="#{dashboard.data.legend.3}">Universidad</span></span>
	                                			</small>
	                                			<span class="pointer btn btn-secondary" th:if="${editable}" th:attr="title=#{dashboard.data.table.btn7}" style="float:right;margin-top:-5px;margin-right:5px;min-width:25px;min-height:25px;max-width:25px;max-height:25px;padding:0px;" onclick="toggleDataViz();"><i class="fas fa-table"></i></span>
	                                		</div>
	                            		</div>
	                                	<div class="row chart-inds chart-inds-1" data-id="1"></div>
	                                	<div class="row chart-inds chart-inds-2" data-id="2"></div>
	                                	<div class="row chart-inds chart-inds-3" data-id="3" th:if="${organ.tambit == 'G'}"></div>
	                                	<div class="row chart-inds chart-inds-4" data-id="4"></div>
	                                	<div class="row chart-inds chart-inds-5" data-id="5"></div>
	                                	<div class="row chart-inds chart-inds-6" data-id="6"></div>
	                                	<div class="row chart-inds chart-inds-7" data-id="7"></div>
	                            	</div> 
	                            </div>
                            </div>
                            <div class="tab-pane" id="tab4">
                                <div class="uv-table-group" th:if="${results}" style="cursor: auto;">
									<div class="col-sm-12 uv-table-section" th:each="item : ${resp_titulacions}" style="margin-top:20px;">
										<strong><span th:text="${#locale.language} == 'es' ? ${item.rol.descripcioCas}:${item.rol.descripcioVal}"></span>: </strong> 
										<a th:href="'mailto:'+${item.usuari.email}" th:title="${item.usuari.email}" th:text="${item.usuari.nom + ' ' + item.usuari.cognoms}"></a> (<small><span th:text="#{managers.since}">Desde el</span> <span th:text="${item.inici}"></span></small>)
									</div>
									<div class="col-sm-12 uv-table-section" th:each="item : ${resp_centres}">
										<strong th:text="${#locale.language} == 'es' ? ${item.rol.descripcioCas}:${item.rol.descripcioVal}"></strong>
										<br>
										<a th:href="'mailto:'+${item.usuari.email}" th:title="${item.usuari.email}" th:text="${item.usuari.nom + ' ' + item.usuari.cognoms}"></a> (<small><span th:text="#{managers.since}">Desde el</span> <span th:text="${item.inici}"></span></small>)
									</div>
								</div>
                            </div>
                        </div>
                        <!--/tabs content-->
                    </div><!--/card-->
                </div><!--/col-->
			</div>
		</div>
	</div>
	
	<div th:if="${editable}" class="modal fade" id="newDocumentModal" tabindex="-1" role="dialog" aria-labelledby="newDocumentModal" aria-hidden="true">
	  <div class="modal-dialog modal-lg">
	    <div class="modal-content">
		    <div class="modal-header">
		        <h5 class="modal-title">Añadir documento</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		        	<span aria-hidden="true">&times;</span>
		        </button>
	        </div>
	        <div class="modal-body">
	        	<div class="container-fluid">
			    	<form id="newDocumentForm" style="margin-top:25px;">
			    		<input type="hidden" id="fileLugar" name="lugar" th:value="${organ.lugar}">  
			    		<input type="hidden" id="fileTlugar" name="tlugar" th:value="${organ.tlugar}">  
						<div class="uv-table-group-procedure" id="categoryContainer">
							<label>Categoría</label>
							<select class="form-control selectpicker" id="categorySelector" name="category" data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}" required>
						    	<option th:each="item : ${categories}" th:text="${#locale.language} == 'es' ? ${item.nomCas}:${item.nomVal}" th:attr="value=${item.idCategoria}">
						    </select>
						</div>
						<div class="uv-table-group-procedure documentSelectorContainer">
							<label>Documento</label>
							<select class="form-control selectpicker" id="documentSelector" name="idCategoria" data-showContent="true" data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}" required>
						    </select>
						</div>
						<div class="uv-table-group-procedure documentSelectorContainer">
							<br>
							<div class="custom-file">
								<input type="file" class="custom-file-input pointer" id="customFile" name="file" required>
								<label class="custom-file-label pointer" for="customFile">Seleccionar archivo</label>
							</div>
						</div>
					</form>
				</div>
			</div>
			<div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal" th:text="#{global.cancel}">Cancelar</button>
		        <button class="btn btn-success" type="submit" form="newDocumentForm" th:text="#{global.confirm}">Confirmar</button>
	        </div>
	    </div>
	  </div>
	</div>
	
	<div th:if="${editable}" class="modal fade" id="hideDocumentsModal" tabindex="-1" role="dialog" aria-labelledby="hideDocumentsModal" aria-hidden="true">
	  <div class="modal-dialog modal-lg">
	    <div class="modal-content">
		    <div class="modal-header">
		        <h5 class="modal-title">Ocultar todos los documentos visibles</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		        	<span aria-hidden="true">&times;</span>
		        </button>
	        </div>
	        <div class="modal-body">
	        	<div class="container-fluid">
			    	<p>Se ocultarán todos los documentos visibles.</p>
				</div>
			</div>
			<div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal" th:text="#{global.cancel}">Cancelar</button>
		        <button class="btn btn-success" th:text="#{global.confirm}" onclick="hideAllDocuments();">Confirmar</button>
	        </div>
	    </div>
	  </div>
	</div>
	
	<div th:if="${editable}" class="modal fade" id="updateAcreditaModal" tabindex="-1" role="dialog" aria-labelledby="updateAcreditaModal" aria-hidden="true">
	  <div class="modal-dialog modal-lg">
	    <div class="modal-content">
		    <div class="modal-header">
		        <h5 class="modal-title">Editar fechas de acreditación</h5>
		        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
		        	<span aria-hidden="true">&times;</span>
		        </button>
	        </div>
	        <div class="modal-body">
	        	<div class="container-fluid">
	        		<input type="hidden" id="lugar" th:value="${organ.lugar}">
	        		<input type="hidden" id="tlugar" th:value="${organ.tlugar}">
			    	<div class="row">
			    		<div class="col-3">
							<label th:text="#{dashboard.acred.date.acred}">Fecha acreditación</label>
							<div class="input-group date datepicker"> 
								<input data-date-format="dd/mm/yyyy" type="text" id="edataAcred" th:value="${#temporals.format(organ.acreditacio?.dataAcred, 'dd/MM/yyyy')}" class="form-control uv-datePicker" required pattern=".{1,}" autocomplete="off">
								<div class="input-group-prepend uv-date-icon">
									<div class="input-group-addon input-group-text">
										<span class="fa fa-calendar"></span>
									</div>
								</div>
							</div>					
						</div> 
						<div class="col-3">
							<label th:text="#{dashboard.acred.group.year}">Curso acreditación</label>
							<input class="form-control" type="number" id="egrupCurs" th:value="${organ.acreditacio?.grupCurs}" style="margin-top:5px;">					
						</div>
						<div class="col-3">
							<label th:text="#{dashboard.acred.group.name}">Grupo acreditación</label>
							<select class="form-control pointer" id="egrupNum" style="margin-top:5px;">
								<option value="1" th:selected="${organ.acreditacio?.grupNum == 1}">Enero</option>
								<option value="4" th:selected="${organ.acreditacio?.grupNum == 4}">Abril</option>
								<option value="9" th:selected="${organ.acreditacio?.grupNum == 9}">Septiembre</option>
								<option value="10" th:selected="${organ.acreditacio?.grupNum == 10}">Noviembre</option>
							</select>					
						</div> 
			    	</div>
			    	<div class="row" style="margin-top:10px;">
			    		<div class="col-3">
							<label th:text="#{dashboard.acred.date.segui}">Fecha seguimiento</label>
							<div class="input-group date datepicker"> 
								<input data-date-format="dd/mm/yyyy" type="text" id="edataSegui" th:value="${#temporals.format(organ.acreditacio?.dataSegui, 'dd/MM/yyyy')}" class="form-control uv-datePicker" required pattern=".{1,}" autocomplete="off">
								<div class="input-group-prepend uv-date-icon">
									<div class="input-group-addon input-group-text">
										<span class="fa fa-calendar"></span>
									</div>
								</div>
							</div>					
						</div> 
						<div class="col-3">
							<label th:text="#{dashboard.acred.date.renov}">Fecha renovación</label>
							<div class="input-group date datepicker"> 
								<input data-date-format="dd/mm/yyyy" type="text" id="edataRenov" th:value="${#temporals.format(organ.acreditacio?.dataRenov, 'dd/MM/yyyy')}" class="form-control uv-datePicker" required pattern=".{1,}" autocomplete="off">
								<div class="input-group-prepend uv-date-icon">
									<div class="input-group-addon input-group-text">
										<span class="fa fa-calendar"></span>
									</div>
								</div>
							</div>					
						</div> 
						<div class="col-3">
							<label th:text="#{dashboard.acred.date.verif}">Fecha verificación</label>
							<div class="input-group date datepicker"> 
								<input data-date-format="dd/mm/yyyy" type="text" id="edataVerif" th:value="${#temporals.format(organ.acreditacio?.dataVerif, 'dd/MM/yyyy')}" class="form-control uv-datePicker" required pattern=".{1,}" autocomplete="off">
								<div class="input-group-prepend uv-date-icon">
									<div class="input-group-addon input-group-text">
										<span class="fa fa-calendar"></span>
									</div>
								</div>
							</div>					
						</div> 
						<div class="col-3">
							<label th:text="#{dashboard.acred.date.impla}" style="margin-top:5px;">Curso implantación</label>
							<input class="form-control" type="number" id="ecursImpla" th:value="${organ.acreditacio?.cursImpla}"/>					
						</div>
			    	</div>
					<div class="row" style="margin-top:10px;">
						<div class="col-3">
							<label th:text="#{dashboard.acred.recom.title}">Recomendaciones *</label>
							<input type="checkbox" class="form-control pointer" id="erecom" th:checked="${organ.acreditacio?.recom}" style="margin-top:5px;">
						</div>
						<div class="col-3">
							<label th:text="#{dashboard.acred.segui.title}">Seguimiento **</label>
							<input type="checkbox" class="form-control pointer" id="esegui" th:checked="${organ.acreditacio?.segui}" style="margin-top:5px;">
						</div>
					</div>
					<br>
					<span>* <small th:text="#{dashboard.acred.recom.info}"></small></span><br>
					<span>** <small th:text="#{dashboard.acred.segui.info}"></small></span>
				</div>
			</div>
			<div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal" th:text="#{global.cancel}">Cancelar</button>
		        <button class="btn btn-success" th:text="#{global.confirm}" onclick="updateAcreditaDates();">Confirmar</button>
	        </div>
	    </div>
	  </div>
	</div>

	<div th:if="${editable}" class="modal fade" id="linksModal" tabindex="-1" role="dialog" aria-labelledby="linksModal" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="max-width: 80% !important;">
		  <div class="modal-content">
			  <div class="modal-header">
				  <h5 class="modal-title">Enlaces públicos a la documentación</h5>
				  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
					  <span aria-hidden="true">&times;</span>
				  </button>
			  </div>
			  <div class="modal-body">
				  <div class="container-fluid" id="linksContainer">
					  
				  </div>
				  <div class="container-fluid" id="linksFormContainer" style="margin-top:25px;">
					<h5 style="font-size: 99%;"><strong>Nuevo enlace público</strong></h5>
					<div class="col-3">
						<label th:text="'Válido hasta'">Válido hasta</label>
						<div class="input-group date datepicker"> 
							<input data-date-format="dd/mm/yyyy" type="text" id="links_dataExp" name="dataExp" class="form-control uv-datePicker editFormItem" required pattern=".{1,}" autocomplete="off">
							<div class="input-group-prepend uv-date-icon">
								<div class="input-group-addon input-group-text">
									<span class="fa fa-calendar"></span>
								</div>
							</div>
						</div>					
					</div>
					<button class="btn btn-success" th:text="'Crear'" onclick="createLink();" style="margin-top:15px;">Crear</button> 
				  </div>
				  
			  </div>
			  <div class="modal-footer">
				  <button type="button" class="btn btn-secondary" data-dismiss="modal" th:text="'Cerrar'">Cerrar</button>
			  </div>
		  </div>
		</div>
	  </div>

	<!-- contactModal -->
	<div th:replace="~{layouts/common.html :: contactModal}"></div>
	
	<!-- Footer -->
	<footer class="uv-footer uv-footer-text" th:replace="~{layouts/common.html :: footer}"></footer>
	
	<script th:src="@{/js/jquery/jquery.min.js}"></script>
	<script th:src="@{/js/popper.js}"></script>
	<script th:src="@{/js/bootstrap/bootstrap.min.js}"></script>
	<script th:src="@{/js/fa/all.js}"></script>
	<script th:src="@{/js/jquery/datatables.min.js}"></script>
	<script th:src="@{/js/jquery-easing/jquery.easing.min.js}"></script>
	<script th:src="@{/js/gijgo/gijgo.min.js}"></script>
	<script th:src="@{/js/frappe-gantt/frappe-gantt.min.js}"></script>
	<script th:src="@{/js/chartjs/chart.js}"></script>
	<script th:src="@{/js/moment.js}"></script>
	<script th:src="@{/js/datepicker/bootstrap-datepicker.min.js}"></script>
	<script th:src="@{/js/datepicker/locales/bootstrap-datepicker.es.min.js}"></script>
	<script th:src="@{/js/datepicker/locales/bootstrap-datepicker.ca.min.js}"></script>
	<script th:src="@{/js/bootstrap-select/bootstrap-select.js}"></script>
	<script th:src="@{/js/bootstrap-select/i18n/defaults-es_ES.js}" th:if="${#locale.language} == 'es'"></script>
	<script th:src="@{/js/bootstrap-select/i18n/defaults-ca_CA.js}" th:if="${#locale.language} != 'es'"></script>
	<script th:src="@{/js/saic.js}"></script>
  
  	<script type="text/javascript">
	  	var locale = '[[${#locale.language}]]';
		var lugar = '[[${organ.lugar}]]';
		var tlugar = '[[${organ.tlugar}]]';
		var ruct = '[[${organ.ruct}]]';
		var tambit = '[[${organ.tambit}]]';
		$.fn.selectpicker.Constructor.BootstrapVersion = '4';
  	</script>
  
  	<script th:if="${editable}" type="text/javascript">
  		var indsDataTable = null;
  		var translator = {dades_1er:'estud1', dades_3er:'estud3', dades_graduats:'gradu', data:'estud', datag:'gradu',
  						  profes:'profes', profes_tancades:'profes', evalprof:'evalprof', enquestes:'enquestes',
  						  doc_tasas:'doc_tasas', doc_prof:'doc_prof', doc_inds:'doc_inds', doc_recom:'doc_recom', doc_etesi:'doc_egres',
  						  doc_estud:'doc_estud', dadespas:'PTGAS', docentia:'docentia', otros:'otros'};
  		var currYear = new Date().getFullYear();
  		
  		function editableSettings(){
  			$(".custom-file-input").on("change", function() {
  				var fileName = $(this).val().split("\\").pop();
  				$(this).siblings(".custom-file-label").addClass("selected").html(fileName);
  			});
  			
  			$("#newDocumentForm").submit(function(e) {
  			    e.preventDefault();
  			    var formData = new FormData(this);    
  			    $.ajax({
  			        url: "/dashboard/documents",
  			        type: "POST",
  			        data: formData,
  			        processData: false,
  			        contentType: false,
  			        success: function(data){
  			        	treeDocuments.reload();
  			        }
  			    });
  			    $('#categorySelector').val('').trigger('change');
  			    $('#documentSelector').val('').trigger('change');
  			    $('#customFile').val('').trigger('change');
  				$('#newDocumentModal').modal('toggle');
  			});
  		}
  		
  		function hideAllDocuments(){
  			$.post("/dashboard/documents/archive", {tlugar:tlugar, lugar:lugar}, function(){treeDocuments.reload();});
  			$('#hideDocumentsModal').modal('toggle');
  		}

  		function updateAcreditaDates(){
  			var params = {tlugar:tlugar, lugar:lugar, dataAcred:$('#edataAcred').val(), dataSegui:$('#edataSegui').val(),
  						  dataRenov:$('#edataRenov').val(), dataVerif:$('#edataVerif').val(), cursImpla:$('#ecursImpla').val(),
  						  grupCurs:$('#egrupCurs').val(), grupNum:$('#egrupNum').val(), recom:$('#erecom').is(':checked'),
						  segui:$('#esegui').is(':checked')};
  			$.post("/admin/acredita", params, function(d){
  				$('#dataAcred').text(d.grup + " - " + d.grupCurs);
  				$('#dataSegui').text(moment(d.dataSegui.toString()).format("YYYY"));
  				$('#dataRenov').text(moment(d.dataRenov.toString()).format("DD/MM/YYYY"));
  				$('#dataVerif').text(moment(d.dataVerif.toString()).format("DD/MM/YYYY"));
  				$('#cursImpla').text(d.cursImpla);
  				$('#edataAcred').val(moment(d.dataAcred.toString()).format("DD/MM/YYYY"));
  				$('#edataSegui').val(moment(d.dataSegui.toString()).format("DD/MM/YYYY"));
  				$('#edataRenov').val(moment(d.dataRenov.toString()).format("DD/MM/YYYY"));
  				$('#edataVerif').val(moment(d.dataVerif.toString()).format("DD/MM/YYYY"));
  				$('#ecursImpla').val(d.cursImpla);
  				$('#egrupNum').val(d.grupNum);
  				$('#egrupCurs').val(d.grupCurs);
				$('#erecom').attr('checked', d.recom);
				$('#esegui').attr('checked', d.segui);
  				$('#updateAcreditaModal').modal('toggle');
				if(d.recom){
					$('#acredRecomsContainer').show();
				}
				else{
					$('#acredRecomsContainer').hide();
				}
				if(d.segui){
					$('#acredSeguiContainer').show();
				}
				else{
					$('#acredSeguiContainer').hide();
				}
  			});
  		}
  		
		function getTableData(){
			showSpinner();
			$.get('/data/current/show/'+ruct+'/'+currYear, function(data){
				$('#dataTabular > tbody').html('');
				data.forEach(function(d){
					$('#dataTabular > tbody').append(`
					<tr>
						<td>${translator[d.enquesta]}</td>
						<td>${d.indicador}</td>
						<td>${d.ambit}</td>
						<td>${d.estudi}</td>
						<td>${d.valor === null ? '' : d.valor}</td>
						<td>${d.curs === null ? '' : d.curs}</td>
						<td>${d.cursd === null ? '' : d.cursd}</td>
						<td>${d.tipus === null ? '' : d.tipus}</td>
						<td>${d.nenq === null ? '' : d.nenq}</td>
						<td>${d.cursEnquesta === null ? '' : d.cursEnquesta}</td>
						<td>${d.centreOrigen === null ? '' : d.centreOrigen}</td>
						<td>${d.titulacioOrigen === null ? '' : d.titulacioOrigen}</td>
						<td>${d.ruct === null ? '' : d.ruct}</td>
					</tr>
					`);
				});
				
				initDataTable();
			});
		}
		
		function toggleDataViz(){
			if(indsDataTable === null){
				getTableData();
			}
			$('#graphsContainer').toggle();
			$('#dataContainer').toggle();
		}
		
		function showSpinner(){
			$('#uv-content-wrapper').append('<div class="uv-loading-spinner" th:text="#{global.loading}"></div>');
		}
		
		function closeSpinner(){
			$('.uv-loading-spinner').remove();
		}
		
		function updateDataTable(){
			showSpinner();
			$.get('/data/current/show/'+ruct+'/'+$('#dataSelectedCurs').val(), function(data){
				var dataArr = [];
				data.forEach(function(d){
					dataArr.push([translator[d.enquesta],
							   d.indicador,
							   d.ambit,
							   d.estudi,
							   d.valor === null ? '' : d.valor,
							   d.curs === null ? '' : d.curs,
							   d.cursd === null ? '' : d.cursd,
							   d.tipus === null ? '' : d.tipus,
							   d.nenq === null ? '' : d.nenq,
							   d.cursEnquesta === null ? '' : d.cursEnquesta,
							   d.centreOrigen === null ? '' : d.centreOrigen,
							   d.titulacioOrigen === null ? '' : d.titulacioOrigen,
							   d.ruct === null ? '' : d.ruct]);
				});
				indsDataTable.clear();
				indsDataTable.rows.add(dataArr).draw();
				closeSpinner();
			});
		}
		
		function initDataTable(){
			
			$('#dataTabular thead tr')
		        .clone(true)
		        .addClass('filters')
				.addClass('dataFilters')
		        .appendTo('#dataTabular thead');
	
			indsDataTable = $('#dataTabular').DataTable({
				paging: true, 
				buttons: [
					{
						extend: "pageLength",
					},
					{
						text: `[[#{dashboard.data.table.btn1}]]: <input id="dataSelectedCurs" type="number" value="${currYear}" style="width: 75px;">`,
						action: function (e, dt, node, config) {
							updateDataTable();
						}
					},
					{
						extend: 'excelHtml5',
						text: '<span><i class="fas fa-file-excel"></i></span>',
						titleAttr: '[[#{dashboard.data.table.btn2}]]',
						title: 'ListadoTitulaciones',
						exportOptions: {
							columns: ':visible'
						}
					},
					{
						extend: 'csvHtml5',
						text: '<span><i class="fas fa-file-csv"></i></span>',
						titleAttr: '[[#{dashboard.data.table.btn3}]]',
						title: 'ListadoTitulaciones',
						exportOptions: {
							columns: ':visible'
						}
					},
					{
						extend: 'pdfHtml5',
						text: '<span><i class="fas fa-file-pdf"></i></span>',
						titleAttr: '[[#{dashboard.data.table.btn4}]]',
						title: 'ListadoTitulaciones',
						exportOptions: {
							columns: ':visible'
						}
					},
					{
						extend: 'colvis',
						text: '<span><i class="fas fa-eye"></i></span>',
						className: 'dropdown-colvis',
						titleAttr: '[[#{dashboard.data.table.btn5}]]'
					},
					{
						text: '<span title="'+'[[#{dashboard.data.table.btn6}]]'+'"><i class="fas fa-chart-line"></i></span>',
						action: function ( e, dt, node, config ) {
							toggleDataViz();
						}
					}
				],
				layout: {
			        topStart: null,
			        topEnd: 'buttons'
			    },
				"language":{
					"lengthMenu": "_MENU_", 
		            "zeroRecords": "[[#{admin.stats.table.zeroRecords}]]",
		            "info": "[[#{admin.stats.table.info}]]",
		            "infoEmpty": "[[#{admin.stats.table.infoEmpty}]]",
		            "infoFiltered": "[[#{admin.stats.table.infoFiltered}]]",
		            "paginate": {
		                "previous": "[[#{admin.stats.table.previous}]]",
		                "next": "[[#{admin.stats.table.next}]]"
		            },
					"buttons": {
						"pageLength": "%d [[#{admin.stats.table.lengthMenu}]]"
					}
				},
				bAutoWidth: false, 
				searching: true,
				order:[ [0, 'asc'], [1, 'asc'] ],
				orderCellsTop: true,
				//fixedHeader: true, // Not compatible with android
				info: false,
				responsive: false,
				scrollX: true,
				lengthMenu: [10, 25, 50, 100, { label: 'All', value: -1 }],
				initComplete: function () {
					var api = this.api();
		        	this.api()
		        	.columns()
		            .eq(0)
		            .each(function (colIdx) {
		                var cell = $('.filters.dataFilters th').eq(
		                    $(api.column(colIdx).header()).index()
		                );
		                var title = $(cell).text();
		                $(cell).html('<input type="text" placeholder="' + title + '" />');
		                $('input', $('.filters.dataFilters th').eq($(api.column(colIdx).header()).index()))
		                    .off('keyup change')
		                    .on('change', function (e) {
		                        $(this).attr('title', $(this).val());
		                        var regexr = '({search})'; 
		                        cursorPosition = this.selectionStart;
		                        api.column(colIdx)
		                           .search(   
		                                this.value != ''
		                                    ? regexr.replace('{search}', '(((' + this.value + ')))')	
		                                    : '',
		                                this.value != '',
		                                this.value == ''
		                            )
		                            .draw();
		                    })
		                    .on('keyup', function (e) {
								e.preventDefault();
		                        e.stopPropagation();
		                        $(this).trigger('change');
		                        $(this)
		                            .focus()[0]
		                            .setSelectionRange(cursorPosition, cursorPosition);
		                    });
		            });
		            api.column(5).visible(false);
		            api.column(6).visible(false);
		            api.column(7).visible(false);
		            api.column(8).visible(false);
		            api.column(9).visible(false);
		            api.column(10).visible(false);
		            api.column(11).visible(false);
		            api.column(12).visible(false);
		            closeSpinner();
				}
			});
				
			}

			function loadLinks(){
				$.get('/dashboard/links/'+ruct, function(data){
					$('#linksContainer').html('');
					data.forEach(function(d){
						const date = d.dataExp.split('T')[0].split('-');
						$('#linksContainer').append(`
							</br>
							<div id="shared_link_${d.id}" style="width:100%;magin-bottom:-10px;">
								<a href="${d.link}" target="_blank">${d.link}</a> 
								<span style="margin-left:20px;">(expira ${date[2]}/${date[1]}/${date[0]})</span>
								<span style="margin-left:20px;">${d.visites} visitas</span>
								<span style="float:right;">
									<span class="pointer btn btn-danger" style="z-index:100;float:right;margin-right:0;font-size:75%;padding: 5px 8px 3px 8px;" onclick="deleteLink('${d.id}')"><i class="fas fa-trash"></i></span>
									<span class="pointer btn btn-primary" style="z-index:100;float:right;margin-right:5px;font-size:75%;padding: 5px 8px 3px 8px;" onclick="copyLink('${d.link}')"><i class="fas fa-copy"></i></span>	
								</span>
							</div>
						`);
					});
				});
			}

			function deleteLink(id){
				$.ajax({
					url: '/dashboard/links/'+id,
					type: 'DELETE',
					success: function(r) {
						loadLinks();
					}
				});
			}

			function createLink(){
				$.post("/dashboard/links/"+ruct, {dataExp:$('#links_dataExp').val()}, 
					function(data){
						loadLinks();
					}
				);
			}

			function copyLink(link){
				console.log(link);
				navigator.clipboard.writeText(link);
			}
  		
  	</script>
  	
  	<script th:if="${!editable}" type="text/javascript">
  		function editableSettings(){}
  		function hideAllDocuments(){}
  		function updateAcreditaDates(){}
		function loadLinks(){}
  	</script>
  
	<script type="text/javascript">
		var treeProcedures, treeDocuments, ganttChart;
		var inds = [];
		var tasks = [];
				
		$(document).ready(function(){ 
			layout = new Layout("");
			layout.closeLoadingSpinner(".uv-loading-spinner");	
			
			$('[data-toggle="popover"]').popover();
			
			$('.data-inds').hide();
			$('.chart-inds').hide();
			$('.data-inds-1').show();
			$('.chart-inds-1').show();
			
			$('#categorySelector').val('').trigger('change');
			$('#categorySelector').change(getChildCats);
			
			$('.data-selector').on('change', function(){
				toggleDataView($(this).val());
			});

			$('.datepicker').datepicker({
				language: locale,
			    autoclose: true,
			    todayHighlight: true,
			    orientation: "bottom center",
			    clearBtn: true
			});
			
			treeProcedures = $('#treeProcedures').tree({
				  cascadeSelection: false,
				  cascadeCheck: false,
				  selectionType: 'single',
				  dataSource: '/dashboard/procedures/'+ruct
			});
			
			treeDocuments = $('#treeDocuments').tree({
				  cascadeSelection: false,
				  cascadeCheck: false,
				  selectionType: 'single',
				  dataSource: '/dashboard/documents/'+ruct
			});
		
			$.get('/dashboard/gantt/'+ruct, function(data){
				data.forEach(function(d){d.id = 'Task '+d.id;});
				data.at(-1).custom_class += ' gantt-task-last';
				tasks = data;
				ganttChart = new Gantt("#gantt", tasks, {
					on_click: function (task) {
						window.open("/procedure/"+task.id.replace('Task_', ''));
					},
					on_date_change: function(task, start, end) {
						return false;
					},
					on_progress_change: function(task, progress) {
						return false;
					},
					on_view_change: function() {
						var bars = document.querySelectorAll("#gantt" + " .bar-group");
						for (var i = 0; i < bars.length; i++) {
							bars[i].addEventListener("mousedown", stopEvent, true);
						}
						var handles = document.querySelectorAll("#gantt" + " .handle-group");
						for (var i = 0; i < handles.length; i++) {
							handles[i].remove();
						}
					},
					bar_height: 20, 
					bar_corner_radius: 10, 
					arrow_curve: 10, 
					padding: 15,
					view_mode: "Month",
					date_format: "YYYY-MM-DD",
					language: locale,
					draggable: false, 
		            hasArrows: false,
		            highlight_weekend: false,
					infinite_padding: false,
		            readonly: true,
					//column_width: 20,
		            popup: function(task) {
		                return `
		                  <div class="details-container">
							<h6>${task.titCas}</h6>
		                    <p>${task._start.toLocaleDateString()} - ${task._end.toLocaleDateString()}</p>
		                  </div>
		                `;
		        	},
				});
				ganttChart.change_view_mode("Month");
				$('.today-button').trigger('click');
				$('.gantt-task-last').get(0).scrollIntoView({
				            behavior: 'auto',
				            block: 'center',
				            inline: 'center'
				        });
				$(window).scrollTop(0);
			});
			
			$.get('/dashboard/graphs/list/'+ruct, function(data){
				inds = data;
				inds = inds.map((e, i) => ({...e, idGrafica: data[i].idGrafica.idGrafica, estudi: data[i].idGrafica.estudi}));
				createDataTables();
				getGraphData();	
			});			
						
			editableSettings();
			loadLinks();
		});		
		
		function createChartCanvas(i){
			 $(`.chart-inds-${i.g}`).append(`<div class="col-lg-4 chart-container"> 
						     			   	     <canvas id="chart_${i.idGrafica}"></canvas>	    
						             	     </div>`);
		}
				
		function createDataTables(){
			$('.data-inds').each(function(idx){
				var i = $(this).attr('data-id');
				var group = inds.filter(o => o.g == i);
				var trs = '';
				group.forEach(function(g){
					trs += `<tr id="tr_${g.idGrafica}"></tr>`; 
				});
				$(this).html(`<table class="tableizer-table" style="width:100%;">
					<thead>
						<tr class="tableizer-firstrow">
							<th></th>
							<th style="width:50px;text-align: center;">Actual</th>
							<th style="width:50px;text-align: center;">Anterior</th>
							<th style="width:50px;text-align: center;">Desv.</th>
						</tr>
					 </thead>
					 <tbody>
						 ${trs}
					</tbody>
                 </table>`);	
			});
		}
		
		function drawTr(obj, value1, value2){
			var color = (value2 == undefined) ? 'black' : value1 - value2 < 0 ? 'red' : 'green';
			if(obj.negar){
				color = (color == 'black') ? color : value1 - value2 > 0 ? 'red' : 'green';
			}
			$('#tr_'+obj.idGrafica).html(`<td>${locale == 'es' ? obj.nomCas : obj.nomVal}</td>
							   <td>${parseFloat(value1).toFixed(2)}${obj.unitats}</td>
							   <td>${value2 == undefined ? '---' : parseFloat(value2).toFixed(2)+obj.unitats}</td>
							   <td style="color:${color}">${value2 == undefined ? '---' : (value1 - value2).toFixed(2)+obj.unitats}</td>`);
		}
		
		function drawChart(obj, values, labels){
			const ctx = document.getElementById('chart_'+obj.idGrafica);
			var callback;
			if(obj.unitats == '%'){
				callback = function(value, index, values){return value + " %";};
			}
			else{
				callback = function(value, index, values){return value;};
			}
			new Chart(ctx, {
			    type: 'line',
			    data: {
			      labels: labels,
			      datasets: values
			    },
			    options: {
			    	responsive: true,
			        maintainAspectRatio: false,
			    	plugins: {
			    		title: {
			                display: true,
			                text: locale == 'es' ? obj.nomCas : obj.nomVal
			            },
			            legend: {
			                display: false
			            },
			            labels: {
			                render: () => {}
			            }
			        },
					scales: {
					  y: {
							max: obj.likert ? 5 : null,
							min: obj.likert ? 1 : 0,
						    beginAtZero: obj.likert ? true : false,
						    ticks: {
						    	beginAtZero: obj.likert ? true : false,
						    	autoSkip: !obj.likert,
						    	stepSize: obj.likert ? 1 : null,
						    	stepValue: obj.likert ? 1 : null,
						    	callback: callback
						    },
						    grid: {
						        drawBorder: true
						    },
						    gridLines: {
						        display: true,
						        color: "rgba(255,99,132,0.2)"
						      },
						    stacked: false,
						  }
						}
			    }
			  });
		}
		
		function getGraphData(){
			$.get('/dashboard/graphs/rates/'+lugar, function(data){
				data.forEach(function(d, i){
					var values = [], labels = [];
					var datasets = [];
					var obj = inds.find(o => o.idGrafica === d.indicador);
					if(obj !== undefined){
						d.valores.forEach(function(v, k){
							values.push(v.valor);
							labels.push(v.curso);
						});
						datasets.push({
					        label: locale == 'es' ? 'Titulación' : 'Titulació',
					        data: values,
					        borderWidth: 1.2,
					        lineTension: 0.6,
					        borderColor: "rgba(0,123,255,1)",
					        backgroundColor: "rgba(0,123,255,0.5)",
						});
						createChartCanvas(obj);
						drawTr(obj, values.at(-1), values.at(-2));
						drawChart(obj, datasets, labels, obj);
					}
				});
			});
			
			$.get('/dashboard/graphs/inds/'+ruct, function(data){
				inds.forEach(function(o){
					var datasets = [], labels = [];
					var vals = data.filter(d => d.dimension+'_'+d.indicador === o.idGrafica);
					if(vals.length < 1){ console.log(o.idGrafica); return; }
					createChartCanvas(o);
					vals.forEach(function(v){
						var values = [];
						v.valores.forEach(function(v, k){
							values.push(v.valor);
							labels.push(v.curso);
						});
						if(v.ambit === 'T'){
							datasets.push({
						        label: locale == 'es' ? 'Titulación' : 'Titulació',
						        data: values,
						        borderWidth: 1.2,
						        lineTension: 0.6,
						        borderColor: "rgba(0,123,255,1)",
						        backgroundColor: "rgba(0,123,255,0.5)",
							});
							drawTr(o, values.at(-1), values.at(-2));
						}
						if(v.ambit === 'C'){
							datasets.push({
						        label: locale == 'es' ? 'Centro' : 'Centre',
						        data: values,
						        borderWidth: 1.2,
						        lineTension: 0.6,
						        borderColor: "rgba(154,240,41,1)",
						        backgroundColor: "rgba(154,240,41,0.5)",
							});
							if(v.dimension === 'ptgas'){
								drawTr(o, values.at(-1), values.at(-2));
							}
						}
						if(v.ambit === 'U'){
							datasets.push({
						        label: locale == 'es' ? 'Universidad' : 'Universitat',
						        data: values,
						        borderWidth: 1.2,
						        lineTension: 0.6,
						        borderColor: "rgba(255,0,0,1)",
						        backgroundColor: "rgba(240,41,67,0.5)",
							});
						}
					});
					labels = Array.from(new Set(labels)).sort();
					drawChart(o, datasets, labels);
				});			
			});
		}
		
		function getChildCats(){
			$.get('/dashboard/documents/cats/'+$(this).val()+'/'+tambit, function(data){
				$('#documentSelector').html('');
				data.forEach(function(d){
					$(`<option value="${d.idCategoria}" data-content="${locale == 'es' ? d.nomCas : d.nomVal}">${locale == 'es' ? d.nomCas : d.nomVal}</option>`)
					.appendTo($('#documentSelector'));
				});
				$('#documentSelector').selectpicker('refresh');
			});
		}
		
		function toggleDataView(id){
			$('.data-inds').hide();
			$('.chart-inds').hide();
			$('.data-inds-'+id).show();
			$('.chart-inds-'+id).show();
		}
		
		function stopEvent(event) {
			event.preventDefault();
		}

	</script>

</body>

</html>
