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

@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 ">Roles</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 Rol</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="modal fade" id="formModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-info">
        <h4 class="modal-title">Rol</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>
            <input type="text" class="form-control" id="name">
          </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_roles",
               type: "POST",
           },
           columns: [
               { data: "id" },
               { data: "title" },
               { 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_role',
      type: 'POST',
      dataType: 'json',
      data: {
        title: 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