@forelse ($reasons as $item)
    <tr data-id="{{ $item->id }}">
        <td class="has-text-centered">{{ $loop->index + 1 + $reasons->perPage() * ($reasons->currentPage() - 1) }}</td>
        <td>{{ $item->reason }}</td>
        @hasrole(['super_admin', 'contract_user'])
            <td class="has-text-centered">
                <button type="button" class="button h-button h-modal-trigger edit-button-reason" title="Edit"
                    data-id="{{ $item->id }}">
                    <span class="icon">
                        @include('components.icons.pencil-alt')
                    </span>
                </button>
            </td>
        @endhasrole
    </tr>

@empty
    <tr>
        <td colspan="4" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

<script>
    $(document).on('click', '.edit-button-reason', function() {
        const id = $(this).data('id');

        $.ajax({
            url: '{{ route('return-worker-reason.edit') }}',
            data: {
                id
            },
            success: (res) => {
                $('#container_modal_edit_reason').html(res)
                $('#modal_edit_reason').addClass('is-active')
            }
        })
    });
</script>