@extends('layouts.trade.app')
@push('style')
    <link rel="stylesheet" href="/assets/vendor/libs/bootstrap-select/bootstrap-select.css" />
@endpush
@section('title', __('Trading'))
@section('content')
<div class="row">
    <div class="col col-md-3 col-xl-2 rounded">
        <div class="card overflow-hidden" style="height: calc(100vh - 95px);">
            <div class="card-header" style="padding:5px;">
                <select class="form-select cryptoCatSelect selectpicker w-100 border border-0" onchange="selectVal(this.value)" id="cryptoCatSelect" data-style="btn-primary">
                    @foreach($cats as $key=>$item)
                        <option id="{{$item->cat_name}}" value="{{$item->id_name}}">{{$item->cat_name}}</option>
                    @endforeach
                </select>
            </div>
            <div class="card-body ps-1 pe-1 pb-0" id="vertical-example">
                <div class="cryptoContainer blockBg">
                    <div class="tab-content p-0">
                        <div class="blockHeader mt-1 mb-1 d-flex justify-content-between">
                            <span>Pair</span>
                            <span>Bid</span>
                            <span>Ask</span>
                        </div>
                        @foreach($cats as $key=>$item1)
                            <div class="tab-pane categoriesContent"  id="{{$item1->id_name}}" @if($item1->id == $category) style="display: block;" @else style="display: none;" @endif>
                                <ul class="cryptoMenu p-0">
                                    @foreach(\App\Models\Pair::where('category_id', $item1->id)->where('status', 1)->orderBy('sort')->get() as $list)
                                        <li class="d-flex align-items-center justify-content-between ChangeWidget activePair1" data-cross="{{$list->cross_pair}}" data-status="aa" data-demicals="{{$list->demicals}}" data-coin="{{$list->id}}" data-leverage="{{$list->leverage}}" data-contract="{{$list->contract}}" data-symbol="{{$list->api_symbol}}" onclick="ChangeWidget('{{$list->api_symbol}}')" id="{{$list->symbol}}" data-bid="0.00" data-ask="0.00">
                                            <span class="col-4 me-1 pairName text-white" style="font-size:13px;">{{$list->name}}</span>
                                            <span class="col-4 me-1 badge bid" style="font-size:12px; font-weight:600;">0.00</span>
                                            <span class="col-4 badge ask" style="font-size:12px; font-weight:600;">0.00</span>
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-9 col-xl-10">
        <div class="row">
            <div class="col-12 col-lg-8 col-xl-9 col-xxl-10">
                <div class="row">
                    <div class="col-12">
                        <div class="blockBg">
                            <div class="tradingview-widget-container">
                                <div id="tradingview_3b2ad"></div>
                                <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
                                <script type="text/javascript">
                                    function ChangeWidget(value = Cookies.get('activeWidget')) {
                                        // console.log('aqqqqqq'+Cookies.get('activeWidget'));
                                        new TradingView.widget(
                                            {
                                                "width": '100%',
                                                "height": '450px',
                                                "symbol": value,
                                                "interval": "D",
                                                "timezone": "Etc/UTC",
                                                "theme": "dark",
                                                "style": "2",
                                                "locale": "en",
                                                "toolbar_bg": "#f1f3f6",
                                                "enable_publishing": false,
                                                "allow_symbol_change": true,
                                                "save_image": false,
                                                "container_id": "tradingview_3b2ad"
                                            }
                                        );
                                    };
                                    ChangeWidget();
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 col-xl-3 col-xxl-2">
                <div class="card h-100">
                    <div class="card-header">
                        Place Order
                    </div>
                    <div class="card-body">
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control numbersOnly" id="tradeVolume" value="0.01" placeholder="0.001" required>
                            <label for="tradeVolume">Volume</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control numbersOnly" id="stopLoss" value="0" required>
                            <label for="stopLoss">Stop Loss</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input type="text" class="form-control numbersOnly" id="takeProfit" value="0" required>
                            <label for="takeProfit">Take Profit</label>
                        </div>
                        <input id="crossPriceBid" value="" hidden="">
                        <input id="crossPriceAsk" value="" hidden="">

                        <div class="col-12 mt-2" aria-label="BuySell">
                            <button type="button" data-type="2" id="sellPosition" class="d-flex justify-content-center align-center flex-wrap btn btn-lg w-100 rounded btn-danger">
                                <span class="fs-6" id="bidTradeValue" data-price="" data-contract="" data-leverage="">0.00</span>
                                <small class="fs-6 fw-bold ms-2">Sell</small>
                            </button>
                        </div>
                        <div class="col-12 mt-3">
                            <button type="button" data-type="1" id="buyPosition" class="d-flex justify-content-center align-center flex-wrap btn btn-lg w-100 rounded btn-success">
                                <span class="fs-6" id="askTradeValue" data-price="" data-contract="" data-leverage="">0.00</span>
                                <small class="fs-6 fw-bold ms-2">Buy</small>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-12 mt-3">
                <ul class="nav nav-tabs " style="border-bottom: none;">
                    <li class="nav-item active">
                        <a class="nav-link fs-5 active" data-bs-toggle="tab" href="#Active">Active orders</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link fs-5" data-bs-toggle="tab" href="#Complete">Order history</a>
                    </li>
                </ul>
                <div class="tab-content scroll ps-1 pe-1 rounded-2 rounded-top-0" style="overflow-y:auto; height: 34vh;" id="vertical-example">
                    <div class="tab-pane active" id="Active">
                        <div class="table-responsive">
                            <table class="table table-sm table-striped table-hover table-borderless mb-0" id="tableRefresh">
                                <thead class="table-light">
                                <tr>
                                    <th>Order</th>
                                    <th>Open time</th>
                                    <th>Pair</th>
                                    <th>Type</th>
                                    <th>Volume</th>
                                    <th>Open Price</th>
                                    <th>Current Price</th>
                                    <th>Stop Loss</th>
                                    <th>Take Profit</th>
                                    <th>Profit</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody id="logData">
                                @include('layouts.trade.sections.logs')
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="Complete">
                        <div class="table-responsive">
                            <table class="table table-sm table-striped table-hover table-borderless mb-0" id="tableRefresh">
                                <thead class="table-light">
                                <tr>
                                    <th>Order</th>
                                    <th>Open time</th>
                                    <th>Close time</th>
                                    <th>Pair</th>
                                    <th>Type</th>
                                    <th>Volume</th>
                                    <th>Open Price</th>
                                    <th>Close Price</th>
                                    <th>Stop Loss</th>
                                    <th>Take Profit</th>
                                    <th>Profit</th>
                                </tr>
                                </thead>
                                <tbody id="historyLog">
                                @include('layouts.trade.sections.history', ['logs' => $completed])
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('script')
<script src="/assets/js/extended-ui-perfect-scrollbar.js"></script>
<script src="/assets/vendor/libs/bootstrap-select/bootstrap-select.js"></script>
<script src="/assets/js/forms-selects.js"></script>
@endpush