<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Forex</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
	$(".trade_type").click(function(){
		$("#trade_type").val($(this).attr("id"));
	})
	$(".lotchange").click(function(){
		var id=$(this).attr("id");
		var lot=parseFloat($("#lotsize").text());
			//if(lot || lot<=1){
			if(id=='plus' && lot<1){
				var newlot=lot*10;	
			}else if(lot>0.01){
				var newlot=lot/10;	
			}
			$("#lotsize").text(newlot);
			$("#lot").val(newlot);
	});
	setInterval(function(){ 
		//$(".OandaLiveRates__trEven__1JAlV").each(function(){
			var EUR_USD_sell=$("tbody tr:nth-child(1) td:nth-child(2)").text(); 
			var EUR_USD_buy=$("tbody tr:nth-child(1) td:nth-child(3)").text();
			//console.log('EUR_USD='+EUR_USD_sell+'/'+EUR_USD_buy);
			
			
			var USD_JPY_sell=$("tbody tr:nth-child(2) td:nth-child(2)").text(); 
			var USD_JPY_buy=$("tbody tr:nth-child(2) td:nth-child(3)").text();
			//console.log('USD_JPY='+USD_JPY_sell+'/'+USD_JPY_buy);
			
			
			var GBP_USD_sell=$("tbody tr:nth-child(3) td:nth-child(2)").text(); 
			var GBP_USD_buy=$("tbody tr:nth-child(3) td:nth-child(3)").text();
			//console.log('GBP_USD='+GBP_USD_sell+'/'+GBP_USD_buy);
			
			var USD_CHF_sell=$("tbody tr:nth-child(4) td:nth-child(2)").text(); 
			var USD_CHF_buy=$("tbody tr:nth-child(4) td:nth-child(3)").text();
			//console.log('USD_CHF='+USD_CHF_sell+'/'+USD_CHF_buy);
			
			var AUD_USD_sell=$("tbody tr:nth-child(5) td:nth-child(2)").text(); 
			var AUD_USD_buy=$("tbody tr:nth-child(5) td:nth-child(3)").text();
			//console.log('AUD_USD='+AUD_USD_sell+'/'+AUD_USD_buy);
			//console.log('hello');
			var pair=$("#pairid").val();
			switch(pair){
				case 'EUR_USD':
				$("#buy_val").text(EUR_USD_buy);
				$("#sell_val").text(EUR_USD_sell);
				$("#buy_price").val(EUR_USD_buy);
				$("#sell_price").val(EUR_USD_sell);
				break;
				
				case 'AUD_USD':
				$("#buy_val").text(AUD_USD_buy);
				$("#sell_val").text(AUD_USD_sell);
				$("#buy_price").val(AUD_USD_buy);
				$("#sell_price").val(AUD_USD_sell);
				break;
				
				case 'USD_JPY':	
				$("#buy_val").text(USD_JPY_buy);
				$("#sell_val").text(USD_JPY_sell);
				$("#buy_price").val(USD_JPY_buy);
				$("#sell_price").val(USD_JPY_sell);
				break;
				
				case 'GBP_USD':	
				$("#buy_val").text(GBP_USD_buy);
				$("#sell_val").text(GBP_USD_sell);
				$("#buy_price").val(GBP_USD_buy);
				$("#sell_price").val(GBP_USD_sell);
				break;
				
				case 'USD_CHF':	
				$("#buy_val").text(USD_CHF_buy);
				$("#sell_val").text(USD_CHF_sell);
				$("#buy_price").val(USD_CHF_buy);
				$("#sell_price").val(USD_CHF_sell);
				break;
			}
			var alldata=[EUR_USD_sell+"="+EUR_USD_buy+'=EUR_USD',AUD_USD_sell+"="+AUD_USD_buy+'=AUD_USD',USD_JPY_sell+"="+USD_JPY_buy+'=USD_JPY',GBP_USD_sell+"="+GBP_USD_buy+'=GBP_USD',USD_CHF_sell+"="+USD_CHF_buy+'=USD_CHF'];
			//console.log(alldata);
			$.ajax({
				 type: "POST",
				 url: '<?php echo base_url();?>home/ajax_trade_calc',
				 data: {alldata:alldata},
				 success: function(res){
					 $("#live_trades").html(res);
				 }
			 });
	}, 1000); 
	});
</script>
</head>

<body>

<div class="container">
	<div class="row">
    	<div class="col-md-7">
			<h3>Forex Trading</h3>
        <script src="https://prodstorage.azureedge.net/Scripts/jquery.signalR-2.4.0.min.js" defer></script>
		<script src="https://dashboard.acuitytrading.com/Widgets/lib/@1.0.0/widget-core-oanda.js" defer></script>
        <ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#home">LIVE MARKET</a></li>
          <li><a data-toggle="tab" href="#menu1">ACTIVE TRADES</a></li>
          <li><a data-toggle="tab" href="#menu2">CLOSED TRADES</a></li>
        </ul>
        
        <div class="tab-content">
          <div id="home" class="tab-pane fade in active">
        	<div id="live-rates-4bccd9b2e8354173a4a7e026865a9709" class="live-rates__table"></div>
          </div>
          <div id="menu1" class="tab-pane fade">
            <table class="table table-bordered table-striped">
            	<tbody id="live_trades">
                
                </tbody>
            </table>
          </div>
          <div id="menu2" class="tab-pane fade">
            
          </div>
        </div>

        <script>
		window.addEventListener('load', function(){
			AcuityWidgets.globals({
				apikey: '4b12e6bb-7ecd-49f7-9bbc-2e03644ce41f',
				locale: 'en-GB'
			});
		
			AcuityWidgets.CreateWidget(
				'OandaLiveRates',
				document.getElementById('live-rates-4bccd9b2e8354173a4a7e026865a9709'),
				{
					
					
					instruments: ["EUR_USD","USD_JPY","GBP_USD","USD_CHF","AUD_USD"]//, "AUD_CHF", "AUD_JPY", "AUD_NZD", "AUD_USD", "CAD_CHF", "CAD_JPY", "CHF_JPY", "CN50_USD", "XCU_USD", "EUR_AUD", "EUR_CAD", "EUR_CHF", "EUR_GBP", "EUR_TRY", "EUR_JPY", "EUR_NOK", "EUR_NZD", "EUR_SEK", "EUR_USD", "EU50_EUR", "FR40_EUR", "GBP_AUD", "GBP_CAD", "GBP_CHF", "GBP_JPY", "GBP_NZD", "GBP_USD", "DE30_EUR", "XAU_USD", "HK50_HKD", "IN50_USD", "JP225_USD", "NATGAS_USD", "NL25_EUR", "NZD_CAD", "NZD_CHF", "NZD_JPY", "NZD_USD", "SGD_JPY", "XAG_USD", "SG30_SGD", "TWIX_USD", "UK100_GBP", "NAS100_USD", "US2000_USD", "SPX500_USD", "US30_USD", "NAS100_USD", "USD_CAD", "USD_CHF", "USD_CNH", "USD_HKD", "USD_TRY", "USD_JPY", "USD_MXN", "USD_NOK", "JPY225Y_JPY", "USD_SEK", "USD_SGD", "USD_ZAR", "TRY_JPY", "WTICO_USD"]
				}
			).mount();
		});
</script>
        </div>
        
        <div class="col-md-5">
        	<h3>Start Trading</h3>
            <form action="<?php echo base_url().'home/trade_submit';?>" method="post">
            	<input type="hidden" name="buy_price" id="buy_price"/>
            	<input type="hidden" name="sell_price" id="sell_price"/>
            	<div class="form-group">
                    <select class="form-control" id="pairid" name="pair" required>
                    	<option value="">Select Pair</option>
                        <option value="EUR_USD">EUR-USD</option>
                        <option value="USD_JPY">USD-JPY</option>
                        <option value="GBP_USD">GBP-USD</option>
                        <option value="USD_CHF">USD-CHF</option>
                        <option value="AUD_USD">AUD-USD</option>
                    </select>
                </div>
                <div class="row">
                	<div class="col-md-4 text-center">
                    	<h2 class="text-danger" id="buy_val">0</h2>
                        <input type="hidden" name="trade_type" id="trade_type" value="BUY"/>
                    	<button class="btn btn-danger btn-block trade_type" type="button" id="BUY">BUY</button>
                    </div>
                    <div class="text-center col-md-4">
                    	<h2 class="text-default">LOT</h2>
                        <div class="btn-group">
                          <button type="button" class="btn btn-primary lotchange" id="minus">-</button>
                          <button type="button" class="btn btn-default" id="lotsize">0.01</button>
                          <input type="hidden" name="lotsize" id="lot" value="0.01"/>
                          <button type="button" class="btn btn-primary lotchange" id="plus">+</button>
                        </div> 
                    </div>
                    <div class="form-group col-md-4 text-center">
                    	<h2 class="text-success" id="sell_val">0</h2>
                    	<button class="btn btn-success btn-block trade_type" type="button" id="SELL">SELL</button>
                    </div>
                    <div class="form-group col-md-6">
                    	<label>Target</label>
                        <input type="text" class="form-control" name="target">
                    </div>
                    <div class="form-group col-md-6">
                    	<label>Stop Loss</label>
                        <input type="text" class="form-control" name="stoploss">
                    </div>
                </div> 
                <button type="submit" class="btn btn-warning">Start Trade</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>