<%-- 
    Document   : vistaDobleDisponibilidad
    Created on : 17-nov-2018, 8:48:37
    Author     : sistem20user
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="pe.siso.horario.Beans.PeriodoAcademico"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JSP Page</title>
		<!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

		<!--jquery-->
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

		<!--axios-->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<%
			HttpSession session_actual = request.getSession(true);
			PeriodoAcademico periodo=(PeriodoAcademico)session_actual.getAttribute("periodo");
		%>
	</head>

	<style>
		td{
			border : 3px solid;
			text-align : center;
		}
	</style>

	<body>
		<div class="container">
			<div class="row">
				<div class="col s8 offset-s2">
					<div class="card">
						<div class="card-content">
							<span class="card-title">Buscar disponibilidad</span>
							<div class="row">
								<div class="input-field col s6">
									<select id="cbArea" onchange="listarPlana(this)">
									</select>
									<label>Area:</label>
								</div>
								<div class="input-field col s6">
									<select id="cbPlana">
									</select>
									<label>Plana:</label>
								</div>
							</div>
						</div>
						<div class="card-action center">
							<a class="waves-effect waves-light btn blue" id="btnBuscar"><i class="material-icons left">search</i>buscar</a>
						</div>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col s12">
					<div class="card">
						<div class="card-content">
							<span class="card-title">Lista de docentes y disponibilidad</span>
							<div class="row">
								<div id="divListaDisponibilidad">

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
		<script>

			var elems = document.querySelectorAll('select');
			var instances = M.FormSelect;
			document.addEventListener('DOMContentLoaded', function () {
				listarArea()

				document.querySelector('#btnBuscar').addEventListener('click', function () {
					listarDisponibilidad()
				})
			});
			function listarArea() {
				axios.get('../ServletArea?Accion=cargarAreaJson')
					.then(data => {
						let option = '<option value="">[SELECCIONE]</option>'
						data.data.forEach(v => {
							option += '<option value="' + v.codigoArea + '">' + v.nombreArea + '</option>'
						})
						document.querySelector('#cbArea').innerHTML = option
						instances.init(elems)
					})
			}

			function listarDisponibilidad() {
				let codigoPlana = document.querySelector('#cbPlana').value
				let codigoPeriodo = '<%= periodo!=null?periodo.getCodigoPeriodo():""%>'

				if (codigoPlana && codigoPeriodo) {
					let json = {
						codigoPlana,
						codigoPeriodo
					}

					$.ajax({
						url: '../ServletHorario?Accion=listarVistaDobleDisponibilidad',
						type: 'POST',
						dataType: 'json',
						data: {
							json: JSON.stringify(json)
						},
						success: function (data, textStatus, jqXHR) {
							let html = ''
							let mensaje='No registrado'
							data.data.forEach(function (docente) {
								
								if(typeof(docente.celular && docente.distrito)  == "undefined"){
										        html += `
														<div class="divider"></div>
														<div class="section">
															<h6>` + docente.nombre + `</h6>`
																html += '<p>Celular:No registrado</p>'
																html += '<p>Distrito:No registrado</p>'
																html += '<p>Direccion: No registrado</p>'
																html += '<p>Correo: No registrado</p>'
																html += '<br>'



													if (docente.disponibilidad) {

														let disponibilidad = docente.disponibilidad.split('-') || []
														let diasM = []
														let diasT = []
														let aulasM = []
														let aulasT = []

														if (docente.arrayAulas) {
															docente.arrayAulas.forEach(v => {
																if (v.turno == '1') {
																	aulasM.push(v)
																} else if (v.turno == '2') {
																	aulasT.push(v)
																}
															})
														}

														disponibilidad.forEach(function (d) {
															let turno = d.split('#')[0]
															let dia = d.split('#')[1]

															if (turno == '1') {
																diasM.push(dia)
															} else if (turno == '2') {
																diasT.push(dia)
															}
														})

														html += '<p class="col s12">'
														html += '<table class="centered">'
														html += '<thead>'
														html += '<tr>'
														html += '<td>TURNO</td>'
														html += '<td>LUNES</td>'
														html += '<td>MARTES</td>'
														html += '<td>MIERCOLES</td>'
														html += '<td>JUEVES</td>'
														html += '<td>VIERNES</td>'
														html += '<td>SABADO</td>'
														html += '</tr>'
														html += '</thead>'
														html += '<tbody>'


														html += '<tr>'
														html += '<td>M</td>'

														for (let i = 0; i < 6; i++) {
															let aulas = aulasM.map(a => {
																if (a.dia == i + 1) {
																	return a.sede + ' - ' + a.aulas
																}
															})
															if (diasM.some(d => d == (i + 1))) {
																html += `<td class="green">` + aulas.join(' \n ') + `</td>`
															} else {
																html += '<td class="red">' + aulas.join(' \n ') + '</td>'
															}
														}


														html += '</tr>'

														html += '<tr>'
														html += '<td>T</td>'

														for (let i = 0; i < 6; i++) {
															let aulas = aulasT.map(a => {
																if (a.dia == i + 1) {
																	return a.sede + ' - ' + a.aulas
																}
															})
															if (diasT.some(d => d == (i + 1))) {
																html += `<td class="green">` + aulas.join(' \n ') + `</td>`
															} else {
																html += '<td class="red">' + aulas.join(' \n ') + '</td>'
															}
														}

														html += '</tr>'

														html += '</tbody>'
														html += '</table>'
														html += '</p>'
													} else {
														html += '<p>EL DOCENTE NO TIENE DISPONIBILIDAD REGISTRADA</p>'
													}

													html += `
														</div>
																		`
									
								}else{
										html += `
														<div class="divider"></div>
														<div class="section">
															<h6>` + docente.nombre + `</h6>`
																html += '<p>Celular: '+ docente.celular +'</p>'
																html += '<p>Distrito: '+ docente.distrito +'</p>'
																html += '<p>Direccion: '+ docente.direccion +'</p>'
																html += '<p>Correo: '+ docente.correo +'</p>'
																html += '<br>'



													if (docente.disponibilidad) {

														let disponibilidad = docente.disponibilidad.split('-') || []
														let diasM = []
														let diasT = []
														let aulasM = []
														let aulasT = []

														if (docente.arrayAulas) {
															docente.arrayAulas.forEach(v => {
																if (v.turno == '1') {
																	aulasM.push(v)
																} else if (v.turno == '2') {
																	aulasT.push(v)
																}
															})
														}

														disponibilidad.forEach(function (d) {
															let turno = d.split('#')[0]
															let dia = d.split('#')[1]

															if (turno == '1') {
																diasM.push(dia)
															} else if (turno == '2') {
																diasT.push(dia)
															}
														})

														html += '<p class="col s12">'
														html += '<table class="centered">'
														html += '<thead>'
														html += '<tr>'
														html += '<td>TURNO</td>'
														html += '<td>LUNES</td>'
														html += '<td>MARTES</td>'
														html += '<td>MIERCOLES</td>'
														html += '<td>JUEVES</td>'
														html += '<td>VIERNES</td>'
														html += '<td>SABADO</td>'
														html += '</tr>'
														html += '</thead>'
														html += '<tbody>'


														html += '<tr>'
														html += '<td>M</td>'

														for (let i = 0; i < 6; i++) {
															let aulas = aulasM.map(a => {
																if (a.dia == i + 1) {
																	return a.sede + ' - ' + a.aulas
																}
															})
															if (diasM.some(d => d == (i + 1))) {
																html += `<td class="green">` + aulas.join(' \n ') + `</td>`
															} else {
																html += '<td class="red">' + aulas.join(' \n ') + '</td>'
															}
														}


														html += '</tr>'

														html += '<tr>'
														html += '<td>T</td>'

														for (let i = 0; i < 6; i++) {
															let aulas = aulasT.map(a => {
																if (a.dia == i + 1) {
																	return a.sede + ' - ' + a.aulas
																}
															})
															if (diasT.some(d => d == (i + 1))) {
																html += `<td class="green">` + aulas.join(' \n ') + `</td>`
															} else {
																html += '<td class="red">' + aulas.join(' \n ') + '</td>'
															}
														}

														html += '</tr>'

														html += '</tbody>'
														html += '</table>'
														html += '</p>'
													} else {
														html += '<p>EL DOCENTE NO TIENE DISPONIBILIDAD REGISTRADA</p>'
													}

													html += `
														</div>
																		`
									
								}
								
														
						
								
							})
							document.querySelector('#divListaDisponibilidad').innerHTML = html
						}
					})
				}

			}

			function listarPlana(select) {
				let codigoArea = select.value
				axios.get('../ServletPlana?Accion=cargarPlanaJson&codigoArea=' + codigoArea)
					.then(data => {
						let option = '<option value="">[SELECCIONE]</option>'
						data.data.forEach(v => {
							option += '<option value="' + v.cod_pla + '">' + v.nom_pla + '</option>'
						})
						document.querySelector('#cbPlana').innerHTML = option
						instances.init(elems)
					})
			}
		</script>
		<script src="js/pages/webSocketHorario.js" type="text/javascript"></script>
	</body>
</html>
