@extends('layouts.member')

@section('title', 'Income Summary - ElevateWell Worldwide')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div>
        <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Income Summary</h1>
        <p class="text-xs text-slate-500">View your income summary and breakdown across different income types.</p>
    </div>

    <!-- Top 3 KPI Cards matching screenshot -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Total Earnings -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-semibold text-slate-500">Total Earnings</p>
                <h3 class="text-2xl sm:text-3xl font-extrabold text-blue-600 mt-1 sm:mt-2 truncate">₱{{ number_format($user->total_earned, 2) }}</h3>
            </div>
            <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-2xl bg-blue-50 dark:bg-blue-950/50 text-blue-600 flex items-center justify-center shrink-0">
                <i data-lucide="wallet" class="w-6 h-6 sm:w-7 sm:h-7"></i>
            </div>
        </div>

        <!-- Total Withdrawals -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 sm:p-6 border border-slate-200 dark:border-slate-700 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-semibold text-slate-500">Total Withdrawals</p>
                <h3 class="text-2xl sm:text-3xl font-extrabold text-rose-600 mt-1 sm:mt-2 truncate">₱{{ number_format($user->total_withdrawn, 2) }}</h3>
            </div>
            <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-2xl bg-rose-50 dark:bg-rose-950/50 text-rose-600 flex items-center justify-center shrink-0">
                <i data-lucide="arrow-down" class="w-6 h-6 sm:w-7 sm:h-7"></i>
            </div>
        </div>

        <!-- Current Balance -->
        <div class="bg-white dark:bg-slate-800 rounded-2xl p-5 sm:p-6 border border-slate-200 dark:border-slate-700 shadow-sm flex items-center justify-between">
            <div>
                <p class="text-xs font-semibold text-slate-500">Current Balance</p>
                <h3 class="text-2xl sm:text-3xl font-extrabold text-emerald-600 mt-1 sm:mt-2 truncate">₱{{ number_format($user->balance, 2) }}</h3>
            </div>
            <div class="w-12 h-12 sm:w-14 sm:h-14 rounded-2xl bg-emerald-50 dark:bg-emerald-950/50 text-emerald-600 flex items-center justify-center shrink-0">
                <i data-lucide="arrow-up" class="w-6 h-6 sm:w-7 sm:h-7"></i>
            </div>
        </div>
    </div>

    <!-- Main Content: Left Tabs + Right Itemized Table -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
        
        <!-- Left Side: Income Streams Navigation Buttons -->
        <div class="lg:col-span-4 space-y-2">
            @php
                $tabs = [
                    'direct' => ['label' => 'Direct Income', 'amount' => $directTotal],
                    'indirect' => ['label' => 'Indirect Income', 'amount' => $indirectTotal],
                    'binary' => ['label' => 'Binary Income', 'amount' => $binaryTotal],
                    'unilevel' => ['label' => 'Unilevel Income', 'amount' => $unilevelTotal],
                    'affiliate' => ['label' => 'Affiliate Income', 'amount' => $affiliateTotal],
                ];
            @endphp

            @foreach($tabs as $key => $tab)
                <a href="{{ route('income.summary', ['tab' => $key]) }}"
                    class="w-full flex items-center justify-between px-5 py-4 rounded-2xl border transition shadow-xs {{ $activeTab === $key ? 'bg-sky-50/80 dark:bg-sky-950/40 border-sky-600 text-sky-900 dark:text-sky-200 font-bold' : 'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 hover:bg-slate-50' }}">
                    <span class="text-sm">{{ $tab['label'] }}</span>
                    <div class="flex items-center gap-2">
                        <span class="text-sm font-extrabold">₱{{ number_format($tab['amount'], 2) }}</span>
                        <i data-lucide="chevron-right" class="w-4 h-4 text-slate-400"></i>
                    </div>
                </a>
            @endforeach
        </div>

        <!-- Right Side: Itemized Ledger Table matching screenshot -->
        <div class="lg:col-span-8 bg-white dark:bg-slate-800 rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-sm">
            <div class="mb-4">
                <h2 class="text-lg font-bold text-slate-900 dark:text-white capitalize">{{ $activeTab }} Income</h2>
                <p class="text-xs text-slate-500 font-semibold">Total: ₱{{ number_format($tabs[$activeTab]['amount'] ?? 0, 2) }}</p>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-100 dark:bg-slate-700/50 text-slate-600 dark:text-slate-300 font-bold">
                        <tr>
                            <th class="px-4 py-3 rounded-l-xl">#</th>
                            <th class="px-4 py-3">Account Name</th>
                            <th class="px-4 py-3">Package</th>
                            <th class="px-4 py-3">Amount</th>
                            <th class="px-4 py-3 rounded-r-xl">Date</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-700 text-slate-700 dark:text-slate-300">
                        @forelse($items as $index => $item)
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-700/30 transition">
                                <td class="px-4 py-3 font-mono text-slate-400">{{ $items->firstItem() + $index }}</td>
                                <td class="px-4 py-3 font-semibold">{{ $item->sourceUser ? $item->sourceUser->full_name : 'System / Matrix' }}</td>
                                <td class="px-4 py-3">{{ $item->package_name ?? 'Starter' }}</td>
                                <td class="px-4 py-3 font-bold text-emerald-600">+₱{{ number_format($item->amount, 2) }}</td>
                                <td class="px-4 py-3 text-slate-500">{{ $item->created_at->format('M d, Y h:i A') }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="px-4 py-12 text-center text-slate-400 font-medium">
                                    No data available
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($items->hasPages())
                <div class="mt-4 pt-4 border-t border-slate-100 dark:border-slate-700">
                    {{ $items->appends(['tab' => $activeTab])->links() }}
                </div>
            @endif
        </div>

    </div>
</div>
@endsection