@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
    <section class="dashboard-page">
        <div class="container">
            <header class="dashboard-header">
                <h1>Trading Dashboard</h1>
                <p>Welcome back, {{ auth()->user()->name }}. Manage your portfolio and trades.</p>
            </header>

            <div class="dashboard-grid">
                <div class="dashboard-card">
                    <h3>Portfolio Value</h3>
                    <p class="value">${{ number_format(auth()->user()->balance, 2) }}</p>
                </div>
                <div class="dashboard-card">
                    <h3>Account Status</h3>
                    <p class="value" style="font-size:1.1rem">{{ ucfirst(auth()->user()->status) }}</p>
                </div>
                <div class="dashboard-card">
                    <h3>Username</h3>
                    <p class="value" style="font-size:1.1rem">{{ auth()->user()->username }}</p>
                </div>
                <div class="dashboard-card">
                    <h3>Member Since</h3>
                    <p class="value" style="font-size:1rem">{{ auth()->user()->created_at->format('M Y') }}</p>
                </div>
            </div>

            <div style="margin-top: 2.5rem; padding: 2rem; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); text-align: center;">
                <p style="color: var(--text-secondary); margin-bottom: 1rem;">
                    Deposit funds or contact support to start trading perpetuals with up to 30x leverage.
                </p>
                <a href="{{ route('home') }}#features" class="btn btn-primary">Explore platform features</a>
            </div>
        </div>
    </section>
@endsection