@extends('agent.layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <!-- Welcome Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
                Welcome back, {{ $agent->name }}!
            </h1>
            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
                {{ $agent->performanceTier->name ?? 'Basic' }} &bull; Matrix ID: <span class="font-mono font-bold text-indigo-600 dark:text-indigo-400">{{ $agent->coupon_code }}</span>
            </p>
        </div>

        <!-- Stats Grid -->
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-8">
            <!-- Total Sales -->
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
                            </svg>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Total Sales</dt>
                                <dd class="text-lg font-semibold text-gray-900 dark:text-white">RM {{ number_format($stats['total_sales'], 2) }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 px-5 py-3">
                    <div class="text-sm">
                        <a href="{{ route('agent.orders.index') }}" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500">
                            {{ $stats['paid_orders'] }} paid orders
                        </a>
                    </div>
                </div>
            </div>

            <!-- Pending Commissions -->
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Pending Approval</dt>
                                <dd class="text-lg font-semibold text-yellow-600 dark:text-yellow-400">RM {{ number_format($stats['pending_commissions'], 2) }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 px-5 py-3">
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                        Awaiting admin approval
                    </div>
                </div>
            </div>

            <!-- Available for Payout -->
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-green-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Available Balance</dt>
                                <dd class="text-lg font-semibold text-green-600 dark:text-green-400">RM {{ number_format($stats['approved_commissions'], 2) }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 px-5 py-3">
                    <div class="text-sm">
                        <a href="{{ route('agent.commissions.index') }}" class="font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500">
                            View commissions
                        </a>
                    </div>
                </div>
            </div>

            <!-- Total Earned -->
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
                <div class="p-5">
                    <div class="flex items-center">
                        <div class="flex-shrink-0">
                            <svg class="h-6 w-6 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div class="ml-5 w-0 flex-1">
                            <dl>
                                <dt class="text-sm font-medium text-gray-500 dark:text-gray-400 truncate">Total Earned</dt>
                                <dd class="text-lg font-semibold text-gray-900 dark:text-white">RM {{ number_format($stats['total_earned'], 2) }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 dark:bg-gray-700 px-5 py-3">
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                        RM {{ number_format($stats['paid_commissions'], 2) }} already paid
                    </div>
                </div>
            </div>
        </div>

        <!-- Team Stats -->
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-3 mb-8">
            <div class="bg-indigo-50 dark:bg-indigo-900/20 rounded-lg p-4 border border-indigo-200 dark:border-indigo-800">
                <div class="text-xs text-indigo-600 dark:text-indigo-400 uppercase tracking-wide">Direct Downlines</div>
                <div class="text-2xl font-bold text-indigo-800 dark:text-indigo-200 mt-1">{{ $stats['direct_downlines'] }}</div>
                <a href="{{ route('agent.team.index') }}" class="text-sm text-indigo-600 dark:text-indigo-400 hover:underline">Manage team</a>
            </div>
            <div class="bg-purple-50 dark:bg-purple-900/20 rounded-lg p-4 border border-purple-200 dark:border-purple-800">
                <div class="text-xs text-purple-600 dark:text-purple-400 uppercase tracking-wide">Team Orders</div>
                <div class="text-2xl font-bold text-purple-800 dark:text-purple-200 mt-1">{{ $stats['team_orders'] }}</div>
                <span class="text-sm text-purple-600 dark:text-purple-400">From downlines</span>
            </div>
            <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
                <div class="text-xs text-blue-600 dark:text-blue-400 uppercase tracking-wide">Pending Payouts</div>
                <div class="text-2xl font-bold text-blue-800 dark:text-blue-200 mt-1">RM {{ number_format($stats['pending_payouts'], 2) }}</div>
                <a href="{{ route('agent.payouts.index') }}" class="text-sm text-blue-600 dark:text-blue-400 hover:underline">View payouts</a>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <!-- Recent Orders -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Orders</h3>
                </div>
                <div class="overflow-hidden">
                    @if($recentOrders->count() > 0)
                        <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach($recentOrders as $order)
                                <li class="px-4 py-4 sm:px-6 hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                    <div class="flex items-center justify-between">
                                        <div class="truncate">
                                            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                                {{ $order->customer_name }}
                                            </p>
                                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                                {{ $order->created_at->format('d M Y') }} &bull; {{ $order->items->count() }} items
                                            </p>
                                        </div>
                                        <div class="ml-2 flex flex-shrink-0 items-center gap-2">
                                            <span class="text-sm font-medium text-gray-900 dark:text-white">
                                                RM {{ number_format($order->total_amount, 2) }}
                                            </span>
                                            <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {{ $order->payment_status === 'paid' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' }}">
                                                {{ ucfirst($order->payment_status) }}
                                            </span>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                        <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-center">
                            <a href="{{ route('agent.orders.index') }}" class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500">
                                View all orders
                            </a>
                        </div>
                    @else
                        <div class="px-4 py-12 text-center">
                            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                            </svg>
                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">No orders yet</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Recent Commissions -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg">
                <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Commissions</h3>
                </div>
                <div class="overflow-hidden">
                    @if($recentCommissions->count() > 0)
                        <ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach($recentCommissions as $commission)
                                <li class="px-4 py-4 sm:px-6 hover:bg-gray-50 dark:hover:bg-gray-700/50">
                                    <div class="flex items-center justify-between">
                                        <div class="truncate">
                                            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
                                                @if($commission->agentOrder)
                                                    {{ $commission->agentOrder->customer_name }}
                                                @elseif($commission->posSale)
                                                    {{ $commission->posSale->customer_name ?? 'POS Sale' }}
                                                @else
                                                    Commission
                                                @endif
                                            </p>
                                            <p class="text-sm text-gray-500 dark:text-gray-400">
                                                {{ $commission->created_at->format('d M Y') }} &bull; {{ $commission->commission_rate }}%
                                            </p>
                                        </div>
                                        <div class="ml-2 flex flex-shrink-0 items-center gap-2">
                                            <span class="text-sm font-medium text-gray-900 dark:text-white">
                                                RM {{ number_format($commission->commission_amount, 2) }}
                                            </span>
                                            <span class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium
                                                {{ $commission->status === 'paid' ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : '' }}
                                                {{ $commission->status === 'approved' ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400' : '' }}
                                                {{ $commission->status === 'pending' ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400' : '' }}">
                                                {{ ucfirst($commission->status) }}
                                            </span>
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                        <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 text-center">
                            <a href="{{ route('agent.commissions.index') }}" class="text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:text-indigo-500">
                                View all commissions
                            </a>
                        </div>
                    @else
                        <div class="px-4 py-12 text-center">
                            <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">No commissions yet</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Quick Links -->
        <div class="mt-8 bg-white dark:bg-gray-800 shadow rounded-lg p-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Quick Links</h3>
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
                <a href="{{ route('agent.links.index') }}" class="flex flex-col items-center p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50">
                    <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
                    </svg>
                    <span class="mt-2 text-sm text-gray-600 dark:text-gray-300">My Links</span>
                </a>
                <a href="{{ route('agent.team.index') }}" class="flex flex-col items-center p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50">
                    <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" />
                    </svg>
                    <span class="mt-2 text-sm text-gray-600 dark:text-gray-300">My Team</span>
                </a>
                <a href="{{ route('agent.profile.show') }}" class="flex flex-col items-center p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50">
                    <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                    </svg>
                    <span class="mt-2 text-sm text-gray-600 dark:text-gray-300">Profile</span>
                </a>
                <a href="{{ route('agent.payouts.index') }}" class="flex flex-col items-center p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50">
                    <svg class="h-8 w-8 text-indigo-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
                    </svg>
                    <span class="mt-2 text-sm text-gray-600 dark:text-gray-300">Payouts</span>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection