@extends('Admin.layouts.app_login')
@section('title', 'Forgot Password')
@section('content')
<div class="row w-100" style="height: 100vh;">
    <div class=" col-md-6 m-auto h-100 d-flex flex-column align-itms-center justify-content-center"
        style="background-color: #05244D;">
        <div class="d-flex justify-content-center">
            <img src="{{ asset('public/assets/img/seasons_logo.png')}}" width="150" height="150" alt="">
        </div>
    </div>
    <div class=" col-md-6 h-100 d-flex justify-content-center align-items-center login-background-img"
        style="background-image: url(public/assets/img/login_screen_background.png);">
        <div class="row d-flex flex-column justify-content-center align-items-center m-auto"
            style="width: 60%; z-index: 999;">
            <h4 class="text-start font-weight-bold mb-3 text-white">FORGOT PASSWORD</h4>
            <form id="forgot_pass_form">
                <div class="col-md-12">
                    <div class="mb-3 input-parent">
                        <i class="fa fa-envelope" aria-hidden="true"></i>
                        <input type="email" class="form-control"  name="email" placeholder="Email Address">
                    </div>
                </div>
                <div class="col-md-12">
                    <div>
                        <button type="Submit" id="forgot_password_btn" class="p-0 download-btn">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script>
$(document).on("click", "#forgot_password_btn", function (e) {
    let base_url = url_path;
    $('#forgot_pass_form').validate({
        ignore: [],
        debug: false,
        rules: {
            email: {
                required: true
            }
        },
        messages: {
            email: {
                required: "Please Enter email"
            }
        },
        submitHandler: function (form) {
            var formData = new FormData(form);
            e.preventDefault(),
                    $.ajaxSetup({
                        headers: {
                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                        },
                    });
            $.ajax({
                url: base_url + '/send_otp',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (response) {
                    console.log(response);
                    if (response.status_code == 200) {
                        form.reset();
                        toastr.success('An OTP has been sent to your email address');
                            setTimeout(function() {
                            window.location.href = base_url + "/otp";
                                }, 2000);
                    }else if (response.status == 404) {
                        toastr.error('This email id is not exits');
                    }
                    else {
                        toastr.error(response.message);
                    }
                },
            });
        }
    });
});
</script>

@endsection
