@extends('layouts/layoutMaster')

@section('title', 'Create Open Trade')

@section('vendor-style')
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/bootstrap-select/bootstrap-select.css')}}" />
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/flatpickr/flatpickr.css')}}" />
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/typeahead-js/typeahead.css')}}" />
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/tagify/tagify.css')}}" />
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/formvalidation/dist/css/formValidation.min.css')}}" />
@endsection

@section('page-style')
  <style>
    .market-price{
      text-align: center;
      margin: 20px 0;
    }

    .price-container {
      font-size: 1.5em;
      font-weight: bold;
      padding-top: 20px;
    }

    .sell-price {
      color: red;
    }

    .buy-price {
      color: blue;
    }

    .actions {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
    }

    .btn.sell {
      flex: 1;
      padding: 10px 20px;
      border: none;
      font-size: 1em;
      border-radius: 4px;
      cursor: pointer;
      margin: 0 5px;
      background: #f44336;
      color: #fff;
    }

    .btn.buy {
      background: #2196f3;
      color: #fff;
      flex: 1;
      padding: 10px 20px;
      border: none;
      font-size: 1em;
      border-radius: 4px;
      cursor: pointer;
      margin: 0 5px;
    }

    .btn.place {
      background: #2196f3;
      color: #fff;
      flex: 1;
      padding: 10px 20px;
      border: none;
      font-size: 1em;
      border-radius: 4px;
      cursor: pointer;
      margin: 0 5px;
    }

    .notice {
      margin-top: 20px;
      font-size: 1.5em;
      text-align: center;
      color: #666;
    }
  </style>
@endsection

@section('vendor-script')
  <script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/bootstrap-select/bootstrap-select.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/flatpickr/flatpickr.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/typeahead-js/typeahead.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/tagify/tagify.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/jquery-repeater/jquery-repeater.js')}}"></script>
@endsection

@section('page-script')
  <script>
    $('.select2').each(function () {
      const $this = $(this);
      $this.wrap('<div class="position-relative"></div>');
      $this.select2({ dropdownParent: $this.parent() });
    });

     document.addEventListener('DOMContentLoaded', function() {
      const typeSelect = document.getElementById('type');
      const marketPriceDiv = document.getElementById('market-price');
      const pendingOrderDiv = document.getElementById('pending-order');
      const stopLossInput = document.getElementById('stoploss');
      const takeProfitInput = document.getElementById('takeprofit');

      // Toggle form visibility
      function toggleForm() {
        let type = $('#type').val();

        if (type === 'marketexecution') {
          $('#market-price').show();
          $('#pending-order').hide();
          $('#stoploss, #takeprofit').prop('disabled', true);
        } else {
          $('#market-price').hide();
          $('#pending-order').show();
          $('#stoploss, #takeprofit').prop('disabled', false);
        }
      }
      $('#type').on('change', toggleForm);
      toggleForm();
    });
  </script>
@endsection

@section('content')
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header card_h">
          <div>
            <h5 class="card-title">Create Open Trade</h5>
          </div>
          <div class="btn-group-no-gap">
            <a href="{{ route("client.opentrades") }}" class="btn btn-md btn-primary" role="button">Back</a>
          </div>
        </div>
        <div class="card-body">
          <form id="addForm" method="POST" action="#" class="row g-3" enctype="multipart/form-data">
            @csrf
            <div class="col-md-6 mb-3">
              <label class="form-label" for="mtaccount">Select Account <span class="required_asterisk">*</span></label>
              <select id="mtaccount" name="mtaccount" class="select2 form-select" required>
                <option value="">Select Account</option>
                @if(count($accounts) > 0)
                  @foreach($accounts as $mtaccount)
                    <option value="{{$mtaccount->loginid}}">{{$mtaccount->loginid}}</option>
                  @endforeach
                @endif
              </select>
            </div>
            <div class="col-md-6 mb-3"></div>
            <div class="col-md-6 mb-3">
              <label class="form-label" for="groupname">Symbol <span class="required_asterisk">*</span></label>
              <select id="groupname" name="groupname" class="select2 form-select" required>
                @if (isset($gettick['status']) && $gettick['status'] == 'success' && !empty($gettick['response']))
                  @foreach ($gettick['response'] as $product)
                    <option value="{{ $product['Symbol'] }}">{{ $product['Symbol'] }}</option>
                  @endforeach
                @endif
              </select>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label" for="leverage">Volume <span class="required_asterisk">*</span></label>
              <select id="leverage" name="leverage" class="select2 form-select" required>
                <option value="0.01">0.01</option>
                <option value="0.02">0.02</option>
                <option value="0.03">0.03</option>
                <option value="0.04">0.04</option>
                <option value="0.05">0.05</option>
                <option value="0.06">0.06</option>
                <option value="0.07">0.07</option>
                <option value="0.08">0.08</option>
                <option value="1.0">1.0</option>
                <option value="2.0">2.0</option>
                <option value="3.0">3.0</option>
                <option value="4.0">4.0</option>
                <option value="5.0">5.0</option>
              </select>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label" for="stoploss">Stop Loss <span class="required_asterisk">*</span></label>
              <input type="number" class="form-control" id="stoploss" placeholder="Enter Loss" name="stoploss" required disabled/>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label" for="takeprofit">Take Profit <span class="required_asterisk">*</span></label>
              <input type="number" class="form-control" id="takeprofit" placeholder="Enter Profit" name="takeprofit" required disabled/>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label" for="comment">Comment <span class="required_asterisk">*</span></label>
              <input type="text" class="form-control" id="comment" placeholder="Enter Comment" name="comment"/>
            </div>
             <div class="col-md-6 mb-3">
              <label class="form-label" for="type">Type <span class="required_asterisk">*</span></label>
              <select id="type" name="type" class="select2 form-select" required>
                <option value="marketexecution">Market Execution</option>
                <option value="pendingorder">Pending Order</option>
              </select>
            </div>
            <hr>
            <div class="row" id="market-price">
              <div class="market-price" >
                <h3 style="text-align: left">Market Execution</h3>
                <div class="price-container">
                    @if (isset($gettick['status']) && $gettick['status'] == 'success' && !empty($gettick['response']))
                        @foreach ($gettick['response'] as $product)
                            <span class="sell-price">{{ $product['Bid'] }}</span> /
                            <span class="buy-price">{{ $product['Ask'] }}</span>
                        @endforeach
                    @endif
                    {{-- <span id="sell-price" class="sell-price">Loading...</span> /
                    <span id="buy-price" class="buy-price">Loading...</span> --}}
                </div>
              </div>
              <div class="actions">
                <button class="btn sell">Sell by Market</button>
                <button class="btn buy">Buy by Market</button>
              </div>
              <div class="notice">
                <p>Notice! At order by market execution, the price will be quoted by dealer.</p>
              </div>
            </div>
            <div id="pending-order" style="display: none;">
              <h3 style="text-align: left">Pending Order</h3>
              <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label" style="text-align: left" for="order-type">Type:</label>
                    <select class="select2 form-select" name="order-type" id="order-type">
                        <option value="buylimit">Buy Limit</option>
                        <option value="selllimit">Sell Limit</option>
                    </select>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label" style="text-align: left" for="order-type">Details</label>
                    <span class="form-control">1.40075</span>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label class="form-label" style="text-align: left" for="pending-price">At Price:</label>
                  <input type="number" class="form-control" id="pending-price" name="pending-price" placeholder="Enter price">
                </div>
                <div class="col-md-6 mb-3 actions">
                  <button class="btn place">Place</button>
                </div>
              </div>
              <div class="notice">
                <p>Notice! Pending orders will be executed when the market reaches the specified price.</p>
              </div>
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary">Submit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection