@extends('layouts.app')
@section('title', 'Payroll Profile — ' . $staff->full_name)
@section('content')
@include('hr.partials.ft-staff-tabs', ['active' => 'payroll-profile'])

<div class="mb-3">
    <a href="{{ route('hr.payroll-profile') }}" class="text-xs text-gray-500 hover:underline">← Back to Payroll Profile list</a>
</div>

@if(!empty($validationErrors))
<div class="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
    <p class="text-xs font-semibold text-red-700 mb-1">⚠ This staff cannot be paid yet — fix the following:</p>
    <ul class="list-disc list-inside text-xs text-red-700 space-y-0.5">
        @foreach($validationErrors as $e)<li>{{ $e }}</li>@endforeach
    </ul>
</div>
@endif

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    {{-- LEFT: form --}}
    <div class="lg:col-span-2 bg-white rounded-xl border p-5">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="text-base font-bold">{{ $staff->full_name }}</h3>
                <p class="text-xs text-gray-500">{{ $staff->employee_number }} · {{ $staff->department->name ?? '' }} · {{ $staff->designation ?? '' }}</p>
            </div>
            <span class="badge {{ $staff->status==='active' ? 'badge-success' : 'badge-gray' }}">{{ ucfirst($staff->status) }}</span>
        </div>

        <form method="POST" action="{{ route('payroll.staff.profile.update', $staff->id) }}">@csrf @method('PUT')

            {{-- Identity --}}
            <h4 class="text-xs font-bold text-gray-600 uppercase mb-2 mt-2">Identity & Department</h4>
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div>
                    <label class="form-label">Payroll Number</label>
                    <input type="text" name="payroll_number" class="form-input" value="{{ old('payroll_number', $staff->payroll_number) }}" placeholder="auto-generated if blank">
                </div>
                <div>
                    <label class="form-label">Designation / Job Title</label>
                    <input type="text" name="designation" class="form-input" value="{{ old('designation', $staff->designation) }}">
                </div>
                <div>
                    <label class="form-label">Department</label>
                    <select name="department_id" class="form-input">
                        <option value="">— Select —</option>
                        @include('partials._department-options', ['selected' => $staff->department_id])
                    </select>
                </div>
                <div>
                    <label class="form-label">Employment Type</label>
                    <select name="employment_type" class="form-input">
                        @foreach(['permanent', 'contract', 'fixed_term', 'probation'] as $t)
                        <option value="{{ $t }}" @if(($staff->employment_type ?? 'permanent')===$t) selected @endif>{{ ucfirst(str_replace('_',' ',$t)) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            {{-- Statutory IDs --}}
            <h4 class="text-xs font-bold text-gray-600 uppercase mb-2 mt-4">Statutory IDs</h4>
            <div class="grid grid-cols-3 gap-3 mb-4">
                <div>
                    <label class="form-label">KRA PIN *</label>
                    <input type="text" name="kra_pin" class="form-input" value="{{ old('kra_pin', $staff->kra_pin) }}" required>
                </div>
                <div>
                    <label class="form-label">SHIF / SHA Number *</label>
                    <input type="text" name="sha_number" class="form-input" value="{{ old('sha_number', $staff->sha_number ?? $staff->nhif_number) }}" required>
                </div>
                <div>
                    <label class="form-label">NSSF Number *</label>
                    <input type="text" name="nssf_number" class="form-input" value="{{ old('nssf_number', $staff->nssf_number) }}" required>
                </div>
            </div>

            {{-- Earnings --}}
            <h4 class="text-xs font-bold text-gray-600 uppercase mb-2 mt-4">Monthly Earnings (KES)</h4>
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div>
                    <label class="form-label">Basic Salary *</label>
                    <input type="number" step="0.01" min="0" name="salary" class="form-input" value="{{ old('salary', $staff->salary) }}" required>
                </div>
                <div>
                    <label class="form-label">Taxable Allowances</label>
                    <input type="number" step="0.01" min="0" name="taxable_allowances" class="form-input" value="{{ old('taxable_allowances', $staff->taxable_allowances ?? 0) }}">
                    <p class="text-xs text-gray-500 mt-1">House, transport, responsibility — taxed</p>
                </div>
                <div>
                    <label class="form-label">Non-Taxable Allowances</label>
                    <input type="number" step="0.01" min="0" name="non_taxable_allowances" class="form-input" value="{{ old('non_taxable_allowances', $staff->non_taxable_allowances ?? 0) }}">
                    <p class="text-xs text-gray-500 mt-1">Reimbursements, per diem</p>
                </div>
                <div>
                    <label class="form-label">Benefits in Kind</label>
                    <input type="number" step="0.01" min="0" name="benefits_in_kind" class="form-input" value="{{ old('benefits_in_kind', $staff->benefits_in_kind ?? 0) }}">
                    <p class="text-xs text-gray-500 mt-1">Housing, vehicle — taxed but not paid in cash</p>
                </div>
            </div>

            {{-- Reliefs --}}
            <h4 class="text-xs font-bold text-gray-600 uppercase mb-2 mt-4">Pension & Insurance Relief</h4>
            <div class="grid grid-cols-2 gap-3 mb-4">
                <div>
                    <label class="form-label">Pension / Retirement Contribution</label>
                    <input type="number" step="0.01" min="0" name="pension_contribution" class="form-input" value="{{ old('pension_contribution', $staff->pension_contribution ?? 0) }}">
                    <p class="text-xs text-gray-500 mt-1">Capped at KES 30,000 for tax purposes</p>
                </div>
                <div>
                    <label class="form-label">Insurance Relief Premium</label>
                    <input type="number" step="0.01" min="0" name="insurance_relief" class="form-input" value="{{ old('insurance_relief', $staff->insurance_relief ?? 0) }}">
                    <p class="text-xs text-gray-500 mt-1">Capped at KES 5,000 monthly relief</p>
                </div>
            </div>

            {{-- Payment --}}
            <h4 class="text-xs font-bold text-gray-600 uppercase mb-2 mt-4">Payment Method</h4>
            <div class="grid grid-cols-3 gap-3 mb-4">
                <div>
                    <label class="form-label">Method</label>
                    <select name="payment_method" class="form-input">
                        <option value="bank" @if(($staff->payment_method ?? 'bank')==='bank') selected @endif>Bank Transfer</option>
                        <option value="mobile" @if(($staff->payment_method ?? '')==='mobile') selected @endif>Mobile Money (M-Pesa)</option>
                    </select>
                </div>
                <div>
                    <label class="form-label">Bank Name</label>
                    <input type="text" name="bank_name" class="form-input" value="{{ old('bank_name', $staff->bank_name) }}">
                </div>
                <div>
                    <label class="form-label">Bank Account</label>
                    <input type="text" name="bank_account" class="form-input" value="{{ old('bank_account', $staff->bank_account) }}">
                </div>
                <div>
                    <label class="form-label">M-Pesa Phone</label>
                    <input type="text" name="mobile_payment_number" class="form-input" value="{{ old('mobile_payment_number', $staff->mobile_payment_number) }}" placeholder="2547XXXXXXXX">
                </div>
                <div>
                    <label class="form-label">Active Status</label>
                    <select name="status" class="form-input">
                        <option value="active" @if($staff->status==='active') selected @endif>Active</option>
                        <option value="inactive" @if($staff->status==='inactive') selected @endif>Inactive</option>
                    </select>
                </div>
            </div>

            <div class="flex justify-end gap-2 mt-6 border-t pt-4">
                <a href="{{ route('payroll.index', ['panel' => 'staff']) }}" class="btn-secondary">Cancel</a>
                <button type="submit" class="btn-primary">Save Profile</button>
            </div>
        </form>
    </div>

    {{-- RIGHT: live preview + history --}}
    <div class="space-y-4">
        @php
            $earnings = [
                'basic_salary'           => (float) $staff->salary,
                '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,
            ];
            try { $preview = \App\Services\PayrollCalculator::calculate($earnings); } catch (\Throwable $e) { $preview = null; }

            // Pre-compute remittance bucket totals so the table stays clean.
            if ($preview) {
                $kraTotal  = $preview['paye'] + $preview['ahl_employee'] + $preview['ahl_employer'];
                $shaTotal  = $preview['shif'];
                $nssfTotal = $preview['nssf_employee'] + $preview['nssf_employer'];
                $totalRemit = $kraTotal + $shaTotal + $nssfTotal;
            }
        @endphp
        @if($preview)

        {{-- ── 1. Take-home (Net Pay) — headline card ───────────────────── --}}
        <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($preview['net_pay'], 2) }}
                </p>
                <p class="text-xs text-gray-500 mt-1">
                    Gross {{ number_format($preview['gross_pay']) }} − Deductions {{ number_format($preview['total_deductions']) }}
                </p>
            </div>
        </div>

        {{-- ── 2. Monthly Remittances — grouped by authority ─────────────── --}}
        <div class="bg-white rounded-xl border overflow-hidden">
            <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">
                {{-- KRA (iTax) — PAYE + AHL --}}
                <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($preview['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($preview['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($preview['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($kraTotal, 2) }}</td></tr>

                {{-- SHA --}}
                <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($preview['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($shaTotal, 2) }}</td></tr>

                {{-- NSSF --}}
                <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($preview['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($preview['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($nssfTotal, 2) }}</td></tr>

                {{-- Total --}}
                <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($totalRemit, 2) }}</td></tr>
            </table>
        </div>

        {{-- ── 3. Employer Cost — full hospital cost of this employee ───── --}}
        <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($preview['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($preview['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($preview['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($preview['employer_cost'], 2) }}</td></tr>
            </table>
        </div>

        {{-- ── 4. PAYE Workings — collapsible details ──────────────────── --}}
        <details class="bg-white rounded-xl border overflow-hidden">
            <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($preview['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($preview['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($preview['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($preview['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($preview['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($preview['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($preview['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($preview['personal_relief'], 2) }})</td></tr>
                @if(($preview['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($preview['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($preview['paye'], 2) }}</td></tr>
            </table>
        </details>
        @endif

        {{-- ── 5. Recent Payslips (unchanged) ──────────────────────────── --}}
        <div class="bg-white rounded-xl border overflow-hidden">
            <div class="px-4 py-3 border-b"><h4 class="text-xs font-bold text-gray-600 uppercase">Recent Payslips</h4></div>
            @forelse($recentItems as $i)
            <a href="{{ route('payroll.payslip', $i->id) }}" target="_blank" class="block px-4 py-2 text-xs border-b border-gray-50 hover:bg-purple-50/30">
                <div class="flex justify-between">
                    <span>{{ $i->run->month_label ?? '-' }}</span>
                    <span class="font-semibold">KES {{ number_format($i->net_pay) }}</span>
                </div>
                <p class="text-gray-400">{{ $i->run->run_number ?? '' }}</p>
            </a>
            @empty
            <p class="px-4 py-6 text-center text-xs text-gray-400">No payslips yet</p>
            @endforelse
        </div>
    </div>
</div>

@endsection