@extends('layouts.frontend-member')

@section('title', 'trading rule')

@section('content')

    <div id="app" class="app app-trade">
        <article class="page page-trade">
            <header>
                <h3 class="text-title">
                    <div class="mod-h-tab"><b class="cur">ซื้อขาย</b> <b class="activeCount">
                            ประวัติซื้อขาย
                            <!----></b></div>
                </h3>
                <div class="back cursor" style="z-index: 1000001;" onclick="history.back()"><i class="iconfont icon-fanhui"></i></div>
                <div class="action"></div>
            </header>
            <main>
                <section class="quote">
                    <div><span>BTC</span> <i class="iconfont icon-jiantou"></i></div>
                    <div class="text-lows"><span style="">42776.27</span> <span style="">-0.48%</span></div>
                </section>
                <section class="tabs">
                    <ul class="mod-trade-tab">
                        <li class="cur">
                            Second
                        </li>
                        <li class="">
                            1 min
                        </li>
                        <li class="">
                            5 min
                        </li>
                        <li class="">
                            15 min
                        </li>
                        <li class="">
                            30 min
                        </li>
                        <li class="">
                            Hour
                        </li>
                        <li class="">
                            Day
                        </li>
                    </ul>
                </section>
                <section class="chart"
                    style="touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                    <canvas width="628" height="632" style="width: 628px; height: 632px;"></canvas>
                    <div class="lines" style="display: none;"><i class="h" style="top: 0px;"></i> <i class="v"
                            style="left: 0px;"></i> <b class="sl-p" style="top: 0px; display: none;">0.00</b> <b
                            class="m" style="left: 0px; width: 0.6rem;"></b></div>
                    <div class="heartbeat" style="left: -0.1rem; top: -0.1rem; display: none;"></div>
                    <div class="incomes text-highs" style="top: -0.1rem; display: none;"><!----> <b>+0.00</b> <b>+0.00%</b>
                    </div>
                </section>
                <section class="trade">
                    <header>
                        <div><b>คำสั่งซื้อราคาตลาด</b> <i class="iconfont icon-jiantou text-s08"></i>&nbsp;
                            <!---->
                        </div>
                        <div class="c-spinner" style="display: none;"><i class="iconfont icon-jian"></i> <input
                                placeholder="" type="text" maxlength="12" autocomplete="off"> <i
                                class="iconfont icon-jia"></i></div>
                        <div><!----> <span class="text-lesser cur">มาตรฐาน</span> <span class="text-lesser">มืออาชีพ</span>
                        </div>
                    </header>
                    <section class="edition">
                        <div class="std std-in">
                            <div class="quantity">
                                <h4><span>BTC</span> <span class="text-s10">
                                        มูลค่าการซื้อขาย ≈
                                        <b class="text-white">47054 USDT</b></span></h4>
                                <ul>
                                    <li class="">
                                        0.65
                                    </li>
                                    <li class="cur">
                                        1.1
                                    </li>
                                    <li class="">
                                        1.7
                                    </li>
                                    <li class="">
                                        2.2
                                    </li>
                                    <li class="more"><b class="text-s12">มากกว่า</b> <i
                                            class="iconfont icon-jiantou text-s08"></i></li>
                                </ul>
                            </div>
                            <div class="margin">
                                <h4><span>
                                        มาร์จิ้น USDT
                                    </span> <span class="text-s10">เลเวอเรจ≈28x /
                                        หยุดกำไร +8335 / หยุดการขาดทุน
                                        -1333.60</span></h4>
                                <ul>
                                    <li class="">
                                        500
                                    </li>
                                    <li class="">
                                        1000
                                    </li>
                                    <li class="cur">
                                        1667
                                    </li>
                                    <li class="">
                                        2500
                                    </li>
                                    <li class="">
                                        5000
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="pro pro-out2">
                            <ul>
                                <li>
                                    <h4 class="text-s12">
                                        ซื้อเข้าBTCหลักหน่วย
                                    </h4>
                                    <div class="c-spinner"><i class="iconfont icon-jian"></i> <input placeholder=""
                                            type="text" maxlength="12" autocomplete="off"> <i
                                            class="iconfont icon-jia"></i></div>
                                </li>
                                <li>
                                    <h4 class="text-s12">เลเวอเรจทวีคูณ</h4>
                                    <div class="mod-select"><span>10x</span> <i class="iconfont icon-jiantou"></i></div>
                                </li>
                                <li>
                                    <h4 class="text-s12">
                                        มาร์จิ้น
                                    </h4> <input type="text" maxlength="7" class="">
                                </li>
                            </ul>
                            <ul>
                                <li class="">
                                    1/4Position
                                </li>
                                <li class="">
                                    1/3Position
                                </li>
                                <li class="">
                                    Half position
                                </li>
                                <li class="">
                                    full position
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    มูลค่าการซื้อขาย ≈
                                    <b class="text-white">47054 USDT</b>
                                </li>
                                <li>
                                    หยุดกำไร +8335 / หยุดการขาดทุน
                                    -1333.60
                                </li>
                            </ul>
                        </div>
                        <div class="final">
                            <div class="final-summer"><span>
                                    มาร์จิ้นUSDT
                                    <i class="iconfont icon-wen text-s12 text-stress"></i></span> <span
                                    class="text-lesser">เลเวอเรจ ≈200x</span> <span class="text-lesser">
                                    รายละเอียดการทำธุรกรรม
                                    <i class="iconfont icon-fanhui text-s12 up"></i></span></div>
                            <ul class="final-select">
                                <li class="">
                                    2
                                </li>
                                <li class="">
                                    5
                                </li>
                                <li class="">
                                    10
                                </li>
                                <li class="">
                                    20
                                </li>
                                <li class="">
                                    30
                                </li>
                                <li class="">
                                    50
                                </li>
                                <li class="">
                                    100
                                </li>
                            </ul>
                        </div>
                    </section>
                    <footer><span><b>คุณต้องชำระ 1667 USDT</b></span> <span><!---->
                            ใช้ได้
                            <em>0 USDT</em> 
                            <a href="{{ route('topup.index') }}">เติมเงิน</a>
                        </span>
                    </footer> <!----> <!---->
                </section>
                <section class="action"><button class="text-highs-bg"><b>ขึ้น</b> <span>42780.08</span> <i
                            style="width: 156.447%;"></i></button> <button class="text-lows-bg"><b>ลง</b>
                        <span>42780.07</span> <i style="width: 27.2766%;"></i></button> <button class="close"
                        style="display: none;">
                        การชำระบัญชีBTC
                    </button></section>
            </main> <!---->
        </article>
        <article class="page page-order" style="display: none;">
            <header>
                <h3>
                    <div class="mod-h-tab"><b class="cur">ซื้อขาย</b> <b class="">ประวัติซื้อขาย</b></div>
                </h3>
                <div class="back" style="z-index: 1000001;"><i class="iconfont icon-fanhui"></i></div>
                <div class="action"></div>
            </header>
            <main>
                <section class="tabs">
                    <ul class="mod-tab">
                        <li class="cur">
                            ประวัติซื้อขาย
                        </li>
                        <li class="">
                            ชำระเงิน
                        </li>
                        <li class="">
                            ยกเลิกคำสั่งซื้อ
                        </li>
                    </ul>
                </section>
                <section class="notice-btc-trade">
                    <div><i class="iconfont icon-gonggao text-s12"></i>&nbsp;
                        <span>ใช้ BTC เก็งกำไร BTCได้ ! เลเวอเรจสูงถึง 100 เท่า</span>
                    </div>
                    <div><a class="text-link">เชิญเพื่อน</a></div>
                </section>
                <section class="list-cc">
                    <ul></ul>
                    <div class="empty">
                        ยังไม่มีประวัติ hold a position
                    </div> <!---->
                </section>
                <section class="list-js" style="display: none;">
                    <ul></ul> <!----> <!---->
                </section>
                <section class="list-cd" style="display: none;">
                    <ul></ul> <!---->
                </section>
            </main>
        </article>
        <article class="page page-detail" style="display: none;">
            <header>
                <h3>รายละเอียดการสั่งซื้อ</h3>
                <div class="back" style="z-index: 1000001;"><i class="iconfont icon-fanhui"></i></div>
                <div class="action"></div>
            </header>
            <main>
                <section class="quote"><em></em> <!----></section>
                <section class="detail">
                    <ul>
                        <li class="income">
                            <p>กำไรขาดทุนลอยตัว </p>
                            <div class="text-lows"><em class="text-bold"></em> <span style="display: none;">/ NaN%</span>
                            </div>
                            <p class="text-s10">
                                หยุดกำไร +
                                ราคา
                                --&nbsp; /&nbsp; หยุดการขาดทุน

                                ราคา
                                --
                                <!---->
                            </p>
                        </li> <!---->
                        <li class="item">
                            <div><span class="text-lows">ซื้อตก</span>ราคา
                            </div>
                            <div>--</div>
                        </li>
                        <li class="item">
                            <div><span class="text-lows">ซื้อตก</span>เวลา
                            </div>
                            <div>--</div>
                        </li>
                        <li class="item">
                            <div>ราคา</div>
                            <div>--</div>
                        </li>
                        <li class="item">
                            <div>เวลาปิดโพซิชั่น</div>
                            <div>--</div>
                        </li>
                        <li class="item">
                            <div>
                                <div>ค่าธรรมเนียม</div>
                                <p class="text-s12">
                                    คำสั่งนี้千分之2
                                    <b class="text-link">ราคาดัชนีตลาดหลักทรัพย์</b>
                                </p>
                            </div>
                            <div>
                                <div>
                                    NaN

                                </div>
                                <p>อั่งเปาสามารถหักสิทธิพิเศษ 50% ก่อน</p>
                            </div>
                        </li> <!----> <!---->
                    </ul>
                </section>
                <section class="action"><button class="button-lesser">
                        สั่งซื้ออีกครั้ง
                    </button> <!----> <!----></section>
            </main>
        </article> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!---->
        <!----> <!----> <!----> <!----> <!----> <!----> <!---->
    </div>
@endsection