<!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="#{supervision.title}"></h6>
						<hr class="uv-procedure-hr">
						<span th:text="#{supervision.subtitle}"></span>
					</div>
				</div>
				<form enctype='multipart/form-data' method="POST" action="/supervision/search">
					<div class="uv-table-group-procedure" th:if="${granted}">
						<label th:text="#{supervision.searchBy}">Cercar per </label>
						<select class="selectpicker" id="typeSelector" name="searchType" data-width="100%" required>
					        <option th:text="#{supervision.procedures}" value="procedures" selected></option>
					        <option th:text="#{supervision.evidences}" value="evidences"></option>
					    </select>
					</div>
					<div class="uv-table-group-procedure" th:if="${sup_cents != null and granted}">
						<label th:text="#{supervision.centers}">Centre(s)</label>
						<select class="selectpicker" id="centersSelector" name="centers[]" data-live-search="true" multiple data-width="100%" data-actions-box="true" required>
					        <option th:each="item : ${sup_cents}" 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="#{supervision.titulations}">Titulació(ns)</label>
						<select class="selectpicker" id="titulationsSelector" name="titulations[]" data-live-search="true" multiple data-width="100%" data-actions-box="true" required>
					        <option th:each="item : ${sup_orgs}" 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="#{supervision.years}">Curs(os)</label>
						<select class="selectpicker" id="yearsSelector" name="years[]" data-live-search="true" multiple data-width="100%" data-actions-box="true" required>
					        <option th:each="item : ${sup_years}" th:text="${item.text}" th:attr="value=${item.value}"></option>
					    </select>
					</div>
					<div class="uv-table-group-procedure" id="proceduresContainer">
						<label th:text="#{supervision.procedures}">Proces(os)</label>
						<select class="selectpicker" id="proceduresSelector" name="procedures[]" data-live-search="true" multiple data-width="100%" data-actions-box="true" required>
					        <option th:each="item : ${sup_procs}" th:text="${#locale.language} == 'es' ? ${item.text2}:${item.text3}" th:attr="value=${item.text}"></option>
					    </select>
					</div>
					<div class="uv-table-group-procedure" th:if="${sup_evs != null and granted}" id="evidencesContainer">
						<label th:text="#{supervision.evidences}">Evidencia(es)</label>
						<select class="selectpicker" id="evidencesSelector" name="evidences[]" data-live-search="true" multiple data-width="100%" data-actions-box="true">
					        <option th:each="item : ${sup_evs}" th:text="${#locale.language} == 'es' ? ${item.text} + ', ' +${item.text2}:${item.text} + ', ' +${item.text3}" th:attr="value=${item.text}"></option>
					    </select>
					</div>
					<div class="uv-table-group-procedure" style="margin-top:50px;">
						<button th:text="#{supervision.search}" class="btn btn-primary">Cargar</button>
					</div>
				</form>
			</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 th:inline="javascript" th:if="${restore == null}" type="text/javascript">
		var restore = 0; 
	</script>
	
	<script th:inline="javascript" th:if="${restore != null}" type="text/javascript">
		var restore = 1;
		function restore_search(){
			$('#typeSelector').selectpicker('val', /*[[${restore.searchType}]]*/);
			$('#centersSelector').selectpicker('val', /*[[${restore.centres}]]*/);
			$.post("/search/titulations", {'centers[]':$('#centersSelector').val()}, function(data){ 
				$("#titulationsSelector").html(data).selectpicker('refresh'); 
				$('#titulationsSelector').selectpicker('val', /*[[${restore.titulacions}]]*/);
				var params = (($('#centersSelector')) ? {'centers[]':$('#centersSelector').val(), 'titulations[]':$('#titulationsSelector').val()} : {'titulations[]':$('#titulationsSelector').val()});
				$.post("/search/years", params, function(data){ 
					$("#yearsSelector").html(data).selectpicker('refresh'); 
					$('#yearsSelector').selectpicker('val', /*[[${restore.cursos}]]*/);	
					var params = (($('#centersSelector')) ? {'centers[]':$('#centersSelector').val(), 'titulations[]':$('#titulationsSelector').val(), 'years[]':$('#yearsSelector').val()} : {'titulations[]':$('#titulationsSelector').val(), 'years[]':$('#yearsSelector').val()});
					if($('#typeSelector').val() == 'evidences'){ 
						$.post("/search/evidences", params, function(data){ 
							$("#evidencesSelector").html(data).selectpicker('refresh');
							$('#evidencesSelector').selectpicker('val', /*[[${restore.evidencies}]]*/);
						}); 
					}
					else { 
						$.post("/search/procedures", params, function(data){ 
							$("#proceduresSelector").html(data).selectpicker('refresh'); 
							$('#proceduresSelector').selectpicker('val', /*[[${restore.procediments}]]*/);
						}); 
					}
				});
			});
		}
	</script>
	
	<script type="text/javascript">
	
		
		$( document ).ready(function(){ 
			layout = new Layout("");
			layout.initTableLayout({paging:false});
			layout.closeLoadingSpinner(".uv-loading-spinner");
			if($('#centersSelector')){ $('#centersSelector').change(complete_titulations); }
			$('#titulationsSelector').change(complete_years);
			$('#yearsSelector').change(complete_procedures);
			if($('#typeSelector')){ $('#evidencesContainer').hide(); $('#typeSelector').change(change_type); }
			if(restore == 1){
				restore_search();
			}
		});
		
		function complete_titulations(){
			$.post("/search/titulations", {'centers[]':$('#centersSelector').val()}, function(data){ $("#titulationsSelector").html(data).selectpicker('refresh'); });
		}
		
		function complete_years(){
			var params = (($('#centersSelector')) ? {'centers[]':$('#centersSelector').val(), 'titulations[]':$('#titulationsSelector').val()} : {'titulations[]':$('#titulationsSelector').val()});
			$.post("/search/years", params, function(data){ $("#yearsSelector").html(data).selectpicker('refresh'); });
		}
		
		function complete_procedures(){
			var params = (($('#centersSelector')) ? {'centers[]':$('#centersSelector').val(), 'titulations[]':$('#titulationsSelector').val(), 'years[]':$('#yearsSelector').val()} : {'titulations[]':$('#titulationsSelector').val(), 'years[]':$('#yearsSelector').val()});
			if($('#typeSelector').val() == 'evidences'){ $.post("/search/evidences", params, function(data){ $("#evidencesSelector").html(data).selectpicker('refresh'); }); }
			else { $.post("/search/procedures", params, function(data){ $("#proceduresSelector").html(data).selectpicker('refresh'); }); }
		}
		
		function change_type(){
			if($('#typeSelector').val() == 'procedures'){
				$('#proceduresContainer').show();
				$('#proceduresSelector').attr('required', true);
				$('#evidencesContainer').hide();
				$('#evidencesSelector').attr('required', false);
				
				$("#centersSelector").val('default').selectpicker("refresh");
				$("#titulationsSelector").val('default').selectpicker("refresh");
				$("#yearsSelector").val('default').selectpicker("refresh");
				$("#proceduresSelector").val('default').selectpicker("refresh");
				$("#evidencesSelector").val('default').selectpicker("refresh");
			}
			else{
				$('#proceduresContainer').hide();
				$('#proceduresSelector').attr('required', false);
				$('#evidencesContainer').show();
				$('#evidencesSelector').attr('required', true);
				
				$("#centersSelector").val('default').selectpicker("refresh");
				$("#titulationsSelector").val('default').selectpicker("refresh");
				$("#yearsSelector").val('default').selectpicker("refresh");
				$("#proceduresSelector").val('default').selectpicker("refresh");
				$("#evidencesSelector").val('default').selectpicker("refresh");
			}
		}
		
	</script>

</body>

</html>
