<!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">
					<h5><br></h5>
				</div>
				<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.templates.title}"></h6>
						<hr class="uv-procedure-hr">
						<span th:text="#{admin.templates.subtitle}"></span>
					</div>
				</div>
				<div class="uv-table-group">
					<h5><br></h5>
				</div>
				<!-- 
				<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="form-group uv-table-group-procedure">
					<div class="form-group row">
						<label th:text="#{admin.instances.selector.center}">Centre</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="form-group row">
						<label th:text="#{admin.instances.selector.titulation}">Titulació</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="form-group row">
						<div class="col-4">
							<label>Evidencia</label>
							<select class="selectpicker" id="evSelector" name="evidencia" data-live-search="true" data-width="100%" data-actions-box="true" required>
						        <option th:each="item : ${evs}" th:text="${item}" th:attr="value=${item}"></option>
						    </select>
					    </div>
						<div class="col-4">
							<label th:text="#{admin.instances.selector.curs}">Curs</label>
							<select class="selectpicker" id="cursSelector" name="taskType" data-live-search="true" data-width="100%" data-actions-box="true" required>
						        <option th:each="i: ${#numbers.sequence(currentYear, currentYear-3)}" th:attr="value=${i}" th:text="${i}">2021</option>
						    </select>
						</div>
						<div class="col-4">
							<label th:text="#{admin.instances.selector.taskType}">Tipus de tasca</label>
							<select class="selectpicker" id="taskSelector" name="taskType" data-live-search="true" data-width="100%" data-actions-box="true" required>
						        <option value="1">Adjuntar evidencia</option>
						        <option value="12">Adjuntar evidencia editable</option>
						        <option value="14">Adjuntar evidencia, plantilla varias titulaciones</option>
						    </select>
						</div>
					</div>
				</div>
				<div class="uv-table-group" style="margin-top:50px;">
					<button th:text="#{admin.actions.load}" class="btn btn-primary" onclick="loadTemplates();">Cargar</button>
				</div>
				<div class="uv-table-group" id="templates_container">
					<br><br>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="editIndsModal" tabindex="-1" role="dialog" aria-labelledby="newRoleModal" aria-hidden="true">
	  <div class="modal-dialog modal-lg">
	    <div class="modal-content">
		    <div class="modal-header">
		        <h5 class="modal-title" th:text="'Modificar los indicadores asociados'">Modificar los indicadores asociados</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="editIndsContainer">
			    	
				</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="save();" data-dismiss="modal">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">
		
		$( 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 = {'center':$('#centersSelector').val()};
				$.post("/get/titulations", params, function(data){ 
					$("#titulationsSelector").html(data).selectpicker('refresh'); 
					$('#titulationsSelector').val('').trigger('change');
				});
			}
		}
		
		function loadTemplates(){
			//var params = {'procedure':$('#proceduresSelector').val(), 'center':$('#centersSelector').val(), 'titulation':$('#titulationsSelector').val()};
// 			var params = {'center':$('#centersSelector').val(), 'titulation':$('#titulationsSelector').val(),
// 					      'curs':$('#proceduresSelector').val(), };
// 			$.post("/tasca/find/templates", params, function(data){ 
// 				$("#templates_container").html(data);
// 			});

			var url = "/download/test/template2/"+$('#titulationsSelector').val()+"/"+$('#centersSelector').val();
			url += "/"+$('#evSelector').val()+"/"+$('#cursSelector').val()+"/"+$('#taskSelector').val();
			window.open(url, '_blank').focus();
			
		}
		
		function getSelectedInds(e){
			console.log($(e).attr('href').replace('/template/', '/template/inds/'));
			$.get($(e).attr('href').replace('/template/', '/template/inds/'), function(data){
				  $("#selectInds").html(data);
				  layout.footerFixBySelector(".uv-container");
			});
		}
		
		function showEditInds(ev){
			var params = {'procedure':$('#proceduresSelector').val(), 'center':$('#centersSelector').val(), 
						  'titulation':$('#titulationsSelector').val(), 'ev':ev};
			$.post('/find/template/inds', params, function(data){
				  $('#editIndsContainer').html(data);
				  $('#editIndsModal').modal('show');
			});
		}
		
		function removeRow(e){
			e.parentNode.parentNode.remove();
		}
		
		function addRow(e){		
			var tr = document.createElement('tr');
			var i = document.createElement('td');
			var e = document.createElement('td');
			var m = document.createElement('td');
			var d = document.createElement('td');
			
			$('#new_val_indicador').clone()
								   .attr('id', '')
								   .attr('name','indicador[]')
								   .val($('#new_val_indicador').val())
								   .appendTo($(i));
			$('#new_val_enquesta').clone()
								  .attr('id', '')
								  .attr('name','enquesta[]')
								  .val($("#new_val_enquesta").find("option:selected").val())
								  .appendTo($(e));
			$('#new_val_media').clone()
							   .attr('id', '')
							   .attr('name','media[]')
							   .val($('#new_val_media').val())
							   .appendTo($(m));
			$(d).html('<span class="pointer" style="color:red;" onclick="removeRow(this);"><i class="fas fa-times"></i></span>');
			$(i).appendTo(tr);
			$(e).appendTo(tr);
			$(m).appendTo(tr);
			$(d).appendTo(tr);
			$(tr).appendTo($('#inds_table_body'));
			
			$('#new_val_indicador').val('');
			$('#new_val_media').val('');
		}
		
		function save(){
			$.post('/admin/templates/inds/update', $('#inds_form').serialize())
		}
		
		
	</script>

</body>

</html>
