@extends('layouts.customer_template')

	@section('title')
		Bitbance Self Trade Dashboard
	@endsection

	@section('style')
        <link rel="stylesheet" href="{{asset('customer/assets/css/trade-new.css') }}" />
        <link rel="stylesheet" href="{{asset('customer/assets/css/trade-new-responsive.css') }}" />
    @endsection

    @section('header-menu')
    @endsection

	@section('content')
		<div class="container content-section" style="overflow-x: hidden">
			<div class="chart">
			  <div class="chart-header">
                  <div class="live-balance">
                      <span>Live Balance</span>
                      <p id="live-balance">${{$tradeBalanceUSD ?? 0}}</p>
                  </div>
                  <div class="actions mobile">
                      <button class="btn-primary depositBtn">Deposit</button>
                      <button class="btn-primary withdrawBtn">Withdraw</button>
                  </div>
                  <button id="trades-page" class="trades-link mobile">Trades</button>
{{--                  <button class="trades-link mobile trades-page">Trades</button>--}}
			  </div>

			  <div class="ring" id="loading"></div>

			  <div class="chart-area">
				<div class="popu-up popup-profit"></div>
				<div class="chart-actions">
				  <div class="currency-dropdown">
					<span>BTC/USDT</span>
					<img
					  src="{{ asset('customer/assets/images/trade/icons8-expand-arrow-52 2.svg') }}"
					  alt=""
					/>
				  </div>
				  <div class="currency-dropdown-list">
					<div class="search">
					  <img src="{{ asset('customer/assets/images/trade/Search icon 1.svg') }}" alt="" />
					  <input type="text" placeholder="Search" />
					</div>
					<div class="list-item">
					  <div class="item-logo">
						<div class="coin-image">
						  <img
							src="{{ asset('customer/assets/images/trade/jb2y2w9PATCWOj9aaO0PRrTlE.jpeg.svg') }}"
							alt=""
						  /><img
							src="{{ asset('customer/assets/images/trade/Component 1.svg') }}"
							class="overlapping-image"
							alt=""
						  />
						</div>
						<p>BTC/USDT</p>
					  </div>
{{--					  <p class="price">$ {{$currencyRates ?? 0.0}}</p>--}}
					</div>
				  </div>
				  <div class="chart-time">23:27:46</div>
				  <div class="chart-time-diff">
					<button class="interval-btn" data-interval="1s">1s</button>
					<button class="interval-btn active" data-interval="1m">
					  1m
					</button>
					<button class="interval-btn" data-interval="3m">3m</button>
					<button class="interval-btn" data-interval="5m">5m</button>
					<button class="interval-btn" data-interval="15m">15m</button>
					<button class="interval-btn" data-interval="30m">30m</button>
					<button class="interval-btn" data-interval="1h">1h</button>
					<button class="interval-btn" data-interval="2h">2h</button>
					<button class="interval-btn" data-interval="4h">4h</button>
				  </div>
				</div>

				<div class="trade-chart">
				  <canvas id="candlestickChart"></canvas>
				</div>

			  </div>

			</div>

		   <div class="controls">

			  <div class="actions">
                  <button class="btn-primary desktop depositBtn">Deposit</button>
                  <button class="btn-primary desktop withdrawBtn">Withdraw</button>
			  </div>

			  <div class="action-center">
{{--                  <button style="position:unset !important; " class="trades-link desktop trades-page">Trades</button>--}}
				<div class="currency desktop">
				  {{--<div class="coin-image">
					<img
					  src="{{ asset('customer/assets/images/trade/jb2y2w9PATCWOj9aaO0PRrTlE.jpeg.svg') }}"
					  alt=""
					/><img
					  src="{{ asset('customer/assets/images/trade/Component 1.svg') }}"
					  class="overlapping-image"
					  alt=""
					/>
				  </div>--}}
				  <p id="currency-symbol">BTC/USDT</p>
				</div>

                <div class="mt-1" id="#profit_loss_error"></div>
{{--                  <p class="price">$ {{$currencyRates ?? 0.0}}</p>--}}
				<div class="trade-input desktop">
				  <label for="">Time</label>
				  <div class="input-control">
					<button class="button-control" id="time-minus">-</button>
					<input type="text" value="00:01:00" id="time" />
					<button class="button-control" id="time-plus">+</button>
				  </div>
				  <div class="time-options">
					<button class="option-time" data-time="00:05">00:05</button>
					<button class="option-time" data-time="00:10">00:10</button>
					<button class="option-time" data-time="00:20">00:20</button>
					<button class="option-time" data-time="00:30">00:30</button>
					<button class="option-time" data-time="1m">1m</button>
					<button class="option-time" data-time="2m">2m</button>
					<button class="option-time" data-time="5m">5m</button>
					<button class="option-time" data-time="15m">15m</button>
					<button class="option-time" data-time="30m">30m</button>
					<button class="option-time" data-time="1h">1h</button>
					<button class="option-time" data-time="2h">2h</button>
					<button class="option-time" data-time="4h">4h</button>
				  </div>
				</div>
				<div class="trade-input desktop">
				  <label for="">Investment</label>
				  <div class="input-control">
					<button class="button-control" id="investment-minus">-</button>
					<input type="text" class="invest_amount" value="$1" id="investment" />
					<button class="button-control" id="investment-plus">+</button>
				  </div>
				</div>
				<button class="trade-button up desktop" id="trade-up">
				  Up
				  <img src="{{ asset('customer/assets/images/trade/icons8-up-arrow-52 1.svg') }}" alt="" />
				</button>
				<div class="trade-profit desktop">Payout : $<span id="profit">0</span></div>
				<button class="trade-button down desktop" id="trade-down">
				  Down
				  <img
					src="{{ asset('customer/assets/images/trade/icons8-up-arrow-52 1.svg') }}"
					alt=""
					style="transform: rotate(180deg)"
				  />
				</button>
				<div class="trades">Trades</div>
				<div class="trade-history-container"></div>
                  <div class="trades">Today Completed Trades</div>
                  <div class="old-trade-history-container">
                    @if(isset($userTrades))
                        @foreach($userTrades as $trades)
                        <div class="trade-history" id="trade-{{$trades->trade_id}}">
                            <div class="trade-history-item">
                                <div class="currency-section">
                                    {{--<div class="coin-image">
                                        <img src="customer/assets/images/trade/jb2y2w9PATCWOj9aaO0PRrTlE.jpeg.svg" alt="" />
                                        <img src="customer/assets/images/trade/Component 1.svg" class="overlapping-image" alt="" />
                                    </div>--}}
                                    <p>{{$trades->currency}}</p>
                                </div>
                                <p class="trade-duration">{{$trades->status}}</p>
                            </div>
                            <div class="trade-value">
                            <div class="trade-value-item">
                                <img src="customer/assets/images/trade/icons8-up-arrow-52 1.svg" alt=""
                                style="@if($trades->trade_type == "Sell") transform: rotate(180deg) @endif" />
{{--                                     style="${direction === "down" ? "transform: rotate(180deg)" : "" }" />--}}
                               <span class="@if($trades->trade_final_effect == "Profit") profit @elseif($trades->trade_final_effect == "Loss") loss @endif">
                                   @if($trades->trade_final_effect == "Profit") + @elseif($trades->trade_final_effect == "Loss") - @endif
                                   ${{abs($trades->trade_closing_amount)}}
                               </span>
                            </div>
                            <div class="trade-state @if($trades->trade_final_effect == "Profit") profit @elseif($trades->trade_final_effect == "Loss") loss @endif">{{$trades->trade_final_effect}}</div>
                        </div>
                    </div>
                    @endforeach
                  @endif
                </div>
			  </div>
			</div>
			<div class="mobile-controls mobile">
			  <div class="payout-container">
				<div class="wrapper-box">
				  <div class="coin-image">
					{{--<img
					  src="{{ asset('customer/assets/images/trade/jb2y2w9PATCWOj9aaO0PRrTlE.jpeg.svg') }}"
					  alt=""
					/>
					<img
					  src="{{ asset('customer/assets/images/trade/Component 1.svg') }}"
					  alt=""
					  class="overlapping-image"
					/>--}}

					<p id="currency-symbol-mobile" style="padding-left:10px;">BTC/USDT</p>
				  </div>
{{--				  <p>+11.0%</p>--}}
				</div>
				<div
				  class="wrapper-box"
				  style="justify-content: center; color: rgba(255, 255, 255, 0.62)"
				>
				  Payout
				  <span style="color: white; margin-left: 5px"
					>$<span id="profit-mobile"> 0 </span>
				  </span>
				</div>
			  </div>
			  <div class="input-container">
				<div class="trade-input">
				  <label for="">Time</label>
				  <div class="input-control">
					<button class="button-control" id="time-minus-mobile">-</button>
					<input type="text" value="00:01:00" id="time-mobile" />
					<button class="button-control" id="time-plus-mobile">+</button>
				  </div>
				  <div class="time-options-mobile" id="time-options-mobile">
					<button class="mobile-option" data-time="00:05">00:05</button>
					<button class="mobile-option" data-time="00:10">00:10</button>
					<button class="mobile-option" data-time="00:20">00:20</button>
					<button class="mobile-option" data-time="00:30">00:30</button>
					<button class="mobile-option" data-time="1m">1m</button>
					<button class="mobile-option" data-time="2m">2m</button>
					<button class="mobile-option" data-time="5m">5m</button>
					<button class="mobile-option" data-time="15m">15m</button>
					<button class="mobile-option" data-time="30m">30m</button>
					<button class="mobile-option" data-time="1h">1h</button>
					<button class="mobile-option" data-time="2h">2h</button>
					<button class="mobile-option" data-time="4h">4h</button>
				  </div>
				</div>
				<div class="trade-input">
				  <label for="">Investment</label>
				  <div class="input-control">
					<button class="button-control" id="investment-minus-mobile">
					  -
					</button>
					<input type="text" class="invest_amount" value="$1" id="investment-mobile" />
					<button class="button-control" id="investment-plus-mobile">
					  +
					</button>
				  </div>
				</div>
			  </div>
			  <div class="trade-button-container">
				<button class="trade-button down" id="trade-down-mobile">
				  Down
				  <img
					src="{{ asset('customer/assets/images/trade/icons8-up-arrow-52 1.svg') }}"
					alt=""
					style="transform: rotate(180deg)"
				  />
				</button>
				<button class="trade-button up" id="trade-up-mobile">
				  Up
				  <img src="{{ asset('customer/assets/images/trade/icons8-up-arrow-52 1.svg') }}" alt="" />
				</button>
			  </div>
			</div>

      </div>

        <!-- Custom Confirmation Modal
        <div class="modal fade body" id="messageModal" tabindex="-1" aria-labelledby="customConfirmModalLabel" aria-hidden="true">
            <div class="modal-dialog custom-modal-size">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="error-icon">
                            <i class="bi-exclamation-triangle-fill"></i>
                        </div>
                    </div>
                    <div class="modal-body">
                        <h5 class="modal-title" id="customConfirmModalLabel">Message</h5>
                        <p id="modelMessageBody">
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn-main2" id="close" data-bs-dismiss="modal">OK</button>
                        <button type="button" class="btn-main2" id="gotoNext">View Trade History</button>
                    </div>
                </div>
            </div>
        </div>
        -->
    @endsection

	@section('script')

    <script src="https://unpkg.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>
	<script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
      integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>




    <script>

        $(document).ready(function () {
            function parseAmount(value) {
                return parseFloat(value.replace(/[^0-9.]/g, '')) || 0;
            }

            function updateProfitFromInput(inputSelector, profitSelector) {
                let amount = parseAmount($(inputSelector).val());
                let profit = amount + (amount * 0.8);

                $(profitSelector).text(profit.toFixed(2));
            }

            function updateAllProfits() {
                updateProfitFromInput("#investment", "#profit");
                updateProfitFromInput("#investment-mobile", "#profit-mobile");
            }

            $(".invest_amount").on("input change keyup", function (e) {
                updateAllProfits();
            });

            // Handle + / - buttons
            $("#investment-plus").click(function (e) {
                e.preventDefault();
                adjustAmount("#investment", "#profit", 1);
            });

            $("#investment-minus").click(function (e) {
                e.preventDefault();
                adjustAmount("#investment", "#profit", -1);
            });

            $("#investment-plus-mobile").click(function (e) {
                e.preventDefault();
                adjustAmount("#investment-mobile", "#profit-mobile", 1);
            });

            $("#investment-minus-mobile").click(function (e) {
                e.preventDefault();
                adjustAmount("#investment-mobile", "#profit-mobile", -1);
            });

            function adjustAmount(inputSelector, profitSelector, delta) {
                let amount = parseAmount($(inputSelector).val());
                amount = Math.max(0, amount + delta); // prevent negative values
                $(inputSelector).val(`$${amount}`);
                $(profitSelector).text((amount + (amount * 0.8)).toFixed(2));
            }

            // Initialize
            updateAllProfits();
        });



        function toggleSidebar() {
        var sidebar = document.getElementById("sm-sidebar");
        var burgerMenu = document.querySelector(".burger-menu");

        if (sidebar.style.left === "0px") {
          sidebar.style.left = "-40%";
          burgerMenu.innerHTML = "&#9776;";
        } else {
          sidebar.style.left = "0px";
        }
      }

      // Redirect buttons
      $(".depositBtn").on("click", function() {
          window.location.href = "{{ route('deposits') }}";
      });

      $(".withdrawBtn").on("click", function() {
          window.location.href = "{{ route('withdraw') }}";
      });

      /*$(".trades-page").on("click", function() {
          window.location.href = "{{ route('self_trades') }}";
      });*/

    </script>

    <script src="https://unpkg.com/lightweight-charts@4.1.1/dist/lightweight-charts.standalone.production.js"></script>
    <script src="{{asset('customer/assets/js/chart.js')}}"></script>

    <script>
        window.appConfig = window.appConfig || {};
        window.appConfig.routes = {
            ...(window.appConfig.routes || {}),
            startTrade: "{{ route('self-trade.start') }}",
            endTrade: "{{ route('self-trade.end') }}",
            checkTradeBalance: "{{ route('check_balance') }}"
        };
        window.appConfig.csrfToken = "{{ csrf_token() }}";
    </script>


    @endsection