<!DOCTYPE html>
<html>
<head>



<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

<link href="https://cdn.datatables.net/2.3.8/css/dataTables.dataTables.css" rel="stylesheet" >



<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

<script src="https://cdn.datatables.net/2.3.8/js/dataTables.js"></script>


</head>

<body class="p-4">

<h3>Usuarios</h3>

<button class="btn btn-primary mb-2" onclick="nuevo()">Nuevo Usuario</button>

<table id="tabla" class="table table-striped"></table>

<!-- MODAL -->
<div class="modal fade" id="modal">
<div class="modal-dialog">
<div class="modal-content p-3">

<input type="hidden" id="id">

<input id="nombre" class="form-control mb-2" placeholder="Nombre">
<input id="usuario" class="form-control mb-2" placeholder="Usuario">
<input id="password" class="form-control mb-2" placeholder="Password">

<select id="rol_id" class="form-control mb-2"></select>

<button onclick="guardar()" class="btn btn-success">Guardar</button>

</div>
</div>
</div>

<script>
let tabla;

$(function(){

tabla = $('#tabla').DataTable({
    ajax:'usuarios/data',
    columns:[
        {data:'id'},
        {data:'nombre'},
        {data:'usuario'},
        {data:'rol'},
        {
            data:null,
            render:r=>`
            <button onclick="edit(${r.id},\`${r.nombre}\`,\`${r.usuario}\`,${r.rol_id})">✏️</button>
            <button onclick="del(${r.id})">X</button>
            `
        }
    ]
});

cargarRoles();

});

function cargarRoles(){
    $.get('roles/data', function(data){
        let html='';
        data.forEach(r=>{
            html+=`<option value="${r.id}">${r.nombre}</option>`;
        });
        $('#rol_id').html(html);
    });
}

function nuevo(){
    $('#id').val('');
    $('#nombre,#usuario,#password').val('');
    new bootstrap.Modal('#modal').show();
}

function guardar(){

    let id = $('#id').val();

    $.ajax({
        url:'usuarios',
        type: id ? 'PUT':'POST',
        data:{
            id:id,
            nombre:$('#nombre').val(),
            usuario:$('#usuario').val(),
            password:$('#password').val(),
            rol_id:$('#rol_id').val(),
            _token:'<?php echo e(csrf_token()); ?>'
        },
        success:()=>{
            tabla.ajax.reload();
            bootstrap.Modal.getInstance(document.getElementById('modal')).hide();
        }
    });

}

function edit(id,n,u,rol){
    $('#id').val(id);
    $('#nombre').val(n);
    $('#usuario').val(u);
    $('#rol_id').val(rol);
    new bootstrap.Modal('#modal').show();
}

function del(id){
    if(confirm('Eliminar')){
        $.ajax({
            url:'usuarios',
            type:'DELETE',
            data:{id:id,_token:'<?php echo e(csrf_token()); ?>'},
            success:()=>tabla.ajax.reload()
        });
    }
}
</script>

</body>
</html><?php /**PATH C:\xampp\htdocs\example-app - copia\resources\views/usuarios.blade.php ENDPATH**/ ?>