@forelse ($groups as $item)
    <tr>
        <td class="has-text-centered">{{ $loop->index + 1 + $groups->perPage() * ($groups->currentPage() - 1) }}</td>
        <td>{{ $item->user[0]->name }}</td>
        <td class="has-text-centered">
            <button type="button" class="button h-button h-modal-trigger" title="Remove from group"
                onclick="removeFromGroup(`{{ route('group.delete-user-from-group', ['id' => $item->id, 'page_group' => true]) }}`)">
                <span class="icon">
                    @include('components.icons.trash')
                </span>
            </button>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="3" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

<script>
    function removeFromGroup(url) {
        $.ajax({
            url: url,
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: (res) => {
                if (res.status) {
                    showNotification('primary', 'Success', res.message)
                    getUserInGroup()
                    getUserNotInGroup()
                } else {
                    showNotification('danger', 'Failed', 'Failed delete from group')
                }
            },
            error: (err, xhr, status) => {
                showNotification('danger', 'Failed', 'Failed delete from group')
            }
        })
    }
</script>