<!DOCTYPE html>
<html lang="en">

    <style>
        .form-container {
            display: flex;
            flex-direction: column;
        }
        .input-group-wrapper {
            display: flex;
            flex-direction: column;
        }
        .input-group {
            margin-bottom: 1rem; /* Espacio entre los campos de entrada */
        }
        .btn-container {
            display: flex;
            justify-content: flex-end; /* Alinea el botón a la derecha */
        }
    </style>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title><?php echo APP_NAME . ' | ' . APP_DESCRIPTION ?></title>

        <link rel="icon" href="<?php echo base_url() ?>assets/dist/img/Bandera.png">

        <!-- Google Font: Source Sans Pro -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
        <!-- Font Awesome -->
        <link rel="stylesheet" href="<?php echo base_url() ?>assets/plugins/fontawesome-free/css/all.min.css">
        <!-- icheck bootstrap -->
        <link rel="stylesheet" href="<?php echo base_url() ?>assets/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
        <!-- Theme style -->
        <link rel="stylesheet" href="<?php echo base_url() ?>assets/dist/css/adminlte.min.css">
    </head>

    <body class="hold-transition login-page">
	    <div class="login-box">
		    <div class="card card-outline card-primary">
			    <div class="card-header text-center">
				    <a href="" class="brand-link">
					    <img src="<?php echo base_url() ?>assets/dist/img/hotel.png" alt="AdminLTE hotel" class="brand-image img-circle elevation-3" style="opacity: 100">
						<span class="brand-text font-weight-light"> </span>
				    </a>
			    </div>
			    <div class="card-body">
				    <p class="login-box-msg">Ingrese los datos del usuario</p>
				    <form id="quickForm"  autocomplete="off">
					    <div class="input-group mb-3">
						    <input type="text" id="txt_user" class="form-control" placeholder="Usuario">
						    <div class="input-group-append">
							    <div class="input-group-text">
								    <span class="fas fa-envelope"></span>
							    </div>
						    </div>
					    </div>

					    <div class="input-group">
						    <input type="password" id="txt_password" class="form-control" placeholder="Contraseña">
						    <div class="input-group-append">
							    <div class="input-group-text">
								    <span class="fas fa-lock"></span>
							    </div>
						    </div>
					    </div>
					
					    <div class="btn-container">
						    <button type="button" id="btn_ingresar"  class="btn btn-primary">Ingresar</button>
					    </div>
				    </form>
			    </div>
		    </div>
	    </div>

<!-- ======================================================================================================================================================================================================= -->

	    <!-- jQuery -->
	    <script src="<?php echo base_url() ?>assets/plugins/jquery/jquery.min.js"></script>
	    <!-- Bootstrap 4 -->
	    <script src="<?php echo base_url() ?>assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
	    <!-- AdminLTE App -->
	    <script src="<?php echo base_url() ?>assets/dist/js/adminlte.min.js"></script>
	    <!-- SweetAlert -->
        <script src="<?php echo base_url() ?>assets/plugins/sweetalert2/sweetalert2.all.min.js"></script>

<!-- ======================================================================================================================================================================================================= -->
	    <script>
		    $("#btn_ingresar").click(function (){             
			    //Captura de valores 
			    var user     = $("#txt_user").val();
			    var password = $("#txt_password").val();
			
			    //Validacion de valores
			    if(user=="")     { Swal.fire("Error!!", "Debe ingresar un valor de usuario", "error"); 	        return;	} 
			    if(password=="") { Swal.fire("Error!!", "Debe ingresar un valor de clave de usuario", "error"); return; }

			    //llamada a micro servicio de validacion
			    $.ajax({
				    url: '<?php echo base_url() ?>Admin/post_login',//controlador
				    type: "POST",//tipo de peticion POST o GET
				    headers: {'X-Requested-With': 'XMLHttpRequest'},//Encabezados
				    data: {	'login' : user,
						    'clave' : password }//formato json Data                
                }).done(function(dato){
				    //convierto la respuesta json
				    var obj =JSON.parse(dato);
				    if (obj.res == 'ok'){
					    //llamamos al controlador
					    window.location.href="<?php echo base_url() ?>admin/home";
				    }else{
					    $('#txt_user').val('');
					    $('#txt_password').val('');
					    Swal.fire(obj.msg, "El login o la clave son incorrectas", "error");  
				    }
			    });
		    });
	    </script>
    </body>
</html>
