@section('styles')
    <style>
        .password-reset{
            padding-left: 30px !important;
            padding-right:30px !important;
        }
        @media(max-width: 600px)
        {
            .password-reset{
                padding-left: 15px !important;
                padding-right:15px !important;
            }
        }
    </style>
@endsection
@extends("layouts.app")
@section('main-content')
    @include('layouts.sub_banner',['title'=>'Change Password',
    'image'=>asset('assets/img/reset_password.jpg')])
    <!-- Content ================================================== -->
    <div class="container margin_60_35">
        <div class="row" id="order-summary">
            <div class="col-md-3"></div>
            <div class="col-md-6">

                <form action="" id="reset-form" method="POST">
                    @if(session('error'))
                        <div class="alert alert-danger msg" role="alert">
                            {{session('error')}}
                        </div>
                    @endif
                    <div class="box_style_2" id="order_process">
                        <h2 style="background: #332C20;;" class="inner2">Change Password</h2>
                        <p style="text-align: center">Enter your new Password 
                       </p><br>
                     
                       <div class="alert alert-success msg" id="msg" role="alert">
                            {{$response->message}}
                        </div>
                   
                        <div class="password-reset">

                            <input type="password" class="form-control form-white" style="margin-bottom:10px;" 
                            placeholder="Enter new password" id="password" required name="password">

                            <input type="hidden" id="token" name="token"
                            value="{{$response->Reset_token->Token}}">
                            <input type="hidden" id="email" name="email"
                            value="{{$response->Reset_token->User_email_id}}">
                            <input type="password" class="form-control form-white" style="margin-bottom:10px;" 
                            placeholder="Confirm your new password" 
                            id="password_confirmation" required name="password_confirmation">
                            <div class="alert success-msg alert-success"  role="alert">
                                <p><b>Password changed successfully, please login with new password</b></p>
                            </div>
                            <div class="alert alert-danger error-msg" id="error-msg" role="alert">
                                <b>Invalid token</b>
                            </div>
                            <button type="submit" id="submit-btn " class="btn btn-submit" 
                            style="background: #AE996E;margin-top:0;">Change Password</button>
                        </div>
                       
                    </div><!-- End box_style_1 -->
                </form>
            </div><!-- End col-md-6 -->

            <div class="col-md-3"></div>
        </div><!-- End row -->
    </div><!-- End container -->
    <!-- End Content =============================================== -->
@endsection

@section('scripts')
    <script type="text/javascript">
        $('.form-white').keyup(function(){
            $('.error-msg').fadeOut();
            $('.msg').fadeOut();
        })
        $('#reset-form').submit(function(e){
            e.preventDefault();
            let email = $('#email').val();
            let password = $('#password').val();
            let password_confirmation = $('#password_confirmation').val();
            let token = $('#token').val();

            if(email!= "" && password !="",password_confirmation!="",token!="")
            {
                $('#submit-btn').attr("disabled",true);
                $('#submit-btn').html("Changing...");
                $.ajax({
                    type:'POST',
                    url:"{{route('password.reset')}}",
                    data:{email,password,password_confirmation,token},
                    success:function(data){
                        if(data.status === 1)
                        {
                            $('#submit-btn').attr("disabled",false);
                            $('#submit-btn').html("Change Password");
                            $('.success-msg').fadeIn(200);
                            window.location.href = "{{route('login')}}";
                            
                        }else
                        {
                            $('#submit-btn').attr("disabled",false);
                            $('#submit-btn').html("Change Password");
                            $('#error-msg').html(data.message)
                            $('#error-msg').fadeIn(500)
                        }
                    }
                })
            }else{
                $('#error-msg').html("All the fields are required")
                $('#error-msg').fadeIn(500)
            }

        })
    </script>
@endsection