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

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

<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;
      }
	
</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">
				<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.import.title}"></h6>
						<hr class="uv-procedure-hr">
						<span th:text="#{data.import.subtitle}"></span><br>
					</div>
				</div>
				<form enctype='multipart/form-data' method="POST" action="/data/import">
					<div class="uv-table-group-procedure row" style="padding:20px;cursor:auto;">
						<div class="col-12 row">
							<div class="col-5" id="databaseContainer">
								<label th:text="#{data.input.source}">Origen</label>
								<select class="selectpicker" id="databaseSelector" name="database" data-live-search="true" data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}" required>
							        <option disabled selected th:text="#{data.input.option}">Selecciona una opción</option>
							        <option value="grado">Encuestas Grado</option>
							        <option value="master">Encuestas Máster</option>
							        <option value="doctorado">Encuestas Doctorado</option>
							        <option value="pas">Encuestas PAS</option>
							        <option value="evalprof">Encuestas Evaluación Profesorado</option>
							        <option value="otros">Indicadores</option>
							    </select>
							</div>
							<div class="col-5">
								<label th:text="#{data.input.survey}">Encuesta</label>
								<div class="subselect" id="gradoSelector">
									<select class="form-control" name="enquesta" required style="cursor:pointer;">
								        <option disabled selected th:text="#{data.input.option}">Selecciona una opción</option>
								        <option value="dades_1er">Estudiantes primero</option>
								        <option value="dades_3er">Estudiantes tercero</option>
								        <option value="dades_graduats">Graduados</option>
								        <option value="profes">Profesores</option>
								    </select>
								</div>
								<div class="subselect" id="masterSelector">
								    <select class="form-control" name="enquesta" required style="cursor:pointer;">
								        <option disabled selected th:text="#{data.input.option}">Selecciona una opción</option>
								        <option value="data">Estudiantes</option>
								        <option value="data_g">Graduados</option>
								        <option value="profes_tancades">Profesores</option>
								    </select>
								</div>
								<div class="subselect" id="doctoradoSelector">
								    <select class="form-control" name="enquesta" required style="cursor:pointer;">
								        <option disabled selected th:text="#{data.input.option}">Selecciona una opción</option>
								        <option value="doc_estud">Estudiantes</option>
								        <option value="doc_etesi">Graduados</option>
								        <option value="doc_prof">Profesores</option>
								        <option value="doc_tasas">Tasas</option>
								        <option value="doc_inds">Indicadores</option>
								        <option value="doc_recom">Recomendaciones</option>
								    </select>
								</div>
								<div class="subselect" id="evalprofSelector">
								    <select class="form-control" name="enquesta" required style="cursor:pointer;">
								        <option disabled selected th:text="#{data.input.option}">Selecciona una opción</option>
								        <option value="evalprof">Evaluación del profesorado</option>
								    </select>
								</div>
								<div class="subselect" id="otrosSelector">
								    <select class="form-control" name="enquesta" required style="cursor:pointer;">
								        <option disabled selected th:text="#{data.input.option}">Selecciona una opción</option>
								        <option value="otros">Profesorado + Tasas</option>
								        <option value="docentia">Docentia</option>
								        <option value="enquestes">Encuestas (SAE/SAEM)</option>
										<option value="sprodw">Indicadores</option>
								    </select>
								</div>
								<div class="subselect" id="pasSelector">
								    <select class="form-control" name="enquesta" required style="cursor:pointer;">
								        <option disabled selected th:text="#{data.input.option}">Selecciona una opción</option>
								        <option value="dadespas">PAS</option>
								    </select>
								</div>
							</div>
							<div class="col-2">
								<label th:text="#{data.input.year}">Curso</label>
								<input class="form-control" type="number" value="" name="curs">
								<small class="importType importType-db" th:text="#{data.import.note4}">* Solo para consultar</small>
							</div>
						</div>
						<div class="col-12 row" style="margin-top:20px;">
							<div class="col-4">
								<label th:text="#{data.input.scope}">Ámbito</label>
								<select class="form-control" name="ambit" required style="cursor:pointer;">
							        <option disabled selected th:text="#{data.input.option}">Selecciona una opción</option>
							        <option value="T" th:text="#{data.input.scope.t}">Titulación</option>
							        <option value="C" th:text="#{data.input.scope.c}">Centro</option>
							        <option value="U" th:text="#{data.input.scope.u}">Universidad</option>
								</select>
							</div>
							<div class="col-4">
								<label th:text="#{data.input.type}">Tipo Titulación</label>
								<select class="form-control" name="estudi" required style="cursor:pointer;">
							        <option disabled selected th:text="#{data.input.option}">Selecciona una opción</option>
							        <option value="g" th:text="#{data.input.type.g}">Grado</option>
							        <option value="m" th:text="#{data.input.type.m}">Máster</option>
							        <option value="d" th:text="#{data.input.type.d}">Doctorado</option>
							        <option value="u" th:text="#{data.input.type.u}">Global</option>
								</select>
							</div>
							<div class="col-4">
								<label th:text="#{data.input.importType}">Tipo de importación</label>
								<select class="selectpicker" id="importTypeSelector" name="tipus" data-live-search="false" data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}" required>
									<option value="file" th:text="#{data.input.importType.file}" selected>Fichero CSV</option>
									<option value="db" th:text="#{data.input.importType.db}">Base de datos</option>
								</select>
								<small th:text="#{data.import.note3}">* Solo para importar</small>
							</div>
						</div>

						<div class="col-12 row" style="margin-top:20px;"></div>
							<div class="col-2 importType importType-db">
								<label th:text="'DB Origen'">DB origen</label>
								<select class="form-control" name="dbOrigen" required style="cursor:pointer;">
									<option disabled selected th:text="#{data.input.option}">Selecciona una opción</option>
									<option th:each="i : ${sources}" th:value="${i.id}" th:text="${i.nom}">
								</select>
								<small th:text="#{data.import.note3}">* Solo para importar</small>
							</div>
							<div class="col-4 importType importType-db">
								<label th:text="#{data.input.view}">Nombre de la vista a importar</label>
								<input class="form-control" type="text" value="" name="vista">
								<small th:text="#{data.import.note3}">* Solo para importar</small>
							</div>
							<div class="col-2 importType importType-file">
								<label th:text="#{data.input.delim}">Delimitador</label>
								<select class="selectpicker" id="delimSelector" name="delim" data-live-search="false" data-width="100%" data-actions-box="true" th:attr="data-none-selected-text=#{global.selectors.noData}" required onchange="fileLoaded();">
									<option disabled selected th:text="#{data.input.option}">Selecciona una opción</option>
									<option value=";">Punto y coma [ ; ]</option>
									<option value=",">Coma [ , ]</option>
									<option value="\t">Tabulador [ \t ]</option>
								</select>
								<small th:text="#{data.import.note3}">* Solo para importar</small>
							</div>
							<div class="col-2">
								<label th:text="#{data.input.key}">Clave</label>
								<select class="form-control" name="clau" required style="cursor:pointer;">
									<option disabled selected th:text="#{data.input.option}">Selecciona una opción</option>
									<option value="ruct">RUCT</option>
									<option value="cod">Cod. Intern</option>
								</select>
								<small th:text="#{data.import.note3}">* Solo para importar</small>
							</div>
							<div class="col-2 importType importType-db">
								<label th:text="#{data.input.dstyear}">Curso a imputar</label>
								<input class="form-control" type="text" value="" name="dstCurs">
								<small th:text="#{data.import.note3}">* Solo para importar</small>
							</div>
						</div>

						<div class="col-12 row importType importType-file" style="margin-top:20px;">
							<div class="tab-pane fade show active tab_item" style="width: 100%;min-width: 100%;max-width: 100%;">
					            <div class="file-drop-area">
					              <span class="filename choose-file-button" th:text="#{data.input.file}">Selecciona o suelta aquí el archivo CSV</span>
					              <input class="file-input" type="file" name="file" id="filecsv">
					            </div>
					        </div>
				        </div>
				        <div>
					        * <small th:text="#{data.import.note1}"> El fichero debe de contener las columnas "titulacio", "centre" y "tipus".</small>
					        <br/>
					        ** <small th:text="#{data.import.note2}"> Las columnas "titulacio" y "centre" deben de ser numéricas. La columna "tipus" puede ser "avg", "min" o "max".</small>
				        </div>
					</div>
					<div id="fileInfoContainer" class="uv-table-group-procedure" style="padding-left:20px;cursor:auto;">
					
					</div>
					<div class="uv-table-group-procedure" style="padding-left:20px;padding-top:20px;cursor:auto;">
						<span id="btn-checkConn" class="btn btn-primary pointer" onclick="listTableColumns();"><i class="fas fa-plug"></i> <span th:text="#{data.btn.connect}">Comprobar conexión</span></span>
						<button id="btn-import" class="btn btn-primary pointer" type="submit" value="Importar"><i class="fas fa-upload"></i> <span th:text="#{data.btn.import}">Importar</span></button>
						<span class="btn btn-info pointer" onclick="showData();"><i class="fas fa-eye"></i> <span th:text="#{data.btn.show}">Ver</span></span>
						<!-- <span class="btn btn-success pointer" onclick="checkData();"><i class="fas fa-clipboard-check"></i> <span th:text="#{data.btn.check}">Comprobar</span></span>  -->
						<span class="btn btn-danger pointer" onclick="removeData();" style="float:right;margin-right:30px;"><i class="fas fa-trash"></i> <span th:text="#{data.btn.delete}">Eliminar</span></span>
					</div>
				</form>
				<div id="resultsContainer" class="uv-table-group-procedure" style="padding-left:20px;padding-top:20px;cursor:auto;">
					
				</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">

		var locale = '[[${#locale.language}]]';
		var orderCol1 = [3, 'asc'], orderCol2 = [1, 'asc'];
		var cursorPosition;
		var reader = new FileReader();
		var tabParams = {
				paging: true, 
				language:{
					"lengthMenu": "[[#{admin.stats.table.lengthMenu}]]", 
		            "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}]]"
		            }
				},
				searching: true,
				order:[orderCol1, orderCol2],
				orderCellsTop: true,
				//fixedHeader: true, // Not compatible with android
				info: false,
				scrollX: true,
				responsive: false,
				initComplete: function () {
					var api = this.api();
		        	this.api()
		        	.columns()
	                .eq(0)
	                .each(function (colIdx) {
	                    var cell = $('.filters th').eq(
	                        $(api.column(colIdx).header()).index()
	                    );
	                    var title = $(cell).text();
	                    $(cell).html('<input type="text" placeholder="' + title + '" />');
	                    $('input', $('.filters 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);
	                        });
	                });
		        	$('.table').DataTable().draw();
	    		}
			};
	
		
		$(document).ready(function(){ 
			layout = new Layout("");
			layout.initTableLayout({paging:false});
			layout.closeLoadingSpinner(".uv-loading-spinner");
			$('.subselect').hide();
			$('#btn-checkConn').hide();
			$('.subselect  > select').attr('disabled', true);
			
			$('#databaseSelector').change(function(){
				$('.subselect').hide();
				$('.subselect > select').attr('disabled', true);
				$('#'+$(this).val()+'Selector  > select').attr('disabled', false);
				$('#'+$(this).val()+'Selector').show();
			});

			$('#importTypeSelector').change(function(){
				$('.importType').hide();
				$('.importType-'+$(this).val()).show();
				if($(this).val() == 'file'){
					$('#btn-import').attr('disabled', false);
					$('#btn-checkConn').hide();
				}
				else{
					$('#btn-import').attr('disabled', true);
					$('#btn-checkConn').show();
				}
			});

			$('#importTypeSelector').trigger('change');
			
			reader.addEventListener("loadend", fileLoaded);
			
			$("#filecsv").change(function(){
				$(".filename").text(this.files[0].name);
				reader.readAsText(document.getElementById('filecsv').files[0]);
			});
			
			
			$("form").submit(function (event) {
				event.preventDefault();
				event.stopPropagation();
				if($('#importTypeSelector').val() == 'file'){
					if($('#filecsv').val().trim().length == 0 ||
						$('select[name="database"] option:not([disabled]):selected').length == 0 ||
						$('select[name="enquesta"] option:not([disabled]):selected').length == 0 ||
						$('select[name="delim"] option:not([disabled]):selected').length == 0 ||
						$('select[name="ambit"] option:not([disabled]):selected').length == 0 ||
						$('select[name="estudi"] option:not([disabled]):selected').length == 0){
							alert("Falta rellenar campos obligatorios");
							hideSpinner();
							return false;
					}
				}
				else{ 
					if($('select[name="database"] option:not([disabled]):selected').length == 0 ||
						$('select[name="enquesta"] option:not([disabled]):selected').length == 0 ||
						$('select[name="ambit"] option:not([disabled]):selected').length == 0 ||
						$('select[name="estudi"] option:not([disabled]):selected').length == 0 || 
						$('select[name="dbOrigen"] option:not([disabled]):selected').length == 0 ||
						$('input[name="curs"]').val().length == 0 ||
						$('input[name="vista"]').val().length == 0){
							alert("Falta rellenar campos obligatorios");
							hideSpinner();
							return false;
					}
				}
				showSpinner();
				var ignoredColumns = [];
				$("input:checkbox:not(:checked)").each(function(i){
					ignoredColumns.push($(this).val());
				});
				var data = new FormData(this);
				data.append('ignoredColumns', ignoredColumns);
				$.ajax({
					type: "POST",
					enctype: 'multipart/form-data',
					contentType: false,
					url: $(this).attr('action'),
					processData: false,
					cache: false,
					data: data,
				})
				.done(function (d) {
					console.log(d);
					var t = d.replace(/\[INFO\]/g, '<span style="color:green;">[INFO]</span>')
							 .replace(/\[ERROR\]/g, '<span style="color:red;">[ERROR]</span>')
							 .replace(/\[WARNING\]/g, '<span style="color:orange;">[WARNING]</span>');
					$('#resultsContainer').html(t);
					window.scrollTo(0, document.body.scrollHeight);
				})
				.fail( function(xhr, textStatus, errorThrown) {
					$('#resultsContainer').html('<span style="color:red;">[ERROR] Se ha producido un error en la importación.</span>');
					window.scrollTo(0, document.body.scrollHeight);
				});
			});
			
		});
		
		function fileLoaded(){
			if(reader.result == null){
				return false;
			}
			var header = reader.result.split('\n')[0];
			var colsArr = header.split($('select[name="delim"]').val());
			var cols = '[[#{data.import.note5}]] <br> <div class="row">';
			colsArr.forEach(function(d){
				var v = d.replaceAll('"', '');
				cols += `<div class="col-3" style="text-align:left;">
						 	<input type="checkbox" checked name="filecolumns" value="${v}"/> ${v}
						 </div>`;
			});
			$('#fileInfoContainer').html(cols);
		}
		
		function removeData(){
			showSpinner();	
			$.post("/data/delete", {enquesta:$('select[name="enquesta"]:enabled').val(), 
								    curs:$('input[name="curs"]').val(), 
								    ambit:$('select[name="ambit"]').val(), 
								    estudi:$('select[name="estudi"]').val()})
				.done(function(d) {
					var t = d.replace('[INFO]', '<span style="color:green;">[INFO]</span>')
	    			 .replace('[ERROR]', '<span style="color:red;">[ERROR]</span>')
	    			 .replace('[WARNING]', '<span style="color:orange;">[WARNING]</span>');
	    			$('#resultsContainer').html(t);
	    			window.scrollTo(0, document.body.scrollHeight);
				}
			);
		}
		
		function showSpinner(){
			var spinner = `<div class="d-flex justify-content-center" style="position:fixed;z-index:9999;top:0;left:0;right:0;bottom:0;margin:auto;width:100%;height:100%;background:rgba(0,0,0,0.25);align-items: center;justify-content:center;">
								<div class="spinner-border text-primary" role="status" style="font-size:150%;text-align:center;width:100px;height:100px;display:flex;margin:0 auto;">
									<span class="sr-only">Loading...</span>
								</div>
							</div>
						  `;
			$('#resultsContainer').html(spinner);
		}

		function hideSpinner(){
			$('#resultsContainer').html('');
		}

		function listTableColumns(){

			if($('select[name="database"] option:not([disabled]):selected').length == 0 ||
				$('select[name="enquesta"] option:not([disabled]):selected').length == 0 ||
				$('select[name="ambit"] option:not([disabled]):selected').length == 0 ||
				$('select[name="estudi"] option:not([disabled]):selected').length == 0 || 
				$('select[name="dbOrigen"] option:not([disabled]):selected').length == 0 ||
				$('input[name="curs"]').val().length == 0 ||
				$('input[name="vista"]').val().length == 0){
					alert("Falta rellenar campos obligatorios");
					hideSpinner();
					return false;
			}

			showSpinner();
			$.post("/data/view/columns", {vista:$('input[name="vista"]').val(), 
										  dbOrigen:$('select[name="dbOrigen"]').val()})
				.done(function(data) {
					console.log(data);
					if(data.length == 0){
						$('#btn-import').attr('disabled', true);
						alert('[[#{data.alert.connect}]]');
					}
					else{
						$('#btn-import').attr('disabled', false);
						var cols = '[[#{data.import.note5}]] <br> <div class="row">';
						data.forEach(function(d){
							var v = d.replaceAll('"', '');
							cols += `<div class="col-3" style="text-align:left;">
										<input type="checkbox" checked name="filecolumns" value="${v}"/> ${v}
									</div>`;
						});
						$('#fileInfoContainer').html(cols);
					}
					$('#resultsContainer').html('');
				}
			);
		}
		
		function showData(){
			showSpinner();
			$.post("/data/show", {enquesta:$('select[name="enquesta"]:enabled').val(), 
								  curs:$('input[name="curs"]').val(), 
								  ambit:$('select[name="ambit"]').val(), 
								  estudi:$('select[name="estudi"]').val()})
				.done(function(data) {
					var trs = '';
					data.forEach(function(d){
						trs += `
							<tr>
								<td>${d.titulacio}</td>
								<td>${d.centre}</td>
							    <td>${d.ambit}</td>
							    <td>${d.tipus}</td>
							    <td>${d.indicador}</td>
							    <td>${d.valor}</td>
							    <td>${d.nenq}</td>
							    <td>${d.titulacioOrigen}</td>
							    <td>${d.centreOrigen}</td>
							    <td>${d.ruct}</td>
							    <td>${d.usuari}</td>
						  	</tr>
						`;
					});
					
					$('#resultsContainer').html(`
							<div class="uv-table-group-procedure" style="margin-bottom:25px;">
								<table class="table table-striped table-bordered display responsive no-wrap">
									<thead>
										<tr>
											<th class="uv-table">[[#{data.table.1}]]</th>
										  	<th class="uv-table">[[#{data.table.2}]]</th>
										  	<th class="uv-table">[[#{data.table.3}]]</th>
										  	<th class="uv-table">[[#{data.table.4}]]</th>
										  	<th class="uv-table">[[#{data.table.5}]]</th>
										  	<th class="uv-table">[[#{data.table.6}]]</th>
										  	<th class="uv-table">[[#{data.table.7}]]</th>
										  	<th class="uv-table">[[#{data.table.8}]]</th>
										  	<th class="uv-table">[[#{data.table.9}]]</th>
										  	<th class="uv-table">[[#{data.table.10}]]</th>
										  	<th class="uv-table">[[#{data.table.11}]]</th>
										</tr>
									</thead>
									<tbody>
									  ${trs}
									</tbody>
								</table>
							</div>
					`);
					
					$('.table thead tr').clone(true)
								        .addClass('filters')
								        .appendTo('.table thead');
					
					$('.table').DataTable({
						searching: tabParams.searching, 
						paging: tabParams.paging, 
						orderCellsTop: tabParams.orderCellsTop,
						// fixedHeader: tabParams.fixedHeader, // Not compatible with Android
						info: tabParams.info,
				        responsive: tabParams.responsive,
				        order: tabParams.order,
				        scrollX: tabParams.scrollX,
				        "language": ((!("language" in tabParams)) ? { "emptyTable": this.emptyMsg } : tabParams.language),
				        initComplete: tabParams.initComplete
					});
					
				}
			);
		}
		
	</script>

</body>

</html>
