<!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="#{admin.instances.title}"></h6>
						<hr class="uv-procedure-hr">
						<span th:text="#{admin.instances.subtitle}"></span>
					</div>
				</div>
				<div class="uv-table-group">
					<h5><br></h5>
				</div>
				<form enctype='multipart/form-data' method="POST" action="/admin/instances">
					<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">
						<label th:text="#{admin.instances.selector.center}">Centre(s)</label>
						<select class="selectpicker" id="centersSelector" name="center" 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 : ${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" id="titulationsSelector" name="titulation" data-live-search="true" 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" style="margin-top:50px;">
						<button th:text="#{admin.actions.instance}" class="btn btn-primary">Cargar</button>
					</div>
					<div class="uv-table-group uv-admin-instance-success" th:if="${success}">
						<span th:text="#{admin.instances.done}"></span>
						<br><br>
						<span th:each="item : ${successCas}" th:if="${#locale.language == 'es'}"><span th:text="${item}"></span><br></span>
						<span th:each="item : ${successVal}" th:if="${#locale.language != 'es'}"><span th:text="${item}"></span><br></span>
					</div>
					<div class="uv-table-group uv-admin-instance-error" th:if="${error}">
						<span th:text="#{admin.instances.error}"></span>
						<br><br>
						<span th:each="item : ${errorCas}" th:if="${#locale.language == 'es'}"><span th:text="${item}"></span><br></span>
						<span th:each="item : ${errorVal}" th:if="${#locale.language != 'es'}"><span th:text="${item}"></span><br></span>
					</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 type="text/javascript">
		
		$( document ).ready(function(){ 
			layout = new Layout("");
			layout.initTableLayout({paging:false});
			layout.closeLoadingSpinner(".uv-loading-spinner");
			$('#proceduresSelector').val('').trigger('change');
			$('#centersSelector').val('').trigger('change');
			$('#centersSelector').change(completeTitulations);
			$('#proceduresSelector').change(complete);
		});
		
		function complete(){
			completeCenters();
			completeTitulations();
		}
		
		function completeCenters(){
			console.log('cents');
			var params = {'procedure':$('#proceduresSelector').val()};
			$.post("/find/centers", params, function(data){ $("#centersSelector").html(data).selectpicker('refresh'); $('#centersSelector').val('').trigger('change');});
		}
		function completeTitulations(){
			if ($('#centersSelector').val() !== null && $('#centersSelector').val() !== ''){
				var params = {'procedure':$('#proceduresSelector').val(), 'center':$('#centersSelector').val()};
				$.post("/find/titulations", params, function(data){ 
					$("#titulationsSelector").html(data).selectpicker('refresh'); 
					$('#titulationsSelector').val('').trigger('change');
					/*if($('#centersSelector').val() === "0"){
						$('#titulationsSelector').removeAttr('required');
					}
					else{
						$('#titulationsSelector').attr('required', true);
					}*/
				});
			}
		}
		
		
	</script>

</body>

</html>
