@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'=>'Reset 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">
                    <div class="box_style_2" id="order_process">
                        <h2 style="background: #332C20;;" class="inner2">Reset Password</h2>
                        <p style="text-align: center">Enter registered email <br>address 
                        to send password reset link</p><br>
                        <div class="password-reset">
                            <input type="email" class="form-control form-white" style="margin-bottom:10px;" 
                            placeholder="email address" id="email" required name="email">

                            <div class="alert success-msg alert-success"  role="alert">
                            <p><b>Reset link has been sent to your email</b></p>
                        </div>
                        <div class="alert alert-danger error-msg" id="error-msg" role="alert">
                            <b>Invalid email address</b>
                        </div>

                            <button type="submit" id="submit-btn" class="btn  btn-submit" 
                            style="background: #AE996E;margin-top:0;">Submit</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();
        })
        $('#reset-form').submit(function(e){
            e.preventDefault();
            let email = $('#email').val();

            $('#submit-btn').attr("disabled",true);
            $('#submit-btn').html("Connecting...");
            if(email != "")
            {
               
                $.ajax({
                    type:'POST',
                    url:"{{route('reset')}}",
                    data:{email},
                    success:function(data){
                        if(data.status === 1)
                        {
                            $('.success-msg').fadeIn(200);
                        
                        }else
                        {
                            $('#error-msg').html(data.message)
                            $('#error-msg').fadeIn(500)
                            
                        }
                        $('#submit-btn').attr("disabled",false);
                        $('#submit-btn').html("Submit");
                    }
                })
            }else{
                $('#error-msg').html("The email field is required")
                $('#error-msg').fadeIn(500)
                $('#submit-btn').attr("disabled",false);
                $('#submit-btn').html("Submit");
            }
           
        })
    </script>
@endsection