<!--@Header-->
<?php
session_start();

if(isset($_SESSION['nomUsuario'])){
    $usuario = $_SESSION['nomUsuario'];
    $rol_usuario=$_SESSION['rolUsuario'];
    $id=$_SESSION['cveUsuario'];
    
    if ($rol_usuario == 'ADMINISTRADOR') {
        include("path/header.php");
    }else{
        echo "<script> 
               document.location.href='../functions/salir.php';
            </script>";
    }
}else{
  echo "<script> 
        document.location.href='/aqua-restaurant/';
    </script>";
}

?>
<div class="row">
    <div class="col-md-12 mb-lg-0">
        <div class="card mt-1 pb-0 p-2">
            <nav>
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Alta de usuarios</button>
                    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Edición de usuarios</button>
                    <button class="nav-link" id="nav-list-usuarios-tab" data-bs-toggle="tab" data-bs-target="#nav-list-usuarios" type="button" role="tab" aria-controls="nav-list-usuarios" aria-selected="false">Lista de usuarios</button>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <div class="card card-plain">
                        <div class="card-header">
                            <h5 class="font-weight-bolder">Alta de usuarios</h5>
                        </div>
                        <div class="card-body pt-3 pb-5">
                            <div class="col-md-10 mb-lg-0">
                                <form id="form_usuario">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Nombre</label>
                                                <input type="text" class="form-control" name="usu_nombre" id="usu_nombre" required>
                                            </div>
                                        </div>
                                        <div class="col-md-8">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Apellidos</label>
                                                <input type="text" class="form-control" name="usu_apellido" id="usu_apellido">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Dirección</label>
                                                <input type="text" class="form-control" name="usu_direccion" id="usu_direccion">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Ciudad</label>
                                                <input type="text" class="form-control" name="usu_ciudad" id="usu_ciudad">
                                            </div>
                                        </div>
                                        
                                        
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Estado</label>
                                                <input type="text" class="form-control" name="usu_estado" id="usu_estado">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Celular</label>
                                                <input type="text" class="form-control" name="usu_celular" id="usu_celular" maxlength="10" pattern="\d{10}" >
                                            </div>
                                        </div>
                                   
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Otro teléfono</label>
                                                <input type="text" class="form-control" name="usu_telefono" id="usu_telefono" maxlength="10" pattern="\d{10}">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">RFC</label>
                                                <input type="text" class="form-control" name="usu_rfc" id="usu_rfc">
                                            </div>
                                        </div>
                                
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Edad</label>
                                                <input type="number" class="form-control" name="usu_edad" id="usu_edad">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Fecha de ingreso</label>
                                                <input type="date" class="form-control" name="usu_fecha_ingreso" id="usu_fecha_ingreso" required>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <select class="form-control" name="usu_rol" id="usu_rol" required>
                                                    <option value="" selected> Roll </option>
                                                    <option value="MESERO">Mesero</option>
                                                    <option value="ADMINISTRADOR">Administrador</option>
                                                    <option value="GERENTE">Gerente</option>
                                                    <option value="COCINA">Cocina</option>
                                                </select>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Nick</label>
                                                <input type="text" class="form-control" name="usu_nick" id="usu_nick" required>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="input-group input-group-outline mb-3">
                                                <label class="form-label">Clave de acceso</label>
                                                <input type="text" class="form-control" maxlength="4" name="usu_clave_numerica" id="usu_clave_numerica" required>
                                            </div>
                                        </div>
                                        <div class="col-sm-5">
                                            <div class="input-group input-group-outline" id="active_weekend" >
                                                <h6 for="">¿Activo unicamente para fin de semana?</h6>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="0" checked>
                                                    <label class="form-check-label"  for="inlineRadio1">NO</label>
                                                </div>
                                                <div class="form-check form-check-inline">
                                                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="1" >
                                                    <label class="form-check-label"  for="inlineRadio1">SI</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="text-center">
                                                <button type="submit" class="btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0">Dar de alta</button>
                                            </div>
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                <div class="card card-plain">
                        <div class="card-header">
                            <h5 class="font-weight-bolder">Edición de usuarios</h5>
                        </div>
                        <div class="card-body pt-3 pb-5">
                            <div class="col-md-10 mb-lg-0">
                                <form id="form_usuario_edit">
                                    <div class="row">
                                        <div class="col-md-12 pt-3 pb-3">
                                            <div class="text-center">
                                                <i class="btn btn-warning" type="button" data-bs-target="#modalUsuario" data-bs-toggle="modal">Buscar usuario</i>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="formulario_editar_usuario">
                                        <div class='row'>
                                            <div class='col-md-4'>
                                                <label class='form-label'>Nombre </label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='hidden' class='form-control' name='id_usu' id='id_usu' value=''>
                                                    <input type='text' class='form-control' name='nombre_usu' id='nombre_usu' value='' required>
                                                </div>
                                            </div>
                                            <div class='col-md-8'>
                                                <label class='form-label'>Apellido(s)</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='apellido_usu' id='apellido_usu' value='' >
                                                </div>
                                            </div>
                                            <div class='col-md-8'>
                                                <label class='form-label'>Dirección</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='direccion_usu' id='usu_direccion_usu' value=''>
                                                </div>
                                            </div>
                                            <div class='col-md-4'>
                                                <label class='form-label'>Ciudad</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='ciudad_usu' id='ciudad_usu' value=''>
                                                </div>
                                            </div>
                                        </div>
                                        <div class='row'>
                                            <div class='col-md-4'>
                                                <label class='form-label'>Estado</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='estado_usu' id='estado_usu' value=''>
                                                </div>
                                            </div>
                                            <div class='col-md-4'>
                                                <label class='form-label'>Celular</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='celular_usu' id='celular_usu' value='' >
                                                </div>
                                            </div>
                                        
                                            <div class='col-md-4'>
                                                <label class='form-label'> Otro teléfono </label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='telefono_usu' id='telefono_usu' value='' >
                                                </div>
                                            </div>
                                            <div class='col-md-4'>
                                                <label class='form-label'> RFC </label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='rfc_usu' id='rfc_usu' value=''>
                                                </div>
                                            </div>
                                        
                                            <div class='col-md-4'>
                                                <label class='form-label'> Edad</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='number' class='form-control' name='edad_usu' id='edad_usu' value=''>
                                                </div>
                                            </div>
                                            <div class='col-md-4'>
                                                <label class='form-label'>Fecha de ingreso</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='fecha_ingreso_usu' id='fecha_ingreso_usu' value='' disabled>
                                                </div>
                                            </div>
                                        </div>
                                        <div class='row'>
                                            <div class='col-md-4'>
                                            
                                                <label class='form-label'>Rol</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <select class='form-control' name='rol_usu' id='rol_usu' required>
                                                        <option value='MESERO'>Mesero</option>
                                                        <option value='ADMINISTRADOR'>Administrador</option>
                                                        <option value='GERENTE'>Gerente</option>
                                                        <option value='COCINA'>Cocina</option>
                                                    </select>
                                                </div>
                                            </div>
                                            
                                            <div class='col-md-4'>
                                                <label class='form-label'>Nick</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='text' class='form-control' name='nick_usu' id='nick_usu' value='' required>
                                                </div>
                                            </div>
                                            <div class='col-md-4'>
                                                <label class='form-label'>Clave númerica de acceso</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <input type='password' class='form-control' maxlength='4' name='clave_numerica_usu' id='clave_numerica_usu' value='' required>
                                                </div>
                                            </div>
                                            
                                            <div class='col-md-4'>
                                                <label class='form-label'>Estatus</label>
                                                <div class='input-group input-group-outline mb-2'>
                                                    <select class='form-control' name='estatus_usu' id='estatus_usu' >
                                                        <option value='alta'>Alta</option>
                                                        <option value='baja'>Baja</option>
                                                        <option value='caducado'>Caducado</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <br>
                                            <div class='col-sm-12'>
                                                <div class='input-group input-group-outline' id='active_weekend' >
                                                    <h6 for=''>¿Activo unicamente para fin de semana?</h6>
                                                    <div class='form-check form-check-inline'>
                                                        <input class='form-check-input' type='radio' name='inlineRadioOptions1' id='inlineRadio3' value='0'>
                                                        <label class='form-check-label'  for='inlineRadio3'>NO</label>
                                                    </div>
                                                    <div class='form-check form-check-inline'>
                                                        <input class='form-check-input' type='radio' name='inlineRadioOptions1' id='inlineRadio4' value='1' >
                                                        
                                                        <label class='form-check-label'  for='inlineRadio4'>SI</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class='row'>
                                            <div class='col-md-4'>
                                                <div class='text-center'>
                                                    <button type='submit' class='btn btn-lg bg-gradient-primary btn-lg w-100 mt-4 mb-0'>Editar</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="nav-list-usuarios" role="tabpanel" aria-labelledby="nav-list-usuarios-tab">
                    <div class="card card-plain">
                        <div class="card-header">
                            <h5 class="font-weight-bolder">Lista de usuarios</h5>
                        </div>
                        <div class="card-body ">
                            <div class="col-md-12 mb-lg-0">
                                <div class="table-responsive">
                                    <table class="table compact" id= "tabla_lista_usuarios" style="width:100%">
                                        <thead style="background: #052659;">
                                            <tr>
                                                <th class="align-middle text-center text-white th_name">Nombre Completo</th>
                                                <th class="align-middle text-center text-white">Estado</th>
                                                <th class="align-middle text-center text-white" >Telefono</th>
                                                <th class="align-middle text-center text-white" >Rol Usuario</th>            
                                            </tr>
                                        </thead>
                                        <tbody class=""></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- Modal Usuarios Actualizar-->
<div class="modal fade" id="modalUsuario" tabindex="-1" aria-labelledby="modalUsuario" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalUsuario">Buscador de usuarios</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <div class="ms-md-auto pe-md-3 d-flex align-items-center">
                            <div class="input-group input-group-outline ">
                                <label class="form-label">Buscador...</label>
                                <input type="text" class="form-control" id="caja_buscador_usuarios">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-2">
                        <button type="button" class="btn btn-primary" style="padding-top: 5px; padding-bottom: 6px;"><img width="15" src="../assets/img/icons/buscar.png"></button>
                    </div>
                </div>
                <div class="table-responsive pt-2">
                    <div id="tabla_usuarios"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" id="btn_agregar_usuario">Agregar</button>
            </div>
        </div>
    </div>
</div>
<!-- Modal Guardar Usuario -->
<div class="modal fade" id="modalGuardarUsuario" tabindex="-1" aria-labelledby="modalGuardarUsuario" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalGuardarUsuario"> USUARIO GUARDADO</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <h6 class="mb-0">¡El usuario ha sido registrado exitosamente!</h6>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Editar Usuario -->
<div class="modal fade" id="modalEditarUsuario" tabindex="-1" aria-labelledby="modalEditarUsuario" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalEditarUsuario"> USUARIO GUARDADO</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <h6 class="mb-0">¡El usuario ha sido editado exitosamente!</h6>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal Editar Usuario -->
<div class="modal fade" id="modalFalloUsuario" tabindex="-1" aria-labelledby="modalFalloUsuario" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFalloUsuario"> FALLO AL CARGAR EL USUARIO</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-sm-10">
                        <h6 class="mb-0">¡El usuario no ha podido ser cargado, porfavor introducir los datos correctos!</h6>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<script src="../assets/js/jquery-3.5.1.min.js"></script>
<script src="../assets/lib/dataTable/datatables.min.js"></script>

<!--/////// BUSCAR USUARIO ///////////-->
<script type="text/javascript">
     $(document).ready(function(){
        buscar_usuario();
        
        $('#tabla_lista_usuarios').DataTable({
            ordering: false,
            dom: 'Blfrtip',
            searching: false,  
            lengthChange: false,
            buttons: [],
            pagingType: 'simple_numbers',
            language: {
                url: '../assets/lib/dataTable/spanish.json',
            },
            paging: false,
            scrollY: 'calc(95vh - 290px)',
            scrollX: true,
            fixedHeader: true,
            bFilter: false, 
            bInfo: false,
            columns: [
                {data: 'Nombre', class: 'text-center',},
                {data: 'Estado', class: 'text-center'},
                {data: 'Telefono', class: 'text-center'},
                {data: 'Rol', class: 'text-center'},
            ],
        });
        let tabla = $('#tabla_lista_usuarios').DataTable();

        
    });
    $(document).on('keyup','#caja_buscador_usuarios', function(){
        var valor = $(this).val();
        if(valor != ""){
            buscar_usuario(valor);
        }else{
            buscar_usuario();
        }
    });
    function buscar_usuario(consulta){
        $.ajax({
            data: {consulta: consulta},
            url: '../functions/usuario/buscar_usuarios.php',
            type: 'post',
            dataType:'html',
            success:  function (response) {
                $('#tabla_usuarios').html(response);
            },
            error: function (error) {
                console.log(error); 
            }
        });

    }

    
</script>
<!--/////// SELECCIONAR USUARIO ///////////-->
<script type="text/javascript">
    $(document).ready(function(){
        //seleccionar_usuario();
        var rfc_usuario="";
        $('#formulario_editar_usuario').css('display','none');
        $(document).on('click', '#tabla_usuario tbody tr', function(){

            var tr = $(this).closest('tr');
            rfc_usuario = $(tr).find('td:nth-child(3)').text();
            id_usuario =$(this).find('.usuario_id').val();
            cleanTr();
            $(this).addClass('row-selected');
        
            function cleanTr(){
                $('.row-selected').each(function(index, element){
                    $(element).removeClass('row-selected');
                })
            }
        });

        $('#btn_agregar_usuario').on('click',function(){
            
            seleccionar_usuario(id_usuario);
            $('#modalUsuario').modal('toggle'); 
        });

        function seleccionar_usuario(id_usuario){
            $('#formulario_editar_usuario').css('display','block');
            $.ajax({
                data: {id_usuario: id_usuario},
                url: '../functions/usuario/editar_usuario_formulario.php',
                type: 'post',
                dataType:'JSON',
                success:  function (response) {
                    // $('#formulario_editar_usuario').html(response);
                    $('#id_usu').val(response[0].ID);
                    $('#nombre_usu').val(response[0].USS_NOMBRE);
                    $('#apellido_usu').val(response[0].USS_APELLIDOS);
                    $('#usu_direccion_usu').val(response[0].USS_DIRECCION);
                    $('#ciudad_usun').val(response[0].CIUDAD);
                    $('#estado_usu').val(response[0].ESTADO);
                    $('#celular_usu').val(response[0].CEL);
                    $('#telefono_usu').val(response[0].TELEFONO);
                    $('#rfc_usu').val(response[0].RFC);
                    $('#edad_usu').val(response[0].EDAD);
                    $('#fecha_ingreso_usu').val(response[0].FECHA_ING);
                    $('#rol_usu').val(response[0].USS_ROL);
                    $('#nick_usu').val(response[0].USUARIO);
                    $('#clave_numerica_usu').val(response[0].PASSWORD);
                    $('#estatus_usu').val(response[0].USS_ESTATUS);
                    
                    if(response[0].ACT_FIN==0){
                        console.log(response[0].ACT_FIN)
                        $('#inlineRadio3').prop('checked', true);
                    }else{
                        $('#inlineRadio4').prop('checked', true);
                    }
                },
                error: function (error) {
                    console.log(error); 
                }
            });
        }
        

  });
</script>

<!-- ////////// ENVIAR DATOS PARA GUARDAR EL USUARIO /////////////////-->
<script>
$(document).ready(function() {
    var usu_nombre = document.getElementById('usu_nombre');
    var usu_apellido = document.getElementById('usu_apellido');
    var usu_celular = document.getElementById('usu_celular');
    var usu_fecha_ingreso = document.getElementById('usu_fecha_ingreso');
    var usu_rol = document.getElementById('usu_rol');
    var usu_nick = document.getElementById('usu_nick');
    var usu_clave_numerica = document.getElementById('usu_clave_numerica');

    usu_nombre.addEventListener('keyup', (e)=>{
        document.getElementById('usu_nombre').classList.remove('input_error');
    });
    /* usu_apellido.addEventListener('keyup', (e)=>{
        document.getElementById('usu_apellido').classList.remove('input_error');
    });
    usu_celular.addEventListener('keyup', (e)=>{
        document.getElementById('usu_celular').classList.remove('input_error');
    }); */
    usu_fecha_ingreso.addEventListener('change', (e)=>{
        document.getElementById('usu_fecha_ingreso').classList.remove('input_error');
    });
    usu_rol.addEventListener('change', (e)=>{
        document.getElementById('usu_rol').classList.remove('input_error');
    });
    usu_nick.addEventListener('keyup', (e)=>{
        document.getElementById('usu_nick').classList.remove('input_error');
    });
    usu_clave_numerica.addEventListener('keyup', (e)=>{
        document.getElementById('usu_clave_numerica').classList.remove('input_error');
    });
    
    
  $('#form_usuario').submit(function(event) {
    // Prevenir que el formulario se envíe de forma predeterminada
    event.preventDefault();
    
    // Obtener los datos del formulario
    var datos = $(this).serialize();

    var usu_nombre = document.getElementById('usu_nombre');
    var usu_apellido = document.getElementById('usu_apellido');
    var usu_celular = document.getElementById('usu_celular');
    var usu_fecha_ingreso = document.getElementById('usu_fecha_ingreso');
    var usu_rol = document.getElementById('usu_rol');
    var usu_nick = document.getElementById('usu_nick');
    var usu_clave_numerica = document.getElementById('usu_clave_numerica');
    const expresiones={
        caracteres: /^[a-zA-Z0-9]/,
        numeros: /^[0-9]/,
        decimales:/^[0-9.]/,
    }
    if(usu_nombre.value!="" && usu_fecha_ingreso.value!="" && usu_rol.value!="" && usu_nick.value!="" && usu_clave_numerica.value!=""){
        
        
        // Enviar la solicitud AJAX
        $.ajax({
        url: '../functions/usuario/crear_usuario.php',
        type: 'POST',
        data: datos,
        success: function(respuesta) {
            console.log(respuesta);
            if (respuesta == 1) {
                $('#modalGuardarUsuario').modal('toggle'); 
                setTimeout(function() {
                    location.href='/aqua-restaurant/usuario_administrador/usuarios.php';
                }, 3000);
            } else {
                $('#modalFalloGuardarMateria').modal('toggle'); 
                setTimeout(function() {
                    location.href='/aqua-restaurant/usuario_administrador/usuarios.php';
                }, 3000);
            }
        },
        error: function(xhr, status, error) {
            console.log('Error al enviar la solicitud: ' + error);
        }
        });
        
        
    }else{
        if(usu_nombre.value == ""){
            document.getElementById('usu_nombre').classList.add('input_error');
        }
        /* if(usu_apellido.value == ""){
            document.getElementById('usu_apellido').classList.add('input_error');
        }
        if(usu_celular.value == ""){
            document.getElementById('usu_celular').classList.add('input_error');
        } */
        if(usu_fecha_ingreso.value == ""){
            document.getElementById('usu_fecha_ingreso').classList.add('input_error');
        }
        if(usu_rol.value == ""){
            document.getElementById('usu_rol').classList.add('input_error');
        }
        if(usu_nick.value == ""){
            document.getElementById('usu_nick').classList.add('input_error');
        }
        if(usu_clave_numerica.value == ""){
            document.getElementById('usu_clave_numerica').classList.add('input_error');
        }
        if(!expresiones.numeros.test(document.getElementById('usu_celular').value)){
            document.getElementById('usu_celular').classList.add('input_error');
        }
       
    }
    
  });
  $('#form_usuario_edit').submit(function(event) {
    // Prevenir que el formulario se envíe de forma predeterminada
    event.preventDefault();
    
    var datos = $(this).serialize();
    $.ajax({
        url: '../functions/usuario/editar_usuario.php',
        type: 'POST',
        data: datos,
        success: function(respuesta) {
            console.log(respuesta);
            
            if (respuesta == 1) {
                $('#modalEditarUsuario').modal('toggle'); 
                
                setTimeout(function() {
                    location.href='/aqua-restaurant/usuario_administrador/usuarios.php';
                }, 3000);
            } else {
                if(!expresiones.numeros.test(document.getElementById('celular_usu').value)){
                    document.getElementById('celular_usu').classList.add('input_error');
                }
                if(!expresiones.numeros.test(document.getElementById('telefono_usu').value)){
                    document.getElementById('telefono_usu').classList.add('input_error');
                }
            }
            
        },
        error: function(xhr, status, error) {
            console.log('Error al enviar la solicitud: ' + error);
        }
    });
        
});
});
</script>

<script>
    /*
    $(document).ready(function(){
        var nombre_usu = document.getElementById('nombre_usu');
        var apellido_usu = document.getElementById('apellido_usu');
        var celular_usu = document.getElementById('celular_usu');
        var fecha_ingreso_usu = document.getElementById('fecha_ingreso_usu');
        var rol_usu = document.getElementById('rol_usu');
        var nick_usu = document.getElementById('nick_usu');
        var clave_numerica_usu = document.getElementById('clave_numerica_usu');

        nombre_usu.addEventListener('keyup', (e)=>{
            document.getElementById('nombre_usu').classList.remove('input_error');
        });
        apellido_usu.addEventListener('keyup', (e)=>{
            document.getElementById('apellido_usu').classList.remove('input_error');
        });
        celular_usu.addEventListener('keyup', (e)=>{
            document.getElementById('celular_usu').classList.remove('input_error');
        });
        fecha_ingreso_usu.addEventListener('change', (e)=>{
            document.getElementById('fecha_ingreso_usu').classList.remove('input_error');
        });
        rol_usu.addEventListener('change', (e)=>{
            document.getElementById('rol_usu').classList.remove('input_error');
        });
        nick_usu.addEventListener('keyup', (e)=>{
            document.getElementById('nick_usu').classList.remove('input_error');
        });
        clave_numerica_usu.addEventListener('keyup', (e)=>{
            document.getElementById('clave_numerica_usu').classList.remove('input_error');
        });
        
    });*/

    $("#nav-list-usuarios-tab").on('click', function(){
        getListUsers();
        
    })
    function getListUsers(){
    $.ajax({
        data: {},
        url: '../functions/usuario/lista_usuarios.php',
        type: 'post',
        dataType: 'JSON',
        success:  function (response) {
          
          putListUsers(response);
        },
        error: function (error) {
            console.log(error); 
        }
    });  
  }
  function putListUsers(dt){
    
    let tabla = $('#tabla_lista_usuarios').DataTable();
    
    tabla.rows().remove().draw();
    $.each(dt, function (v, u) {
        tabla.row
        .add({
            Nombre: u.usuario,
            Estado: u.uss_estado,
            Telefono: u.uss_tel_1,
            Rol: u.uss_roll,
        })
        .draw();
    })
    
  }
</script>
<!--@Footer-->
<?php
include("path/footer.php");
?>