@php
    $headerOption = [
        'title' => 'Welcome to Dashboard',
        'noCardView' => true,
    ];
@endphp
@extends('admin.layouts.layout', $headerOption)

@section('content')
    <div class="row mt-3">
        <div class="col-sm-3">
            <div class="card border border-primary">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <div class="avatar-sm me-3">
                            <span class="avatar-title rounded-circle bg-primary-subtle text-white font-size-22">
                                <i class="bx bx-dollar"></i>
                            </span>
                        </div>
                        <h5 class="font-size-14 mb-0">Total Raised</h5>
                    </div>
                    <div class="text-muted mt-2">
                        <h4>$ 7,450 <i class="mdi mdi-chevron-up ms-1 text-success"></i></h4>
                        <div class="d-flex">
                            <span class="badge badge-soft-success font-size-12"> + 0.2% </span> <span class="ms-2 text-truncate">From previous period</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="card border border-primary">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <div class="avatar-sm me-3">
                            <span class="avatar-title rounded-circle bg-primary-subtle text-white font-size-22">
                                <i class="bx bx-line-chart"></i>
                            </span>
                        </div>
                        <h5 class="font-size-14 mb-0">Active Campaigns</h5>
                    </div>
                    <div class="text-muted mt-2">
                        <h4>26 <i class="mdi mdi-chevron-up ms-1 text-success"></i></h4>
                        <div class="d-flex">
                            <span class="badge badge-soft-success font-size-12"> + 0.2% </span> <span class="ms-2 text-truncate">From previous period</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="card border border-primary">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <div class="avatar-sm me-3">
                            <span class="avatar-title rounded-circle bg-primary-subtle text-white font-size-22">
                                <i class="bx bx-purchase-tag-alt"></i>
                            </span>
                        </div>
                        <h5 class="font-size-14 mb-0">NFT Sold</h5>
                    </div>
                    <div class="text-muted mt-2">
                        <h4>2563 <i class="mdi mdi-chevron-down ms-1 text-danger"></i></h4>
                        
                        <div class="d-flex">
                            <span class="badge badge-soft-warning font-size-12"> 0% </span> <span class="ms-2 text-truncate">From previous period</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-3">
            <div class="card border border-danger">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <div class="avatar-sm me-3">
                            <span class="avatar-title rounded-circle bg-primary-subtle text-white font-size-22">
                                <i class="bx bx-wallet"></i>
                            </span>
                        </div>
                        <h5 class="font-size-14 mb-0">Pending Withdrawals</h5>
                    </div>
                    <div class="text-muted mt-2">
                        <h4>$ 28,452 <i class="mdi mdi-chevron-up ms-1 text-success"></i></h4>
                        <div class="d-flex">
                            <span class="badge badge-soft-success font-size-12"> + 0.2% </span> <span class="ms-2 text-truncate">From previous period</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-8">
            <div class="card">
                <div class="card-body">
                    <div class="clearfix">
                        <h4 class="card-title mb-4">Monthly Sponsorship Growth</h4>
                    </div>

                    <div class="row">
                        <div class="col-lg-4">
                            <div class="text-muted">
                                <div class="mb-4">
                                    <p>This month</p>
                                    <h4>$2453.35</h4>
                                    <div><span class="badge badge-soft-success font-size-12 mr-1"> + 0.2% </span> From previous period</div>
                                </div>

                                <div>
                                    <a href="#" class="btn btn-primary waves-effect waves-light btn-sm">View Details <i class="mdi mdi-chevron-right ml-1"></i></a>
                                </div>
                                
                                <div class="mt-4">
                                    <p class="mb-2">Last month</p>
                                    <h5>$2281.04</h5>
                                </div>
                                
                            </div>
                        </div>

                        <div class="col-lg-8">
                            <div id="line-chart" class="apex-charts" dir="ltr"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-4">User Ecosystem Breakdown</h4>

                    <div>
                        <div id="donut-chart" class="apex-charts"></div>
                    </div>

                    <div class="text-center text-muted">
                        <div class="row">
                            <div class="col-4">
                                <div class="mt-4">
                                    <p class="mb-2 text-truncate"><i class="mdi mdi-circle text-primary mr-1"></i> Athletes</p>
                                    <h5>2,132</h5>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="mt-4">
                                    <p class="mb-2 text-truncate"><i class="mdi mdi-circle text-success mr-1"></i> Teams</p>
                                    <h5>1,763</h5>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="mt-4">
                                    <p class="mb-2 text-truncate"><i class="mdi mdi-circle text-danger mr-1"></i> Sponsors</p>
                                    <h5>973</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <div>
                        <div class="mb-4 mr-3">
                            <i class="mdi mdi-account-circle text-primary h1"></i>
                        </div>

                        <div>
                            <h5>Henry Wells</h5>
                            <p class="text-muted mb-1">henrywells@abc.com</p>
                            <p class="text-muted mb-0">Id no: #SK0234</p>
                            
                        </div>
                    </div>
                </div>

                <div class="card-body border-top">
                    <div class="row">
                        <div class="col-sm-6">
                            <div>
                                <p class="font-weight-medium mb-2">Balance :</p>
                                <h4>$ 6134.39</h4>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="mt-4 mt-sm-0">
                                <p class="font-weight-medium mb-2">Coin :</p>
                                <div class="d-inline-flex align-items-center mt-1">
                                    
                                    <a href="javascript: void(0);" class="m-1" data-toggle="tooltip" data-placement="top" title="Bitcoin">
                                        <div class="avatar-xs">
                                            <span class="avatar-title rounded-circle bg-soft-warning text-white font-size-18">
                                                <i class="mdi mdi-bitcoin"></i>
                                            </span>
                                        </div>
                                    </a>
                                    <a href="javascript: void(0);" class="m-1" data-toggle="tooltip" data-placement="top" title="Ethereum">
                                        <div class="avatar-xs">
                                            <span class="avatar-title rounded-circle bg-soft-primary text-white font-size-18">
                                                <i class="mdi mdi-ethereum"></i>
                                            </span>
                                        </div>
                                    </a>
                                    <a href="javascript: void(0);" class="m-1" data-toggle="tooltip" data-placement="top" title="Litecoin">
                                        <div class="avatar-xs">
                                            <span class="avatar-title rounded-circle bg-soft-info text-white font-size-18">
                                                <i class="mdi mdi-litecoin"></i>
                                            </span>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-footer bg-transparent border-top">
                    <div class="text-center">
                        <a href="#" class="btn btn-outline-primary mr-2 w-md">Deposit</a>
                        <a href="#" class="btn btn-primary mr-2 w-md">Buy / Sell</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-8">
            <div class="card">
                <div>
                    <div class="row">
                        <div class="col-lg-9 col-sm-8">
                            <div  class="p-4">
                                <h5 class="text-primary">Welcome Back !</h5>
                                <p>Sport Nexus Dashboard</p>

                                <div class="text-muted">
                                    <p class="mb-1"><i class="mdi mdi-circle-medium align-middle text-primary mr-1"></i> If several languages coalesce</p>
                                    <p class="mb-1"><i class="mdi mdi-circle-medium align-middle text-primary mr-1"></i> Sed ut perspiciatis unde</p>
                                    <p class="mb-0"><i class="mdi mdi-circle-medium align-middle text-primary mr-1"></i> It would be necessary</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-4 align-self-center">
                            <div>
                                <img src="{{ asset('assets/images/crypto/features-img/img-1.png') }}" alt="" class="img-fluid d-block">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-muted mb-4"><i class="mdi mdi-bitcoin h2 text-warning align-middle mb-0 mr-3"></i> Monetary </p>

                            <div class="row">
                                <div class="col-6">
                                    <div>
                                        <h5>$ 9134.39</h5>
                                        <p class="text-muted text-truncate mb-0">+ 0.0012 ( 0.2 % ) <i class="mdi mdi-arrow-up ml-1 text-success"></i></p>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div>
                                        <div id="area-sparkline-chart-1" class="apex-charts"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-muted mb-4"><i class="mdi mdi-ethereum h2 text-primary align-middle mb-0 mr-3"></i> Equipment </p>

                            <div class="row">
                                <div class="col-6">
                                    <div>
                                        <h5>$ 245.44</h5>
                                        <p class="text-muted text-truncate mb-0">- 4.102 ( 0.1 % ) <i class="mdi mdi-arrow-down ml-1 text-danger"></i></p>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div>
                                        <div id="area-sparkline-chart-2" class="apex-charts"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="card">
                        <div class="card-body">
                            <p class="text-muted mb-4"><i class="mdi mdi-litecoin h2 text-info align-middle mb-0 mr-3"></i> Training </p>

                            <div class="row">
                                <div class="col-6">
                                    <div>
                                        <h5>$ 63.61</h5>
                                        <p class="text-muted text-truncate mb-0">+ 1.792 ( 0.1 % ) <i class="mdi mdi-arrow-up ml-1 text-success"></i></p>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div>
                                        <div id="area-sparkline-chart-3" class="apex-charts"></div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- end row -->

    <div class="row">
        <div class="col-xl-8">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-3">Wallet Balance</h4>

                    <div class="row">
                        <div class="col-lg-4">
                            <div class="mt-4">
                                <p>Available Balance</p>
                                <h4>$ 6134.39</h4>

                                <p class="text-muted mb-4"> + 0.0012.23 ( 0.2 % ) <i class="mdi mdi-arrow-up ml-1 text-success"></i></p>

                                <div class="row">
                                    <div class="col-6">
                                        <div>
                                            <p class="mb-2">Income</p>
                                            <h5>$ 2632.46</h5>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div>
                                            <p class="mb-2">Expense</p>
                                            <h5>$ 924.38</h5>
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-4">
                                    <a href="#" class="btn btn-primary btn-sm">View more <i class="mdi mdi-arrow-right ml-1"></i></a>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-sm-6">
                            <div>
                                <div id="wallet-balance-chart" class="apex-charts"></div>
                            </div>
                        </div>

                        <div class="col-lg-4 col-sm-6 align-self-center">
                            <div>
                                <p class="mb-2"><i class="mdi mdi-circle align-middle font-size-10 mr-2 text-primary"></i> Ethereum</p>
                                <h5>4.5701 ETH = <span class="text-muted font-size-14">$ 1123.64</span></h5>
                            </div>

                            <div class="mt-4 pt-2">
                                <p class="mb-2"><i class="mdi mdi-circle align-middle font-size-10 mr-2 text-warning"></i> Bitcoin</p>
                                <h5>0.4412 BTC = <span class="text-muted font-size-14">$ 4025.32</span></h5>
                            </div>

                            <div class="mt-4 pt-2">
                                <p class="mb-2"><i class="mdi mdi-circle align-middle font-size-10 mr-2 text-info"></i> Litecoin</p>
                                <h5>35.3811 LTC = <span class="text-muted font-size-14">$ 2263.09</span></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title mb-3">Overview</h4>

                    <div>
                        
                        <div id="overview-chart" class="apex-charts" dir="ltr">
                            <div class="toolbar button-items text-center">
                                <button type="button" class="btn btn-light btn-sm" id="one_month">
                                    1M
                                </button>
                                <button type="button" class="btn btn-light btn-sm" id="six_months">
                                    6M
                                </button>
                                <button type="button" class="btn btn-light btn-sm active" id="one_year">
                                    1Y
                                </button>
                                <button type="button" class="btn btn-light btn-sm" id="all">
                                    ALL
                                </button>
                            </div>
                            <div id="overview-chart-timeline"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end row -->

    
@endsection
@push('page_script')
    <!-- apexcharts -->
    <script src="{{ asset('assets/libs/apexcharts/apexcharts.min.js') }}"></script>

    <!-- Saas dashboard init -->
    <script src="{{ asset('assets/js/pages/saas-dashboard.init.js') }}"></script>

    <!-- crypto dash init js -->
    <script src="{{ asset('assets/js/pages/crypto-dashboard.init.js') }}"></script>
@endpush