@extends('layouts.app')

@section('title', 'Payroll Detail - ' . ($employeePayroll->user?->name ?? 'Employee'))
@section('heading', 'Payroll Detail')

@section('content')
<div class="max-w-4xl space-y-6">
    @php
        $cycle = $employeePayroll->payrollCycle;
        $earnings = $employeePayroll->components->where('category', 'earning');
        $deductions = $employeePayroll->components->where('category', 'deduction');
        $employerContributions = $employeePayroll->components->where('category', 'employer_contribution');
        $totalEarnings = $earnings->sum('amount');
        $totalDeductions = abs($deductions->sum('amount'));
    @endphp
    <x-card>
        <div class="mb-6 flex flex-wrap items-center justify-between gap-4">
            <div>
                <h2 class="text-lg font-semibold text-slate-900">{{ $employeePayroll->user?->name ?? 'Employee' }}</h2>
                <p class="text-sm text-slate-500">{{ date('F', mktime(0, 0, 0, $cycle->month, 1)) }} {{ $cycle->year }} — {{ $cycle->status }}</p>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                <a href="{{ route('payroll.index', ['tab' => 'run', 'year' => (int) $cycle->year, 'month' => (int) $cycle->month]) }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Back to Run</a>
                <a href="{{ route('payroll.cycles.payslips.show', [$cycle, $employeePayroll]) }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Payslip</a>
                <a href="{{ route('payroll.cycles.payslips.download', [$cycle, $employeePayroll]) }}" class="rounded-lg bg-primary px-4 py-2 text-sm font-medium text-white hover:opacity-90" target="_blank">Download PDF</a>
            </div>
        </div>

        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-6">
            <div><p class="text-xs text-slate-500">Working days</p><p class="font-medium">{{ $employeePayroll->working_days }}</p></div>
            <div><p class="text-xs text-slate-500">Paid days</p><p class="font-medium">{{ $employeePayroll->paid_days }}</p></div>
            <div><p class="text-xs text-slate-500">LOP days</p><p class="font-medium">{{ $employeePayroll->lop_days }}</p></div>
            <div><p class="text-xs text-slate-500">LOP amount</p><p class="font-medium">{{ number_format($employeePayroll->lop_amount ?? 0, 2) }}</p></div>
        </div>

        <h3 class="text-sm font-semibold uppercase text-slate-600 mb-2">Earnings</h3>
        <table class="min-w-full divide-y divide-slate-200 mb-6">
            <tbody class="divide-y divide-slate-200">
                @foreach($earnings as $c)
                    <tr><td class="px-4 py-2 text-sm text-slate-700">{{ $c->name }}</td><td class="px-4 py-2 text-right text-sm text-slate-900">{{ number_format($c->amount, 2) }}</td></tr>
                @endforeach
                <tr class="font-medium"><td class="px-4 py-2 text-slate-700">Total Earnings</td><td class="px-4 py-2 text-right text-slate-900">{{ number_format($totalEarnings, 2) }}</td></tr>
            </tbody>
        </table>

        <h3 class="text-sm font-semibold uppercase text-slate-600 mb-2">Deductions</h3>
        <table class="min-w-full divide-y divide-slate-200 mb-6">
            <tbody class="divide-y divide-slate-200">
                @foreach($deductions as $c)
                    <tr><td class="px-4 py-2 text-sm text-slate-700">{{ $c->name }}</td><td class="px-4 py-2 text-right text-sm text-slate-900">{{ number_format(abs($c->amount), 2) }}</td></tr>
                @endforeach
                <tr class="font-medium"><td class="px-4 py-2 text-slate-700">Total Deductions</td><td class="px-4 py-2 text-right text-slate-900">{{ number_format($totalDeductions, 2) }}</td></tr>
            </tbody>
        </table>

        @if($employerContributions->isNotEmpty())
            <h3 class="text-sm font-semibold uppercase text-slate-600 mb-2">Employer contributions (info only)</h3>
            <table class="min-w-full divide-y divide-slate-200 mb-6">
                <tbody class="divide-y divide-slate-200">
                    @foreach($employerContributions as $c)
                        <tr><td class="px-4 py-2 text-sm text-slate-700">{{ $c->name }}</td><td class="px-4 py-2 text-right text-sm text-slate-900">{{ number_format($c->amount, 2) }}</td></tr>
                    @endforeach
                </tbody>
            </table>
        @endif

        <div class="border-t border-slate-200 pt-4">
            <p class="text-right text-lg font-semibold text-slate-900">Net Salary: {{ number_format($employeePayroll->net_monthly ?? 0, 2) }}</p>
        </div>
    </x-card>

    @if($employeePayroll->payrollCycle->runLogs->isNotEmpty())
        <x-card>
            <h3 class="text-sm font-semibold uppercase text-slate-600 mb-3">Audit log (cycle)</h3>
            <ul class="space-y-2 text-sm">
                @foreach($employeePayroll->payrollCycle->runLogs->take(10) as $log)
                    <li class="flex flex-wrap gap-2 text-slate-600">
                        <span class="font-medium text-slate-800">{{ $log->action }}</span>
                        <span>{{ $log->created_at?->format('Y-m-d H:i') }}</span>
                        @if($log->actor)<span>{{ $log->actor->name }}</span>@endif
                    </li>
                @endforeach
            </ul>
        </x-card>
    @endif
</div>
@endsection