@extends('layouts/home/app')
@section('title')
{{trans('common.title_resetpwd')}}
@endsection
@section('content')
    <style>
        @media screen and (min-width: 768px) {
            body {
                background: #f9f9f9
            }

            #login {
                width: 35%;
                margin: 0 auto;
                margin-bottom: 22%;
                background: #fff
            }

            #login-title {
                width: 35%;
                margin: 0 auto;
                background: #fff;
                margin-top: 14%;
                text-align: center;
                margin-bottom: 1%;
                font-size: 25px;
                font-weight: bold
            }

            .my-inp {
                background-color: rgb(250, 255, 189);
                background-image: none;
                color: rgb(0, 0, 0);
            }
        }

        @media screen and (max-width: 768px) {
            body {
                background: #f9f9f9
            }

            #login-title {
                width: 100%;
                margin: 0 auto;
                background: #fff;
                margin-top: 10%;
                text-align: center;
                margin-bottom: 1%;
                font-size: 20px;
                font-weight: bold
            }

            #login {
                width: 100%;
                margin: 0 auto;;
                margin-top: 5%;
                margin-bottom: 50%;
                background: #fff
            }

            .my-inp {
                background-color: rgb(250, 255, 189);
                background-image: none;
                color: rgb(0, 0, 0);
            }
        }

        @media screen and (max-width: 992px) {
            #login {
                width: 45%;
                margin: 0 auto;
                margin-bottom: 19.8%;
                background: #fff
            }

        }
        .notify{color:red;padding-top:10px}

    </style>
    <div class="container" style="">
        <div id="login-title" >
			{{trans('common.title_resetpwd')}}
        </div>
        <div id="login" style="border:1px solid #d8dee2;border-radius: 5px;padding:2% 2%">

            <div id="form"  style="" >
                <form role="form" id="reg">
				{!! csrf_field() !!}
 				<input type='hidden' name='username' value='{{$email}}' />
                    <div class="form-group">
                        <label for="password" style="width:90%">{{trans('register.label_password')}}
                       <!--     <a style="float: right;:right" href="">Forgot password?</a> -->
                        </label>
                        <input type="password" class="form-control my-inp" id="password" name="password"
                               placeholder="{{trans('register.tips_pwd')}}" style="width:95%">
                                <span id="password-notify" class="notify"></span>
                    </div>
                    <div class="form-group">
                        <label for="confirm_password" style="width:90%">{{trans('register.label_confirm_password')}}
                        <!--    <a style="float: right;:right" href="">Forgot password?</a> -->
                        </label>
                        <input type="password" class="form-control my-inp" id="confirm_password" name="confirm_password"
                               placeholder="{{trans('register.tips_confirm_pwd')}}" style="width:95%">
                    </div>

                    <button type="button" id='register' class="btn btn-default btn-lg btn-block" style="width:95%;font-weight: normal">{{trans('register.but_reset')}}</button>
                </form>




            </div>
        </div>
        <script>
			$(function(){

				$('#register').click(function(){
                    $('.notify').html('')
                    $.ajax({
                        url:"{{URL('passport/doresetpwd')}}",
                        data:$('form').serialize(),
                        dataType:"JSON",
                        type:"POST",
                        success:function(data){
                            if(!data.success)
							{
								if(data.flag =='username')
								{
									$("#username-notify").html(data.msg)
								}
							}
							else
							{
								location.href="{{URL('/passport/login')}}";
							}
                        },
                        error:function(data){
                            $.each(data.responseJSON, function (key, value) {
                                $("#"+key+"-notify").html(value)
                            });
                        }
                    })
                })
			})
        </script>
@endsection