<!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;margin-top:30px;cursor:auto;">
					<div class="uv-table-title">
						<h6 class="uv-table-header-h6" th:text="#{admin.acredita.title}"></h6>
						<hr class="uv-procedure-hr">
					</div>
				</div>
				<div class="uv-table-group-procedure row" style="padding:20px;">
					<div class="col-2" id="grupSelector">
						<label th:text="#{admin.acredita.form.year}">Año</label>
						<input class="form-control" type="number" value="" id="cursInput" name="curs">
					</div>
					<div class="col-5">
						<label th:text="#{admin.acredita.form.group}">Grupo</label>
						<select class="selectpicker" id="grupInput" name="grup" 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="0" th:text="#{admin.acredita.form.groupnum.0}">Todos</option>
					        <option value="1" th:text="#{admin.acredita.form.groupnum.1}">Enero</option>
					        <option value="4" th:text="#{admin.acredita.form.groupnum.4}">Abril</option>
					        <option value="9" th:text="#{admin.acredita.form.groupnum.9}">Septiembre</option>
					        <option value="11" th:text="#{admin.acredita.form.groupnum.11}">Noviembre</option>
					    </select>
					</div>
					<div class="col-2" >
						<span class="btn btn-primary" th:text="#{admin.acredita.form.view}" style="margin-top:30px;" onclick="viewEvent();">Ver</span>
					</div>
				</div>
				<div id="results" class="uv-table-group-procedure" style="padding:20px;">
					<table class="table table-striped table-bordered display responsive no-wrap" style="width:100%;">
					    <thead>
					        <tr>
					        	<th class="uv-table">RUCT</th>
					        	<th class="uv-table">Nombre</th>
					        	<th class="uv-table">Curso Accr.</th>
					        	<th class="uv-table">Grupo Accr.</th>
					        	<th class="uv-table">Tipo</th>
					        </tr>
					    </thead>
						<tbody>
							<tr th:each="item,inRowID : ${acreditacions}">
								<td>
									<a th:href="${'/dashboard/'+item.ruct}"><span th:text="${item.ruct}"></span></a>
								</td>
								<td>
									<span th:text="${#locale.language} == 'es' ? ${item.nomCas}:${item.nomVal}"></span>
								</td>
								<td>
									<span th:text="${item.grupCurs}"></span>
								</td>
								<td>
									<span th:text="${item.grup}"></span>
								</td>
								<td>
									<span th:text="${item.tambit == 'M' ? 'Máster' : item.tambit == 'G' ? 'Grado' : 'Doctorado'}"></span>
								</td>
							</tr>
						</tbody>
					</table>
				</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 = [2, 'asc'];
		var cursorPosition;
	
		$( document ).ready(function(){ 
			layout = new Layout("No data to display");
			layout.initTableLayout({
				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,
				info: false,
				responsive: true,
				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);
	                        });
	                });
	    		}
			});
			layout.closeLoadingSpinner(".uv-loading-spinner");
			
		});
		
		function showSpinner(){
			var spinner = `<div class="d-flex justify-content-center">
								<div class="spinner-border text-primary" role="status" style="font-size: 150%; text-align: center; width: 100px; height: 100px;">
									<span class="sr-only">Loading...</span>
								</div>
							</div>
						  `;
			$('#resultsContainer').html(spinner);
		}
		
		function viewEvent(){
			//$('.table').DataTable().ajax.url(`/admin/acredita/${$('#cursInput').val()}/${$('#grupInput').val()}`).load();
			$.get(`/admin/acredita/${$('#cursInput').val()}/${$('#grupInput').val()}/A`, function(data){
				console.log(data);
				var dataarr = [];
				data.forEach(function(d){
					dataarr.push([d.ruct, locale == 'es' ? d.nomCas : d.nomVal, d.grupCurs, d.grup, d.tambit == 'M' ? 'Máster' : d.tambit == 'G' ? 'Grado' : 'Doctorado']);
				});
				var table = $('.table').DataTable();
                table.clear();
                table.rows.add(dataarr).draw();
		    });
		}
		
	</script>

</body>

</html>
