@php $pageContent = getContent(config('settings')->active_template, 'team.content', true); @endphp
@extends($activeTemplate.'layouts.dash')

@push('style')
@endpush

@section('content')
<div class="top1"></div>
<div style="height: auto; overflow: hidden;">
	<div style="width: 100%; height: auto; overflow: hidden; position:relative;">
		<img src="{{ getImage( 'assets/images/frontend/team/' .@$pageContent->data_values->backgroud, '1080x690') }}" style="width:100%;">

		<div onclick="copyText('{{$code}}','Invitation code copied!');" style="cursor: pointer;position:absolute; bottom:20px; left:1%; width:34%; text-align:center; color:#fff;">
			<div style="font-weight:bold; font-size:22px;" id="invitation">{{$code}}</div>
			<div>Invitation link <span style="float:right;margin-right:10px"><img src="/assets/images/copy-fill.png" style="width:18px;" /></span></div>
		</div>
		
		<div onclick="copyText('{{$link}}','Invite link copied!');" style="cursor: pointer;position:absolute; bottom:20px; left:52%; width:44%; text-align:center; color:#fff;">
			<div style="font-size: 18px; overflow: hidden;  text-overflow: ellipsis; white-space: nowrap;" id="link">{{$link}}</div>
			<div>Invite link <span style="float:right;margin-right:10px"><img src="/assets/images/copy-fill.png" style="width:18px;" /></span></div>
		</div>
	</div>
</div>

<div style="text-align: center; margin-bottom: 10px; background: #f1f1f1; margin-bottom:65px; ">
	<div style="text-align: center; background: #fff; width: 100%; margin: 0 auto; margin-top: 10px;  padding-bottom:20px; height: auto; overflow: hidden; position: relative; ">
		<div style="padding: 15px;  background: #fff; height: auto; overflow: hidden; padding-bottom:0px;">
			<div style="float:left;color:#000; border-left:3px solid #000;font-size:18px;">&nbsp;&nbsp;My team</div>
			<div style="float:right;  font-size:14px;color:#000;" data-href="{{route('user.agents.view')}}" class="teamdetails linkBTN">Team Details &gt;&gt;</div>
		</div>

		<div class="home" style="height: auto;background: #FFF; overflow: hidden; margin-top:8px; font-size:12px;text-align:left; padding-top:25px; padding-bottom:5px;">
			<div class="my-tasks">
				<div class="tasks">
					@foreach($levels as $level)
						@php $LevelEarn = \App\Models\Transaction::where('type', 'commission')->where('user_id', $user->id)->where('ref_level', $level->level); @endphp
						@php $gAmount = $LevelEarn->sum('amount'); @endphp

					<div style="--tw-shadow:0 4px 6px -1px #f300001a, 0 2px 4px -2px #0000001a;border-top: 1px solid #f00;">
						<div>
							<div class="round-badge">
								<img src="/assets/images/{{ $level->level }}.jpg" style="width: 3rem;border-radius:50%;" alt="">
							</div>
							<p style="font-size:12px">{{ config('settings')->cur_sym }}{{ showAmount($gAmount) }}</p>
						</div>
						<div>
							<div>
								<p style="font-size:14px">You have {{$LevelEarn->count()}} valid users</p>
								<p style="font-size:13px">Report of cashback from referred users within your level <b style="">{{ $level->level }}</b> cycle is <b>{{ showAmount($gAmount,2) }}</b> {{ config('settings')->cur_text }}</p>
							</div>
							<div>
								<button type="button" class="Buy task-submit" style="background:#6f310f">{{ $level->percent }}%</button>
							</div>
						</div>
					</div>
					@endforeach
				</div>
			</div>
		</div>
	</div>

	<div style="height: auto; overflow: hidden; margin-top: 5px; font-size: 14px; color: #fff; padding: 5px 0;">
		<div style="float:left;position: relative;background: url(/assets/images/record_bg.png); background-size: 100% 100%; width:49%; height:120px;border-radius: 0 10px 10px 0;background:#6f310f">
			<div style="margin-top: 20px; font-family: HarmonyOS Sans SC; font-size: 14px; width:70%;">Direct Referral</div>
			<div style="margin-top: 10px; font-weight: bold; font-family: HarmonyOS Sans SC; font-size: 18px; width: 70%;" id="t1">{{ $totalReferral }}</div>
			<div style="position: absolute;right: 20px; margin-top: 3px;"><img src="/assets/images/group.png" style="height:40px;" /></div>
		</div>
		
		<div style="float: left; background: url(/assets/images/record_bg.png); background-size: 100% 100%; width: 49%; margin-left: 2%; height: 120px;border-radius: 10px 0 0 10px;background:#6f310f">
			<div style="margin-top: 20px; font-family: HarmonyOS Sans SC; font-size: 14px; width: 70%; ">Total Rewards</div>
			<div style="margin-top: 10px; font-weight: bold; font-family: HarmonyOS Sans SC; font-size: 18px; width: 70%; " id="t2">{{ config('settings')->cur_sym }}{{ showAmount($user->referral) }}</div>
			<div style="position: absolute;right: 20px; margin-top: 3px;"><img src="/assets/images/rewards.png" style="height:40px;" /></div>
		</div>
	</div>
	
	<div style="background: #fff; width: 100%; margin: 0 auto; margin-top: 5px;  padding-bottom:20px; height: auto; overflow: hidden; position: relative;border-radius: 20px 20px 0 0;">
		<div style="padding:15px; padding-bottom:0px; text-align:left;">
			<div style="color:#6f310f;font-weight:900; border-left:3px solid #000;font-size: 18px;">&nbsp;&nbsp;Invitation Rewards</div>
		</div>
		<div style="width:98%;margin:0 auto;">
			<div style=" text-align:left; font-size:16px;  border-radius: 10px; width: 95%; color:#666; margin: 0 auto; height: auto; overflow: hidden; margin-top: 10px; position: relative;">
			{!! @$pageContent->data_values->cashback !!}
			</div>
		</div>
	</div>
</div>
@endsection

@push('script')
<script>
    function copyText(textToCopy,msg = 'Copied!') {
		var $temp = $("<input>");
		$("body").append($temp);
		$temp.val(textToCopy).select();
		document.execCommand("copy");
		$temp.remove();
		modalMessage(msg);
    }
</script>
@endpush