@extends('layouts.user', ['heading' => 'Wallet / वॉलेट'])

@section('content')
    @if(session('status'))
        <div class="mb-4 rounded bg-emerald-100 p-3 text-emerald-800">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded bg-rose-100 p-3 text-rose-800">
            <ul class="list-disc pl-5 text-sm">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="grid grid-cols-2 gap-4 md:grid-cols-3">
        <div class="rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-600 p-4 text-white shadow-lg">
            <div class="text-xs opacity-80">Income Wallet</div>
            <div class="text-2xl font-bold">₹ {{ number_format((float) ($wallet->income_balance ?? 0), 2) }}</div>
        </div>
        <div class="rounded-2xl bg-gradient-to-br from-purple-500 to-fuchsia-600 p-4 text-white shadow-lg">
            <div class="text-xs opacity-80">Repurchase Wallet</div>
            <div class="text-2xl font-bold">₹ {{ number_format((float) ($wallet->repurchase_balance ?? 0), 2) }}</div>
        </div>
        <div class="rounded-2xl bg-gradient-to-br from-sky-500 to-cyan-600 p-4 text-white shadow-lg">
            <div class="text-xs opacity-80">Withdrawable Wallet</div>
            <div class="text-2xl font-bold">₹ {{ number_format((float) ($wallet->withdrawable_balance ?? 0), 2) }}</div>
        </div>
    </div>

    <div class="mt-6 rounded-2xl bg-white p-4 shadow">
        <div class="mb-2 font-semibold">Wallet Transfer</div>
        <form method="POST" action="{{ route('user.wallet.transfer') }}" class="flex flex-wrap gap-2">
            @csrf
            <input name="recipient" placeholder="Recipient Member Code / Mobile / Email" class="flex-1 rounded border p-2 text-sm" required>
            <select name="wallet_type" class="rounded border p-2 text-sm">
                <option value="income">Income</option>
                <option value="repurchase">Repurchase</option>
                <option value="withdrawable">Withdrawable</option>
            </select>
            <input name="amount" type="number" step="0.01" min="0.01" placeholder="Amount" class="w-32 rounded border p-2 text-sm" required>
            <button class="rounded bg-emerald-600 px-3 py-2 text-sm text-white">Transfer</button>
        </form>
    </div>

    <div class="mt-6 grid grid-cols-1 gap-3">
        @forelse($transactions as $txn)
            <div class="rounded-2xl bg-white p-4 shadow">
                <div class="flex items-center justify-between">
                    <div class="font-semibold">{{ $txn->wallet_type }}</div>
                    <div class="text-xs text-slate-500">{{ optional($txn->transacted_at)->format('d M Y, h:i A') }}</div>
                </div>
                <div class="mt-1 text-xs text-slate-500">Direction: {{ $txn->direction }}</div>
                <div class="mt-2 text-lg font-bold {{ $txn->direction === 'credit' ? 'text-emerald-600' : 'text-rose-600' }}">
                    {{ $txn->direction === 'credit' ? '+' : '-' }}₹ {{ number_format((float) $txn->amount, 2) }}
                </div>
                <div class="mt-1 text-xs text-slate-500">
                    Balance: ₹ {{ number_format((float) $txn->closing_balance, 2) }}
                </div>
                <div class="mt-1 text-xs text-slate-500">Ref: {{ $txn->display_reference ?? $txn->reference ?? 'NA' }}</div>
            </div>
        @empty
            <div class="rounded-2xl bg-white p-4 text-center text-slate-500">No transactions found.</div>
        @endforelse
    </div>

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