@extends('backend.layouts.login')

@section('content')
<div class="login-box">
	<div class="login-logo">
        <a href="/">{{Html::image('admin/logo-white.svg','',['class'=>'img-responsive'])}}</a>
    	<h1>{{ __('Set Password') }}</h1>
  	</div>
    <div class="login-box-body">
		@if (session('error'))
                <div class="alert alert-danger">
                    {{ session('error') }}
                </div>
        @endif
        @if (session('status'))
            <div class="alert alert-success" role="alert">
                {{ session('status') }}
            </div>
        @endif
        <p class="login-box-msg">{{ __('Enter new Password') }}</p>
        <form method="POST" class="form-validate" action="{{ $saveUrl}}">
            @csrf
            
            {{ Form::hidden('encrypted_id',$encrypted_id)}}
            <div class="form-group has-feedback">
            		<div class="pass-show-hide">
					{{ Form::password('password', [
						'autocomplete'=>"off",
							'class' => 'form-control required' . ($errors->has('password') ? ' is-invalid' : ''),
							'placeholder' => __('Password'),'id'=>'password'
						]) }}
					<div class="pass-show-hide-btn" toggle="#password">
						<span class="eye-slash-icon active">
							<em class="fa fa-eye-slash"></em>
						</span>
						<span class="eye-icon">
							<em class="fa fa-eye"></em>
						</span>
					</div>
				</div>

				@if ($errors->has('password'))
				<span class="invalid-feedback text-danger" role="alert">
					<strong>{{ $errors->first('password') }}</strong>
				</span>
				@endif
			</div>
			<div class="form-group has-feedback">
				<div class="pass-show-hide">
					{{ Form::password('password_confirmation', [
						'autocomplete'=>"off",
							'class' => 'form-control required' . ($errors->has('password') ? ' is-invalid' : ''),
							'placeholder' => __('Confirm Password'),'id'=>'password_confirmation'
						]) }}
					<div class="pass-show-hide-btn" toggle="#password_confirmation">
						<span class="eye-slash-icon active">
							<em class="fa fa-eye-slash"></em>
						</span>
						<span class="eye-icon">
							<em class="fa fa-eye"></em>
						</span>
					</div>
				</div>

				@if ($errors->has('password_confirmation'))
				<span class="invalid-feedback text-danger" role="alert">
					<strong>{{ $errors->first('password_confirmation') }}</strong>
				</span>
				@endif
			</div>
			<x-recaptcha />
			
            <div class="row mt-12">
                <div class="col-8">
					<a href="{{ url('admin-panel/') }}" class="m-link m-link-bb">{{ __('Back to sign in') }}</a>
				</div>
				<div class="col-4">
					{{ Form::submit(__('Submit'), ['id' => 'm_login_signin_submit','class' => 'btn btn-primary cw-submit']) }}
				</div>
            </div>
        </form>
        </div>                    
    </div>
</div>
{{ Html::script('adminLTE/bower_components/jquery/dist/jquery.validate.min.js') }}

<script type="text/javascript">
	//**disable space in password field
	$(document).on('keydown', 'input[type="password"]', function(e) {
		if (e.keyCode == 32) return false;
	});


	$.validator.addMethod('checkPassword', function(value) {
		return /^(?=.*?[0-9])(?=.*?[a-z])(?=.*[A-Z])(?=.*[~!@#$%^&*()_+=-]).{8,32}$/.test(value);
	}, 'Your password must have 8 to 32 characters containing 1 upper case letter, 1 lower case letter, 1 special character & 1 digit.');
	$(document).ready(function() {
		$('.form-validate').validate({
			debug: false,
			errorClass: 'help-block',
			errorElement: "span",
			rules: {

				'password': {
					required: true,
					checkPassword: true
				},
				'password_confirmation': {
					required: true,
					equalTo: '#password'
				}
			},
			highlight: function(element, errorClass, validClass) {
				$(element).parents('.col-field-wrapper').addClass('has-error');
			},
			unhighlight: function(element, errorClass, validClass) {
				$(element).parents('.col-field-wrapper').removeClass('has-error');
			},
			invalidHandler: function(form, validator) {
				if (!validator.numberOfInvalids())
					return;

				$('html, body').animate({
					scrollTop: ($(validator.errorList[0].element).offset().top - 100)
				}, 500);
			}
		});
	});
</script>
@endsection