<div class="container">
    <div class="login-container">

        <!-- Logo Section -->
        <div style="text-align:center; padding:10px 0;">

            <div class="school-logo mb-3">
                <i class="fas fa-graduation-cap"></i>
            </div>

            <h2 style="font-size:30px; font-weight:800; color:#000; margin:0;">
                StuLite
            </h2>

            <small style="color:#aaa; font-size:12px; letter-spacing:2px;">
                Forgot Password
            </small>
        </div>

        <!-- Error Message -->
        <% if (typeof error_msg !=='undefined' && error_msg) { %>

            <div class="alert alert-danger">
                <%= error_msg %>
            </div>

            <% } %>


                <% if (typeof success_msg !=='undefined' && success_msg) { %>
                    <div class="alert alert-success">
                        <%= success_msg %>
                    </div>
                    <% } %>


                        <!-- ForgotPassword Form -->
                        <form id="verificationFormForgot">

                            <div class="form-group">
                                <input type="email" class="form-control" id="email" name="email"
                                    placeholder="Enter Email " maxlength="35" required>
                            </div>




                            <div class="row mb-0">
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-primary btn-login">
                                        Send OTP
                                    </button>
                                </div>
                            </div>

                            <hr>
                            <div class="text-center">
                                <a class="small" href="<%= ROUTES.ADMIN_LOGIN %>">Back To Login?</a>
                            </div>

                        </form>

    </div>
</div>
<div class="loader"></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $('#verificationFormForgot').on('submit', function (event) {

            event.preventDefault();
            var formData = $(this).serialize();
            $('.loader').show();

            $.ajax({
                type: 'POST',
                url: "<%= ROUTES.ADMIN_FORGOT_PASSWORD %>",
                data: formData,
                success: function (response) {
                    $('.loader').hide();
                    console.log(response);
                    Swal.fire({
                        title: 'Success!',
                        text: response.message,
                        icon: 'success',
                        confirmButtonText: 'OK'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "<%= ROUTES.ADMIN_VERIFY %>";
                        }
                    });
                    console.log(response);
                },
                error: function (response) {
                    $('.loader').hide();
                    console.log(response);
                    Swal.fire({
                        title: 'Error!',
                        text: response.responseJSON.message,
                        icon: 'error',
                        confirmButtonText: 'OK'
                    })
                        .then((result) => {
                            if (result.isConfirmed) {
                                window.location.href = '<%= ROUTES.ADMIN_FORGET_PASSWORD %>';
                            }
                        });;
                },
            });


        });
    });



</script>