@extends('layouts.app')
@section('title', 'Staff Profile — ' . $staff->full_name)
@section('content')

<div class="mb-4 flex items-start justify-between flex-wrap gap-3">
    <div>
        <div class="text-xs text-gray-400 mb-1">
            <a href="{{ route('hr.index', ['panel' => 'staff']) }}" class="text-purple-700 hover:underline">Staff Register</a>
            <span class="text-gray-300 mx-1">/</span>
            {{ $staff->full_name }}
        </div>
        <h2 class="text-lg font-bold text-gray-700">{{ $staff->full_name }}</h2>
        <p class="text-xs text-gray-500">
            {{ $staff->employee_number }} ·
            {{ $staff->designation ?? 'No designation' }} ·
            {{ $staff->department->name ?? 'No department' }}
        </p>
    </div>
    <div class="flex items-center gap-2">
        @php
            $statusBadge = match($staff->status) {
                'active'     => 'badge-success',
                'on_leave'   => 'badge-warning',
                'suspended'  => 'badge-warning',
                'inactive'   => 'badge-gray',
                'terminated' => 'badge-danger',
                default      => 'badge-gray',
            };
        @endphp
        <span class="badge {{ $statusBadge }}">{{ ucfirst(str_replace('_', ' ', $staff->status)) }}</span>
        <a href="{{ route('hr.staff.edit', $staff->id) }}" class="btn-primary text-xs">Edit</a>
        @if($staff->status === 'active')
            {{-- Demote-to-locum is rare, so we keep it as a small
                 secondary action in the header. Clicking opens a
                 modal that collects the locum-specific bits the
                 staff record doesn't have (rate, payment mode). --}}
            <button type="button"
                    onclick="document.getElementById('demoteToLocumModal').classList.remove('hidden')"
                    class="btn-secondary text-xs flex items-center gap-1"
                    title="Convert this staff member to a locum">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 17l-4 4m0 0l-4-4m4 4V3"/></svg>
                Demote to Locum
            </button>
        @endif
    </div>
</div>

@if(session('success'))
<div class="mb-4 bg-green-50 border border-green-200 text-green-700 rounded-lg px-4 py-3 text-xs">
    {{ session('success') }}
</div>
@endif
@if(session('error'))
<div class="mb-4 bg-red-50 border border-red-200 text-red-700 rounded-lg px-4 py-3 text-xs">
    {{ session('error') }}
</div>
@endif

{{-- ─── Demote to Locum modal ──────────────────────────────────────
     Triggered by the "Demote to Locum" button in the header.
     Hidden by default — only the small header button is visible
     until the admin chooses to demote.

     The original StaffRecord stays in the database
     (status=converted) so payroll, leave, and roster history
     aren't orphaned. A fresh Locum row is created against the
     same User row. The admin supplies rate / payment info
     because staff salary (monthly) and locum rate (per-shift or %)
     are structurally different — we cannot infer one from the other. --}}
@if($staff->status === 'active')
<div id="demoteToLocumModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/40">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl mx-4 p-6 max-h-[90vh] overflow-y-auto">
        <div class="flex justify-between items-start mb-4">
            <div>
                <h3 class="font-bold text-base">Demote to Locum</h3>
                <p class="text-xs text-gray-500 mt-0.5">
                    Move {{ $staff->first_name }} from permanent staff to a locum or volunteer record.
                    The current staff record stays in the database (marked converted) so payroll history is preserved.
                </p>
            </div>
            <button type="button"
                    onclick="document.getElementById('demoteToLocumModal').classList.add('hidden')"
                    class="text-gray-400 hover:text-gray-600 text-xl leading-none">&times;</button>
        </div>
        <form method="POST" action="{{ route('people.demote-staff', $staff->id) }}"
              onsubmit="return confirm('Demote {{ $staff->full_name }} to locum? The staff record will be marked converted but retained for audit. This action can be reversed from the new locum profile.');">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <div class="md:col-span-2">
                    <label class="form-label">Worker Type</label>
                    <select name="worker_type" class="form-input" id="demote-worker-type" onchange="toggleDemoteFields(this.value)">
                        <option value="locum">Locum (paid per shift / %)</option>
                        <option value="volunteer">Volunteer (unpaid)</option>
                    </select>
                </div>
                <div id="demote-rate-fields-1">
                    <label class="form-label">Rate Type <span class="text-red-500">*</span></label>
                    <select name="rate_type" class="form-input">
                        <option value="per_shift">Rate per Shift (Daily Rate)</option>
                        <option value="percentage">Percentage of Procedure</option>
                    </select>
                </div>
                <div id="demote-rate-fields-2">
                    <label class="form-label">Default Rate <span class="text-red-500">*</span></label>
                    <input type="number" step="0.01" name="default_rate" class="form-input" value="3000">
                    <p class="text-[11px] text-gray-500 mt-1">KES per shift, or % of procedure</p>
                </div>
                <div id="demote-payment-mode-wrap">
                    <label class="form-label">Payment Mode</label>
                    <select name="payment_mode" class="form-input" onchange="toggleDemotePaymentMode(this.value)" id="demote-payment-mode">
                        <option value="mpesa">M-Pesa</option>
                        <option value="bank">Bank Transfer</option>
                    </select>
                </div>
                <div id="demote-mpesa-field">
                    <label class="form-label">M-Pesa Number</label>
                    <input type="text" name="mpesa_no" class="form-input" value="{{ $staff->mobile_payment_number }}">
                </div>
                <div id="demote-bank-fields" class="grid grid-cols-2 gap-3 md:col-span-2" style="display:none">
                    <div>
                        <label class="form-label">Bank Name</label>
                        <input type="text" name="bank_name" class="form-input" value="{{ $staff->bank_name }}">
                    </div>
                    <div>
                        <label class="form-label">Bank Account</label>
                        <input type="text" name="bank_account" class="form-input" value="{{ $staff->bank_account }}">
                    </div>
                </div>
            </div>
            <div class="flex justify-end gap-2 mt-5 pt-4 border-t">
                <button type="button"
                        onclick="document.getElementById('demoteToLocumModal').classList.add('hidden')"
                        class="btn-secondary text-xs">Cancel</button>
                <button type="submit" class="btn-warning text-xs">Demote to Locum</button>
            </div>
        </form>
    </div>
</div>
<script>
function toggleDemoteFields(workerType) {
    // Volunteers don't have a rate — hide all the paid fields.
    const isVolunteer = workerType === 'volunteer';
    ['demote-rate-fields-1', 'demote-rate-fields-2', 'demote-payment-mode-wrap',
     'demote-mpesa-field', 'demote-bank-fields'].forEach(id => {
        const el = document.getElementById(id);
        if (el) el.style.display = isVolunteer ? 'none' : '';
    });
    // If switching back to locum, re-apply the payment-mode visibility.
    if (!isVolunteer) {
        const pm = document.getElementById('demote-payment-mode');
        if (pm) toggleDemotePaymentMode(pm.value);
    }
}
function toggleDemotePaymentMode(mode) {
    document.getElementById('demote-mpesa-field').style.display = mode === 'mpesa' ? '' : 'none';
    document.getElementById('demote-bank-fields').style.display = mode === 'bank'  ? '' : 'none';
}
// ESC closes the demote modal — matches the rest of the system's modal UX.
document.addEventListener('keydown', function(e){
    if (e.key === 'Escape') {
        document.getElementById('demoteToLocumModal')?.classList.add('hidden');
    }
});
</script>
@endif

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">

    {{-- Personal --}}
    <div class="bg-white rounded-xl border p-5">
        <h3 class="text-sm font-bold text-gray-700 uppercase mb-3 pb-2 border-b">Personal Details</h3>
        <dl class="text-xs space-y-2">
            <div class="flex justify-between"><dt class="text-gray-500">Full Name</dt><dd class="font-medium text-gray-700">{{ $staff->full_name }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">ID Number</dt><dd class="font-mono">{{ $staff->id_number ?? '—' }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Phone</dt><dd>{{ $staff->phone ?? '—' }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Email</dt><dd>{{ $staff->email ?? '—' }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Gender</dt><dd>{{ $staff->gender ? ucfirst($staff->gender) : '—' }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Date of Birth</dt><dd>{{ optional($staff->date_of_birth)->format('d M Y') ?? '—' }}</dd></div>
        </dl>
    </div>

    {{-- Employment --}}
    <div class="bg-white rounded-xl border p-5">
        <h3 class="text-sm font-bold text-gray-700 uppercase mb-3 pb-2 border-b">Employment</h3>
        <dl class="text-xs space-y-2">
            <div class="flex justify-between"><dt class="text-gray-500">Employee #</dt><dd class="font-mono">{{ $staff->employee_number }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Department</dt><dd>{{ $staff->department->name ?? '—' }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Designation</dt><dd>{{ $staff->designation ?? '—' }}</dd></div>
            @if($staff->license_no)
            <div class="flex justify-between"><dt class="text-gray-500">License #</dt><dd class="font-mono">{{ $staff->license_no }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">License Expiry</dt>
                <dd class="{{ $staff->is_license_expired ? 'text-red-600 font-bold' : ($staff->is_license_expiring_soon ? 'text-amber-600 font-semibold' : '') }}">
                    {{ optional($staff->license_expiry)->format('d M Y') ?? '—' }}
                </dd>
            </div>
            @endif
            <div class="flex justify-between"><dt class="text-gray-500">Employment Type</dt><dd>{{ $staff->employment_type ? ucfirst(str_replace('_', ' ', $staff->employment_type)) : '—' }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Contract Type</dt><dd>{{ $staff->contract_type ? ucfirst($staff->contract_type) : '—' }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Employment Date</dt><dd>{{ optional($staff->employment_date)->format('d M Y') ?? '—' }}</dd></div>
            @if($staff->end_date)
            <div class="flex justify-between"><dt class="text-gray-500">End Date</dt><dd>{{ $staff->end_date->format('d M Y') }}</dd></div>
            @endif
        </dl>
    </div>

    {{-- Compensation --}}
    <div class="bg-white rounded-xl border p-5">
        <div class="flex items-start justify-between mb-3 pb-2 border-b">
            <h3 class="text-sm font-bold text-gray-700 uppercase">Compensation</h3>
            @if(Route::has('payroll.staff.profile'))
            <a href="{{ route('payroll.staff.profile', $staff->id) }}" class="text-xs text-purple-700 hover:underline">Payroll Profile →</a>
            @endif
        </div>
        <dl class="text-xs space-y-2">
            <div class="flex justify-between"><dt class="text-gray-500">Basic Salary</dt><dd class="font-mono">KES {{ number_format($staff->salary ?? 0, 2) }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Taxable Allowances</dt><dd class="font-mono">KES {{ number_format($staff->taxable_allowances ?? 0, 2) }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Non-taxable Allowances</dt><dd class="font-mono">KES {{ number_format($staff->non_taxable_allowances ?? 0, 2) }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Benefits in Kind</dt><dd class="font-mono">KES {{ number_format($staff->benefits_in_kind ?? 0, 2) }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Pension</dt><dd class="font-mono">KES {{ number_format($staff->pension_contribution ?? 0, 2) }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Insurance Relief</dt><dd class="font-mono">KES {{ number_format($staff->insurance_relief ?? 0, 2) }}</dd></div>
            <div class="flex justify-between font-semibold pt-2 border-t mt-2">
                <dt>Gross (basic + allowances)</dt>
                <dd class="font-mono">KES {{ number_format(($staff->salary ?? 0) + ($staff->taxable_allowances ?? 0) + ($staff->non_taxable_allowances ?? 0), 2) }}</dd>
            </div>
        </dl>
    </div>

    {{-- Statutory + Payment --}}
    <div class="bg-white rounded-xl border p-5">
        <h3 class="text-sm font-bold text-gray-700 uppercase mb-3 pb-2 border-b">Statutory &amp; Payment</h3>
        <dl class="text-xs space-y-2">
            <div class="flex justify-between"><dt class="text-gray-500">KRA PIN</dt><dd class="font-mono">{{ $staff->kra_pin ?? '—' }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">NSSF Number</dt><dd class="font-mono">{{ $staff->nssf_number ?? '—' }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">SHA Number</dt><dd class="font-mono">{{ $staff->sha_number ?? '—' }}</dd></div>
            <div class="flex justify-between pt-2 border-t mt-2"><dt class="text-gray-500">Payment Method</dt><dd>{{ $staff->payment_method ? ucfirst($staff->payment_method) : '—' }}</dd></div>
            @if($staff->payment_method === 'bank' || $staff->bank_account)
            <div class="flex justify-between"><dt class="text-gray-500">Bank</dt><dd>{{ $staff->bank_name ?? '—' }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Account</dt><dd class="font-mono">{{ $staff->bank_account ?? '—' }}</dd></div>
            @endif
            @if($staff->payment_method === 'mpesa' || $staff->mobile_payment_number)
            <div class="flex justify-between"><dt class="text-gray-500">M-Pesa</dt><dd class="font-mono">{{ $staff->mobile_payment_number ?? '—' }}</dd></div>
            @endif
        </dl>
    </div>

    {{-- ═════ Payroll Snapshot ═════════════════════════════════════════════
         Live calculation from PayrollCalculator. Read-only here — to edit
         the underlying figures (basic salary, allowances, etc.) use the
         "Payroll Profile →" link inside the Compensation card above.
         Spans both columns so the breakdown tables read cleanly.
    ═════════════════════════════════════════════════════════════════════ --}}
    @php
        $hrEarnings = [
            'basic_salary'           => (float) ($staff->salary ?? 0),
            'taxable_allowances'     => (float) ($staff->taxable_allowances ?? 0),
            'non_taxable_allowances' => (float) ($staff->non_taxable_allowances ?? 0),
            'overtime'               => 0, 'bonus' => 0,
            'benefits_in_kind'       => (float) ($staff->benefits_in_kind ?? 0),
            'pension_contribution'   => (float) ($staff->pension_contribution ?? 0),
            'insurance_relief'       => (float) ($staff->insurance_relief ?? 0),
            'other_deductions'       => 0,
        ];
        $hrPreview = null;
        try { $hrPreview = \App\Services\PayrollCalculator::calculate($hrEarnings); } catch (\Throwable $e) { $hrPreview = null; }
        if ($hrPreview) {
            $hrKraTotal   = $hrPreview['paye'] + $hrPreview['ahl_employee'] + $hrPreview['ahl_employer'];
            $hrShaTotal   = $hrPreview['shif'];
            $hrNssfTotal  = $hrPreview['nssf_employee'] + $hrPreview['nssf_employer'];
            $hrTotalRemit = $hrKraTotal + $hrShaTotal + $hrNssfTotal;
        }
    @endphp

    @if($hrPreview && ($staff->salary ?? 0) > 0)
    <div class="md:col-span-2 grid grid-cols-1 lg:grid-cols-2 gap-4">

        {{-- Net Pay (Take-home) --}}
        <div class="bg-white rounded-xl border overflow-hidden">
            <div class="px-4 py-3 border-b" style="background:#ECFDF5">
                <h4 class="text-xs font-bold uppercase" style="color:#065F46">Net Pay (Take-home)</h4>
                <p class="text-xs" style="color:#047857">What hits the staff member's account</p>
            </div>
            <div class="px-4 py-4 text-center">
                <p class="text-xs text-gray-500 uppercase tracking-wide">KES</p>
                <p class="text-3xl font-bold" style="color:#065F46; line-height:1.1">{{ number_format($hrPreview['net_pay'], 2) }}</p>
                <p class="text-xs text-gray-500 mt-1">Gross {{ number_format($hrPreview['gross_pay']) }} − Deductions {{ number_format($hrPreview['total_deductions']) }}</p>
            </div>
        </div>

        {{-- Total Cost to Hospital --}}
        <div class="bg-white rounded-xl border overflow-hidden">
            <div class="px-4 py-3 border-b" style="background:#F5F3FF">
                <h4 class="text-xs font-bold uppercase" style="color:#5B21B6">Total Cost to Hospital</h4>
                <p class="text-xs text-gray-500">Gross + employer-side contributions</p>
            </div>
            <table class="w-full text-xs">
                <tr><td class="px-4 py-1.5 text-gray-600">Gross Pay</td><td class="px-4 py-1.5 text-right">{{ number_format($hrPreview['gross_pay'], 2) }}</td></tr>
                <tr><td class="px-4 py-1.5 text-gray-600">+ NSSF (employer)</td><td class="px-4 py-1.5 text-right">{{ number_format($hrPreview['nssf_employer'], 2) }}</td></tr>
                <tr><td class="px-4 py-1.5 text-gray-600">+ Housing Levy (employer)</td><td class="px-4 py-1.5 text-right">{{ number_format($hrPreview['ahl_employer'], 2) }}</td></tr>
                <tr style="background:#EDE9FE"><td class="px-4 py-2 font-bold" style="color:#5B21B6">Total Employer Cost</td><td class="px-4 py-2 text-right font-bold" style="color:#5B21B6">{{ number_format($hrPreview['employer_cost'], 2) }}</td></tr>
            </table>
        </div>

        {{-- Monthly Remittances — by authority --}}
        <div class="bg-white rounded-xl border overflow-hidden lg:col-span-2">
            <div class="px-4 py-3 border-b bg-purple-50">
                <h4 class="text-xs font-bold uppercase" style="color:#5c1269">Monthly Remittances</h4>
                <p class="text-xs text-gray-500">Grouped by who you pay · {{ now()->format('M Y') }} rates</p>
            </div>
            <table class="w-full text-xs">
                <tr style="background:#FEF2F2"><td class="px-4 py-1.5 font-bold uppercase" style="color:#991B1B; font-size:11px" colspan="2">KRA (iTax)</td></tr>
                <tr><td class="px-4 py-1.5 pl-6 text-gray-600">PAYE</td><td class="px-4 py-1.5 text-right">{{ number_format($hrPreview['paye'], 2) }}</td></tr>
                <tr><td class="px-4 py-1.5 pl-6 text-gray-600">Housing Levy (employee)</td><td class="px-4 py-1.5 text-right">{{ number_format($hrPreview['ahl_employee'], 2) }}</td></tr>
                <tr><td class="px-4 py-1.5 pl-6 text-gray-600">Housing Levy (employer)</td><td class="px-4 py-1.5 text-right">{{ number_format($hrPreview['ahl_employer'], 2) }}</td></tr>
                <tr style="background:#FEE2E2"><td class="px-4 py-1.5 pl-6 font-semibold" style="color:#991B1B">Subtotal to KRA</td><td class="px-4 py-1.5 text-right font-semibold" style="color:#991B1B">{{ number_format($hrKraTotal, 2) }}</td></tr>

                <tr style="background:#EFF6FF"><td class="px-4 py-1.5 font-bold uppercase" style="color:#1E40AF; font-size:11px" colspan="2">SHA (Social Health Authority)</td></tr>
                <tr><td class="px-4 py-1.5 pl-6 text-gray-600">SHIF (employee)</td><td class="px-4 py-1.5 text-right">{{ number_format($hrPreview['shif'], 2) }}</td></tr>
                <tr style="background:#DBEAFE"><td class="px-4 py-1.5 pl-6 font-semibold" style="color:#1E40AF">Subtotal to SHA</td><td class="px-4 py-1.5 text-right font-semibold" style="color:#1E40AF">{{ number_format($hrShaTotal, 2) }}</td></tr>

                <tr style="background:#FFFBEB"><td class="px-4 py-1.5 font-bold uppercase" style="color:#92400E; font-size:11px" colspan="2">NSSF</td></tr>
                <tr><td class="px-4 py-1.5 pl-6 text-gray-600">NSSF (employee)</td><td class="px-4 py-1.5 text-right">{{ number_format($hrPreview['nssf_employee'], 2) }}</td></tr>
                <tr><td class="px-4 py-1.5 pl-6 text-gray-600">NSSF (employer)</td><td class="px-4 py-1.5 text-right">{{ number_format($hrPreview['nssf_employer'], 2) }}</td></tr>
                <tr style="background:#FEF3C7"><td class="px-4 py-1.5 pl-6 font-semibold" style="color:#92400E">Subtotal to NSSF</td><td class="px-4 py-1.5 text-right font-semibold" style="color:#92400E">{{ number_format($hrNssfTotal, 2) }}</td></tr>

                <tr style="background:#5c1269"><td class="px-4 py-2 font-bold uppercase" style="color:#fff; font-size:11px">Total Monthly Remittance</td><td class="px-4 py-2 text-right font-bold" style="color:#fff">{{ number_format($hrTotalRemit, 2) }}</td></tr>
            </table>
        </div>

        {{-- PAYE Workings — collapsible --}}
        <details class="bg-white rounded-xl border overflow-hidden lg:col-span-2">
            <summary class="px-4 py-3 border-b cursor-pointer hover:bg-gray-50" style="list-style:none">
                <div class="flex items-center justify-between">
                    <h4 class="text-xs font-bold text-gray-600 uppercase">PAYE Workings</h4>
                    <span class="text-xs text-gray-400">click to expand ▾</span>
                </div>
            </summary>
            <table class="w-full text-xs">
                <tr><td class="px-4 py-1.5 text-gray-500">Gross Pay (cash + BIK)</td><td class="px-4 py-1.5 text-right">{{ number_format($hrPreview['gross_pay'], 2) }}</td></tr>
                <tr><td class="px-4 py-1.5 pl-6 text-gray-500 italic">− Pension contribution (allowed)</td><td class="px-4 py-1.5 text-right text-gray-500">({{ number_format($hrPreview['pension_contribution'], 2) }})</td></tr>
                <tr><td class="px-4 py-1.5 pl-6 text-gray-500 italic">− NSSF (employee)</td><td class="px-4 py-1.5 text-right text-gray-500">({{ number_format($hrPreview['nssf_employee'], 2) }})</td></tr>
                <tr><td class="px-4 py-1.5 pl-6 text-gray-500 italic">− SHIF</td><td class="px-4 py-1.5 text-right text-gray-500">({{ number_format($hrPreview['shif'], 2) }})</td></tr>
                <tr><td class="px-4 py-1.5 pl-6 text-gray-500 italic">− Housing Levy (employee)</td><td class="px-4 py-1.5 text-right text-gray-500">({{ number_format($hrPreview['ahl_employee'], 2) }})</td></tr>
                <tr style="background:#F9FAFB"><td class="px-4 py-1.5 font-semibold">= Taxable Pay</td><td class="px-4 py-1.5 text-right font-semibold">{{ number_format($hrPreview['taxable_pay'], 2) }}</td></tr>
                <tr><td class="px-4 py-1.5 text-gray-500">PAYE before relief</td><td class="px-4 py-1.5 text-right">{{ number_format($hrPreview['paye_before_relief'], 2) }}</td></tr>
                <tr><td class="px-4 py-1.5 pl-6 text-gray-500 italic">− Personal relief</td><td class="px-4 py-1.5 text-right text-gray-500">({{ number_format($hrPreview['personal_relief'], 2) }})</td></tr>
                @if(($hrPreview['insurance_relief'] ?? 0) > 0)
                <tr><td class="px-4 py-1.5 pl-6 text-gray-500 italic">− Insurance relief</td><td class="px-4 py-1.5 text-right text-gray-500">({{ number_format($hrPreview['insurance_relief'], 2) }})</td></tr>
                @endif
                <tr style="background:#FEE2E2"><td class="px-4 py-2 font-bold" style="color:#991B1B">= PAYE Payable</td><td class="px-4 py-2 text-right font-bold" style="color:#991B1B">{{ number_format($hrPreview['paye'], 2) }}</td></tr>
            </table>
        </details>

    </div>
    @elseif(($staff->salary ?? 0) <= 0)
    <div class="md:col-span-2 bg-amber-50 border border-amber-200 rounded-xl p-4 text-xs text-amber-800">
        <strong>No payroll snapshot yet.</strong> Set a basic salary on the
        <a href="{{ route('payroll.staff.profile', $staff->id) }}" class="underline font-semibold">Payroll Profile</a>
        to see this staff member's net pay and statutory remittance breakdown here.
    </div>
    @endif

    {{-- Emergency Contact --}}
    @if($staff->emergency_contact_name || $staff->emergency_contact_phone)
    <div class="bg-white rounded-xl border p-5">
        <h3 class="text-sm font-bold text-gray-700 uppercase mb-3 pb-2 border-b">Emergency Contact</h3>
        <dl class="text-xs space-y-2">
            <div class="flex justify-between"><dt class="text-gray-500">Name</dt><dd>{{ $staff->emergency_contact_name ?? '—' }}</dd></div>
            <div class="flex justify-between"><dt class="text-gray-500">Phone</dt><dd>{{ $staff->emergency_contact_phone ?? '—' }}</dd></div>
        </dl>
    </div>
    @endif

    {{-- Notes --}}
    @if($staff->notes)
    <div class="bg-white rounded-xl border p-5 md:col-span-2">
        <h3 class="text-sm font-bold text-gray-700 uppercase mb-3 pb-2 border-b">Notes</h3>
        <p class="text-xs text-gray-700 whitespace-pre-wrap">{{ $staff->notes }}</p>
    </div>
    @endif
</div>

@endsection