<?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;
}

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;
        }
         .dataTables_info {
            color: white; /* Cambiar el color a blanco */
        }
</style>
<!--==================================================================================================================-->
<section class="content">
  <div class="container-fluid">



    <!--==---------------------------------------------------------------------------------==-->
    <div class="card card-primary" id="card_header" style="margin-bottom: 2px;">
      <div class="card-header">
       <b>Usuarios</b>
        <button class="btn btn-success" id="btnagregar" onclick="registrar(true)" name="btnAgregar">
          Agregar Nuevo Usuario  <i class="fa fa-plus-circle"></i>  
        </button> 
       
      </div>
    </div>
  
  <!--========================================== Tabla ==========================================-->
  <div class="container-fluid" id="tabla">
    <div class="row">
      <div class="col-12">
        <div class="card" id="listadoregistros" style="background:  #243443 ;" >

          <div class="card-body" id="contenedorDatatable">
           <table id="datatable" class="table table-bordered table-dark">
            <thead>
              <tr align="center">
                <th>Usuario</th>
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Correo</th>
                <th>Telefono</th>
                <th>Tipo Usuario</th>
                <th>Estado</th>
                <th class="noExport">Opciones</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                                      
              </tr>                      
            </tbody>

            <tfoot>  
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>



<!--========================================== Contenedor Formulario ==========================================-->
<div class="card card-primary" id="formularioregistros">  

  <div class="card-header">
    <b>Formulario de Usuarios</b>
    <button class="btn btn-danger float-right" onclick="limpiarFormReg();">
    <i class="fa fa-eraser"></i>Limpiar
    </button>
  </div>

  <!--===================== Formulario De Registro y Edicion =====================-->
      <form name="formularioREG_EDIT" id="formularioREG_EDIT" method="POST">
        <div class="card-body" style="background:  #243443 ;"> 
          <div class="row">
          <!--======== Campos ocultos ========-->
          <input type="hidden" name="id_usuario" id="id_usuario" class="form-control" readonly> 
     

      
          <div class="form-group col-md-3 col-sm-6 col-xs-1" id="statusdiv">
            <label>Estado</label>
            <select name="status" id="statusR" class="form-control">
              <option value="">Seleccione el estado</option>
              <option value="1">Activo</option>
              <option value="0">Inactivo</option>
            </select>
          </div>

        
          <div class="form-group col-sm-3 col-xs-12" id="usuariodiv">
            <label>Usuario</label>
            <input type="text" name="usuario" id="usuarioR" class="form-control" placeholder="Ingresar Usuario" required>

            <span id="messageR" class="usuario-message" style="color:red;"></span>
          </div>

          <div class="form-group col-sm-3 col-xs-12">
            <label>Nombre</label>
            <input type="text" name="nombre" id="nombreR" class="form-control" placeholder="Ingresar Nombre" maxlength="100" required> 
          </div>

          <div class="form-group col-sm-3 col-xs-12">
            <label>Apellido</label>
            <input type="text" name="apellido" id="apellidoR" class="form-control" placeholder="Ingresar Apellido" maxlength="100" required> 
          </div>

          <div class="form-group col-sm-3 col-xs-12">
            <label>Correo</label>
            <input type="email" name="correo" id="correoR" class="form-control" placeholder="Ingresar Correo" maxlength="50" required> 
          </div>

            <div class="form-group col-sm-3 col-xs-12">
            <label>Telefono</label>
            <input type="text" name="telefono" id="telefonoR" class="form-control" placeholder="Ingresar Telefono" maxlength="20" required> 
          </div>
       
          <div class="form-group col-sm-3 col-xs-12" id="clavediv">
            <label id="titleLabel"></label>
                  <span class="fas fa-eye" id="eyeOn"><!--icono ojo abierto-->
                      <span class="fas fa-eye-slash" id="eyeOff"></span><!--icono ojo cerrado-->
                  </span>
            <input type="password" name="password" id="passwordR" class="form-control" placeholder="Ingresar Clave" maxlength="100" required> 
          </div>
   
   
        <!--================ Select 2 Tipo Usuario ================-->
        <div class="form-group col-md-3 col-sm-6 col-xs-1">
          <label>Tipo Usuario</label>
            <select name="tipo_usuario" id="tipo_usuarioR" class="form-control" required>
              <option value="">Seleccione el Tipo Usuario</option>
              <option value="1">Administrador</option>
              <option value="2">Jugador</option>
            </select>
        </div>

       </div>
      

  <button class="btn btn-primary" type="submit" id="btnGuardar">
    <i class="fa fa-save"></i> Guardar
  </button>

  <button class="btn btn-danger float-right" id="cancelformR" onclick="Cancelarform();" type="button">
    <i class="fa fa-arrow-circle-left"></i>Cancelar
  </button>


      </div>
    </form>
<!--========================================== FIN Formulario De Registro Y Edicion ==========================================-->
</div>



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