<!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 new_access" th:if="${new_access}" style="float:right;margin-top:-35px;">
					<div class="row uv-mar-t-20">
						<span class="alert alert-warning alert-dismissible fade show" role="alert">
							<span th:text="#{login.session.info1}"></span>
							<br>
							<span th:text="#{login.session.info2}"></span>
							<button type="button" class="close" data-dismiss="alert" aria-label="Close">
						    	<span aria-hidden="true">&times;</span>
						  	</button>
						</span>
					</div>
				</div>
				<div class="uv-table-group-procedure-info">
					<div class="uv-table-title">
						<h6 class="uv-table-header-h6" th:text="#{procedures.title}"></h6>
						<hr class="uv-procedure-hr">
						<span th:text="#{procedures.subtitle}"></span>
						<hr class="uv-procedure-hr">
					</div>
					<div class="col">
						<span class="legend-active" style="cursor:pointer;" onclick="filter('active');"><span th:text="#{procedures.legend.active}">Activa</span></span>
						<span class="legend-expired" style="cursor:pointer;" onclick="filter('expired');"><span th:text="#{procedures.legend.expired}">Atrasada</span></span>
						
						<div class="btn-toolbar" role="toolbar" style="float:right;margin-top:-7px;">
							<div class="btn-group mr-2 w-auto ml-auto" role="group" aria-label="Acciones sobre la lista de tareas pendientes">
								<button class="btn btn-secondary pointer" style="width:38px; height:38px;" onclick="download();" th:title="#{supervision.filter.download1}"><i class="fas fa-file-excel"></i></button>
								<button class="btn btn-secondary pointer" style="width:38px; height:38px;" onclick="reset();" th:title="#{supervision.filter.none}"><svg style="width:20px;height:20px;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="122.88px" height="110.668px" viewBox="0 0 122.88 110.668" enable-background="new 0 0 122.88 110.668" xml:space="preserve"><g><path fill="#FFFFFF" fill-rule="evenodd" clip-rule="evenodd" d="M91.124,15.645c12.928,0,23.406,10.479,23.406,23.406 c0,12.927-10.479,23.406-23.406,23.406c-12.927,0-23.406-10.479-23.406-23.406C67.718,26.125,78.197,15.645,91.124,15.645 L91.124,15.645z M2.756,0h117.322c1.548,0,2.802,1.254,2.802,2.802c0,0.848-0.368,1.622-0.996,2.139l-10.667,13.556 c-1.405-1.375-2.95-2.607-4.614-3.672l6.628-9.22H9.43l37.975,46.171c0.59,0.516,0.958,1.254,0.958,2.102v49.148l21.056-9.623 V57.896c1.651,1.9,3.548,3.582,5.642,4.996v32.133c0,1.105-0.627,2.064-1.586,2.506l-26.476,12.758 c-1.327,0.773-3.023,0.332-3.798-1.033c-0.258-0.441-0.368-0.92-0.368-1.4V55.02L0.803,4.756c-1.07-1.106-1.07-2.839,0-3.945 C1.355,0.258,2.056,0,2.756,0L2.756,0z M96.93,28.282c1.328-1.349,3.489-1.355,4.825-0.013c1.335,1.342,1.341,3.524,0.013,4.872 l-5.829,5.914l5.836,5.919c1.317,1.338,1.299,3.506-0.04,4.843c-1.34,1.336-3.493,1.333-4.81-0.006l-5.797-5.878l-5.807,5.889 c-1.329,1.349-3.489,1.355-4.826,0.013c-1.335-1.342-1.341-3.523-0.013-4.872l5.83-5.913l-5.836-5.919 c-1.317-1.338-1.3-3.507,0.04-4.843c1.339-1.336,3.492-1.333,4.81,0.006l5.796,5.878L96.93,28.282L96.93,28.282z"/></g></svg></button>
								<button class="btn btn-secondary pointer" style="width:38px; height:38px;" onclick="sort('date');" th:title="#{supervision.filter.date}"><i class="sort-btn-date fas fa-sort-numeric-up"></i></button>
								<button class="btn btn-secondary pointer" style="width:38px; height:38px;" onclick="sort('alpha');" th:title="#{supervision.filter.apha}"><i class="sort-btn-alpha fas fa-sort-alpha-up"></i></button>
							</div>
						</div>
						
					</div>
				</div>
				<hr class="uv-procedure-hr">
				<div th:if="${procedure_list != null}">
					<div th:if="${#lists.size(procedure_list) == 0}">
						<br>
						<span th:text="#{global.noTasks}"></span>
					</div>
				</div>
				<div id="uv-procedure-container">
					<div class="uv-table-group-procedure" th:each="item,id : ${procedure_list}" th:attr="onclick='openProcedure('+${item.idInstancia}+')', data-id=${item.idInstancia}, data-alpha=${item.nomProces}, data-name=${item.titolCas}, data-date=${item.dataTascaActiva}" 
					th:classappend="${(item.tascaActivaExpired == true?'procedure-expired':'procedure-active')}">
						<div class="uv-table-title procedure">
							<input type="hidden" proc_val="id" th:value="${item.idInstancia}">
							<input type="hidden" proc_val="code" th:value="${item.nomProces}">
							<input type="hidden" proc_val="name" th:value="${#locale.language} == 'es' ? ${item.titolCas}:${item.titolVal}">
							<input type="hidden" proc_val="year" th:value="${item.cursAvaluat-1}+' - '+${item.cursAvaluat}">
							<input type="hidden" proc_val="center" th:value="${#locale.language} == 'es' ? ${item.centreCas}:${item.centreVal}">
							<input type="hidden" proc_val="tit" th:value="${#locale.language} == 'es' ? ${item.titulacioCas}:${item.titulacioVal}">
							<input type="hidden" proc_val="status" th:value="${item.estat}">
							<input type="hidden" proc_val="datelim" th:value="${item.dataLimTascaActiva}">
							<input type="hidden" proc_val="date" th:value="${item.dataTascaActiva}">
							<input type="hidden" proc_val="t_active" th:value="${#locale.language} == 'es' ? ${item.nomTascaActivaCas}:${item.nomTascaActivaVal}">
							<div class="row">
								<div class="col-md-12">
									<span>
										<strong th:text="${item.nomProces}"></strong>
										<span th:text="${#locale.language} == 'es' ? ${item.titolCas}:${item.titolVal}"></span>
									</span>
								</div>
								<div class="w-100"></div>
								<div class="col-md-7">
									<span><strong th:text="#{procedures.center}"></strong>: <span th:text="${#locale.language} == 'es' ? ${item.centreCas}:${item.centreVal}"></span></span>
									<br>
									<span><strong th:text="#{procedures.titulation}"></strong>: <span th:text="${#locale.language} == 'es' ? ${item.titulacioCas}:${item.titulacioVal}"></span></span>
									<br>
									<span><strong th:text="#{procedures.year.eval}"></strong>: <span th:text="${item.cursAvaluat-1}"></span> - <span th:text="${item.cursAvaluat}"></span></span>
									(<span th:text="#{procedures.year.act}"></span> 
									<span><span th:text="${item.cursActivacio-1}"></span> - <span th:text="${item.cursActivacio}"></span></span>)
								</div>	
								<div class="col-md-5">
									<span>
										<strong th:text="#{procedures.activeTask}"></strong>: <span th:text="${#locale.language} == 'es' ? ${item.nomTascaActivaCas}:${item.nomTascaActivaVal}"></span>
										<br>
										<span><strong th:text="#{procedures.dateInstance}"></strong>: <span th:text="${item.dataTascaActiva}"></span></span>
										<br>
										<span><strong th:text="#{procedures.dateLimit}"></strong>: <span th:text="${item.dataLimTascaActiva}"></span></span>
									</span>
								</div>
								<div class="w-100"></div>
								<div class="col">
									<p th:text="${#locale.language} == 'es' ? ${item.descripcioCas}:${item.descripcioVal}"></p>
								</div>
							</div>
						</div>
						<hr class="uv-procedure-hr">
					</div>
				</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/saic.js}"></script>
	<script th:src="@{/js/datepicker/bootstrap-datepicker.min.js}"></script>
	<script th:src="@{/js/csv-to-xls/xlsx-0.20.0.min.js}"></script>
  
	<script type="text/javascript">
	
		var sort_key = getCookie('sort_key');
		var sort_typ = getCookie('sort_typ');
		var filter_act = getCookie('filter');

		$( document ).ready(function(){ 
			layout = new Layout("");
			layout.initTableLayout({paging:false});
			layout.closeLoadingSpinner(".uv-loading-spinner");
			if(sort_key != '' && sort_typ != ''){
				sort_initial(sort_key, sort_typ);
			}
			if(filter_act != ''){
				filter(filter_act);
			}
		});
		
		function openProcedure(id){
			window.location.replace('/procedure/'+id);
		}
		
		function filter(t){
			if(t != 'none'){
				$('.uv-table-group-procedure').hide();
				$('.procedure-'+t).show();
				setCookie('filter', t, 1);
			}
		}
		
		function downloaddd(){
			var rows = [];
			rows.push(['instancia','codigo','procedimiento','curso','centro','titulacion','estado','tarea_activa','fecha instancia','fecha vencimiento']);
			$('.uv-table-group-procedure:visible').each(function(i, d){
				rows.push([$(d).find("input[proc_val='id']").first().val(),
						  $(d).find("input[proc_val='code']").first().val(),
						  $(d).find("input[proc_val='name']").first().val(),
						  $(d).find("input[proc_val='year']").first().val(),
						  $(d).find("input[proc_val='center']").first().val(),
						  $(d).find("input[proc_val='tit']").first().val(),
						  $(d).find("input[proc_val='status']").first().val(),
						  $(d).find("input[proc_val='t_active']").first().val(),
						  $(d).find("input[proc_val='date']").first().val(),
						  $(d).find("input[proc_val='datelim']").first().val()]);
			});
			var csv = rows.map(e => e.join(",")).join("\n");
			downloadBlob(csv, 'export.csv', 'text/csv;charset=utf-8;');
		}
		
		function download(){
			var rows = [];
			$('.uv-table-group-procedure:visible').each(function(i, d){
				rows.push({"instancia":$(d).find("input[proc_val='id']").first().val(),
							"codigo":$(d).find("input[proc_val='code']").first().val(),
							"procedimiento":$(d).find("input[proc_val='name']").first().val(),
							"curso":$(d).find("input[proc_val='year']").first().val(),
							"centro":$(d).find("input[proc_val='center']").first().val(),
							"titulacion":$(d).find("input[proc_val='tit']").first().val(),
							"estado":$(d).find("input[proc_val='status']").first().val(),
							"tarea_activa":$(d).find("input[proc_val='t_active']").first().val(),
							"fecha_instancia":$(d).find("input[proc_val='date']").first().val(),
							"fecha_vencimiento":$(d).find("input[proc_val='datelim']").first().val()});
			});
			const sheet = XLSX.utils.json_to_sheet(rows);
			const book = XLSX.utils.book_new();
			XLSX.utils.book_append_sheet(book, sheet, "datos");
			XLSX.writeFile(book, "export.xlsx", { compression: true });
		}
		
		function downloadBlob(content, filename, contentType) {
			var blob = new Blob([content], { type: contentType });
			var url = URL.createObjectURL(blob);
			var pom = document.createElement('a');
			pom.href = url;
			pom.setAttribute('download', filename);
			pom.click();
		}
		
		function reset(){
			$('.uv-table-group-procedure').show();
			sort_initial('name', 'asc');
			setCookie('filter', 'none', 1);
			setCookie('sort_key', 'name', 1);
			setCookie('sort_typ', 'asc', 1);
		}
		
		function comparator_desc(a, b) {
			if (a.dataset[sort_key] == null || a.dataset[sort_key] == undefined)
				return -1;
            if (a.dataset[sort_key] > b.dataset[sort_key])
                return -1;
            if (a.dataset[sort_key] < b.dataset[sort_key])
                return 1;
            return 0;
        }
        
        function comparator_asc(a, b) {
			if (a.dataset[sort_key] == null || a.dataset[sort_key] == undefined)
				return 1;
            if (a.dataset[sort_key] < b.dataset[sort_key])
                return -1;
            if (a.dataset[sort_key] > b.dataset[sort_key])
                return 1;
            return 0;
        }
        
        function sort_initial(k, t){
        	var subjects = document.querySelectorAll(".uv-table-group-procedure");
            var subjectsArray = Array.from(subjects);
            if(t == 'asc'){
				sorted = subjectsArray.sort(comparator_asc);
            }
            else{
            	sorted = subjectsArray.sort(comparator_desc);
            }
            sorted.forEach(e =>
            document.querySelector("#uv-procedure-container")
            		.appendChild(e));
            sort_change_icons(sort_key, sort_typ);
        }
          
        function sort(k) {
        	sort_key = k;
        	var subjects = document.querySelectorAll(".uv-table-group-procedure");
            var subjectsArray = Array.from(subjects);
            let sorted;
        	if(sort_typ === '' || sort_typ == 'desc'){
				sort_typ = 'asc';
				sorted = subjectsArray.sort(comparator_asc);
			}
			else{
				sort_typ = 'desc';
				sorted = subjectsArray.sort(comparator_desc);
			}
            sorted.forEach(e =>
                document.querySelector("#uv-procedure-container")
                		.appendChild(e));
                    
            sort_change_icons(sort_key, sort_typ);
			
			setCookie('sort_key', sort_key, 1);
			setCookie('sort_typ', sort_typ, 1);
        }
        
        function sort_change_icons(k, t){
        	if(k == 'alpha'){
				$('.sort-btn-alpha').removeClass('fa-sort-alpha-down');
				$('.sort-btn-alpha').removeClass('fa-sort-alpha-up');
				if(t == 'asc'){
					$('.sort-btn-alpha').addClass('fa-sort-alpha-up');
				}
				else{
					$('.sort-btn-alpha').addClass('fa-sort-alpha-down');
				}	
			}
			else if(k == 'date'){
				$('.sort-btn-date').removeClass('fa-sort-numeric-down');
				$('.sort-btn-date').removeClass('fa-sort-numeric-up');
				if(t == 'asc'){
					$('.sort-btn-date').addClass('fa-sort-numeric-up');
				}
				else{
					$('.sort-btn-date').addClass('fa-sort-numeric-down');
				}
			}
        }
        
		function setCookie(cname, cvalue, exdays) {
			const d = new Date();
			d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
			let expires = "expires="+d.toUTCString();
			document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
		}
		
		function getCookie(cname) {
			let name = cname + "=";
			let ca = document.cookie.split(';');
			for(let i = 0; i < ca.length; i++) {
				let c = ca[i];
				while (c.charAt(0) == ' ') {
					c = c.substring(1);
				}
				if (c.indexOf(name) == 0) {
					return c.substring(name.length, c.length);
				}
			}
			return "";
		}
		
		
	</script>
	
	<script th:if="${new_access}">
		setTimeout(function(){ $('.new_access').hide(); }, 10000);
	</script>

</body>

</html>
