@extends('layout.padrao')
@section('title', 'Employee Groups')

@section('content')

@include('include.filtro_result')
   
<div class="wrapper">
  <div class="table-responsive" style="overflow:clip; height:950px">
      <table class="table-striped text-center" id="table"
            data-toggle="table"
            data-search="true"
            data-detail-formatter="false"
            data-show-footer="true"
            data-show-refresh="false"
            data-click-to-select="false"
            data-show-fullscreen="false"
            data-toolbar="false"
            data-show-toggle="false"
            data-show-export="false"
            data-export-data-type="all"
            data-query-params="queryParams"
            data-url="/usuarios/json?type=employeeGroup"
            data-show-columns="false" >
        <thead>
          <tr class="trSuperBlue">
            <th data-field="id"  data-formatter="operateFormatter" ></th>
            <th data-field="nome" data-sortable="true">User Name</th>
            <th data-field="email" data-sortable="true">Email</th>
            <th data-field="user_occupations.description" data-sortable="true">Occupation</th>
            <th data-field="phone_number" data-sortable="phone_number">Phone</th>
            <th data-field="employee_groups.description" data-sortable="true">Employee Group</th>
            <th data-field="employee_group_order" data-sortable="true">Employee Group Order</th>
          </tr>
        </thead>
    </table>
  </div>
</div>

<script>
    var $table = $('#table')
    var $button = $('#button')
  
    $(function() {
      $table.bootstrapTable({
        cache: false,
        height: 1000,
        striped: true,
        pagination: false,                 
      });
    });

    function operateFormatter(value, row, index) {
      var sButtons = '<a class="icone-padding" data-catid="'+value+'" data-employee_group="'+row.employee_group+'" data-employee_group_order="'+row.employee_group_order+'" data-toggle="modal" data-target="#edit" data-toggle="tooltip" data-placement="top" title="Edit"><i class="fas fa-pencil-alt"></i></a>';
      return sButtons;
    }
    
</script>
@include('include.modal_editar_employee_group')
@include('bibliotecas.bootstrapExport')
@endSection