<%-- 
    Document   : vistaConformidad
    Created on : 07-feb-2019, 8:03:27
    Author     : sistem20user
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="validar.jsp" %>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--		<script src="js/pages/jquery-3.3.1.min.js" type="text/javascript"></script>-->
		<link href="css/display.css" rel="stylesheet" type="text/css"/>
		<link rel="stylesheet" href="../assets/css/bootstrap.css" />
		<link rel="stylesheet" href="../assets/css/font-awesome.css" />
		<link rel="stylesheet" href="../assets/css/jquery-ui.css" />
		<link rel="stylesheet" href="../assets/css/ace-fonts.css" />
		<link href="css/alert.css" rel="stylesheet" type="text/css"/>
		<link href="../assets/css/datepicker.css" rel="stylesheet" type="text/css"/>
		<link href="../assets/css/daterangepicker.css" rel="stylesheet" type="text/css"/>
		<link href="../assets/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css"/>
		<link rel="stylesheet" href="../assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
		<script src="../assets/js/ace-extra.js"></script>

<!--    <a href="js/pages/vistaConformidad.js"></a>-->
		

		<link href="css/display.css" rel="stylesheet" type="text/css"/>
	  
		
		<title>JSP Page</title>
		<script type="text/javascript" language="javascript"> 
           const urlParams = new URLSearchParams(window.location.search);
	         const myDni = urlParams.get('dni');
				
					 
		</script>
	</head>
	<body>
		
		
		<div id="dialog-confor2" class="hide">
								<br>
								¿Está seguro de confirmar el horario?
								<br><br>
	   </div>
		<div id="dialog-noti1" class="hide">
								<br>
								La Conformidad del Docente se registro con éxito.
								<br><br>
		</div>
		<div id="dialog-cargando" class="hide">
								<table cellpadding="0" cellspacing="0" width="100%">
									<tr><td align="center"><img src="imagenes/cargando.gif" border=0></td></tr>
								</table>
		</div>


	<div class="navbar navbar-default" id="navbar">

			<div class="navbar-container" id="navbar-container">

			</div>
			<div class="navbar-header pull-left">
				<span class="navbar-brand">
					<small>
						<i class="ace-icon fa fa-calendar green"></i>
						<span class="orange">Sistema</span>
						<span class="white">de Horarios</span>
					</small>
				</span>

			</div>
		</div>

<div class="main-container">
			<div class="main-content-inner">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li>
							<i class="ace-icon fa fa-home home-icon"></i>
							<a href="principalDocente.jsp">INICIO</a>
						</li>
						<li class="active">
							Horarios
						</li>
					</ul>

				</div>

				<div class="page-content">
					<div class="page-header">
						<h1>HORARIO
							<small>
								<i class="ace-icon fa fa-angle-double-right"></i>
								CONFIRMAR HORARIO
							</small>
						</h1>
					</div>
					<div class="row">
						<select id="cboPeriodo" class="chosen-select form-control">

						</select>

						<div class="col-sm-12" style="width: 100%">
              <div class="col-sm-12">

								<hr>
								<form class="formular">
									<div id="divListaRegistro">
										<div>
											
										
												<div id="tabla" style="display: none;" class="table">

													<table border="2" id="tabla" class="table">
																				<tbody>
																					<tr style="background-color: #307ecc;"> 
																						<td colspan="7" height='50' style="color: white;font-size:20px;">Datos del docente</td>
																					</tr> 
																					<tr class="cabecera">
																						<td colspan="1" class="datacabecera"><b>DOCENTE:</b></td>
																						<td colspan="1" id="docente"></td>
																						<td colspan="1" class="datacabecera"><b>CORREO:</b></td>
																						<td colspan="1" id="correo"></td>
																						<td colspan="3"></td>
																					</tr> 
																					<tr  class="cabecera">

																						<td colspan="1"  class="datacabecera"><b>CELULAR:</b></td>
																						<td colspan="1"  align='left' id="celular"></td>
																						<td colspan="1"class="datacabecera" ><b>DISTRITO:</b></td>
																						<td colspan="1" id="distrito"></td>
																						<td colspan="3" ></td>
																					</tr>
																					<tr>
																					
																					</tr>

																					<tr  class="cabecera">
																						<td colspan="1"  height='70'class="datacabecera" ><b>DIRECCIÓN:</b></td>
																						<td colspan="1"  id="direccion"></td>
																						<td colspan="1"  ></td>
																						<td colspan="1"  ></td>
																						<td colspan="1"  ></td>
																						<td colspan="1"  ></td>
																						<td colspan="1"  ></td>
																						
																					</tr> 
<!--																					<tr> 
																						<td height='1'  colspan="7" ></td>
																					</tr>-->


																					<tr class="cabeceraDias">
																						<th style="background-color: #F1F1F1;color:black;text-align: center;" >TURNO</th>
																						<th style="background-color: #F1F1F1;color:black;text-align: center;">LUNES</th>
																						<th style="background-color: #F1F1F1;color:black;text-align: center;">MARTES</th>
																						<th style="background-color:#F1F1F1;color:black;text-align: center;">MIERCOLES</th>
																						<th style="background-color:#F1F1F1;color:black;text-align: center;">JUEVES</th>
																						<th style="background-color: #F1F1F1;color:black;text-align: center;">VIERNES</th>
																						<th style="background-color: #F1F1F1;color:black;text-align: center;">SABADO</th>
																					</tr>
																					<tr>
																					<tr id="trM">

																					</tr>
																					<tr id="trT">

																					</tr>
																					</tr>

																				</tbody>
																			</table>
												
												
												</div>
												<div class="container">
													<button type="button" class="width-5 pull-center btn btn-sm btn-primary" id="btnConfirmar" style="margin-left:400px;" onclick='confirmar();'>
                                                                <i class="ace-icon fa fa-key"></i>
                                                                <span class="bigger-110">Confirmar Horario</span>
                                                            </button>
													</div>
									</div>
							   <div class="alert alert-info" data-placement="top" style="display: none;">
									<strong>Seleccionar Periodo.</strong>
								</div>
							</form>

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

			</div>
				</div>
		</div>
    <script src="../assets/js/jquery.js" type="text/javascript"></script>
   <script src="js/pages/vistaHorarioDocente2.js" type="text/javascript"></script>
	 
	 
	 <script type="text/javascript">
			window.jQuery || document.write("<script src='../assets/js/jquery.js'>" + "<" + "/script>");
		</script>
	 	<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='../assets/js/jquery1x.js'>"+"<"+"/script>");
</script>
<![endif]-->
		<script type="text/javascript">
			if ('ontouchstart' in document.documentElement)
				document.write("<script src='../assets/js/jquery.mobile.custom.js'>" + "<" + "/script>");
		</script>
		<script src="../assets/js/bootstrap.js"></script>
	 
	 
	 	<!-- page specific plugin scripts -->
		<script src="../assets/js/jquery-ui.js"></script>
		<script src="../assets/js/jquery.ui.touch-punch.js"></script>
		
		
		
	 		<!--[if lte IE 8]>
			<script src="../assets/js/excanvas.js"></script>
		<![endif]-->
		<script src="../assets/js/jquery-ui.custom.js"></script>
		<script src="../assets/js/jquery.ui.touch-punch.js"></script>
		<script src="../assets/js/jquery.easypiechart.js"></script>
		<script src="../assets/js/jquery.sparkline.js"></script>
		<script src="../assets/js/flot/jquery.flot.js"></script>
		<script src="../assets/js/flot/jquery.flot.pie.js"></script>
		<script src="../assets/js/flot/jquery.flot.resize.js"></script>
	 
	 
	 
	 	<!-- ace scripts -->
		<script src="../assets/js/ace/elements.scroller.js"></script>
		<script src="../assets/js/ace/elements.colorpicker.js"></script>
		<script src="../assets/js/ace/elements.fileinput.js"></script>
		<script src="../assets/js/ace/elements.typeahead.js"></script>
		<script src="../assets/js/ace/elements.wysiwyg.js"></script>
		<script src="../assets/js/ace/elements.spinner.js"></script>
		<script src="../assets/js/ace/elements.treeview.js"></script>
		<script src="../assets/js/ace/elements.wizard.js"></script>
		<script src="../assets/js/ace/elements.aside.js"></script>
		<script src="../assets/js/ace/ace.js"></script>
		<script src="../assets/js/ace/ace.ajax-content.js"></script>
		<script src="../assets/js/ace/ace.touch-drag.js"></script>
		<script src="../assets/js/ace/ace.sidebar.js"></script>
		<script src="../assets/js/ace/ace.sidebar-scroll-1.js"></script>
		<script src="../assets/js/ace/ace.submenu-hover.js"></script>
		<script src="../assets/js/ace/ace.widget-box.js"></script>
		<script src="../assets/js/ace/ace.settings.js"></script>
		<script src="../assets/js/ace/ace.settings-rtl.js"></script>
		<script src="../assets/js/ace/ace.settings-skin.js"></script>
		<script src="../assets/js/ace/ace.widget-on-reload.js"></script>
		<script src="../assets/js/ace/ace.searchbox-autocomplete.js"></script>
		<script src="../assets/js/ace/ace.searchbox-autocomplete.js"></script>
	 
	 
	 
	 	<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>
		<!--<link rel="stylesheet" href="css/template.css" type="text/css"/>-->
	 
	 <script type="text/javascript">
		 
		 	//override dialog's title function to allow for HTML titles
				$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
					_title: function (title) {
						var $title = this.options.title || '&nbsp;'
						if (("title_html" in this.options) && this.options.title_html == true)
							title.html($title);
						else
							title.text($title);
					}
				}));
				
					$('.dialogs,.comments').ace_scroll({
					size: 300
				});
		 
		 
		 
		function confirmar(){
			var cant = 18;
				var cadena = "";

				$("input[type=checkbox]:checked").each(function(){
						let asignar2=this.value;
						if (asignar2 != "" && asignar2 != undefined) {
						if (cadena == "") {
							cadena += asignar2;
						} else {
							cadena += "-"+asignar2;
						}
					}	
	
	      });
				console.log(cadena)
				if (cadena == "") {
//					alerta2();
				} else {
					alerta2(cadena);
				}
				
				console.log(codigoDocente)
				console.log(codPer)
				
		}
		
				function alerta2(cadena) {
				$("#dialog-confor2").removeClass('hide').dialog({
					resizable: false,
					modal: true,
					title: "<div class='widget-color-blue' ><div class='widget-header white' ><h4 class='smaller' ><i class='ace-icon fa fa-check-circle white'></i> <span class='white'>Conformidad</span></h4></div></div>",
					title_html: true,
					buttons: [
						{
							html: "<i class='ace-icon fa fa-check bigger-110'></i>&nbsp; SI",
							"class": "btn btn-primary btn-xs",
							click: function () {
								confirmarHorario(cadena);
							}
						}, {
							html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; NO",
							"class": "btn btn-danger btn-xs",
							click: function () {
								$(this).dialog("close");
							}
						}
					]
				});
			}
		
		function confirmarHorario(cadena){
			let cadenaFinal=cadena.replace(" ","");
			$.ajax({
					type: 'POST',
					url: '../ServletDocente?Accion=registrarDisponibilidadConformidad',
					data: 'codDoc=' + codigoDocente + '&DiasConf=' + cadenaFinal + '&periodo=' + codPer,
					beforeSend: function () {
						cargando();
					},
					 success: function (resultado) {
					close_carga();
						if (resultado == 1) {
							alerta4();
						} else if (resultado == 2) {
							alerta4();
						} else {
							console.log("resultado 6")
						}
					}, complete: function () {
				   $("#dialog-confor2").dialog("close");

					}
				});
			
		}
		
			function alerta4(){
				$("#dialog-noti1").removeClass('hide').dialog({
					resizable: false,
					modal: true,
					title: "<div class='widget-color-green' ><div class='widget-header white' ><h4 class='smaller' ><i class='ace-icon fa fa-tags white'></i> <span class='white'>Notificación</span></h4></div></div>",
					title_html: true,
					buttons: [
						{
							html: "<i class='ace-icon fa fa-check bigger-110'></i>&nbsp; ACEPTAR",
							"class": "btn btn-success btn-xs",
							click: function () {
								window.location="http://app9.sacooliveros.edu.pe:8080/horario/vista/vistaHorarioDocente.jsp?dni="+myDni
								$(this).dialog("close");
							
								
							}
						}
					]
				});
			}
			
				function cargando() {
				$("#dialog-cargando").removeClass('hide').dialog({
					resizable: false,
					modal: true,
					title: "<div class='widget-header' ><h4 class='smaller'><i class='fa fa-spinner'></i> Cargando...</h4></div>",
					title_html: true
				});
			}

			function close_carga() {
				$("#dialog-cargando").dialog("close");
			}
		
		
		
	 </script>
	<link rel="stylesheet" href="../assets/css/ace.onpage-help.css" />
		<link rel="stylesheet" href="../docs/assets/js/themes/sunburst.css" />
		
		<script src="../assets/js/ace/elements.onpage-help.js"></script>
		

		<script type="text/javascript"> ace.vars['base'] = '..';</script>
		<script src="../assets/js/ace/elements.onpage-help.js"></script>
		<script src="../assets/js/ace/ace.onpage-help.js"></script>
		<script src="../docs/assets/js/rainbow.js"></script>
		<script src="../docs/assets/js/language/generic.js"></script>
		<script src="../docs/assets/js/language/html.js"></script>
		<script src="../docs/assets/js/language/css.js"></script>
		<script src="../docs/assets/js/language/javascript.js"></script>



		<script src="js/languages/jquery.validationEngine-es.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>




</html>
