@extends('layouts.staff')

@section('title', 'कलेक्शन इतिहास | Collection History - Vishwas Bank Staff')

@section('content')
<div class="space-y-4">

    <!-- PAGE HEADER -->
    <div class="bg-white rounded-3xl p-5 border border-gray-200 shadow-sm flex items-center justify-between">
        <div>
            <h1 class="font-bold text-navy text-base">कलेक्शन इतिहास (Collection Log)</h1>
            <p class="text-[11px] text-gray-500">एजेंट: {{ $staff->name }} ({{ $staff->member_id }})</p>
        </div>
        <span class="text-xs font-extrabold text-navy font-mono bg-gold/20 px-2.5 py-1 rounded-full">
            {{ $collections->total() }} रसीदें
        </span>
    </div>

    <!-- COLLECTIONS LIST -->
    <div class="space-y-2.5">
        @forelse($collections as $col)
            <div class="bg-white rounded-3xl p-4 border border-gray-200 shadow-sm hover:border-gold transition flex items-center justify-between text-xs">
                <div>
                    <div class="flex items-center gap-2 mb-1">
                        <span class="font-mono font-bold text-navy text-xs">{{ $col->receipt_no }}</span>
                        <span class="px-2 py-0.2 rounded text-[9px] font-bold uppercase bg-emerald-100 text-emerald-800">
                            {{ $col->status }}
                        </span>
                    </div>
                    <p class="font-bold text-gray-900">{{ $col->customerUser->name ?? 'ग्राहक' }}</p>
                    <p class="text-gray-400 text-[10px]">{{ \Carbon\Carbon::parse($col->collected_date)->format('d M, Y') }} • {{ ucfirst(str_replace('_', ' ', $col->collection_type)) }}</p>
                </div>

                <div class="text-right">
                    <span class="text-base font-extrabold text-navy">₹{{ number_format($col->amount, 2) }}</span>
                    <a href="{{ route('staff.receipt', $col->id) }}" class="block text-[11px] text-gold font-bold hover:underline mt-1">
                        रसीद <i class="fa-solid fa-arrow-right text-[9px]"></i>
                    </a>
                </div>
            </div>
        @empty
            <div class="bg-white rounded-3xl p-8 border border-gray-200 text-center text-gray-400 text-xs">
                कोई कलेक्शन इतिहास नहीं मिला।
            </div>
        @endforelse
    </div>

    <div class="mt-4">
        {{ $collections->links() }}
    </div>
</div>
@endsection