@extends(env('APP_NAME').'.layout')

@push('head')
    {!! resource('asset/main.css') !!}
    {!! resource('asset/main.js') !!}
	{!! resource('component/member/asset/member.css') !!}
	{!! resource('component/member/asset/member.js') !!}
@endpush

@section('content')
	<main class="container">
		<div class="cont-container login">
			<h3>New password</h3>

			<div class="pwd-item">
				Please provide us your registered email address and new password.
			</div>

			<form id="resetpassword-form" name="resetpassword" class="form login" method="post" action="/member/reset-password">
				@csrf

			    <div class="form-group">
			    	<input type="text" name="email" autocomplete="off" placeholder="Email">
			    </div>

			    <div class="form-group">
		            <input type="password" name="password" id="new_password" autocomplete="off" required placeholder="New password">
		            <div class="check-result" id="password-check-result"></div>
			    </div>

				<div class="form-group submit" style="margin-bottom: 4rem">
					<button id="resetpassword-submit" class="button" type="submit" disabled>Save Change</button>
				</div>
			</form>
		</div>
		@if(session('success'))
		<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-body">
						<p>{{ session('success') }}</p>
					</div>
				</div>
			</div>
		</div>
		@elseif(session('error'))
		<div class="modal fade" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-body">
						<p>{!! session('error') !!}</p>
					</div>
				</div>
			</div>
		</div>
		@endif
	</main>

	<script type="text/javascript">
	    $(document).ready(function(){
	        // @if (Session::has('success'))
	        //     msg('{!! Session::get('success') !!}');
	        // @endif

	        // @if (Session::has('error'))
	        //     msg('{!! Session::get('error') !!}');
	        // @endif

	        $('#new_password').keyup(function(e){
	            var pwd = this.value;
	            var len = pwd.length;

	            if (len>5) {
	                $.ajax({
	                    type: 'get',
	                    dataType: 'json',
	                    url: '/member/check-password?pwd='+encodeURIComponent(pwd),
	                    success: function(result) {
	                        $('#password-check-result').html(result.msg);
	                        if (result.valid) $('#resetpassword-submit').prop('disabled', false);
	                        else $('#resetpassword-submit').prop('disabled', true);
	                    }
	                });
	            } else {
	                $('#resetpassword-submit').prop('disabled', true);
	                $('#password-check-result').html("<span style='color: red'>6글자 이상이어야 합니다</span>");
	            }
	        });

	    });
	</script>

	@if(session('success'))
	<script>
		$(document).ready(function() {
			$('#successModal').modal('show');
		});
	</script>
	@elseif(session('error'))
	<script>
		$(document).ready(function() {
			$('#errorModal').modal('show');
		});
	</script>
	@endif
@endsection