@extends('user.layout.content')
@section('content')


        <!-- Page content -->
        <div class="page-content">
            <!-- Page title -->
            <div class="page-title">
                <div class="row justify-content-between align-items-center">
                    <div class="mb-3 col-md-6 mb-md-0">
                        <p class="mb-0 text-white h3 font-weight-400">Swap Crypto</p>
                    </div>
                </div>
            </div>
            <div>
            </div>    <div>
            </div>    <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="mt-2 mb-4">

                                <div class="d-inline">
                                    <a href="https://noblenegotiators.com/dashboard/swap-history" class="float-right btn btn-primary btn-sm">Transactions</a>
                                </div>
                                <p class="text-">
                                    Earn even more when you swap your Account balance to and from crypto.
                                </p>
                                <div class="row">
                                    <div class="col-sm-6 col-lg-3">
                                        <div class="p-3 card bg- shadow">
                                            <div class="d-flex align-items-center">
                                        <span class="mr-3 bg-transparent stamp stamp-md">

                                        </span>
                                                <div>
                                                    <p class="mb-1 text-">
                                                        <b>$0.00</b>
                                                    </p>
                                                    <small class="text-muted">Account Balance</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-lg-3">
                                        <div class="p-3 card bg- shadow">
                                            <div class="d-flex align-items-center">
                                            <span class="mr-3 bg-transparent stamp stamp-md">
                                                <img class="w-50"
                                                     src="https://img.icons8.com/color/48/000000/bitcoin--v1.png" />
                                            </span>
                                                <div>
                                                    <p class="mb-1 text-"><b>0
                                                            BTC</b></p>
                                                    <small class="text-muted usdelement" id="btc"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-lg-3">
                                        <div class="p-3 card bg- shadow">
                                            <div class="d-flex align-items-center">
                                            <span class="mr-3 bg-transparent stamp stamp-md">
                                                <img class="w-50"
                                                     src="https://img.icons8.com/fluency/48/000000/ethereum.png" />
                                            </span>
                                                <div>
                                                    <p class="mb-1 text-">
                                                        <b>0 ETH</b></p>
                                                    <small class="text-muted usdelement" id="eth"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-lg-3">
                                        <div class="p-3 card bg- shadow">
                                            <div class="d-flex align-items-center">
                                            <span class="mr-3 bg-transparent stamp stamp-md">
                                                <img class="w-50"
                                                     src="https://img.icons8.com/fluency/48/000000/litecoin.png" />
                                            </span>
                                                <div>
                                                    <p class="mb-1 text-">
                                                        <b>0 LTC</b></p>
                                                    <small class="text-muted usdelement" id="ltc"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-lg-3">
                                        <div class="p-3 card bg- shadow">
                                            <div class="d-flex align-items-center">
                                            <span class="mr-3 bg-transparent stamp stamp-md">
                                                <img class="w-50"
                                                     src="https://img.icons8.com/cotton/64/000000/chainlink.png" />
                                            </span>
                                                <div>
                                                    <p class="mb-1 text-">
                                                        <b>0 LINK</b></p>
                                                    <small class="text-muted usdelement" id="link"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6 col-lg-3">
                                        <div class="p-3 card bg- shadow">
                                            <div class="d-flex align-items-center">
                                            <span class="mr-3 bg-transparent stamp stamp-md">
                                                <img class="w-50"
                                                     src="https://s2.coinmarketcap.com/static/img/coins/64x64/1839.png" />
                                            </span>
                                                <div>
                                                    <p class="mb-1 text-">
                                                        <b>0 BNB</b></p>
                                                    <small class="text-muted usdelement" id="bnb"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6 col-lg-3">
                                        <div class="p-3 card bg- shadow">
                                            <div class="d-flex align-items-center">
                                            <span class="mr-3 bg-transparent stamp stamp-md">
                                                <img class="w-50"
                                                     src="https://s2.coinmarketcap.com/static/img/coins/64x64/2010.png" />
                                            </span>
                                                <div>
                                                    <p class="mb-1 text-">
                                                        <b>0 ADA</b></p>
                                                    <small class="text-muted usdelement" id="ada"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-sm-6 col-lg-3">
                                        <div class="p-3 card bg- shadow">
                                            <div class="d-flex align-items-center">
                                            <span class="mr-3 bg-transparent stamp stamp-md">
                                                <img class="w-25"
                                                     src="https://dynamic-assets.coinbase.com/6ad513d3c9108b163cf0a4c9fd3441cadcb9cf656ea7b9fb333eb7e4a94cd503528e0a94188285d31aedfc392f0793fd4161f7ad4e04d5f6b82e4d70a314d295/asset_icons/80f3d2256652f5ccd680fc48702d130dd01f1bd7c9737fac560a02949efac3b9.png" />
                                            </span>
                                                <div>
                                                    <p class="mb-1 text-">
                                                        <b>0 AAVE</b></p>
                                                    <small class="text-muted usdelement" id="aave"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-lg-3">
                                        <div class="p-3 card bg- shadow">
                                            <div class="d-flex align-items-center">
                                            <span class="mr-3 bg-transparent stamp stamp-md">
                                                <img class="w-50"
                                                     src="https://img.icons8.com/color/48/000000/tether--v2.png" />
                                            </span>
                                                <div>
                                                    <p class="mb-1 text-">
                                                        <b>0 USDT</b></p>
                                                    <small
                                                        class="text-muted">$0
                                                    </small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-lg-3">
                                        <div class="p-3 card bg- shadow">
                                            <div class="d-flex align-items-center">
                                            <span class="mr-3 bg-transparent stamp stamp-md">
                                                <img class="w-75"
                                                     src="https://img.icons8.com/material-sharp/24/000000/bitcoin.png" />
                                            </span>
                                                <div>
                                                    <p class="mb-1 text-">
                                                        <b>0 BCH</b></p>
                                                    <small class="text-muted usdelement" id="bch"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-lg-3">
                                        <div class="p-3 card bg- shadow">
                                            <div class="d-flex align-items-center">
                                            <span class="mr-3 bg-transparent stamp stamp-md">
                                                <img class="w-50"
                                                     src="https://img.icons8.com/fluency/48/000000/ripple.png" />
                                            </span>
                                                <div>
                                                    <p class="mb-1 text-">
                                                        <b>0 XRP</b></p>
                                                    <small class="text-muted usdelement" id="xrp"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6 col-lg-3">
                                        <div class="p-3 card bg- shadow">
                                            <div class="d-flex align-items-center">
                                            <span class="mr-3 bg-transparent stamp stamp-md">
                                                <img class="w-50"
                                                     src="https://img.icons8.com/ios/50/000000/stellar.png" />
                                            </span>
                                                <div>
                                                    <p class="mb-1 text-">
                                                        <b>0 XLM</b></p>
                                                    <small class="text-muted usdelement" id="xlm"></small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-8">
                                        <div class="tradingview-widget-container">
                                            <div id="tradingview_f933e"></div>
                                            <div class="tradingview-widget-copyright">
                                                <a href="#" rel="noopener" target="_blank"><span class="blue-text"></span>
                                                    <span class="blue-text">Personal trading chart</span></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <form method="POST" action="javascript:void(0)" id="exchnageform">
                                            <input type="hidden" name="_token" value="OhkzVKBPWzQowkMSVSuTdX5GvAV8lkvjr1pjndKn">                                    <div class="form-group">
                                                <p class="text-">Source Account</p>
                                                <select class="form-control text- bg-"
                                                        name="source" id="sourceasset">
                                                    <option value="btc">BTC</option>
                                                    <option value="link">LINK</option>
                                                    <option value="bnb">BNB</option>
                                                    <option value="ada">ADA</option>
                                                    <option value="aave">AAVE</option>
                                                    <option value="xlm">XLM</option>
                                                    <option value="xrp">XRP</option>
                                                    <option value="ltc">LTC</option>
                                                    <option value="bch">BCH</option>
                                                    <option value="eth">ETH</option>
                                                    <option value="usdt">USDT</option>
                                                    <option value="usd">USD</option>
                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <p class="text-">Destination Account</p>
                                                <select name="destination"
                                                        class="form-control text- bg-"
                                                        id="destinationasset">
                                                    <option value="usd">USD</option>
                                                    <option value="btc">BTC</option>
                                                    <option value="link">LINK</option>
                                                    <option value="bnb">BNB</option>
                                                    <option value="ada">ADA</option>
                                                    <option value="aave">AAVE</option>
                                                    <option value="xlm">XLM</option>
                                                    <option value="xrp">XRP</option>
                                                    <option value="ltc">LTC</option>
                                                    <option value="bch">BCH</option>
                                                    <option value="eth">ETH</option>
                                                    <option value="usdt">USDT</option>
                                                </select>
                                                <small class="text-">NOTE:USD is your account balance.</small>
                                            </div>

                                            <div class="form-group">
                                                <p class="text-">Amount</p>
                                                <input type="text" name="amount"
                                                       class="form-control text- bg-"
                                                       placeholder="Enter amount of btc" id="amount">
                                            </div>
                                            <div class="form-group">
                                                <p class="text-">You will get</p>
                                                <input type="text"
                                                       class="form-control text- bg-"
                                                       placeholder="Quantity of usd" id="quantity" readonly </div>
                                            <input type="hidden" id="realquantity" name="quantity">
                                            <div class="form-group">
                                            <span class="mb-1 ml-2 caption">
                                                <span class="text-"><b>Fees =
                                                        2%</b></span>
                                            </span>
                                            </div>

                                            <div class="cta inline-group">
                                                <button class="btn btn-success btn-block btn-sm" disbaled>
                                                    Swap
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
            <script type="text/javascript">
                new TradingView.widget({
                    "width": "100%",
                    "height": "400",
                    "symbol": "COINBASE:BTCUSD",
                    "interval": "1",
                    "timezone": "Etc/UTC",
                    "theme": '',
                    "style": "9",
                    "locale": "en",
                    "toolbar_bg": "#f1f3f6",
                    "enable_publishing": false,
                    "hide_side_toolbar": false,
                    "allow_symbol_change": true,
                    "calendar": false,
                    "studies": [
                        "BB@tv-basicstudies"
                    ],
                    "container_id": "tradingview_f933e"
                });
            </script>

            <script>
                let destinationasset = document.getElementById('destinationasset');
                let sourceasset = document.getElementById('sourceasset');
                let amount = document.getElementById('amount');
                let quatity = document.getElementById('quantity');
                // console.log(destinationasset);

                destinationasset.addEventListener('change', validate);
                sourceasset.addEventListener('change', validate);
                if (destinationasset.value == sourceasset.value) {
                    $.notify({
                        // options
                        icon: 'flaticon-alarm-1',
                        title: '',
                        message: 'Source and Destination account cannot be thesame',
                    },{
                        type: 'danger',
                    });

                    destinationasset.value = '';
                    amount.placeholder = '';
                    quatity.placeholder = '';
                    amount.value = '';
                    quatity.value = '';
                } else {
                    amount.placeholder = `Enter amount of ${sourceasset.value}`;
                    quatity.placeholder = `Quantity of ${destinationasset.value}`;

                }
                function validate(){
                    amount.value = '';
                    quatity.value = '';
                    if (destinationasset.value == sourceasset.value) {
                        $.notify({
                            // options
                            icon: 'flaticon-alarm-1',
                            title: '',
                            message: 'Source and Destination account cannot be thesame',
                        },{
                            type: 'danger',
                        });

                        destinationasset.value = '';
                        amount.placeholder = '';
                        quatity.placeholder = '';
                        amount.value = '';
                        quatity.value = '';
                    } else {
                        amount.placeholder = `Enter amount of ${sourceasset.value}`;
                        quatity.placeholder = `Quantity of ${destinationasset.value}`;

                    }
                }

                amount.addEventListener('keyup', getQuantity);

                function getQuantity(){
                    let uurl = "https://noblenegotiators.com/dashboard/asset-price" + '/' + sourceasset.value  + '/' + destinationasset.value+ '/' + amount.value;
                    $.ajax({
                        url: uurl,
                        type: 'GET',

                        success: function(response) {
                            if (response.status === 200) {
                                //console.log(response.data);
                                quatity.value = response.data + ' ' + destinationasset.value;
                                document.getElementById('realquantity').value = response.data;
                            }
                        },
                        error: function(error) {
                            console.log(error);
                        },

                    });
                }

                document.getElementById('exchnageform').addEventListener('submit', exchangeNow)

                function exchangeNow(event) {
                    // alert('hey');
                    event.preventDefault();
                    if (amount.value == '') {
                        $.notify({
                            // options
                            icon: 'flaticon-alarm-1',
                            title: '',
                            message: 'Please Enter an Amount to Exchange',
                        },{
                            type: 'danger',
                        });
                    }else{
                        $.ajax({
                            url: "https://noblenegotiators.com/dashboard/exchange",
                            type: 'POST',
                            data: $('#exchnageform').serialize(),
                            success: function(response) {
                                if (response.status === 200) {
                                    $.notify({
                                        icon: 'flaticon-alarm-1',
                                        title: 'Success',
                                        message: response.success,
                                    },{
                                        type: 'success',
                                    });

                                    setTimeout(function(){ window.location.reload(true);}, 3000);

                                } else {
                                    $.notify({
                                        icon: 'flaticon-alarm-1',
                                        title: 'Error',
                                        message: response.message,
                                    },{
                                        type: 'danger',
                                    });
                                }
                            },
                            error: function(data) {
                                console.log(data);
                            },

                        });
                    }

                };

                function getcurrbalance() {
                    let usdelement = document.querySelectorAll('.usdelement');
                    //console.log(usdelement);
                    usdelement.forEach(element => {
                        let coin = element.id;
                        $.ajax({
                            url: "https://noblenegotiators.com/dashboard/balances" + '/' + coin,
                            type: 'GET',
                            success: function(response) {
                                element.textContent  = "$" + response.data;
                            },
                            error: function(error) {
                                console.log(error);
                            },
                        });
                    });
                }
                getcurrbalance();
                setTimeout(function(){getcurrbalance();}, 60000);

            </script>            </div>



@endsection