@extends($activeTemplate.'layouts.users')

@push('style')
<style>
.typeitem {float: left;width: 50%;height: auto;overflow: hidden;margin-left: 0px;}
.over {border-bottom: 1px solid #000;}.successful{color:#28c76f !important;font-weight:800;}
.pending{color:#ff9f43 !important;font-weight:800;}.cancelled{color:#1e9ff2 !important;font-weight:800;}
</style>
@endpush

@section('content')
	<div style="height: auto; overflow: hidden;">
		<div style="width: 100%; height: 230px; overflow: hidden; position:relative;background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(0,0,0,1));">
			<div class="top" style="background: none;">
				<div data- class="linkBTN" style="float:left; line-height:46px;width:50%; height:46px;cursor:pointer;" id="btnClose">
					<a class="back iconfont icon-arrow-left-2" style="font-size:26px;margin-left: 6px;;color:#fff" onclick="window.history.go(-1); return false;"></a>
				</div>
			</div>

			<div 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">{{ ucwords($type) }}</div>
			</div>
			
			<div onclick="copyText('','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">Commission</div>
				<div style="text-decoration: underline;font-weight: 900;">{{ config('settings')->cur_sym }}{{ showAmount(34343) }}</div-->
			</div>
		</div>
	</div>
	@if( $type == 'withdraw')
	<div style=" width: 100%; margin: 0 auto; margin-top: 1px; text-align: center; background: #fff; color: #000; position: relative; height: auto; overflow: hidden;">
		<div class="typeitem over" value="1">
			<div style="font-weight:700;padding: 10px; height: 30px; line-height:30px; overflow: hidden;">Withdraw Pending </div>
		</div>
		<div class="typeitem" value="2">
			<div style="font-weight:700;padding: 10px; height: 30px; line-height: 30px; overflow: hidden; ">Withdraw Completed</div>
		</div>
	</div>
	@endif

	@if( $type == 'income')
	<div style=" width: 100%; margin: 0 auto; margin-top: 1px; text-align: center; background: #fff; color: #000; position: relative; height: auto; overflow: hidden;">
		<div class="typeitem over" value="1">
			<div style="font-weight:700;padding: 10px; height: 30px; line-height:30px; overflow: hidden;">Successful </div>
		</div>
		<div class="typeitem linkBTN" data-href="{{route('user.investment.log')}}" value="2">
			<div style="font-weight:700;padding: 10px; height: 30px; line-height: 30px; overflow: hidden; ">Pending {{config('settings')->cur_sym}}{{showAmount($user->pending_income,0)}}</div>
		</div>
	</div>
	@endif

	<?php $jStK = array('Initiated','Successful','Pending','Cancelled'); ?>
	<div style="width: 100%; margin: 0 auto; position: relative; margin-top: 10px; background: #fff; height: auto; overflow: hidden; padding-top:10px; padding-bottom:64px;" id="itemlist">
		@forelse($transactions as $data)
		<div style="height:auto;padding-top:4px;overflow:hidden;color:#333;background:#fff;margin:0 auto; width:98%;border-radius: 5px; margin-top:10px;padding-bottom:15px;border-bottom:1px solid #eee;">
			<div style="padding:1px;">
				<div style="float:left;width:45%; margin-left:5%">
					<div style="height:27px; line-height:27px;">
						<span style ="padding:3px; padding-left: 0px;padding-right:10px;border-radius: 10px; font-weight:bold;color: #000;">{{ $data->currency }}</span>
					</div>
					<div style="height:27px; line-height:27px;">
						<span style="padding:3px; padding-left: 0px;padding-right:10px;border-radius: 10px; color: #000;">{{ $data->trx }}</span>
					</div>
					@if( $type == 'withdraw')
					<div style="height:27px; line-height:27px;font-size:12px;color:#999;">Charge: {{ config('settings')->cur_sym }}{{ showAmount($data->charge) }}</div>
					@endif
					<div style="height:27px; line-height:27px;font-size:12px; color:#999;">{{ $data->created_at->format('dS F Y, H:i') }}</div>
				</div>
				<div style="float:left;width:45%; text-align:right; margin-right:5%">
					<div style="height:27px; line-height:27px; font-size:20px; font-family: Roboto Condensed-Regular,Roboto Condensed;font-weight: 400;color: #fa5151;">{{ showAmount($data->amount) }}</div>
					<div style="height:27px; line-height:27px;font-size:12px;color:#999;margin-top:-7px;">&nbsp;amount</div>
					<div class="{{ strtolower($jStK[$data->status]) }}" style="height:27px; line-height:27px;font-size:12px;color:#999;">{{ $jStK[$data->status] }}</div>
					@if( $type != 'withdraw')
					<div style="height:27px; line-height:27px;font-size:12px;color:#999;margin-top:-7px;">Type: <span style="font-weight:900;">{{ $data->type }}</span></div>
					@endif
				</div>

				@if( $data->admin_feedback )
				<div style='margin-left:5%; color:#ff6a00;float:left;width:95%;'>{{ $data->admin_feedback }}</div>
				@endif
			</div>
		</div>
		@empty
		<div style="padding:2px; width:95%; margin:0 auto; margin-top:50px;">
			<div style="border-radius: 5px; color:#fff; text-align:center; margin-top:35px;position:relative;">
				<img src="/assets/images/no.png" style=" width:100%;" /><br>
			</div>
		</div>
		<div class="layui-flow-more">No more data</div>
		@endforelse
	</div>
@endsection

@push('script')
@endpush