@extends("front.layout")

@section("content")
<style>
.input-error {
    color: red !important;
}
</style>
<div class="container-xxl py-5">
    <div class="container-fluid">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <img class="img-fluid" src="{{ asset(session('logo', getSetting('logo'))) }}" alt="Loancamp"  style="height:40px;">
            </div>
            <div class="col-lg-6">
                <div class="h-100">
                    <h4 class="display-4 pb-3">Forgot Password </h4>
                    <form method="post" name="frmForgotPass" id="frmForgotPass">
                        @csrf
                        <div class="row g-3">
                            <div class="col-lg-12">
                                <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                            </div>
                            <div class="d-grid gap-2">
                                <button type="submit" name="submit" class="btn btn-primary" id="btnsubmit"><i class="fa fa-spinner fa-spin" id="btnloader" style="display: none;"></i> Send Password</button>
                            </div>
                            <div class="col-lg-6">
                                <div class="py-2 left">
                                    <a href="{{route('login')}}">Login</a>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div><!-- About End -->



@endsection
@push("scripts")
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
{{-- <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> --}}
<script>
$(document).ready(function() {
    $("#frmForgotPass").validate({
        errorClass: "input-error",
        rules: {
            email: {
                required: true,
                email: true
            }
        },
        submitHandler: function() {
            let formdata = $("#frmForgotPass").serialize();

            $.ajax({
                method: "post",
                url: "{{route('forgot-password-submit')}}",
                data: formdata,
                beforeSend() {
                    $("#btnsubmit").attr("disabled", true);
                    $("#btnloader").show();
                },
                success: function(response) {
                    if(response.success == 1) {
                        Swal.fire({
                            title: 'Success!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonText: 'Ok'
                        }).then(function(){
                            location.href = '{{route("login")}}';
                        });
                    } else {
                        $("#btnsubmit").removeAttr("disabled");
                        $("#btnloader").hide();
                        Swal.fire({
                            title: 'Error!',
                            text: response.message,
                            icon: 'error',
                            confirmButtonText: 'Ok'
                        }).then(function(){

                        });
                    }

                },
                error: function (xhr, ajaxOptions, thrownError) {
                    let jsonValue = jQuery.parseJSON( xhr.responseText );

                    if(jsonValue.errors) {
                        let obj = jsonValue.errors;

                        let errorsArray = []
                        Object.keys(obj).forEach(key => {
                            // console.log(key, obj[key]);
                            // toastr.error(obj[key][0]);
                            errorsArray.push(obj[key][0]);
                        });

                        let fullerror = errorsArray.join(", ");

                        Swal.fire({
                            title: 'Error!',
                            text: fullerror,
                            icon: 'error',
                            confirmButtonText: 'Ok'
                        })

                    }

                }
            });
        }
    });
});
</script>
@endpush