@extends('layouts.app')

@section('content')
<div class="breadcrumb-area bg-img">
    <div class="container">
        <div class="breadcrumb-content text-center">
            <h1 class="h2">Forgot Password</h1>
            <ul>
                <li>
                    <a href="{{ url('/') }}">Home</a>
                </li>
                <li class="active">Forgot Password </li>
            </ul>
        </div>
    </div>
</div>
<div class="login-register-area pb-90">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-12 ms-auto me-auto">
                <div class="login-register-wrapper">
                    <div class="tab-content">
                        <div id="lg1" class="tab-pane active">
                            <div class="login-form-container">
                                <div class="login-register-form">
                                    <form action="{{ route('forgot_password.post') }}" id="forgotPasswordForm" method="post">
                                        @csrf
                                        @method('POST')
                                        <div class="login_success">
                                        </div>
                                        <div class="login_errors error">
                                        </div>
                                        <label for="email" class="m-0">@lang('lang.label_email') <abbr class="required" title="required">*</abbr></label>
                                        <input type="text" name="email">
                                        <p>Forgot your login information? No problem! Simply enter your email to retrieve it.</p>
                                        <div class="button-box">
                                            <button type="submit" name="forgot_password" class="forgot_password_btn" value="@lang('lang.submit')"><span class="spinner-button">@lang('lang.submit')</span></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script>
var currentRequest = null;
$("#forgotPasswordForm").validate({
    rules: {
        email: {
            required: true,
            email: true
        },
    },
    messages: {
        email: {
            required: "Please enter a email address",
            email: "Please enter a valid email address"
        }
    },
    submitHandler: function(form) {
        $('.forgot_password_btn').addClass('spinner');
        var formData = new FormData(form);
        currentRequest = jQuery.ajax({
            type: 'POST',
            data: formData,
            url: "{{ route('forgot_password.post') }}",
            dataType: 'JSON',
            processData: false,
            contentType: false,
            beforeSend : function()    {
                if(currentRequest != null) {
                    currentRequest.abort();
                }
            },
            success: function(data) {
                $('.login_errors').html('');
                $('.login_success').html('');
                if(data.status == 0) {
                    $('.login_errors').html('<div class="alert alert-danger alert-dismissible fade show" role="alert">'+data.message+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                }
                else {
                    $('.login_success').html('<div class="alert alert-success alert-dismissible fade show" role="alert">'+data.message+'<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
                    $("#forgotPasswordForm")[0].reset();
                }
                $('.forgot_password_btn').removeClass('spinner');
                setTimeout(() => {
                    $('.login_errors').html('');
                    $('.login_success').html('');
                }, 3000);
            },
            error:function(e){
            // Error
                $('.forgot_password_btn').removeClass('spinner');
                return false;
            }
        });
        return false;
    }
});
</script>
@endsection