@php
    $editingId = (int) request('edit_skill');
@endphp

@can('update', $employee)
    @if ($editingId < 1)
        <form method="POST" action="{{ route('hr.employees.skills.store', $employee) }}" class="mb-4">
            @csrf
            <h6 class="mb-3">{{ __('employees.skills.add') }}</h6>
            @include('pages.hr.employees._partials.skill-fields')
            <x-ui.buttons.primary type="submit" icon="fe fe-plus">{{ __('employees.skills.add') }}</x-ui.buttons.primary>
        </form>
    @endif
@endcan

@if ($tabData === null || $tabData->isEmpty())
    <x-ui.operational.empty-state :title="__('employees.empty_tab.skills')" />
@else
    <x-ui.table.table :columns="[
        ['label' => __('employees.skills.name')],
        ['label' => __('employees.skills.level')],
        ['label' => __('employees.skills.years_experience')],
        ['label' => __('employees.skills.is_certified')],
        ['label' => __('common.actions'), 'align' => 'end'],
    ]">
        @foreach ($tabData as $skill)
            @if ($editingId === (int) $skill->id)
                <x-ui.table.row>
                    <td colspan="5">
                        <form method="POST" action="{{ route('hr.employees.skills.update', [$employee, $skill]) }}">
                            @csrf
                            @method('PUT')
                            <h6 class="mb-3">{{ __('employees.actions.edit') }}</h6>
                            @include('pages.hr.employees._partials.skill-fields', ['skill' => $skill])
                            <div class="d-flex gap-2">
                                <x-ui.buttons.primary type="submit" icon="fe fe-save">{{ __('common.save') }}</x-ui.buttons.primary>
                                <x-ui.buttons.secondary :href="route('hr.employees.show', ['employee' => $employee, 'tab' => 'skills'])">
                                    {{ __('common.cancel') }}
                                </x-ui.buttons.secondary>
                            </div>
                        </form>
                    </td>
                </x-ui.table.row>
            @else
                <x-ui.table.row>
                    <td><strong>{{ $skill->name }}</strong></td>
                    <td>{{ __('employees.skills.levels.'.$skill->level) }}</td>
                    <td>{{ $skill->years_experience ?? '—' }}</td>
                    <td>{{ $skill->is_certified ? __('common.yes') : __('common.no') }}</td>
                    <td class="text-end">
                        @can('update', $employee)
                            <div class="d-inline-flex gap-2">
                                <x-ui.buttons.secondary size="sm" icon="fe fe-edit-2"
                                    :href="route('hr.employees.show', ['employee' => $employee, 'tab' => 'skills', 'edit_skill' => $skill->id])">
                                    {{ __('employees.actions.edit') }}
                                </x-ui.buttons.secondary>
                                <form method="POST" action="{{ route('hr.employees.skills.destroy', [$employee, $skill]) }}"
                                    onsubmit="return confirm(@json(__('employees.skills.delete_confirm')))">
                                    @csrf
                                    @method('DELETE')
                                    <x-ui.buttons.danger outline type="submit" size="sm" icon="fe fe-trash-2">
                                        {{ __('common.delete') }}
                                    </x-ui.buttons.danger>
                                </form>
                            </div>
                        @endcan
                    </td>
                </x-ui.table.row>
            @endif
        @endforeach
    </x-ui.table.table>
@endif
