@extends('layouts.frontend-member')

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

@section('content')
    <div id="app" data-v-app="">
        <div class="van-config-provider">
            <div class="van-nav-bar van-nav-bar--fixed van-hairline--bottom">
                <div class="van-nav-bar__content">
                    <div class="van-nav-bar__left van-haptics-feedback" onclick="history.back()"><i
                            class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow"><!----><!----><!----></i><!---->
                    </div>
                    <div class="van-nav-bar__title van-ellipsis">{{ $product->name ?? '' }}/USDT</div>
                    <div class="van-nav-bar__right van-haptics-feedback">
                        <a href="{{ route('member.my-order') }}" class="">order</a>
                    </div>
                </div>
            </div><!----><!---->

            <!--Start graph -->
            <div class="flex flex-row justify-around space-x-2 text-lg pt-[46px] changInterval">
                <div class="interval-item">Second</div>
                <div class="border-b-2 text-blue-500 border-blue-500 interval-item active"
                    onclick="changInterval(&#39;m1&#39;,this)">1m</div>
                <div class="interval-item " onclick="changInterval(&#39;m1&#39;,this)">5m</div>
                <div class="interval-item " onclick="changInterval(&#39;m1&#39;,this)">15m</div>
                <div class="interval-item " onclick="changInterval(&#39;m1&#39;,this)">30m</div>
                <div class="interval-item " onclick="changInterval(&#39;m1&#39;,this)">1h</div>
                <div class="interval-item " onclick="changInterval(&#39;m1&#39;,this)">1d</div>
            </div>
            <div id="chart_container">
                <div class="loding" data-type="0" style="display: none;">
                    <img src="{{ asset('fronts/assets/loading.gif') }}" alt="">
                </div>
                <div tabindex="1"
                    style="user-select: none; -webkit-tap-highlight-color: transparent; position: relative; outline: none; border-style: none; width: 100%; cursor: crosshair;">
                    <div
                        style="margin: 0px; padding: 0px; position: relative; overflow: hidden; width: 100%; height: 10px;">
                        <div
                            style="top: 0px; margin: 0px; padding: 0px; position: absolute; overflow: hidden; left: 1418px; width: 54px; height: 374px;">
                            <canvas width="67" height="467"
                                style="position: absolute; top: 0px; left: 0px; z-index: 2; width: 54px; height: 374px;"></canvas><canvas
                                width="67" height="467"
                                style="position: absolute; top: 0px; left: 0px; z-index: 2; width: 54px; height: 374px;"></canvas>
                        </div>
                    </div>
                    <div
                        style="margin: 0px; padding: 0px; position: relative; background-color: rgb(221, 221, 221); height: 1px; width: 100%;">
                        <div
                            style="margin: 0px; padding: 0px; width: 100%; position: absolute; z-index: 20; top: -3px; height: 7px; cursor: ns-resize;">
                        </div>
                    </div>
                    <div id="not-importent"
                        style="margin: 0px; padding: 0px; position: relative; overflow: hidden; width: 100%; height: 150px;">

                        {{-- <div
                        style="top: 0px; margin: 0px; padding: 0px; position: absolute; overflow: hidden; left: 1418px; width: 54px; height: 100px;">
                        <canvas width="67" height="150"
                            style="position: absolute; top: 0px; left: 0px; z-index: 2; width: 54px; height: 100px;"></canvas><canvas
                            width="67" height="150"
                            style="position: absolute; top: 0px; left: 0px; z-index: 2; width: 54px; height: 100px;"></canvas>
                    </div> --}}
                    </div>
                    {{--  <div
                    style="margin: 0px; padding: 0px; position: relative; overflow: hidden; width: 100%; height: 30px;">
                    <div
                        style="top: 0px; margin: 0px; padding: 0px; position: absolute; overflow: hidden; left: 0px; width: 1418px; height: 25px;">
                        <canvas width="1772" height="50"
                            style="position: absolute; top: 0px; left: 0px; z-index: 2; width: 1418px; height: 25px;"></canvas><canvas
                            width="1772" height="50"
                            style="position: absolute; top: 0px; left: 0px; z-index: 2; width: 1418px; height: 25px;"></canvas>
                    </div>
                </div> --}}
                </div>
            </div>
            <div id="chart_container1" style="display: none; position: relative;">
                <div id="loading"
                    style="display: none; position: absolute; z-index: 9527; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.6);">
                    <div class="spin">loading...</div>
                </div>
                <div id="interval_tool_bar" class="light" style="height: 30px; line-height: 30px; display: block;">
                    <button class="interval-item" data-interval-item="time-sharing">Time sharing</button><button
                        class="interval-item active" data-interval-item="m1">1 M</button><button class="interval-item"
                        data-interval-item="m5">5 M</button><button class="interval-item" data-interval-item="m15">15
                        M</button><button class="interval-item" data-interval-item="m30">30 M</button><button
                        class="interval-item" data-interval-item="m60">60 M</button><button class="interval-item"
                        data-interval-item="h4">4 H</button><button class="interval-item" data-interval-item="d1">1
                        Day</button><button class="interval-item" data-interval-item="w1">1 Week</button>
                </div>
                <div id="vy-chart" style="position: absolute; bottom: 0px; width: 100%; height: calc(100% - 30px);">
                    <div id="date-time"
                        style="position: absolute; z-index: 100; bottom: 10px; font-size: 12px; color: rgb(255, 255, 255); background-color: rgb(88, 88, 88); transform: translate(-50%, 0px); white-space: nowrap; user-select: none;">
                    </div>
                    <div id="volume"
                        style="position: absolute; z-index: 100; right: 0px; width: 54px; font-size: 12px; text-align: center; color: rgb(255, 255, 255); background-color: rgb(88, 88, 88); user-select: none;">
                    </div>
                    <div id="real_time_volume"
                        style="position: absolute; z-index: 80; right: 0px; width: 54px; font-size: 12px; text-align: center; color: rgb(255, 255, 255); user-select: none; top: 20.7259px; background-color: rgb(204, 20, 20);">
                        0.1351</div><canvas width="300" height="150"
                        style="position: absolute; top: 0px; left: 0px; padding: 25px 0px 0px; width: 240px; height: 102.4px;"></canvas><canvas
                        width="300" height="150"
                        style="position: absolute; z-index: 100; top: 0px; left: 0px; cursor: crosshair; width: 240px; height: 120px;"></canvas><canvas
                        width="300" height="62"
                        style="position: absolute; bottom: 54px; left: 0px; width: 240px; height: 49.6px;"></canvas><canvas
                        width="300" height="67"
                        style="position: absolute; bottom: 0px; left: 0px; width: 240px; height: 53.6px;"></canvas><canvas
                        width="67" height="150"
                        style="position: absolute; top: 0px; right: 0px; width: 53.6px; height: 120px;"></canvas><canvas
                        width="67" height="62"
                        style="position: absolute; bottom: 54px; right: 0px; width: 53.6px; height: 49.6px;"></canvas>
                    <div id="dashboard-wrapper"
                        style="position: absolute; z-index: 50; left: 0px; top: 0px; width: 100%; height: 20px; background: rgb(255, 255, 255);">
                        <div id="span-wrapper"><span style="margin: 0px 10px;"> S=<i
                                    style="color: #CC1414;">0.1354</i></span><span style="margin: 0px 10px;"> High=<i
                                    style="color: #CC1414;">0.1354</i></span><span style="margin: 0px 10px;"> Low=<i
                                    style="color: #CC1414;">0.1350</i></span><span style="margin: 0px 10px;">
                                Collect=<i style="color: #CC1414;">0.1351</i></span><span style="margin: 0px 10px;">Vol=<i
                                    style="color: #CC1414;">52725.33519087</i></span><span
                                style="margin: 0px 10px;">MA5=<i style="color: #583d7a;">0.1372</i></span><span
                                style="margin: 0px 10px;">MA10=<i style="color: #95a4c7;">0.1375</i></span></div>
                    </div><canvas width="67" height="67"
                        style="width: 53.6px; height: 53.6px; position: absolute; bottom: 0px; right: 0px; background: rgb(255, 255, 255);"></canvas>
                </div>
            </div>

            <div class="p-2 pb-[120px]">
                <h3>วันหมดอายุ</h3>
                <!--Time btn-->
                <div class="grid grid-cols-4 gap-2">

                    <div data-duration="60"
                        class=" expire-select-item  bg-[#293139] flex flex-col h-[60px] rounded-lg justify-center items-center overflow-hidden">
                        <div class="flex gap-1"><span class="text-yellow-400 font-bold">60</span><span
                                class="text-gray-400 font-bold">S</span></div>
                        <div class="text-xs text-red-400 flex">รายได้ 50%</div>
                    </div>
                    <div data-duration="90"
                        class="expire-select-item bg-[#293139] flex flex-col h-[60px] rounded-lg justify-center items-center overflow-hidden">
                        <div class="flex gap-1"><span class="text-yellow-400 font-bold">90</span><span
                                class="text-gray-400 font-bold">S</span></div>
                        <div class="text-xs text-red-400 flex">รายได้ 45%</div>
                    </div>
                    <div data-duration="120"
                        class="expire-select-item bg-[#293139] flex flex-col h-[60px] rounded-lg justify-center items-center overflow-hidden">
                        <div class="flex gap-1"><span class="text-yellow-400 font-bold">120</span><span
                                class="text-gray-400 font-bold">S</span></div>
                        <div class="text-xs text-red-400 flex">รายได้ 40%</div>
                    </div>
                    <div data-duration="180"
                        class="expire-select-item  bg-[#293139] flex flex-col h-[60px] rounded-lg justify-center items-center overflow-hidden">
                        <div class="flex gap-1"><span class="text-yellow-400 font-bold">180</span><span
                                class="text-gray-400 font-bold">S</span></div>
                        <div class="text-xs text-red-400 flex">รายได้ 30%</div>
                    </div>
                </div>
                <h3>จำนวนเงินลงทุน</h3>
                <!--amount btn-->
                <div class="grid grid-cols-4 gap-4">
                    <div data-bet-amount="100"
                        class="fixed-num isActive  bg-[#293139] flex flex-col h-[40px] rounded-lg justify-center items-center overflow-hidden">
                        <div class="text-lg text-white flex  ">100฿</div>
                    </div>
                    <div data-bet-amount="400"
                        class="fixed-num  bg-[#293139] flex flex-col h-[40px] rounded-lg justify-center items-center overflow-hidden">
                        <div class="text-lg text-white flex ">400฿</div>
                    </div>
                    <div data-bet-amount="800"
                        class="fixed-num  bg-[#293139] flex flex-col h-[40px] rounded-lg justify-center items-center overflow-hidden">
                        <div class="text-lg text-white flex ">800฿</div>
                    </div>
                    <div data-bet-amount="1000"
                        class="fixed-num  bg-[#293139] flex flex-col h-[40px] rounded-lg justify-center items-center overflow-hidden">
                        <div class="text-lg text-white flex ">1000฿</div>
                    </div>
                    {{-- <div data-bet-amount="3000"
                        class="fixed-num  bg-[#293139] flex flex-col h-[40px] rounded-lg justify-center items-center overflow-hidden">
                        <div class="text-lg text-white flex">3000฿</div>
                    </div>
                    <div data-bet-amount="5000"
                        class="fixed-num  bg-[#293139] flex flex-col h-[40px] rounded-lg justify-center items-center overflow-hidden">
                        <div class="text-lg text-white flex">5000฿</div>
                    </div> --}}
                </div>
                <form action="{{ route('member.buy-sell.store') }}" method="POST" id="buy-sell-form">
                    @csrf
                    <input type="hidden" name="direction" value="up" id="">
                    <input type="hidden" name="commission" value="0" id="">
                    <input type="hidden" name="opening_point" value="0" id="">
                    <input type="hidden" name="seconds" value="60" id="">
                    <input type="hidden" name="product_id" value="{{ $product->id }}" id="">


                    <div class="van-cell-group van-hairline--top-bottom w-full mt-2">
                        <div class="van-cell van-cell--center van-field"><!----><!---->
                            <div class="van-cell__value van-field__value">
                                <div class="van-field__body">
                                    <input type="text" inputmode="decimal" name="amount" class="van-field__control"
                                        placeholder="จำนวน"><!----><!---->
                                    <div class="van-field__button">
                                        <button type="button" data-bet-amount="{{ Auth::user()->member->credit ?? 0 }}"
                                            class="fixed-num van-button van-button--primary van-button--small bg-[#4677d7] border-0 text-white px-5">
                                            <div class="van-button__content">
                                                <!---->
                                                <span class="van-button__text">ทั้งหมด</span>
                                            </div>
                                        </button>
                                    </div>
                                </div><!----><!---->
                            </div><!----><!---->
                        </div>
                    </div>

                    <!--popUp-->
                    <div class="overlay" style=" z-index: 2001;​ ">

                    </div>

                    <div role="dialog" tabindex="0" class="modal-content van-popup van-popup--center van-dialog"
                        aria-labelledby="เคล็ดลับ" style="z-index: 2008; display: none;">
                        <div class="van-dialog__header">เคล็ดลับ</div>
                        <div class="van-dialog__content">
                            <div class="van-dialog__message van-dialog__message--has-title">คุณยืนยันการซื้อหรือไม่?</div>
                        </div>
                        <div class="van-hairline--top van-dialog__footer">
                            <button type="button"
                                class="cancelbtn van-button van-button--default van-button--large van-dialog__cancel">
                                <div class="van-button__content"><!----><span
                                        class="van-button__text">ยกเลิก</span><!----></div>
                            </button>
                            <button type="submit"
                                class="submit_btn van-button van-button--default van-button--large van-dialog__confirm van-hairline--left">
                                <div class="van-button__content"><!----><span
                                        class="van-button__text">ยืนยัน</span><!----></div>
                            </button>
                        </div><!---->
                    </div>
                    <!--End popUp-->
                </form>
            </div>
            <div role="tablist"
                class="van-tabbar van-tabbar--fixed van-hairline--top-bottom van-safe-area-bottom mb-[50px]">
                <div role="tab" class="van-tabbar-item" tabindex="0" aria-selected="false">
                    <div class="van-badge__wrapper van-tabbar-item__icon"><!----><!----></div>
                    <div class="van-tabbar-item__text">
                        <button type="button" onclick="setDirection('up')"
                            class="setDirection van-button van-button--primary van-button--normal van-button--block van-button--round w-[160px]"
                            style="color: white; background: rgb(249, 40, 85); border-color: rgb(249, 40, 85);">
                            <div class="van-button__content"><!----><span class="van-button__text"><i
                                        class="van-badge__wrapper van-icon van-icon-ascending text-white"><!----><!----><!----></i>
                                    ขึ้น</span><!----></div>
                        </button>
                    </div>
                </div>
                <div role="tab" class="van-tabbar-item" tabindex="0" aria-selected="false">
                    <div class="van-badge__wrapper van-tabbar-item__icon"><!----><!----></div>
                    <div class="van-tabbar-item__text">
                        <button type="button" onclick="setDirection('down')"
                            class="setDirection van-button van-button--primary van-button--normal van-button--block van-button--round w-[160px]"
                            style="color: white; background: rgb(45, 192, 142); border-color: rgb(45, 192, 142);">
                            <div class="van-button__content"><!----><span class="van-button__text"><i
                                        class="van-badge__wrapper van-icon van-icon-descending text-white"><!----><!----><!----></i>
                                    ลง</span><!----></div>
                        </button>
                    </div>
                </div>
                <!-- Trigger/Open The Modal -->
                {{-- <button id="myBtn">Open Modal</button> --}}

            </div>
            <!--Tab navbar-->
            @include('fronts.member.inc.tab-navbar')
            <!---->
        </div>

    </div>
@endsection

@push('scripts')
    {{-- Klin Chart --}}

    <script>
        var jiakxian = 0;

        window.SYMBOL = "{{ strtolower($product->name) }}usdt"
        window.fenshi = "Time sharing"
        window.fen = "M"
        window.xiaoshi = "H"
        window.tian = "Day"
        window.zhou = "Week"

        window.kai = "   S"
        window.gao = "   High"
        window.di = "   Low"
        window.shou = "   Collect"
        window.labels = ["Time:", "   S:", "   Collect:", "   High:", "   Low:", "Finished:"]
        window.plots = [{
            key: "ma5",
            title: "MA5: ",
            type: "line"
        }, {
            key: "ma10",
            title: "MA10: ",
            type: "line"
        }, {
            key: "ma30",
            title: "MA30: ",
            type: "line"
        }, {
            key: "ma60",
            title: "MA60: ",
            type: "line"
        }]
    </script>

    <link rel="stylesheet" href="{{ asset('fronts/graph/kline.min.css') }}">
    <link rel="stylesheet" href="{{ asset('fronts/graph/kline.css') }}">

    <script src="{{ asset('fronts/graph/jquery-2.1.4.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('fronts/graph/kline.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('fronts/graph/pako.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('fronts/graph/klinecharts.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('fronts/graph/ws-deedfeeds.js') }}"></script>
    <script>
        function initOnReady() {
            loading()
            window.init_offset = 10

            VyKline.bootstrap({
                container: document.getElementById('chart_container1'), // 容器
                deedfeeds: window.deedfeeds, // 数据反馈对象
                showIntervalToolbar: true,
                defaultInterval: 'm1',
                interval: ['m1', 'm5', 'm15', 'm30', 'm60', 'h4', 'd1', 'w1'],
                theme: 'light',
                customChart: {
                    volume_height: 50,
                    init_offset_x: window.init_offset,
                    default_rise_color: '#49C043',
                    default_fall_color: '#CC1414',
                },
                // customLoadingEl: customLoading,
                onTimeIntervalChanged: interval => {

                    console.log("window.deedfeeds", interval);
                }
            })


            vyChart.switchChartType('KLINE')
        }
        window.addEventListener('DOMContentLoaded', initOnReady, false);
    </script>
    <script src="{{ asset('fronts/graph/kline.min.js') }}"></script>

    {{-- End Klin Chart --}}

    <script>
        function goback() {
            window.history.go(-1);
        }
    </script>

    <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 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('border-yellow-400 border');
            $(this).addClass('border-yellow-400 border');
            $('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('border-yellow-400 border');
            var t = $(this).addClass('border-yellow-400 border');
            $('input[name="amount"]').val(amount);
            $('.betAmount').html(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);
            $('.betAmount').html(amount);
        });



        function setDirection(direction_ = 'up') {
            $('input[name="direction"]').attr('value', direction_);
            var amount = $('input[name="amount"]').val();
            if (amount != '' && amount > 0) {
                // $('.setDirection').click(function() {
                $('.modal-content').show();
                $(".overlay").css("display", "block");

                // });
            } else {
                Toastify({
                    text: "กรุณากรอกจำนวนเงิน", //please input amount
                    className: "error",
                    style: {
                        background: "red",
                    }
                }).showToast();
            }

        }

        // close btn alert
        $('.modal-content .cancelbtn').click(function() {
            $('.modal-content').hide();
            $(".overlay").css("display", "none");

        });

        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);
            $('.betAmount').html(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
            }
            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);
        }

        // make live data
        var current_price = "{{ $product->current_price }}";
        var old_price = "{{ $product->current_price }}";
        var random;
    </script>

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

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


            $(this).addClass('border-yellow-400 border')
        })
    </script>



    {{-- pop-up  --}}

    <script>
        // $('#myBtn').click(function() {
        //     $('.modal-content').show();
        //     $('#buy-sell-form');
        //     // $('body').toggleClass('modalbackground');
        // });

        // $('.modal-content .cancelbtn').click(function() {
        //     $('.modal-content').hide();

        //     // $('body').toggleClass('modalbackground');
        // });
    </script>
    <!--Active click btn ​ Time-->
    {{-- <script type="text/javascript">
        $(document).ready(function() {
            $("div.fontchangecolorj").click(function() {
                $('div.fontchangecolorj').removeClass('border-yellow-400 border');
                $(this).addClass('border-yellow-400 border');
            });
        });
    </script> --}}
    <!--Active click btn amount-->
    {{-- <script type="text/javascript">
        $(document).ready(function() {
            $("div.fontchangecolorbtn").click(function() {
                $('div.fontchangecolorbtn').removeClass('border-yellow-400 border');
                $(this).addClass('border-yellow-400 border');
            });
        });
    </script> --}}
@endpush

@push('styles')
<link rel="stylesheet" href="{{ asset('frontend/assets/custom.css') }}" />

    <style>
        .van-tabbar-item{
         background: rgb(69 18 114) !important;
        }
        .van-notice-bar{
            background: rgb(69 18 114) !important;
        }
        .van-nav-bar {
            background: rgb(69 18 114) !important;
        }
        /* popup */
        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(0 0 0 / 70%);
            display: none;
        }

        ::-webkit-input-placeholder {
            color: #b5b5b5;
            font-size: 12px;
        }

        ::-moz-placeholder {
            color: #b5b5b5;
            font-size: 12px;
        }

        input:focus {
            background: #f5f5f5;
            outline: 1px solid #f5f5f5;
        }

        .no_header {
            position: fixed;
            z-index: 9999;
            background: #121420;
            padding: 0px 10px;
            top: 0px;
            box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
        }

        .txtl {
            line-height: 50px;
            width: 10%;
        }

        .klinebox {
            width: 100%;
            height: 70vh;
            /*            margin-top: 15px;*/
            background: #1b1d29
        }

        .klinetitle {
            width: 100%;
            height: 80px;
            background: #1b1d29;
            padding: 20px 20px;
            box-shadow: 0 2px 10px 0 rgb(0 0 0 / 5%);
        }

        .klinetitle_l {
            width: 45%;
            height: 80px;
            float: left;
        }

        .klinetitle_r {
            width: 55%;
            height: 80px;
            float: left;
        }

        .newpricebox {
            height: 40px;
            line-height: 60px;
            margin-bottom: 0px;
            color: #2ebd85;
            font-size: 22px;
            font-weight: bold;
        }

        .changebox {
            height: 40px;
            line-height: 40px;
            margin-bottom: 0px;
            color: #2ebd85;
            font-weight: bold;
        }

        .klr3_box {
            width: 100%;
            height: 30px;
        }

        .klr2_box {
            width: 100%;
            height: 25px;
        }

        .klr3_box_dl {
            width: 45%;
            height: 30px;
            line-height: 40px;
            float: left;
            text-align: left;
        }

        .klr3_box_dr {
            width: 55%;
            height: 30px;
            line-height: 40px;
            float: right;
            text-align: right;
        }

        .klr2_box_dl {
            width: 45%;
            height: 25px;
            line-height: 25px;
            float: left;
            text-align: left;
        }

        .klr2_box_dr {
            width: 55%;
            height: 25px;
            line-height: 25px;
            float: right;
            text-align: right;
        }

        .dongbox {
            position: fixed;
            z-index: 9999;
            display: none;
            top: 0px;
            width: 100%;
            height: 100vh;
            background: rgba(18, 20, 32, 0.9);
        }

        .dong_con {
            width: 80%;
            height: 100vh;
            background: #212332;
            padding: 20px 15px 10px 20px;
            float: left;
        }

        .dong_title {
            width: 100%;
            height: 40px;
            line-height: 40px;
        }

        .dong_title_span {
            font-size: 18px;
            font-weight: bold;
        }

        .dong_find_box {
            width: 100%;
            height: 30px;
            background: #f5f5f5;
            border-radius: 10px;
        }

        .dong_find_box_img {
            width: 20%;
            height: 30px;
            line-height: 30px;
            float: left;
            text-align: center;
        }

        .dong_input_box {
            width: 80%;
            height: 30px;
            float: left;
        }

        .dong_symbox {
            width: 90%;
            height: 20px;
            border: none;
            background: #f5f5f5;
            margin-top: 5px;
        }

        .dong_sel_box {
            width: 100%;
            height: 30px;
            border-bottom: 1px solid #272936;
        }

        .dong_sel_span {
            display: block;
            width: 35px;
            height: 30px;
            line-height: 30px;
            border-bottom: 2px solid #FCD535;
            font-size: 14px;
            text-align: center;
            font-size: 14px;
        }

        .symbol_list {
            width: 100%;
            height: 80vh;
            overflow-y: scroll;
            margin-top: 10px;
        }

        .sy_list_box {
            width: 100%;
            height: 50px;
        }

        .sy_list_boxl {
            width: 35%;
            height: 30px;
            line-height: 30px;
            float: left;
            text-align: left;
        }

        .sy_list_boxr {
            width: 30%;
            height: 30px;
            line-height: 30px;
            float: right;
            text-align: center;
        }

        .btnbox {
            width: 100%;
            height: 60px;
            padding: 10px 25px 10px 25px;
            position: fixed;
            bottom: 0px;
            background: #222430;
            border-radius: 20px 20px 0px 0px;
        }

        .btnbox_l {
            width: 45%;
            height: 40px;
            line-height: 40px;
            float: left;
            text-align: center;
            border-radius: 10px;
            background: #0ecb81;
        }

        .btnbox_r {
            width: 45%;
            height: 40px;
            line-height: 40px;
            float: right;
            text-align: center;
            border-radius: 10px;
            background: #f5465c;
        }

        .sy_list_boxl span {
            color: #e6e6e6 !important;
        }

        .dong_order_c {
            width: 100% !important;
            height: 580px;
            background: #2a405c !important;
            margin: 0px auto;
            border-radius: 20px 20px 0 0;
            padding: 10px;
            position: fixed;
            /*bottom: -600px;*/
            bottom: 0px;
            /*transition: all 3s;*/
            /*-webkit-transition: all 3s;*/
        }

        .dong_order_c.dong_order_h {
            bottom: 0px;
        }

        .dong_order_x {
            width: 100%;
            height: 20px;
            line-height: 20px;
            text-align: right;
        }

        .dong_order_title {
            width: 100%;
            height: 30px;
            line-height: 20px;
            border-bottom: 1px solid #d6d6d9;
        }

        .dong_order_option {
            width: 100%;
            height: 80px;
            ;
            overflow: hidden;
            overflow-x: scroll;
            margin-top: 5px;
            scrollbar-face-color: #fff
        }

        .dong_order_option_list {
            width: 120px;
            height: 65px;
            background: #1eb585;
            float: left;
            margin-right: 5px;
            border-radius: 5px;
            padding: 1px;
        }

        .option_list_active {
            border: 1px solid #FCD535;
        }

        .dong_order_p {
            width: 100%;
            margin-bottom: 0.5rem;
            margin-top: 10px;
            padding-left: 5px;
        }

        .dong_money_list {
            width: 100%;
            height: 40px;
        }

        .dong_money_list_box {
            width: 70%;
            height: 65px !important;
            float: left;
            overflow: hidden;
            overflow-x: scroll;
            height: 50px;
        }

        .dong_money_list_box_l {
            width: 2000px;
            height: 50px;
        }

        .dong_money_list_box_option {
            width: 58px;
            height: 50px;
            line-height: 40px;
            background: #1eb585;
            float: left;
            margin-right: 5px;
            border-radius: 5px;
            text-align: center;
        }

        .green {
            color: #0ecb81;
        }

        .red {
            color: #f5465c;
        }

        .circle_box {
            position: relative;
            left: 0;
            right: 0;
            top: 15px;
            bottom: 120px;
            margin: auto;
            width: 110px;
            height: 127px;
            box-sizing: content-box;
        }

        /*倒计时圆形进度条*/
        .circle_wrapper {
            /*position: relative;*/
            /*left: 0;*/
            /*right: 0;*/

            /*bottom: 120px;*/
            margin: auto;
            margin-top: 15px;
            width: 150px;
            height: 150px;
            box-sizing: content-box;
        }

        .bi-x::before {
            color: #707a8a;
        }

        .right_circle,
        .left_circle {
            position: absolute;
            width: 110px;
            height: 110px;
            overflow: hidden;
            top: 8px;
        }

        .right_circle {
            right: -50%;
        }

        .left_circle {
            left: -50%;
        }

        .right_circle>img {
            width: 100%;
            position: absolute;
            right: 50%;
            -webkit-animation: run 5s linear;
            animation-fill-mode: forwards;

        }

        @-webkit-keyframes run {
            0 {
                transform: rotate(0);
            }

            50% {
                transform: rotate(180deg);
            }

            100% {
                transform: rotate(180deg);
            }
        }

        .left_circle>img {
            width: 100%;
            position: absolute;
            left: 50%;
            -webkit-animation: runaway 5s linear;
            animation-fill-mode: forwards;
        }

        @-webkit-keyframes runaway {
            0 {
                transform: rotate(0);
            }

            50% {
                transform: rotate(0);
            }

            100% {
                transform: rotate(180deg);
            }
        }

        .count_remaining {
            margin-top: -128px !important;
        }

        .remaining {
            position: relative;
            height: 138px;
        }

        .row {
            padding-top: 10px !important;
        }

        .remaining>.col {
            color: red;
            font-size: 40px;
            text-align: center;
            height: 105px;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .remaining>div>div:nth-of-type(1) {
            font-size: 40px;
            color: #fdbe19;
            text-align: center;
            margin-top: 10px;
        }

        .remaining>div>div:nth-of-type(2) {
            font-size: 12px;
            color: #6d6d6d;
            text-align: center;
        }

        .remaining>div>div:nth-of-type(3) {
            font-size: 14px;
            color: #fa2e42;
            text-align: center;
        }

        .fe6 {}

        .jine-box {
            line-height: 0px;
            margin-top: 16px;
        }

        .dong_order_option::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(9, 74, 238, 0.7);
            /* border-radius: 0; */
            background: rgba(0, 0, 0, 0.1);
        }

        .xj-box span {
            font-size: 16px !important;
        }

        .wtlistbox {
            width: 100%;
            padding: 0px;
            background: #121420;
        }

        .noordersvg {
            margin: 0 auto;
            padding-top: 100px;
        }
    </style>

    <style>
        /* body {
                                                                        font-family: sans-serif;
                                                                        display: grid;
                                                                        height: 100vh;
                                                                        gap: none;
                                                                        place-items: center;
                                                                    } */

        .base-timer {
            position: relative;
            width: 150px;
            height: 150px;
        }

        .base-timer__svg {
            transform: scaleX(-1);
        }

        .base-timer__circle {
            fill: none;
            stroke: none;
        }

        .base-timer__path-elapsed {
            stroke-width: 7px;
            stroke: #768da9;
        }

        .base-timer__path-remaining {
            stroke-width: 7px;
            stroke-linecap: round;
            transform: rotate(90deg);
            transform-origin: center;
            transition: 1s linear all;
            fill-rule: nonzero;
            stroke: currentColor;
        }

        .base-timer__path-remaining.green {
            color: #f5465c;
        }

        .base-timer__path-remaining.orange {
            color: #c90041;
        }

        .base-timer__path-remaining.red {
            color: #f20002;
        }

        .base-timer__label {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 25px;
            left: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: #fff;
        }

        .o_title_box {
            width: 50%;
            height: 40px;
            line-height: 40px;
            background: #121420;
        }

        /*  */

        .contentbox {
            width: 100%;
            margin-top: 45px;
            background: #1b1d29
        }

        .contentbox_top {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: left;
            padding: 5px 15px;
        }


        .listbox {
            width: 100%;
            height: 120px;
            background: #2C3445;
            padding: 5px 15px;
            margin-bottom: 5px;
            border-radius: 10px;
        }


        .listbox_title {
            width: 100%;
            height: 30px;
            line-height: 30px;
        }

        .listbox_title_l {
            width: 50%;
            height: 30px;
            float: left;
            text-align: left;
        }

        .listbox_title_r {
            width: 50%;
            height: 30px;
            float: right;
            text-align: right;
        }

        .progress-bar {
            background-color: #eeb80d;
        }

        .bi-chevron-right::before {
            color: #e6e6e6;
        }

        /* Graph Klin  */
        #chart_container {
            margin: 0 auto;
            width: 100%;
            height: 300px;
            /* height: 500px; */
        }

        .changInterval {
            margin-bottom: 10px;
            padding-left: 5px;
        }

        .interval-item {
            font-size: 14px;
            padding: 2px;
            color: #e6e6e6;
        }

        .active {
            border-bottom: 3px solid #FCD535;
        }

        .loding {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 999;
            /*display: flex;*/
            justify-content: center;
            padding-top: 130px;
            display: none;
        }

        .loding img {
            width: 50px;
            height: 50px;
        }
    </style>
@endpush