@extends('layouts.staff')

@section('title', 'फील्ड एजेंट डैशबोर्ड | Staff Dashboard - Vishwas Bank')

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

    <!-- AGENT PROFILE & ATTENDANCE STRIP -->
    <div class="bg-gradient-to-r from-navy via-navy-light to-navy text-white rounded-3xl p-5 shadow-lg border border-gold/30">
        <div class="flex items-center justify-between mb-3">
            <div class="flex items-center gap-3">
                <div class="h-12 w-12 rounded-full bg-gold/20 border border-gold text-gold flex items-center justify-center font-bold text-lg">
                    {{ substr($staff->name, 0, 1) }}
                </div>
                <div>
                    <h2 class="font-bold text-base text-white">{{ $staff->name }}</h2>
                    <p class="text-[11px] text-gold font-mono">{{ $staff->member_id }} • {{ $staff->branch->name ?? 'शाखा' }}</p>
                </div>
            </div>
            
            <!-- ATTENDANCE BADGE / PUNCH IN -->
            <div>
                @if($attendanceToday)
                    <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-emerald-500/20 text-emerald-300 border border-emerald-400 flex items-center gap-1">
                        <i class="fa-solid fa-circle-check"></i> उपस्थित (Present)
                    </span>
                @else
                    <form action="{{ route('staff.attendance.store') }}" method="POST">
                        @csrf
                        <button type="submit" class="px-3 py-1 bg-gold hover:bg-gold-dark text-navy font-extrabold text-xs rounded-xl shadow transition">
                            <i class="fa-solid fa-fingerprint mr-1"></i> हाजिरी लगाएं
                        </button>
                    </form>
                @endif
            </div>
        </div>

        <!-- TODAY'S NUMBERS -->
        <div class="grid grid-cols-2 gap-3 pt-3 border-t border-white/10 text-center">
            <div class="bg-white/10 rounded-2xl p-3">
                <span class="text-[10px] uppercase text-gray-300 font-semibold block">आज का कुल कलेक्शन</span>
                <span class="text-xl font-extrabold text-gold">₹{{ number_format($todayCollected, 2) }}</span>
            </div>
            <div class="bg-white/10 rounded-2xl p-3">
                <span class="text-[10px] uppercase text-gray-300 font-semibold block">कलेक्शन रसीद संख्या</span>
                <span class="text-xl font-extrabold text-white">{{ $todayCount }} ग्राहक</span>
            </div>
        </div>
    </div>

    <!-- PRIMARY QUICK ACTION BUTTON -->
    <a href="{{ route('staff.collection') }}" class="block w-full py-4 bg-navy hover:bg-gold hover:text-navy text-white text-center font-extrabold text-base rounded-2xl shadow-xl transition border-2 border-gold flex items-center justify-center gap-2">
        <i class="fa-solid fa-plus-circle text-gold text-lg"></i>
        <span>डोरस्टेप कलेक्शन दर्ज करें (New Collection)</span>
    </a>

    <!-- ASSIGNED CUSTOMERS IN FIELD BEAT -->
    <div class="bg-white rounded-3xl p-5 border border-gray-200 shadow-sm">
        <div class="flex items-center justify-between mb-3 border-b pb-2">
            <h3 class="font-bold text-navy text-sm flex items-center gap-2">
                <i class="fa-solid fa-users text-gold"></i> असाइन किए गए ग्राहक (Beat Customers)
            </h3>
            <a href="{{ route('staff.customers') }}" class="text-[11px] font-bold text-navy hover:text-gold">
                सभी देखें <i class="fa-solid fa-arrow-right"></i>
            </a>
        </div>

        <div class="space-y-2.5">
            @forelse($assignedCustomers as $cust)
                <a href="{{ route('staff.collection', ['customer_id' => $cust->id]) }}" class="block p-3 rounded-2xl bg-gray-50 hover:bg-gold/10 border border-gray-100 transition">
                    <div class="flex items-center justify-between">
                        <div>
                            <span class="font-bold text-navy text-xs">{{ $cust->name }}</span>
                            <span class="block text-[10px] text-gray-400 font-mono">{{ $cust->member_id }} • {{ $cust->mobile }}</span>
                        </div>
                        <div class="text-right">
                            <span class="text-[11px] font-bold text-emerald-700 block">
                                बचत: ₹{{ number_format($cust->primaryAccount->balance ?? 0, 2) }}
                            </span>
                            @if($cust->loans->first() && $cust->loans->first()->pendingEmis->first())
                                <span class="text-[10px] text-red-600 font-bold block">
                                    ईएमआई: ₹{{ number_format($cust->loans->first()->pendingEmis->first()->total_emi, 2) }}
                                </span>
                            @endif
                        </div>
                    </div>
                </a>
            @empty
                <p class="text-xs text-gray-400 text-center py-4">कोई ग्राहक असाइन नहीं है।</p>
            @endforelse
        </div>
    </div>

    <!-- RECENT COLLECTIONS FEED -->
    <div class="bg-white rounded-3xl p-5 border border-gray-200 shadow-sm">
        <div class="flex items-center justify-between mb-3 border-b pb-2">
            <h3 class="font-bold text-navy text-sm flex items-center gap-2">
                <i class="fa-solid fa-clock-rotate-left text-gold"></i> आज की हालिया रसीदें
            </h3>
            <a href="{{ route('staff.history') }}" class="text-[11px] font-bold text-navy hover:text-gold">
                इतिहास
            </a>
        </div>

        <div class="space-y-2">
            @forelse($recentCollections as $rc)
                <div class="p-3 rounded-2xl bg-gray-50 border border-gray-100 flex items-center justify-between text-xs">
                    <div>
                        <span class="font-mono font-bold text-navy text-[11px]">{{ $rc->receipt_no }}</span>
                        <p class="text-gray-700 font-semibold">{{ $rc->customerUser->name ?? 'ग्राहक' }}</p>
                        <span class="text-[10px] text-gray-400">{{ ucfirst(str_replace('_', ' ', $rc->collection_type)) }}</span>
                    </div>
                    <div class="text-right">
                        <span class="font-extrabold text-emerald-600 text-sm">₹{{ number_format($rc->amount, 2) }}</span>
                        <a href="{{ route('staff.receipt', $rc->id) }}" class="block text-[10px] text-gold font-bold hover:underline mt-0.5">
                            रसीद देखें <i class="fa-solid fa-receipt"></i>
                        </a>
                    </div>
                </div>
            @empty
                <p class="text-xs text-gray-400 text-center py-4">आज अभी कोई कलेक्शन दर्ज नहीं हुआ।</p>
            @endforelse
        </div>
    </div>
</div>
@endsection