<%-- 
    Document   : crearUsuarios
    Created on : 15-feb-2019, 16:55:08
    Author     : sistem20user
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JSP Page</title>
		
			<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 rel="stylesheet" href="../assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
		<script src="../assets/js/ace-extra.js"></script>
		
	</head>
	<body onload='abrirModal();'>
		
		<div id="dialog-registro" class="hide">
			<form autocomplete="off">
			<table  width='100%' border='0'>
			<tr>
			  	<td>Nombre: </td>
					<td><input type="text" name="txtusuario" id="txtUsuario" autocomplete="off" required=""/> </td> <td>Apellido Paterno : <input type="text" name="txtusuario" id="txtApellido" required="" autocomplete="off" onblur="crearUser();" /></td>
		  </tr>
				
				
			<tr>
							<td>Clave: </td>
							<td><input type="text" name="txtclave" id="txtClave" required=""  autocomplete="off" /></td>
			</tr>
			
			
			<tr>
				
				
				<td>Usuario :</td>
				<td>
					<input type="text" name="txtclave" id="txtUser" required="" disabled/>
				</td>
				
			</tr>
			<tr>
						<td>Año</td>
						<td>
							<select id="cmbAnio">
								<option value="2019">2019</option>
							</select>
						</td>
			</tr>
			<tr>
						<td>Sede :</td>
						<td>
							<div id="divLocales">
								<select class="chosen-select form-control validate[required]" id="cmbSede" required="" >
									<option value="">[Seleccione]</option>
								</select>
							</div>
						</td>

			</tr>
<!--			<tr>
				<td><input type="button" value='Crear Usuario' onclick="registroUsuario();"/></td>
			</tr>-->
				
			</table>
	
		</form>
		</div>
		
		<div id="dialog-noti1" class="hide">
			Se registro con exito al usuario.<br>
			¿Desea seguir registrando?
		</div>
		<div id="dialog-noti2" class="hide">
			
		  El nombre de usuario ya existe.
		</div>
		<div id="dialog-noti3" class="hide">
			
		 Se debe de completar todos los campos.
		</div>

		
				<!-- the following scripts are used in demo only for onpage help and you don't need them -->
         	<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='../assets/js/jquery.js'>"+"<"+"/script>");
		</script>      
		<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"/>
								
		<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 abrirModal(){
					cargarSede();
				$("#dialog-registro").removeClass('hide').dialog({
					resizable: false,
					modal: true,
					 width: 500,
					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'>Registrar Usuario</span></h4></div></div>",
					title_html: true,
					
					buttons: [
						{
							html: "<i class='ace-icon fa fa-check bigger-110'></i>&nbsp; Registrar",
							"class": "btn btn-primary btn-xs",
							click: function () {
						
					       let op=validar();
							
								if(op){
									registroUsuario();
								}else{
									alerta6();
								}		
							}
						}, {
							html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; Cancelar",
							"class": "btn btn-danger btn-xs",
							click: function () {
								$(this).dialog("close");
							}
						}
					]
				});
				}
				
				function crearUser(){
					
					
					let nombre=$("#txtUsuario").val();
					let apellido=$("#txtApellido").val();
					let generateUser=nombre.substring(0,1);
					let apellidofinal=apellido.replace(/ /g, "");
				
					$("#txtUser").val(generateUser+apellidofinal);
					
				}
			
			function validar(){
			
				let flag=false;
				let user=$("#txtUsuario").val();
			 let clave=$("#txtClave").val();
				let sede=$("#cmbSede option:selected").val();
				
				if(user == "" || clave == "" || sede == ""){
					flag=false;
				}else{
					flag=true;
				}
				
				
	     return flag;
			}
			
			
			function cargarSede() {
				$.ajax({
					type: 'POST',
					url: '../ServletUsuario?accion=cargarSede2',
					 success: function (resultado) {
//						close_carga();
						$("#divLocales").html(resultado);
					}, complete: function () {
						
					}
				});
			}
			
			
			function registroUsuario(){
				let user=$("#txtUser").val();
				let clave=$("#txtClave").val();
				let sede=$("#cmbSede option:selected").val();
				
				$.ajax({
					url:'../ServletUsuario?accion=registroUsuarioObservador',
					type:'POST',
					data:{
						user:user,
						pass:clave,
						sede:sede
					},
					success: function (data, textStatus, jqXHR) {

						if(data.trim() == "1"){
						  alerta4();
						}else if(data.trim() == "0"){
							alerta5();
						}
						
						
           }
				});
				
			}
			
			
			
				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; SI",
							"class": "btn btn-success btn-xs",
							click: function () {
								$("#txtUsuario").val("");
								$("#txtClave").val("");
								$("#txtApellido").val("");
								$("#txtUser").val("");
								
								$(this).dialog("close");
								document.getElementById("txtUsuario").focus();
							
							}
						},
						{
							html: "<i class='ace-icon fa fa-times bigger-110'></i>&nbsp; NO",
							"class": "btn btn-danger btn-xs",
							click: function () {
								$(this).dialog("close");
								$("#dialog-registro").dialog("close");
							}
						}
					]
				});
			}
				function alerta5(){
				$("#dialog-noti2").removeClass('hide').dialog({
					resizable: false,
					modal: true,
					title: "<div class='widget-color-red' ><div class='widget-header white' ><h4 class='smaller' ><i class='ace-icon fa fa-tags white'></i> <span class='white'>Advertencia</span></h4></div></div>",
					title_html: true,
					buttons: [
						{
							html: "<i class='ace-icon fa fa-check bigger-110'></i>&nbsp; Cerrar",
							"class": "btn btn-danger btn-xs",
							click: function () {
								$(this).dialog("close");
							
							}
						}
					
					]
				});
			}
				function alerta6(){
				$("#dialog-noti3").removeClass('hide').dialog({
					resizable: false,
					modal: true,
					title: "<div class='widget-color-red' ><div class='widget-header white' ><h4 class='smaller' ><i class='ace-icon fa fa-tags white'></i> <span class='white'>Advertencia</span></h4></div></div>",
					title_html: true,
					buttons: [
						{
							html: "<i class='ace-icon fa fa-check bigger-110'></i>&nbsp; Cerrar",
							"class": "btn btn-danger btn-xs",
							click: function () {
								$(this).dialog("close");
							
							}
						}
					
					]
				});
			}
			
		</script>
	</body>
	
</html>
