<%@page import="pe.siso.horario.Beans.Usuario"%>
<%@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>VISTA DOBLE DISPONIBILIDAD</title>
		<link rel="stylesheet" href="../assets/css/jquery-ui.css" />
		<!-- 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">
		<link href="css/snackbar.css" rel="stylesheet" type="text/css"/>
		<link href="css/alert.css" rel="stylesheet" type="text/css"/>

		<!-- 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");
		%>
		<style type="text/css">
			@media print {
				#divBusqueda {display:none}
				#lblTitulo{text-align: center;font-size: 40px;font-weight: bold}
			}
			td{
				border : 3px solid;
				text-align : center;
			}


			body{
				background-image: url(../assets/images/fondo-trismegisto.png);
				height: 500px;
				max-width: 100%;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-attachment: fixed;

			}


			body::after {
				content: "";
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background: rgba(255, 255, 255, 0.9);
				z-index: -1;
				position: fixed;
			}

			.colorVerde{
				background-color: #96d089;
			}

			.colorRojo{
				background-color: #d0766f;
			}

			.colorAzul{
				background-color: #59a1da;
			}



		</style>

		<script type="text/javascript" language="javascript">

			function alertDGC(mensaje)
			{
				var dgcTiempo = 500
				var ventanaCS = '<div class="dgcAlert"><div class="dgcVentana"><div class="dgcCerrar"></div><div class="dgcMensaje">' + mensaje + '<br><div class="dgcAceptar">Aceptar</div></div></div></div>';
//						var bodyCS='<input type="text" value="prueba">';
				$('body').append(ventanaCS);
//						$('body').append(bodyCS);
				var alVentana = $('.dgcVentana').height();
				var alNav = $(window).height();
				var supNav = $(window).scrollTop();
				$('.dgcAlert').css('height', $(document).height());
				$('.dgcVentana').css('top', ((alNav - alVentana) / 2 + supNav - 100) + 'px');
				$('.dgcAlert').css('display', 'block');
				$('.dgcAlert').animate({opacity: 1}, dgcTiempo);
				$('.dgcCerrar,.dgcAceptar').click(function (e) {
					$('.dgcAlert').animate({opacity: 0}, dgcTiempo);
					setTimeout("$('.dgcAlert').remove()", dgcTiempo);
				});
			}

		</script>


	</head>


	<body>

		<script>
			window.alert = function (message) {
				alertDGC(message);
			};
		</script>
		<div class="container">
			<div class="row" id="divBusqueda">
				<div class="col s8 offset-s2">
					<div class="card">
						<div class="card-content">
							<span class="card-title" style="font-weight: bold">Buscar disponibilidad</span>
							<div class="row">
								<div class="input-field col s6">
									<select id="cbArea" onchange="listarPlana(this);desactivarBuscar();desactivarPrint();">
									</select>
									<label>Area:</label>
								</div>
								<div class="input-field col s6">
									<select id="cbPlana" onchange="activarBuscar();">
									</select>
									<label>Plana:</label>
								</div>
							</div>
						</div>
						<div class="card-action center">
							<a class="waves-effect waves-light btn blue" id="btnBuscar" onclick="activarPrint();"><i class="material-icons left">search</i>BUSCAR</a>


							<a class="waves-effect waves-light btn" id="btnImprimir" onclick="pintarTDRed();window.print();" style="background-color: #5478a2;"><i class="material-icons dp48 left">print</i>IMPRIMIR</a><br>
							<!--							<a class="btn btn-app btn-light btn-xs align-left" onclick="window.print();" target="_blank" id="iconoImprimir">
																																							<i class="ace-icon fa fa-print bigger-160"></i>-->
							<label>Zona:</label>	
							<select id="cmbZonas" onchange="listarDisponibilidad();
									activarPrint();">
							</select>

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

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

							<div class="row">
								<div id="divListaDisponibilidad">

								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Modal Structure -->

		</div>

	</div>
	<!-- The actual snackbar -->
	<div id="snackbar">Se bloqueo el dia correctamente..</div>
	<div id="snackbar2">Desbloqueado.</div>
	<script>

//			$("#btnBuscar").attr('disabled','disabled');
		function desactivarBuscar() {
			$("#btnBuscar").attr('disabled', 'disabled');
		}
		function activarBuscar() {
			$("#btnBuscar").attr('disabled', false);
		}



		var elems = document.querySelectorAll('select');
		var instances = M.FormSelect;
		document.addEventListener('DOMContentLoaded', function () {
			listarArea()
			listarZona()
//				setTimeout(function(){ alert("HOLA MASCOTA"); }, 5000);

			document.querySelector('#btnBuscar').addEventListener('click', function () {

				let cmbZonas = $("#cmbZonas option:selected").text();
				if (cmbZonas === "[SELECCIONE]") {
					listarDisponibilidad()
				} else {
					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 listarZona() {
			axios.get('../ServletZona?Accion=cargarZonaJson')
				.then(data => {
					let option = '<option value="">[SIN ZONA]</option><option value="T">TODAS LAS ZONAS</option>'

					data.data.forEach(v => {
						option += '<option value="' + v.codigoZona + '">' + v.nombreZona + '</option>'
					})
					document.querySelector('#cmbZonas').innerHTML = option
					instances.init(elems)
				})

		}


		function listarDisponibilidad() {


			let codigoPlana = document.querySelector('#cbPlana').value
			let codigoPeriodo = '<%= periodo != null ? periodo.getCodigoPeriodo() : ""%>'
			console.log(codigoPeriodo)
			let codigoZona = document.querySelector('#cmbZonas').value
//        let distritos=new ZonaDistritoServices();

			if (codigoPlana && codigoPeriodo && codigoZona) {


				let json = {
					codigoPlana,
					codigoPeriodo,
					codigoZona
				}

				peticionWith3Parameters(json);

			} else {

				let codigoPeriodo2 = '<%= periodo != null ? periodo.getCodigoPeriodo() : ""%>'

//		let codigoPlana2 = document.querySelector('#cbPlana').value

				let json2 = {
					codigoPlana,
					codigoPeriodo2
				}

				peticionSimple(json2);
			}


		}

		function peticionSimple(json) {

			$.ajax({
				url: '../ServletHorario?Accion=listarVistaDobleDisponibilidadSinZona',
				type: 'POST',
				dataType: 'json',
				data: {
					json: JSON.stringify(json)
				},
				success: function (data, textStatus, jqXHR) {


					let html = ''
					let nTurno = []
					let nDia = []
					let mensaje = 'No registrado'
					data.data.forEach(function (docente) {

						if (typeof (docente.celular && docente.distrito) == "undefined") {

							html += '<table>'
							html += '<div class="divider"></div>'
							html += '<div class="section">'

							html += '<h6 id="nombreDocente">' + docente.nombre + '<span></span><span></span><span style="margin-left:650px;font-size:20px;color:#6C7807"><i class="small material-icons" title="Puesto" style="color:black;">grade</i><strong>No registrado</strong></span></h6>'
							html += '<label id="codDocente" style="visibility:hidden;">' + docente.codDocente + '</label>'

							html += '<tr>'
							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 += '</tr>'

							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)
										}
									})
								}

								let diasin = docente.diasin.split('-') || []
								let diasMS = []
								let diasTS = []

								diasin.forEach(function (b) {
									let nTurnoS = b.split('#')[0]
									let nDiaS = b.split('#')[1]

									if (nTurnoS == '1') {
										diasMS.push(nDiaS)
									} else if (nTurno == '2') {
										diasTS.push(nDiaS)
									}

								})


								let bloqueo = docente.bloqueo.split('-') || []
								let diasMB = []
								let diasTB = []
								let aulasMB = []
								let aulasTB = []

								bloqueo.forEach(function (b) {
									let nTurno = b.split('#')[0]
									let nDia = b.split('#')[1]

									if (nTurno == '1') {
										diasMB.push(nDia)
									} else if (nTurno == '2') {
										diasTB.push(nDia)
									}

								})


								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" id="tableDisponibilidad">'
								html += '<thead>'
								html += '<tr>'
								html += '<td>TURNO</td>'
								html += '<td id="dia">LUNES</td>'
								html += '<td id="dia">MARTES</td>'
								html += '<td id="dia">MIERCOLES</td>'
								html += '<td id="dia">JUEVES</td>'
								html += '<td id="dia">VIERNES</td>'
								html += '<td id="dia">SABADO</td>'
								html += '</tr>'
								html += '</thead>'
								html += '<tbody>'


								html += '<tr>'
								html += '<td id="turno">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="colorVerde" onclick="colorChange(this);">` + aulas.join(' \n ') + `</td>`

									} else if (diasMB.some(t => t == (i + 1))) {

										html += `<td class="blue"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

									} else if (diasMS.some(r => r == (i + 1))) {

										html += `<td class="blue"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

									} else {

										html += `<td class="colorRojo"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`
									}
								}


								html += '</tr>'

								html += '<tr>'
								html += '<td id="turno">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="colorVerde"  onclick="colorChange(this);">` + aulas.join(' \n ') + `</td>`

									} else if (diasTB.some(t => t == (i + 1))) {

										html += `<td class="blue"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

									} else if (diasTS.some(q => q == (i + 1))) {

										html += `<td class="blue"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

									} else {


										html += `<td class="colorRojo"  onclick="colorChange(this);" id="changed">` + 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>'
							html += '<div class="section">'

							html += '<h6 id="nombreDocente" style="font-weight:bold;">' + docente.nombre + '</h6>'
							html += '<label id="codDocente" style="visibility:hidden;">' + docente.codDocente + '</label>'


							html += '<div class="form-control">'
							html += '<div class="card grey lighten-2">'
							html += '<div class="card-content black-text">'
							//PRIMERA FILA
							html += '<div class="row" style="margin-bottom:0px">'
							html += '<div class="input-field col s3"><i class="material-icons dp48">local_phone</i> <strong>' + docente.celular + '</strong></div>'
							html += '<div class="input-field col s3"><i class="material-icons dp48">school</i><strong> Puesto Nro: ' + docente.puesto + '</strong></div>'
							html += '<div class="input-field col s6"><i class="material-icons dp48">hdr_weak</i> <strong>Exa. Encuesta: ' + docente.notaEncuesta + '</strong></div>'
							html += '</div>'

							//SEGUNDA FILA
							html += '<div class="row" style="margin-bottom:0px">'
							html += '<div class="input-field col s3"><i class="material-icons dp48">room</i> <strong>' + docente.distrito + '</strong></div>'
							html += '<div class="input-field col s6"><i class="material-icons dp48">hdr_strong</i> <strong> Exa. Academico: ' + docente.examenNota + '</strong></div>'
							html += '</div>'
							//TERCERA  FILA      

							html += '<div class="row" style="margin-bottom:0px">'
							html += '<div class="input-field col s3"><i class="material-icons dp48">email</i> <strong>' + docente.correo + '</strong></div>'
							html += '<div class="input-field col s6"><i class="material-icons dp48">home</i> <strong>' + docente.direccion + '</strong></div>'

							html += '</div>'

							html += '</div>'
							html += '</div>'

							html += '</div>'

							html += '<p></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)
										}
									})
								}

								let diasin = docente.diasin.split('-') || []
								let diasMS = []
								let diasTS = []

								diasin.forEach(function (b) {
									let nTurnoS = b.split('#')[0]
									let nDiaS = b.split('#')[1]

									if (nTurnoS == '1') {
										diasMS.push(nDiaS)
									} else if (nTurno == '2') {
										diasTS.push(nDiaS)
									}

								})


								let bloqueo = docente.bloqueo.split('-') || []
								let diasMB = []
								let diasTB = []
								let aulasMB = []
								let aulasTB = []

								bloqueo.forEach(function (b) {
									let nTurno = b.split('#')[0]
									let nDia = b.split('#')[1]

									if (nTurno == '1') {
										diasMB.push(nDia)
									} else if (nTurno == '2') {
										diasTB.push(nDia)
									}

								})


								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 id="dia">LUNES</td>'
								html += '<td id="dia">MARTES</td>'
								html += '<td id="dia">MIERCOLES</td>'
								html += '<td id="dia">JUEVES</td>'
								html += '<td id="dia">VIERNES</td>'
								html += '<td id="dia">SABADO</td>'
								html += '</tr>'
								html += '</thead>'
								html += '<tbody>'


								html += '<tr>'
								html += '<td id="turno">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="colorVerde" onclick="colorChange(this);"> ` + aulas.join(' \n ') + `</td> `

									} else if (diasMB.some(t => t == (i + 1))) {

										html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

									} else if (diasMS.some(r => r == (i + 1))) {

										html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

									} else {

										html += '<td class="colorRojo"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '
									}
								}


								html += '</tr>'

								html += '<tr>'
								html += '<td id="turno">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="colorVerde"  onclick="colorChange(this);"> ` + aulas.join(' \n ') + `</td> `


									} else if (diasTB.some(t => t == (i + 1))) {

										html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

									} else if (diasTS.some(q => q == (i + 1))) {

										html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td>'

									} else {


										html += '<td class="colorRojo"  onclick="colorChange(this);" id="changed"> ' + 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 peticionWith3Parameters(json) {

			$.ajax({
				url: '../ServletHorario?Accion=listarVistaDobleDisponibilidad',
				type: 'POST',
				dataType: 'json',
				data: {
					json: JSON.stringify(json)
				},
				success: function (data, textStatus, jqXHR) {


					let html = ''
					let nTurno = []
					let nDia = []
					let mensaje = 'No registrado'
					data.data.forEach(function (docente) {
						if (typeof (docente.celular && docente.distrito) == "undefined") {

							html += '<table>'
							html += '<div class="divider"></div>'
							html += '<div class="section">'

							html += '<h6 id="nombreDocente">' + docente.nombre + '<span></span><span></span><span style="margin-left:650px;font-size:20px;color:#6C7807"><i class="small material-icons" title="Puesto" style="color:black;">grade</i><strong>No registrado</strong></span></h6>'
							html += '<label id="codDocente" style="visibility:hidden;">' + docente.codDocente + '</label>'

							html += '<tr>'
							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 += '<p>Zona: No registrado</p>'
							html += '</tr>'

							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)
										}
									})
								}

								let diasin = docente.diasin.split('-') || []
								let diasMS = []
								let diasTS = []

								diasin.forEach(function (b) {
									let nTurnoS = b.split('#')[0]
									let nDiaS = b.split('#')[1]

									if (nTurnoS == '1') {
										diasMS.push(nDiaS)
									} else if (nTurno == '2') {
										diasTS.push(nDiaS)
									}

								})


								let bloqueo = docente.bloqueo.split('-') || []
								let diasMB = []
								let diasTB = []
								let aulasMB = []
								let aulasTB = []

								bloqueo.forEach(function (b) {
									let nTurno = b.split('#')[0]
									let nDia = b.split('#')[1]

									if (nTurno == '1') {
										diasMB.push(nDia)
									} else if (nTurno == '2') {
										diasTB.push(nDia)
									}

								})


								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" id="tableDisponibilidad">'
								html += '<thead>'
								html += '<tr>'
								html += '<td>TURNO</td>'
								html += '<td id="dia">LUNES</td>'
								html += '<td id="dia">MARTES</td>'
								html += '<td id="dia">MIERCOLES</td>'
								html += '<td id="dia">JUEVES</td>'
								html += '<td id="dia">VIERNES</td>'
								html += '<td id="dia">SABADO</td>'
								html += '</tr>'
								html += '</thead>'
								html += '<tbody>'


								html += '<tr>'
								html += '<td id="turno">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="colorVerde" onclick="colorChange(this);">` + aulas.join(' \n ') + `</td>`

									} else if (diasMB.some(t => t == (i + 1))) {

										html += `<td class="colorAzul"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

									} else if (diasMS.some(r => r == (i + 1))) {

										html += `<td class="colorAzul"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

									} else {

										html += `<td class="colorRojo"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`
									}
								}


								html += '</tr>'

								html += '<tr>'
								html += '<td id="turno">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="colorVerde"  onclick="colorChange(this);">` + aulas.join(' \n ') + `</td>`

									} else if (diasTB.some(t => t == (i + 1))) {

										html += `<td class="colorAzul"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

									} else if (diasTS.some(q => q == (i + 1))) {

										html += `<td class="colorAzul"  onclick="colorChange(this);" id="changed">` + aulas.join(' \n ') + `</td>`

									} else {


										html += `<td class="colorRojo"  onclick="colorChange(this);" id="changed">` + 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>'
							html += '<div class="section">'

							html += '<h6 id="nombreDocente" style="font-weight:bold;">' + docente.nombre + '<span></span><span></span> <span> </span>&nbsp;&nbsp; <a href="javascript:updateObservacion(this.value);" value=' + docente.observacion + '>' + docente.observacion + '</a></span></h6>'
							html += '<label id="codDocente" style="visibility:hidden;">' + docente.codDocente + '</label>'

							html += '<div class="form-control">'
							html += '<div class="card grey lighten-2">'
							html += '<div class="card-content black-text">'
							//PRIMERA FILA
							html += '<div class="row" style="margin-bottom:0px">'
							html += '<div class="input-field col s3"><i class="material-icons dp48">local_phone</i> <strong>' + docente.celular + '</strong></div>'
							html += '<div class="input-field col s3"><i class="material-icons dp48">school</i><strong> Puesto Nro:  ' + docente.puesto + '</strong></div>'
							html += '<div class="input-field col s6"><i class="material-icons dp48">hdr_weak</i> <strong>Exa. Encuesta ' + docente.notaEncuesta + '</strong></div>'
							html += '</div>'

							//SEGUNDA FILA
							html += '<div class="row" style="margin-bottom:0px">'
							html += '<div class="input-field col s3"><i class="material-icons dp48">room</i> <strong>' + docente.distrito + '</strong></div>'
							html += '<div class="input-field col s3"><i class="material-icons dp48">room</i> <strong>' + docente.zona + '</strong></div>'
							html += '<div class="input-field col s6"><i class="material-icons dp48">hdr_strong</i> <strong> Exa. Academico ' + docente.examen + '</strong></div>'
							html += '</div>'
							//TERCERA  FILA      

							html += '<div class="row" style="margin-bottom:0px">'
							html += '<div class="input-field col s3"><i class="material-icons dp48">email</i> <strong>' + docente.correo + '</strong></div>'
							html += '<div class="input-field col s6"><i class="material-icons dp48">home</i> <strong>' + docente.direccion + '</strong></div>'

							html += '</div>'
							html += '</div>'
							html += '</div>'
							html += '</div>'


							html += '<p></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)
										}
									})
								}

								let diasin = docente.diasin.split('-') || []
								let diasMS = []
								let diasTS = []

								diasin.forEach(function (b) {
									let nTurnoS = b.split('#')[0]
									let nDiaS = b.split('#')[1]

									if (nTurnoS == '1') {
										diasMS.push(nDiaS)
									} else if (nTurno == '2') {
										diasTS.push(nDiaS)
									}

								})


								let bloqueo = docente.bloqueo.split('-') || []
								let diasMB = []
								let diasTB = []
								let aulasMB = []
								let aulasTB = []

								bloqueo.forEach(function (b) {
									let nTurno = b.split('#')[0]
									let nDia = b.split('#')[1]

									if (nTurno == '1') {
										diasMB.push(nDia)
									} else if (nTurno == '2') {
										diasTB.push(nDia)
									}

								})


								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 id="dia">LUNES</td>'
								html += '<td id="dia">MARTES</td>'
								html += '<td id="dia">MIERCOLES</td>'
								html += '<td id="dia">JUEVES</td>'
								html += '<td id="dia">VIERNES</td>'
								html += '<td id="dia">SABADO</td>'
								html += '</tr>'
								html += '</thead>'
								html += '<tbody>'


								html += '<tr>'
								html += '<td id="turno">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="colorVerde" onclick="colorChange(this);"> ` + aulas.join(' \n ') + `</td> `

									} else if (diasMB.some(t => t == (i + 1))) {

										html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

									} else if (diasMS.some(r => r == (i + 1))) {

										html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

									} else {

										html += '<td class="colorRojo"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '
									}
								}


								html += '</tr>'

								html += '<tr>'
								html += '<td id="turno">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="colorVerde"  onclick="colorChange(this);"> ` + aulas.join(' \n ') + `</td> `


									} else if (diasTB.some(t => t == (i + 1))) {

										html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td> '

									} else if (diasTS.some(q => q == (i + 1))) {

										html += '<td class="colorAzul"  onclick="colorChange(this);" id="changed"> ' + aulas.join(' \n ') + '</td>'

									} else {

										html += '<td class="colorRojo"  onclick="colorChange(this);" id="changed"> ' + 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 btnDesactivarHorario(codDocente) {


			let question = confirm("¿Esta seguro de eliminar su horario ?");
			if (question) {
				console.log(codDocente)
				var periodo = "<%=periodo != null ? periodo.getCodigoPeriodo() : ""%>";

				desactivarHorario(codDocente, periodo)


			} else {
				console.log("cancel")
			}


		}

		function desactivarHorario() {

		}

		function colorChange(obj) {


			let periodo = '<%= periodo != null ? periodo.getCodigoPeriodo() : ""%>'

			let codigoDoc = $(obj).parents('div.section').find('#codDocente').text();
			let nombreDoc = $(obj).parents('div.section').find('#nombreDocente').text();

			let turno = $(obj).parents('tr').find('#turno').text();

			let numeroTurno = 0;
			if (turno === "T") {
				numeroTurno = 2
			} else if (turno === "M") {
				numeroTurno = 1
			}


			let dia = $(obj).parent().children().index(obj);


			if ($(obj).hasClass('colorAzul')) {

				let question = confirm("¿Esta seguro de querer desbloquear el dia " + convertirDia(dia) + " ?");
				if (question) {

					$.ajax({
						url: '../ServletHorario?Accion=rollbackDisponibilidad',
						type: 'POST',
						data: {
							codDocente: codigoDoc,
							diaBloquear: dia,
							periodo: periodo,
							turno: numeroTurno

						},
						success: function (data, textStatus, jqXHR) {

							if (data.trim() == 2) {

								if ($(obj).hasClass('colorAzul')) {
									$(obj).removeClass('colorAzul');
									$(obj).addClass('colorRojo');
									mostrarSnackBarDesbloqueo();
								}

							} else if (data.trim() == 3) {
								if ($(obj).hasClass('colorAzul')) {

									$(obj).removeClass('colorAzul');

									$(obj).addClass('colorVerde');
									mostrarSnackBarDesbloqueo();
								}

							}


						}
					})
				}

			} else {


				let question = confirm("¿Esta seguro de querer bloquear el dia " + convertirDia(dia) + " ?");

				if (question) {

					//aqui realizar peticion AJAX
					$.ajax({
						url: '../ServletHorario?Accion=updateDisponibilidad',
						type: 'POST',
						data: {
							codDocente: codigoDoc,
							diaBloquear: dia,
							periodo: periodo,
							turno: numeroTurno

						},
						success: function (data, textStatus, jqXHR) {

							if (data.trim() == 1) {

								if ($(obj).hasClass('colorVerde')) {

									$(obj).removeClass('colorVerde');
									$(obj).addClass('colorAzul');
									mostrarSnackBar();
								} else {
									$(obj).removeClass('colorRojo');
									$(obj).addClass('colorAzul');
									mostrarSnackBar();
								}

							} else {
								console.log("error");
							}


						}
					})




				} else {
					window.exit();
				}
			}
//				$(obj).parents('tr').find('#changed').removeClass('red');
//				$(obj).parents('tr').find('#changed').addClass('blue');

		}

		function convertirDia(dia) {
			let diaLetras = "";
			switch (dia) {
				case 1:
					diaLetras = "Lunes";
					break;
				case 2:
					diaLetras = "Martes";
					break;
				case 3:
					diaLetras = "Miercoles";
					break;
				case 4:
					diaLetras = "Jueves";
					break;
				case 5:
					diaLetras = "Viernes";
					break;
				case 6:
					diaLetras = "Sabado";
					break;
				default :
					break;

			}

			return diaLetras;
		}

		function mostrarSnackBar() {
			// Get the snackbar DIV
			var x = document.getElementById("snackbar");

			// Add the "show" class to DIV
			x.className = "show";

			// After 3 seconds, remove the show class from DIV
			setTimeout(function () {
				x.className = x.className.replace("show", "");
			}, 3000);
		}
		function mostrarSnackBarDesbloqueo() {
			// Get the snackbar DIV
			var x = document.getElementById("snackbar2");

			// Add the "show" class to DIV
			x.className = "show";

			// After 3 seconds, remove the show class from DIV
			setTimeout(function () {
				x.className = x.className.replace("show", "");
			}, 3000);
		}

		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)
					$("#btnBuscar").attr('enabled', 'enabled');
				})
		}

		function pintarTDRed() {
			//alert("holii");
			$(".red").text("X");
		}

		function desactivarPrint() {
			$("#btnImprimir").attr('disabled', 'disabled');
		}
		function activarPrint() {
			$("#btnImprimir").attr('disabled', false);
		}

		function updateObservacion(obs) {
			let textObs = prompt("Ingresar Observación");
			if (textObs != null) {

				$.ajax({
					type: 'POST',
					url: '../ServletHorario?accion=updateObservacion',
					data: {
						observacion: textObs
					}, success: function (data, textStatus, jqXHR) {
						alert("Actualizado exitosamente !")
					}
				})

			}
		}


	</script>
	<script src="js/pages/webSocketHorario.js" type="text/javascript"></script>



</body>
</html>


