@extends('layouts.user')

@section('title', 'Dashboard')

@section('content')
    <br><br><br>
    <!-- TradingView Widget BEGIN -->
    <div class="tradingview-widget-container">
        <div class="tradingview-widget-container__widget"></div>
        <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js" async>
            {
                "symbols": [
                {
                    "proName": "FX_IDC:EURUSD",
                    "title": "EUR/USD"
                },
                {
                    "proName": "BITSTAMP:BTCUSD",
                    "title": "BTC/USD"
                },
                {
                    "proName": "BITSTAMP:ETHUSD",
                    "title": "ETH/USD"
                },
                {
                    "description": "BCH/USD",
                    "proName": "KRAKEN:BCHUSD"
                },
                {
                    "description": "BNB/BTC",
                    "proName": "BINANCE:BNBBTC"
                },
                {
                    "description": "DOT/USD",
                    "proName": "KRAKEN:DOTUSD"
                },
                {
                    "description": "BNB/USDT",
                    "proName": "BINANCE:BNBUSDT"
                },
                {
                    "description": "ETH/USDT",
                    "proName": "KRAKEN:ETHUSDT"
                },
                {
                    "description": "TRX/USD",
                    "proName": "BINANCE:TRXUSDT"
                },
                {
                    "description": "BTT/USDT",
                    "proName": "BINANCE:BTTUSDT"
                },
                {
                    "description": "BTT/USD",
                    "proName": "BITFINEX:BTTUSD"
                },
                {
                    "description": "NEO/USD",
                    "proName": "BITFINEX:NEOUSD"
                }
            ],
                "colorTheme": "dark",
                "isTransparent": false,
                "displayMode": "adaptive",
                "locale": "en"
            }
        </script>
    </div>
    <!-- TradingView Widget END -->
    <div class="nk-content ">
        <div class="container-fluid">
            <div class="nk-content-inner">
                <div class="nk-content-body">
                    <div class="nk-block-head nk-block-head-sm">
                        <div class="nk-block-between">
                            <div class="nk-block-head-content">
                                <h3 class="nk-block-title page-title">Dashboard</h3>
                            </div><!-- .nk-block-head-content -->
                            <div class="nk-block-head-content">
                                <div class="toggle-wrap nk-block-tools-toggle">
                                    <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="pageMenu"><em class="icon ni ni-wallet"></em></a>
                                    <div class="toggle-expand-content" data-content="pageMenu">
                                        <ul class="nk-block-tools g-3">
                                            <li><a href="{{ route('depositPlan') }}" class="btn btn-white btn-dim btn-outline-light"><span>Deposit</span><em class="dd-indc icon ni ni-download"></em></a></li>
                                            <li class="nk-block-tools-opt"><a href="{{ route('request') }}" class="btn btn-primary"><span>Withdraw</span><em class="icon ni ni-upload"></em></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div><!-- .nk-block-head-content -->
                        </div><!-- .nk-block-between -->
                    </div><!-- .nk-block-head -->
                    <div class="nk-block">
                        <div class="row g-gs">
                            <div class="col-xxl-3 col-sm-6">
                                <div class="card">
                                    <div class="nk-ecwg nk-ecwg6">
                                        <div class="card-inner">
                                            <div class="card-title-group">
                                                <div class="card-title">
                                                    <h6 class="title">Account Balance</h6>
                                                </div>
                                            </div>
                                            <div class="data">
                                                <div class="data-group">
                                                    <div class="amount">$ {{ number_format($account['amount'], 2) }}</div>
                                                    <div class="nk-ecwg6-ck">
                                                        <canvas class="ecommerce-line-chart-s3" id="todayOrders"></canvas>
                                                    </div>
                                                </div>
                                            </div>
                                        </div><!-- .card-inner -->
                                    </div><!-- .nk-ecwg -->
                                </div><!-- .card -->
                            </div><!-- .col -->
                            <div class="col-xxl-3 col-sm-6">
                                <div class="card">
                                    <div class="nk-ecwg nk-ecwg6">
                                        <div class="card-inner">
                                            <div class="card-title-group">
                                                <div class="card-title">
                                                    <h6 class="title">Deposits</h6>
                                                </div>
                                            </div>
                                            <div class="data">
                                                <div class="data-group">
                                                    <div class="amount">$ {{ number_format($deposit == null ? false : $deposit->sum('amount'), 2) }}</div>
                                                    <div class="nk-ecwg6-ck">
                                                        <canvas class="ecommerce-line-chart-s3" id="todayRevenue"></canvas>
                                                    </div>
                                                </div>
                                            </div>
                                        </div><!-- .card-inner -->
                                    </div><!-- .nk-ecwg -->
                                </div><!-- .card -->
                            </div><!-- .col -->
                            <div class="col-xxl-3 col-sm-6">
                                <div class="card">
                                    <div class="nk-ecwg nk-ecwg6">
                                        <div class="card-inner">
                                            <div class="card-title-group">
                                                <div class="card-title">
                                                    <h6 class="title">Withdrawals</h6>
                                                </div>
                                            </div>
                                            <div class="data">
                                                <div class="data-group">
                                                    <div class="amount">$ {{ number_format($withdrawal == null ? false : $withdrawal->sum('amount'), 2) }}</div>
                                                    <div class="nk-ecwg6-ck">
                                                        <canvas class="ecommerce-line-chart-s3" id="todayCustomers"></canvas>
                                                    </div>
                                                </div>
                                            </div>
                                        </div><!-- .card-inner -->
                                    </div><!-- .nk-ecwg -->
                                </div><!-- .card -->
                            </div><!-- .col -->
                            <div class="col-xxl-3 col-sm-6">
                                <div class="card">
                                    <div class="nk-ecwg nk-ecwg6">
                                        <div class="card-inner">
                                            <div class="card-title-group">
                                                <div class="card-title">
                                                    <h6 class="title">Interest</h6>
                                                </div>
                                            </div>
                                            <div class="data">
                                                <div class="data-group">
                                                    <div class="amount">$ {{ number_format($account['interest'], 2) }}</div>
                                                    <div class="nk-ecwg6-ck">
                                                        <canvas class="ecommerce-line-chart-s3" id="todayVisitors"></canvas>
                                                    </div>
                                                </div>
                                            </div>
                                        </div><!-- .card-inner -->
                                    </div><!-- .nk-ecwg -->
                                </div><!-- .card -->
                            </div><!-- .col -->
                            <div class="col-xxl-6">
                                <div class="card card-full">
                                    <div class="nk-ecwg nk-ecwg8 h-100">
                                        <div class="card-inner">
                                            <div class="card-title-group mb-3">
                                                <div class="card-title">
                                                    <h6 class="title">Market Prices</h6>
                                                </div>
                                            </div>
                                            <div class="nk-ecwg8-ck">
                                                <!-- TradingView Widget BEGIN -->
                                                <div class="tradingview-widget-container">
                                                    <div class="tradingview-widget-container__widget"></div>
                                                    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-market-quotes.js" async>
                                                        {
                                                            "width": "100%",
                                                            "height": "100%",
                                                            "symbolsGroups": [
                                                            {
                                                                "name": "Indices",
                                                                "originalName": "Indices",
                                                                "symbols": [
                                                                    {
                                                                        "name": "FOREXCOM:SPXUSD",
                                                                        "displayName": "S&P 500"
                                                                    },
                                                                    {
                                                                        "name": "FOREXCOM:NSXUSD",
                                                                        "displayName": "US 100"
                                                                    },
                                                                    {
                                                                        "name": "FOREXCOM:DJI",
                                                                        "displayName": "Dow 30"
                                                                    },
                                                                    {
                                                                        "name": "INDEX:NKY",
                                                                        "displayName": "Nikkei 225"
                                                                    },
                                                                    {
                                                                        "name": "INDEX:DEU40",
                                                                        "displayName": "DAX Index"
                                                                    },
                                                                    {
                                                                        "name": "FOREXCOM:UKXGBP",
                                                                        "displayName": "UK 100"
                                                                    }
                                                                ]
                                                            },
                                                            {
                                                                "name": "Futures",
                                                                "originalName": "Futures",
                                                                "symbols": [
                                                                    {
                                                                        "name": "CME_MINI:ES1!",
                                                                        "displayName": "S&P 500"
                                                                    },
                                                                    {
                                                                        "name": "CME:6E1!",
                                                                        "displayName": "Euro"
                                                                    },
                                                                    {
                                                                        "name": "COMEX:GC1!",
                                                                        "displayName": "Gold"
                                                                    },
                                                                    {
                                                                        "name": "NYMEX:CL1!",
                                                                        "displayName": "Crude Oil"
                                                                    },
                                                                    {
                                                                        "name": "NYMEX:NG1!",
                                                                        "displayName": "Natural Gas"
                                                                    },
                                                                    {
                                                                        "name": "CBOT:ZC1!",
                                                                        "displayName": "Corn"
                                                                    }
                                                                ]
                                                            },
                                                            {
                                                                "name": "Bonds",
                                                                "originalName": "Bonds",
                                                                "symbols": [
                                                                    {
                                                                        "name": "CME:GE1!",
                                                                        "displayName": "Eurodollar"
                                                                    },
                                                                    {
                                                                        "name": "CBOT:ZB1!",
                                                                        "displayName": "T-Bond"
                                                                    },
                                                                    {
                                                                        "name": "CBOT:UB1!",
                                                                        "displayName": "Ultra T-Bond"
                                                                    },
                                                                    {
                                                                        "name": "EUREX:FGBL1!",
                                                                        "displayName": "Euro Bund"
                                                                    },
                                                                    {
                                                                        "name": "EUREX:FBTP1!",
                                                                        "displayName": "Euro BTP"
                                                                    },
                                                                    {
                                                                        "name": "EUREX:FGBM1!",
                                                                        "displayName": "Euro BOBL"
                                                                    }
                                                                ]
                                                            },
                                                            {
                                                                "name": "Forex",
                                                                "originalName": "Forex",
                                                                "symbols": [
                                                                    {
                                                                        "name": "FX:EURUSD"
                                                                    },
                                                                    {
                                                                        "name": "FX:GBPUSD"
                                                                    },
                                                                    {
                                                                        "name": "FX:USDJPY"
                                                                    },
                                                                    {
                                                                        "name": "FX:USDCHF"
                                                                    },
                                                                    {
                                                                        "name": "FX:AUDUSD"
                                                                    },
                                                                    {
                                                                        "name": "FX:USDCAD"
                                                                    }
                                                                ]
                                                            }
                                                        ],
                                                            "showSymbolLogo": true,
                                                            "colorTheme": "dark",
                                                            "isTransparent": false,
                                                            "locale": "en"
                                                        }
                                                    </script>
                                                </div>
                                                <!-- TradingView Widget END -->
                                            </div>
                                        </div><!-- .card-inner -->
                                    </div>
                                </div><!-- .card -->
                            </div><!-- .col -->
                            <div class="col-xxl-12 col-md-12">
                                <div class="card h-100">
                                    <div class="card-inner">
                                        <div class="card-head">
                                            <h5 class="card-title">Invite members to {{ config('app.website_name') }} and earn more</h5>
                                        </div>
                                        <form action="#">
                                            <div class="form-group">
                                                <label class="form-label" for="full-name">Affiliate Link</label>
                                                <div class="form-control-wrap">
                                                    <input type="text" readonly class="form-control js-copytextarea" value="{{ route('register') }}?ref={{ $user->ref_code }}" id="full-name">
                                                </div>
                                            </div>
                                            <div class="form-group">
                                                <button type="button" class="btn btn-lg btn-primary js-textareacopybtn">Copy your affiliate link</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div><!-- .row -->
                    </div><!-- .nk-block -->
                </div>
            </div>
        </div>
    </div>

    <script>
        var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

        copyTextareaBtn.addEventListener('click', function(event) {
            var copyTextarea = document.querySelector('.js-copytextarea');
            copyTextarea.select();

            try {
                var successful = document.execCommand('copy');
                var msg = successful ? 'successful' : 'unsuccessful';

                console.log('Copying text command was ' + msg);
            } catch (err) {
                console.log('Oops, unable to copy');
            }
        });
    </script>
@endsection