@forelse ($users as $item)
    <tr>
        <td class="has-text-centered">{{ $loop->index + 1 + $users->perPage() * ($users->currentPage() - 1) }}</td>
        <td>{{ $item->name }}</td>
        <td class="has-text-centered">
            <button type="button" class="button h-button h-modal-trigger" title="Add to group"
                onclick="addToGroup(`{{ $item->id }}`)">
                <span class="icon">
                    <i class="fa-solid fa-plus"></i>
                </span>
            </button>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="3" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

<script>
    function addToGroup(userID) {
        $.ajax({
            url: '{{ route('group.add-to-group') }}',
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: {
                user_id: userID,
                group_id: groupID
            },
            success: (res) => {
                if (res.status) {
                    showNotification('primary', 'Success', res.message)
                    getUserInGroup()
                    getUserNotInGroup()
                } else {
                    showNotification('danger', 'Failed', 'Failed added to group')
                }
            },
            error: (err, xhr, status) => {
                showNotification('danger', 'Failed', 'Failed added to group')
            }
        })
    }
</script>