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

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

<link th:href="@{/js/jquery/datatables.min.css}" rel="stylesheet"/>

<style>
	.file-drop-area {
		position: relative;
		display: flex;
		align-items: center;
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		padding: 25px;
		border: 1px dashed black;
		border-radius: 3px;
		transition: 0.2s;
	}

	.choose-file-button {
		flex-shrink: 0;
		padding: 8px 15px;
		margin-right: 20px;
		font-size: 12px;
		text-transform: uppercase;
		width: 100%;
		min-width: 100%;
		max-width: 100%;
		text-align: center;
	}

	.file-message {
		font-size: small;
		font-weight: 300;
		line-height: 1.4;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.file-input {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		cursor: pointer;
		opacity: 0;
	}

	.mt-100{
		margin-top:100px;
	}

	.dropdown-colvis ~ .dropdown-menu {
		transform: translate(-100px, 0px);
	}
	
</style>

<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" style="margin-bottom:50px;">
				<div class="uv-table-group-procedure-info" style="margin-bottom:20px;">
					<div class="uv-table-title">
						<h6 class="uv-table-header-h6" th:text="#{data.show.title}"></h6>
						<hr class="uv-procedure-hr">
					</div>
				</div>
				<div class="uv-table-group-procedure" style="cursor:auto;">
					<div class="row">
						<div class="col-6">
							<label th:text="#{data.input.cen}">Centre(s)</label>
							<select class="selectpicker" id="centresSelector" name="centre" 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 : ${data}" th:if="${item.tlugar == 'C'}" th:text="${#locale.language} == 'es' ? ${item.nomCas2}:${item.nomVal2}" th:attr="value=${item.ruct2}, data-tlugar=${item.tlugar2}, data-parent=${item.ruct2}"></option>
						    </select>
						</div>
						<div class="col-6">
							<label th:text="#{data.input.tit}">Titulació(ns)</label>
							<select class="selectpicker" id="titulacionsSelector" name="titulacio" data-live-search="true" data-width="100%" data-actions-box="true" required>
						        <option th:each="item : ${data}" th:if="${item.tlugar == 'T'}" th:text="${#locale.language} == 'es' ? ${item.nomCas}:${item.nomVal}" th:attr="value=${item.ruct}, data-tlugar=${item.tlugar}, data-parent=${item.ruct2}"></option>
						    </select>
						</div>
					</div>
					<div class="row" id="dataContainer" style="display:none;padding-right:10px;padding-left:10px;padding-top:25px;"> 
		            	<div class="col-lg-12">
		                	<table id="dataTabular" class="table table-striped table-bordered display responsive no-wrap" style="width:100%;position:relative;z-index:0;">
							    <thead>
							        <tr>
							        	<th class="uv-table" th:text="#{dashboard.data.table.hr1}">Encuesta</th>
							        	<th class="uv-table" th:text="#{dashboard.data.table.hr2}">Indicador</th>
							        	<th class="uv-table" th:text="#{dashboard.data.table.hr3}">Ámbito</th>
							        	<th class="uv-table" th:text="#{dashboard.data.table.hr4}">Estudio</th>
							        	<th class="uv-table" th:text="#{dashboard.data.table.hr5}">Valor</th>
							        	<th class="uv-table" th:text="#{dashboard.data.table.hr6}">Curso</th>
							        	<th class="uv-table" th:text="#{dashboard.data.table.hr7}">CursoD</th>
							        	<th class="uv-table" th:text="#{dashboard.data.table.hr8}">Tipo</th>
							        	<th class="uv-table" th:text="#{dashboard.data.table.hr9}">NºEnq</th>
							        	<th class="uv-table" th:text="#{dashboard.data.table.hr10}">Curso Enq</th>
							        	<th class="uv-table" th:text="#{dashboard.data.table.hr11}">Centro Orig</th>
							        	<th class="uv-table" th:text="#{dashboard.data.table.hr12}">Tit. Orig</th>
							        	<th class="uv-table" th:text="#{dashboard.data.table.hr13}">RUCT</th>
										<th class="uv-table" th:text="#{dashboard.data.table.hr14}">Fecha</th>
							        </tr>
							    </thead>
								<tbody></tbody>
							</table>
		        		</div>
		        	</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/fa/all.js}"></script>
	<script th:src="@{/js/jquery/datatables.min.js}"></script>
	<script th:src="@{/js/jquery-easing/jquery.easing.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:src="@{/js/gijgo/gijgo.min.js}"></script>
	<script th:src="@{/js/frappe-gantt/frappe-gantt.min.js}"></script>
	<script th:src="@{/js/chartjs/chart.js}"></script>
	<script th:src="@{/js/moment.js}"></script>
	<script th:src="@{/js/saic.js}"></script>
	
	<script type="text/javascript">

		var locale = '[[${#locale.language}]]';
		var orderCol1 = [3, 'asc'], orderCol2 = [1, 'asc'];
		var cursorPosition;
		var translator = {dades_1er:'estud1', dades_3er:'estud3', dades_graduats:'gradu', data:'estud', data_g:'gradu',
						  profes:'profes', profes_tancades:'profes', evalprof:'evalprof', enquestes:'enquestes',
						  doc_tasas:'doc_tasas', doc_prof:'doc_prof', doc_inds:'doc_inds', doc_recom:'doc_recom', doc_etesi:'doc_egres',
						  doc_estud:'doc_estud', dadespas:'PTGAS', docentia:'docentia', sprodw:'sprodw', otros:'otros'};
		var currYear = new Date().getFullYear();
		var datatable = null;

		$(document).ready(function(){ 
			layout = new Layout("");
			layout.closeLoadingSpinner(".uv-loading-spinner");
			
			$('#centresSelector').val('').trigger('change');
			$('#centresSelector').change(completeTitulacions);
			$('#titulacionsSelector').val('').trigger('change');
			$('#titulacionsSelector').change(updateDataTable);
			
			initDataTable();
						
		});
				
		function showSpinner(){
			$('#uv-content-wrapper').append('<div class="uv-loading-spinner" th:text="#{global.loading}"></div>');
		}
		
		function closeSpinner(){
			$('.uv-loading-spinner').remove();
		}
		
		function updateDataTable(){
			console.log('update');
			showSpinner();
			$.get(`/data/current/show/${$('#titulacionsSelector').val()}/${$('#dataSelectedCurs').val()}`, function(data){
				var dataArr = [];
				data.forEach(function(d){
					dataArr.push([translator[d.enquesta],
							   d.indicador,
							   d.ambit,
							   d.estudi,
							   d.valor === null ? '' : d.valor,
							   d.curs === null ? '' : d.curs,
							   d.cursd === null ? '' : d.cursd,
							   d.tipus === null ? '' : d.tipus,
							   d.nenq === null ? '' : d.nenq,
							   d.cursEnquesta === null ? '' : d.cursEnquesta,
							   d.centreOrigen === null ? '' : d.centreOrigen,
							   d.titulacioOrigen === null ? '' : d.titulacioOrigen,
							   d.ruct === null ? '' : d.ruct,
							   d.data === null ? '' : d.data]);
				});
				$('#dataContainer').show();
				datatable.clear();
				datatable.rows.add(dataArr).draw();
				closeSpinner();
			});
		}
		
		function initDataTable(){
			
			$('#dataTabular thead tr')
		        .clone(true)
		        .addClass('filters')
				.addClass('dataFilters')
		        .appendTo('#dataTabular thead');
	
			datatable = $('#dataTabular').DataTable({
				paging: true, 
				buttons: [
					{
						extend: "pageLength",
					},
					{
						text: `[[#{dashboard.data.table.btn1}]]: <input id="dataSelectedCurs" type="number" value="${currYear}" style="width: 75px;">`,
						action: function (e, dt, node, config) {
							updateDataTable();
						}
					},
					{
						extend: 'excelHtml5',
						text: '<span><i class="fas fa-file-excel"></i></span>',
						titleAttr: '[[#{dashboard.data.table.btn2}]]',
						title: 'ListadoTitulaciones',
						exportOptions: {
							columns: ':visible'
						}
					},
					{
						extend: 'csvHtml5',
						text: '<span><i class="fas fa-file-csv"></i></span>',
						titleAttr: '[[#{dashboard.data.table.btn3}]]',
						title: 'ListadoTitulaciones',
						exportOptions: {
							columns: ':visible'
						}
					},
					{
						extend: 'pdfHtml5',
						text: '<span><i class="fas fa-file-pdf"></i></span>',
						titleAttr: '[[#{dashboard.data.table.btn4}]]',
						title: 'ListadoTitulaciones',
						exportOptions: {
							columns: ':visible'
						}
					},
					{
						extend: 'colvis',
						text: '<span><i class="fas fa-eye"></i></span>',
						className: 'dropdown-menu-right dropdown-colvis',
						titleAttr: '[[#{dashboard.data.table.btn5}]]'
					}
				],
				layout: {
					topStart: null,
			        topEnd: 'buttons',
			    },
				"language":{
					"lengthMenu": "_MENU_", 
		            "zeroRecords": "[[#{admin.stats.table.zeroRecords}]]",
		            "info": "[[#{admin.stats.table.info}]]",
		            "infoEmpty": "[[#{admin.stats.table.infoEmpty}]]",
		            "infoFiltered": "[[#{admin.stats.table.infoFiltered}]]",
		            "paginate": {
		                "previous": "[[#{admin.stats.table.previous}]]",
		                "next": "[[#{admin.stats.table.next}]]"
		            },
					"buttons": {
						"pageLength": "%d [[#{admin.stats.table.lengthMenu}]]"
					}
				},
				bAutoWidth: false, 
				searching: true,
				order:[ [0, 'asc'], [1, 'asc'] ],
				orderCellsTop: true,
				//fixedHeader: true, // Not compatible with android
				info: false,
				responsive: false,
				scrollX: true,
				lengthMenu: [10, 25, 50, 100, { label: 'All', value: -1 }],
				initComplete: function () {
					var api = this.api();
		        	this.api()
		        	.columns()
		            .eq(0)
		            .each(function (colIdx) {
		                var cell = $('.filters.dataFilters th').eq(
		                    $(api.column(colIdx).header()).index()
		                );
		                var title = $(cell).text();
		                $(cell).html('<input type="text" placeholder="' + title + '" />');
		                $('input', $('.filters.dataFilters th').eq($(api.column(colIdx).header()).index()))
		                    .off('keyup change')
		                    .on('change', function (e) {
		                        $(this).attr('title', $(this).val());
		                        var regexr = '({search})'; 
		                        cursorPosition = this.selectionStart;
		                        api.column(colIdx)
		                           .search(   
		                                this.value != ''
		                                    ? regexr.replace('{search}', '(((' + this.value + ')))')	
		                                    : '',
		                                this.value != '',
		                                this.value == ''
		                            )
		                            .draw();
		                    })
		                    .on('keyup', function (e) {
								e.preventDefault();
		                        e.stopPropagation();
		                        $(this).trigger('change');
		                        $(this)
		                            .focus()[0]
		                            .setSelectionRange(cursorPosition, cursorPosition);
		                    });
		            });
		            api.column(5).visible(false);
		            api.column(6).visible(false);
		            api.column(7).visible(false);
		            api.column(8).visible(false);
		            api.column(9).visible(false);
		            api.column(10).visible(false);
		            api.column(11).visible(false);
		            api.column(12).visible(false);
					api.column(13).visible(false);
		            closeSpinner();
				}
			});
				
		}
		
		function completeTitulacions(){
			$('#titulacionsSelector option').hide();
			$('#titulacionsSelector').selectpicker('refresh');
			$('#titulacionsSelector option[data-parent="'+$('#centresSelector').val()+'"]').show();
			$('#titulacionsSelector').selectpicker('refresh');
		}
		
	</script>

</body>

</html>
