@extends('layout.appHomeNew')

@section('content')
<section class="small-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center services">
                <h4 class="title">
                    Wallet
                </h4>
                <p>Hello, {{@$user->identity->first_name}}</p>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</section>

<section class="section bg-lightWhite">
    <div class="container">
        <div class="row bg-offWhite pad-rad">
            <div class="col col-lg-3 mt-3">
                <div class="currency-tab-wrap">
                    <div class="currency-tab active" data-tab="1">
                        <div class="icon">
                            <img src="asset/package/qbatheme/images/icons/icon-btc.png" />
                            <span>BTC</span>
                        </div>
                        <div class="account">
                            <div class="balance">
                                <span class="amount">{{@$user->BTC}}</span>
                                <span class="unit">BTC</span>
                            </div>
                            <div class="opt">
                                <!-- <a href="wallet-withdraw.html">Withdraw</a> -->
                                <a href="javascript:;">Deposit</a>
                            </div>
                        </div>
                    </div>
                    <div class="currency-tab" data-tab="2">
                        <div class="icon">
                            <img src="asset/package/qbatheme/images/icons/icon-eth.png" />
                            <span>ETH</span>
                        </div>
                        <div class="account">
                            <div class="balance">
                                <span class="amount">{{number_format(@$user->ETH,6)}}</span>
                                <span class="unit">ETH</span>
                            </div>
                            <div class="opt">
                                <a href="{{url('/withdrawETH')}}">Withdraw</a>&nbsp;
                                <a href="javascript:;">Deposit</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col col-lg-9 mt-3 currency-ext">
                <div class="currency-det active" id="1">
                    <div class="caurrency-title">
                        <span>BTC</span> Deposit
                    </div>
                    <div class="currency-details">
                        <ol>
                            <li class="list mb-4">Please use your common wallet services, local wallet, mobile terminal or online wallet, select a payment and send.
                            </li>
                            <hr>
                            <li class="list mb-4">Please paste the address below in your wallet, and fill in the amount you want to deposit, then confirm and send.

                                <!-- QR Code Block -->
                                <div id="qrcode-BTC" class="qrcode-container img-thumbnail" data-width="180" data-height="180" data-text="{{@$user->btc_address}}" title="{{@$user->btc_address}}"></div>
                                <!-- End QR Code Block -->

                                <div class="cpyInput">
                                    <div class="title">Address</div>
                                    <div class="clipboardText">
                                        {{@$user->btc_address}}
                                    </div>
                                    <div class="btn-cpoy" title="Click to Copy">
                                        <img src="asset/package/qbatheme/images/icons/ic-copy.png" />
                                    </div>
                                </div>

                                Scan QR code to Pay through mobile terminal wallet.
                            </li>
                            <hr>
                            <li class="list mb-4">Once you complete sending, you can check the status of your new deposit below.
                                <div class="caurrency-title mt-4">Deposit History</div>
                                <!-- <div class="table-ops">
                                    <div class="downloads">
                                        <button class="uBtn-small bg-green br-green text-white me-0 ms-0 me-">Column visibility</button>
                                        <button class="uBtn-small bg-green br-green text-white me-0 ms-0 me-">Copy</button>
                                        <button class="uBtn-small bg-green br-green text-white me-0 ms-0 me-">CSV</button>
                                        <button class="uBtn-small bg-green br-green text-white me-0 ms-0 me-">Excel</button>
                                        <button class="uBtn-small bg-green br-green text-white me-0 ms-0 me-">Print</button>
                                    </div>
                                    <div class="search-data">
                                        <input type="text" class="form-control" placeholder="Search" name="search">
                                    </div>
                                </div>
                                <div class="table-ops records">
                                    <div class="downloads">
                                        <p>Showing 1 to 1 of 1 entries</p>
                                    </div>
                                    <div class="search-data">
                                        <select name="num" class="form-control">
                                            <option value="10">10</option>
                                            <option value="25">25</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                        </select>
                                    </div>
                                </div> -->
                                <div class="table-responsive">
                                    <table class="datatable-full table table-striped table-bordered custom-table-style">
                                        <thead>
                                            <tr>
                                                <th>Time</th>
                                                <th>Transaction ID </th>
                                                <th>Amount</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($history_btc as $btc_history)
                                            <tr>
                                                <td>{{$btc_history->created_at}}</td>
                                                <td>
                                                    <a href="https://blockchain.info/tx/{{ $btc_history->txn_hash }}" target="_blank">{{$btc_history->txn_hash}}</a>
                                                </td>
                                                <td>{{number_format($btc_history->amount,8)}}</td>
                                                <td>{{$btc_history->status}}</td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                <!-- <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
                                    </ul>
                                </nav> -->
                            </li>
                        </ol>
                    </div>
                </div>
                <div class="currency-det" id="2">
                    <div class="caurrency-title">
                        <span>ETH</span> Deposit
                    </div>
                    <div class="currency-details">
                        <ol>
                            <li class="list mb-4">Please use your common wallet services, local wallet, mobile terminal or online wallet, select a payment and send.
                            </li>
                            <hr>
                            <li class="list mb-4">Please paste the address below in your wallet, and fill in the amount you want to deposit, then confirm and send.
                                <!-- <img class="qr" src="assets/images/qr.png" /> -->
                                <!-- QR Code Block -->
                                <div id="qrcode-ETH" class="qrcode-container img-thumbnail" data-width="180" data-height="180" data-text="{{@Auth::user()->eth_address}}" title="{{@Auth::user()->eth_address}}"> </div>
                                <!-- End QR Code Block -->

                                <div class="cpyInput">
                                    <div class="title">Address</div>
                                    <div class="clipboardText">
                                        {{@Auth::user()->eth_address}}
                                    </div>
                                    <div class="btn-cpoy" title="Click to Copy">
                                        <img src="asset/package/qbatheme/images/icons/ic-copy.png" />
                                    </div>
                                </div>

                                Scan QR code to Pay through mobile terminal wallet.
                            </li>
                            <hr>
                            <li class="list mb-4">Once you complete sending, you can check the status of your new deposit below.
                                <div class="caurrency-title mt-4">Deposit History</div>
                                <!-- <div class="table-ops">
                                    <div class="downloads">
                                        <button class="uBtn-small bg-green br-green text-white me-0 ms-0 me-">Column visibility</button>
                                        <button class="uBtn-small bg-green br-green text-white me-0 ms-0 me-">Copy</button>
                                        <button class="uBtn-small bg-green br-green text-white me-0 ms-0 me-">CSV</button>
                                        <button class="uBtn-small bg-green br-green text-white me-0 ms-0 me-">Excel</button>
                                        <button class="uBtn-small bg-green br-green text-white me-0 ms-0 me-">Print</button>
                                    </div>
                                    <div class="search-data">
                                        <input type="text" class="form-control" placeholder="Search" name="search">
                                    </div>
                                </div>
                                <div class="table-ops records">
                                    <div class="downloads">
                                        <p>Showing 1 to 1 of 1 entries</p>
                                    </div>
                                    <div class="search-data">
                                        <select name="num" class="form-control">
                                            <option value="10">10</option>
                                            <option value="25">25</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                        </select>
                                    </div>
                                </div> -->
                                <div class="table-responsive">
                                    <table class="datatable-full table table-striped table-bordered custom-table-style">
                                        <thead>
                                            <tr>
                                                <th>Time</th>
                                                <th>Transaction ID </th>
                                                <th>Amount</th>
                                                <th>Status</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($history_eth as $eth_history)
                                            <tr>
                                                <td>{{$eth_history->created_at}}</td>
                                                <td>
                                                    <a href="https://etherscan.io/tx/{{ $eth_history->txn_hash }}" target="_blank">{{substr($eth_history->txn_hash, 0, 8).'****'}}</a>
                                                </td>
                                                <td>{{number_format($eth_history->amount,6)}}</td>
                                                <td>{{$eth_history->status}}</td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                                <!-- <nav aria-label="Page navigation example">
                                    <ul class="pagination justify-content-end">
                                        <li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
                                        <li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
                                    </ul>
                                </nav> -->
                            </li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection

@section('styles-new')
<style type="text/css">
    .introactive {
        background: #232020 !important;
        background: #140749 !important;
        color: #FFF;
    }

    .introactive .nav-link {
        color: #FFF;
    }



    div#deposit_address {
        font-size: 13px;
        font-weight: 500;
        padding: 11px;
        color: #000;
    }

    .custom-table-style thead tr th {
        vertical-align: middle;
        font-size: 12px;
        padding: 8px !important;
    }

    .custom-table-style tbody tr td {
        vertical-align: middle;
        font-size: 12px;
        padding: 8px !important;
        letter-spacing: .1px;
    }

    .send-code-button button.btn.btn-primary {
        padding: 10px 20px;
        background: #5f56e0;
        border: 1px solid #5f56e0;
    }

    .selectable {
        -webkit-touch-callout: all;
        /* iOS Safari */
        -webkit-user-select: all;
        /* Safari */
        -khtml-user-select: all;
        /* Konqueror HTML */
        -moz-user-select: all;
        /* Firefox */
        -ms-user-select: all;
        /* Internet Explorer/Edge */
        user-select: all;
        /* Chrome and Opera */

    }

    .alert-container {
        position: fixed;
        bottom: 5px;
        left: 11%;
        width: 32%;
        margin: 0 25% 0 25%;
        background-color: #e0afaf;
        z-index: 1;
    }

    .alert {
        text-align: center;
        padding: 17px 0 20px 0;
        margin: 0 25% 0 25%;
        height: 54px;
        font-size: 20px;
    }

    a.nav-item.nav-link {
        color: #8d8d8d !important;
    }
</style>
@endsection


@section('scripts-new')

<script type="text/javascript" src="{{asset('js/jquery.qrcode.js')}}"></script>
<script type="text/javascript" src="{{asset('js/qrcode.js')}}"></script>
<script type="text/javascript">
    var btc_address = $('#qrcode-BTC').data('text');
    $('#qrcode-BTC').qrcode(btc_address);
    var eth_address = $('#qrcode-ETH').data('text');
    $('#qrcode-ETH').qrcode(eth_address);


    var alert = $(".alert-container");
    alert.hide();

    function copyToClipboard(element) {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($(element).text()).select();
        document.execCommand("copy");
        $temp.remove();
        alert.slideDown();
        window.setTimeout(function() {
            alert.slideUp();
        }, 2500);
    }
</script>
@endsection