@php
    $intel = $periodCostIntelligence ?? null;
    $money = fn ($value) => 'KES '.number_format((float) $value, 2);
@endphp

@if (is_array($intel) && ($intel['has_lines'] ?? false))
    @php
        $employee = $intel['employee'];
        $employer = $intel['employer'];
        $remit = $intel['remittance'];
        $recoveries = $intel['recoveries'];
        $payees = $intel['payees'];
    @endphp

    <div class="mb-6 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">NSSF</p>
            <p class="mt-0.5 text-[11px] text-slate-500">{{ $payees['NSSF']['payee'] ?? 'NSSF' }}</p>
            <p class="mt-2 text-lg font-bold tabular-nums text-slate-800">{{ $money($remit['nssf']) }}</p>
            <dl class="mt-2 space-y-0.5 text-[11px] text-slate-600">
                <div class="flex justify-between gap-2"><dt>Employee deducted</dt><dd class="tabular-nums font-medium">{{ $money($employee['nssf']) }}</dd></div>
                <div class="flex justify-between gap-2"><dt>Company contribution</dt><dd class="tabular-nums font-medium">{{ $money($employer['nssf']) }}</dd></div>
            </dl>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">SHIF</p>
            <p class="mt-0.5 text-[11px] text-slate-500">{{ $payees['SHIF']['payee'] ?? 'SHIF' }}</p>
            <p class="mt-2 text-lg font-bold tabular-nums text-slate-800">{{ $money($remit['shif']) }}</p>
            <dl class="mt-2 space-y-0.5 text-[11px] text-slate-600">
                <div class="flex justify-between gap-2"><dt>Employee deducted</dt><dd class="tabular-nums font-medium">{{ $money($employee['shif']) }}</dd></div>
                <div class="flex justify-between gap-2"><dt>Company contribution</dt><dd class="tabular-nums font-medium">{{ $money($employer['shif']) }}</dd></div>
            </dl>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Housing levy</p>
            <p class="mt-0.5 text-[11px] text-slate-500">{{ $payees['HOUSING_LEVY']['payee'] ?? 'Affordable Housing Levy' }}</p>
            <p class="mt-2 text-lg font-bold tabular-nums text-slate-800">{{ $money($remit['housing']) }}</p>
            <dl class="mt-2 space-y-0.5 text-[11px] text-slate-600">
                <div class="flex justify-between gap-2"><dt>Employee deducted</dt><dd class="tabular-nums font-medium">{{ $money($employee['housing']) }}</dd></div>
                <div class="flex justify-between gap-2"><dt>Company contribution</dt><dd class="tabular-nums font-medium">{{ $money($employer['housing']) }}</dd></div>
            </dl>
        </div>
        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">PAYE</p>
            <p class="mt-0.5 text-[11px] text-slate-500">{{ $payees['PAYE']['payee'] ?? 'KRA' }}</p>
            <p class="mt-2 text-lg font-bold tabular-nums text-slate-800">{{ $money($remit['paye']) }}</p>
            <dl class="mt-2 space-y-0.5 text-[11px] text-slate-600">
                <div class="flex justify-between gap-2"><dt>Employee deducted</dt><dd class="tabular-nums font-medium">{{ $money($employee['paye']) }}</dd></div>
                <div class="flex justify-between gap-2"><dt>Company contribution</dt><dd class="tabular-nums font-medium">KES 0.00</dd></div>
            </dl>
        </div>
    </div>

    <div class="mb-6 grid gap-3 sm:grid-cols-3">
        <div class="rounded-xl border border-slate-200 bg-white p-4">
            <p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Recoveries</p>
            <p class="mt-1 text-xl font-bold tabular-nums text-slate-800">{{ $money($recoveries['total']) }}</p>
            <dl class="mt-2 space-y-0.5 text-[11px] text-slate-600">
                <div class="flex justify-between gap-2"><dt>Staff loan</dt><dd class="tabular-nums font-medium">{{ $money($recoveries['staff_loan']) }}</dd></div>
                <div class="flex justify-between gap-2"><dt>Salary advance</dt><dd class="tabular-nums font-medium">{{ $money($recoveries['salary_advance']) }}</dd></div>
                @if ((float) $recoveries['unpaid_leave'] > 0)
                    <div class="flex justify-between gap-2"><dt>Unpaid leave</dt><dd class="tabular-nums font-medium">{{ $money($recoveries['unpaid_leave']) }}</dd></div>
                @endif
            </dl>
        </div>
        <div class="rounded-xl border border-indigo-100 bg-indigo-50/60 p-4">
            <p class="text-xs font-semibold uppercase tracking-wide text-indigo-700">Company statutory cost</p>
            <p class="mt-1 text-xl font-bold tabular-nums text-indigo-950">{{ $money($employer['total']) }}</p>
            <p class="mt-2 text-[11px] leading-relaxed text-indigo-800">
                Extra the organisation remits besides employee deductions: matching NSSF and Housing Levy.
                SHIF and PAYE are employee-only.
            </p>
        </div>
        <div class="rounded-xl border border-teal-100 bg-teal-50/70 p-4">
            <p class="text-xs font-semibold uppercase tracking-wide text-teal-800">Remitted to statutory bodies</p>
            <p class="mt-1 text-xl font-bold tabular-nums text-teal-950">{{ $money($remit['total']) }}</p>
            <p class="mt-2 text-[11px] leading-relaxed text-teal-800">
                Employee statutory {{ $money($employee['statutory_total']) }}
                + company contribution {{ $money($employer['total']) }}.
            </p>
        </div>
    </div>
@endif