@extends('layouts.frontend-member')

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

@section('content')
    <div class="page-content py-0">
        <!-- <div class="page-content pb-0 mb-0 card" style="box-shadow: 0px 5px 9px 0px #000000;"> -->
        <div class="page-content" style="margin-bottom:0px !important;background: url('/bg-trade.png') no-repeat center center fixed;-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;margin-bottom: -6px !important;">
            <h5 class="py-2 text-center">
                <div class="nav-button"><a href="{{ route('member.index') }}">
                        <i class="bi bi-arrow-left" style="color:white;float:left;margin-left:15px;"></i></a>
                </div>
                {{ $product->name }}
                @include('frontend.inc.change-language')
            </h5>
            <h5 class="py-2 text-center" style="height:55px;font-size: 12px;">
                
                <div style="width:33%;float:left;color:#666">
                    {{ __('message.open price') }}: 
                    <br/>
                    {{ number_format($product->current_price * 1.012, 2) }}
                    <!-- <br />
                    {{ __('message.close price') }}: {{ number_format($product->current_price * 0.987, 2) }} -->
                </div>
                <div style="width:33%;float:left;text-align: center;color:#26a848;font-size: 20px;padding-top:5px;font-weight: bold;">
                    <!-- <br/> -->
                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAMCAYAAABvEu28AAAACXBIWXMAAAsTAAALEwEAmpwYAAAF92lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjItMTItMTFUMTQ6MjI6NDArMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIyLTEyLTIxVDIzOjIwOjI2KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIyLTEyLTIxVDIzOjIwOjI2KzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmI1ZGY1MGI1LTNmYjUtNDkwNC05YzUzLTAyMjYwMmJjYzkyOSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjgwNTk4Yzc0LWIyNWItYzI0Ni04MTkwLThlZTlkOTM4OWU3OCIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjVmMWNlYjQxLWE5MzAtNGFmOS05NTdmLWUzNDE2MTdhMzM4MCI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NWYxY2ViNDEtYTkzMC00YWY5LTk1N2YtZTM0MTYxN2EzMzgwIiBzdEV2dDp3aGVuPSIyMDIyLTEyLTExVDE0OjIyOjQwKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6YjVkZjUwYjUtM2ZiNS00OTA0LTljNTMtMDIyNjAyYmNjOTI5IiBzdEV2dDp3aGVuPSIyMDIyLTEyLTIxVDIzOjIwOjI2KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4uA1VSAAAAs0lEQVQokaXRMa4BURQG4G8GEa2E0gpUGqXGLmi8WuPt4imUCjZgorADiUUobMIWKN6ZhGRMDH9yk3vPPefLTW7SPc6UpI1T7Ee4vmpMS5AaMvRjZVGrDC0xfjiP8VcVmmJRUP/F5F1ogA2SgrsE2+gphTo4oPXipeLuEL2FUAN79EqQPL3obRRBK/9f/G5GMfME/WBeAckzj1l1DLH+AMmzxjnFDs0voCZ2KS64fQHdcLkDL0YXgSESQ3cAAAAASUVORK5CYII=" alt="" data-v-0832ca32="" style="width: 9px; height: 6px; margin-right: 5px;">
                    <span class="current-price">
                        {{ number_format($product->current_price, 6) }}
                    </span>
                </div>
                <div style="width:33%;float:left;color:#fa2e42">
                    <span style="float: right;margin-right:10px;color:#666">
                        <span style="color:#666">
                            {{ __('message.max price') }}:
                            <br/>
                            {{ number_format($product->current_price, 2) }}
                        </span>
                        <!-- <br />
                        {{ __('message.min price') }}: {{ number_format($product->current_price * 0.991111, 2) }} -->
                    </span>
                </div>
            </h5>
        </div>
        <!-- <div id="chartContainer" style="height: 500px; width: 100%;"> -->
        <trading-vue :data="data" :width="this.width" :toolbar="false"
            :chart-config="{ TB_ICON_BRI: 0.25 }" :color-back="colors.colorBack" :color-grid="colors.colorGrid"
            :color-text="colors.colorText">
        </trading-vue>

    </div>

    <div class="w-100" role="group" aria-label="Basic example"
        style="margin-top: -50px;margin-bottom: 80px;position: relative;">
        <a href="#" class="btn text-light"
            style="box-shadow: rgb(92 92 92) 0px 1px 5px 0px;font-size: 1rem;font-weight: 600;border-radius: 8px;width:45%;background-color: #26a848;margin-left:13px;padding: 9px 10px 3px 0px;"
            data-bs-toggle="modal" data-bs-target="#buysell-modal" onclick="setDirection('up')">
            <i class="bi bi-arrow-up-circle-fill fa-lg"></i>
            {{ __('message.buy up') }}
            <div class="col ng-binding rise col-nowprice current-price text-light" style="font-size: 15px;">183.7928</div>
        </a>

        <a href="#" class="btn btn-danger "
            style="box-shadow: rgb(92 92 92) 0px 1px 5px 0px;font-size: 16px;font-weight: 600;border-radius: 8px;width:45%;background-color: #1f7ba7;float:right;margin-right:13px;background-color: red;padding: padding: 9px 10px 3px 0px;"
            data-bs-toggle="modal" data-bs-target="#buysell-modal" onclick="setDirection('down')">
            <i class="bi bi-arrow-down-circle-fill fa-lg"></i>
            {{ __('message.buy down') }}
            <div class="col ng-binding rise col-nowprice current-price text-light" style="font-size: 15px;">183.7928</div>
        </a>
    </div>
    </div>
    <!-- start modal buy sell -->
    <div class="modal fade" id="buysell-modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content" style="padding: 0px !important;">
                <div class="modal-header text-center border-0">
                    <h5 class="modal-title text-center" style="margin: 0 auto;">{{ __('message.confirm order price') }}
                    </h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
                    </button>
                </div>
                <div class="modal-body" style="padding-bottom: 0px !important;">
                    <div class="card" style="background-color:#e0d2dcd7; ">
                        <div class="row">
                            <div class="col-sm-2" style="width: 50%;">
                                <div style="padding: 10px 10px 10px 0px;">
                                    <p>{{ __('message.name') }}</p>
                                    <p>{{ __('message.direction') }}</p>
                                    <div class="col">{{ __('message.current price') }}</div>
                                </div>
                            </div>
                            <div class="col-sm-2 pl-2" style="width: 50%; ">
                                <div style="padding: 10px 0px 10px 10px; float: right;">
                                    <p style="font-weight: bold">{{ $product->name }}</p>
                                    <p style="font-weight: bold; color: #26a848;" class="order_type rise">

                                    </p>
                                    <div class="ng-binding rise col-nowprice ">
                                        <span class="ng-binding rise col-nowprice current-price"
                                            style="font-weight: bold"> 00</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <form method="POST" class="mt-1" action="{{ route('member.buy-sell.store') }}">
                        {{ csrf_field() }}
                        <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="" required>

                        <div class="period" style="height:auto">
                            <p class="end_time ">{{ __('message.choose expiration time') }}(
                                {{ __('message.close to the left for higter return') }})</p>
                            <div class="form-group">
                                <div class="period-widget-view">
                                    <div class="period-widget active" data-sen="60" data-shouyi="10" data-kuishun="10"
                                        style="height:auto;">
                                        {{-- <div class="period-widget-header">{{ __('message.end time') }} </div> --}}
                                        <div class="period-widget-content"><span class="final_time ng-binding">1m</span>
                                        </div><!---->
                                    </div>
                                    <div class="period-widget" data-sen="180" data-shouyi="15" data-kuishun="15"
                                        style="height:auto;">
                                        {{-- <div class="period-widget-header">{{ __('message.end time') }} </div> --}}
                                        <div class="period-widget-content"><span class="final_time ng-binding">
                                                3m</span>
                                        </div>
                                    </div>
                                    <div class="period-widget" data-sen="300" data-shouyi="30" data-kuishun="30"
                                        style="height:auto;">
                                        {{-- <div class="period-widget-header">{{ __('message.end time') }} </div> --}}
                                        <div class="period-widget-content"><span class="final_time ng-binding">5m
                                            </span>
                                        </div>
                                    </div>
                                    <div class="period-widget" data-sen="600" data-shouyi="30" data-kuishun="30"
                                        style="height:auto;">
                                        {{-- <div class="period-widget-header">{{ __('message.end time') }} </div> --}}
                                        <div class="period-widget-content"><span class="final_time ng-binding">10m</span>
                                            {{-- <span class="final_unit">s</span> --}}
                                        </div><!---->
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group my-2 ">
                            <label class="form-label col-xs-12 col-sm-12"
                                style="margin-left: -10px; font-weight: bold;">{{ __('message.amount') }}</label>
                            {{-- <input type="text" id="simpleinput" class="form-control"
                                style="background-color: #e0d2dcd7;">
                            <label class="float-right">text</label>
                            <div class="input-group-append">
                                <span class="input-group-text bg-transparent border-left-0">
                                    <i class="fal fa-search"></i>
                                </span>
                            </div> --}}
                            <div class="input-group">
                                <input type="text" class="form-control pr-0" style="background-color: #e0d2dcd7;" name="amount">
                                <div class="input-group-append">
                                    <span class="input-group-text  border-0"
                                        style="background-color: #e0d2dcd7; color: #f37022;cursor: pointer;" onclick="autoAddAmount({{ Auth::user()->member->credit ?? 0 }});">
                                        {{ __('message.all') }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="order-detail-view">
                            <div class="row">
                                <div class="col ng-binding rise col-nowprice " style="color:gray">
                                    {{ __('message.available balance') }} :
                                    <span class="ng-binding rise col-nowprice" style="font-weight: bold;color:green" 
                                        style="font-weight: bold"> {{number_format(Auth::user()->member->credit??0,2)}}฿</span>
                                </div>
                            </div>
                            <div class="row btn_confirm">
                                <button class="button btn btn text-center text-light btn-pill"
                                    onclick="return checkOrder()" type="button"
                                    style="line-height: 0px; margin: 10px 10px 10px 18px; border-radius: 20em; padding: 24px 10px 23px 10px; background-color: #f37022">
                                    {{ __('message.confirm order') }}
                                </button>
                                {{-- <button class="button btn btn text-center text-light btn-pill" data-bs-toggle="modal"
                                    data-bs-target="#waiting-modal" onclick="return checkOrder()" type="button"
                                    style="line-height: 0px; margin: 10px 10px 10px 18px; border-radius: 20em; padding: 24px 10px 23px 10px; background-color: #f37022">
                                    {{ __('message.confirm order') }}
                                </button> --}}
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- End modal buy sell -->

    <!-- start modal waiting -->
    <div class="modal fade" id="waiting-modal" tabindex="-2" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content" style="padding: 0px !important;">
                <div class="modal-header text-center border-0">
                    <h5 class="modal-title text-center item-center" style="margin: 0 auto;">{{ $product->name }}
                    </h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fal fa-times fa-lg "></i></span>
                    </button>
                </div>
                <div class="modal-body" style="padding: 1px 10px 10px 10px !important;">
                    <form method="POST" class="mt-2" action="#" style="overflow-y: scroll;">
                        <div class="order-detail-view">
                            <div class="order-detail" id="waiting-time"
                                style="text-align: center;padding-top:20px;margin:0 auto;margin-bottom: 0px;">
                                <h1 style="color:#f37022; font-size: 2.5rem;">
                                    00
                                </h1>
                                {{-- <span style="color:#ccc;font-size: 10px;">{{ __('message.current price') }}</span>
                                <h6 class="current-price" style="color:red;">
                                    {{ $product->current_price }}
                                </h6> --}}
                            </div>
                        </div>
                        <div style="display:none;text-align: center;font-size: 20px;color:white;" id="waiting">
                            <i class="bi bi-hourglass-top"></i> {{ __('message.please wait abit') }}
                        </div>
                        <div class="row">
                            <div class="col-sm-2" style="width: 50%;">
                                <div style="padding: 10px 10px 10px 0px;">
                                    <p>{{ __('message.start price') }}</p>
                                    <p>{{ __('message.current price') }}</p>
                                    <p>{{ __('message.direction') }}</p>
                                    <p>{{ __('message.amount') }}</p>
                                </div>
                            </div>
                            <div class="col-sm-2 pl-2" style="width: 50%; ">
                                <div style="padding: 10px 0px 10px 10px; float: right;">
                                    <p style="font-weight: bold">{{ $product->name }}</p>
                                    <p class="ng-binding rise col-nowprice">
                                        <span class="ng-binding rise col-nowprice"
                                            style="font-weight: bold"> 
                                            {{$product->current_price}}
                                        </span>
                                    </p>
                                    <p style="font-weight: 500; color: #26a848;" class="order_type rise">

                                    </p>
                                    <p class="ng-binding rise col-nowprice">
                                        <span class="ng-binding rise col-nowprice current-price"
                                            style="font-weight: bold"> </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="order-detail-view">
                            <div class="row btn_confirm">
                                <button class="button btn text-center text-light btn-pill" type="button"
                                    style="line-height: 0px; margin: -10px 10px 10px 18px; border-radius: 20em; padding: 24px 10px 23px 10px; background-color: #f37022; font-size: 1.0rem;" data-bs-dismiss="modal" aria-label="Close">
                                    {{ __('message.confirm order') }}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{-- <div class="modal fade" id="waiting-modal" tabindex="-2" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content bg-dark" style="padding: 0px !important;">
                <div class="modal-body">
                    <form method="POST" class="mt-2" action="#" style="overflow-y: scroll;">
                        <div class="order-detail-view">
                            <div class="order-detail" id="waiting-time"
                                style="text-align: center;padding-top:20px;margin:0 auto;margin-bottom: 20px;">
                                <h2 style="color:blue;">
                                    00
                                </h2>
                                <span style="color:#ccc;font-size: 10px;">{{ __('message.current price') }}</span>
                                <h6 class="current-price" style="color:red;">
                                    {{ $product->current_price }}
                                </h6>
                            </div>
                        </div>
                        <div style="display:none;text-align: center;font-size: 20px;color:white;" id="waiting">
                            <i class="bi bi-hourglass-top"></i> {{ __('message.please wait abit') }}
                        </div>

                        <div class="order-detail-view">
                            <div class="order-detail">
                                <div class="row fields">
                                    <div class="col">{{ __('message.product') }}</div>
                                    <div class="col">{{ __('message.direction') }}</div>
                                    <div class="col">{{ __('message.current price') }}</div>
                                    <div class="col">{{ __('message.credit') }}</div>
                                </div>
                                <div class="row">
                                    <div class="col qoute_name ng-binding goodstitle">
                                        {{ $product->name }}
                                    </div>
                                    <div class="col ng-binding order_type rise buy-direction">
                                        {{ __('message.buy up') }}
                                    </div>
                                    <div class="col ng-binding rise col-nowprice current-price">183.7928</div>
                                    <div class="col ng-binding money">1000 ฿ </div>
                                </div>
                                <div class="row btn_confirm">
                                    <div class="col">
                                        <button class="button btn btn-outline-info text-center text-light" type="button"
                                            style="line-height: 0px;" class="close" data-bs-dismiss="modal"
                                            aria-label="Close">
                                            {{ __('message.confirm order') }}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> --}}

    @include('app.sweetAlert')
@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,
                    seconds: seconds,
                },
                // _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">
        #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