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

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

@section('content')
	<form action="" id="passthru" method="post" class="signin-wrap forgot-password"> 
		<div class="navbar">
			<span onclick="onBack()"><i></i></span>
			<span></span>
			<span></span>
		</div>
		
		<h2 class="title" style="font-size:.50rem;margin-top:2.0rem">EDIT PASSWORD
			<div class="favicon"><img src="{{getImage(imagePath()['logoIcon']['path'] .'/favicon.png')}}{{$catch}}" alt /></div>
			<small style="font-size:13px;"><br/>Change password if you think its not secure again</small>
		</h2>
		
		<div class="text">
			<ul>
				<li class="form-title">Login password</li>
				<li class="li"><input id="pwd" name="current_password" type="password" placeholder="Current login password" maxlength="20">
					<p></p> <b class="close right90"></b> <b class="eye"></b>
				</li>

				<li class="form-title">New password</li>
				<li class="li"><input id="pwd" name="password" type="password" placeholder="New login password" maxlength="20">
					<p></p> <b class="close right90"></b> <b class="eye"></b>
				</li>

				<li class="form-title">Confirm password</li>
				<li class="li"><input id="pwd" name="password_confirmation" type="password" placeholder="Confirm login password" maxlength="20">
					<p></p> <b class="close right90"></b> <b class="eye"></b>
				</li>
			</ul>
		
		</div>
		<br>@csrf  
		<br>
		<div class="btn" onclick="onSign()">Modify password</div>
	</form><br/><br/>

@endsection

@section('menu')
	@include($activeTemplate.'layouts.profile',['activeLink'=>'password'])
@endsection


@push('script')
	<script>
		$('.close').click(function(){
			$($(this).siblings('input')[0]).val('')
			$(this).removeClass('active')
		})

		$('.eye').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')
			}
		})
		$('input').on('input',function($event){ 
				if($($event.target).siblings('.close')[0]){
					if(!($($($event.target)[0]).val())){
						$($($event.target).siblings('.close')[0]).removeClass('active')
					}else{
						$($($event.target).siblings('.close')[0]).addClass('active')
					}
				}
		})
		$('input').on('blur',function($event){  
			$($($event.target).siblings('.close')[0]).removeClass('active') 
		})
		$('input').on('focus',function($event){ 
			if($($event.target).siblings('.close')[0]){
				if(($($($event.target)[0]).val())){
					$($($event.target).siblings('.close')[0]).addClass('active') 
				} 
			}
		})

		function onSign(){
			let flag = true;
			let li = document.querySelectorAll('.li');
			li.forEach((dom,index)=>{
				dom.querySelector('p').innerText='';
				let input = dom.querySelector('input');
				let p = dom.querySelector('p');
				if(!input.value){
					p.innerText='This feild is required, enter password'
					flag = false
				}
			});

			if (!flag) return
				hsycms.loading('loading.');
				$("#passthru").submit();
			
		}
	  
	</script>
@endpush
