<?php
include("includes/init.php");
if (isset($_SESSION['user_id']) && $_SESSION['user_id'] != '') {
    $user = User::find_by_id($_SESSION['user_id']);
    if ($user) {
        if ($user->role == 1) {
            # code...
            redirect("./admin");
        } else {

            redirect("./user");
        }
    } else {
        unset($_SESSION['user_id']);
        // unset($_SESSION['admin_user_id']);
    }
}

// if (isset($_POST['login'])) {
//     extract($_POST);

//     $user = User::find_by_query("SELECT * FROM user WHERE email='" . $_POST['email'] . "' AND password='" . $_POST['password'] . "' LIMIT 1");
//     // print_r($user);
//     $user = array_shift($user);

//     if ($user) {
//         $_SESSION['user_id'] = $user->id;
//         redirect("index.php");
//     } else {
//         $message = notification('danger', 'Invalid Login Credentials');
//     }
// }

?>
<?php include("includes/lheader.php") ?>

<body>

    <!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->
    <div id="login-page">
        <div class="container">
            <center>
                <img class="m-5" style="max-width: 100px;" src="img/9jatrust.png" alt="">
            </center>
            <div class="col-md-4"></div>
            <form id="login_form"
                class="form-logi col-md-4 py-3 px-3 relative flex flex-col min-w-0 break-words shadow-soft-xl rounded-2xl bg-clip-border shadow-soft-lg backdrop-saturate-[100%] backdrop-blur-[30px] bg-white/50 shadow-blur"
                action="" method="POST">
                <center>

                    <h2 class="text-white">Sign in now</h2>
                </center>
                <div class="login-wrap">
                    <span class="msg"></span>
                    <input id="email" name="email" type="email" class="form-control form-control-lg" placeholder="Email"
                        autofocus>
                    <br>
                    <input id="password" name="password" type="password" class="form-control form-control-lg"
                        placeholder="Password">
                    <label class="checkbox">
                        <span class="pull-right">
                            <a class="text-white" href="forgot_pass.php"> Forgot Password?</a>
                        </span>
                    </label>
                    <button id="login" name="login" class="btn btn-lg btn-success btn-block bg-success" type="submit">
                        SIGN IN<div class="lds-ellipsis">
                            <div></div>
                            <div></div>
                            <div></div>
                            <div></div>
                        </div></button>
                    <hr>
                    <div class="login-social-link centered font-bold text-white">
                        <p>or sign in via your Google Account</p>
                        <button class="btn btn-lg btn-warning text-white" type="submit"><i class="fa fa-google"></i>
                            Google</button>
                    </div>
                    <div class="registration text-white">
                        Don't have an account yet?<br />
                        <a class="btn btn-lg btn-primary" href="signup.php">
                            Create an account
                        </a>
                        <p>For any inquiry Message Admin on +2348039484033</p>
                    </div>
                </div>
                <!-- Modal -->

                <!-- modal -->
            </form>
        </div>
    </div>
    <!-- js placed at the end of the document so the pages load faster -->
    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="lib\bootstrap-4.6.2-dist\js\bootstrap.js"></script>
    <!--BACKSTRETCH-->
    <!-- You can use an image of whatever size. This script will stretch to fit in any screen size.-->
    <script type="text/javascript" src="lib/jquery.backstretch.min.js"></script>
    <script>
    $.backstretch(["img/bg.jpg", "img/bg2.jpg"], {
        speed: 0,
        fade: 2000,
        duration: 2000
    });
    </script>



    <script>
    $(document).ready(function() {
        $('.lds-ellipsis').fadeOut('slow')
        $('#login').prop('disabled', false)
    })
    $(document).on("submit", "#login_form", function(e) {
        e.preventDefault()
        $('.msg').fadeOut('slow')
        $('.lds-ellipsis').fadeIn('slow')
        $('#login').prop('disabled', true)

        var email = $("#email").val()
        var password = $("#password").val()


        $.ajax({
            method: "POST",
            dataType: 'json',
            url: "includes/components/login.php",
            data: $(this).serialize(),
            success: function(response) {
                // console.log(response)


                if (response.response_code == "00") {
                    $(".msg").html(
                        `<?= notification("success", "<strong>Login Successfuly</strong>") ?>`
                    )


                    document.location.href = response.uri

                } else if (response.response_code == "02") {

                    $(".msg").html(
                        `<?= notification("success", "<strong>Verify Your Email, A verification message was sent to your email</strong> check <strong>(Spam folder)</strong> if not found in <strong>Inbox</strong>") ?>`
                    )

                } else {
                    $('#login').prop('disabled', false)

                    $(".msg").html(`<div class='alert alert-danger alert-dismissible ' role='alert'>
                        <button type='button' class='close' data-dismiss='alert' aria-label='Close'><span
                        aria-hidden='true'>×</span>
                        </button><strong></strong>
                        ` + response.message + `
                        </div>`)
                }
                $('.msg').fadeIn('slow')
                $('.lds-ellipsis').fadeOut('slow')
            },

        })

    })
    </script>

</body>

</html>