@extends('layouts.app', ['activePage' => 'perfiles', 'titlePage' => __('Perfiles')])

@section('content')
<div class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card">
          <div class="card-header card-header-primary">
            <h4 class="card-title ">Usuarios de Rol "{{$role->title}}</h4>
            <!--<p class="card-category"> Here is a subtitle for this table</p>-->
          </div>
                      <div class="card-body">
              <div class="row">
                <div class="col-12" align="right">
                   <button class="btn btn-primary" onclick="nuevo();">Nuevo Usuario</button>
                </div>
              </div>
              <br>
               <div class="row">
                <div class="col-12 table-responsive">
                  <table class="table table-bordered" id="gridCategos" width="100%">
                    <thead>
                      <tr>
                        <th>ID</th>
                        <th>Nombre</th>
                        <th>Acciones</th>
                      </tr>
                    </thead>
                    <tbody>
                  
                    </tbody>
                  </table>
                </div>
               </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div> 











<!--<div class="row">
  <div class="col-12">
    <nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item" aria-current="page">Configuración</li>
    <li class="breadcrumb-item active" aria-current="page"><a href="/config/profile/roles">Perfiles</a></li>
    <li class="breadcrumb-item active" aria-current="page">Usuarios de Rol "{{$role->title}}"</li>
  </ol>
</nav>
  </div>
</div>    
<div class="row">
	<div class="col-12">
		<div class="card mb-4">
            <div class="card-body">
              <div class="row">
                <div class="col-12" align="right">
                   <button class="btn btn-primary" onclick="nuevo();">Nuevo Usuario</button>
                </div>
              </div>
              <br>
               <div class="row">
               	<div class="col-12 table-responsive">
               		<table class="table table-bordered" id="gridCategos" width="100%">
               			<thead>
               				<tr>
               					<th>ID</th>
               					<th>Nombre</th>
               					<th>Acciones</th>
               				</tr>
               			</thead>
               			<tbody>
               		
               			</tbody>
               		</table>
               	</div>
               </div>
            </div>
        </div>
	</div>
</div>-->

<div class="modal fade" id="formModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-info">
        <h4 class="modal-title">Usuario</h4>
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <input type="hidden" id="idCategoHidden">
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-12">
            <label>Nombre</label>
            <select class="form-control" id="name">
              @foreach ($users as $u)
                <option value="{{$u->id}}">{{$u->name}}</option>
              @endforeach
            </select>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-primary" onclick="saveCatego();">Guardar</button>
      </div>
    </div>
  </div>
</div>
<script>
   $(document).ready(function() {
    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
}); 
      loadGrid();
   });
  function loadGrid(){
  
       //$('#').DataTable();
      $('#gridCategos').dataTable().fnDestroy();
      $('#gridCategos').DataTable( {
           processing: true,
           responsive: true,
           //serverSide: true,
           ajax: {
               url: "get_users",
               type: "POST",
           },
           columns: [
               { data: "id" },
               { data: "name" },
               { data: "acciones" },
           ],
           order: [[0,"desc"]]
       } );
      
   }
   function nuevo(){
    $('#idCategoHidden').val('')
      $('#name').val('');
    $('#formModal').modal('show')
   }
   function saveCatego(){

    var name = $('#name').val();
    var id_catego = $('#idCategoHidden').val()
    $.ajax({
      url: 'save_user',
      type: 'POST',
      dataType: 'json',
      data: {
        name: name,
        id_catego : id_catego,
      },
    })
    .done(function(resp) {
      console.log(resp);
      if(resp.id!='0'){
            $('#formModal').modal('hide')
            Swal.fire({
                title: resp.mensaje,
                type: 'success',
                timer: 2000
            })
            loadGrid();
         }
    })
    .fail(function() {
      console.log("error");
    })
    .always(function() {
      console.log("complete");
    });
    
   }

</script>
@endsection