<?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_bingo'])) { 
    header('Location: '.$rutaBase.'login.php?Acceso_No_Permitido');
    exit;
}
$id_usuario = $_SESSION['_AL_id_bingo'];
$login = $_SESSION['_AL_login'];
$nombre_apellido = $_SESSION['nombre'] . ' ' . $_SESSION['apellido'];

require $rutaBase.'header.php';
?>
<!--==================================================================================================================-->
<style>
  /*estilos de los iconos EYE password*/
.fa-eye{
    position: absolute;
    right: 5%;
    top: 65%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: .4s ease all;
    background: #fff;
    border: none;
}

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

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

.fa-eye-slash:hover{
    color: #c70039;
    border-color: #c70039;
}
 label {
            color: white;
        }
</style>
<section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card-primary" id="listadoregistros">
            <div class="card-header" >
              <h3 class="card-title"><b>Cambio de Clave</b>
                
              </h3>
                
            </div>

<div class="card-body" id="lista" style="background:  #243443 ;">
  <!--========================================== Formulario De Consulta ==========================================-->
  <form role="form" name="formulario_cambio_clave" id="formulario_cambio_clave" method="POST">
<div class="row justify-content-center">

  <input type="hidden" name="id_usuario" id="id_usuario" class="form-control" value="<?php echo htmlspecialchars($id_usuario); ?>"  readonly> 

    <div class="col-md-6"> <!-- Ajusta el tamaño de la columna según sea necesario -->
      <div class="col-md-12">
        <label>Nombre y Apellido</label>
        <input type="text" name="nombre_apellido" id="nombre_apellido" class="form-control" placeholder="Nombre y Apellido" maxlength="100" value="<?php echo htmlspecialchars($nombre_apellido); ?>" readonly>
        </div>
<div class="col-md-12">
        <label>Usuario</label>
        <input type="text" name="login" id="login" class="form-control" placeholder="Login" maxlength="100" value="<?php echo htmlspecialchars($login); ?>" readonly> 
        </div>
<div class="col-md-12">
        <label>Contraseña Actual</label>
        <span class="fas fa-eye" id="eyeOn0"><span class="fas fa-eye-slash" id="eyeOff0"></span></span>
        <input type="password" name="clave_actual" id="clave_actual" class="form-control" placeholder="Contraseña Actual" maxlength="100">
        </div>

<div class="col-md-12">
    <label>Contraseña Nueva</label>
    <span class="fas fa-eye" id="eyeOn1"><span class="fas fa-eye-slash" id="eyeOff1"></span></span>
    <input type="password" name="clave_nueva" id="clave_nueva" class="form-control" placeholder="Contraseña Nueva" maxlength="100"> 
</div>

<div class="col-md-12">
    <label>Repita Contraseña Nueva</label>
    <span class="fas fa-eye" id="eyeOn2"><span class="fas fa-eye-slash" id="eyeOff2"></span></span>
    <input type="password" name="password" id="password" class="form-control" placeholder="Repita Contraseña Nueva" maxlength="100">
</div>

    </div>
</div>

<button type="submit" name="btnCambio_clave" id="btnCambio_clave" class="btn btn-primary float-right">
            Actualizar
          </button>
</form>
        <div class="form-group">
          
        </div>
  <!--========================================== FIN Formulario De Consulta ==========================================-->
</div>
        </div>
      </div>
    </div>
</div>

   
</section>
<script type="text/javascript">

</script>
<!-- Fin Contenido PHP-->
<?php
require $rutaBase.'footer.php';
?>
<script type="text/javascript" src="scripts/cambio_clave.js<?php echo '?r='.date('Y-m-d H:i:s');?>"></script>
<?php 
ob_end_flush();
?>