@extends('layouts.app')

@section('title', 'Payslips')

@section('content')
    <div class="flex flex-col gap-6">
        <div class="flex items-end justify-between gap-3">
            <div>
                <h1 class="text-lg font-semibold">Payslips</h1>
                <p class="text-xs text-muted-foreground">Browse, print and export employee payslips</p>
            </div>
            @if ($run)
                <a href="{{ route('payroll.payslips.csv', $run) }}"
                   class="rounded-lg border border-border bg-card px-3 py-2 text-sm font-medium hover:bg-accent">Export CSV</a>
            @endif
        </div>

        @include('partials.flashes')

        <form method="get" action="{{ route('payroll.payslips') }}"
              class="flex flex-wrap items-end gap-3 rounded-xl border border-border bg-card p-3">
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Month</label>
                <select name="month" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    <option value="">All months</option>
                    @foreach ($months as $m)
                        <option value="{{ $m }}" @selected($month === $m)>{{ $m }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Year</label>
                <select name="year" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    <option value="">All years</option>
                    @foreach ($years as $y)
                        <option value="{{ $y }}" @selected($year === $y)>{{ $y }}</option>
                    @endforeach
                </select>
            </div>
            <div class="flex flex-col gap-1.5">
                <label class="text-xs text-muted-foreground">Run</label>
                <select name="run" class="h-9 rounded-lg border border-input bg-transparent px-3 text-sm outline-none focus-visible:border-ring">
                    @foreach ($runs as $r)
                        <option value="{{ $r->id }}" @selected($run && $run->id === $r->id)>{{ $r->periodLabel() }}</option>
                    @endforeach
                </select>
            </div>
            <button class="h-9 rounded-lg bg-primary px-3 text-sm font-medium text-primary-foreground hover:bg-primary/90">Filter</button>
        </form>

        @if ($run)
            <div class="flex flex-wrap items-center justify-between gap-2 rounded-xl border border-border bg-card p-3">
                <p class="text-sm text-muted-foreground">
                    {{ $run->periodLabel() }} · @include('payroll.partials.status-badge', ['status' => $run->status])
                </p>
                <p class="text-xs text-muted-foreground">
                    Generated by {{ $run->generated_by }} on {{ $run->generated_at?->toDateString() }}
                </p>
            </div>

            <div class="grid gap-3 sm:grid-cols-4">
                <div class="rounded-xl border border-border bg-card p-4">
                    <span class="text-xs font-medium text-muted-foreground">Employees</span>
                    <span class="mt-1 block text-2xl font-semibold tabular-nums">{{ $rows->count() }}</span>
                </div>
                <div class="rounded-xl border border-border bg-card p-4">
                    <span class="text-xs font-medium text-muted-foreground">Total Gross</span>
                    <span class="mt-1 block text-2xl font-semibold tabular-nums text-emerald-600">
                        {{ number_format($rows->sum(fn ($r) => $r['comp']['grossPay']), 2) }}
                    </span>
                </div>
                <div class="rounded-xl border border-border bg-card p-4">
                    <span class="text-xs font-medium text-muted-foreground">Total Deductions</span>
                    <span class="mt-1 block text-2xl font-semibold tabular-nums text-rose-600">
                        {{ number_format($rows->sum(fn ($r) => $r['comp']['totalDeductions']), 2) }}
                    </span>
                </div>
                <div class="rounded-xl border border-border bg-card p-4">
                    <span class="text-xs font-medium text-muted-foreground">Total Net</span>
                    <span class="mt-1 block text-2xl font-semibold tabular-nums">
                        {{ number_format($rows->sum(fn ($r) => $r['comp']['netPay']), 2) }}
                    </span>
                </div>
            </div>
        @endif

        <div class="rounded-xl border border-border bg-card">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b text-left text-xs uppercase text-muted-foreground">
                            <th class="px-3 py-2 font-medium">Payslip No</th>
                            <th class="px-3 py-2 font-medium">Employee</th>
                            <th class="px-3 py-2 font-medium">Period</th>
                            <th class="px-3 py-2 text-right font-medium">Gross</th>
                            <th class="px-3 py-2 text-right font-medium">PAYE</th>
                            <th class="px-3 py-2 text-right font-medium">Net</th>
                            <th class="px-3 py-2 font-medium">Status</th>
                            <th class="px-3 py-2 text-right font-medium">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($rows as $row)
                            <tr class="border-b last:border-0">
                                <td class="px-3 py-2 font-medium tabular-nums">{{ $row['payslipNo'] }}</td>
                                <td class="px-3 py-2">
                                    <span class="font-medium">{{ $row['staff']->full_name }}</span>
                                    <span class="block text-xs text-muted-foreground">{{ $row['staff']->staff_no }} · {{ $row['staff']->role }}</span>
                                </td>
                                <td class="px-3 py-2 text-xs">{{ $run->periodLabel() }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ number_format($row['comp']['grossPay'], 2) }}</td>
                                <td class="px-3 py-2 text-right tabular-nums">{{ number_format($row['comp']['paye'], 2) }}</td>
                                <td class="px-3 py-2 text-right font-medium tabular-nums">{{ number_format($row['comp']['netPay'], 2) }}</td>
                                <td class="px-3 py-2">@include('payroll.partials.status-badge', ['status' => $run->status])</td>
                                <td class="px-3 py-2">
                                    <div class="flex items-center justify-end gap-1">
                                        <a href="{{ route('payroll.payslips.show', [$run, $row['staff']->id]) }}"
                                           class="rounded-md border border-border px-2 py-1 text-xs hover:bg-accent">View Payslip</a>
                                        <form method="post" action="{{ route('payroll.runs.destroy', $run) }}"
                                              onsubmit="return confirm('Delete the whole {{ $run->periodLabel() }} payroll run and its payslips?')">
                                            @csrf @method('DELETE')
                                            <button class="rounded-md border border-rose-300 px-2 py-1 text-xs text-rose-700 hover:bg-rose-50">Delete Run</button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="8" class="px-3 py-10 text-center text-sm text-muted-foreground">No payslips for this selection.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection