@php
    $tabMeta = array_filter([
        'overview'   => ['label' => __('Overview'),   'icon' => 'squares-2x2'],
        'employment' => ['label' => __('Employment'), 'icon' => 'identification'],
        'attendance' => ['label' => __('Attendance'), 'icon' => 'clock'],
        'leave'      => ['label' => __('Leave'),      'icon' => 'calendar-days'],
        'pay'        => $canSeePay ? ['label' => $employee->is_consultant ? __('Fees & advices') : __('Pay & payslips'), 'icon' => 'banknotes'] : null,
        'documents'  => $canSeeFile ? ['label' => __('Documents'), 'icon' => 'folder'] : null,
        'conduct'    => $canSeeFile ? ['label' => __('Conduct'), 'icon' => 'flag'] : null,
    ]);

    $badgeMeta = [
        'active'           => ['color' => 'emerald', 'label' => __('Active')],
        'probation'        => ['color' => 'amber',   'label' => __('On probation')],
        'contract_ending'  => ['color' => 'amber',   'label' => __('Contract ending')],
        'contract_expired' => ['color' => 'rose',    'label' => __('Contract lapsed')],
        'inactive'         => ['color' => 'slate',   'label' => __('Suspended')],
        'exited'           => ['color' => 'slate',   'label' => __('Left the company')],
    ];
    $badge = $badgeMeta[$status] ?? $badgeMeta['active'];

    $initials = \Illuminate\Support\Str::of($employee->user?->name ?? '?')
        ->explode(' ')->take(2)->map(fn ($w) => mb_substr($w, 0, 1))->implode('');

    $kindColors = [
        'allowance'     => 'emerald',
        'benefit'       => 'sky',
        'deduction'     => 'rose',
        'employer_cost' => 'violet',
    ];

    $leaveStatusColors = [
        'pending' => 'amber', 'approved' => 'emerald', 'rejected' => 'rose', 'cancelled' => 'slate',
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        @if ($canViewDirectory)
            <a href="{{ route('employees.index') }}" wire:navigate
               class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 transition hover:text-slate-800">
                <x-icon name="chevron-left" class="h-3.5 w-3.5" />
                {{ __('All employees') }}
            </a>
        @elseif ($isSelf)
            <a href="{{ route('my-details') }}" wire:navigate
               class="inline-flex items-center gap-1 text-xs font-medium text-slate-500 transition hover:text-slate-800">
                <x-icon name="chevron-left" class="h-3.5 w-3.5" />
                {{ __('My details') }}
            </a>
        @endif

        {{-- ------------------------------------------------------- Identity --}}
        <x-card class="overflow-hidden">
            <div class="flex flex-col gap-5 p-5 sm:flex-row sm:items-start sm:justify-between sm:p-6">
                <div class="flex items-start gap-4">
                    {{-- Their photo where there is one, initials where there is
                         not. Looking at your own record with no photo, the
                         placeholder is the prompt to go and add one. --}}
                    @if ($employee->user?->hasProfilePhoto())
                        <img src="{{ $employee->user->profile_photo_url }}" alt="{{ $employee->user->name }}"
                             class="h-14 w-14 shrink-0 rounded-2xl object-cover shadow-sm ring-1 ring-slate-200">
                    @elseif ($isSelf)
                        <a href="{{ route('my-details') }}" wire:navigate
                           title="{{ __('Add a profile photo') }}"
                           class="group relative flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-slate-700 to-slate-900 text-lg font-bold uppercase text-white shadow-sm">
                            {{ $initials }}
                            <span class="absolute inset-0 flex items-center justify-center rounded-2xl bg-slate-900/70 opacity-0 transition group-hover:opacity-100">
                                <x-icon name="photo" class="h-5 w-5" />
                            </span>
                        </a>
                    @else
                        <span class="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-slate-700 to-slate-900 text-lg font-bold uppercase text-white shadow-sm">
                            {{ $initials }}
                        </span>
                    @endif
                    <div class="min-w-0">
                        <div class="flex flex-wrap items-center gap-2">
                            <h1 class="text-xl font-bold tracking-tight text-slate-900">{{ $employee->user?->name ?? __('Unknown') }}</h1>
                            <x-badge :color="$badge['color']">{{ $badge['label'] }}</x-badge>
                            @if ($isSelf)
                                <x-badge color="indigo">{{ __('You') }}</x-badge>
                            @endif
                        </div>
                        <p class="mt-1 text-sm text-slate-500">
                            {{ $employee->job_title ?: __('No job title set') }}
                            @if ($employee->department) · {{ $employee->department }} @endif
                        </p>
                        <div class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-slate-400">
                            @if ($employee->employee_number)
                                <span class="font-mono">{{ $employee->employee_number }}</span>
                            @endif
                            @if ($employee->user?->email)
                                <span class="inline-flex items-center gap-1"><x-icon name="envelope" class="h-3.5 w-3.5" /> {{ $employee->user->email }}</span>
                            @endif
                            {{-- Only worth showing when it differs from the login: this is
                                 the address their payslip actually goes to. --}}
                            @if ($employee->usesPersonalEmail())
                                <span class="inline-flex items-center gap-1" title="{{ __('Payslips are emailed here') }}">
                                    <x-icon name="envelope" class="h-3.5 w-3.5" /> {{ $employee->personal_email }} <span class="text-slate-300">({{ __('personal') }})</span>
                                </span>
                            @endif
                            @if ($employee->phone)
                                <span class="inline-flex items-center gap-1"><x-icon name="phone" class="h-3.5 w-3.5" /> {{ $employee->phone }}</span>
                            @endif
                            @if ($tenure !== null)
                                <span class="inline-flex items-center gap-1"><x-icon name="sparkles" class="h-3.5 w-3.5" />
                                    {{ __(':n yrs service', ['n' => rtrim(rtrim(number_format($tenure, 1), '0'), '.')]) }}
                                </span>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="flex flex-wrap items-center gap-2">
                    {{-- Your own record is read-only here by design: the personal
                         half of it belongs to you, and lives on My Details. --}}
                    @if ($isSelf)
                        <x-secondary-button :href="route('my-details')" wire:navigate>
                            <x-icon name="user-circle" class="mr-1.5 h-4 w-4" />
                            {{ __('My details & photo') }}
                        </x-secondary-button>
                    @endif
                    @if ($canManageRecords)
                        <x-secondary-button wire:click="openEmployment">
                            <x-icon name="pencil-square" class="mr-1.5 h-4 w-4" />
                            {{ __('Edit record') }}
                        </x-secondary-button>
                    @endif
                    @if ($canManagePay)
                        <x-button wire:click="openPay">
                            <x-icon name="banknotes" class="mr-1.5 h-4 w-4" />
                            {{ __('Pay details') }}
                        </x-button>
                    @endif
                    @if ($canManageRecords)
                        @if ($employee->exited_on)
                            <x-secondary-button wire:click="reinstate"
                                wire:confirm="{{ __('Reinstate this employee and put them back on payroll?') }}">
                                <x-icon name="arrow-uturn-left" class="mr-1.5 h-4 w-4" />
                                {{ __('Reinstate') }}
                            </x-secondary-button>
                        @else
                            <x-secondary-button wire:click="openExit">
                                <x-icon name="arrow-right-start-on-rectangle" class="mr-1.5 h-4 w-4" />
                                {{ __('Record exit') }}
                            </x-secondary-button>
                        @endif
                    @endif
                </div>
            </div>

            @if ($employee->exited_on)
                <div class="border-t border-slate-100 bg-slate-50 px-5 py-3 text-sm text-slate-600 sm:px-6">
                    <span class="font-semibold">{{ __('Left on :date', ['date' => $employee->exited_on->format('j M Y')]) }}</span>
                    @if ($employee->exit_reason), {{ $employee->exit_reason }} @endif
                </div>
            @elseif ($todayRow)
                <div class="border-t border-slate-100 bg-slate-50/70 px-5 py-3 text-sm sm:px-6">
                    @php
                        $todayLabels = [
                            'in' => __('On the clock now'), 'out' => __('Clocked out for the day'),
                            'leave' => __('On approved leave'), 'absent' => __('Not clocked in today'),
                            'off' => __('Non-working day'),
                        ];
                    @endphp
                    <span class="font-medium text-slate-700">{{ $todayLabels[$todayRow['status']] ?? '' }}</span>
                    @if ($todayRow['clock_in'])
                        <span class="text-slate-500">
                            · {{ $todayRow['clock_in'] }}@if ($todayRow['clock_out']) – {{ $todayRow['clock_out'] }}@endif
                            · {{ __(':h worked', ['h' => round($todayRow['worked_minutes'] / 60, 1).'h']) }}
                        </span>
                    @endif
                </div>
            @endif
        </x-card>

        {{-- ----------------------------------------------------------- Tabs --}}
        <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            @foreach ($tabMeta as $key => $meta)
                <button type="button" wire:click="setTab('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                    <x-icon :name="$meta['icon']" class="h-4 w-4" />
                    {{ $meta['label'] }}
                </button>
            @endforeach
        </div>

        {{-- ======================================================= OVERVIEW --}}
        @if ($tab === 'overview')
            <section class="grid grid-cols-2 gap-4 sm:grid-cols-4">
                @php
                    $overviewCards = [
                        ['label' => __('Attendance'), 'value' => $monthStats['attendancePct'].'%', 'icon' => 'check-circle', 'accent' => '#10b981', 'sub' => $monthStats['label']],
                        ['label' => __('Hours worked'), 'value' => $monthStats['workedHours'].'h', 'icon' => 'clock', 'accent' => '#124a61', 'sub' => trans_choice('{1}:count day present|[2,*]:count days present', $monthStats['daysPresent'], ['count' => $monthStats['daysPresent']])],
                        ['label' => __('Overtime'), 'value' => $monthStats['overtimeHours'].'h', 'icon' => 'play', 'accent' => '#f59e0b', 'sub' => __('This month')],
                        ['label' => __('Leave left'), 'value' => rtrim(rtrim(number_format($leave['remaining'], 1), '0'), '.'), 'icon' => 'calendar-days', 'accent' => '#6366f1', 'sub' => __(':taken of :ent days taken', ['taken' => rtrim(rtrim(number_format($leave['taken'], 1), '0'), '.'), 'ent' => rtrim(rtrim(number_format($leave['entitlement'], 1), '0'), '.')])],
                    ];
                @endphp
                @foreach ($overviewCards as $m)
                    <x-card class="flex flex-col p-5 ring-slate-200/70">
                        <div class="flex items-start justify-between gap-2">
                            <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $m['label'] }}</p>
                            <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40"
                                  style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                                <x-icon :name="$m['icon']" class="h-4 w-4" />
                            </span>
                        </div>
                        <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $m['value'] }}</p>
                        <span class="mt-2.5 inline-flex w-fit items-center rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">{{ $m['sub'] }}</span>
                    </x-card>
                @endforeach
            </section>

            <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
                <x-card class="p-5 lg:col-span-2">
                    <h2 class="text-sm font-bold text-slate-900">{{ __('Personal & emergency details') }}</h2>
                    <dl class="mt-4 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-3">
                        @php
                            $details = [
                                __('Engagement') => $employee->employmentTypeLabel(),
                                __('Reports to') => $employee->manager?->name,
                                __('Date joined') => $employee->hired_on?->format('j M Y'),
                                __('Probation ends') => $employee->probation_ends_on?->format('j M Y'),
                                __('Contract ends') => $employee->contract_ends_on?->format('j M Y'),
                                __('Full name') => $employee->full_name,
                                __('Date of birth') => $employee->date_of_birth?->format('j M Y'),
                                __('National ID') => $employee->national_id,
                                __('Gender') => $employee->gender,
                                __('Phone') => $employee->phone,
                            ];
                        @endphp
                        @foreach ($details as $label => $value)
                            <div>
                                <dt class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $label }}</dt>
                                <dd class="mt-0.5 text-sm {{ $value ? 'font-medium text-slate-800' : 'text-slate-300' }}">{{ $value ?: '—' }}</dd>
                            </div>
                        @endforeach
                    </dl>

                    @if ($employee->address)
                        <div class="mt-4 border-t border-slate-100 pt-4">
                            <dt class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Address') }}</dt>
                            <dd class="mt-0.5 whitespace-pre-line text-sm text-slate-700">{{ $employee->address }}</dd>
                        </div>
                    @endif

                    <div class="mt-4 rounded-xl border border-slate-100 bg-slate-50/70 p-4">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Emergency contact') }}</p>
                        @if ($employee->emergency_contact_name)
                            <p class="mt-1 text-sm font-medium text-slate-800">
                                {{ $employee->emergency_contact_name }}
                                @if ($employee->emergency_contact_relation)
                                    <span class="font-normal text-slate-400">({{ $employee->emergency_contact_relation }})</span>
                                @endif
                            </p>
                            <p class="text-sm text-slate-600">{{ $employee->emergency_contact_phone ?: '—' }}</p>
                        @else
                            <p class="mt-1 text-sm text-rose-500">{{ __('No emergency contact on file, worth chasing.') }}</p>
                        @endif
                    </div>

                    {{-- HR notes are written ABOUT this person, by HR. The
                         subject of a note is the last person who should read it
                         off their own profile page. --}}
                    @if ($employee->notes && $canManageRecords)
                        <div class="mt-4 border-t border-slate-100 pt-4">
                            <dt class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('HR notes') }}</dt>
                            <dd class="mt-0.5 whitespace-pre-line text-sm text-slate-700">{{ $employee->notes }}</dd>
                        </div>
                    @endif
                </x-card>

                <div class="space-y-4">
                    @if ($documentAlerts->isNotEmpty())
                        <x-card class="p-5">
                            <h2 class="text-sm font-bold text-slate-900">{{ __('Paperwork expiring') }}</h2>
                            <ul class="mt-3 space-y-2">
                                @foreach ($documentAlerts as $doc)
                                    <li class="flex items-center justify-between gap-2 rounded-lg bg-{{ $doc->isExpired() ? 'rose' : 'amber' }}-50 px-3 py-2">
                                        <span class="text-sm font-medium text-slate-700">{{ $doc->title }}</span>
                                        <span class="whitespace-nowrap text-xs font-semibold text-{{ $doc->isExpired() ? 'rose' : 'amber' }}-700">
                                            {{ $doc->expires_on->format('j M Y') }}
                                        </span>
                                    </li>
                                @endforeach
                            </ul>
                        </x-card>
                    @endif

                    @if ($openLoans->isNotEmpty())
                        <x-card class="p-5">
                            <h2 class="text-sm font-bold text-slate-900">{{ __('Active staff loans') }}</h2>
                            <ul class="mt-3 space-y-2">
                                @foreach ($openLoans as $loan)
                                    <li class="flex items-center justify-between gap-2 text-sm">
                                        <span class="text-slate-600">{{ $loan->reference ?? __('Loan') }}</span>
                                        <span class="font-semibold tabular-nums text-slate-900">{{ $baseCode }} {{ number_format((float) $loan->outstanding(), 2) }}</span>
                                    </li>
                                @endforeach
                            </ul>
                            <p class="mt-2 text-[11px] text-slate-400">{{ __('Recovered automatically from payroll.') }}</p>
                        </x-card>
                    @endif

                    @if ($canSeePay && $openLiabilities->isNotEmpty())
                        <x-card class="p-5">
                            <h2 class="text-sm font-bold text-slate-900">{{ __('Loss recovery') }}</h2>
                            <ul class="mt-3 space-y-2">
                                @foreach ($openLiabilities as $liability)
                                    <li class="flex items-center justify-between gap-2 text-sm">
                                        <span class="truncate text-slate-600">{{ $liability->reason }}</span>
                                        <span class="whitespace-nowrap font-semibold tabular-nums text-rose-600">{{ $baseCode }} {{ number_format((float) $liability->outstanding, 2) }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </x-card>
                    @endif
                </div>
            </div>
        @endif

        {{-- ===================================================== EMPLOYMENT --}}
        @if ($tab === 'employment')
            <x-card class="p-5 sm:p-6">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Employment record') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('The contractual facts of this engagement.') }}</p>
                    </div>
                    @if ($canManageRecords)
                        <x-secondary-button wire:click="openEmployment">
                            <x-icon name="pencil-square" class="mr-1.5 h-4 w-4" />{{ __('Edit') }}
                        </x-secondary-button>
                    @endif
                </div>

                <dl class="mt-5 grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-3">
                    @php
                        $employmentRows = [
                            __('Employee number') => $employee->employee_number,
                            __('Job title') => $employee->job_title,
                            __('Department') => $employee->department,
                            __('Engagement') => $employee->employmentTypeLabel(),
                            __('Works') => $employee->workModeLabel().($employee->work_mode === 'hybrid' && $employee->remote_days ? ' ('.collect($employee->remote_days)->map(fn ($d) => ucfirst($d))->implode(', ').' '.__('remote').')' : ''),
                            __('Reports to') => $employee->manager?->name,
                            __('Date joined') => $employee->hired_on?->format('j M Y'),
                            __('Probation ends') => $employee->probation_ends_on?->format('j M Y'),
                            __('Contract ends') => $employee->contract_ends_on?->format('j M Y'),
                            __('Years of service') => $tenure !== null ? rtrim(rtrim(number_format($tenure, 1), '0'), '.') : null,
                        ];
                    @endphp
                    @foreach ($employmentRows as $label => $value)
                        <div class="rounded-xl border border-slate-100 px-4 py-3">
                            <dt class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $label }}</dt>
                            <dd class="mt-0.5 text-sm {{ $value ? 'font-semibold text-slate-900' : 'text-slate-300' }}">{{ $value ?: '—' }}</dd>
                        </div>
                    @endforeach
                </dl>
            </x-card>
        @endif

        {{-- ===================================================== ATTENDANCE --}}
        @if ($tab === 'attendance')
            <x-card class="overflow-hidden">
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Clock history') }}</h2>
                        <p class="text-xs text-slate-400">
                            {{ $attendanceMonthLabel }} ·
                            {{ trans_choice('{0}no days worked|{1}:count day|[2,*]:count days', $attendanceTotals['days'], ['count' => $attendanceTotals['days']]) }} ·
                            {{ $attendanceTotals['workedHours'] }}h ·
                            {{ __(':h overtime', ['h' => $attendanceTotals['overtimeHours'].'h']) }}
                            @if ($attendanceTotals['offNetwork'] > 0)
                                · <span class="text-amber-600">{{ trans_choice('{1}:count off-site|[2,*]:count off-site', $attendanceTotals['offNetwork'], ['count' => $attendanceTotals['offNetwork']]) }}</span>
                            @endif
                        </p>
                    </div>
                    <input type="month" wire:model.live="attendanceMonth"
                           class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Date') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('In') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Out') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Worked') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Overtime') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Source') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($attendanceRecords as $r)
                                <tr wire:key="att-{{ $r->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm font-medium text-slate-800">{{ $r->business_date->format('D j M') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm text-slate-600">{{ $r->clock_in_at?->timezone($tz)?->format('H:i') ?? '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm text-slate-600">{{ $r->clock_out_at?->timezone($tz)?->format('H:i') ?? '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm tabular-nums text-slate-900">{{ round($r->worked_minutes / 60, 1) }}h</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm tabular-nums {{ $r->overtime_minutes > 0 ? 'font-semibold text-amber-600' : 'text-slate-400' }}">
                                        {{ $r->overtime_minutes > 0 ? round($r->overtime_minutes / 60, 1).'h' : '—' }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm">
                                        @if ($r->is_remote)
                                            <x-badge color="violet">{{ __('Remote') }}</x-badge>
                                        @else
                                            <x-badge :color="$r->source === 'manual' ? 'amber' : ($r->gatePassed() ? 'slate' : 'rose')">
                                                {{ $r->source === 'manual' ? __('Keyed in') : ($r->gatePassed() ? __('On site') : __('Off-site')) }}
                                            </x-badge>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12">
                                        <x-empty-state icon="clock" :title="__('Nothing clocked this month')"
                                            :message="__('Pick another month, or correct the record from Attendance → Records.')"
                                            class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif

        {{-- ========================================================== LEAVE --}}
        @if ($tab === 'leave')
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                @foreach ([
                    ['label' => __('Entitlement'), 'value' => $leave['entitlement'], 'accent' => '#124a61', 'icon' => 'calendar-days'],
                    ['label' => __('Taken'), 'value' => $leave['taken'], 'accent' => '#f59e0b', 'icon' => 'minus-circle'],
                    ['label' => __('Remaining'), 'value' => $leave['remaining'], 'accent' => '#10b981', 'icon' => 'check-circle'],
                ] as $m)
                    <x-card class="flex flex-col p-5 ring-slate-200/70">
                        <div class="flex items-start justify-between gap-2">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $m['label'] }}</p>
                            <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40"
                                  style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                                <x-icon :name="$m['icon']" class="h-4 w-4" />
                            </span>
                        </div>
                        <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">
                            {{ rtrim(rtrim(number_format($m['value'], 1), '0'), '.') }} <span class="text-sm font-medium text-slate-400">{{ __('days') }}</span>
                        </p>
                    </x-card>
                @endforeach
            </div>

            <x-card class="overflow-hidden">
                <div class="border-b border-slate-100 p-4 sm:p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Leave history') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Every request, approved or not.') }}</p>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Dates') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Type') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Days') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Reason') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($leaveHistory as $l)
                                <tr wire:key="leave-{{ $l->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm font-medium text-slate-800">
                                        {{ $l->start_date->format('j M') }} – {{ $l->end_date->format('j M Y') }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm text-slate-600">{{ $l->leaveType?->name ?? '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm tabular-nums text-slate-900">{{ rtrim(rtrim(number_format((float) $l->requested_days, 1), '0'), '.') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm">
                                        <x-badge :color="$leaveStatusColors[$l->status] ?? 'slate'">{{ ucfirst($l->status) }}</x-badge>
                                    </td>
                                    <td class="px-3 lg:px-4 py-3.5 text-sm text-slate-500">{{ $l->reason ?: $l->blocked_reason ?: '—' }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-12">
                                        <x-empty-state icon="calendar-days" :title="__('No leave requested yet')"
                                            :message="__('Requests appear here as soon as they are submitted.')"
                                            class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif

        {{-- ============================================================ PAY --}}
        @if ($tab === 'pay' && $canSeePay)
            <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
                <x-card class="p-5">
                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Basic salary') }}</p>
                    <p class="mt-2 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 24px;">
                        {{ $employee->salary_currency_code ?: $baseCode }} {{ number_format((float) $employee->monthly_salary, 2) }}
                    </p>
                    <p class="mt-2 text-xs text-slate-400">{{ __('per month') }}</p>
                    <dl class="mt-4 space-y-1 border-t border-slate-100 pt-3 text-xs">
                        <div class="flex justify-between"><dt class="text-slate-500">{{ __('Daily rate') }}</dt><dd class="font-semibold tabular-nums text-slate-800">{{ $baseCode }} {{ number_format($rates['daily_rate'], 2) }}</dd></div>
                        <div class="flex justify-between"><dt class="text-slate-500">{{ __('Hourly rate') }}</dt><dd class="font-semibold tabular-nums text-slate-800">{{ $baseCode }} {{ number_format($rates['hourly_rate'], 2) }}</dd></div>
                        <div class="flex justify-between"><dt class="text-slate-500">{{ __('Overtime rate') }}</dt><dd class="font-semibold tabular-nums text-slate-800">{{ $baseCode }} {{ number_format($rates['hourly_rate'] * $rates['overtime_multiplier'], 2) }}</dd></div>
                    </dl>
                </x-card>

                <x-card class="p-5">
                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('How they get paid') }}</p>
                    <p class="mt-2 text-lg font-bold text-slate-900">{{ $employee->payMethodLabel() }}</p>
                    <p class="mt-1 text-sm text-slate-500">
                        {{ $employee->payFundAccount?->name ?? __('Uses the account chosen at finalize') }}
                    </p>
                    <dl class="mt-4 space-y-1 border-t border-slate-100 pt-3 text-xs">
                        @if ($employee->pay_method === 'bank')
                            <div class="flex justify-between"><dt class="text-slate-500">{{ __('Bank') }}</dt><dd class="font-medium text-slate-800">{{ $employee->bank_name ?: '—' }}</dd></div>
                            <div class="flex justify-between"><dt class="text-slate-500">{{ __('Account') }}</dt><dd class="font-mono text-slate-800">{{ $employee->bank_account_number ?: '—' }}</dd></div>
                        @elseif ($employee->pay_method === 'ecocash')
                            <div class="flex justify-between"><dt class="text-slate-500">{{ __('Mobile number') }}</dt><dd class="font-mono text-slate-800">{{ $employee->mobile_money_number ?: '—' }}</dd></div>
                        @endif
                        <div class="flex justify-between"><dt class="text-slate-500">{{ __('Tax number') }}</dt><dd class="font-mono text-slate-800">{{ $employee->tax_number ?: '—' }}</dd></div>
                        <div class="flex justify-between"><dt class="text-slate-500">{{ __('Social security') }}</dt><dd class="font-mono text-slate-800">{{ $employee->social_security_number ?: '—' }}</dd></div>
                    </dl>
                </x-card>

                <x-card class="p-5">
                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Awaiting the next run') }}</p>
                    <p class="mt-2 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 24px;">
                        {{ $baseCode }} {{ number_format($pendingCommission + $pendingEarnings->sum('amount'), 2) }}
                    </p>
                    <p class="mt-2 text-xs text-slate-400">{{ __('Commission + overtime not yet paid') }}</p>
                    @if ($pendingEarnings->isNotEmpty())
                        <ul class="mt-4 space-y-1 border-t border-slate-100 pt-3 text-xs">
                            @foreach ($pendingEarnings->take(4) as $earning)
                                <li class="flex items-center justify-between gap-2">
                                    <span class="truncate text-slate-500">
                                        {{ $earning->type === 'overtime' ? __('Overtime') : __('Leave cash-out') }}
                                        <span class="text-slate-400">· {{ $earning->period?->format('M Y') }}</span>
                                    </span>
                                    <span class="whitespace-nowrap font-semibold tabular-nums text-slate-800">{{ number_format((float) $earning->amount, 2) }}</span>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                    @if (($owedSalary ?? collect())->isNotEmpty())
                        <div class="mt-4 border-t border-slate-100 pt-3">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-amber-600">{{ __('Salary owed') }}</p>
                            <ul class="mt-1 space-y-1 text-xs">
                                @foreach ($owedSalary as $owed)
                                    <li class="flex items-center justify-between gap-2">
                                        <span class="truncate text-slate-500">{{ $owed->periodLabel() }}@if ($owed->deferred) <span class="text-slate-400">· {{ __('deferred') }}</span>@endif</span>
                                        <span class="whitespace-nowrap font-semibold tabular-nums text-amber-700">{{ number_format($owed->outstanding(), 2) }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </x-card>
            </div>

            {{-- Commission pauses (CRM_PLAN.md section 17, owned by CRM S8) --}}
            <livewire:people.commission-pauses :staff-profile-id="$employee->id" :key="'commission-pauses-'.$employee->id" />

            {{-- Benefits & deductions ------------------------------------- --}}
            <x-card class="overflow-hidden">
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Benefits & deductions') }}</h2>
                        <p class="text-xs text-slate-400">
                            {{ __('What payroll adds to and takes off this person automatically.') }}
                            @if ($employee->is_consultant)
                                {{ __('They are engaged as a consultant, so the team-wide items below do not reach them, only what is assigned here by name.') }}
                            @endif
                        </p>
                    </div>
                    @if ($canManagePay)
                        <div class="flex items-center gap-2">
                            <a href="{{ route('payroll.index') }}?tab=components" wire:navigate>
                                <x-secondary-button type="button">{{ __('Manage catalogue') }}</x-secondary-button>
                            </a>
                            <x-button wire:click="openComponent">
                                <x-icon name="plus" class="mr-1.5 h-4 w-4" />{{ __('Assign') }}
                            </x-button>
                        </div>
                    @endif
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Item') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Kind') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('How it is worked out') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Applies') }}</th>
                                @if ($canManagePay)
                                    <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                                @endif
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($blanketComponents as $c)
                                <tr wire:key="blanket-{{ $c->id }}" class="bg-slate-50/40 {{ $employee->is_consultant ? 'opacity-50' : '' }}">
                                    <td class="px-3 lg:px-4 py-3.5 text-sm font-medium text-slate-800">{{ $c->name }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm"><x-badge :color="$kindColors[$c->kind] ?? 'slate'">{{ $c->kindLabel() }}</x-badge></td>
                                    <td class="px-3 lg:px-4 py-3.5 text-sm text-slate-600">{{ $c->ruleLabel($baseCode) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-xs text-slate-400">
                                        {{ $employee->is_consultant ? __('Employees only') : __('Everyone') }}
                                    </td>
                                    @if ($canManagePay)
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-xs text-slate-300">{{ __('Team-wide') }}</td>
                                    @endif
                                </tr>
                            @endforeach

                            @forelse ($assignedComponents as $c)
                                <tr wire:key="assigned-{{ $c->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-3.5 text-sm font-medium text-slate-800">
                                        {{ $c->name }}
                                        @if ($c->pivot->notes)
                                            <span class="block text-xs text-slate-400">{{ $c->pivot->notes }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm"><x-badge :color="$kindColors[$c->kind] ?? 'slate'">{{ $c->kindLabel() }}</x-badge></td>
                                    <td class="px-3 lg:px-4 py-3.5 text-sm text-slate-600">
                                        @if ($c->pivot->value !== null)
                                            <span class="font-semibold text-slate-900">{{ rtrim(rtrim(number_format((float) $c->pivot->value, 4), '0'), '.') }}</span>
                                            <span class="text-xs text-slate-400">({{ __('override') }})</span>
                                        @else
                                            {{ $c->ruleLabel($baseCode) }}
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-xs text-slate-500">
                                        @if ($c->pivot->starts_on || $c->pivot->ends_on)
                                            {{ $c->pivot->starts_on ? \Illuminate\Support\Carbon::parse($c->pivot->starts_on)->format('M Y') : __('always') }}
                                            –
                                            {{ $c->pivot->ends_on ? \Illuminate\Support\Carbon::parse($c->pivot->ends_on)->format('M Y') : __('ongoing') }}
                                        @else
                                            {{ __('Ongoing') }}
                                        @endif
                                    </td>
                                    @if ($canManagePay)
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm font-medium">
                                            <button wire:click="removeComponent({{ $c->id }})"
                                                wire:confirm="{{ __('Remove this from the employee? Future payslips will no longer include it.') }}"
                                                class="text-rose-600 transition hover:text-rose-800">{{ __('Remove') }}</button>
                                        </td>
                                    @endif
                                </tr>
                            @empty
                                @if ($blanketComponents->isEmpty())
                                    <tr>
                                        <td colspan="{{ $canManagePay ? 5 : 4 }}" class="px-6 py-12">
                                            <x-empty-state icon="gift" :title="__('No benefits or deductions yet')"
                                                :message="__('Build the catalogue under Payroll → Benefits & Deductions, then assign items here. Payslips pick them up automatically.')"
                                                class="border-0 bg-transparent py-0" />
                                        </td>
                                    </tr>
                                @endif
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>

            {{-- Payslips --------------------------------------------------- --}}
            <x-card class="overflow-hidden">
                <div class="border-b border-slate-100 p-4 sm:p-5">
                    <h2 class="text-base font-semibold text-slate-900">{{ $employee->is_consultant ? __('Payment advices') : __('Payslips') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('Finalized runs only, a draft is not a statement of what was paid.') }}</p>
                </div>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Period') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Document') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ $employee->is_consultant ? __('Fee') : __('Gross') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Deductions') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Net paid') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Paid via') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($payslips as $slip)
                                <tr wire:key="slip-{{ $slip->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm font-medium text-slate-800">{{ $slip->run?->period?->format('F Y') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 font-mono text-xs text-slate-500">{{ $slip->payslip_number ?: '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm tabular-nums text-slate-600">{{ number_format((float) $slip->gross_pay, 2) }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm tabular-nums text-rose-600">
                                        {{ (float) $slip->deduction_total > 0 ? '−'.number_format((float) $slip->deduction_total, 2) : '—' }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm font-semibold tabular-nums text-slate-900">
                                        {{ $baseCode }} {{ number_format((float) $slip->net_pay, 2) }}
                                        @if ($slip->isPartlyPaid())
                                            <span class="block text-[11px] font-normal text-amber-600">{{ __('paid now :a · owed :b', ['a' => number_format($slip->amountPaidNow(), 2), 'b' => number_format($slip->amountOwed(), 2)]) }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm text-slate-500">
                                        {{ $slip->payMethodLabel() }}
                                        @if ($slip->fundAccount)
                                            <span class="block text-xs text-slate-400">{{ $slip->fundAccount->name }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm font-medium">
                                        <div class="flex items-center justify-end gap-3">
                                            <a href="{{ route('payroll.payslip', $slip) }}?preview=1" target="_blank" class="text-indigo-600 transition hover:text-indigo-800">{{ __('View') }}</a>
                                            <a href="{{ route('payroll.payslip', $slip) }}" class="text-slate-500 transition hover:text-slate-700">{{ __('Download') }}</a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-6 py-12">
                                        <x-empty-state icon="banknotes"
                                            :title="$employee->is_consultant ? __('No payment advices yet') : __('No payslips yet')"
                                            :message="__('The document is created the moment a monthly payroll run is finalized.')"
                                            class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif

        {{-- ====================================================== DOCUMENTS --}}
        @if ($tab === 'documents')
            <x-card class="overflow-hidden">
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Employee file') }}</h2>
                        <p class="text-xs text-slate-400">
                            @if ($canManageRecords)
                                {{ __('CV, interview notes, offer, job description, contract, ID and conduct records. Files are private; you choose what the employee can open.') }}
                            @else
                                {{ __('The documents HR has shared with you.') }}
                            @endif
                        </p>
                    </div>
                    @if ($canManageRecords)
                        <div class="flex flex-wrap items-center gap-2">
                            @if ($driveEnabled)
                                @if ($employee->drive_folder_url)
                                    <a href="{{ $employee->drive_folder_url }}" target="_blank" rel="noopener">
                                        <x-secondary-button type="button"><x-icon name="arrow-up-right" class="mr-1.5 h-4 w-4" />{{ __('Open in Drive') }}</x-secondary-button>
                                    </a>
                                @endif
                                <x-secondary-button wire:click="syncDrive" wire:loading.attr="disabled" wire:target="syncDrive" type="button">
                                    <x-icon name="arrow-path" class="mr-1.5 h-4 w-4" />
                                    <span wire:loading.remove wire:target="syncDrive">{{ __('Check Drive for new files') }}</span>
                                    <span wire:loading wire:target="syncDrive">{{ __('Checking…') }}</span>
                                </x-secondary-button>
                            @endif
                            <x-button wire:click="openDocument">
                                <x-icon name="plus" class="mr-1.5 h-4 w-4" />{{ __('Add document') }}
                            </x-button>
                        </div>
                    @endif
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Document') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Type') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Issued') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Expires') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Added by') }}</th>
                                @if ($canManageRecords)
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Employee sees it') }}</th>
                                @endif
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($documents as $doc)
                                <tr wire:key="doc-{{ $doc->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-3.5 text-sm">
                                        <span class="font-medium text-slate-800">{{ $doc->title }}</span>
                                        @if ($doc->body)
                                            <span class="mt-0.5 block whitespace-pre-line text-xs text-slate-500">{{ \Illuminate\Support\Str::limit($doc->body, 180) }}</span>
                                        @endif
                                        @if ($doc->hasFile())
                                            <span class="block text-xs text-slate-400">
                                                {{ $doc->original_name }} · {{ $doc->humanSize() }}
                                                @if ($doc->drive_file_id) · <span class="font-semibold text-emerald-600">{{ __('in Drive') }}</span> @endif
                                            </span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm">
                                        <x-badge :color="$doc->type === 'warning' ? 'rose' : ($doc->type === 'commendation' ? 'emerald' : ($doc->isRecruitment() ? 'indigo' : 'slate'))">
                                            {{ $doc->typeLabel() }}
                                        </x-badge>
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm text-slate-500">{{ $doc->issued_on?->format('j M Y') ?? '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm">
                                        @if ($doc->expires_on)
                                            <span class="{{ $doc->isExpired() ? 'font-semibold text-rose-600' : ($doc->isExpiringWithin(45) ? 'font-semibold text-amber-600' : 'text-slate-500') }}">
                                                {{ $doc->expires_on->format('j M Y') }}
                                            </span>
                                        @else
                                            <span class="text-slate-300">—</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm text-slate-500">{{ $doc->uploader?->name ?? '—' }}</td>
                                    @if ($canManageRecords)
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-sm">
                                            <button type="button" wire:click="toggleDocumentVisibility({{ $doc->id }})"
                                                title="{{ $doc->visible_to_employee ? __('Shared with the employee. Click to make it HR only.') : __('HR only. Click to share it with the employee.') }}"
                                                class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-semibold transition {{ $doc->visible_to_employee ? 'bg-emerald-50 text-emerald-700 hover:bg-emerald-100' : 'bg-slate-100 text-slate-500 hover:bg-slate-200' }}">
                                                <x-icon :name="$doc->visible_to_employee ? 'eye' : 'eye-slash'" class="h-3.5 w-3.5" />
                                                {{ $doc->visible_to_employee ? __('Shared') : __('HR only') }}
                                            </button>
                                        </td>
                                    @endif
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right text-sm font-medium">
                                        <div class="flex items-center justify-end gap-3">
                                            @if ($doc->hasFile())
                                                <button wire:click="downloadDocument({{ $doc->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Download') }}</button>
                                            @endif
                                            @if ($canManageRecords)
                                                <button wire:click="deleteDocument({{ $doc->id }})"
                                                    wire:confirm="{{ __('Remove this from the employee file?') }}"
                                                    class="text-rose-600 transition hover:text-rose-800">{{ __('Delete') }}</button>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="{{ $canManageRecords ? 7 : 6 }}" class="px-6 py-12">
                                        <x-empty-state icon="folder" :title="__('The file is empty')"
                                            :message="__('Add the signed contract, a copy of their ID and any qualifications so HR never has to hunt for them.')"
                                            class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif

        {{-- ======================================================= CONDUCT --}}
        @if ($tab === 'conduct' && $canSeeFile)
            <livewire:people.conduct :employee="$employee" :key="'conduct-'.$employee->id" />
        @endif

        {{-- ========================================================= MODALS --}}

        {{-- Employment record --}}
        <x-dialog-modal wire:model.live="showEmploymentModal" maxWidth="2xl">
            <x-slot name="title">{{ __('Employment record') }}</x-slot>
            <x-slot name="content">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div>
                        <x-label for="e_employee_number" :value="__('Employee number')" />
                        <x-input id="e_employee_number" type="text" class="mt-1 block w-full bg-slate-50 font-mono text-slate-500" wire:model="e_employee_number" readonly />
                        <p class="mt-1 text-xs text-slate-500">{{ __('Issued automatically. The prefix is set in Settings → Numbering.') }}</p>
                    </div>
                    <div>
                        <x-label for="e_job_title" :value="__('Job title')" />
                        <x-input id="e_job_title" type="text" class="mt-1 block w-full" wire:model="e_job_title" placeholder="{{ __('Machine Operator') }}" />
                        <x-input-error for="e_job_title" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="e_department" :value="__('Department')" />
                        <x-input id="e_department" type="text" class="mt-1 block w-full" wire:model="e_department" placeholder="{{ __('Production') }}" />
                        <x-input-error for="e_department" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="e_employment_type" :value="__('Engagement')" />
                        <select id="e_employment_type" wire:model="e_employment_type" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($employmentTypes as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="e_employment_type" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="e_work_mode" :value="__('Works')" />
                        <select id="e_work_mode" wire:model.live="e_work_mode" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach (\App\Models\StaffProfile::WORK_MODES as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-[11px] text-slate-400">{{ __('Remote staff clock in from anywhere; the shop geofence does not apply.') }}</p>
                        <x-input-error for="e_work_mode" class="mt-2" />
                    </div>
                    @if ($e_work_mode === 'hybrid')
                        <div class="sm:col-span-2">
                            <x-label :value="__('Remote on')" />
                            <div class="mt-1 flex flex-wrap gap-2">
                                @foreach (['mon' => __('Mon'), 'tue' => __('Tue'), 'wed' => __('Wed'), 'thu' => __('Thu'), 'fri' => __('Fri'), 'sat' => __('Sat'), 'sun' => __('Sun')] as $dayKey => $dayLabel)
                                    <label class="flex cursor-pointer items-center gap-1.5 rounded-lg border border-slate-200 px-2.5 py-1.5 text-xs text-slate-600 has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                                        <input type="checkbox" value="{{ $dayKey }}" wire:model="e_remote_days" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />{{ $dayLabel }}
                                    </label>
                                @endforeach
                            </div>
                            <x-input-error for="e_remote_days" class="mt-2" />
                        </div>
                    @endif
                    <div class="sm:col-span-2">
                        <x-label for="e_manager_id" :value="__('Reports to')" />
                        <select id="e_manager_id" wire:model="e_manager_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Nobody / not set') }}</option>
                            @foreach ($members as $member)
                                <option value="{{ $member->id }}">{{ $member->name }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="e_manager_id" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="e_hired_on" :value="__('Date joined')" />
                        <x-input id="e_hired_on" type="date" class="mt-1 block w-full" wire:model="e_hired_on" />
                        <x-input-error for="e_hired_on" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="e_probation_ends_on" :value="__('Probation ends')" />
                        <x-input id="e_probation_ends_on" type="date" class="mt-1 block w-full" wire:model="e_probation_ends_on" />
                        <x-input-error for="e_probation_ends_on" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="e_contract_ends_on" :value="__('Contract ends')" />
                        <x-input id="e_contract_ends_on" type="date" class="mt-1 block w-full" wire:model="e_contract_ends_on" />
                        <p class="mt-1 text-[11px] text-slate-400">{{ __('Leave blank for permanent staff.') }}</p>
                        <x-input-error for="e_contract_ends_on" class="mt-2" />
                    </div>

                    <div class="sm:col-span-3 border-t border-slate-100 pt-3">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Personal') }}</p>
                    </div>

                    <div class="sm:col-span-3">
                        <x-label for="e_full_name" :value="__('Full name')" />
                        <x-input id="e_full_name" type="text" class="mt-1 block w-full" wire:model="e_full_name" />
                        <p class="mt-1 text-[11px] text-slate-400">{{ __('As it appears on their ID. Payslips and statutory returns use this name.') }}</p>
                        <x-input-error for="e_full_name" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="e_national_id" :value="__('National ID')" />
                        <x-input id="e_national_id" type="text" class="mt-1 block w-full" wire:model="e_national_id" />
                        <x-input-error for="e_national_id" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="e_date_of_birth" :value="__('Date of birth')" />
                        <x-input id="e_date_of_birth" type="date" class="mt-1 block w-full" wire:model="e_date_of_birth" />
                        <x-input-error for="e_date_of_birth" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="e_gender" :value="__('Gender')" />
                        <x-input id="e_gender" type="text" class="mt-1 block w-full" wire:model="e_gender" />
                        <x-input-error for="e_gender" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="e_phone" :value="__('Phone')" />
                        <x-input id="e_phone" type="text" class="mt-1 block w-full" wire:model="e_phone" />
                        <x-input-error for="e_phone" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="e_personal_email" :value="__('Personal email')" />
                        <x-input id="e_personal_email" type="email" class="mt-1 block w-full" wire:model="e_personal_email" />
                        <p class="mt-1 text-[11px] text-slate-400">{{ __('Where payslips are sent. Blank means the login address.') }}</p>
                        <x-input-error for="e_personal_email" class="mt-2" />
                    </div>
                    <div class="sm:col-span-2">
                        <x-label for="e_address" :value="__('Address')" />
                        <textarea id="e_address" rows="2" wire:model="e_address" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="e_address" class="mt-2" />
                    </div>

                    <div class="sm:col-span-3 border-t border-slate-100 pt-3">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Emergency contact') }}</p>
                    </div>

                    <div>
                        <x-label for="e_emergency_contact_name" :value="__('Name')" />
                        <x-input id="e_emergency_contact_name" type="text" class="mt-1 block w-full" wire:model="e_emergency_contact_name" />
                        <x-input-error for="e_emergency_contact_name" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="e_emergency_contact_phone" :value="__('Phone')" />
                        <x-input id="e_emergency_contact_phone" type="text" class="mt-1 block w-full" wire:model="e_emergency_contact_phone" />
                        <x-input-error for="e_emergency_contact_phone" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="e_emergency_contact_relation" :value="__('Relationship')" />
                        <x-input id="e_emergency_contact_relation" type="text" class="mt-1 block w-full" wire:model="e_emergency_contact_relation" placeholder="{{ __('Spouse, parent…') }}" />
                        <x-input-error for="e_emergency_contact_relation" class="mt-2" />
                    </div>

                    <div class="sm:col-span-3">
                        <x-label for="e_notes" :value="__('HR notes')" />
                        <textarea id="e_notes" rows="2" wire:model="e_notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="e_notes" class="mt-2" />
                    </div>

                    <div class="sm:col-span-3">
                        <label class="flex items-center gap-2 rounded-lg border border-slate-200 px-3 py-2 text-sm has-[:checked]:border-indigo-400 has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-700">
                            <x-checkbox wire:model="e_is_active" />
                            {{ __('Active, included in payroll, the daily roster and reports') }}
                        </label>
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showEmploymentModal', false)">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="saveEmployment" wire:loading.attr="disabled" wire:target="saveEmployment">
                    <span wire:loading.remove wire:target="saveEmployment">{{ __('Save record') }}</span>
                    <span wire:loading wire:target="saveEmployment">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>

        {{-- Pay details --}}
        @if ($canManagePay)
            <x-dialog-modal wire:model.live="showPayModal" maxWidth="2xl">
                <x-slot name="title">{{ __('Pay details') }}</x-slot>
                <x-slot name="content">
                    <p class="mb-4 rounded-xl bg-amber-50 px-3 py-2 text-xs text-amber-800">
                        {{ __('Salary changes only reach a payslip when the draft run for that month is rebuilt. Finalized runs never change.') }}
                    </p>
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div>
                            <x-label for="p_salary" :value="__('Basic monthly salary')" />
                            <x-input id="p_salary" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="p_salary" />
                            <x-input-error for="p_salary" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="p_currency" :value="__('Currency')" />
                            <select id="p_currency" wire:model="p_currency" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                @foreach ($currencies as $currency)
                                    <option value="{{ $currency->code }}">{{ $currency->code }}</option>
                                @endforeach
                            </select>
                            <x-input-error for="p_currency" class="mt-2" />
                        </div>

                        <div>
                            <x-label for="p_pay_method" :value="__('Paid by')" />
                            <select id="p_pay_method" wire:model.live="p_pay_method" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                @foreach ($payMethods as $key => $label)
                                    <option value="{{ $key }}">{{ __($label) }}</option>
                                @endforeach
                            </select>
                            <x-input-error for="p_pay_method" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="p_pay_fund_account_id" :value="__('Paid from account')" />
                            <select id="p_pay_fund_account_id" wire:model="p_pay_fund_account_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">{{ __('Use the run default') }}</option>
                                @foreach ($fundAccounts as $account)
                                    <option value="{{ $account->id }}">{{ $account->name }}</option>
                                @endforeach
                            </select>
                            <p class="mt-1 text-[11px] text-slate-400">{{ __('Their net pay is deducted from this account when the run is finalized.') }}</p>
                            <x-input-error for="p_pay_fund_account_id" class="mt-2" />
                        </div>

                        @if ($p_pay_method === 'bank')
                            <div>
                                <x-label for="p_bank_name" :value="__('Bank')" />
                                <x-input id="p_bank_name" type="text" class="mt-1 block w-full" wire:model="p_bank_name" />
                                <x-input-error for="p_bank_name" class="mt-2" />
                            </div>
                            <div>
                                <x-label for="p_bank_account_name" :value="__('Account name')" />
                                <x-input id="p_bank_account_name" type="text" class="mt-1 block w-full" wire:model="p_bank_account_name" />
                                <x-input-error for="p_bank_account_name" class="mt-2" />
                            </div>
                            <div class="sm:col-span-2">
                                <x-label for="p_bank_account_number" :value="__('Account number')" />
                                <x-input id="p_bank_account_number" type="text" class="mt-1 block w-full" wire:model="p_bank_account_number" />
                                <x-input-error for="p_bank_account_number" class="mt-2" />
                            </div>
                        @elseif ($p_pay_method === 'ecocash')
                            <div class="sm:col-span-2">
                                <x-label for="p_mobile_money_number" :value="__('Mobile money number')" />
                                <x-input id="p_mobile_money_number" type="text" class="mt-1 block w-full" wire:model="p_mobile_money_number" />
                                <x-input-error for="p_mobile_money_number" class="mt-2" />
                            </div>
                        @endif

                        <div>
                            <x-label for="p_tax_number" :value="__('Tax number')" />
                            <x-input id="p_tax_number" type="text" class="mt-1 block w-full" wire:model="p_tax_number" />
                            <x-input-error for="p_tax_number" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="p_social_security_number" :value="__('Social security number')" />
                            <x-input id="p_social_security_number" type="text" class="mt-1 block w-full" wire:model="p_social_security_number" />
                            <x-input-error for="p_social_security_number" class="mt-2" />
                        </div>
                    </div>
                </x-slot>
                <x-slot name="footer">
                    <x-secondary-button wire:click="$set('showPayModal', false)">{{ __('Cancel') }}</x-secondary-button>
                    <x-button class="ms-3" wire:click="savePay" wire:loading.attr="disabled" wire:target="savePay">
                        <span wire:loading.remove wire:target="savePay">{{ __('Save pay details') }}</span>
                        <span wire:loading wire:target="savePay">{{ __('Saving…') }}</span>
                    </x-button>
                </x-slot>
            </x-dialog-modal>

            {{-- Assign a benefit / deduction --}}
            <x-dialog-modal wire:model.live="showComponentModal" maxWidth="lg">
                <x-slot name="title">{{ __('Assign a benefit or deduction') }}</x-slot>
                <x-slot name="content">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <x-label for="c_component_id" :value="__('Item')" />
                            <select id="c_component_id" wire:model="c_component_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                <option value="">{{ __('Choose…') }}</option>
                                @foreach ($availableComponents as $option)
                                    <option value="{{ $option->id }}">{{ $option->kindLabel() }}, {{ $option->name }} ({{ $option->ruleLabel($baseCode) }})</option>
                                @endforeach
                            </select>
                            @if ($availableComponents->isEmpty())
                                <p class="mt-1 text-[11px] text-amber-600">{{ __('Nothing left to assign, add more under Payroll → Benefits & Deductions.') }}</p>
                            @endif
                            <x-input-error for="c_component_id" class="mt-2" />
                        </div>

                        <div class="sm:col-span-2">
                            <x-label for="c_value" :value="__('Value for this person (optional)')" />
                            <x-input id="c_value" type="number" step="0.0001" min="0" class="mt-1 block w-full" wire:model="c_value" placeholder="{{ __('Leave blank to use the catalogue value') }}" />
                            <x-input-error for="c_value" class="mt-2" />
                        </div>

                        <div>
                            <x-label for="c_starts_on" :value="__('Starts')" />
                            <x-input id="c_starts_on" type="date" class="mt-1 block w-full" wire:model="c_starts_on" />
                            <x-input-error for="c_starts_on" class="mt-2" />
                        </div>
                        <div>
                            <x-label for="c_ends_on" :value="__('Ends')" />
                            <x-input id="c_ends_on" type="date" class="mt-1 block w-full" wire:model="c_ends_on" />
                            <x-input-error for="c_ends_on" class="mt-2" />
                        </div>

                        <div class="sm:col-span-2">
                            <x-label for="c_notes" :value="__('Note')" />
                            <x-input id="c_notes" type="text" class="mt-1 block w-full" wire:model="c_notes" />
                            <x-input-error for="c_notes" class="mt-2" />
                        </div>
                    </div>
                </x-slot>
                <x-slot name="footer">
                    <x-secondary-button wire:click="$set('showComponentModal', false)">{{ __('Cancel') }}</x-secondary-button>
                    <x-button class="ms-3" wire:click="assignComponent">{{ __('Assign') }}</x-button>
                </x-slot>
            </x-dialog-modal>
        @endif

        {{-- Exit --}}
        <x-dialog-modal wire:model.live="showExitModal" maxWidth="lg">
            <x-slot name="title">{{ __('Record exit') }}</x-slot>
            <x-slot name="content">
                <p class="mb-4 rounded-xl bg-rose-50 px-3 py-2 text-xs text-rose-800">
                    {{ __('This takes them off payroll and the daily roster from now on. Past payslips and attendance are kept.') }}
                </p>
                <div class="grid grid-cols-1 gap-4">
                    <div>
                        <x-label for="x_exited_on" :value="__('Last working day')" />
                        <x-input id="x_exited_on" type="date" class="mt-1 block w-full" wire:model="x_exited_on" />
                        <x-input-error for="x_exited_on" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="x_exit_reason" :value="__('Reason')" />
                        <x-input id="x_exit_reason" type="text" class="mt-1 block w-full" wire:model="x_exit_reason" placeholder="{{ __('Resigned, contract ended, dismissed…') }}" />
                        <x-input-error for="x_exit_reason" class="mt-2" />
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showExitModal', false)">{{ __('Cancel') }}</x-secondary-button>
                <x-danger-button class="ms-3" wire:click="recordExit">{{ __('Record exit') }}</x-danger-button>
            </x-slot>
        </x-dialog-modal>

        {{-- Document --}}
        <x-dialog-modal wire:model.live="showDocumentModal" maxWidth="2xl">
            <x-slot name="title">{{ __('Add to employee file') }}</x-slot>
            <x-slot name="content">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="d_type" :value="__('Type')" />
                        <select id="d_type" wire:model.live="d_type" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($documentTypes as $key => $label)
                                <option value="{{ $key }}">{{ __($label) }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="d_type" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="d_title" :value="__('Title')" />
                        <x-input id="d_title" type="text" class="mt-1 block w-full" wire:model="d_title" placeholder="{{ __('Employment contract 2026') }}" />
                        <x-input-error for="d_title" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="d_issued_on" :value="__('Issued on')" />
                        <x-input id="d_issued_on" type="date" class="mt-1 block w-full" wire:model="d_issued_on" />
                        <x-input-error for="d_issued_on" class="mt-2" />
                    </div>
                    <div>
                        <x-label for="d_expires_on" :value="__('Expires on')" />
                        <x-input id="d_expires_on" type="date" class="mt-1 block w-full" wire:model="d_expires_on" />
                        <p class="mt-1 text-[11px] text-slate-400">{{ __('Set this and the directory will warn you before it lapses.') }}</p>
                        <x-input-error for="d_expires_on" class="mt-2" />
                    </div>

                    <div class="sm:col-span-2">
                        <x-label for="d_body" :value="in_array($d_type, ['warning', 'commendation']) ? __('What happened') : __('Notes')" />
                        <textarea id="d_body" rows="3" wire:model="d_body" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                        <x-input-error for="d_body" class="mt-2" />
                    </div>

                    <div class="sm:col-span-2">
                        <x-label for="d_file" :value="__('File (PDF, image or Word)')" />
                        <input id="d_file" type="file" wire:model="d_file"
                               class="mt-1 block w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm shadow-sm file:mr-3 file:rounded-lg file:border-0 file:bg-slate-100 file:px-3 file:py-1.5 file:text-xs file:font-semibold file:text-slate-600" />
                        <x-upload-progress target="d_file" class="mt-2" />
                        <x-input-error for="d_file" class="mt-2" />
                    </div>

                    <label class="sm:col-span-2 flex items-start gap-2 rounded-xl border border-slate-200 p-3 text-sm text-slate-700">
                        <input type="checkbox" wire:model="d_visible" class="mt-0.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                        <span>
                            <span class="font-semibold">{{ __('The employee can open this') }}</span>
                            <span class="block text-xs text-slate-400">{{ __('CVs, interview notes and reference checks start as HR only. You can change it later from the list.') }}</span>
                        </span>
                    </label>
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-secondary-button wire:click="$set('showDocumentModal', false)">{{ __('Cancel') }}</x-secondary-button>
                <x-button class="ms-3" wire:click="saveDocument" wire:loading.attr="disabled" wire:target="saveDocument,d_file">
                    <span wire:loading.remove wire:target="saveDocument">{{ __('Add to file') }}</span>
                    <span wire:loading wire:target="saveDocument">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    </div>
</div>