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

@push('style-lib')
	<link rel="stylesheet" href="{{ asset($activeTemplateTrue.'css/security.css') }}{{$catch}}">
@endpush

@section('content')
    <uni-app class="uni-app--maxwidth">
        <uni-page data-page="pages/setting/change-password">
            <uni-page-wrapper class="chPoswD">
                <uni-page-body>
                    <uni-view data-v-c23c4702="">
                        <uni-view data-v-58cb4ed7="" data-v-c23c4702="" class="back-title">
							<span data-v-58cb4ed7="" data-href="{{ route('user.profile') }}" class="linkBTN"></span>
							<span data-v-58cb4ed7="" class="title-txt">Account Security</span>
						</uni-view>
						
                        <uni-view data-v-c23c4702="" class="content">

							<h2 class="title" style="font-size:.50rem;margin-top:2.0rem;position: relative;text-align: center;text-align: -webkit-center;">
								<div class="favicon"><img src="{{getImage(imagePath()['logoIcon']['path'] .'/favicon.png')}}{{$catch}}" alt /></div>
								<small class="login kJse" style="font-size:13px;"><br/>Change and modify your password anytime you to secure again<br/><br/></small>
								<small class="trxpin kJse" style="font-size:13px;display:none;"><br/>Set withdrawal pin or transaction pin to be enable more security<br/><br/></small>
							</h2>
						
                            <uni-view data-v-c23c4702="" class="goods-title">
								<uni-view data-v-c23c4702="" onclick="thTab(this,'login')" data-cur="login" class="active tabs" style="width: 50%;margin-left:10px;border-radius:4px"><span data-v-c23c4702="">Login</span></uni-view>
								<uni-view data-v-c23c4702="" onclick="thTab(this,'trxpin')" data-cur="trxpin" class="tabs" style="width: 50%;margin-right:15px;border-radius:4px;margin-left:0px;"><span data-v-c23c4702="">Trx Pin</span></uni-view>
                            </uni-view>
							
                            <uni-view data-v-c23c4702="">
                                <uni-view data-v-c23c4702="" class="container-item login kJse" style="">
                                    <form action="" id="passthru" method="post" data-v-7cbc276a="" data-v-c23c4702="" class="form">
										@csrf  
                                        <uni-view data-v-7cbc276a="" class="info">
                                            
											<uni-view data-v-43007dac="" class="info" style="margin-top:10px">
												<p data-v-43007dac="">Old Login Password(*)</p>
												<uni-input data-v-64270b22="" class="inView" style="background-color: #f5f5f5;height:auto;margin-top:8px;border-radius: 8px; padding: 4px;border-bottom: 1px #eee solid;">
													<span data-v-64270b22="" class="" style="margin-left:9px;width: 94%;display: flex;justify-content: space-between;">
														<span data-v-0a75b799="" style="margin-top:7px"><img src="{{ asset($activeTemplateTrue.'img/password.png') }}" style="width:24px" /></span>
														<input id="currentPassword" style="width:78%;padding:10px 2px;background:transparent;" placeholder="Enter current password" name="current_password" enterkeyhint="done" autocomplete="off" type="password" class="uni-input-input">
														<span data-v-0a75b799="" class="eyeView" style="margin-top:9px"><img src="{{ asset($activeTemplateTrue.'img/eye-fill.png') }}" style="width:17px" /></span>
													</span>
												</uni-input>
											</uni-view>


											<uni-view data-v-43007dac="" class="info" style="margin-top:34px">
												<p data-v-43007dac="">New Login Password(*)</p>
												<uni-input data-v-64270b22="" class="inView" style="background-color: #f5f5f5;height:auto;margin-top:8px;border-radius: 8px; padding: 4px;border-bottom: 1px #eee solid;">
													<span data-v-64270b22="" class="" style="margin-left:9px;width: 94%;display: flex;justify-content: space-between;">
														<span data-v-0a75b799="" style="margin-top:7px"><img src="{{ asset($activeTemplateTrue.'img/password.png') }}" style="width:24px" /></span>
														<input id="withPassword" style="width:78%;padding:10px 2px;background:transparent;" placeholder="Set new password" name="password" enterkeyhint="done" autocomplete="off" type="password" class="uni-input-input">
														<span data-v-0a75b799="" class="eyeView" style="margin-top:9px"><img src="{{ asset($activeTemplateTrue.'img/eye-fill.png') }}" style="width:17px" /></span>
													</span>
												</uni-input>
											</uni-view>

											
											<uni-view data-v-43007dac="" class="info" style="margin-top:34px">
												<p data-v-43007dac="">Retype New Login Password(*)</p>
												<uni-input data-v-64270b22="" class="inView" style="background-color: #f5f5f5;height:auto;margin-top:8px;border-radius: 8px; padding: 4px;border-bottom: 1px #eee solid;">
													<span data-v-64270b22="" class="" style="margin-left:9px;width: 94%;display: flex;justify-content: space-between;">
														<span data-v-0a75b799="" style="margin-top:7px"><img src="{{ asset($activeTemplateTrue.'img/password.png') }}" style="width:24px" /></span>
														<input id="passwordConfirmation" style="width:78%;padding:10px 2px;background:transparent;" placeholder="Repeat new password" name="password_confirmation" enterkeyhint="done" autocomplete="off" type="password" class="uni-input-input">
														<span data-v-0a75b799="" class="eyeView" style="margin-top:9px"><img src="{{ asset($activeTemplateTrue.'img/eye-fill.png') }}" style="width:17px" /></span>
													</span>
												</uni-input>
											</uni-view>


                                            <uni-button data-v-7cbc276a="" onclick="onSign()" style="margin-top:40px" class="hero-button" type="primary">Confirm</uni-button>
                                        </uni-view>
                                    </form>
                                </uni-view>
								
                                <uni-view data-v-c23c4702="" class="container-item trxpin kJse" style="display: none;">
                                    <form action="{{ route('user.withdrawal.password') }}" id="wpassthru" method="post" data-v-c687b6ae="" data-v-c23c4702="" class="form">
                                        <uni-view data-v-c687b6ae="" class="info">
										@csrf  

											<uni-view data-v-43007dac="" class="info" style="margin-top:10px">
												<p data-v-43007dac="">Login Password (*)</p>
												<uni-input data-v-64270b22="" class="inView" style="background-color: #f5f5f5;height:auto;margin-top:8px;border-radius: 8px; padding: 4px;border-bottom: 1px #eee solid;">
													<span data-v-64270b22="" class="" style="margin-left:9px;width: 94%;display: flex;justify-content: space-between;">
														<span data-v-0a75b799="" style="margin-top:7px"><img src="{{ asset($activeTemplateTrue.'img/password.png') }}" style="width:24px" /></span>
														<input id="txcPassword" style="width:78%;padding:10px 2px;background:transparent;" placeholder="Enter current password" name="current_password" enterkeyhint="done" autocomplete="off" type="password" class="uni-input-input">
														<span data-v-0a75b799="" class="eyeView" style="margin-top:9px"><img src="{{ asset($activeTemplateTrue.'img/eye-fill.png') }}" style="width:17px" /></span>
													</span>
												</uni-input>
											</uni-view>

											<uni-view data-v-43007dac="" class="info" style="margin-top:34px">
												<p data-v-43007dac="">New Trx Password (*)</p>
												<uni-input data-v-64270b22="" class="inView" style="background-color: #f5f5f5;height:auto;margin-top:8px;border-radius: 8px; padding: 4px;border-bottom: 1px #eee solid;">
													<span data-v-64270b22="" class="" style="margin-left:9px;width: 94%;display: flex;justify-content: space-between;">
														<span data-v-0a75b799="" style="margin-top:7px"><img src="{{ asset($activeTemplateTrue.'img/password.png') }}" style="width:24px" /></span>
														<input id="trxPassword" style="width:78%;padding:10px 2px;background:transparent;" placeholder="Set new password" name="password" enterkeyhint="done" autocomplete="off" type="password" required class="uni-input-input">
														<span data-v-0a75b799="" class="eyeView" style="margin-top:9px"><img src="{{ asset($activeTemplateTrue.'img/eye-fill.png') }}" style="width:17px" /></span>
													</span>
												</uni-input>
											</uni-view>

											
											<uni-view data-v-43007dac="" class="info" style="margin-top:34px">
												<p data-v-43007dac="">Retype Trx Password (*)</p>
												<uni-input data-v-64270b22="" class="inView" style="background-color: #f5f5f5;height:auto;margin-top:8px;border-radius: 8px; padding: 4px;border-bottom: 1px #eee solid;">
													<span data-v-64270b22="" class="" style="margin-left:9px;width: 94%;display: flex;justify-content: space-between;">
														<span data-v-0a75b799="" style="margin-top:7px"><img src="{{ asset($activeTemplateTrue.'img/password.png') }}" style="width:24px" /></span>
														<input id="trxConfirmation" style="width:78%;padding:10px 2px;background:transparent;" placeholder="Repeat new password" name="password_confirmation" enterkeyhint="done" autocomplete="off" required type="password" class="uni-input-input">
														<span data-v-0a75b799="" class="eyeView" style="margin-top:9px"><img src="{{ asset($activeTemplateTrue.'img/eye-fill.png') }}" style="width:17px" /></span>
													</span>
												</uni-input>
											</uni-view>


                                            <uni-button data-v-c687b6ae="" style="margin-top:44px" onclick="nSiged();" class="hero-button" type="primary">Confirm</uni-button>
                                        </uni-view>
                                    </form>
                                </uni-view>
                            </uni-view>
                        </uni-view>
                    </uni-view>
                </uni-page-body>
            </uni-page-wrapper>
        </uni-page>
	</uni-app>

@endsection

@push('script')
<script>
	function thTab(ac, vi){
		$(".tabs").removeClass('active');
		$(ac).addClass('active');
		
		$(".kJse").css({
			display: 'none'
		});
		
		$("."+vi).css({
			display: 'block'
		});
	}

	$('.eyeView').click(function() {
		if ($($(this).siblings('input')[0]).attr('type') == 'password') {
			$($(this).siblings('input')[0]).attr('type', 'text')
			$(this).addClass('active')
		} else {
			$($(this).siblings('input')[0]).attr('type', 'password')
			$(this).removeClass('active')
		}
	})

	function onSign(){
		loading.showLoading({type: 3,tip: "loading.."});
		$("#passthru").submit();
	}
  
	function nSiged(){
		loading.showLoading({type: 3,tip: "loading.."});
		$("#wpassthru").submit();
	}
  
</script>
@endpush
