@php
    $salary = $salary ?? ['configured' => false];
    $current = $salary['current'] ?? null;
    $onPayroll = (bool) ($employee->include_in_payroll ?? false);
    $canViewAmount = (bool) ($salary['can_view'] ?? false);
    $basicAmount = $current ? number_format((float) $current->basic_salary, 2) : null;
@endphp

@if (! ($salary['configured'] ?? false))
    <div class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-500">
        Salary master tables are not available in this environment.
    </div>
@elseif (! ($salary['can_view'] ?? false))
    <div class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-500">
        You do not have permission to view salary master data.
    </div>
@else
    <div class="rounded-xl border border-slate-200 bg-white overflow-hidden">
        <div class="flex flex-wrap items-center justify-between gap-2 border-b border-slate-100 px-4 py-3">
            <h3 class="text-sm font-semibold text-slate-800">Salary master</h3>
            @if ($onPayroll && $current)
                <span class="inline-flex rounded-full border border-emerald-200 bg-emerald-50 px-2 py-0.5 text-xs font-semibold uppercase tracking-wide text-emerald-800">On payroll</span>
            @elseif ($onPayroll)
                <span class="inline-flex rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-xs font-semibold uppercase tracking-wide text-amber-800">Included · no salary</span>
            @else
                <span class="inline-flex rounded-full border border-slate-200 bg-slate-50 px-2 py-0.5 text-xs font-semibold uppercase tracking-wide text-slate-600">Not on payroll</span>
            @endif
        </div>

        <dl class="grid grid-cols-2 gap-x-4 gap-y-3 p-4 text-sm">
            <div>
                <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">Basic pay</dt>
                <dd class="mt-0.5 font-medium tabular-nums text-slate-800" x-data="{ reveal: false }">
                    @if ($basicAmount && $canViewAmount)
                        <span class="inline-flex items-center gap-2">
                            <span x-show="!reveal">••••••</span>
                            <span x-show="reveal" x-cloak>KES {{ $basicAmount }}</span>
                            <button
                                type="button"
                                class="inline-flex h-7 w-7 items-center justify-center rounded-md border border-slate-200 text-slate-500 hover:bg-slate-50"
                                @click="reveal = !reveal"
                                :aria-label="reveal ? 'Hide basic pay' : 'Show basic pay'"
                                :title="reveal ? 'Hide basic pay' : 'Show basic pay'"
                            >
                                <svg x-show="!reveal" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.964-7.178z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                </svg>
                                <svg x-show="reveal" x-cloak class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
                                </svg>
                            </button>
                        </span>
                    @else
                        —
                    @endif
                </dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">Active since</dt>
                <dd class="mt-0.5 text-slate-700">{{ $current?->effective_from?->format('M j, Y') ?? '—' }}</dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">Status</dt>
                <dd class="mt-0.5 capitalize text-slate-700">{{ $current?->status ?? 'none' }}</dd>
            </div>
            <div>
                <dt class="text-xs font-semibold uppercase tracking-wide text-slate-500">History count</dt>
                <dd class="mt-0.5 font-medium tabular-nums text-slate-800">{{ (int) ($salary['history_count'] ?? 0) }}</dd>
            </div>
        </dl>

        <div class="grid grid-cols-1 gap-3 border-t border-slate-100 px-4 py-3 sm:grid-cols-2">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Active allowances</p>
                <div class="mt-1 space-y-0.5 text-sm text-slate-700">
                    @forelse ($current?->allowances_json ?? [] as $item)
                        <div class="tabular-nums">{{ $item['label'] ?? $item['code'] ?? 'Allowance' }} · KES {{ number_format((float) ($item['amount'] ?? 0), 2) }}</div>
                    @empty
                        <span class="text-slate-500">None</span>
                    @endforelse
                </div>
            </div>
            <div>
                <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Recurring deductions</p>
                <div class="mt-1 space-y-0.5 text-sm text-slate-700">
                    @forelse ($current?->other_deductions_json ?? [] as $item)
                        <div class="tabular-nums">{{ $item['label'] ?? $item['code'] ?? 'Deduction' }} · KES {{ number_format((float) ($item['amount'] ?? 0), 2) }}</div>
                    @empty
                        <span class="text-slate-500">None</span>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="border-t border-slate-100 px-4 py-3">
            <a href="{{ route('loan.employees.edit', $employee) }}" class="text-xs font-semibold text-teal-700 hover:underline">Edit payroll on the employee record</a>
        </div>
    </div>
@endif