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

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

@if ($tabData === null || $tabData->isEmpty())
    <x-ui.operational.empty-state :title="__('employees.empty_tab.emergency_contacts')" />
@else
    <x-ui.table.table :columns="[
        ['label' => __('employees.emergency_contacts.full_name')],
        ['label' => __('employees.emergency_contacts.relationship')],
        ['label' => __('employees.emergency_contacts.phone')],
        ['label' => __('employees.emergency_contacts.is_primary')],
        ['label' => __('common.actions'), 'align' => 'end'],
    ]">
        @foreach ($tabData as $contact)
            @if ($editingId === (int) $contact->id)
                <x-ui.table.row>
                    <td colspan="5">
                        <form method="POST" action="{{ route('hr.employees.emergency-contacts.update', [$employee, $contact]) }}">
                            @csrf
                            @method('PUT')
                            <h6 class="mb-3">{{ __('employees.actions.edit') }}</h6>
                            @include('pages.hr.employees._partials.emergency-contact-fields', ['contact' => $contact])
                            <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' => 'emergency_contacts'])">
                                    {{ __('common.cancel') }}
                                </x-ui.buttons.secondary>
                            </div>
                        </form>
                    </td>
                </x-ui.table.row>
            @else
                <x-ui.table.row>
                    <td>
                        <strong>{{ $contact->full_name }}</strong>
                        @if ($contact->email)
                            <div class="small text-muted">{{ $contact->email }}</div>
                        @endif
                    </td>
                    <td>{{ $contact->relationship }}</td>
                    <td>
                        {{ $contact->phone }}
                        @if ($contact->phone_alt)
                            <div class="small text-muted">{{ $contact->phone_alt }}</div>
                        @endif
                    </td>
                    <td>{{ $contact->is_primary ? __('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' => 'emergency_contacts', 'edit_contact' => $contact->id])">
                                    {{ __('employees.actions.edit') }}
                                </x-ui.buttons.secondary>
                                <form method="POST" action="{{ route('hr.employees.emergency-contacts.destroy', [$employee, $contact]) }}"
                                    onsubmit="return confirm(@json(__('employees.emergency_contacts.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
