<style>
.content {
	background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url('<?php echo base_url() ?>image/camp.png') ; no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

a:hover {
	text-decoration: underline;
}
a {
	color: blue;
}

.page-content img {
	max-width: 100%;
	height: auto!important;
}
.image-google-login{
    width: 24px;
    height: 24px;
    margin-right: 10px;
}
.button-google-login{
    border: 1px solid #c7c5c5;
}
.button-google-login:hover{
    background-color: #dddcdc;
}
</style>
<!-- Content Wrapper. Contains page content -->
<div class="content login-page">
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="login-box">
                <!-- /.login-logo -->
                <div class="card card-outline card-primary " style="border-radius: 20px; ">
                    <div class="card-header text-center ">
                        <div class="page-content">
                            <!-- <img src="<?php echo base_url() ?>assets/template/AdminLTE-3.1.0/dist/img/c12.png"> -->
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="input-group mb-3">
                            <input type="text" id="email" class="form-control" placeholder="Email">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-envelope"></span>
                                </div>
                            </div>
                        </div>
                        <div class="input-group mb-3">
                            <input type="password" id="password" class="form-control" placeholder="Password">
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <span class="fas fa-lock"></span>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="text-center mt-2 mb-3">
                            <a href="#" class="btn btn-block btn-primary" onclick="login()">Login</a>
							<a href="<?php echo site_url() . "/Login/login_google"; ?>" class="btn btn-block button-google-login">
								<i> 
								<img class="image-google-login" src="<?php echo base_url() . "image/google.png"; ?>">
								</i> 
								Login With Google
							</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function login() {
        let email = $('#email').val();
        let password = $('#password').val();

        $.ajax({
            type: "POST",
            url: "<?php echo site_url() . '/Login/check_login'; ?>",
            data: {
                'email': email,
                'password': password,
            },
            dataType: 'json',
            success: function(data) {
                if (data['message']) {
                    if (data['type'] == 1) {
                        window.location.href = "<?php echo site_url() . '/Project/show_project_manage_user'; ?>";
                    } else if (data['type'] == 2) {
                        window.location.href = "<?php echo site_url() . '/User/show_user_manage'; ?>";
                    }
                }
                else {
					Toast.fire({
						icon: 'error',
						title: 'Your E-mail or Password is incorrect!!',
					})
                }
            }
        });
    }
</script>
