<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;">
                RESET 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>
                    <% } %>


                        <form id="verificationFormNew" class="user">







                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group password-container">
                                        <input type="password" class="form-control" id="password" name="password"
                                            placeholder="Password" maxlength="30" required>
                                        <span class="password-toggle" onclick="togglePassword2()">
                                            <i class="fa fa-eye-slash" id="toggleIcon2"></i>
                                        </span>
                                    </div>

                                </div>
                            </div>
                            <div class="row">


                                <div class="col-md-12">
                                    <div class="form-group password-container">
                                        <input type="password" class="form-control" id="password_confirmation"
                                            name="password_confirmation" placeholder="Password Confirmation"
                                            maxlength="30" required>
                                        <span class="password-toggle" onclick="togglePassword3()">
                                            <i class="fa fa-eye-slash" id="toggleIcon3"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>



                            <div class="row mb-0">
                                <div class="col-md-12">
                                    <button type="submit" class="btn btn-primary btn-login">
                                        Reset Password
                                    </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>
    function togglePassword2() {
        const passwordField = document.getElementById('password');
        const toggleIcon = document.getElementById('toggleIcon2');

        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            toggleIcon.classList.remove('fa-eye-slash');
            toggleIcon.classList.add('fa-eye');
        } else {
            passwordField.type = 'password';
            toggleIcon.classList.remove('fa-eye');
            toggleIcon.classList.add('fa-eye-slash');
        }
    }

    function togglePassword3() {
        const passwordField = document.getElementById('password_confirmation');
        const toggleIcon = document.getElementById('toggleIcon3');

        if (passwordField.type === 'password') {
            passwordField.type = 'text';
            toggleIcon.classList.remove('fa-eye-slash');
            toggleIcon.classList.add('fa-eye');
        } else {
            passwordField.type = 'password';
            toggleIcon.classList.remove('fa-eye');
            toggleIcon.classList.add('fa-eye-slash');
        }
    }

</script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $('#verificationFormNew').on('submit', function (event) {
            event.preventDefault();
            var formData = $(this).serialize();
            $('.loader').show();

            $.ajax({
                type: 'POST',
                url: "<%= ROUTES.ADMIN_RESET_PASSWORD %>",
                data: formData,
                success: function (response) {
                    $('.loader').hide();
                    console.log(response);
                    if (response.success == true) {
                        Swal.fire({
                            title: 'Success!',
                            text: response.message,
                            icon: 'success',
                            confirmButtonText: 'OK'
                        }).then((result) => {
                            if (result.isConfirmed) {

                                window.location.href = "<%= ROUTES.ADMIN_LOGIN %>"
                            }
                        });
                        console.log(response);
                    } else {
                        Swal.fire({
                            title: 'Error!',
                            text: response.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        })
                            .then((result) => {
                                if (result.isConfirmed) {


                                    window.location.href = "<%= ROUTES.ADMIN_RESET_PASSWORD %>";


                                }
                            });
                    }
                },
                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_RESET_PASSWORD %>";


                            }
                        });;
                },
            });


        });
    });



</script>