<?php
// session_start();
require("../includes/db_connect.php");
require_once("includes/session_token.php");

$accountId = $_SESSION['usr_accountId'];

$balance_sql = "SELECT * FROM demo_trading_balances WHERE accountId=? LIMIT 1";
$balance_sth = $conn->prepare($balance_sql, [PDO::ATTR_CURSOR => PDO::CURSOR_FWDONLY]);
$balance_sth->execute([$accountId]);
$account_balances = $balance_sth->fetchAll();

foreach ($account_balances as $key => $value) {
    $usr_balance = $value['trade_amount'];
    $usr_margin = $value['margin'];
    $usr_profit = $value['profit'];

    $total_trade_amount = number_format($usr_balance, 2);
    $total_margin = number_format($usr_margin, 2);
    $total_profit = number_format($usr_profit, 2);
}

?>
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Demo Trading</title>
    <link rel="stylesheet" href="../css/bootstrap-select-country.min.css" />
    <link rel="stylesheet" href="../build/css/intlTelInput.css">

    <?php require_once("includes/header.php"); ?>


    <div class="content ht-100v pd-0">
        <div class="content-header center">
            <img src="../img/logo-white.png" class="aside-logo" style="width: 160px;" />
        </div>
        <div class="content-body">
            <div class="container pd-x-0">
                <div class="d-sm-flex align-items-center justify-content-between mg-b-20 mg-lg-b-25 mg-xl-b-30">
                    <div>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb breadcrumb-style1 mg-b-10">
                                <li class="breadcrumb-item"><a href="account">Dashboard</a></li>
                            </ol>
                        </nav>
                        <h4 class="mg-b-0 tx-spacing--1">Demo Trading</h4>
                    </div>
                    <div class="mg-t-20">
                        <a href="demo-trading-history" class="btn btn-sm pd-x-15 btn-white btn-uppercase"><i
                                data-feather="layers" class="wd-10 mg-r-5"></i> History</a>
                        <a href="trade-demo" class="btn btn-sm pd-x-15 btn-white btn-uppercase mg-l-5"><i
                                data-feather="dollar-sign" class="wd-10 mg-r-5"></i> Trade</a>
                    </div>
                </div>

                <div class="row row-xs">
                    <div class="col-sm-6 col-lg-6">
                        <div class="card card-body">
                            <h6 class="tx-uppercase tx-11 tx-spacing-1 tx-color-02 tx-semibold mg-b-8">Trade Amount
                            </h6>
                            <div class="d-flex d-lg-block d-xl-flex align-items-end">
                                <h3 class="tx-normal tx-rubik mg-b-0 mg-r-5 lh-1">$<?php echo ($total_trade_amount); ?>
                                </h3>
                            </div>
                            <?php
                                if ($total_margin > 0) {
                                    echo '<h6 class="tx-11 tx-spacing-1 tx-color-02 tx-semibold mg-b-8 mg-t-8">Margin:
                                    $' . $total_margin . '</h6>';
                                }
                            ?>
                        </div>
                    </div><!-- col -->
                    <div class="col-sm-6 col-lg-6 mg-t-10 mg-sm-t-0">
                        <div class="card card-body">
                            <h6 class="tx-uppercase tx-11 tx-spacing-1 tx-color-02 tx-semibold mg-b-8">Profit
                            </h6>
                            <div class="d-flex d-lg-block d-xl-flex align-items-end">
                                <h3 class="tx-normal tx-rubik mg-b-0 mg-r-5 lh-1">
                                    $<?php echo ($total_profit); ?></h3>
                            </div>
                            <?php
                                if ($total_margin > 0) {
                                    echo '<h6 class="tx-11 tx-spacing-1 tx-color-02 tx-semibold mg-b-8 mg-t-8"><br/></h6>';
                                }
                            ?>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-12 col-sm-12 mg-t-10">
                        <!-- 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>
                            {
                                "colorTheme": "light"
                            }
                            </script>
                        </div>
                        <div class="tradingview-widget-container mg-t-10">
                            <div id="tradingview_e8053"></div>
                            <script src="//s3.tradingview.com/tv.js"></script>
                            <script>
                            new TradingView.widget({
                                "width": "100%",
                                "height": 550,
                                "symbol": "BITSTAMP:BTCUSD",
                                "interval": "D",
                                "timezone": "Etc/UTC",
                                "theme": "light",
                                "style": "1",
                                "locale": "en",
                                "toolbar_bg": "#f1f3f6",
                                "enable_publishing": false,
                                "withdateranges": true,
                                "hide_side_toolbar": false,
                                "allow_symbol_change": true,
                                "show_popup_button": true,
                                "popup_width": "1000",
                                "popup_height": "650",
                                "container_id": "tradingview_e8053"
                            });
                            </script>
                        </div>
                    </div>
                </div>

            </div>
        </div><!-- content-body -->
    </div><!-- content -->

    <?php require_once("includes/footer.php"); ?>
    <script src="../build/js/intlTelInput.min.js"></script>
    <script src="../build/js/intlTelInput-jquery.min.js"></script>
    <script src="../js/bootstrap-select-country.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var classes = $("#mn-trading").prop('class');
        $("#mn-trading").prop('class', classes + ' active pcoded-trigger');

        var classes = $("#mn-demo-trading").prop('class');
        $("#mn-demo-trading").prop('class', classes + ' active pcoded-trigger');

    });
    </script>
    <!--<script src="../js/demo-trading.js"></script>-->

    </body>

</html>