@extends('layouts.app')
@section('title', 'Payslip — ' . $item->full_name . ' — ' . ($item->run->month_label ?? ''))
@section('styles')
<style>
@media print { .no-print { display: none !important; } body { background: #fff !important; } .payslip-card { box-shadow: none !important; border: 1px solid #ccc !important; } }
.payslip-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;max-width:800px;margin:0 auto;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.ps-header{background:linear-gradient(135deg,#3b1054,#5c1269);color:#fff;padding:24px;border-radius:12px 12px 0 0}
.ps-section{padding:18px 24px;border-bottom:1px solid #f3f4f6}
.ps-section:last-child{border-bottom:none}
.ps-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px}
.ps-row.total{border-top:1px solid #e5e7eb;margin-top:6px;padding-top:8px;font-weight:700}
.ps-row.grand{background:#dcfce7;color:#166534;padding:10px 12px;border-radius:8px;margin-top:8px;font-size:15px;font-weight:800}
</style>
@endsection
@section('content')

<div class="no-print mb-4 flex gap-2">
    <a href="{{ route('payroll.run.show', $item->run->id) }}" class="text-xs text-gray-500 hover:underline">← Back to Run</a>
    <span class="ml-auto"></span>
    <button onclick="window.print()" class="btn-primary text-xs">🖨 Print / Save PDF</button>
</div>

<div class="payslip-card">
    <div class="ps-header flex justify-between items-start">
        <div>
            <p class="text-xs uppercase tracking-wider opacity-80">Clara Rosa Hospital</p>
            <h1 class="text-2xl font-bold mt-1">PAYSLIP</h1>
            <p class="text-xs opacity-90 mt-1">{{ $item->run->month_label ?? '' }}</p>
        </div>
        <div class="text-right">
            <p class="text-xs opacity-80">Run No.</p>
            <p class="text-lg font-bold">{{ $item->run->run_number }}</p>
        </div>
    </div>

    {{-- Employee --}}
    <div class="ps-section">
        <h3 class="text-xs uppercase font-bold text-gray-500 mb-2">Employee Details</h3>
        <div class="grid grid-cols-2 gap-x-6 gap-y-1 text-xs">
            <div class="flex justify-between"><span class="text-gray-500">Name</span><span class="font-medium">{{ $item->full_name }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Employee No.</span><span class="font-medium">{{ $item->employee_number }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Department</span><span>{{ $item->department ?? '-' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Designation</span><span>{{ $item->designation ?? '-' }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">KRA PIN</span><span>{{ $item->kra_pin }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">SHIF</span><span>{{ $item->sha_number }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">NSSF</span><span>{{ $item->nssf_number }}</span></div>
            <div class="flex justify-between"><span class="text-gray-500">Period</span><span>{{ $item->run->period_from?->format('d M') }} – {{ $item->run->period_to?->format('d M Y') }}</span></div>
        </div>
    </div>

    {{-- Earnings --}}
    <div class="ps-section">
        <h3 class="text-xs uppercase font-bold text-gray-500 mb-2">Earnings (KES)</h3>
        <div class="ps-row"><span>Basic Salary</span><span>{{ number_format($item->basic_salary, 2) }}</span></div>
        @if($item->taxable_allowances > 0)<div class="ps-row"><span>Taxable Allowances</span><span>{{ number_format($item->taxable_allowances, 2) }}</span></div>@endif
        @if($item->non_taxable_allowances > 0)<div class="ps-row"><span>Non-Taxable Allowances</span><span>{{ number_format($item->non_taxable_allowances, 2) }}</span></div>@endif
        @if($item->overtime > 0)<div class="ps-row"><span>Overtime</span><span>{{ number_format($item->overtime, 2) }}</span></div>@endif
        @if($item->bonus > 0)<div class="ps-row"><span>Bonus</span><span>{{ number_format($item->bonus, 2) }}</span></div>@endif
        @if($item->benefits_in_kind > 0)<div class="ps-row"><span>Benefits in Kind</span><span>{{ number_format($item->benefits_in_kind, 2) }}</span></div>@endif
        <div class="ps-row total"><span>Gross Pay</span><span>{{ number_format($item->gross_pay, 2) }}</span></div>
    </div>

    {{-- Statutory Deductions --}}
    <div class="ps-section">
        <h3 class="text-xs uppercase font-bold text-gray-500 mb-2">Statutory Deductions (KES)</h3>
        <div class="ps-row"><span>PAYE <span class="text-gray-400 text-xs">(after KES {{ number_format($item->personal_relief) }} relief)</span></span><span>{{ number_format($item->paye, 2) }}</span></div>
        <div class="ps-row"><span>SHIF (2.75%)</span><span>{{ number_format($item->shif, 2) }}</span></div>
        <div class="ps-row"><span>NSSF (Employee 6%)</span><span>{{ number_format($item->nssf_employee, 2) }}</span></div>
        <div class="ps-row"><span>Affordable Housing Levy (1.5%)</span><span>{{ number_format($item->ahl_employee, 2) }}</span></div>
    </div>

    {{-- Other Deductions --}}
    @if($item->deductions->count() > 0 || $item->pension_contribution > 0)
    <div class="ps-section">
        <h3 class="text-xs uppercase font-bold text-gray-500 mb-2">Other Deductions (KES)</h3>
        @if($item->pension_contribution > 0)<div class="ps-row"><span>Pension Contribution</span><span>{{ number_format($item->pension_contribution, 2) }}</span></div>@endif
        @foreach($item->deductions as $d)
            <div class="ps-row"><span>{{ $d->label }}</span><span>{{ number_format($d->amount, 2) }}</span></div>
        @endforeach
    </div>
    @endif

    {{-- Net Pay --}}
    <div class="ps-section">
        <div class="ps-row"><span class="text-gray-500">Total Deductions</span><span class="font-semibold">{{ number_format($item->total_deductions, 2) }}</span></div>
        <div class="ps-row grand"><span>NET PAY</span><span>KES {{ number_format($item->net_pay, 2) }}</span></div>
    </div>

    {{-- Employer Contributions (informational) --}}
    <div class="ps-section bg-gray-50">
        <h3 class="text-xs uppercase font-bold text-gray-500 mb-2">Employer Contributions (Not Deducted from Employee)</h3>
        <div class="ps-row"><span class="text-gray-600">NSSF Employer (6%)</span><span>{{ number_format($item->nssf_employer, 2) }}</span></div>
        <div class="ps-row"><span class="text-gray-600">AHL Employer (1.5%)</span><span>{{ number_format($item->ahl_employer, 2) }}</span></div>
        <div class="ps-row total"><span>Total Employer Cost</span><span>{{ number_format($item->employer_cost, 2) }}</span></div>
    </div>

    {{-- Payment Info --}}
    <div class="ps-section">
        <div class="grid grid-cols-2 gap-x-6 gap-y-1 text-xs">
            <div class="flex justify-between"><span class="text-gray-500">Payment Method</span><span class="font-medium uppercase">{{ $item->payment_method ?? 'BANK' }}</span></div>
            @if($item->payment_method === 'mobile')
            <div class="flex justify-between"><span class="text-gray-500">M-Pesa</span><span>{{ $item->mobile_payment_number }}</span></div>
            @else
            <div class="flex justify-between"><span class="text-gray-500">Bank</span><span>{{ $item->bank_name }} · {{ $item->bank_account }}</span></div>
            @endif
            <div class="flex justify-between"><span class="text-gray-500">Status</span><span class="font-medium">{{ ucfirst($item->payment_status) }}</span></div>
            @if($item->payment_date)<div class="flex justify-between"><span class="text-gray-500">Paid On</span><span>{{ $item->payment_date->format('d M Y') }}</span></div>@endif
        </div>
    </div>

    {{-- Signatures --}}
    <div class="ps-section">
        <div class="grid grid-cols-2 gap-6 mt-4 text-xs">
            <div>
                <p class="text-gray-500">Prepared By</p>
                <p class="font-medium border-b border-gray-400 pb-3 mt-2">{{ $item->run->preparedBy->name ?? '_____________________' }}</p>
                <p class="text-gray-400 mt-1">{{ $item->run->created_at->format('d M Y H:i') }}</p>
            </div>
            <div>
                <p class="text-gray-500">Approved By</p>
                <p class="font-medium border-b border-gray-400 pb-3 mt-2">{{ $item->run->approvedBy->name ?? '_____________________' }}</p>
                <p class="text-gray-400 mt-1">{{ $item->run->approved_at?->format('d M Y H:i') ?? 'Pending' }}</p>
            </div>
        </div>
    </div>

    <div class="px-6 py-3 text-center text-xs text-gray-400 border-t">
        This is a system-generated payslip — Clara Rosa Hospital Payroll System
    </div>
</div>

@endsection