@extends('layouts.client_template')
@section('content')
<!-- container Start -->
<div class="container-fluid px-3 px-xxl-5">
	<div class="titel-head">
		<h1>Performance</h1>
	</div>
	<div class="user-details referral-tab mt-4 mb-5">
		<nav class="d-flex d-flex justify-content-between align-items-center pb-4">
			<div class="nav nav-tabs" >
				<a class="nav-link active" href="{{url('client/performance/summary')}}">Summary</a>
				<a class="nav-link" href="{{url('client/performance/historyoftrades')}}">History Of Trades</a>			
			</div>
		</nav>		
		<div class="row">
			<div class="col-md-12">
				<form class="select2black" method="GET" action="{{ url('/client/performance/summary') }}">
					<div class="row">
						<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
							<div class="form-group mb-3">
								<label><strong>Select Account :</strong></label>
								<select name="mt5account" class="select2 form-control form-control-lg bg-black">
									<option value="all" @if($mt5selected == 'all') selected @endif >All</option>
									@foreach($accountlist as $account)
										<option value="{{$account->mt5id}}" @if($account->mt5id == $mt5selected) selected @endif>{{$account->mt5id}}</option>
									@endforeach
								</select>
							</div>
						</div>					
						<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
							<div class="form-group mb-3">
								<label><strong>@lang('translate.from') :</strong></label>
								<input name="fromdate" type="text" class="form-control form-control-lg bg-dark" id="fromdate" value="{{$fromdate}}">
							</div>
						</div>
						<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
							<div class="form-group mb-3">
								<label><strong>@lang('translate.to') :</strong></label>
								<input name="todate" type="text" class="form-control form-control-lg bg-dark" id="todate" value="{{$todate}}">
							</div>
						</div>
						<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6">
							<div class="form-group mb-3" style="padding-top:20px;">
								<button type="submit" class="btn btn-sm btn-primary">@lang('translate.submit')</button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-6 col-md-3">
				<div class="card bg-dark rounded-3 mb-4">
					<div class="card-body">
						<div class="row align-items-center">
							<div class="col">
								<h5 class="card-title">Net Profit</h5>
								<h1 class="mb-2">{{ $netprofit }}</h1>
							</div>
							<div class="col-auto">
								<div class="stat text-primary">
									<i class="fa fa-sack-dollar"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-6 col-md-3">
				<div class="card bg-dark rounded-3 mb-4">
					<div class="card-body">
						<div class="row align-items-center">
							<div class="col">
								<h5 class="card-title">Closed Orders</h5>
								<h1 class="mb-2">{{ $closedorders }}</h1>
							</div>
							<div class="col-auto">
								<div class="stat text-primary">
									<i class="fa fa-sack-dollar"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-sm-6 col-md-3">
				<div class="card bg-dark rounded-3 mb-4">
					<div class="card-body">
						<div class="row align-items-center">
							<div class="col">
								<h5 class="card-title">Trading Volume</h5>
								<h1 class="mb-2">{{ $tradingvolume }}</h1>
							</div>
							<div class="col-auto">
								<div class="stat text-primary">
									<i class="fa fa-sack-dollar"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3">
				<div class="card bg-dark rounded-3 mb-4">
					<div class="card-body">
						<div class="row align-items-center">
							<div class="col">
								<h5 class="card-title">Profit</h5>
								<h1 class="mb-2">{{ $totoalpositive }}</h1>
							</div>
							<div class="col-auto">
								<div class="stat text-primary">
									<i class="fa fa-sack-dollar"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3">
				<div class="card bg-dark rounded-3 mb-4">
					<div class="card-body">
						<div class="row align-items-center">
							<div class="col">
								<h5 class="card-title">Loss</h5>
								<h1 class="mb-2">{{ $totoalnegative }}</h1>
							</div>
							<div class="col-auto">
								<div class="stat text-primary">
									<i class="fa fa-sack-dollar"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3">
				<div class="card bg-dark rounded-3 mb-4">
					<div class="card-body">
						<div class="row align-items-center">
							<div class="col">
								<h5 class="card-title">Profitable</h5>
								<h1 class="mb-2">{{ $totoalpositivecount }}</h1>
							</div>
							<div class="col-auto">
								<div class="stat text-primary">
									<i class="fa fa-sack-dollar"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3">
				<div class="card bg-dark rounded-3 mb-4">
					<div class="card-body">
						<div class="row align-items-center">
							<div class="col">
								<h5 class="card-title">UnProfitable</h5>
								<h1 class="mb-2">{{ $totoalnegativecount }}</h1>
							</div>
							<div class="col-auto">
								<div class="stat text-primary">
									<i class="fa fa-sack-dollar"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="col-sm-6 col-md-3">
				<div class="card bg-dark rounded-3 mb-4">
					<div class="card-body">
						<div class="row align-items-center">
							<div class="col">
								<h5 class="card-title">Equity</h5>
								<h1 class="mb-2">{{ $totalequity }}</h1>
							</div>
							<div class="col-auto">
								<div class="stat text-primary">
									<i class="fa fa-sack-dollar"></i>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>

		<div class="user-details referral-tab mt-4 mb-5">
			<nav class="d-flex d-flex justify-content-between align-items-center">
				<div class="nav nav-tabs" id="nav-tab" role="tablist">
					<button class="nav-link active" id="level1-clients-tab" data-bs-toggle="tab" data-bs-target="#level1-clients" type="button" role="tab" aria-controls="level1-clients" aria-selected="true"><span>Net Profit</span></button>
					<button class="nav-link" id="level2-clients-tab" data-bs-toggle="tab" data-bs-target="#level2-clients" type="button" role="tab" aria-controls="level2-clients" aria-selected="false"><span>Closed Orders</span></button>
					<button class="nav-link" id="level3-clients-tab" data-bs-toggle="tab" data-bs-target="#level3-clients" type="button" role="tab" aria-controls="level3-clients" aria-selected="false"><span>Trading Volume</span></button>				
				</div>
			</nav>
			<div class="tab-content" id="nav-tabContent"> 			
				<div class="tab-pane fade show active" id="level1-clients" role="tabpanel" aria-labelledby="level1-clients-tab">
					<div class="row MyInvestment mb-4 mb-lg-4">
						<div class="col-lg-12">
							<canvas id="profitChart" width="400" height="200"></canvas>
						</div>
					</div>
				</div>

				<div class="tab-pane fade" id="level2-clients" role="tabpanel" aria-labelledby="level2-clients-tab">
					<div class="row MyInvestment mb-4 mb-lg-4">
						<div class="col-lg-12">
							<canvas id="closedOrdersChart" width="400" height="200"></canvas>
						</div>
					</div>
				</div>

				<div class="tab-pane fade" id="level3-clients" role="tabpanel" aria-labelledby="level3-clients-tab">
					<div class="row MyInvestment mb-4 mb-lg-4">
						<div class="col-lg-12">
							<canvas id="tradingVolumeChart" width="400" height="200"></canvas>
						</div>
					</div>
				</div>

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

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript">
  $(function () { 
	$("#fromdate").datepicker({
		dateFormat: 'yy-mm-dd',
		changeYear:true,
	});
	$("#todate").datepicker({
		dateFormat: 'yy-mm-dd',
		changeYear:true,
	});
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>	
	const chartLabels = @json(array_keys($chartData));
	const chartData = @json(array_values($chartData));
	
	const barColors = chartData.map(value => value >= 0 ? ' rgba(0, 128, 0)' : 'rgba(255, 0, 0)');	
	const ctx = document.getElementById('profitChart').getContext('2d');
	new Chart(ctx, {
		type: 'bar',
		data: {
			labels: chartLabels,
			datasets: [{
				label: 'Net Profit',
				data: chartData,
				backgroundColor: barColors,
				borderColor: barColors, 
				borderWidth: 1,
			}]
		},
		options: {
			responsive: true,
			plugins: {
				legend: { display: true },
				tooltip: { enabled: true },
			},
			scales: {
				x: { title: { display: true, text: 'Date' } },
				y: { title: { display: true, text: 'Profit' } }
			}
		}
	});
</script>

<script>	
	const chartLabels1 = @json(array_keys($chartData2));
	const chartData2 = @json(array_values($chartData2));
		
	const ctx1 = document.getElementById('closedOrdersChart').getContext('2d');
	new Chart(ctx1, {
		type: 'bar',
		data: {
			labels: chartLabels1,
			datasets: [{
				label: 'Closed Orders Count',
				data: chartData2,
				backgroundColor: '#f37b4c', 
				borderColor: '#f37b4c', 
				borderWidth: 1,
			}]
		},
		options: {
			responsive: true,
			plugins: {
				legend: { display: true },
				tooltip: { enabled: true },
			},
			scales: {
				x: { title: { display: true, text: 'Date' } },
				y: { title: { display: true, text: 'Closed Orders' } }
			}
		}
	});
</script>


<script>
const chartLabels111 = @json(array_keys($tradingVolumeData));
const tradingVolumeData = @json(array_values($tradingVolumeData));

const ctx11 = document.getElementById('tradingVolumeChart').getContext('2d');
new Chart(ctx11, {
	type: 'bar', 
	data: {
		labels: chartLabels111,
		datasets: [{
			label: 'Trading Volume',
			data: tradingVolumeData,
			backgroundColor: '#f37b4c', 
			borderColor: '#f37b4c',
			borderWidth: 1,
		}]
	},
	options: {
		responsive: true,
		plugins: {
			legend: { display: true },
			tooltip: { enabled: true },
		},
		scales: {
			x: { title: { display: true, text: 'Date' } },
			y: { title: { display: true, text: 'Volume' } }
		}
	}
});
</script>

@endsection