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

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

<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" th:text="#{managers.title}"></h6>
						<hr class="uv-procedure-hr">
						<span th:text="#{managers.subtitle}"></span>
					</div>
				</div>
				<div class="uv-table-group-procedure" th:if="${sup_centres != null}">
					<label th:text="#{managers.centers}">Centre(s)</label>
					<select class="selectpicker" id="centersSelector" name="centers[]" 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 : ${sup_centres}" th:text="${#locale.language} == 'es' ? ${item.nomCas}:${item.nomVal}" th:attr="value=${item.lugar}"></option>
				    </select>
				</div>
				<div class="uv-table-group-procedure">
					<label th:text="#{managers.titulations}" th:if="${sup_titulacions != null}">Titulació(ns)</label>
					<select class="selectpicker" id="titulationsSelector" name="titulations[]" multiple data-live-search="true" data-width="100%" data-actions-box="true" required>
				        <option th:each="item : ${sup_titulacions}" th:text="${#locale.language} == 'es' ? ${item.nomCas}:${item.nomVal}" th:attr="value=${item.lugar}"></option>
				    </select>
				</div>
				<div class="uv-table-group-procedure" style="margin-top:50px;cursor: auto;">
					<button th:text="#{managers.search}" class="btn btn-primary" onclick="search();">Cargar</button>
				</div>
				<div class="uv-table-group" th:if="${roleExists != null}" style="margin-top:25px;">
					<span class="alert alert-warning" th:text="#{admin.managers.exists}"></span>
				</div>
				<div class="uv-table-group" style="margin-top:50px;cursor: auto;" th:if="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}">
					<div class="col-sm-12 uv-table-section">
						<div class="uv-table-header">
							<hr class="uv-table-header-hr">
							<br><br>
							<span class="btn btn-primary pointer" id="btnAddManager" style="float:right; cursor:pointer; margin-top:-45px;" data-toggle="modal" data-target="#newRoleModal" th:text="#{admin.managers.newRole}">Añadir responsable</span>
						</div>
					</div>
				</div>
				<div class="uv-table-group-procedure" id="results" style="cursor: auto;">
					<div th:if="${#ctx.containsVariable('results')}">
						<div th:replace="~{components/list_managers.html :: results}" ></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="newRoleModal" tabindex="-1" role="dialog" aria-labelledby="newRoleModal" aria-hidden="true" th:if="${#authentication.principal.isAdmin() or #authentication.principal.isGranted()}">
	  <div class="modal-dialog modal-lg">
	    <div class="modal-content">
		    <div class="modal-header">
		        <h5 class="modal-title" th:text="#{admin.managers.newRole}">Añadir responsable</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="newRoleForm" enctype='multipart/form-data' method="POST" action="/admin/userrole/new" style="margin-top:25px;">
						<div class="form-group">
							<label th:text="#{admin.managers.center}">Centre</label>
							<select class="selectpicker" id="roleCentersSelector" name="centre" data-live-search="true" data-width="100%" data-actions-box="true" required>
						        <option th:each="item : ${sup_centres}" th:text="${#locale.language} == 'es' ? ${item.nomCas}:${item.nomVal}" th:attr="value=${item.lugar}"></option>
						    </select>
						</div>
						<div class="form-group">
							<label th:text="#{admin.managers.titulation}">Titulació</label>
							<select class="selectpicker" id="roleTitulationsSelector" name="titulacio" data-live-search="true" data-width="100%" data-actions-box="true">
						        <option th:each="item : ${sup_titulacions}" th:text="${#locale.language} == 'es' ? ${item.nomCas}:${item.nomVal}" th:attr="value=${item.lugar}"></option>
						    </select>
						</div>
						<div class="form-group">
							<label th:text="#{admin.managers.user}">Usuario</label>&nbsp;&nbsp;&nbsp;<span class="pointer" style="color:#007bff;" onclick="newUser();" th:title="#{admin.managers.newUser}"><i id="addUserIcon" class="fas fa-plus"></i></span>
							<div id="userSelectorContainer">
								<select class="selectpicker" id="userSelector" name="usuari" data-dropup-auto="false" data-live-search="true" data-width="100%" data-actions-box="true" required>
							        <option th:each="item : ${users}" th:text="${item.nom}+' '+${item.cognoms}+' ('+${item.email}+')'" th:attr="value=${item.usuari}"></option>
							    </select>
						    </div>
						    <div class="form-group" id="newUserContainer">
						    	<div class="row">
							    	<div class="form-group col-6">
							    		<label  th:text="#{admin.managers.firstname}">Nombre</label>
							    		<input class="form-control" type="text" value="" name="firstname" id="firstname">
							    	</div>
							    	<div class="form-group col-6">
							    		<label th:text="#{admin.managers.lastname}">Apellidos</label>
							    		<input class="form-control" type="text" value=""  name="lastname" id="lastname">
							    	</div>
							    	<div class="form-group col-6">
							    		<label th:text="#{admin.managers.user}">Usuario</label>
							    		<input class="form-control" type="text" value="" name="username" id="username" onkeyup="setEmail();">
							    	</div>
							    	<div class="form-group col-6">
							    		<label  th:text="#{admin.managers.email}">Email</label>
							    		<input class="form-control" type="email" value="" name="email" id="email"> 
							    	</div>
						    	</div>
						    </div>
						</div>
						<div class="form-group">
							<label th:text="#{admin.managers.role}">Rol</label>
							<select class="selectpicker" id="roleSelector" name="idRol" data-dropup-auto="false" 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 : ${roles}" th:text="${#locale.language} == 'es' ? ${item.descripcioCas}:${item.descripcioVal}" th:attr="value=${item.idRol}"></option>
						    </select>
						</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="newRoleForm" th:text="#{global.confirm}">Confirmar</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/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/saic.js}"></script>
	<script th:src="@{/js/datepicker/bootstrap-datepicker.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 type="text/javascript" th:if="${#ctx.containsVariable('restoreCentres')}" th:inline="javascript">
		 var selcentres = /*[[${restoreCentres}]]*/ "";
		 selcentres = selcentres.replace('[', '').replace(']', '').split(',')
	</script>
	<script type="text/javascript" th:if="${#ctx.containsVariable('restoreTitulacions')}" th:inline="javascript">
		 var seltitulacions = /*[[${restoreTitulacions}]]*/ "";
		 seltitulacions = seltitulacions.replace('[', '').replace(']', '').split(',')
	</script>
	
	<script type="text/javascript">

		$( document ).ready(function(){ 
			layout = new Layout("");
			layout.initTableLayout({paging:false});
			layout.closeLoadingSpinner(".uv-loading-spinner");
			$('#newUserContainer').hide();
			if($('#centersSelector')){
				$('#centersSelector').val('').trigger('change');
				$('#centersSelector').change(complete_titulations);
			}
			if (typeof selcentres !== 'undefined') {
				$('#centersSelector').selectpicker('val', selcentres[0]).trigger('change');
				delete selcentres;
			}
			if (typeof seltitulacions !== 'undefined') {
				$.post("/search/managers/titulations", {'center':$('#centersSelector').val()}, function(data) {
					$("#titulationsSelector")
					   .html(data)
					   .selectpicker('refresh')
					   .val('')
					   .trigger('change');
					$('#titulationsSelector').selectpicker('val', seltitulacions.map(String)).trigger('refresh');
					delete seltitulacions;
				});
			}
			$('#titulationsSelector').on('change', function(){$("#newManagerFields").html('');});
			$('#roleCentersSelector').val('').trigger('change');
			$('#roleTitulationsSelector').val('').trigger('change');
			$('#roleSelector').val('').trigger('change');
			$('#userSelector').val('').trigger('change');
			$('#roleCentersSelector').change(complete_rolTitulacions);
			
		});
		
		function complete_titulations(){
			$.post("/search/managers/titulations", {'center':$('#centersSelector').val()}, function(data) {
				console.log(data);
				$("#titulationsSelector")
				   .html(data)
				   .selectpicker('refresh');
			});
		}
		
		function complete_rolTitulacions(){
			$.post("/search/managers/titulations", {'center':$('#roleCentersSelector').val()}, function(data) {
				$("#roleTitulationsSelector")
				   .html(data)
				   .selectpicker('refresh')
				   .val('')
				   .trigger('change');
			});
		}
		
		function search(){
			$.post("/managers/search", {'center':$('#centersSelector').val(), 'titulation[]':$('#titulationsSelector').val()}, function(data) {
				$("#results")
				   .html(data)
				   .selectpicker('refresh');
				$('#btnAddManager').show();
				$("#newManagerFields").html('');
				layout.initTableLayout({paging:false});
			});
		}
		
		function newUser(){
			if(!$('#newUserContainer').is(":visible")){
				$('#firstname').val('').attr('required', true);
				$('#lastname').val('').attr('required', true);
				$('#username').val('').attr('required', true);
				$('#email').val('').attr('required', true);
				$('#newUserContainer').show();
				$('#userSelector').attr('required', false);
				$('#userSelectorContainer').hide();
				$('#addUserIcon').removeClass('fa-plus');
				$('#addUserIcon').addClass('fa-minus');
			}
			else{
				$('#firstname').val('').attr('required', false);
				$('#lastname').val('').attr('required', false);
				$('#username').val('').attr('required', false);
				$('#email').val('').attr('required', false);
				$('#newUserContainer').hide();
				$('#userSelector').attr('required', true);
				$('#userSelectorContainer').show();
				$('#addUserIcon').removeClass('fa-minus');
				$('#addUserIcon').addClass('fa-plus');
			}	
		}
		
		function setEmail(){
			$('#email').val($('#username').val()+'@uv.es');
		}
		
	</script>

</body>

</html>
