<?php include('../config/db.php'); ?>
<?php
session_start();
if($_POST){
    $txtUsuario=(isset($_POST['txtUsuario']))?$_POST['txtUsuario']:"";
    $txtPassword=(isset($_POST['txtPassword']))?$_POST['txtPassword']:"";
    $txtPassword = base64_encode($localBase."".$txtPassword);
    try{
        $sql=$conexion->prepare("SELECT * FROM instalacionacceso WHERE nombreUsuario=:run AND contrasenna=:pass and activo=1;");  
        $sql->bindParam(":run",$txtUsuario);
        $sql->bindParam(":pass",$txtPassword);
        $sql->execute();
        if($sql->rowCount() > 0){
            $usuario = $sql->fetch(PDO::FETCH_LAZY);
            $_SESSION['usuario'] = "okProv";
            $_SESSION['nomUsuario'] = $usuario['nombreUsuario'];
            $_SESSION['id'] = $usuario['id'];
            $_SESSION['perfil'] = $usuario['clienteId'];
            echo "<script>location.href='home.php';</script>";
            $conexion=null;
        }else{
            $mensaje = "Error: El usuario y/o contraseña incorrectos.";
        }
    }
    catch(Exception $ex){
        $mensaje = "Ha ocurrido un error al procesar el ingreso";
        echo($ex);
    }
}
?>
<html lang="en">
<head>

<style>

.header {
  position:relative;
  text-align:center;
  background: linear-gradient(60deg, rgba(212,208,227) 0%, rgba(4,65,72) 100%);
}

.inner-header {
  width:100%;
  margin: 0;
  padding: 0;
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
  .waves {
    height:180px;
    min-height:40px;
  }
}
</style>
      <title>Acceso clientes</title>
        <link rel="icon" type="image/png" href="../img/favicon.png" sizes="16x16">
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="../css/bootstrap.min.css" />
        <link rel="stylesheet" href="../css/bootstrap-icons.css" />
    </head>
  <body>
<script>
        function snow() {
            // 1. Defina una plantilla de copo de nieve
            var flake = document.createElement('div');
            // Personaje de copo de nieve ❄❉❅❆✻✼❇❈❊✥✺
            flake.innerHTML = '✻';
            flake.style.cssText = 'position:absolute;color:#fff;';
 
            // Obtiene la altura de la página, que es equivalente a la posición del eje Y cuando caen los copos de nieve
            var documentHieght = (window.innerHeight)-40;
            // Obtenga el ancho de la página, use este número para calcular, el valor de la izquierda cuando comienza el copo de nieve
            var documentWidth = (window.innerWidth)-40;
 
            // Define la cantidad de milisegundos para generar un copo de nieve
            var millisec = 100;
            // 2, establece el primer temporizador, un temporizador periódico y genera un copo de nieve cada vez (milisegundos);
            setInterval(function() { // Una vez que se carga la página, el temporizador comienza a funcionar
                // Genera aleatoriamente el valor de left al principio de la caída del copo de nieve, que es equivalente a la posición del eje X al principio
                var startLeft = Math.random() * documentWidth;
 
                // Genera aleatoriamente el valor de left al final de la caída del copo de nieve, que es equivalente a la posición del eje X al final
                var endLeft = Math.random() * documentWidth;
 
                // Generar aleatoriamente el tamaño del copo de nieve
                var flakeSize = 5 + 20 * Math.random();
 
                // Genera aleatoriamente la duración de la caída de nieve
                var durationTime = 4000 + 7000 * Math.random();
 
                // Genera aleatoriamente la transparencia al comienzo de la caída del copo de nieve
                var startOpacity = 0.7 + 0.3 * Math.random();
 
                // Genera aleatoriamente la transparencia al final de la caída de los copos de nieve
                var endOpacity = 0.2 + 0.2 * Math.random();
 
                // Clonar una plantilla de copo de nieve
                var cloneFlake = flake.cloneNode(true);
 
                // Modifica el estilo por primera vez, define el estilo del copo de nieve clonado
                cloneFlake.style.cssText += `
                        left: ${startLeft}px;
                        opacity: ${startOpacity};
                        font-size:${flakeSize}px;
                        top:-25px;
                            transition:${durationTime}ms;
                    `;
 
                // Empalmado en la página
                document.body.appendChild(cloneFlake);
 
                // Establecer el segundo temporizador, temporizador de una sola vez,
                // Cuando el primer temporizador genera copos de nieve y los muestra en la página, modifique el estilo de los copos de nieve para que se muevan;
                setTimeout(function() {
                    // Modifica el estilo por segunda vez
                    cloneFlake.style.cssText += `
                                left: ${endLeft}px;
                                top:${documentHieght}px;
                                opacity:${endOpacity};
                            `;
 
                    // 4. Configure el tercer temporizador y elimine el copo de nieve cuando caiga.
                    setTimeout(function() {
                        cloneFlake.remove();
                    }, durationTime);
                }, 0);
 
            }, millisec);
        }
        //snow();
    </script>

<div class="header">

    <!--Content before waves-->
    <div class="inner-header flex">
    
    </div>
    
    <!--Waves Container--><div class="container">
        <div class="row">
            <div class="col-md-4">
            </div>
            <div class="col-md-4">
                <br/><br/>
                <div class="card">
                    <!--div class="card-header">
                        <h6>
                            Sistema de prevenci&oacute;n de riesgos
                        <h6/>
                    </div-->
                    <div class="card-body">
                        <?php if(isset($mensaje)) {?>
                            <div class='alert alert-danger' role="alert">
                                <?php echo $mensaje; ?>
                            </div>
                        <?php }?>
                        <form method="POST">
                            <div class = "form-group">
                                <div class="text-center">
                                    <br>
                                      <img src="../img/login.jpg" width="60%" height="70%" class="responsive"/>
                                    <br>
                                </div>
                            </div>
                            <br>
                            <div class = "input-group flex-nowrap">
                                <span class="input-group-text" id="addon-wrapping">
                                    <i class="bi bi-person-fill" style="font-size: 1rem; color: #6F6D6D;"></i>
                                </span>
                                <div class="form-floating">
                                    <input type="text" class="form-control" name="txtUsuario" id="floatingInput" 
                                    placeholder="Ingrese usuario">
                                    <label for="floatingInput">Ingrese usuario</label>
                                </div>
                            </div>

                            <div class="input-group flex-nowrap">
                                <span class="input-group-text" id="addon-wrapping">
                                    <i class="bi bi-key-fill" style="font-size: 1rem; color: #6F6D6D;"></i>
                                </span>
                                <div class="form-floating">
                                    <input type="password" class="form-control" name="txtPassword" id="txtPassword" 
                                    placeholder="Ingrese contraseña">
                                    <label for="floatingInput">Ingrese contraseña</label>
                                </div>
                            </div>
                            <br/>
                            <button type="submit" class="btn btn-outline-success">Ingresar</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div>
    <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
    <defs>
    <path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
    </defs>
    <g class="parallax">
    <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
    <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
    <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
    <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
    </g>
    </svg>
    
    </div>
    
    </div>
    
    
  </body>
</html>
