@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">IB User Commission</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>History</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/ib/mycommissionlist') }}">
					<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($myusercommissionlists) > 0)
				<div class="simple_table_wrap simple_table_big" id="depositDiv">
					<div class="table-responsive">
						<table id="depositreport_datatable">
							<tbody>
								@foreach($myusercommissionlists as $myusercommission)
								<tr>
									<td>
										<div class="img" style="width: 24px; height: 24px">
											<img src="{{ asset('/newdesign/images/icon-discount.svg') }}" alt="">
										</div>
									</td>
									<td>
										<div class="t_title">
											<span class="d-block text_extra_light text_10 fw_500">My Commission</span>
											<span class="d-block text_gray line_height_20 text_14 fw_700">${{round($myusercommission->Commission,4)}}</span>
										</div>
									</td>
									<td>
										<div class="payment_method">
											<span class="text_extra_light text_12 fw_500">{{date('M d, y', strtotime($myusercommission->Date))}}</span>
											<span class="d-block text_14 fw_500">#{{$myusercommission->Order}}</span>
										</div>
									</td>
									<td>
										<div class="payment_id">
											<span class="text_extra_light text_10">MT5 ID</span>
											<span class="d-block text_14 fw_500">{{$myusercommission->Login}}</span>
										</div>
									</td>
									<td>
										<div class="payment_id">
											<span class="text_extra_light text_10">Order</span>
											@if($myusercommission->Action == '0')
												<span class="d-block text_14 fw_500 text_primary">BUY</span>
											@elseif($myusercommission->Action == '1')
												<span class="d-block text_14 fw_500 text_secondary">SELL</span>
											@endif
										</div>
									</td>
									<td>
										<div class="payment_id">
											<span class="text_extra_light text_10">Symbol</span>
											<span class="d-block text_14 fw_500">{{$myusercommission->Symbol}}</span>
										</div>
									</td>
									<td>
										<div class="payment_id">
											<span class="text_extra_light text_10">Profit</span>
											@if($myusercommission->Profit > "0")
											<span class="d-block text_14 fw_500 text_primary">{{$myusercommission->Profit}}</span>
											@else
											<span class="d-block text_14 fw_500 text_secondary">{{$myusercommission->Profit}}</span>
											@endif
										</div>
									</td>
									<td>
										<div class="payment_id">
											<span class="text_extra_light text_10">Volume</span>
											<span class="d-block text_14 fw_500">{{$myusercommission->Volume}} Lot</span>
										</div>
									</td>
								</tr>
								@endforeach
							</tbody>
						</table>
					</div>
					@if(count($myusercommissionlists) > 0)
					<div class="pagination_Wrapper d-flex flex-wrap align-items-center justify-content-between">
						<p class="m0 text_12">Showing {{ $myusercommissionlists->firstItem() }} to {{ $myusercommissionlists->lastItem() }} of {{ $myusercommissionlists->total() }} entries</p>
						<ul class="d-flex align-items-center">
							@if($myusercommissionlists->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="{{ $myusercommissionlists->previousPageUrl() }}" class="btn_transparent">
										<img src="{{ asset('/newdesign/images/left-arrow.svg') }}" alt="" />
									</a>
								</li>
							@endif
							<li class="disabled mx10">
								{{ $myusercommissionlists->currentPage() }} of {{ $myusercommissionlists->lastPage() }}
							</li>
							@if ($myusercommissionlists->hasMorePages())
								<li class="mx10">
									<a href="{{ $myusercommissionlists->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/trade-icon.svg') }}" alt="" />
						</div>
						<div class="nodata_found_text">
							<h5>No commission yet!</h5>
						</div>
					</div>
				</div>
				@endif
			</div>
		</div>
	</div>
</aside>
<aside class="right_content_wrapper">
	@include('layouts.client_assign_manager_right')
	<div class="bank_account_wrap bg_white_box mb-2">
        <h3 class="mb15">My Commission</h3>
        <div class="trasaction_type_wrap mycommdata">
			<div class="row g-1">
				<div class="col-sm-6">
					<div class="bg_grey_box text-center p-2">
						<div class="img_wrap"> <img src="{{ asset('/newdesign/images/dollar-circle.svg') }}" alt=""> </div>
						<h5 class="text_extra_light m-0">Available Commission</h5>
						<h4>${{round($availablecommission,4)}}</h4>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="bg_grey_box text-center p-2">
						<div class="img_wrap"> <img src="{{ asset('/newdesign/images/withdraw-icon.svg') }}" alt=""> </div>
						<h5 class="text_extra_light m-0">Withdraw Commission</h5>
						<h4>${{round($withdrawcommission,4)}}</h4>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="right_sidebar transaction_wrap bg_white_box p-0">
        <div class="transaction_img"> <img src="{{ asset('/newdesign/images/Earnings.png') }}" alt="">
			<h3>Top 5 Earnings of Sub IBs</h3>
		</div>
        <div class="transaction_wrap-inner">
			<div class="calender_round_tab_wrap">
				<div class="calender_wrap"> <img src="{{ asset('/newdesign/images/calendar.svg') }}" alt=""> </div>
				<ul class="nav nav-tabs" id="mycommTab" role="tablist">
					<li class="nav-item" role="presentation">
						<button class="nav-link active" id="All-tab" onclick="setActiveTab(this); TopSubIbEarning('all')">All</button>
					</li>
					<li class="nav-item" role="presentation">
						<button class="nav-link" id="Yearly-tab" onclick="setActiveTab(this); TopSubIbEarning('yearly')">Yearly</button>
					</li>
					<li class="nav-item" role="presentation">
						<button class="nav-link" id="Monthly-tab" onclick="setActiveTab(this); TopSubIbEarning('monthly')">Monthly</button>
					</li>
					<li class="nav-item" role="presentation">
						<button class="nav-link" id="Weekly-tab" onclick="setActiveTab(this); TopSubIbEarning('weekly')">Weekly</button>
					</li>
				</ul>
			</div>
			<div class="tab-content" id="myTabContent">
				<div class="tab-pane lot_commission_Wrapper fade show active" id="All" role="tabpanel" aria-labelledby="All-tab">
					<ul class="lots_wrapper" id="topsubibearn">
						@if(count($top5subiblist) > 0)
							@foreach($top5subiblist as $key=>$top5subib)
							<li>
								<div class="user_info_Wrap d-flex align-items-center">
									<div class="icon">
										<img src="{{ asset('/newdesign/images/user-icon.svg') }}" alt="">
									</div>
									<div class="text pl25">
										<p class="mb0 text_14 text_extra_light">#{{$loop->index+1}}</p>
										<h5 class="mb0 text_16">{{ $top5subib->name }}</h5>
										<p class="mb0 text_14 text_extra_light">{{ $top5subib->email }}</p>
									</div>
									<span class="badge bg_secondary">#{{$loop->index+1}}</span>
								</div>
								<div class="lots text-center">
									<h5 class="text_18 fw_700 mb5">{{ round($top5subib->totallots,4) }}</h5>
									<p class="m0 text_extra_light text_12"> Total <br>Lots </p>
								</div>
								<div class="lots text-center">
									<h5 class="text_18 fw_700 mb5">${{ round($top5subib->totalcomm,4) }}</h5>
									<p class="m0 text_extra_light text_12"> Commission<br>Earned </p>
								</div>
							</li>
							@endforeach
						@endif
					</ul>
				</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 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);
			}*/
		});
	  });
	function TopSubIbEarning(id)
	{
		var datafilter = id;
		let url = "{{ url('/client/topearnsubib') }}?q="+datafilter;
		$.ajax({
			url: url,
			type: "GET",
			success: function(response) {
				var tableData = '';
				$('#topsubibearn li').remove();
				$.each(response, function(index, data){
					tableData += '<li>';
					tableData += '<div class="user_info_Wrap d-flex align-items-center"><div class="icon"><img src="/newdesign/images/user-icon.svg" alt=""></div><div class="text pl25"><p class="mb0 text_14 text_extra_light">#' + (index+1) + '<h5 class="mb0 text_16">'+data.name+'</h5><p class="mb0 text_14 text_extra_light">'+data.email+'</p></div><span class="badge bg_secondary">#'+ (index+1) +'</span></div>';
					tableData += '<div class="lots text-center"><h5 class="text_18 fw_700 mb5">' + (data.totallots).toFixed(2) + '</h5><p class="m0 text_extra_light text_12">Total<br>Lots</p></div>';
					tableData += '<div class="lots text-center"><h5 class="text_18 fw_700 mb5">' + (data.totalcomm).toFixed(2) + '</h5><p class="m0 text_extra_light text_12">Commission<br>Earned</p></div>';
					tableData += '</li>';
				});
				$('#topsubibearn').append(tableData);
			},
			error: function(response) {
				console.log(response.responseJSON)
			}
		});
	}
	function setActiveTab(el) {
		// Remove 'active' from all tabs
		document.querySelectorAll('#mycommTab .nav-link').forEach(function(tab) {
			tab.classList.remove('active');
		});
		// Add 'active' to the clicked tab
		el.classList.add('active');
	}
</script>
@endsection