@extends('frontend.layouts.app')
<style>

</style>
@section('content')
    <div class="dashboard-section py-5">
        <div class="container-fluid">

            <div class="row">

                <div class="col-lg-3 col-xl-2 mb-4">

                    <!-- Mobile Button -->
                    <button class="dashboard-menu-btn d-lg-none" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#dashboardSidebar">

                        <i class="fa-solid fa-bars"></i>
                        <span>Menu</span>

                    </button>

                    <!-- Desktop Sidebar -->
                    <div class="d-none d-lg-block">

                        @include('frontend.dashboard.sidebar')

                    </div>

                </div>
                <!-- Content -->
                <div class="col-lg-9 col-xl-10">

                    <div class="card border-0 shadow-sm rounded-4">
                        <div class="card-body p-4">

                            <h3 class="fw-bold mb-2">
                                Welcome, {{ auth()->user()->name }} 👋
                            </h3>

                            <p class="text-muted mb-4">
                                Dashboard Overview
                            </p>

                            <div class="row g-4">

                                <div class="col-md-6 col-xl-3">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body">
                                            <h6>Total Games</h6>
                                            <h3>{{ $totalGames }}</h3>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-xl-3">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body">
                                            <h6>Total Wins</h6>
                                            <h3>{{ $totalWins }}</h3>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-xl-3">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body">
                                            <h6>Wallet</h6>
                                            <h3>₹{{ number_format($walletBalance, 2) }}</h3>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 col-xl-3">
                                    <div class="card border-0 shadow-sm">
                                        <div class="card-body">
                                            <h6>Total Withdrawn</h6>
                                            <h3>₹{{ number_format($totalWithdrawn, 2) }}</h3>
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>

    <!-- Mobile Dashboard Sidebar -->
    <div class="offcanvas offcanvas-start" tabindex="-1" id="dashboardSidebar">

        <div class="offcanvas-header">

            <h5>Dashboard Menu</h5>

            <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>

        </div>

        <div class="offcanvas-body">

            @include('frontend.dashboard.sidebar')

        </div>

    </div>
@endsection