@extends('layouts.app')
@section('title', 'Payments | Full Time Staff')
@section('content')
@include('hr.partials.ft-staff-tabs', ['active' => 'payments'])

<div class="bg-white rounded-xl border overflow-hidden">
    <div class="px-5 py-3 border-b">
        <form method="GET" action="{{ route('payroll.payments') }}" class="flex flex-wrap items-center gap-2">
            <h4 class="text-sm font-bold text-gray-700 uppercase mr-auto">Payments</h4>
            <select name="status" class="form-input text-xs w-28">
                <option value="paid"    {{ $statusFilter==='paid'?'selected':'' }}>Paid</option>
                <option value="pending" {{ $statusFilter==='pending'?'selected':'' }}>Pending</option>
                <option value="all"     {{ $statusFilter==='all'?'selected':'' }}>All</option>
            </select>
            <select name="month" class="form-input text-xs w-36">
                <option value="">All months</option>
                @foreach($availableMonths as $m)
                    <option value="{{ $m }}" {{ $monthFilter===$m?'selected':'' }}>{{ \Carbon\Carbon::parse($m.'-01')->format('M Y') }}</option>
                @endforeach
            </select>
            <input type="text" name="search" value="{{ $search }}" placeholder="Search staff name or #"
                   class="form-input text-xs" style="min-width:200px">
            <button class="btn-primary text-xs">Filter</button>
            @if($search || $monthFilter || $statusFilter !== 'paid')
                <a href="{{ route('payroll.payments') }}" class="btn-secondary text-xs">Reset</a>
            @endif
        </form>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-xs">
            <thead class="bg-gray-50 text-gray-600 uppercase">
                <tr>
                    <th class="px-4 py-2.5 text-left font-semibold">Employee #</th>
                    <th class="px-4 py-2.5 text-left font-semibold">Staff Name</th>
                    <th class="px-4 py-2.5 text-left font-semibold">Department</th>
                    <th class="px-4 py-2.5 text-left font-semibold">Month</th>
                    <th class="px-4 py-2.5 text-right font-semibold">Net Pay (KES)</th>
                    <th class="px-4 py-2.5 text-left font-semibold">Payment Date</th>
                    <th class="px-4 py-2.5 text-left font-semibold">Reference</th>
                    <th class="px-4 py-2.5 text-left font-semibold">Status</th>
                    <th class="px-4 py-2.5 text-right font-semibold">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($items as $it)
                <tr class="border-t border-gray-50 hover:bg-blue-50/30">
                    <td class="px-4 py-2.5 font-mono">{{ $it->staff->employee_number ?? '—' }}</td>
                    <td class="px-4 py-2.5 font-semibold text-gray-700">{{ $it->staff->full_name ?? '—' }}</td>
                    <td class="px-4 py-2.5">{{ $it->staff->department->name ?? '—' }}</td>
                    <td class="px-4 py-2.5">{{ $it->run ? \Carbon\Carbon::parse($it->run->payroll_month.'-01')->format('M Y') : '—' }}</td>
                    <td class="px-4 py-2.5 text-right font-mono font-semibold">{{ number_format($it->net_pay, 0) }}</td>
                    <td class="px-4 py-2.5">{{ $it->payment_date ? \Carbon\Carbon::parse($it->payment_date)->format('d M Y') : '—' }}</td>
                    <td class="px-4 py-2.5 font-mono">{{ $it->payment_reference ?? '—' }}</td>
                    <td class="px-4 py-2.5">
                        @if($it->payment_status === 'paid')
                            <span class="badge badge-success">Paid</span>
                        @elseif($it->payment_status === 'pending')
                            <span class="badge badge-warning">Pending</span>
                        @else
                            <span class="badge badge-gray">{{ ucfirst($it->payment_status) }}</span>
                        @endif
                    </td>
                    <td class="px-4 py-2.5 text-right">
                        @if(Route::has('payroll.payslip'))
                            <a href="{{ route('payroll.payslip', $it->id) }}" class="text-xs text-cr-600 bg-cr-50 px-2 py-1 rounded hover:bg-cr-100">View Payslip</a>
                        @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="9" class="px-4 py-10 text-center text-gray-400">No payments found for these filters.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($items->hasPages())<div class="px-4 py-3 border-t bg-gray-50">{{ $items->links() }}</div>@endif
</div>
@endsection