<?php include "main_includes/header.php"; ?>

<?php
if (isset($_GET['ii'], $_GET['mm'])) {
    extract($_GET);
    // $status = false;
    $id = base64_decode($ii);
    $email = base64_decode($mm);

    $user = User::find_by_id($id);
    extract($_POST);

    // print_r($user);
    if ($user) {
        if ($user->email == $email) {
            if (isset($_POST['send'])) {

                $user->password = $password;
                if ($user->save()) {
                    $message = notification('success', 'Password Changed successfuly');
                    $status = true;
                } else {
                    $status = false;
                    $message = notification('warning', 'Sorry! You cannot use your previous password');
                }
            }
        } else {
            redirect('sign-in.php');
        }
    } else {

        redirect('sign-in.php');
    }
} else {

    redirect('sign-in.php');
}

?>

<body class="bg-white">


    <section class="bg-white">
        <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
            <a href="#" class="flex items-center mb-6 text-2xl font-semibold text-gray-900 text-white">
                <div class="rounded w-20 h-20">
                    <img src="assets/img/favicon.png">
                </div>
            </a>
            <div class="w-full rounded-lg shadow border md:mt-0 sm:max-w-md xl:p-0 bg-emerald-800 border-emerald-700">
                <div class="p-6 space-y-4 md:space-y-6 sm:p-8">
                    <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl text-white">
                        Forgot Password
                    </h1>

                    <p class="mb-0 text-gray-400">Enter your Email Address to recieve Password Reset Link</p>
                    <!-- <div class="msg"></div> -->


                    <form id="form" method="POST" role="form">
                        <div style="font-size: 10px;" class="msg">
                            <?= isset($message) ? $message : '' ?>
                        </div>
                        <div>
                            <label for="password" class="block mb-2 text-sm font-medium text-gray-900 text-white">New
                                Password</label>
                            <input type="password" name="password" id="password"
                                class="bg-gray-50 border py-2 border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
                                placeholder="••••••••" required="">
                            <label for="con_pass"
                                class="block mb-2 text-sm font-medium text-gray-900 text-white">Confirm Password</label>
                            <input type="password" name="con_pass" id="con_pass"
                                class="bg-gray-50 border py-2 border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500"
                                placeholder="••••••••" required="">
                        </div>


                        <div class="text-center">
                            <button type="submit" name="send" id="send"
                                class="inline-block w-full px-6 py-3 mt-6 mb-0 font-bold text-center text-white uppercase align-middle transition-all bg-transparent border-0 rounded-lg cursor-pointer shadow-soft-md bg-x-25 bg-150 leading-pro text-xs ease-soft-in tracking-tight-soft bg-gradient-to-tl from-blue-600 to-teal-400 hover:scale-102 hover:shadow-soft-xs active:opacity-85">Save</button>

                        </div>
                    </form>

                    <div
                        class="p-2 text-gray-400 px-1 pt-0 text-center bg-transparent border-t-0 border-t-solid rounded-b-2xl lg:px-2">
                        <p class="mx-auto leading-normal text-sm">
                            Don't have an account?
                            <a href="sign-up"
                                class="relative z-10 font-semibold text-transparent bg-emerald-500 bg-clip-text">Sign
                                up</a>
                            <br>
                            <a href="sign-in"
                                class="relative z-10 font-semibold text-transparent bg-emerald-500 bg-clip-text">Sign-in</a>
                        </p>

                    </div>

                </div>
            </div>
        </div>

    </section>
    <?php
    include "./main_includes/loader_out.php";
    ?>
</body>

<script src="assets/bootstrap-5.2.3-dist/js/bootstrap.js"></script>

<script src="./assets/iziToast-master/dist/js/iziToast.js"></script>

<script>
    $(document).on('keyup click change', '#con_pass, #password', function (e) {

        var pass = $('#password').val()
        var con_pass = $('#con_pass').val()


        if (pass.length < 6) {
            $('#send').prop('disabled', true)

            $('.msg').slideDown('slow').html(
                `<?= notification("danger", "Password Length most be greater than 6 characters") ?>`)

            return false;
        } else {

            if (pass == con_pass) {
                $('.msg').slideDown('slow').html(
                    `<?= notification("success", "Good!") ?>`)
                $('#send').prop('disabled', false)
                // alert()
            } else {
                $('.msg').slideDown('slow').html(
                    `<?= notification("warning", "Password Does not matched") ?>`)
                $('#send').prop('disabled', true)
            }
        }

    })

    function notification() {
        iziToast.show({
            title: 'Done!',
            message: "Password Changed successfuly",
            color: "green",
            position: "center",
            balloon: true,
            onOpened: function () {
                document.location.href = "sign-in.php"

            }
        });
    }

    function notification_err() {
        iziToast.show({
            title: 'Warning',
            message: "Sorry! You cannot use your previous password",
            color: "red",
            position: "topRight",
            balloon: true
        });
    }


    <?php

    if (isset($status) && $status) {
        echo "notification()";
    } else if (isset($status) && !$status) {
        echo "notification_err()";
    }
    ?>
</script>

</html>