@extends('layouts.frontend-member')

@section('title', $product->name)

@section('content')
<form method="POST" action="{{route('member.buy-sell.store')}}">
     {{ csrf_field() }}
     <!-- 'amount',
        'profit',
        'direction',
        'commission',
        'opening_point',
        'closing_point',
        'seconds',
        'status',
        'product_id',
        'member_id',
         -->
    <input type="hidden" name="seconds" value="60" required>
    <input type="hidden" name="opening_point" value="{{ $product->current_price }}" required>
    <input type="hidden" name="direction" value="up" required>
    <input type="hidden" name="product_id" value="{{ $product->id }}" required>
    <input type="hidden" name="commission" value="0" required>

    <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" _msttexthash="3296384" _msthash="112">ซื้อขาย</b>
                        <b class="activeCount">
                            <a href="{{ route('history.tradding.tab') }}">
                                ประวัติซื้อขาย
                            </a>
                        </b>
                    </div>
                </h3>
                <div class="back cursor" style="z-index: 1000001;" onclick="history.back()"><i
                        class="iconfont icon-fanhui"></i></div>
                <div class="action">
                    {{-- <a href="{{ route('trading.rule') }}"  class="text-s12 cursor" _msttexthash="3281876" _msthash="114">
                        กฎกติกา
                    </a> --}}
                </div>
            </header>
            <main>
                <section class="quote">
                    <div class="cursor" onclick="Selectfun()"><span _msttexthash="22581"
                            _msthash="115">{{ $product->name }}</span>
                        <i class="iconfont icon-jiantou"></i>
                    </div>
                    <div class="text-lows" _mstvisible="0" _msttexthash="121420" _msthash="150"><span _msttexthash="21008"
                            _msthash="116" style="" _mstvisible="1" class="current-price">{{$product->current_price}}</span> 
                            <span _msttexthash="33163"
                            _msthash="117" style="" _mstvisible="1" id="percentage">
                            @if($product->current_price)
                                {{number_format(((($product->previousPrice()-$product->current_price)/$product->current_price)*100))}}%
                            @endif
                            </span>
                        </div>
                </section>
                <section class="tabs">
                    <ul class="mod-trade-tab">
                        <li class="cur"><span _msttexthash="75400" _msthash="118">Second</span></li>
                        <li class=""><span _msttexthash="42380" _msthash="119">1 min</span></li>
                        <li class=""><span _msttexthash="42744" _msthash="120">5 min</span></li>
                        <li class=""><span _msttexthash="52104" _msthash="121">15 min</span></li>
                        <li class=""><span _msttexthash="51766" _msthash="122">30 min</span></li>
                        <li class=""><span _msttexthash="46605" _msthash="123">Hour</span></li>
                        <li class=""><span _msttexthash="30433" _msthash="124">Day</span></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);height: 250px;flex:none;"
                    _msthidden="3">
                    <canvas width="753" height="250" style="width: 753px; height: 250px;"></canvas>

                    <div class="lines" _msthidden="1" style="display: none;"><i class="h" style="top: 0px;"></i> <i
                            class="v" style="left: 0px;"></i> <b class="sl-p" _msttexthash="21008" _msthidden="1"
                            _msthash="125" 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" _msthidden="2" style="top: -0.1rem; display: none;"><!----> <b
                            _msttexthash="27391" _msthidden="1" _msthash="126">+0.00</b> <b _msttexthash="33163"
                            _msthidden="1" _msthash="127">+0.00%</b></div>
                </section>
                <!----> <!---->
                <section class="trade-expire">
                    <div class="te__title" _msttexthash="6198751" _msthash="128">
                        วันครบกำหนด
                    </div>
                    <div class="expire-select-sec" style="padding-bottom:-10px;">
                        <div class="expire-select-item" data-duration="180"><!---->
                            <div class="expire-select-item__title" _msttexthash="6198751" _msthash="162">
                                วันครบกำหนด
                            </div>
                            <div class="expire-time-sec bigTxt" _msttexthash="26689" _msthash="163" data-duration="180">
                                <span class="time-num">180</span>
                                S
                            </div> <!---->
                        </div>
                        <div class="expire-select-item" data-duration="120"><!---->
                            <div class="expire-select-item__title" _msttexthash="6198751" _msthash="160">
                                วันครบกำหนด
                            </div>
                            <div class="expire-time-sec bigTxt" _msttexthash="26065" _msthash="161"><span
                                    class="time-num">120</span>
                                S
                            </div> <!---->
                        </div>
                        <div class="expire-select-item" data-duration="90"><!---->
                            <div class="expire-select-item__title" _msttexthash="6198751" _msthash="158">
                                วันครบกำหนด
                            </div>
                            <div class="expire-time-sec bigTxt" _msttexthash="19890" _msthash="159"><span
                                    class="time-num">90</span>
                                S
                            </div> <!---->
                        </div>
                        <div class="expire-select-item isActive" data-duration="60">
                            <div class="suc-sec"></div> 
                            <i class="success-icon van-icon van-icon-success"
                                style="color: rgb(51, 51, 51);"><!----></i>
                            <div class="expire-select-item__title" _msttexthash="6198751" _msthash="156">
                                วันครบกำหนด
                            </div>
                            <div class="expire-time-sec bigTxt" _msttexthash="19617" _msthash="157"><span
                                    class="time-num">60</span>
                                S
                            </div> <!---->
                        </div>
                    </div>
                    <div class="te__title" _msttexthash="8883953" _msthash="129">
                        จำนวนเงินลงทุน
                    </div>
                    <div class="expire-amount-sec scroll">
                        <div class="expire-amount-sec-content">
                            <div class="fixed-num isActive" data-bet-amount="100">
                                100฿
                            </div>
                            <div class="fixed-num" data-bet-amount="500">
                                500฿
                            </div>
                            <div class="fixed-num" data-bet-amount="3000">
                                3000฿
                            </div>
                            <div class="fixed-num" data-bet-amount="50000">
                                50000฿
                            </div>
                            <div class="fixed-num" _msttexthash="3292757" _msthash="130"
                                data-bet-amount="{{ Auth::user()->member->credit ?? 0 }}">
                                ทั้งหมด
                            </div>
                            <div class="other-num-content">
                                <div class="other-num van-cell van-field">
                                    <div class="van-cell__value van-cell__value--alone van-field__value">
                                        <div class="van-field__body">
                                            <input type="tel" inputmode="numeric" name="amount"
                                                placeholder="จำนวนเงินอื่นๆ" class="van-field__control" value="100">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <footer class="expire-footer"><span><b _msttexthash="7241013" _msthash="132">
                                คุณต้องชำระ <span class="betAmount">100</span> ฿

                            </b></span> <span><!---->
                            ใช้ได้
                            <em _mstmutation="1">{{ number_format(Auth::user()->member->credit ?? 0) }} ฿</em> <a
                                _mstmutation="1">
                                {{-- <a href="{{route('member.deposit-money')}}">
                                    เติมเงิน
                                </a> --}}
                                <a href="{{ route('topup.index') }}">
                                    เติมเงิน
                                </a>
                            </a>
                        </span></footer>
                </section>
            </main>
            <section class="action" onclick="Selectfun()">
                <button class="text-highs-bg" onclick="setDirection('up')">
                    <b _msttexthash="1601717" _msthash="134">ขึ้น</b>
                    <span _msttexthash="55991" _msthash="165"class="current-price current-price-white">
                        {{number_format($product->current_price,2)}}
                    </span> 
                    <i
                        style="width: 156.447%;"></i>
                </button> 
                <button class="text-lows-bg" onclick="setDirection('down')">
                    <b _msttexthash="702975"
                    _msthash="135">ลง</b> 
                    <span _msttexthash="55809" _msthash="164"class="current-price current-price-white">
                        {{number_format($product->current_price,2)}}
                    </span> <i
                    style="width: 27.2766%;"></i></button>
                </section>
        </article>
        {{-- <article class="page page-order" _msthidden="4" style="display: none;">
            <header _msthidden="2">
                <h3 _msthidden="2">
                    <div class="mod-h-tab" _msthidden="2"><b class="cur" _msttexthash="3296384" _msthidden="1"
                            _msthash="136">ซื้อขาย</b> <b class="" _msttexthash="8901256" _msthidden="1"
                            _msthash="137">ประวัติซื้อขาย</b></div>
                </h3>
                <div class="back" style="z-index: 1000001;"><i class="iconfont icon-fanhui"></i></div>
                <div class="action"></div>
            </header>
            <main _msthidden="2">
                <section class="tabs" _msthidden="2">
                    <ul class="mod-tab" _msthidden="2">
                        <li class="cur" _msttexthash="8901256" _msthidden="1" _msthash="138">
                            ประวัติซื้อขาย
                        </li>
                        <li class="" _msttexthash="3953859" _msthidden="1" _msthash="139">
                            ชำระเงิน
                        </li>
                    </ul>
                </section>
                <section class="notice-btc-trade"></section>
                <section class="list-cc">
                    <ul></ul>
                    <div class="empty" _msttexthash="10409984" _msthidden="1" _msthash="151">
                        ยังไม่มีประวัติ 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="c-popup c-menu-list" id="select-popup">
            <section>
                <header>
                    <h4>จับคู่ซื้อขาย</h4> <i class="iconfont icon-guanbi" onclick="Selectfun()"></i>
                </header>
                <main>
                    <div id="scrollMenu">
                        <ul
                            style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
                            <li>
                                <div class="cur">
                                    BTC/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    OMG/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    BCH/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    QTUM/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    NEO/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    TRX/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    ZEC/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    DASH/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    XMR/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    IOTA/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    ADA/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    XLM/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    ETC/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    XRP/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    EOS/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    LTC/USDT
                                </div> <!----> <!---->
                            </li>
                            <li>
                                <div class="">
                                    ETH/USDT
                                </div> <!----> <!---->
                            </li>
                        </ul>
                    </div>
                </main>
            </section>
        </article>

        <div> 
            <article class="c-popup c-menu-list" id="select-popup">
                <section>
                    <header>
                        <h4 class="cursor">จับคู่ซื้อขาย</h4> <i class="iconfont icon-guanbi" onclick="Selectfun()" ></i>
                    </header>
                    <main>
                        <div id="scrollMenu">
                            <ul
                                style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
                                <li>
                                    <div class="cur">
                                        BTC/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        OMG/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        BCH/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        QTUM/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        NEO/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        TRX/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        ZEC/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        DASH/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        XMR/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        IOTA/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        ADA/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        XLM/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        ETC/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        XRP/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        EOS/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        LTC/USDT
                                    </div> <!----> <!---->
                                </li>
                                <li>
                                    <div class="">
                                        ETH/USDT
                                    </div> <!----> <!---->
                                </li>
                            </ul>
                        </div>
                    </main>
                </section>
            </article>
        </div>
    </div>
    
    {{-- <article class="c-popup c-menu-list">
        <section>
            <header>
                <h4 _msttexthash="7958821" _msthash="184">จับคู่ซื้อขาย</h4> <i class="iconfont icon-guanbi"></i>
            </header>
            <main>
                <div id="scrollMenu">
                    <ul
                        style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
                        <li>
                            <div class="cur" _msttexthash="80574" _msthash="185">
                                BTC/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="81497" _msthash="186">
                                OMG/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="79391" _msthash="187">
                                BCH/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="98826" _msthash="188">
                                QTUM/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="81510" _msthash="189">
                                NEO/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="84461" _msthash="190">
                                TRX/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="81198" _msthash="191">
                                ZEC/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="94783" _msthash="192">
                                DASH/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="83603" _msthash="193">
                                XMR/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="95901" _msthash="194">
                                IOTA/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="78585" _msthash="195">
                                ADA/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="82914" _msthash="196">
                                XLM/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="80847" _msthash="197">
                                ETC/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="83889" _msthash="198">
                                XRP/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="82199" _msthash="199">
                                EOS/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="81484" _msthash="200">
                                LTC/USDT
                            </div> <!----> <!---->
                        </li>
                        <li>
                            <div class="" _msttexthash="81432" _msthash="201">
                                ETH/USDT
                            </div> <!----> <!---->
                        </li>
                    </ul>
                </div>
            </main>
        </section>
    </article> --}}
</form>
@endsection

@push('scripts')
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
    <script src="/trading-vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.5.0/axios.min.js"
        integrity="sha512-aoTNnqZcT8B4AmeCFmiSnDlc4Nj/KPaZyB5G7JnOnUEkdNpCZs1LCankiYi01sLTyWy+m2P+W4XM+BuQ3Q4/Dg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    {{-- <script src="/data.json"></script> --}}
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
    <script>
        var Data = {
            "ohlcv": {{ $jsonData }}
        };
        var dt = new Date();
        var previous_price = 0;
        var trend = 0;
        var diff = 0;
        Data['ohlcv'] = _.map(Data['ohlcv'], function(element, index) {
            diff = 0;
            if (index == 0) {
                trend = element[1];
            } else {
                diff = previous_price - element[1];
                if (previous_price > element[1]) {
                    console.log(previous_price + ":" + element[1]);
                    trend = element[1] - (previous_price - element[1]);
                    trend = trend
                } else {
                    trend = element[1] - (previous_price - element[1]);
                }
            }
            // trend = element[1] - (previous_price - element[1]);
            // console.log('previous_price='+previous_price)

            previous_price = element[1]
            console.log("trend = " + trend)
            return _.extend({}, element, {
                0: 169470492700 + (index),
                1: previous_price + diff,
                // 2: previous_price-diff,
                // 3: previous_price-diff,
                4: trend
            });
        });
        app = new Vue({
            el: '#app',
            data: {
                data: new TradingVueJs.DataCube(Data),
                width: window.innerWidth,
                height: window.innerHeight,
                night: true
            },
            mounted() {
                window.addEventListener('resize', this.onResize)
                var that = this;
                var lastCol = '';
                var last_price = 0;
                var response_;
                var that = this;
                var count = 0;
                window.setInterval(() => {
                    // console.log('count = '+count);
                    if (count == 0 || count >= 10) {
                        axios.get("{{ route('api.get-current-price', $product) }}")
                            .then(function(response) {
                                if (count > 0) {
                                    count = 0;
                                }
                                response_ = response;
                                // console.log(response)

                            })
                            .catch(function(error) {
                                console.log(error);
                            })
                            .finally(function() {
                                // always executed
                                count++;
                                that.readDataGraph(response_);
                            });
                    } else {
                        count++;
                        that.readDataGraph(response_);
                    }

                }, 1000);
            },
            methods: {
                onResize(event) {
                    this.width = window.innerWidth
                    this.height = window.innerHeight
                },
                readDataGraph(response) {
                    random = Math.random();
                    if (random < 0.5) {
                        current_price = parseFloat(response.data.price) - (response.data.price *
                            (getRandomFloat()));
                    } else {
                        current_price = (parseFloat(response.data.price) + response.data.price *
                            (getRandomFloat()));
                    }
                    // console.log(current_price)
                    // lastCol = Data.chart.data[Data.chart.data.length - 1][0];
                    // last_price = response.data.price
                    // Data.chart.data.slice(-1)
                    // // console.log('last_col',last_col)
                    // Data.chart.data.push([
                    //     lastCol,
                    //     current_price - (current_price * 0.00002),
                    //     current_price - (current_price * 0.00001),
                    //     current_price - (current_price * 0.00003),
                    //     current_price,
                    //     current_price
                    // ])



                    current_price = current_price.toFixed(4);
                    // var openingPoint = current_price;
                    $(".current-price").html(current_price);
                    $(".percentage").html(((old_price-current_price)/current_price)*100);
                    if (old_price < current_price) {
                        $(".current-price").css('color', 'rgb(38, 168, 72)');
                        $('#percentage').css('color', 'rgb(38, 168, 72)');
                    } else {
                        $(".current-price").css('color', 'red');
                        $('#percentage').css('color', 'red');
                    }
                    $(".current-price-white").css('color', 'white');
                    old_price = current_price;
                }
            },
            computed: {
                colors() {
                    return this.night ? {} : {
                        colorBack: '#fff',
                        colorGrid: '#eee',
                        colorText: '#333'
                    }
                },
            },
            beforeDestroy() {
                window.removeEventListener('resize', this.onResize)
            },
        })
    </script>


    <script type="text/javascript">
        var commission_rate = '{{ $product->commission_rate }}';
        var amount = 1000,
            direction, profit, product_id = "{{ $product->id }}";
        var member_id = "{{ Auth::user()->member->id ?? 1 }}";
        var seconds = 60;
        var openingPoint = "{{ $product->current_price }}";
        var commission = 0;
        function setDirection(direction){
            $('input[name="direction"]').attr('value',direction);
        }
        $('.period-widget').click(function() {
            var t = $(this).attr('data-sen');
            seconds = t;
            $('.period-widget').removeClass('active');
            $(this).addClass('active');
            $('input[name="seconds"]').attr('value', t);
        });
        $('.amount-box').click(function() {
            amount = $(this).attr('data-amount');
            $('.money').html(amount + " ฿");

            commission = (amount * commission_rate / 100) + parseFloat(amount);
            $('.commission').html(commission + " ฿");
            $('input[name="commission"]').val(commission);

            $('.amount-box').removeClass('active');
            var t = $(this).addClass('active');
            $('input[name="amount"]').val(amount);
        });
        $('input[name="amount"]').keyup(function() {
            amount = $('input[name="amount"]').val();
            $('.money').html(amount + " ฿");

            commission = (amount * commission_rate / 100) + parseFloat(amount);
            $('.commission').html(commission + " ฿");
            $('input[name="commission"]').val(commission);

            $('input[name="amount"]').val(amount);
        });

        function setDirection(direction_ = 'up') {
            $('input[name="direction"]').attr('value', direction_);
            if (direction_ == 'up') {
                direction = 'up';
                $('.order_type.rise').css('color', '#1fc65b');
                $('.order_type.rise').html('{{ __('message.buy up') }}');
            } else {
                direction = 'down';
                $('.order_type.rise').css('color', '#dc3545');
                $('.order_type.rise').html('{{ __('message.buy down') }}');
            }


        }

        function autoAddAmount(amount_) {
            $('input[name="amount"]').attr('value', amount_);
            amount = $('input[name="amount"]').val();
            $('.money').html(amount + " ฿");

            commission = (amount * commission_rate / 100) + parseFloat(amount);
            $('.commission').html(commission + " ฿");
            $('input[name="commission"]').val(commission);

            $('input[name="amount"]').val(amount);
        }

        function makeTimer(second_ = 1) {
            var t = seconds - second_;
            if (t >= 0) {
                $("#waiting-time h1").html(t);
            } else {
                $('#waiting-time').css('display', 'none');
                $('#waiting').css('display', 'block');
            }
        }
        // var time=0;
        // setInterval(function() { time++; makeTimer(time); }, 1000);
        function checkOrder() {
            amount = $('input[name="amount"]').val();
            var balance = "{{ Auth::user()->member->credit ?? 0 }}";
            if (parseFloat(amount) > parseFloat(balance)) {
                Swal.fire({
                    title: '{{ __('message.error') }}!',
                    text: "{{ __('message.not enough credit') }}",
                    icon: 'error',
                    timer: 2000,
                    confirmButtonText: 'Ok'
                })
                return false;
            }
            if (amount == '' || direction == '' || product_id == '' || profit == '' || commission == '') {
                Swal.fire({
                    title: '{{ __('message.error') }}!',
                    text: "{{ __('message.invalid data') }}",
                    icon: 'error',
                    timer: 2000,
                    confirmButtonText: 'Ok'
                })
                return false
            }
            $.ajax({
                type: "POST",
                url: "{{ route('api.buy-sell.store') }}",
                data: {
                    member_id: member_id,
                    product_id: product_id,
                    amount: amount,
                    direction: direction,
                    profit: profit,
                    commission: commission,
                    opening_point: openingPoint,
                },
                // _token:     '{{ csrf_token() }}',
                // contentType: "text/json; charset=utf-8",
                dataType: "text",
                success: function(data) {
                    var time = 0;
                    $('#buysell-modal').modal('hide');
                    $('#waiting-modal').modal('show');
                    setInterval(function() {
                        time++;
                        makeTimer(time);
                    }, 1000);

                },
                error: function(data) {
                    Swal.fire({
                        title: '{{ __('message.error') }}!',
                        text: data.message,
                        icon: 'error',
                        timer: 2000,
                        confirmButtonText: 'Ok'
                    })
                },
            });

            // $.post("{{ route('api.buy-sell.store') }}", function({
            //     member_id: member_id,
            //     product_id: product_id,
            //     amount: amount,
            //     direction: direction,
            //     profit: profit,
            //     commission: commission,
            //     _token:     '{{ csrf_token() }}'
            //   }, status){
            //     alert(status);
            //   });
            return false;
        }
        $('input[name="amount"]').on("change", function() {
            amount = $('input[name="amount"]').val();
            commission = (amount * commission_rate / 100) + parseFloat(amount);
            $('input[name="commission"]').val(commission);
        });

        function getRandomFloat(min = 0.0000123, max = 0.00002, decimals = 6) {
            const str = (Math.random() * (max - min) + min);
            return parseFloat(str);
        }
        // function autoAddAmount(amount_){
        //     $('input[amount="amount"]').attr('value',amount_);
        // }

        // make live data
        var current_price = "{{ $product->current_price }}";
        var old_price = "{{ $product->current_price }}";
        var random;
        // setInterval(function() {            
        //     $.ajax({
        //        type:"GET",
        //        dataType: "json",
        //        url:"{{ route('api.get-current-price', $product) }}",
        //        success:function(data)
        //        {   
        //         random = Math.random();
        //         if(random<0.5){
        //              current_price = parseFloat(data.price)-(data.price*(getRandomFloat()));                 
        //         }
        //         else{
        //              current_price = (parseFloat(data.price)+data.price*(getRandomFloat()));                 
        //         }
        //         // console.log(old_price, data.price)
        //         if(old_price<current_price){
        //             $(".current-price").css('color','#26a848');
        //         }
        //         else{
        //             $(".current-price").css('color','red');
        //         }
        //         current_price = current_price.toFixed(4);

        //         // console.log(current_price,data.price,getRandomFloat())
        //         var openingPoint = current_price;
        //         $(".current-price").html(current_price);
        //         // console.log(data);

        //         // update graph
        //         // if((current_price-old_price) > (old_price*0.05)){
        //         // var countGraphData= dataPoints1.length-1;
        //         // console.log(dataPoints1)
        //         //     dataPoints1[countGraphData].x= new Date();

        //         //     dataPoints1[countGraphData].y= [Number(old_price), Number(current_price*1.2), Number(current_price*0.8), Number(
        //         //             current_price)],
        //         //     dataPoints1[countGraphData].color= old_price < current_price ? "green" : "red";

        //         //     dataPoints2.push({
        //         //         x: new Date(),
        //         //         y: Number(current_price),
        //         //         color: old_price < current_price ? "green" : "red"
        //         //     });
        //         //     dataPoints3.push({
        //         //         x: new Date(),
        //         //         y: Number(  )
        //         //     });
        //         //     last_price = current_price;
        //         //     stockChart.render();
        //         // }            
        //         old_price = current_price;
        //        },
        //        error: function(data) {      
        //            console.log(data);
        //         },
        //     });
        // }, 1000);
    </script>

    <script type="text/javascript">
        $(".fixed-num").click(function() {
            var amount = $(this).data('bet-amount');
            $('input[name="amount"]').attr('value', amount);
            $('.fixed-num').removeClass('isActive');
            $(this).addClass('isActive')
        });
        $('.expire-select-item').click(function() {
            $('.expire-select-item').find('.suc-sec').remove();
            $('.expire-select-item').find('.van-icon-success').remove();
            $('.expire-select-item').removeClass('isActive');
            $('input[name="seconds"]').attr('value',$(this).data('duration'));

            //  
            $(this).append('<div class="suc-sec"></div> <i class="success-icon van-icon van-icon-success" style="color: rgb(51, 51, 51);">');


            $(this).addClass('isActive')
        })
    </script>
@endpush
@push('styles')
    <style type="text/css">
        .trade-expire .expire-amount-sec .fixed-num {
            padding: 0.05rem;
        }

        /* scroll */
        .scroll {
            overflow-x: scroll !important;
            cursor: pointer;
        }

        .page-trade>main {
            /* overflow-y: hidden !important; */
            overflow: hidden;
        }

        /* disable scrollbar */
        ::-webkit-scrollbar {
            display: none;
        }

        #waiting-time {
            border: 4px solid #b136ff;
            padding: 10px;
            width: 150px;
            height: 150px;
            border-radius: 120px;
        }

        .card {
            /* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
            margin-bottom: 0px;
        }

        .modal-header {
            box-shadow: none;
        }

        .canvasjs-chart-credit,
        .canvasjs-navigator-panel {
            display: none !important;
        }

        .end_time_button {
            padding: 10px 20px;
            color: white;
            background-color: black;
            font-weight: bold;
            border: 2px solid #ccc;
            border-radius: 5px;
            display: inline;
            margin-right: 10px;
            margin-bottom: 5px;
        }

        .button_amount {
            background-color: black;
            color: white;
            font-size: 20px;
            margin-bottom: 5px;
            border-radius: 5px;
            border: 2px solid #ccc;
        }

        .period-widget-content,
        .amount-box {
            cursor: pointer;
        }

        @media screen and (min-width: 360px) {
            .item-center {
                margin-left: 160px
            }
        }

        @media screen and (min-width: 390px) {
            .item-center {
                margin-left: 148px !important;
            }
        }

        /* .modal {
                            background: -webkit-linear-gradient(left top,
                                    rgba(255, 177, 0, 0.49),
                                    rgba(0, 161, 255, 0.76));
                            } */
        /* modal select */
        #select-popup {
            display: none;
        }
    </style>
    <script>
        // modal js
        function Selectfun() {
            var element = document.getElementById("select-popup");
            // alert('modal-popup')
            // element.classList.toggle("c-confirm");
            if (element.style.display === "none") {
                element.style.display = "flex";
            } else {
                element.style.display = "none";
            }
        }
        // 
    </script>

        <!-- <script type="text/javascript" src="{{ asset('graph/jquery-1.11.1.min.js') }}"></script> -->
        <!-- <script type="text/javascript" src="{{ asset('graph/canvasjs.stock.min.js') }}"></script>
        <script type="text/javascript">
            // GRAPH
            var last_price = 0;
            var dataPoints1 = [],
                dataPoints2 = [],
                dataPoints3 = [];
            var stockChart;
            window.onload = function() {
                stockChart = new CanvasJS.StockChart("chartContainer", {
                    exportEnabled: true,
                    theme: "light2",
                    animationEnabled: true,
                    animationDuration: 2000,
                    title: {
                        // text:"StockChart with Tooltip & Crosshair Syncing"
                    },
                    charts: [{
                        toolTip: {
                            shared: true
                        },
                        axisX: {
                            lineThickness: 5,
                            tickLength: 0,
                            labelFormatter: function(e) {
                                return "";
                            },
                            crosshair: {
                                enabled: true,
                                snapToDataPoint: true,
                                labelFormatter: function(e) {
                                    return ""
                                }
                            }
                        },
                        axisY2: {
                            // title: "{{ $product->name }}",
                            prefix: "{{ $setting_->currency_name }}"
                        },
                        legend: {
                            verticalAlign: "top",
                            horizontalAlign: "left"
                        },
                        data: [{
                            name: "Price (in {{ $setting_->currency_name }})",
                            yValueFormatString: "{{ $setting_->currency_name }} #,###.##",
                            axisYType: "secondary",
                            type: "candlestick",
                            risingColor: "green",
                            fallingColor: "red",
                            dataPoints: dataPoints1
                        }]
                    }, {
                        height: 100,
                        toolTip: {
                            shared: true
                        },
                        axisX: {
                            crosshair: {
                                enabled: true,
                                snapToDataPoint: true
                            }
                        },
                        axisY2: {
                            prefix: "{{ $setting_->currency_name }}",
                            title: "{{ $setting_->currency_name }}"
                        },
                        legend: {
                            horizontalAlign: "left"
                        },
                        data: [{
                            yValueFormatString: "{{ $setting_->currency_name }}#,###.##",
                            axisYType: "secondary",
                            name: "{{ $setting_->currency_name }}",
                            dataPoints: dataPoints2
                        }]
                    }],
                    navigator: {
                        data: [{
                            color: "grey",
                            dataPoints: dataPoints3
                        }],
                        slider: {
                            minimum: new Date(),
                            // maximum: new Date()
                        }
                    }
                });
                $.getJSON("{{ asset('graph/ltceur2018.json') }}", function(data) {
                    for (var i = 0; i < data.length; i++) {
                        dataPoints1.push({
                            x: new Date(data[i].date),
                            y: [Number(data[i].open), Number(data[i].high), Number(data[i].low), Number(
                                data[i].close)],
                            color: data[i].open < data[i].close ? "green" : "red"
                        });;
                        dataPoints2.push({
                            x: new Date(data[i].date),
                            y: Number(data[i].volume_eur),
                            color: data[i].open < data[i].close ? "green" : "red"
                        });
                        dataPoints3.push({
                            x: new Date(data[i].date),
                            y: Number(data[i].close)
                        });
                        last_price = data[i].close;
                    }
                    stockChart.render();
                });
            }

            function getRandomArbitrary(min, max) {
                return Math.random() * (max - min) + min;
            }
        </script> -->
@endpush