@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="page-shell page-shell--dashboard">
    <section class="hero-card">
        <div>
            <p class="eyebrow">Good day, {{ $user->name }}</p>
            <h1>Income dashboard</h1>
            <p>Track your wallets, tasks, referrals, and VIP power in one premium view.</p>
        </div>
        <div class="hero-values">
            <div>
                <span>Main wallet</span>
                <strong>৳ {{ number_format($wallets->get('main')->balance ?? 0, 2) }}</strong>
            </div>
            <div>
                <span>Referral</span>
                <strong>৳ {{ number_format($wallets->get('referral')->balance ?? 0, 2) }}</strong>
            </div>
        </div>
    </section>

    <section class="grid-card">
        <div class="tile">
            <span>Active tasks</span>
            <strong>{{ $jobs->count() }}</strong>
        </div>
        <div class="tile">
            <span>Team referrals</span>
            <strong>{{ $referrals }}</strong>
        </div>
        <div class="tile tile--accent">
            <span>VIP status</span>
            <strong>Free account</strong>
        </div>
    </section>

    <section class="list-card">
        <div class="list-header">
            <h2>Available tasks</h2>
            <a href="{{ route('user.jobs') }}">Browse all</a>
        </div>
        <div class="task-grid">
            @forelse($jobs as $job)
                <article class="task-card">
                    <h3>{{ $job->title }}</h3>
                    <p>{{ Str::limit($job->description, 90) }}</p>
                    <div class="task-meta">
                        <span>৳ {{ number_format($job->reward, 2) }}</span>
                        <a href="{{ route('user.jobs.show', $job) }}" class="btn-ghost">Start</a>
                    </div>
                </article>
            @empty
                <p class="empty-state">No eligible tasks right now. Check back later.</p>
            @endforelse
        </div>
    </section>
</div>
@endsection