@extends('layouts.client_template')
@section('content')
<aside class="page_content_wrapper">
	<div class="page_content_inner">
        @include('layouts.client_assign_manager')
        <h2 class="page_title">My Data</h2>
		<div class="flash-message">
			@foreach (['danger', 'warning', 'success', 'info'] as $msg)
			@if(Session::has('alert-' . $msg))
			<div class="alert alert-{{ $msg }} alert-dismissible fade show" role="alert">
				<strong>{{ ucfirst(($msg == 'danger') ? "Error" : $msg) }}!</strong> {{ Session::get('alert-' . $msg) }}
				<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
			</div>
			@endif
			@endforeach
		</div>
        <div class="regulation_wrapper">
			<div class="regulation_title">
				<h4>@lang('translate.deposit_report')</h4>
				<a href="{{ url()->previous() }}" class="back_button"><img src="{{ asset('/newdesign/images/back.svg') }}" alt=""></a>
			</div>
			<div class="position_top_filter_wrapper">
				<form class="customdatefilter" role="form" method="GET" action="{{ url('/client/report/depositreport') }}">
					<div class="row gx-2">
						<div class="col-lg-3 col-md-3 col-sm-4 col-6">
							<div class="form-group">
								<label class="form-label mb-0">@lang('translate.from') :</label>
								<input type="text" class="form-control" name="fromdate" id="fromdate" value="@if(isset($_GET['fromdate'])) {{ date('Y-m-d',strtotime($_GET['fromdate'])) }} @else {{ date('Y-m-d',strtotime('-30 day')) }} @endif" placeholder="From date" readonly />
							</div>
						</div>
						<div class="col-lg-3 col-md-3 col-sm-4 col-6">
							<div class="form-group">
								<label class="form-label mb-0">@lang('translate.to') :</label>
								<input type="text" class="form-control" name="todate" id="todate" value="@if(isset($_GET['todate'])) {{ date('Y-m-d',strtotime($_GET['todate'])) }} @else {{ date('Y-m-d') }} @endif" placeholder="To date" readonly />
							</div>
						</div>
						<div class="col-lg-3 col-md-3 col-sm-4 col-12">
							<div class="form-group">
								<button type="submit" id="dateSearch" class="btn btn-sm btn-primary">@lang('translate.search')</button>
							</div>
						</div>
					</div>
				</form>
			</div>
			<hr>
			<div class="white_box_part pt-0">
				@if(count($depositlists) > 0)
				<div class="simple_table_wrap simple_table_big" id="depositDiv">
					<div class="table-responsive">
						<table id="depositreport_datatable">
							<tbody>
								@foreach($depositlists as $depositlist)
								<tr>
									<td>
										<div class="img" style="width: 30px; height: 30px">
											<img src="{{ asset('/newdesign/images/deposite-icon.svg') }}" alt="">
										</div>
									</td>
									<td>
										<div class="t_title">
											<h5 class="m-0">Deposit</h5>
											<span class="d-block text_extra_light line_height_20 text_12">#{{ $depositlist->id }}</span>
											<span class="d-block text_extra_light line_height_20 text_12">{{ date('d M, H:i',strtotime($depositlist->created_at)) }}</span>
										</div>
									</td>
									<td>
										<div class="payment_method text-center">
											<span class="text_extra_light text_10">Payment method</span>
											<span class="d-block text_14 fw_500">{{ ucfirst($depositlist->paymentmethod) }}</span>
										</div>
									</td>
									<td>
										<div class="payment_id text-center">
											<span class="text_extra_light text_10">MT5 ID</span>
											<span class="d-block text_14 fw_500">{{ $depositlist->mt5id }}</span>
										</div>
									</td>
									<td>
										<div class="payment_id text-center">
											<span class="text_extra_light text_10">Comment</span>
											<span class="d-block text_14 fw_500">{{ $depositlist->comment }}</span>
										</div>
									</td>
									<td>
										<div class="payment_id text-center">
											<p class="text_extra_light text_10 mb-0">Status</p>
											@if($depositlist->status == "1")
											<span class="d-block text_8 badge badge_primary">Approved</span>
											@elseif($depositlist->status == "2")
											<span class="d-block text_8 badge badge_secondary">Rejected</span>
											@elseif($depositlist->status == "0")
											<span class="d-block text_8 badge badge_light">Pending</span>
											@endif
										</div>
									</td>
									<td><span class="text_18 fw-bold">${{$depositlist->amount}}</span></td>
								</tr>
								@endforeach
							</tbody>
						</table>
					</div>
					@if(count($depositlists) > 0)
					<div class="pagination_Wrapper d-flex flex-wrap align-items-center justify-content-between">
						<p class="m0 text_12">Showing {{ $depositlists->firstItem() }} to {{ $depositlists->lastItem() }} of {{ $depositlists->total() }} entries</p>
						<ul class="d-flex align-items-center">
							@if($depositlists->onFirstPage())
								<li class="disabled" aria-disabled="true">
									<button class="btn_transparent">
										<img src="{{ asset('/newdesign/images/left-arrow.svg') }}" alt="" />
									</button>
								</li>
							@else
								<li>
									<a href="{{ $depositlists->previousPageUrl() }}" class="btn_transparent">
										<img src="{{ asset('/newdesign/images/left-arrow.svg') }}" alt="" />
									</a>
								</li>
							@endif
							<li class="disabled mx10">
								{{ $depositlists->currentPage() }} of {{ $depositlists->lastPage() }}
							</li>
							@if ($depositlists->hasMorePages())
								<li class="mx10">
									<a href="{{ $depositlists->nextPageUrl() }}" class="btn_transparent">
										<img src="{{ asset('/newdesign/images/right-arrow.svg') }}" alt="" />
									</a>
								</li>
							@else
								<li class="disabled" aria-disabled="true">
									<button class="btn_transparent">
										<img src="{{ asset('/newdesign/images/right-arrow.svg') }}" alt="" />
									</button>
								</li>
							@endif
						</ul>
					</div>
					@endif
				</div>
				@else
				<div class="nodata_found">
					<div class="nodata_found-start">
						<div class="nodata_found_icon">
							<img src="{{ asset('/newdesign/images/transaction-empty.svg') }}" alt="" />
						</div>
						<div class="nodata_found_text">
							<h5>No transactions yet!</h5>
						</div>
					</div>
				</div>
				@endif
			</div>
		</div>
	</div>
</aside>
<aside class="right_content_wrapper">
	@include('layouts.client_assign_manager_right')
	<div class="right_sidebar2 transaction_wrap bg_white_box">
        <h3>Insights</h3>
        <div class="trasaction_type_wrap mb-3 pt-3">
			<div class="row g-3 mb-4">
				<div class="col-sm-6">
					<div class="bg_grey_box text-center">
						<div class="img_wrap"> <img src="{{ asset('/newdesign/images/chart-line-green.svg') }}" alt=""> </div>
						<h5 class="text_extra_light m-0">Biggest Profit</h5>
						<h4>${{round(optional($biggestProfit)->Profit ?? 0, 2)}}</h4>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="bg_grey_box text-center">
						<div class="img_wrap"> <img src="{{ asset('/newdesign/images/chart-line-orange.svg') }}" alt=""> </div>
						<h5 class="text_extra_light m-0">Biggest Loss</h5>
						<h4>${{round(optional($biggestLoss)->Profit ?? 0, 2)}}</h4>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="bg_grey_box text-center">
						<div class="img_wrap"> <img src="{{ asset('/newdesign/images/deposite-icon.svg') }}" alt=""> </div>
						<h5 class="text_extra_light m-0">Total Deposit</h5>
						<h4>${{round($TotalDepositAmount,2)}}</h4>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="bg_grey_box text-center">
						<div class="img_wrap"> <img src="{{ asset('/newdesign/images/withdraw-icon.svg') }}" alt=""> </div>
						<h5 class="text_extra_light m-0">Total Withdraw</h5>
						<h4>${{round($TotalWithdrawAmount,2)}}</h4>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="bg_grey_box text-center">
						<h5 class="text_extra_light m-0">Total Trades</h5>
						<h4>{{$totalTradeCount}}</h4>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="bg_grey_box text-center">
						<h5 class="text_extra_light m-0">Total Volume</h5>
						<h4>{{round($totalTradeLots,2)}}</h4>
					</div>
				</div>
			</div>
			<div class="month-chart">
				<p class="mb-0 text_dark fw_500">Wins and Losses</p>
				<h2>${{round($totalProfit,2)}}</h2>
				<p class="chart-day">Current Month</p>
				<div class="profitlosschartdata">
					<canvas id="profitLossChart" height="140" class="w-100"></canvas>
				</div>
			</div>
		</div>
	</div>
</aside>
<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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
  $(function () { 
	$("#fromdate").datepicker({ 
		minDate: $("#fromdate").value,
		dateFormat: 'yy-mm-dd',
		changeYear:true,
		/*onSelect: function (date) {
			$("#todate").datepicker('option', 'minDate', date);
		}*/
	});
	$("#todate").datepicker({
		maxDate: $("#todate").value,
		dateFormat: 'yy-mm-dd',
		changeYear:true,
		/*onSelect: function (date) {
			$("#fromdate").datepicker('option', 'maxDate', date);
		}*/
	});
  });
	const ctx = document.getElementById('profitLossChart').getContext('2d');
	const chartData = {!! json_encode($data) !!};
	if (chartData.length === 0) {
		$("#profitLossChart").parent().html('<div class="nodata_found"><div class="nodata_found-start pt-4"><div class="nodata_found_icon"><img src="/newdesign/images/trade-icon.svg" alt="" /></div><div class="nodata_found_text"><h5>No trade this month yet!</h5></div></div></div>');
	}
	else{
		// Gradient from left (green) to right (orange)
		const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0);
		gradient.addColorStop(0, '#97CD50');
		gradient.addColorStop(1, '#FF5C1E');

		const profitLossChart = new Chart(ctx, {
			type: 'line',
			data: {
				labels: {!! json_encode($labels) !!},  // ['01-06-2025', '02-06-2025', ...]
				datasets: [{
					label: '',
					data: {!! json_encode($data) !!},
					borderColor: gradient,
					backgroundColor: 'transparent',   // no fill
					fill: false,                      // don't fill under line
					tension: 0.3,
					pointRadius: 3,
					borderWidth: 3
				}]
			},
			options: {
				responsive: true,
				plugins: {
					legend: { display: false },
					tooltip: { enabled: true }
				},
				scales: {
					x: {
						grid: {
							drawBorder: false,
							display: false
						},
						ticks: {
							display: true,
							color: '#000',
							callback: function(value) {
								const label = this.getLabelForValue(value);
								return label.split('-')[2]; // Only show day (e.g., '01')
							}
						},
						border: {
							display: false
						},
						title: { display: false }
					},
					y: {
						grid: {
							drawBorder: false,
							display: false
						},
						ticks: {
							display: false
						},
						border: {
							display: false
						},
						title: { display: false }
					}
				}
			}
		});
	}
</script>
@endsection