@extends('layouts.app')
@section('title', 'Dashboard')
@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <!-- Welcome -->
    <div class="mb-8">
        <h1 class="text-2xl font-bold text-gray-800">Welcome back, {{ $user->name }}! 👋</h1>
        <p class="text-gray-500">Here's your earning summary</p>
    </div>

    <!-- KPI Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow p-6 card-hover border-l-4 border-purple-500">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-500">Available Balance</p>
                    <p class="text-3xl font-bold text-gray-800">${{ number_format($user->balance, 2) }}</p>
                </div>
                <div class="bg-purple-100 p-3 rounded-lg">
                    <i class="fas fa-wallet text-purple-600 text-xl"></i>
                </div>
            </div>
            <a href="{{ route('wallet.index') }}" class="text-purple-600 text-sm hover:underline mt-2 inline-block">Manage Wallet →</a>
        </div>
        <div class="bg-white rounded-xl shadow p-6 card-hover border-l-4 border-green-500">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-500">Total Earned</p>
                    <p class="text-3xl font-bold text-gray-800">${{ number_format($totalEarned, 2) }}</p>
                </div>
                <div class="bg-green-100 p-3 rounded-lg">
                    <i class="fas fa-dollar-sign text-green-600 text-xl"></i>
                </div>
            </div>
            <p class="text-green-600 text-sm mt-2">Lifetime earnings</p>
        </div>
        <div class="bg-white rounded-xl shadow p-6 card-hover border-l-4 border-blue-500">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-500">Today's Surveys</p>
                    <p class="text-3xl font-bold text-gray-800">{{ $completedToday }}/{{ $dailyLimit }}</p>
                </div>
                <div class="bg-blue-100 p-3 rounded-lg">
                    <i class="fas fa-tasks text-blue-600 text-xl"></i>
                </div>
            </div>
            <p class="text-blue-600 text-sm mt-2">{{ $remainingToday }} remaining today</p>
        </div>
        <div class="bg-white rounded-xl shadow p-6 card-hover border-l-4 border-yellow-500">
            <div class="flex justify-between items-start">
                <div>
                    <p class="text-sm text-gray-500">Referral Earnings</p>
                    <p class="text-3xl font-bold text-gray-800">${{ number_format($referralEarnings, 2) }}</p>
                </div>
                <div class="bg-yellow-100 p-3 rounded-lg">
                    <i class="fas fa-users text-yellow-600 text-xl"></i>
                </div>
            </div>
            <p class="text-yellow-600 text-sm mt-2">{{ $referralCount }} referrals</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Recent Completions -->
        <div class="lg:col-span-2 bg-white rounded-xl shadow p-6">
            <div class="flex justify-between items-center mb-4">
                <h2 class="font-bold text-lg text-gray-800">Recent Completions</h2>
                <a href="{{ route('surveys.index') }}" class="text-purple-600 text-sm hover:underline">View All</a>
            </div>
            @if($recentCompletions->isEmpty())
            <div class="text-center py-8 text-gray-400">
                <i class="fas fa-clipboard-list text-4xl mb-3"></i>
                <p>No surveys completed yet.</p>
                <a href="{{ route('surveys.index') }}" class="mt-2 inline-block text-purple-600 hover:underline">Browse Surveys</a>
            </div>
            @else
            <div class="space-y-3">
                @foreach($recentCompletions as $c)
                <div class="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
                    <div>
                        <p class="font-medium text-gray-800 text-sm">{{ $c->survey->title ?? 'Survey' }}</p>
                        <p class="text-xs text-gray-500">{{ $c->created_at->diffForHumans() }}</p>
                    </div>
                    <span class="text-green-600 font-bold">+${{ number_format($c->reward, 2) }}</span>
                </div>
                @endforeach
            </div>
            @endif
        </div>

        <!-- Plan & Quick Actions -->
        <div class="space-y-4">
            <div class="bg-white rounded-xl shadow p-6">
                <h3 class="font-bold text-gray-800 mb-3">Current Plan</h3>
                @if($user->activePlan)
                <div class="text-center">
                    <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-semibold">
                        <i class="fas fa-crown mr-1"></i>{{ $user->activePlan->plan->name }}
                    </span>
                    <p class="text-xs text-gray-500 mt-2">Expires {{ $user->activePlan->expires_at->format('M d, Y') }}</p>
                    <p class="text-sm mt-1">{{ $user->activePlan->plan->daily_survey_limit }} surveys/day</p>
                </div>
                @else
                <div class="text-center">
                    <span class="bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-sm">Free Plan</span>
                    <p class="text-xs text-gray-500 mt-2">3 surveys per day</p>
                    <a href="{{ route('plans.index') }}" class="mt-3 inline-block w-full text-center bg-purple-600 text-white py-2 rounded-lg text-sm font-semibold hover:bg-purple-700 transition">Upgrade Plan</a>
                </div>
                @endif
            </div>
            <div class="bg-white rounded-xl shadow p-6">
                <h3 class="font-bold text-gray-800 mb-3">Quick Actions</h3>
                <div class="space-y-2">
                    <a href="{{ route('surveys.index') }}" class="flex items-center space-x-2 p-2 hover:bg-purple-50 rounded-lg transition">
                        <i class="fas fa-tasks text-purple-600 w-5"></i><span class="text-sm">Browse Surveys</span>
                    </a>
                    <a href="{{ route('wallet.deposit') }}" class="flex items-center space-x-2 p-2 hover:bg-green-50 rounded-lg transition">
                        <i class="fas fa-plus-circle text-green-600 w-5"></i><span class="text-sm">Deposit Funds</span>
                    </a>
                    <a href="{{ route('wallet.withdraw') }}" class="flex items-center space-x-2 p-2 hover:bg-blue-50 rounded-lg transition">
                        <i class="fas fa-arrow-down text-blue-600 w-5"></i><span class="text-sm">Withdraw</span>
                    </a>
                    <a href="{{ route('referrals.index') }}" class="flex items-center space-x-2 p-2 hover:bg-yellow-50 rounded-lg transition">
                        <i class="fas fa-share-alt text-yellow-600 w-5"></i><span class="text-sm">Invite Friends</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection