<?php
//Activamos el almacenamiento en el buffer
ob_start();
session_start();

//definimos la variable $rutaBase
$rutaBase = "../";

//Verificar si el usuario ha iniciado sesion 
if (!isset($_SESSION['_AL_id'])) { 

?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Bingo Online</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../public/plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- icheck bootstrap -->
  <link rel="stylesheet" href="../public/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../public/dist/css/adminlte.min.css">
    <link rel="stylesheet" href="../public/plugins/sweetalert2/sweetalert2.min.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  <link href="../public/images/logo_bingo_bonanza.png" rel="icon">
</head>
<style type="text/css">
  .fa-eye{
    position: absolute;
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: .4s ease all;
    background: #fff;
    border: none;
    z-index: 10;
}

.fa-eye:hover{
    color: #00c853;
    border-color: #00c853;
}

.fa-eye-slash{
    position: absolute;
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: .4s ease all;
    background: #fff;
    border: none;
      z-index: 10;
}

.fa-eye-slash:hover{
    color: #c70039;
  }
 


.login-box, .register-box, .recuperar-box {
    display: flex;                      /* Activar Flexbox */
    justify-content: center;            /* Centrar horizontalmente */
    align-items: center;                /* Centrar verticalmente */
    height: 100vh; 
        width: 100%;                           /* Ocupa toda la altura de la ventana */
}

.card {
    width: 100%;                        /* Ajusta el ancho de la tarjeta */
    max-width: 400px;                  /* Ancho máximo de la tarjeta */
    margin: 40px;                      /* Agrega un margen para separación */
}

 .recuperar-clave {
            cursor: pointer;
            color: black;
            text-decoration: underline;
        }

</style>
<body class="hold-transition login-page"  style="background:  #152834;">
 <div class="mostrarlogin">

<div id="formularioinicio"> 
<div class="login-box">
  <!-- /.login-logo -->
  <div class="card card-outline card-primary">

    <div class="card-header text-center">
        <img src="../public/images/logo_bingo_bonanza.png" alt="Logo" class="img-fluid" style="max-width: 100%; height: auto;" />
    </div>
    <div class="card-body">
      <p class="login-box-msg">Entrar a la Aplicacion</p>
       <form class="form-signin" role="form" method="POST" id="sesion">
    <div class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Usuario" name="usuario" id="usuario" required/>
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-user"></span>
            </div>
        </div>
    </div>
   <div class="input-group mb-3">
       <span class="fas fa-eye" id="eyeOn0"><span class="fas fa-eye-slash d-none" id="eyeOff0"></span></span>
        <input type="password" class="form-control" placeholder="Clave" name="contra" id="contra" required/>
        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-lock"></span>
            </div>
           
        </div>
    </div>
    <div class="row">
        <div class="col-12"> <!-- Cambiado a col-12 para que ocupe el ancho completo -->
             <input type="submit" class="btn btn-success btn-block" value="Entrar" name="login" id="btnEntrar">
        </div>
    </div>
</form>
 

<br>
<button class="btn btn-primary btn-block" id="btnagregar" onclick="registrar(true)" name="btnAgregar">
           Registrarse 
        </button>
      <p align="center" class="recuperar-clave" onclick="recuperarClave(true)">¿Olvidaste tu Clave?</p>
      
<!--
<p class="mb-0">
    <a href="register.html" class="btn btn-primary btn-block text-center" role="button">Register a new membership</a> 
</p> -->
<div class="social-auth-links text-center mb-3" >

    <div class="border"></div>
   <p align="center">NUESTRAS REDES SOCIALES</p>
      <a href="https://t.me/bingobonanzaes" target="_blank" rel="noopener noreferrer">
    <img src="../public/images/telegram.png" class="img-circle" style="width: 40px; height: 40px;">
</a>
<a href="https://chat.whatsapp.com/E6QXzNyaSs8Kk0HmUbObEZ" target="_blank" rel="noopener noreferrer">
    <img src="../public/images/whatsapp1.png" class="img-circle" style="width: 40px; height: 40px;">
</a>

     <a href="https://www.facebook.com/share/FrKJQXx9qanbPwLm/" target="blank">
                          <img src="../public/images/facebook.png" class="img-circle" style="width: 40px; height: 40px;">
                        </a>
                          <a href="https://www.youtube.com/@BingoBonanza" target="blank">
                          <img src="../public/images/youtube.png" class="img-circle" style="width: 40px; height: 40px;">
                        </a>
</div>

  <!-- /.card -->
</div>
   </div>
      </div>

</div> <!-- fin div de formulario inicio -->

<div id="formularioregistro"> 

<div class="register-box">
  <div class="card card-outline card-primary">
    <div class="card-header text-center">
      <a href="#" class="h1"><b>Registro</b></a>
    </div>
    <div class="card-body">
      <p class="login-box-msg">Registarse </p>

       
<form class="form-signin" role="form" method="POST" id="register">
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Nombre"  name="nombre" id="nombre" required>
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-user"></span>
            </div>
          </div>
        </div>

         <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Apellido"  name="apellido" id="apellido" required>
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-user"></span>
            </div>
          </div>
        </div>

        <div class="input-group mb-3">
          <input type="email" class="form-control" placeholder="Email" name="correo" id="correo" required>
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-envelope"></span>
            </div>
          </div>
        </div>

         <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Telefono"  name="telefono" id="telefono" required >
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-phone "></span>
            </div>
          </div>
        </div>

         <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Usuario"  name="usuarior" id="usuarior" required>
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-user-circle "></span>
            </div>
          </div>
          <span id="messageR" class="usuario-message" style="color:red;"></span>
        </div>


        
           <div class="input-group mb-3">
           <span class="fas fa-eye" id="eyeOn1"><span class="fas fa-eye-slash d-none" id="eyeOff1"></span></span>
          <input type="password" class="form-control" placeholder="Clave"  name="clave" id="clave" required>
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
        </div>
 <div class="mb-3">
       <div class="g-recaptcha" data-sitekey="6LdYo2EqAAAAANnKFmN9gfcCmR-0RweImOv5AVgL"></div>

         </div>

         <div class="row">
        <div class="col-12"> <!-- Cambiado a col-12 para que ocupe el ancho completo -->
             <input type="submit" class="btn btn-primary btn-block" value="Registrar" name="register" id="btnRegistrar">
        </div>
    </div>
      </form>

      <br>
<button class="btn btn-success btn-block" id="btniniciar" onclick="iniciar();" name="btniniciar" type="button">
           Iniciar Sesion
        </button>

    </div>
    <!-- /.form-box -->
  </div><!-- /.card -->
</div>
<!-- /.register-box -->


</div> <!-- Fin formulario registro -->

<div id="recuperarclave"> 

<div class="recuperar-box">
  <div class="card card-outline card-primary">
     <div class="card-header text-center">
        <h1>Recuperar Clave</h1>
    </div>
    <div class="card-body">
     

       
<form class="form-signin" role="form" method="POST" id="recuperar">
 
         <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Ingrese Usuario"  name="usuarior" id="usuariorecuperar" required>
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-user-circle "></span>
            </div>
          </div>
         
        </div>

 <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Ingrese Telefono"  name="telefono" id="telefono" required >
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-phone "></span>
            </div>
          </div>
        </div>

        
           <div class="input-group mb-3">
           <span class="fas fa-eye" id="eyeOn1"><span class="fas fa-eye-slash d-none" id="eyeOff1"></span></span>
          <input type="password" class="form-control" placeholder="Ingrese Nueva Clave"  name="clave" id="clave" required>
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
        </div>


         <div class="row">
        <div class="col-12"> <!-- Cambiado a col-12 para que ocupe el ancho completo -->
             <input type="submit" class="btn btn-primary btn-block" value="Recuperar" name="recuperar" id="btnrecuperar">
        </div>
    </div>
      </form>

      <br>
<button class="btn btn-success btn-block" id="btniniciar" onclick="iniciar();" name="btniniciar" type="button">
           Iniciar Sesion
        </button>

    </div>
    <!-- /.form-box -->
  </div><!-- /.card -->
</div>
<!-- /.register-box -->


</div> <!-- Fin formulario recuperar -->
    </div>

<!-- jQuery -->
<script src="../public/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="../public/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="../public/dist/js/adminlte.min.js"></script>
<script src="../public/plugins/sweetalert2/sweetalert2.min.js"></script>
<script src="../public/js/bootbox.all.min.js"></script>
<script src="scripts/login.js<?php echo '?r='.date('Y-m-d H:i:s');?>"></script>
 <script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript">
  //validando datos del formulario 
  function validar() {
    if($("#usuario").val()=="") {
      alert("Debe Ingresar un Usuario");
      $('#usuario').focus();
      return false;
    }else if ($("#contra").val()=="") {
      alert("Debe Ingresar una Contraseña");
      $('#contra').focus();
      return false;
    }else{
      return true;
    }
}
</script>


</body>
</html>
<?php 

} 
else{
header("Location: ./concepto/concepto.php");
} 
?>