<?php

include 'classes/class.loader.php';
$html = new html();
$loader = new loading();
$videos = ['assets/bg.mp4', 'assets/bg_2.mp4', 'assets/bg_3.mp4', 'assets/bg_4.mp4'];
$loader->background_video_with_preloader("Playing fetch with your data...", $videos);

?>

<body>
    <!-- Login container -->
    <div class="login-container">
        <h2>FORGOT PASSWORD</h2>
        <div id="step_1">
            <h3>Please enter your email liked to this account</h3>
            <input type="text" id="email" name="email" placeholder="email" required />
            <button value="SEND" onclick="send_email()">SEND</button>
        </div>
        <div id="step_2" style="display:none;">
            <h3>Please enter OTP from email sent</h3>
            <input type="text" id="otp" name="otp" placeholder="OTP" required />
            <button value="CONFIRM" onclick="check_otp()">CONFIRM</button>

        </div>
        <div id="step_3" style="display:none;">
            <h3>Please enter new password</h3>
            <input type="text" id="password_1" name="password_1" placeholder="NEW PASSWORD" required />
            <input type="text" id="password_2" name="password_2" placeholder="AGAIN" required />
            <br>
            <br>
            <button style='width:100%;' onclick="update_pass()">DONE</button>

        </div>
    </div>

    <script>
        function send_email() {
            var email = document.getElementById('email').value;
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'forgot_pass/send_email_forgot_password.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        if (xhr.responseText.length > 0) {

                            document.getElementById('step_1').style.display = 'none';
                            document.getElementById('step_2').style.display = 'block';
                            console.log("forgot_pass/send_email_forgot_password.php");

                        } else {
                            alert('Email not found');
                        }
                    }
                }
            };
            xhr.send('email=' + encodeURIComponent(email));
        }
        function check_otp() {
            var otp_input = document.getElementById('otp').value;
            var email = document.getElementById('email').value;

            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'forgot_pass/check_otp.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        console.log(xhr.responseText);
                        if (xhr.responseText == 1) {

                            document.getElementById('step_2').style.display = 'none';
                            document.getElementById('step_3').style.display = 'block';

                        } else {
                            alert('OTP Incorrect');
                        }
                    }
                }
            };
            xhr.send('otp=' + encodeURIComponent(otp_input) + "&email=" + encodeURIComponent(email));
        }
        function update_pass() {
            var password_1 = document.getElementById('password_1').value;
            var password_2 = document.getElementById('password_2').value;
            var email = document.getElementById('email').value;
            if (password_1 == password_2) {

                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'forgot_pass/change_password.php', true);
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === XMLHttpRequest.DONE) {
                        if (xhr.status === 200) {
                            console.log(xhr.responseText);
                            if (xhr.responseText == 1) {
                                alert('Password changed');
                                window.location.href = 'login.php';
                            } else {
                                alert('Password not changed, Please contact support or try again later.');

                            }
                        }
                    }
                };
                xhr.send('password_1=' + encodeURIComponent(password_1) + "&email=" + encodeURIComponent(email));
            }
            else {
                alert("Password don't matched");
            }
        }
    </script>
</body>

</html>



<?php $html->html_end(); ?>