@php
    $actionColors = [
        'none' => 'slate', 'verbal_warning' => 'amber', 'written_warning' => 'amber',
        'final_warning' => 'rose', 'suspension' => 'rose', 'dismissal' => 'rose',
    ];
    $docColors = ['warning' => 'rose', 'incident_report' => 'amber', 'suspension' => 'rose', 'medical' => 'sky'];
    $money = fn ($v) => $baseCode.' '.number_format((float) $v, 2);
    $openCount = $cases->where('status', 'open')->count();
@endphp

<div class="space-y-6">
    <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">{{ __('Conduct & disciplinary') }}</h2>
                <p class="text-xs text-slate-400">
                    {{ __('Incidents, warnings, suspensions and costs recovered from pay. Private to HR and the employee.') }}
                    @if ($cases->isNotEmpty())
                        · {{ trans_choice('{1}:count case|[2,*]:count cases', $cases->count(), ['count' => $cases->count()]) }}, {{ __(':n open', ['n' => $openCount]) }}
                    @endif
                </p>
            </div>
            @if ($canManageRecords)
                <x-button wire:click="openCreate">
                    <x-icon name="plus" class="mr-1.5 h-4 w-4" />{{ __('Record incident') }}
                </x-button>
            @endif
        </div>

        @if ($cases->isEmpty())
            <div class="px-6 py-12">
                <x-empty-state icon="scale-balance" :title="__('A clean record')"
                    :message="__('Nothing has been recorded against this employee.')"
                    class="border-0 bg-transparent py-0" />
            </div>
        @else
            <div class="divide-y divide-slate-100">
                @foreach ($cases as $case)
                    @php
                        $recovery = $case->recovery && $case->recovery->status !== 'cancelled' ? $case->recovery : null;
                        $leave = $case->leaveApplication;
                        $suspDays = $leave && $leave->status === 'approved' ? (float) $leave->requested_days : 0;
                    @endphp
                    <div wire:key="case-{{ $case->id }}" class="space-y-4 p-4 sm:p-5">
                        {{-- Heading --}}
                        <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                            <div class="min-w-0">
                                <div class="flex flex-wrap items-center gap-2">
                                    <span class="font-mono text-xs text-slate-400">{{ $case->reference }}</span>
                                    <x-badge :color="$actionColors[$case->action] ?? 'slate'">{{ $case->actionLabel() }}</x-badge>
                                    <x-badge :color="$case->isOpen() ? 'amber' : 'emerald'">{{ $case->isOpen() ? __('Open') : __('Closed') }}</x-badge>
                                </div>
                                <h3 class="mt-1 text-sm font-bold text-slate-900">{{ $case->title }}</h3>
                                <p class="text-xs text-slate-500">
                                    {{ $case->incident_on?->format('j M Y') }} · {{ $case->categoryLabel() }}
                                    @if ($case->recorder) · {{ __('recorded by :name', ['name' => $case->recorder->name]) }} @endif
                                </p>
                            </div>
                            @if ($canManageRecords)
                                <div class="flex shrink-0 flex-wrap items-center gap-3 text-sm font-medium">
                                    <button wire:click="openDocument({{ $case->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Add letter / report') }}</button>
                                    <button wire:click="openEdit({{ $case->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</button>
                                    @if ($case->isOpen())
                                        <button wire:click="openClose({{ $case->id }})" class="text-emerald-600 transition hover:text-emerald-800">{{ __('Close') }}</button>
                                    @else
                                        <button wire:click="reopenCase({{ $case->id }})" class="text-slate-500 transition hover:text-slate-700">{{ __('Reopen') }}</button>
                                    @endif
                                    <button wire:click="deleteCase({{ $case->id }})"
                                        wire:confirm="{{ __('Delete this case? Use this only for a case entered in error. Its suspension and any deduction not yet taken are withdrawn.') }}"
                                        class="text-rose-600 transition hover:text-rose-800">{{ __('Delete') }}</button>
                                </div>
                            @endif
                        </div>

                        @if ($case->description)
                            <p class="whitespace-pre-line text-sm text-slate-700">{{ $case->description }}</p>
                        @endif

                        {{-- Suspension + recovery strip --}}
                        @if ($case->hasSuspension() || ($recovery && $canSeeMoney))
                            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                @if ($case->hasSuspension())
                                    <div class="flex items-start gap-3 rounded-xl border border-rose-100 bg-rose-50/50 p-3">
                                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-100 text-rose-600">
                                            <x-icon name="calendar-days" class="h-5 w-5" />
                                        </span>
                                        <div class="min-w-0 text-sm">
                                            <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Suspension') }}</p>
                                            <p class="font-semibold text-slate-900">
                                                {{ $case->suspended_from->format('j M') }} – {{ $case->suspended_to->format('j M Y') }}
                                            </p>
                                            <p class="text-xs text-slate-500">
                                                {{ trans_choice('{1}:n working day|[2,*]:n working days', (int) ceil($suspDays), ['n' => rtrim(rtrim(number_format($suspDays, 1), '0'), '.')]) }}
                                                · {{ $case->suspension_paid ? __('on full pay') : __('without pay') }}
                                                @if (! $case->suspension_paid && $canSeeMoney && $dailyRate > 0)
                                                    · {{ __('about :amt off basic pay', ['amt' => $money($suspDays * $dailyRate)]) }}
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                @endif

                                @if ($recovery && $canSeeMoney)
                                    @php
                                        $pct = (float) $recovery->total_amount > 0 ? min(100, round((float) $recovery->recovered_amount / (float) $recovery->total_amount * 100)) : 0;
                                    @endphp
                                    <div class="flex items-start gap-3 rounded-xl border border-amber-100 bg-amber-50/50 p-3">
                                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-amber-100 text-amber-600">
                                            <x-icon name="banknotes" class="h-5 w-5" />
                                        </span>
                                        <div class="min-w-0 flex-1 text-sm">
                                            <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Recovered from pay') }}</p>
                                            <p class="font-semibold tabular-nums text-slate-900">
                                                {{ $money($recovery->recovered_amount) }} {{ __('of') }} {{ $money($recovery->total_amount) }}
                                            </p>
                                            <p class="text-xs text-slate-500">
                                                {{ __(':amt a month from :month', ['amt' => $money($recovery->instalment_amount ?: $recovery->target_instalment), 'month' => $recovery->start_period?->format('M Y')]) }}
                                                · @if ($recovery->status === 'settled') <span class="font-semibold text-emerald-600">{{ __('paid back') }}</span>
                                                  @elseif ($recovery->status === 'waived') {{ __('waived') }}
                                                  @else {{ __(':amt still to go', ['amt' => $money($recovery->outstanding)]) }} @endif
                                            </p>
                                            <div class="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-amber-100">
                                                <div class="h-full rounded-full bg-amber-500" style="width: {{ $pct }}%"></div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        @endif

                        {{-- Documents filed against the case --}}
                        @if ($case->documents->isNotEmpty())
                            <ul class="divide-y divide-slate-100 rounded-xl border border-slate-100">
                                @foreach ($case->documents as $doc)
                                    <li wire:key="case-doc-{{ $doc->id }}" class="flex flex-col gap-1 px-3 py-2.5 sm:flex-row sm:items-center sm:justify-between">
                                        <div class="min-w-0 text-sm">
                                            <div class="flex flex-wrap items-center gap-2">
                                                <x-badge :color="$docColors[$doc->type] ?? 'slate'">{{ $doc->typeLabel() }}</x-badge>
                                                <span class="font-medium text-slate-800">{{ $doc->title }}</span>
                                                <span class="whitespace-nowrap text-xs text-slate-400">{{ $doc->issued_on?->format('j M Y') }}</span>
                                            </div>
                                            @if ($doc->body)
                                                <p class="mt-0.5 whitespace-pre-line text-xs text-slate-500">{{ \Illuminate\Support\Str::limit($doc->body, 240) }}</p>
                                            @endif
                                        </div>
                                        @if ($doc->hasFile())
                                            <button wire:click="downloadDocument({{ $doc->id }})" class="shrink-0 text-left text-sm font-medium text-indigo-600 transition hover:text-indigo-800">
                                                <x-icon name="arrow-down-tray" class="mr-1 h-3.5 w-3.5" />{{ __('Download') }}
                                            </button>
                                        @endif
                                    </li>
                                @endforeach
                            </ul>
                        @elseif ($canManageRecords)
                            <p class="text-xs text-slate-400">{{ __('No warning letter or report filed yet.') }}</p>
                        @endif

                        @if (! $case->isOpen() && $case->outcome)
                            <p class="rounded-xl bg-emerald-50 px-3 py-2 text-xs text-emerald-800"><span class="font-semibold">{{ __('Outcome') }}:</span> {{ $case->outcome }}</p>
                        @endif
                    </div>
                @endforeach
            </div>
        @endif
    </x-card>

    {{-- ===================================================== CASE MODAL --}}
    <x-dialog-modal wire:model.live="showCaseModal" maxWidth="2xl">
        <x-slot name="title">{{ $editingId ? __('Edit case') : __('Record an incident') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="c_incident_on" :value="__('Date of the incident')" />
                    <x-input id="c_incident_on" type="date" class="mt-1 block w-full" wire:model="c_incident_on" />
                    <x-input-error for="c_incident_on" class="mt-2" />
                </div>
                <div>
                    <x-label for="c_category" :value="__('Kind of incident')" />
                    <select id="c_category" wire:model="c_category" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($categories as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="c_category" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="c_title" :value="__('Title')" />
                    <x-input id="c_title" type="text" class="mt-1 block w-full" wire:model="c_title" placeholder="{{ __('Drunk on duty, taken to hospital') }}" />
                    <x-input-error for="c_title" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="c_description" :value="__('What happened')" />
                    <textarea id="c_description" rows="4" wire:model="c_description" 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="c_description" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="c_action" :value="__('Action taken')" />
                    <select id="c_action" wire:model.live="c_action" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($actions as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-[11px] text-slate-400">{{ __('File the signed warning letter and any reports against the case once it is saved.') }}</p>
                    <x-input-error for="c_action" class="mt-2" />
                </div>

                {{-- Suspension --}}
                <div class="sm:col-span-2 rounded-xl border border-slate-200 p-4">
                    <label class="flex items-center gap-2 text-sm font-semibold text-slate-800">
                        <input type="checkbox" wire:model.live="c_suspend" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                        {{ __('Suspended from work') }}
                    </label>
                    @if ($c_suspend)
                        <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <div>
                                <x-label for="c_suspended_from" :value="__('First day')" />
                                <x-input id="c_suspended_from" type="date" class="mt-1 block w-full" wire:model.live="c_suspended_from" />
                                <x-input-error for="c_suspended_from" class="mt-2" />
                            </div>
                            <div>
                                <x-label for="c_suspended_to" :value="__('Last day')" />
                                <x-input id="c_suspended_to" type="date" class="mt-1 block w-full" wire:model.live="c_suspended_to" />
                                <x-input-error for="c_suspended_to" class="mt-2" />
                            </div>
                            <label class="sm:col-span-2 flex items-center gap-2 text-sm text-slate-700">
                                <input type="checkbox" wire:model.live="c_suspension_paid" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                                {{ __('On full pay (leave unticked for a suspension without pay)') }}
                            </label>
                            @if ($previewDays > 0)
                                <p class="sm:col-span-2 rounded-lg bg-slate-50 px-3 py-2 text-xs text-slate-600">
                                    {{ __(':n working days.', ['n' => rtrim(rtrim(number_format($previewDays, 1), '0'), '.')]) }}
                                    @if (! $c_suspension_paid)
                                        {{ __('Payroll takes them off the basic salary of the month they fall in.') }}
                                        @if ($canSeeMoney && $dailyRate > 0)
                                            {{ __('About :amt at the current daily rate.', ['amt' => $money($previewDays * $dailyRate)]) }}
                                        @endif
                                    @endif
                                    {{ __('The attendance roster shows them as suspended, not absent.') }}
                                </p>
                            @endif
                        </div>
                    @endif
                </div>

                {{-- Recovery --}}
                @if ($canManagePay)
                    <div class="sm:col-span-2 rounded-xl border border-slate-200 p-4">
                        <label class="flex items-center gap-2 text-sm font-semibold text-slate-800">
                            <input type="checkbox" wire:model.live="r_enabled" class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500" />
                            {{ __('Recover a cost from their pay') }}
                        </label>
                        <p class="mt-1 text-[11px] text-slate-400">{{ __('For money the company paid on their behalf, such as a hospital bill. Deducted on each payroll until it is back.') }}</p>
                        @if ($r_enabled)
                            <div class="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-3">
                                <div>
                                    <x-label for="r_amount" :value="__('Total to recover (:c)', ['c' => $baseCode])" />
                                    <x-input id="r_amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="r_amount" placeholder="350.00" />
                                    <x-input-error for="r_amount" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="r_instalment" :value="__('Deduct each month')" />
                                    <x-input id="r_instalment" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model.live.debounce.400ms="r_instalment" placeholder="50.00" />
                                    <x-input-error for="r_instalment" class="mt-2" />
                                </div>
                                <div>
                                    <x-label for="r_start" :value="__('First month')" />
                                    <x-input id="r_start" type="month" class="mt-1 block w-full" wire:model="r_start" />
                                    <x-input-error for="r_start" class="mt-2" />
                                </div>
                                <div class="sm:col-span-3">
                                    <x-label for="r_reason" :value="__('What it is for (shown on the payslip)')" />
                                    <x-input id="r_reason" type="text" class="mt-1 block w-full" wire:model="r_reason" placeholder="{{ __('Hospital bill') }}" />
                                    <x-input-error for="r_reason" class="mt-2" />
                                </div>
                                @if ((float) $r_amount > 0 && (float) $r_instalment > 0)
                                    <p class="sm:col-span-3 rounded-lg bg-slate-50 px-3 py-2 text-xs text-slate-600">
                                        {{ trans_choice('{1}Paid back in :n month.|[2,*]Paid back in :n months.', (int) ceil((float) $r_amount / (float) $r_instalment), ['n' => (int) ceil((float) $r_amount / (float) $r_instalment)]) }}
                                        {{ __('Taken in full each month, like a loan instalment, but never below zero pay.') }}
                                    </p>
                                @endif
                            </div>
                        @endif
                    </div>
                @endif
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showCaseModal', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="saveCase" wire:loading.attr="disabled" wire:target="saveCase">
                <span wire:loading.remove wire:target="saveCase">{{ $editingId ? __('Save changes') : __('Record incident') }}</span>
                <span wire:loading wire:target="saveCase">{{ __('Saving…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- ================================================= DOCUMENT MODAL --}}
    <x-dialog-modal wire:model.live="showDocModal" maxWidth="2xl">
        <x-slot name="title">{{ __('File a letter or report') }}</x-slot>
        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <x-label for="cd_type" :value="__('Type')" />
                    <select id="cd_type" wire:model="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 ($docTypes as $key => $label)
                            <option value="{{ $key }}">{{ __($label) }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="d_type" class="mt-2" />
                </div>
                <div>
                    <x-label for="cd_issued_on" :value="__('Dated')" />
                    <x-input id="cd_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 class="sm:col-span-2">
                    <x-label for="cd_title" :value="__('Title')" />
                    <x-input id="cd_title" type="text" class="mt-1 block w-full" wire:model="d_title" placeholder="{{ __('Written warning, signed') }}" />
                    <x-input-error for="d_title" class="mt-2" />
                </div>
                <div class="sm:col-span-2">
                    <x-label for="cd_body" :value="__('Notes or the text of the letter (optional with a file)')" />
                    <textarea id="cd_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="cd_file" :value="__('File (PDF, photo or Word)')" />
                    <input id="cd_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>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showDocModal', 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">{{ __('File it') }}</span>
                <span wire:loading wire:target="saveDocument">{{ __('Saving…') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- ==================================================== CLOSE MODAL --}}
    <x-dialog-modal wire:model.live="showCloseModal" maxWidth="lg">
        <x-slot name="title">{{ __('Close the case') }}</x-slot>
        <x-slot name="content">
            <x-label for="outcome" :value="__('Outcome')" />
            <textarea id="outcome" rows="3" wire:model="outcome" placeholder="{{ __('Returned to work on 3 Nov after the suspension. Final warning stands for 12 months.') }}"
                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="outcome" class="mt-2" />
            <p class="mt-2 text-[11px] text-slate-400">{{ __('Closing does not stop a deduction still running.') }}</p>
        </x-slot>
        <x-slot name="footer">
            <x-secondary-button wire:click="$set('showCloseModal', false)">{{ __('Cancel') }}</x-secondary-button>
            <x-button class="ms-3" wire:click="closeCase">{{ __('Close case') }}</x-button>
        </x-slot>
    </x-dialog-modal>
</div>