@if($tabs=="staff_permissions")
        <div class="table-responsive">
            <table class="table m-0">
                <thead>
                    <tr>
                        <th width="4%" class="text-center tbl-shadow">
                            <div class="custom-checkbox m-auto">
                                <input class="custom-control-input" type="checkbox" data-tab="role" id="checkAll">
                                <label class="custom-control-label" for="checkAll"></label>
                            </div>
                        </th>
                        <th width="5" class="text-center tbl-shadow">S.No.</th>
                        <th>{{translate('Name')}}</th>
                        <th width="8%" class="text-center">{{translate('Options')}}</th>
                    </tr>
                </thead>
                <tbody class="staff_list_table">
                    @forelse($staffs_roles as $key => $role)
                        <tr id="{{ $role->id }}">
                            <td class="text-center tbl-shadow">
                                <div class="custom-checkbox m-auto">
                                    <input type="checkbox" name="ids[]" class="custom-control-input product_checkbox" data-data_tab="role" value="{{ $role->id }}" id="checkAll_{{ $role->id }}">
                                    <label class="custom-control-label" for="checkAll_{{ $role->id }}"></label>
                                </div>
                            </td>
                            <td class="text-center tbl-shadow">{{ ($key+1) + ($staffs_roles->currentPage() - 1)*$staffs_roles->perPage() }}</td>
                            <td>{{ $role->name}}</td>
                            <td class="text-center">
                                <a style="margin: 0 0 7px 0" class=" open_role_edit_model" href="javascript:void(0);" data-role_id="{{ $role->id ?? '' }}" data-default_lang="{{ env('DEFAULT_LANGUAGE') }}" title="{{ translate('Edit') }}">
                                    <i class="icons icon-edit" style="font-size: 16px"   data-toggle="tooltip" data-placement="top" title="Edit"
                                    data-original-title="Edit"></i>
                                </a>
                                <a style="margin: 0 0 7px 0" href="javascript:void(0);" id="deletebtn1" class="confirm-delete" data-href="{{route('roles.destroy', $role->id)}}" title="{{ translate('Delete') }}">
                                    <i class="icons icon-delete"   data-toggle="tooltip" data-placement="top" title="Delete"
                                    data-original-title="Edit"></i>
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr class="no-data">
                            <td colspan="50">
                                <div class="nodata-col">
                                    <i class="icons @if(!empty(request()->search)) icon-no-data @else icon-no-items @endif"></i>
                                    <h1>No data found</h1>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    @else
        <div class="table-responsive">
            <table class="table m-0">
                <thead>
                    <tr>
                        <th width="4%" class="text-center tbl-shadow">
                            <div class="custom-checkbox m-auto">
                                <input class="custom-control-input" type="checkbox" data-tab="staff" id="checkAll">
                                <label class="custom-control-label" for="checkAll"></label>
                            </div>
                        </th>
                        <th width="5" class="text-center tbl-shadow">S.No.</th>
                        <th>{{translate('Name')}}</th>
                        <th>{{translate('Email')}}</th>
                        <th>{{translate('Phone')}}</th>
                        <th>{{translate('Role')}}</th>
                        <th width="8%" class="text-center">{{translate('Actions')}}</th>
                    </tr>
                </thead>
                <tbody class="staff_list_table">
                    @forelse($staffs_roles as $key => $staff)
                        @if($staff->user != null)
                            <tr id="{{ $staff->id }}">
                                <td class="text-center tbl-shadow">
                                    <div class="custom-checkbox m-auto">
                                        <input type="checkbox" name="ids[]" class="custom-control-input product_checkbox" data-data_tab="staff" value="{{ $staff->id }}" id="checkAll_{{ $staff->id }}">
                                        <label class="custom-control-label" for="checkAll_{{ $staff->id }}"></label>
                                    </div>
                                </td>
                                <td class="text-center tbl-shadow">{{ $key + 1 + ($staffs_roles->currentPage() - 1) * $staffs_roles->perPage() }}</td>
                                <td>{{$staff->user->name}}</td>
                                <td>{{$staff->user->email}}</td>
                                <td>{{$staff->user->phone}}</td>
                                <td>{{ isset($staff->role) ? $staff->role->name : ''}}</td>
                                <td >
                                    <div class="tbl-action-link">
                                        <a href="javascript:void(0);" data-staff_id="{{ $staff->id ?? '' }}" class="open_staff_edit_model"><i class="icons icon-edit" data-toggle="tooltip" data-placement="top" title="Edit" data-original-title="Edit"></i></a>
                                        <a href="javascript:void(0);" id="deletebtn" data-href="{{route('staffs.destroy', $staff->id)}}"  data-toggle="tooltip" data-placement="top" title="{{ translate('Delete') }}">
                                            <i class="icons icon-delete"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        @endif
                    @empty
                        <tr class="no-data">
                            <td colspan="50">
                            <div class="nodata-col">
    <i class="icons @if(!empty(request()->search)) icon-no-data @else icon-no-items @endif"></i>
    <h1>
        @if(!empty(request()->search)) 
            No result found 
        @else 
            No data found 
        @endif
    </h1>
</div>

                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    @endif
        <div class="aiz-pagination">
            <div class="perPage">
            @if($tabs=="staff_permissions") Roles @else Staffs @endif Show per page: <strong>{{ $staffs_roles->total() }}</strong>
            </div>
            {{ $staffs_roles->appends(request()->input())->links() }}
        </div>