@extends('layouts.staff')

@section('title', 'डोरस्टेप कलेक्शन दर्ज करें | Record Collection - 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">नया कलेक्शन दर्ज करें</h1>
            <p class="text-[11px] text-gray-500">दैनिक बचत, आरडी किश्त अथवा ऋण वसूली</p>
        </div>
        <a href="{{ route('staff.dashboard') }}" class="text-xs font-bold text-navy hover:text-gold">
            <i class="fa-solid fa-arrow-left"></i> वापस
        </a>
    </div>

    <!-- MAIN RECORDING FORM -->
    <div class="bg-white rounded-3xl p-5 sm:p-6 border border-gray-200 shadow-sm">
        <form action="{{ route('staff.collection.store') }}" method="POST" class="space-y-4">
            @csrf

            <!-- 1. SELECT CUSTOMER -->
            <div>
                <label class="block text-xs font-bold text-gray-700 uppercase mb-1">ग्राहक चुनें (Select Customer) *</label>
                <select name="customer_user_id" required class="w-full px-3.5 py-2.5 rounded-xl border border-gray-300 text-xs focus:border-gold bg-white"
                        onchange="if(this.value) { window.location.href = '{{ route('staff.collection') }}?customer_id=' + this.value; }">
                    <option value="">-- ग्राहक का नाम अथवा सदस्य आईडी चुनें --</option>
                    @foreach($customers as $c)
                        <option value="{{ $c->id }}" {{ ($selectedCustomer->id ?? null) == $c->id ? 'selected' : '' }}>
                            {{ $c->name }} ({{ $c->member_id }} - {{ $c->mobile }})
                        </option>
                    @endforeach
                </select>
                @error('customer_user_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <!-- 2. COLLECTION TYPE -->
            <div>
                <label class="block text-xs font-bold text-gray-700 uppercase mb-1">कलेक्शन का प्रकार *</label>
                <div class="grid grid-cols-3 gap-2">
                    <label class="p-2.5 border rounded-xl flex flex-col items-center justify-center cursor-pointer hover:bg-gray-50 text-center">
                        <input type="radio" name="collection_type" value="daily_savings" checked class="text-navy focus:ring-navy mb-1">
                        <span class="text-[11px] font-bold text-navy">दैनिक बचत</span>
                    </label>
                    <label class="p-2.5 border rounded-xl flex flex-col items-center justify-center cursor-pointer hover:bg-gray-50 text-center">
                        <input type="radio" name="collection_type" value="rd_installment" class="text-navy focus:ring-navy mb-1">
                        <span class="text-[11px] font-bold text-navy">आरडी किश्त</span>
                    </label>
                    <label class="p-2.5 border rounded-xl flex flex-col items-center justify-center cursor-pointer hover:bg-gray-50 text-center">
                        <input type="radio" name="collection_type" value="loan_emi" class="text-navy focus:ring-navy mb-1">
                        <span class="text-[11px] font-bold text-navy">ऋण ईएमआई</span>
                    </label>
                </div>
            </div>

            @if($selectedCustomer)
                <!-- ACCOUNT PICKER IF CUSTOMER SELECTED -->
                @if($selectedCustomer->accounts->count() > 0)
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1">जमा खाता (Customer Account)</label>
                        <select name="account_id" class="w-full px-3 py-2 rounded-xl border border-gray-300 text-xs focus:border-gold bg-white">
                            @foreach($selectedCustomer->accounts as $acc)
                                <option value="{{ $acc->id }}">
                                    {{ $acc->account_number }} ({{ ucfirst($acc->account_type) }}) - शेष: ₹{{ number_format($acc->balance, 2) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                @endif

                <!-- LOAN PICKER IF LOAN ACTIVE -->
                @if($selectedCustomer->loans->where('status', 'active')->count() > 0)
                    <div>
                        <label class="block text-xs font-bold text-gray-700 uppercase mb-1">संबद्ध ऋण खाता (Loan Account)</label>
                        <select name="loan_id" class="w-full px-3 py-2 rounded-xl border border-gray-300 text-xs focus:border-gold bg-white">
                            @foreach($selectedCustomer->loans->where('status', 'active') as $ln)
                                <option value="{{ $ln->id }}">
                                    {{ $ln->loan_account_number }} - किश्त: ₹{{ number_format($ln->emi_amount, 2) }} (बकाया: ₹{{ number_format($ln->remaining_balance, 2) }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                @endif
            @endif

            <!-- 3. AMOUNT -->
            <div>
                <label class="block text-xs font-bold text-gray-700 uppercase mb-1">प्राप्त नकद / राशि (Amount ₹) *</label>
                <div class="relative">
                    <span class="absolute left-3.5 top-2.5 text-gray-400 font-bold">₹</span>
                    <input type="number" step="1" min="50" name="amount" required value="{{ old('amount', 500) }}"
                           class="w-full pl-8 pr-4 py-2.5 rounded-xl border border-gray-300 text-base font-extrabold text-navy focus:border-gold">
                </div>
                <span class="text-[10px] text-gray-400 mt-1 block">न्यूनतम संग्रह: ₹50</span>
            </div>

            <!-- 4. PAYMENT MODE -->
            <div>
                <label class="block text-xs font-bold text-gray-700 uppercase mb-1">भुगतान का माध्यम *</label>
                <div class="grid grid-cols-2 gap-3">
                    <label class="p-3 border rounded-xl flex items-center gap-2 cursor-pointer hover:bg-gray-50 text-xs">
                        <input type="radio" name="payment_mode" value="cash" checked class="text-navy focus:ring-navy">
                        <span class="font-bold text-navy"><i class="fa-solid fa-money-bill-1-wave text-emerald-600 mr-1"></i> नकद (Cash)</span>
                    </label>
                    <label class="p-3 border rounded-xl flex items-center gap-2 cursor-pointer hover:bg-gray-50 text-xs">
                        <input type="radio" name="payment_mode" value="upi_simulated" class="text-navy focus:ring-navy">
                        <span class="font-bold text-navy"><i class="fa-solid fa-qrcode text-blue-600 mr-1"></i> यूपीआई क्यूआर</span>
                    </label>
                </div>
            </div>

            <!-- NOTES -->
            <div>
                <label class="block text-xs font-bold text-gray-700 uppercase mb-1">विशेष टिप्पणी (वैकल्पिक)</label>
                <input type="text" name="notes" placeholder="उदा. घर पर प्राप्त, माह की अंतिम किश्त..."
                       class="w-full px-3 py-2 rounded-xl border border-gray-300 text-xs focus:border-gold">
            </div>

            <!-- SUBMIT BUTTON -->
            <button type="submit" class="w-full py-4 bg-navy hover:bg-gold hover:text-navy text-white text-center font-extrabold text-sm rounded-2xl shadow-xl transition border-2 border-gold flex items-center justify-center gap-2">
                <i class="fa-solid fa-receipt text-gold"></i>
                <span>कलेक्शन रसीद जारी करें (Generate Receipt)</span>
            </button>
        </form>
    </div>
</div>
@endsection