@extends('layouts.user', ['heading' => 'Income / आय'])

@section('content')
    <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
        <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">Selected Total</div>
            <div class="text-2xl font-bold">₹ {{ number_format($totalAmount ?? 0, 2) }}</div>
        </div>
        <div class="rounded-2xl bg-gradient-to-br from-slate-700 to-slate-900 p-4 text-white shadow-lg">
            <div class="text-xs opacity-80">Records</div>
            <div class="text-2xl font-bold">{{ $transactions->total() }}</div>
        </div>
    </div>

    <div class="mt-5 flex flex-wrap gap-2">
        @php
            $tabs = [
                'matching' => 'Matching',
                'joining' => 'Joining Pair',
                'direct' => 'Direct',
                'rank' => 'Rank',
                'cashback' => 'Cashback',
                'ledger' => 'Ledger',
            ];
        @endphp
        @foreach($tabs as $key => $label)
            <a href="{{ route('user.income', ['tab' => $key]) }}"
               class="rounded-full px-4 py-2 text-sm {{ $tab === $key ? 'bg-slate-900 text-white' : 'bg-white text-slate-700 shadow' }}">
                {{ $label }}
            </a>
        @endforeach
    </div>

    <div class="mt-4 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->source_type ?? 'ledger' }}
                    </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">
                    Wallet: {{ $txn->wallet_type }} | {{ $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">
                    Ref: {{ $txn->display_reference ?? $txn->reference ?? 'NA' }}
                </div>
            </div>
        @empty
            <div class="rounded-2xl bg-white p-4 text-center text-slate-500">No income records found.</div>
        @endforelse
    </div>

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