@forelse ($personnel_competencies as $pc)
    <tr data-id="{{ $pc->id }}">
        <td class="has-text-centered">{{ $loop->index + 1 }}</td>
        <td>{{ $pc->role->name }}</td>
        <td>{{ $pc->criticalActivity->name ?? '-' }}</td>
        <td>
            <div class="verion has-text-centered light-text">
                {{ $pc->competency->name ?? '-' }}
            </div>
        </td>
        @role(['super_admin'])
            <td class="has-text-centered">
                <button type="button" class="button h-button h-modal-trigger edit-button-personnel-competency" title="Edit"
                    data-id="{{ $pc->id }}" data-role-id="{{ $pc->role_id }}"
                    data-activity-id="{{ $pc->criticalActivity->id ?? '' }}"
                    data-competency-id="{{ $pc->competency->id ?? '' }}">
                    <span class="icon">
                        @include('components.icons.pencil-alt')
                    </span>
                </button>
                <button type="button" class="button h-button h-modal-trigger delete-button-personnel-competency" title="Delete"
                    data-id="{{ $pc->id }}">
                    <span class="icon">
                        @include('components.icons.trash')
                    </span>
                </button>
            </td>
        @endrole
    </tr>

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

<script>
    $(document).on('click', '.edit-button-personnel-competency', function() {
        const id = $(this).data('id');
        const role_id = $(this).data('role-id');
        const activity_id = $(this).data('activity-id');
        const competency_id = $(this).data('competency-id');

        $('#modal_edit_personnel_competency').addClass('is-active')
        $('#role_activity_competency_id').val(id)
        $('#role_id').val(role_id)
        $('#activity_id').val(activity_id)
        $('#competency_id').val(competency_id)

    });

    $(document).on('click', '.delete-button-personnel-competency', function() {
        const id = $(this).data('id');

        $.ajax({
            url: '{{ route('personnel-competency.modal-alert-delete') }}',
            data: {
                id
            },
            success: (res) => {
                $('#container_delete_personnel_competency').html(res)
                $('#modal_delete_personnel_competency').addClass('is-active')
            }
        })
    });
</script>