@extends('layouts.user', ['heading' => 'Income Ledger'])

@section('content')
    <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
        <div class="user-card bg-gradient-to-br from-emerald-500 to-teal-600 p-4 text-white">
            <div class="text-xs opacity-80">Filtered Net Total</div>
            <div class="mt-2 text-2xl font-bold">Rs. {{ number_format((float) $totalAmount, 2) }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Today Income</div>
            <div class="mt-2 text-2xl font-semibold">Rs. {{ number_format((float) $summary['today_income'], 2) }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">This Month</div>
            <div class="mt-2 text-2xl font-semibold">Rs. {{ number_format((float) $summary['monthly_income'], 2) }}</div>
        </div>
        <div class="user-card p-4">
            <div class="text-xs text-[var(--user-muted)]">Lifetime Income</div>
            <div class="mt-2 text-2xl font-semibold">Rs. {{ number_format((float) $summary['lifetime_income'], 2) }}</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' => 'Full Ledger',
            ];
        @endphp
        @foreach($tabs as $key => $label)
            <a href="{{ route('user.income', array_merge(request()->except('page', 'tab'), ['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>

    <form method="GET" class="mt-4 grid grid-cols-1 gap-2 md:grid-cols-8">
        <input type="hidden" name="tab" value="{{ $tab }}">
        <input type="date" name="from" value="{{ $filters['from'] }}" class="rounded border border-[var(--user-border)] p-2 text-xs">
        <input type="date" name="to" value="{{ $filters['to'] }}" class="rounded border border-[var(--user-border)] p-2 text-xs">
        <select name="wallet_type" class="rounded border border-[var(--user-border)] p-2 text-xs">
            <option value="">All Wallets</option>
            @foreach(['income','repurchase','withdrawable','hold','locked'] as $wallet)
                <option value="{{ $wallet }}" @selected($filters['wallet_type'] === $wallet)>{{ ucfirst($wallet) }}</option>
            @endforeach
        </select>
        <select name="direction" class="rounded border border-[var(--user-border)] p-2 text-xs">
            <option value="">Credit + Debit</option>
            <option value="credit" @selected($filters['direction'] === 'credit')>Credit</option>
            <option value="debit" @selected($filters['direction'] === 'debit')>Debit</option>
        </select>
        <select name="source_type" class="rounded border border-[var(--user-border)] p-2 text-xs">
            <option value="">All Sources</option>
            @foreach($availableSources as $sourceType)
                <option value="{{ $sourceType }}" @selected($filters['source_type'] === $sourceType)>{{ $sourceType }}</option>
            @endforeach
        </select>
        <input type="number" step="0.01" min="0" name="min_amount" value="{{ $filters['min_amount'] }}" placeholder="Min Amt" class="rounded border border-[var(--user-border)] p-2 text-xs">
        <input type="number" step="0.01" min="0" name="max_amount" value="{{ $filters['max_amount'] }}" placeholder="Max Amt" class="rounded border border-[var(--user-border)] p-2 text-xs">
        <input type="text" name="q" value="{{ $filters['q'] }}" placeholder="Search ref/source/narration" class="rounded border border-[var(--user-border)] p-2 text-xs md:col-span-3">
        <div class="flex flex-wrap gap-2 md:col-span-5">
            <button class="rounded bg-[var(--user-primary)] px-4 py-2 text-xs text-white">Apply</button>
            <a href="{{ route('user.income', ['tab' => $tab]) }}" class="rounded border border-[var(--user-border)] px-4 py-2 text-xs">Reset</a>
            <a href="{{ request()->fullUrlWithQuery(['export' => 'excel']) }}" class="rounded bg-emerald-600 px-4 py-2 text-xs text-white">Excel</a>
            <a href="{{ request()->fullUrlWithQuery(['export' => 'csv']) }}" class="rounded bg-cyan-600 px-4 py-2 text-xs text-white">CSV</a>
            <a href="{{ request()->fullUrlWithQuery(['export' => 'pdf']) }}" class="rounded bg-slate-700 px-4 py-2 text-xs text-white">PDF</a>
        </div>
    </form>

    <div class="mt-4 grid grid-cols-1 gap-3">
        @forelse($transactions as $txn)
            <div class="user-card p-4">
                <div class="flex items-start justify-between gap-2">
                    <div>
                        <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="text-right">
                        <div class="text-xs text-slate-500">Ref</div>
                        <div class="text-xs font-medium">{{ $txn->display_reference ?? $txn->reference ?? 'NA' }}</div>
                    </div>
                </div>
                <div class="mt-2 grid grid-cols-2 gap-2 text-xs text-slate-600 md:grid-cols-4">
                    <div class="rounded bg-slate-50 p-2">Wallet: <span class="font-semibold">{{ $txn->wallet_type }}</span></div>
                    <div class="rounded bg-slate-50 p-2">Direction: <span class="font-semibold">{{ $txn->direction }}</span></div>
                    <div class="rounded bg-slate-50 p-2">Opening: <span class="font-semibold">{{ number_format((float) $txn->opening_balance, 2) }}</span></div>
                    <div class="rounded bg-slate-50 p-2">Closing: <span class="font-semibold">{{ number_format((float) $txn->closing_balance, 2) }}</span></div>
                </div>
                <div class="mt-2 text-lg font-bold {{ $txn->direction === 'credit' ? 'text-emerald-600' : 'text-rose-600' }}">
                    {{ $txn->direction === 'credit' ? '+' : '-' }}Rs. {{ number_format((float) $txn->amount, 2) }}
                </div>
                @if($txn->narration)
                    <div class="mt-1 text-xs text-slate-500">{{ $txn->narration }}</div>
                @endif
            </div>
        @empty
            <div class="user-card p-5 text-center text-sm text-[var(--user-muted)]">No income records found for selected filters.</div>
        @endforelse
    </div>

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