@extends('layouts.frontend-member')

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

@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" _msttexthash="3296384" _msthash="112">ซื้อขาย</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"><a class="text-s12" _msttexthash="3281876" _msthash="114">กฎกติกา</a></div>
            </header>
            <main>
                <section class="quote">
                    <div><span _msttexthash="22581" _msthash="115">BTC</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">42776.27</span> <span _msttexthash="33163"
                            _msthash="117" style="" _mstvisible="1">
                            -0.48%
                        </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);"
                    _msthidden="3"><canvas width="753" height="377" style="width: 753px; height: 377px;"></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">
                        <div class="expire-select-item"><!---->
                            <div class="expire-select-item__title" _msttexthash="6198751" _msthash="162">
                                วันครบกำหนด
                            </div>
                            <div class="expire-time-sec bigTxt" _msttexthash="26689" _msthash="163"><span
                                    class="time-num">180</span>
                                S
                            </div> <!---->
                        </div>
                        <div class="expire-select-item"><!---->
                            <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"><!---->
                            <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">
                            <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">
                                100฿
                            </div>
                            <div class="fixed-num">
                                500฿
                            </div>
                            <div class="fixed-num">
                                3000฿
                            </div>
                            <div class="fixed-num">
                                50000฿
                            </div>
                            <div class="fixed-num" _msttexthash="3292757" _msthash="130">
                                ทั้งหมด
                            </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"
                                                placeholder="จำนวนเงินอื่นๆ" class="van-field__control"
                                                _mstplaceholder="8911734" _msthash="131"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <footer class="expire-footer"><span><b _msttexthash="7241013" _msthash="132">คุณต้องชำระ
                                100฿</b></span> <span><!---->
                            ใช้ได้
                            <em _mstmutation="1">0 ฿</em> <a _mstmutation="1">เติมเงิน</a>
                        </span></footer>
                </section>
            </main>
            <section class="action"><button class="text-highs-bg"><b _msttexthash="1601717" _msthash="134">ขึ้น</b>
                    <span _msttexthash="55991" _msthash="165">&nbsp;42780.08</span> <i
                        style="width: 156.447%;"></i></button> <button class="text-lows-bg"><b _msttexthash="702975"
                        _msthash="135">ลง</b> <span _msttexthash="55809" _msthash="164">&nbsp;42780.07</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="page page-detail" _msthidden="10" style="display: none;">
            <header _msthidden="1">
                <h3 _msttexthash="16824730" _msthidden="1" _msthash="140">รายละเอียดการสั่งซื้อ</h3>
                <div class="back" style="z-index: 1000001;"><i class="iconfont icon-fanhui"></i></div>
                <div class="action"></div>
            </header>
            <main _msthidden="9">
                <section class="quote"><em></em> <!----></section>
                <section class="detail" _msthidden="8">
                    <ul _msthidden="8">
                        <li class="item" _msthidden="2">
                            <div _msttexthash="8883953" _msthidden="1" _msthash="141">จำนวนเงินลงทุน</div>
                            <div _msttexthash="331877" _msthidden="1" _msthash="142">

                                ฿
                            </div>
                        </li> <!---->
                        <li class="item" _msthidden="1">
                            <div _msttexthash="2678806" _msthidden="1" _msthash="143"><span class="text-lows">
                                    ลง
                                </span>
                                ราคา
                            </div>
                            <div>--</div>
                        </li>
                        <li class="item" _msthidden="1">
                            <div _msttexthash="2685488" _msthidden="1" _msthash="144"><span class="text-lows">
                                    ลง
                                </span>
                                เวลา
                            </div>
                            <div>--</div>
                        </li>
                        <li class="item" _msthidden="2">
                            <div _msttexthash="6198751" _msthidden="1" _msthash="145">วันครบกำหนด</div>
                            <div _msttexthash="7553" _msthidden="1" _msthash="146">

                                S
                            </div>
                        </li>
                        <li class="item" _msthidden="1">
                            <div _msttexthash="1599481" _msthidden="1" _msthash="147">ราคา</div>
                            <div>--</div>
                        </li>
                        <li class="item" _msthidden="1">
                            <div _msttexthash="9892012" _msthidden="1" _msthash="148">เวลาปิดโพซิชั่น</div>
                            <div>--</div>
                        </li>
                    </ul>
                </section>
                <section class="action" _msthidden="1">
                    <button class="button-lesser" _msttexthash="10922548" _msthidden="1" _msthash="149">
                        สั่งซื้ออีกครั้ง
                    </button>
                    <!---->
                </section>
            </main>
        </article>
        <!---->
    </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> --}}
@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);
                    if (old_price < current_price) {
                        $(".current-price").css('color', 'rgb(38, 168, 72)');
                    } else {
                        $(".current-price").css('color', 'red');
                    }
                    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;

        $('.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>
@endpush
@push('styles')
    <style type="text/css">
        /* scroll */
        .scroll {
            overflow-x: scroll !important;
            cursor: pointer;
        }

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

        ::-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));
                                        } */
    </style>


    <!-- <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