@extends('layouts.app')

@section('title', 'Payslips')
@section('heading', 'Payslips')

@section('content')
    <x-card>
        <form method="GET" class="mb-4 flex flex-wrap items-end gap-2">
            <div>
                <label class="block text-xs font-medium text-slate-500">Year</label>
                <input type="number" name="year" value="{{ request('year', date('Y')) }}" min="2020" max="2030" class="mt-1 w-24 rounded-lg border border-slate-300 px-3 py-1.5 text-sm">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500">Month</label>
                <select name="month" class="mt-1 rounded-lg border border-slate-300 px-3 py-1.5 text-sm">
                    <option value="">All</option>
                    @foreach(range(1, 12) as $m)<option value="{{ $m }}" {{ request('month') !== null && (int) request('month') === $m ? 'selected' : '' }}>{{ date('F', mktime(0, 0, 0, $m, 1)) }}</option>@endforeach
                </select>
            </div>
            <button type="submit" class="rounded-lg bg-slate-200 px-3 py-1.5 text-sm font-medium text-slate-700 hover:bg-slate-300">Filter</button>
        </form>
        <x-table>
            <x-slot name="head">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Employee</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Period</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Net Salary</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Status</th>
                    <th class="px-4 py-3 text-left text-xs font-medium uppercase text-slate-500">Actions</th>
                </tr>
            </x-slot>
            @forelse($payrolls as $p)
                <tr>
                    <td class="whitespace-nowrap px-4 py-3">
                        <div class="flex items-center gap-3">
                            @if($p->user)
                                <x-user-avatar :user="$p->user" size="sm" class="shrink-0" />
                            @endif
                            <span class="text-slate-900">{{ $p->user?->name ?? '—' }}</span>
                        </div>
                    </td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ $p->year }}-{{ str_pad($p->month, 2, '0', STR_PAD_LEFT) }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm text-slate-600">{{ number_format($p->net_salary ?? 0, 2) }}</td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm"><x-badge :variant="$p->status === 'paid' ? 'success' : 'default'">{{ $p->status ?? 'draft' }}</x-badge></td>
                    <td class="whitespace-nowrap px-4 py-3 text-sm">
                        <a href="{{ route('payroll.payslips.show', $p) }}" class="text-indigo-600 hover:underline">View</a>
                        @if(class_exists(\Barryvdh\DomPDF\Facade\Pdf::class))
                            <span class="mx-1">|</span>
                            <a href="{{ route('payroll.payslips.download', $p) }}" class="text-indigo-600 hover:underline" target="_blank">Download PDF</a>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="5" class="px-4 py-8 text-center text-sm text-slate-500">No payslips. Generate payroll first.</td></tr>
            @endforelse
        </x-table>
        @if($payrolls->hasPages())<div class="mt-4">{{ $payrolls->links() }}</div>@endif
    </x-card>
@endsection