
<?php include "views/templates/header.php";?> 
<style>
    #tblusuarios {
        max-height: 400px; /* Ajusta esta altura según sea necesario */
        overflow-y: auto;
    }
</style>

<div class="container-fluid">
    <ol class="breadcrumb mb-4">
        <li class="breadcrumb-item active">usuarios</li>
    </ol>
    <button class="btn btn-dark mb-2" type="button" onclick="frmUsuario();">Nuevo usuario <i class="fas fa-plus"></i></button>

    <div class="table-responsive">
        <table class="table table-light" id="tblusuarios">
            <thead class="thead-dark">
                <tr>
                    <th>Usuario</th>
                    <th>Nombre</th>
                    <th>Caja</th>
                    <th>Estado</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <!-- Contenido de la tabla -->
            </tbody>
        </table>
    </div>
</div>


<div id="nuevo_usuario" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="my-modal-title" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary" >
                <h5 class="modal-title text-white" id="title">REGISTRAR UN USUARIO</h5>

                <button class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="post" id="frmUsuario">
                    <div class="form-group">
                        <input type="heidden" id="id" name="id" style="display: none;">
                        <label for="usuario">usuario</label>
                        <input id="usuario" class="form-control" type="text" name="usuario" placeholder="nuevo usuario">
                    </div>
                    <div class="form-group">
                        <label for="nombre">Nombre</label>
                        <input id="nombre" class="form-control" type="text" name="nombre" placeholder="ingrese el nombre">
                    </div>
                        <div class="row" id="claves">
                        <div class="col-md-6">


                            <div class="form-group">
                                <label for="clave">Ingrese una contraseña</label>
                                <input id="clave" class="form-control" type="password" name="clave" placeholder="ingrese una contraseña">
                            </div>
                           

                            


                            </div>
                            <div class="col-md-6">

                            <div class="form-group">
                                <label for="confirmar">Confirme la contraseña</label>
                                <input id="confirmar" class="form-control" type="password" name="confirmar" placeholder="confirme su contraseña">
                            </div>


                        </div>
                    </div>
             
                    <button class="btn btn-primary" type="button" onclick="registrarUser(event);" id="btnaccion">CONFIRMAR</button>
                    <button class="btn btn-danger" type="button" data-dismiss="modal">CANCELAR</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('rol').addEventListener('change', function () {
        var selectedRol = this.value;
        var cajaFormGroup = document.getElementById('cajaFormGroup');

        if (selectedRol === '3') { // '3' es el valor de la opción "Caja"
            cajaFormGroup.style.display = 'block';
        } else {
            cajaFormGroup.style.display = 'none';
        }
    });
</script>
<?php include "views/templates/footer.php"; ?>



