@extends('user.layouts.xtrade')

@section('main')
@include('layouts.error')
@include('layouts.open')

<div class="container-fluid mtb15 no-fluid">
    <div class="row sm-gutters">
      <div class="col-md-3">
        
        <!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/markets/cryptocurrencies/prices-all/" rel="noopener" target="_blank"><span class="blue-text">Crypto markets</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-screener.js" async>
    {
    "width": "100%",
    "height": "100%",
    "defaultColumn": "overview",
    "screener_type": "crypto_mkt",
    "displayCurrency": "USD",
    "colorTheme": "light",
    "locale": "en",
    "isTransparent": true
  }
    </script>
  </div>
  <!-- TradingView Widget END -->

          
      </div>
      <div class="col-md-6">
        <div class="main-chart mb15">
       <div class="tradingview-widget-container">
            <div id="tradingview_e8053"></div>
            <script src="https://s3.tradingview.com/tv.js"></script>
            <script>
                new TradingView.widget(
                {
                    "width": "100%",
                    "height": 550,
                    "symbol": "FX:EURUSD",
                    "interval": "D",
                    "timezone": "Etc/UTC",
                    "theme": "Dark",
                    "style": "1",
                    "locale": "en",
                    "toolbar_bg": "#f1f3f6",
                    "enable_publishing": false,
                    "withdateranges": true,
                    "hide_side_toolbar": false,
                    "allow_symbol_change": true,
                    "show_popup_button": true,
                    "popup_width": "1000",
                    "popup_height": "650",
                    "container_id": "tradingview_e8053"
                }
              );
            </script>
          </div>
        <div id="testt">
        
          </div>
        </div>
        <div class="market-trade">
          <ul class="nav nav-pills" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="pill" href="#pills-trade-limit" role="tab"
                aria-selected="true">Place Trade</a>
            </li>
            
          </ul>
          <div class="tab-content">
            <div class="tab-pane fade show active" id="pills-trade-limit" role="tabpanel">
              <div class="d-flex justify-content-between">
          <form id="myForm" action="{{ route('history.storeX')}}" method="post">
            {{ csrf_field() }}

            <input type="hidden" name="user_id" value="{{ Auth::user()->id }}" />
            <input type="hidden" name="bal" value="{{ Auth::user()->bal }}" />
            <input type="hidden" name="email" value="{{ Auth::user()->email }}" />
            <input type="hidden" name="currency" value="{{ Auth::user()->currency }}" />
            <input type="hidden" name="date" value="{{ $date }}" />
            <input type="hidden" name="time" value="{{ $time }}" />
            <input type="hidden" name="type" value="BUY" />
            <input type="hidden" name="status" value="OPEN" />
            <input type="hidden" name="tradeid" value="{{ $tradeid }}" />
         

                <div class="market-trade-buy">
                  <div class="input-group">
                     <select class="form-control" name="trade" id="currency-pair">
                        <option value="EUR/USD">EUR/USD</option>
                        <option value="GBP/USD">GBP/USD</option>
                        <option value="USD/JPY">USD/JPY</option>
                        <!-- Add more currency pairs as needed -->
                     </select>
                    <div class="input-group-append">
                      <span id="symbol1" class="input-group-text"></span>
                    </div>
                  </div>
                  <div class="input-group">
                    <input type="number" id="amount" class="form-control" min="0" placeholder="Amount" name="amount"  required>
                    <div class="input-group-append">
                      <span class="input-group-text"></span>
                    </div>
                  </div>
                 
                  <p>Available Balance: <span id="bal1"> {{ Auth::user()->currency }} {{ Auth::user()->bal }}</span></p>
                 
                 
                  <button onclick="checkBalance()" class="btn buy" type="submit">Buy</button>
                </div>
              </form>           

                <form id="myForm" action="{{ route('history.storeX')}}" method="post">
                  {{ csrf_field() }}

                  <input type="hidden" name="user_id" value="{{ Auth::user()->id }}" />
                  <input type="hidden" name="bal" value="{{ Auth::user()->bal }}" />
                  <input type="hidden" name="email" value="{{ Auth::user()->email }}" />
                  <input type="hidden" name="currency" value="{{ Auth::user()->currency }}" />
                  <input type="hidden" name="date" value="{{ $date }}" />
                  <input type="hidden" name="time" value="{{ $time }}" />
                  <input type="hidden" name="type" value="SELL" />
                  <input type="hidden" name="status" value="OPEN" />
                  <input type="hidden" name="tradeid" value="{{ $tradeid }}" />
                  
                <div class="market-trade-sell">
                  <div class="input-group">
                    <select class="form-control" name="trade" id="currency-pair">
                        <option value="EUR/USD">EUR/USD</option>
                        <option value="GBP/USD">GBP/USD</option>
                        <option value="USD/JPY">USD/JPY</option>
                        <!-- Add more currency pairs as needed -->
                     </select>
                    <div class="input-group-append">
                      <span id="symbol2" class="input-group-text"></span>
                    </div>
                  </div>
                  <div class="input-group">
                    <input type="number" id="amount" name="amount"  class="form-control" min="0" placeholder="Amount"  required>
                    <div class="input-group-append">
                      <span class="input-group-text"></span>
                    </div>
                  </div>
                  
                  <p>Available Balance:<span id="bal2">{{ Auth::user()->currency }} {{ Auth::user()->bal }}</span></p>
                 

            
                  <button onclick="checkBalance()" class="btn sell" type="submit">Sell</button>

                </div>
              </form>
              
            </div>
            </div>
           
          </div>
        </div>
      </div>
   
        
        

      <div class="col-md-3">
        <div class="order-book mb15">
          <!-- TradingView Widget BEGIN -->
        <div class="tradingview-widget-container">
          <div class="tradingview-widget-container__widget"></div>
          <script type="text/javascript"
            src="https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js" async>
              {
                "colorTheme": "dark",
                  "dateRange": "1d",
                    "showChart": true,
                      "locale": "en",
                        "largeChartUrl": "",
                          "isTransparent": false,
                            "width": "100%",
                              "height": "550",
                                "plotLineColorGrowing": "rgba(25, 118, 210, 1)",
                                  "plotLineColorFalling": "rgba(25, 118, 210, 1)",
                                    "gridLineColor": "rgba(42, 46, 57, 1)",
                                      "scaleFontColor": "rgba(120, 123, 134, 1)",
                                        "belowLineFillColorGrowing": "rgba(33, 150, 243, 0.12)",
                                          "belowLineFillColorFalling": "rgba(33, 150, 243, 0.12)",
                                            "symbolActiveColor": "rgba(33, 150, 243, 0.12)",
                                              "tabs": [
                                                {
                                                  "title": "Indices",
                                                  "symbols": [
                                                    {
                                                      "s": "FOREXCOM:SPXUSD",
                                                      "d": "S&P 500"
                                                    },
                                                    {
                                                      "s": "FOREXCOM:NSXUSD",
                                                      "d": "Nasdaq 100"
                                                    },
                                                    {
                                                      "s": "FOREXCOM:DJI",
                                                      "d": "Dow 30"
                                                    },
                                                    {
                                                      "s": "INDEX:NKY",
                                                      "d": "Nikkei 225"
                                                    },
                                                    {
                                                      "s": "INDEX:DEU30",
                                                      "d": "DAX Index"
                                                    },
                                                    {
                                                      "s": "FOREXCOM:UKXGBP",
                                                      "d": "FTSE 100"
                                                    }
                                                  ],
                                                  "originalTitle": "Indices"
                                                },
                                                {
                                                  "title": "Commodities",
                                                  "symbols": [
                                                    {
                                                      "s": "CME_MINI:ES1!",
                                                      "d": "E-Mini S&P"
                                                    },
                                                    {
                                                      "s": "CME:6E1!",
                                                      "d": "Euro"
                                                    },
                                                    {
                                                      "s": "COMEX:GC1!",
                                                      "d": "Gold"
                                                    },
                                                    {
                                                      "s": "NYMEX:CL1!",
                                                      "d": "Crude Oil"
                                                    },
                                                    {
                                                      "s": "NYMEX:NG1!",
                                                      "d": "Natural Gas"
                                                    },
                                                    {
                                                      "s": "CBOT:ZC1!",
                                                      "d": "Corn"
                                                    }
                                                  ],
                                                  "originalTitle": "Commodities"
                                                },
                                                {
                                                  "title": "Bonds",
                                                  "symbols": [
                                                    {
                                                      "s": "CME:GE1!",
                                                      "d": "Eurodollar"
                                                    },
                                                    {
                                                      "s": "CBOT:ZB1!",
                                                      "d": "T-Bond"
                                                    },
                                                    {
                                                      "s": "CBOT:UB1!",
                                                      "d": "Ultra T-Bond"
                                                    },
                                                    {
                                                      "s": "EUREX:FGBL1!",
                                                      "d": "Euro Bund"
                                                    },
                                                    {
                                                      "s": "EUREX:FBTP1!",
                                                      "d": "Euro BTP"
                                                    },
                                                    {
                                                      "s": "EUREX:FGBM1!",
                                                      "d": "Euro BOBL"
                                                    }
                                                  ],
                                                  "originalTitle": "Bonds"
                                                },
                                                {
                                                  "title": "Forex",
                                                  "symbols": [
                                                    {
                                                      "s": "FX:EURUSD"
                                                    },
                                                    {
                                                      "s": "FX:GBPUSD"
                                                    },
                                                    {
                                                      "s": "FX:USDJPY"
                                                    },
                                                    {
                                                      "s": "FX:USDCHF"
                                                    },
                                                    {
                                                      "s": "FX:AUDUSD"
                                                    },
                                                    {
                                                      "s": "FX:USDCAD"
                                                    }
                                                  ],
                                                  "originalTitle": "Forex"
                                                }
                                              ]
              }
            </script>
        </div>
        <!-- TradingView Widget END -->
        </div>
        <div class="market-history">
          <ul class="nav nav-pills" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="pill" href="#recent-trades" role="tab" aria-selected="true">Recent
                Trades</a>
            </li>
            
          </ul>
          <!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/symbols/BTCUSD/?exchange=BITSTAMP" rel="noopener" target="_blank"><span class="blue-text">Bitcoin analysis</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-technical-analysis.js" async>
    {
    "interval": "1m",
    "width": "100%",
    "isTransparent": false,
    "height": "100%",
    "symbol": "BITSTAMP:BTCUSD",
    "showIntervalTabs": true,
    "locale": "en",
    "colorTheme": "dark"
  }
    </script>
  </div>
  <!-- TradingView Widget END -->
        </div>
      </div>
      <div class="col-md-3">
        <div class="market-news mt15">
          <h2 class="heading">Market News</h2>

          <!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
    <div class="tradingview-widget-container__widget"></div>
    <div class="tradingview-widget-copyright"><a href="https://www.tradingview.com/key-events/" rel="noopener" target="_blank"><span class="blue-text">Daily news roundup</span></a> by TradingView</div>
    <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-timeline.js" async>
    {
    "feedMode": "all_symbols",
    "colorTheme": "dark",
    "isTransparent": false,
    "displayMode": "regular",
    "width": "100%",
    "height": "100%",
    "locale": "en"
  }
    </script>
  </div>
  <!-- TradingView Widget END -->

        </div>
      </div>
      <div class="col-md-9">
        <div class="market-history market-order mt15">
          <ul class="nav nav-pills" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" data-toggle="pill" href="#open-orders" role="tab" aria-selected="true">
                Trades</a>
            </li>
            
          </ul>
          <div class="tab-content" style="overflow: scroll;
    height: 360px;">
            <div class="tab-pane fade show active" id="open-orders" role="tabpanel">
              <ul class="d-flex justify-content-between market-order-item table-active">
                <li>Time</li>
                <li>Symbol</li>
               
                <li>Amount</li>
                <li>Buy/Sell</li>
                <li>Currency</li>
                
                <li>Status</li>
               <li>Action</li>
              </ul>
              <div id="open-trade">
                @forelse (Auth::user()->historys as $history)
                <ul class="d-flex justify-content-between market-order-item ">

                 
                        <li>{{ $history->time }}</li>
                        <li>{{ $history->trade }}</li>
                        <li>{{ $history->amount }}</li>
                        <li>{{ $history->type }}</li>
                        <li>{{ $history->currency }}</li>
                        <li>{{ $history->status }}</li>
                
                       
                 <li><button class="btn btn-success btn-sm" >Close</button></li>
                </ul>
                 @empty
               
              <h5 class="btn btn-success btn-sm" style="width: 100%" >No Trade on your Account yet </h5>
            
             @endforelse  
                
                  
              </div>
            </div>
            
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    function checkBalance() {
        // Get the amount and balance values from the form
        var amount = parseFloat(document.getElementById('amount').value);
        var balance = parseFloat(document.getElementById({{ Auth::user()->bal }}).value);

        // Check if the amount is less than the balance
        if (amount <= balance) {
            // Submit the form
            document.getElementById('myForm').submit();
        } else {
            // Display a window message to deposit into the trading account
            alert('Insufficient funds! Please deposit into your trading account.');
        }
    }
</script>
 

<script>

document.getElementById('myButton').addEventListener('click', function() {
  alert('Your account has been set up to use an automated trading system');
});

</script>



    @endsection