<!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 rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />

<style>
	.fc-toolbar-title{ font-size: 16px !important; font-weight: bolder !important;}
	.fc-toolbar-title::first-letter{ text-transform: capitalize; }
</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="uv-table-group-procedure-info" style="margin-bottom:20px;">
					<div class="uv-table-title">
						<h6 class="uv-table-header-h6">Planificador</h6>
						<hr class="uv-procedure-hr">
						<span></span>
					</div>
				</div>
				<div class="uv-table-group">
					<h5><br></h5>
				</div>
				<div id="calendar" style="height:600px;max-height:600px;position:relative;z-index:0;"></div>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="newInstanceModal" tabindex="-1" role="dialog" aria-labelledby="newInstanceModal" aria-hidden="true">
	  <div class="modal-dialog modal-lg">
	    <div class="modal-content">
		    <div class="modal-header">
		        <h5 class="modal-title" th:text="#{admin.calendar.form.titleAdd}">Planificar nueva instancia</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="newInstanceForm" style="margin-top:25px;">
						<div class="uv-table-group-procedure" id="proceduresContainer">
							<label th:text="#{admin.instances.selector.procedure}">Proces(os)</label>
							<select class="selectpicker" id="proceduresSelector" name="procedure" data-live-search="true" data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}" required>
						        <option th:each="item : ${procedures}" th:text="${#locale.language} == 'es' ? ${item.text2}:${item.text3}" th:attr="value=${item.value}"></option>
						    </select>
						</div>
						<div class="uv-table-group-procedure">
							<div class="form-check">
								<input class="form-check-input" type="checkbox" value="1" id="selectionType" disabled onchange="toggleSelectionType(this);">
								<label class="form-check-label" for="selectionType" th:text="#{admin.calendar.form.acredSel}">
									Por acreditación
								</label>
							</div>
						</div>
						<div class="uv-table-group-procedure" id="selectorsByGroup">
							<div class="input-group mb-3">
								<div class="input-group-prepend">
									<input class="input-group-text" id="inputAcredCurs" type="number" placeholder="Curso" value="" style="background-color:transparent !important;">
								</div>
								<select class="custom-select pointer" id="inputAcredGrup">
									<option selected value="1" th:text="#{admin.calendar.form.input.grup.1}">Enero</option>
									<option value="4" th:text="#{admin.calendar.form.input.grup.4}">Abril</option>
									<option value="9" th:text="#{admin.calendar.form.input.grup.9}">Septiembre</option>
									<option value="11" th:text="#{admin.calendar.form.input.grup.11}">Noviembre</option>
								</select>
								<div class="input-group-append">
									<select class="custom-select pointer" id="inputAcredTambit">
										<option selected value="G" th:text="#{admin.calendar.form.input.tambit.g}">Grados</option>
										<option value="M" th:text="#{admin.calendar.form.input.tambit.m}">Másters</option>
										<option value="D" th:text="#{admin.calendar.form.input.tambit.d}">Doctorados</option>
									</select>
								</div>
								<div class="input-group-append">
									<span class="btn btn-primary" onclick="loadByAcreditacio();" th:text="#{admin.calendar.form.load}">Cargar</span>
								</div>
							</div>
						</div>
						<div class="uv-table-group-procedure">
							<label><span th:text="#{admin.instances.selector.center}">Centre(s)</span> (<span id="numCentresSelected">0</span>)</label>
							<select class="selectpicker" id="centresSelector" name="center" data-live-search="true" multiple data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}" required>
						        <option th:each="item : ${centers}" th:text="${#locale.language} == 'es' ? ${item.text}:${item.text2}" th:attr="value=${item.value}"></option>
						    </select>
						</div>
						<div class="uv-table-group-procedure">
							<label><span th:text="#{admin.instances.selector.titulation}">Titulació(ns)</span> (<span id="numTitsSelected">0</span>)</label>
							<select class="selectpicker" id="titulacionsSelector" name="titulation" data-live-search="true" multiple data-width="100%" data-actions-box="true" required>
						        <option th:each="item : ${titulations}" th:text="${#locale.language} == 'es' ? ${item.text}:${item.text2}" th:attr="value=${item.value}"></option>
						    </select>
						</div>
						<div class="uv-table-group-procedure">
							<label th:text="#{admin.calendar.form.date}">Fecha</label>
							<div class="input-group date datepicker"> 
								<input data-date-format="dd/mm/yyyy" type="text" id="dateSelector" name="dateSelector" 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>
					</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="newInstanceForm" th:text="#{global.confirm}">Confirmar</button>
	        </div>
	    </div>
	  </div>
	</div>
	
	<div class="modal fade" id="copyInstanceModal" tabindex="-1" role="dialog" aria-labelledby="copyInstanceModal" aria-hidden="true">
	  <div class="modal-dialog modal-lg">
	    <div class="modal-content">
		    <div class="modal-header">
		        <h5 class="modal-title" th:text="#{admin.calendar.form.titleCopy}">Copiar instancia existente</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="copyInstanceForm" style="margin-top:25px;">
			    		<input type="hidden" name="cid" id="cid">
						<div class="uv-table-group-procedure" id="cproceduresContainer">
							<label th:text="#{admin.instances.selector.procedure}">Proces(os)</label>
							<select class="selectpicker" id="cproceduresSelector" name="procedure" data-live-search="true" data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}" required>
						        <option th:each="item : ${procedures}" th:text="${#locale.language} == 'es' ? ${item.text2}:${item.text3}" th:attr="value=${item.value}"></option>
						    </select>
						</div>
						<div class="uv-table-group-procedure">
							<label th:text="#{admin.calendar.form.date}">Fecha</label>
							<div class="input-group date datepicker"> 
								<input data-date-format="dd/mm/yyyy" type="text" id="cdateSelector" name="data" 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>
					</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="copyInstanceForm" th:text="#{global.confirm}">Confirmar</button>
	        </div>
	    </div>
	  </div>
	</div>
	
	<div class="modal fade" id="editInstanceModal" tabindex="-1" role="dialog" aria-labelledby="editInstanceModal" aria-hidden="true">
	  <div class="modal-dialog modal-lg">
	    <div class="modal-content">
		    <div class="modal-header">
		        <h5 class="modal-title" th:text="#{admin.calendar.form.titleEdit}">Editar instancia planificada</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">
	        		<span class="btn btn-danger pointer" style="float:right;margin-top:-50px;width:40px;height:38px;border-radius:40px;" onclick="deleteEvent();" id="deletebtn" th:title="#{admin.calendar.form.delete}"><i class="fas fa-trash"></i></span>
	        		<span class="btn btn-secondary pointer" style="float:right;margin-top:-50px;width:40px;height:38px;border-radius:40px;" onclick="copyEvent();" id="copybtn" th:title="'Copiar'"><i class="fas fa-copy"></i></span>
	        		<button type="button" class="btn btn-primary" style="float:right;margin-right:50px;margin-top:-50px;width:40px;height:38px;border-radius:40px;" onclick="instantiate();" id="instantiatebtn" th:title="#{admin.calendar.form.instanciar}"><i class="fas fa-step-forward"></i></button>
			    	<form id="editInstanceForm" style="margin-top:50px;">
			    		<input type="hidden" id="eid" value="">
						<div class="uv-table-group-procedure">
							<label th:text="#{admin.instances.selector.procedure}">Proces(os)</label>
							<select class="selectpicker editFormItem" id="eproceduresSelector" name="procedure" data-live-search="true" data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}" required>
						        <option th:each="item : ${procedures}" th:text="${#locale.language} == 'es' ? ${item.text2}:${item.text3}" th:attr="value=${item.value}"></option>
						    </select>
						</div>
						<div class="uv-table-group-procedure">
							<label th:text="#{admin.instances.selector.center}">Centre(s)</label>
							<select class="selectpicker editFormItem" id="ecentresSelector" name="center" data-live-search="true" multiple data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}" required>
						        <option th:each="item : ${centers}" th:text="${#locale.language} == 'es' ? ${item.text}:${item.text2}" th:attr="value=${item.value}"></option>
						    </select>
						</div>
						<div class="uv-table-group-procedure">
							<label th:text="#{admin.instances.selector.titulation}">Titulació(ns)</label>
							<select class="selectpicker editFormItem" id="etitulacionsSelector" name="titulation" data-live-search="true" multiple data-width="100%" data-actions-box="true" required>
						        <option th:each="item : ${titulations}" th:text="${#locale.language} == 'es' ? ${item.text}:${item.text2}" th:attr="value=${item.value}"></option>
						    </select>
						</div>
						<div class="uv-table-group-procedure">
							<label th:text="#{admin.calendar.form.date}">Fecha</label>
							<div class="input-group date datepicker"> 
								<input data-date-format="dd/mm/yyyy" type="text" id="edateSelector" name="dateSelector" 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>
					</form>
				</div>
			</div>
			<div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal" th:text="#{global.close}">Cerrar</button>
		        <button class="btn btn-success" type="submit" form="editInstanceForm" th:text="#{global.confirm}" id="editbtn">Confirmar</button>
	        </div>
	    </div>
	  </div>
	</div>
	
	<div class="modal fade" id="resultsInstanceModal" tabindex="-1" role="dialog" aria-labelledby="resultsInstanceModal" aria-hidden="true" style="overflow: scroll;">
	  <div class="modal-dialog modal-lg">
	    <div class="modal-content">
		    <div class="modal-header">
		        <h5 class="modal-title">Resultados de la instanciació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="results">
				</div>
			</div>
			<div class="modal-footer">
		        <button type="button" class="btn btn-secondary" data-dismiss="modal">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/bootstrap/bootstrap.min.js}"></script>
	<script th:src="@{/js/fa/all.js}"></script>
	<script th:src="@{/js/jquery/jquery.dataTables.min.js}"></script>
	<script th:src="@{/js/jquery/jquery.dataTables.responsive.min.js}"></script>
	<script th:src="@{/js/jquery/jquery.dataTables.rowReorder.min.js}"></script>
	<script th:src="@{/js/bootstrap/dataTables.bootstrap4.min.js}"></script>
	<script th:src="@{/js/jquery-easing/jquery.easing.min.js}"></script>
	<script th:src="@{/js/fullcalendar/index.global.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 calendar;
		var locale = '[[${#locale.language}]]';
		var tmpEvent = {};
		var acredSelection = false;
		var acredCentres = [];
		var acredTitulacions = [];
	
		$(document).ready(function(){ 
			layout = new Layout("");
			layout.initTableLayout({paging:false});
			layout.closeLoadingSpinner(".uv-loading-spinner");
			
			$('#proceduresSelector').val('').trigger('change');
			$('#centresSelector').val('').trigger('change');
			$('#centresSelector').change(completeTitulations);
			$('#titulacionsSelector').change(updateCounters);
			$('#proceduresSelector').change(complete);
			
			$('.datepicker').datepicker({
				language: locale,
			    autoclose: true,
			    todayHighlight: true,
			    orientation: "bottom center",
			    clearBtn: true
			});
			
			var calendarEl = document.getElementById('calendar');
			calendar = new FullCalendar.Calendar(calendarEl, {
			  initialView: 'dayGridMonth',
			  locale: 'es',
			  weekNumberCalculation: 'ISO',
			  editable : true,
              droppable : true, 
              customButtons: {
           	    btnAdd: {
           	      text: "[[#{admin.calendar.form.add}]]",
           	      click: function() {
           	    	$('#newInstanceModal').modal('toggle');
           	      }
           	    }
           	  },
           	  headerToolbar: {
           	    center: 'btnAdd',
           	    right: 'today prev,next'
           	  },
              events: [],
              eventReceive : function(info) {
                  alert(info.event.title);
              },
              eventDrop : function(info) {
            	  var d = info.event.startStr.split('-');
            	  if(info.event._def.extendedProps.status !== 'P'){
            		  info.revert();
            		  return false;
            	  }
                  if (!confirm("[[#{admin.calendar.form.changeDate}]] "+d[2]+'/'+d[1]+'/'+d[0]+"?")) {
                      info.revert();
                  }
                  else{
                	  console.log(info.event._def.extendedProps.titulacions);
                	  var d = info.event.startStr.split('-');
                	  var params = {
          			    	idProces: info.event._def.extendedProps.idProces,
          			    	data: d[2]+'/'+d[1]+'/'+d[0],
          			    	titulacions: info.event._def.extendedProps.titulacions.toString(),
          					centres: info.event._def.extendedProps.centres.toString()
          			    }
          			    
          			    $.post("/calendar/"+info.event.id, params, function(d){
          			    	calendar.removeAllEvents();
          					initCalendar();
          			    });
                  }
              },
              eventClick : function(info) {  
            	  tmpEvent = info.event._def.extendedProps;
            	  setEditData(info.event._def.publicId, info.event._def.extendedProps);
            	  $("#editInstanceModal").modal();                               
              },
			});
			calendar.render();
			
			initCalendar();
			
			$('#newInstanceForm').submit(function(e) {
			    e.preventDefault();
			    		    
			    var params = {
			    	idProces: $('#proceduresSelector').val(),
			    	data: $('#dateSelector').val(),
			    	titulacions: $('#titulacionsSelector').val().toString(),
					centres: $('#centresSelector').val().toString()
			    }
			    
			    $.post("/calendar", params, function(d){
			    	var date = d.dataStr.substring(0,10).split('-');
			    	var event = {
		    			id: d.idCalendari,
					    title: locale == 'es' ? d.titolCas : d.titolVal,
					    start: d.dataStr,
					    indate: date[2]+'/'+date[1]+'/'+date[0],
					    idProces: d.idProces,
					    titulacions: JSON.parse(d.titulacions),
						centres: JSON.parse(d.centres),
						color: d.color,
						status: 'P',
						allDay: true
			    	}
			    	calendar.addEvent(event);
			    });
			    $('#newInstanceModal').modal('toggle');
			    return false;
			});
			
			$('#editInstanceForm').submit(function(e) {
				e.preventDefault();
			    
			    var params = {
			    	idProces: $('#eproceduresSelector').val(),
			    	data: $('#edateSelector').val(),
			    	titulacions: $('#etitulacionsSelector').val().toString(),
					centres: $('#ecentresSelector').val().toString()
			    }
			    
			    $.post("/calendar/"+$('#eid').val(), params, function(d){
			    	calendar.removeAllEvents();
					initCalendar();
			    });
			    $('#editInstanceModal').modal('toggle');
			    return false;
			});
			
			$('#copyInstanceForm').submit(function(e) {
				e.preventDefault();
			    
			    var params = {
			    	idProces: $('#cproceduresSelector').val(),
			    	data: $('#cdateSelector').val(),
			    	titulacions: $('#etitulacionsSelector').val().toString(),
					centres: $('#ecentresSelector').val().toString(),
			    	instancia: $('#cid').val()
			    }
			    
			    $.post("/calendar", params, function(d){
			    	var date = d.dataStr.substring(0,10).split('-');
			    	var event = {
		    			id: d.idCalendari,
					    title: locale == 'es' ? d.titolCas : d.titolVal,
					    start: d.dataStr,
					    indate: date[2]+'/'+date[1]+'/'+date[0],
					    idProces: d.idProces,
					    titulacions: JSON.parse(d.titulacions),
						centres: JSON.parse(d.centres),
						color: d.color,
						status: 'P',
						allDay: true
			    	}
			    	calendar.addEvent(event);
			    });
			    $('#copyInstanceModal').modal('toggle');
			    return false;
			});
			
			$('#selectorsByGroup').hide();
						
		});	
		
		function copyEvent(){
			$('#editInstanceModal').modal('toggle');
			$('#cid').val($('#eid').val());
			$('#copyInstanceModal').modal('toggle');
			
		}
		
		function initCalendar(){
			$.get("/calendar", function(data){
				data.forEach(function(d){
					var date = d.data.substring(0,10).split('-');
			    	var event = {
		    			id: d.idCalendari,
					    title: locale == 'es' ? d.titolCas : d.titolVal,
					    start: d.data,
					    indate: date[2]+'/'+date[1]+'/'+date[0],
					    idProces: d.idProces,
					    titulacions: JSON.parse(d.titulacions),
						centres: JSON.parse(d.centres),
						color: d.color,
						status: d.status,
						allDay: true
			    	}
			    	calendar.addEvent(event);
				});
		    	
		    });
		}
		
		function deleteEvent(){
			$.ajax({
			    url: '/calendar',
			    type: 'DELETE',
			    data: {id:$('#eid').val()},
			    success: function(d) {
			    	calendar.removeAllEvents();
					initCalendar();
			    }
			});
		}
						
		function setEditData(id){
			if(tmpEvent.status === 'P'){
				$('#editbtn').show();
				$('#instantiatebtn').show();
				$('#deletebtn').show();
				$('.editFormItem').prop("disabled", false);
			}
			else if(tmpEvent.status === 'E'){
				$('#instantiatebtn').show();
				$('#deletebtn').show();
				$('#editbtn').hide();
				$('.editFormItem').prop("disabled", true);
			}
			else {
				$('#instantiatebtn').hide();
				$('#editbtn').hide();
				$('#deletebtn').hide();
				$('.editFormItem').prop("disabled", true);
			}
			
			$('#eid').val(id);
			$('#edateSelector').datepicker("setDate", tmpEvent.indate);
			$('#eproceduresSelector').val(tmpEvent.idProces).trigger('change');
			var params = {'procedure':$('#eproceduresSelector').val()};
			$.post("/find/centers", params, function(data){ 
				$("#ecentresSelector").html(data).selectpicker('refresh'); 
				$('#ecentresSelector').val(tmpEvent.centres).trigger('change');
				var params = {'procedure':$('#eproceduresSelector').val(), 'centers[]':$('#ecentresSelector').val()};
				$.post("/find/titulacions2", params, function(data){ 
					$("#etitulacionsSelector").html(data).selectpicker('refresh'); 
					$('#etitulacionsSelector').val(tmpEvent.titulacions).trigger('change');
				});
			});
		}
		
		function instantiate(){
			var params = {
				id: $('#eid').val(),
				idProces: $('#eproceduresSelector').val(),
				centres: $('#ecentresSelector').val().toString(),
				titulacions: $('#etitulacionsSelector').val().toString()
			}
			$('#editInstanceModal').modal('toggle');
			$.post("/instantiate", params, function(data){ 
				$('#resultsInstanceModal').modal('toggle');
				data.forEach(function(d){
					var t = d.replace('[OK]', '<span style="color:green">[OK]</span>').replace('[ERROR]', '<span style="color:firebrick">[ERROR]</span>')
					$("#results").append('<span>'+t+'</span><br>');
				});
				calendar.removeAllEvents();
				initCalendar();
			});
		}

		function complete(){
			completeCenters();
			completeTitulations();
			$('#selectionType').attr('disabled', false)
		}
		
		function completeCenters(){
			var params = {'procedure':$('#proceduresSelector').val()};
			$.post("/find/centers", params, function(data){ 
				$("#centresSelector").html(data).selectpicker('refresh'); 
				$('#centresSelector').val('').trigger('change');
				$('#numCentresSelected').text($('#centresSelector').val().length);
			});
		}
		
		function completeTitulations(){
			if ($('#centresSelector').val() !== null && $('#centresSelector').val().length > 0){
				var params = {'procedure':$('#proceduresSelector').val(), 'centers[]':$('#centresSelector').val()};
				$.post("/find/titulations2", params, function(data){ 
					$("#titulacionsSelector").html(data).selectpicker('refresh'); 
					if(acredSelection){
						$('#titulacionsSelector').selectpicker('val', acredTitulacions);
						acredSelection = false;
					}
					else{
						$('#titulacionsSelector').val('').trigger('change');
					}
					$('#numTitsSelected').text($('#titulacionsSelector').val().length);
				});
			}
		}
		
		function toggleSelectionType(e){
			if($(e).is(':checked')){
				$('#selectorsByGroup').show();
			}
			else{
				$('#selectorsByGroup').hide();
			}
		}
		
		function loadByAcreditacio(){
			$.get(`/admin/acredita/${$('#inputAcredCurs').val()}/${$('#inputAcredGrup').val()}/${$('#inputAcredTambit').val()}`, 
				function(data){
					acredSelection = true;
					acredCentres = [];
					acredTitulacions = [];
					data.forEach(function(d){
						acredCentres.push(d.lugarCentre);
						acredTitulacions.push(d.lugar);
					});
					if(acredCentres.length < 1){
						$('#titulacionsSelector').val('').trigger('change');
					}
					$('#centresSelector').selectpicker('val', acredCentres);
					$('#centresSelector').trigger('change');
					$('#numCentresSelected').text($('#centresSelector').val().length);
		    });			
		}
		
		function updateCounters(){
			$('#numCentresSelected').text($('#centresSelector').val().length);
			$('#numTitsSelected').text($('#titulacionsSelector').val().length);
		}
		
	</script>

</body>

</html>
