@php
    $quickActions = [
        ['label' => 'Add Member', 'href' => route('admin.members.create')],
        ['label' => 'Approve Withdrawals', 'href' => route('admin.withdrawals')],
        ['label' => 'Add Product', 'href' => route('admin.products')],
        ['label' => 'Add Plan', 'href' => route('admin.plan')],
        ['label' => 'Send Broadcast', 'href' => route('admin.notifications')],
    ];
@endphp

@extends('layouts.admin', ['heading' => 'Admin Dashboard', 'subheading' => 'Command center insights', 'quickActions' => $quickActions])

@section('content')
    <div class="grid grid-cols-1 gap-4 md:grid-cols-3 xl:grid-cols-4">
        <div class="admin-card p-4">
            <div class="text-sm text-slate-500">Total Members</div>
            <div class="mt-3 flex items-center justify-between">
                <span class="text-xs text-slate-500">Left</span>
                <span class="text-lg font-semibold">{{ $stats['members_total']['left'] }}</span>
            </div>
            <div class="mt-2 flex items-center justify-between">
                <span class="text-xs text-slate-500">Right</span>
                <span class="text-lg font-semibold">{{ $stats['members_total']['right'] }}</span>
            </div>
        </div>

        <div class="admin-card p-4">
            <div class="text-sm text-slate-500">Active Members</div>
            <div class="mt-3 flex items-center justify-between">
                <span class="text-xs text-slate-500">Left</span>
                <span class="text-lg font-semibold">{{ $stats['members_active']['left'] }}</span>
            </div>
            <div class="mt-2 flex items-center justify-between">
                <span class="text-xs text-slate-500">Right</span>
                <span class="text-lg font-semibold">{{ $stats['members_active']['right'] }}</span>
            </div>
        </div>

        <div class="admin-card p-4">
            <div class="text-sm text-slate-500">Today Registrations</div>
            <div class="mt-3 flex items-center justify-between">
                <span class="text-xs text-slate-500">Left</span>
                <span class="text-lg font-semibold">{{ $stats['today_registrations']['left'] }}</span>
            </div>
            <div class="mt-2 flex items-center justify-between">
                <span class="text-xs text-slate-500">Right</span>
                <span class="text-lg font-semibold">{{ $stats['today_registrations']['right'] }}</span>
            </div>
        </div>

        <div class="admin-card p-4">
            <div class="text-sm text-slate-500">Today Business Volume</div>
            <div class="mt-3 flex items-center justify-between">
                <span class="text-xs text-slate-500">Left</span>
                <span class="text-lg font-semibold">{{ number_format($stats['today_bv']['left'], 2) }}</span>
            </div>
            <div class="mt-2 flex items-center justify-between">
                <span class="text-xs text-slate-500">Right</span>
                <span class="text-lg font-semibold">{{ number_format($stats['today_bv']['right'], 2) }}</span>
            </div>
        </div>

        <div class="admin-card p-4">
            <div class="text-sm text-slate-500">Total Withdrawals</div>
            <div class="mt-3 flex items-center justify-between">
                <span class="text-xs text-slate-500">Left</span>
                <span class="text-lg font-semibold">{{ number_format($stats['withdrawals_total']['left'], 2) }}</span>
            </div>
            <div class="mt-2 flex items-center justify-between">
                <span class="text-xs text-slate-500">Right</span>
                <span class="text-lg font-semibold">{{ number_format($stats['withdrawals_total']['right'], 2) }}</span>
            </div>
        </div>

        <div class="admin-card p-4">
            <div class="text-sm text-slate-500">Pending Withdrawals</div>
            <div class="mt-3 flex items-center justify-between">
                <span class="text-xs text-slate-500">Left</span>
                <span class="text-lg font-semibold">{{ $stats['withdrawals_pending']['left'] }}</span>
            </div>
            <div class="mt-2 flex items-center justify-between">
                <span class="text-xs text-slate-500">Right</span>
                <span class="text-lg font-semibold">{{ $stats['withdrawals_pending']['right'] }}</span>
            </div>
        </div>

        <div class="admin-card p-4">
            <div class="text-sm text-slate-500">KYC Pending</div>
            <div class="mt-3 flex items-center justify-between">
                <span class="text-xs text-slate-500">Left</span>
                <span class="text-lg font-semibold">{{ $stats['kyc_pending']['left'] }}</span>
            </div>
            <div class="mt-2 flex items-center justify-between">
                <span class="text-xs text-slate-500">Right</span>
                <span class="text-lg font-semibold">{{ $stats['kyc_pending']['right'] }}</span>
            </div>
            <div class="mt-2 text-xs text-slate-500">Total: {{ $stats['pending_kyc_total'] }}</div>
        </div>

        <div class="admin-card p-4">
            <div class="text-sm text-slate-500">Orders Pending</div>
            <div class="mt-3 text-2xl font-semibold">{{ $stats['pending_orders'] }}</div>
            <div class="mt-2 text-xs text-slate-500">Turnover: INR {{ number_format($stats['total_turnover'], 2) }}</div>
        </div>

        <div class="admin-card p-4 md:col-span-2">
            <div class="text-sm text-slate-500">Wallet Balance Summary</div>
            <div class="mt-4 grid grid-cols-2 gap-3 md:grid-cols-5">
                <div>
                    <div class="text-xs text-slate-500">Income</div>
                    <div class="font-semibold">{{ number_format($stats['wallet_summary']['income'], 2) }}</div>
                </div>
                <div>
                    <div class="text-xs text-slate-500">Shopping</div>
                    <div class="font-semibold">{{ number_format($stats['wallet_summary']['repurchase'], 2) }}</div>
                </div>
                <div>
                    <div class="text-xs text-slate-500">Withdrawable</div>
                    <div class="font-semibold">{{ number_format($stats['wallet_summary']['withdrawable'], 2) }}</div>
                </div>
                <div>
                    <div class="text-xs text-slate-500">Hold</div>
                    <div class="font-semibold">{{ number_format($stats['wallet_summary']['hold'], 2) }}</div>
                </div>
                <div>
                    <div class="text-xs text-slate-500">Locked</div>
                    <div class="font-semibold">{{ number_format($stats['wallet_summary']['locked'], 2) }}</div>
                </div>
            </div>
        </div>

        <div class="admin-card p-4">
            <div class="text-sm text-slate-500">Franchise Count</div>
            <div class="mt-3 text-2xl font-semibold">{{ $stats['franchise_count'] }}</div>
            <div class="mt-2 text-xs text-slate-500">Active Users: {{ $stats['active_users'] }}</div>
        </div>

        <div class="admin-card p-4">
            <div class="text-sm text-slate-500">Today Income</div>
            <div class="mt-3 text-2xl font-semibold">INR {{ number_format($stats['today_income'], 2) }}</div>
            <div class="mt-2 text-xs text-slate-500">Pending Withdrawals: {{ $stats['pending_withdrawals'] }}</div>
        </div>
    </div>

    <div class="mt-8 grid grid-cols-1 gap-6 xl:grid-cols-2">
        <div class="admin-card p-5">
            <div class="mb-4 text-sm font-semibold text-slate-700">7 Day Sales Graph</div>
            <canvas id="chartSales7"></canvas>
        </div>
        <div class="admin-card p-5">
            <div class="mb-4 text-sm font-semibold text-slate-700">30 Day Growth Graph</div>
            <canvas id="chartGrowth30"></canvas>
        </div>
        <div class="admin-card p-5">
            <div class="mb-4 text-sm font-semibold text-slate-700">Income Distribution</div>
            <canvas id="chartIncomePie"></canvas>
        </div>
        <div class="admin-card p-5">
            <div class="mb-4 text-sm font-semibold text-slate-700">Package Distribution</div>
            <canvas id="chartPackage"></canvas>
        </div>
        <div class="admin-card p-5 xl:col-span-2">
            <div class="mb-4 text-sm font-semibold text-slate-700">Withdrawal Trends</div>
            <canvas id="chartWithdrawals"></canvas>
        </div>
    </div>

    <script>
        new Chart(document.getElementById('chartSales7'), {
            type: 'line',
            data: {
                labels: {!! json_encode($salesLabels ?? []) !!},
                datasets: [{
                    label: 'Sales',
                    data: {!! json_encode($salesValues ?? []) !!},
                    borderColor: '#16a34a',
                    backgroundColor: 'rgba(22, 163, 74, 0.2)',
                    tension: 0.3,
                    fill: true,
                }]
            }
        });

        new Chart(document.getElementById('chartGrowth30'), {
            type: 'bar',
            data: {
                labels: {!! json_encode($growthLabels ?? []) !!},
                datasets: [{
                    label: 'Registrations',
                    data: {!! json_encode($growthValues ?? []) !!},
                    backgroundColor: '#2563eb'
                }]
            }
        });

        new Chart(document.getElementById('chartIncomePie'), {
            type: 'pie',
            data: {
                labels: {!! json_encode($incomeLabels ?? []) !!},
                datasets: [{
                    data: {!! json_encode($incomeValues ?? []) !!},
                    backgroundColor: ['#16a34a','#2563eb','#f59e0b','#ef4444','#0ea5e9']
                }]
            }
        });

        new Chart(document.getElementById('chartPackage'), {
            type: 'doughnut',
            data: {
                labels: {!! json_encode($packageLabels ?? []) !!},
                datasets: [{
                    data: {!! json_encode($packageValues ?? []) !!},
                    backgroundColor: ['#0ea5e9','#22c55e','#f97316','#6366f1','#e11d48']
                }]
            }
        });

        new Chart(document.getElementById('chartWithdrawals'), {
            type: 'line',
            data: {
                labels: {!! json_encode($withdrawalTrendLabels ?? []) !!},
                datasets: [{
                    label: 'Withdrawals',
                    data: {!! json_encode($withdrawalTrendValues ?? []) !!},
                    borderColor: '#ef4444',
                    backgroundColor: 'rgba(239, 68, 68, 0.2)',
                    tension: 0.3,
                    fill: true,
                }]
            }
        });
    </script>
@endsection