<?php
session_start();
if(isset($_SESSION['user'])) {
    header('location: index.php');
}

include "koneksi.php";

if(isset($_POST['login'])) {
    $username = $_POST['username'];
    $pass = $_POST['pass'];
    $query = "SELECT * FROM user WHERE username = '$username'";
    $exec = mysqli_query($conn, $query);
    if(mysqli_num_rows($exec) !== 0){
        $result = mysqli_fetch_assoc($exec);
        if($result['password'] == $pass) {
            $_SESSION['level'] = $result['level'];
            $_SESSION['user'] = $result['username'];
            if($result['level'] == 'user') {
                header('location: guru/index.php');
            } else {
                header('location: index.php');
            }
        } else {
            echo "<script>alert('The password you entered is incorrect!');
            document.location = 'login.php';
            </script>";
        }
    } else {
        echo "<script>alert('Username not found!');
            document.location = 'login.php';
            </script>";
    } 
}
?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <title>Login - SPK WEIGHTED PRODUCT</title>
        <link href="css/styles.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
        
        <style>
            body {
                background: url('img/nusaputra.jpg') no-repeat center center fixed;
                background-size: cover;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .login-container {
                background: rgba(255, 255, 255, 0.9);
                padding: 30px;
                border-radius: 10px;
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
                max-width: 400px;
                width: 100%;
                position: relative;
            }
            .login-title {
                text-align: center;
                font-weight: bold;
                margin-bottom: 20px;
                font-size: 24px;
                color: #333;
            }
            .language-switch {
                position: absolute;
                top: 10px;
                right: 15px;
            }
        </style>
    </head>
    <body>
        <div class="login-container">
            <!-- Language Switch Button -->
            <div class="language-switch">
            <a href="../login.php" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-globe"></i> Change Language (IDN)
            </a>

            </div>
<br>
            <h2 class="login-title">Decision Support System
                <br>
                Using the Weighted Product Method for Evaluating the Effectiveness of YouTube Usage and Recommending the Best Channels as Learning Media for Informatics Engineering Students</h2>
            <div class="card shadow-lg border-0 rounded-lg">
                <div class="card-header">
                    <h3 class="text-center font-weight-light my-4">Login</h3>
                </div>
                <div class="card-body">
                    <form action="" method="post">
                        <div class="form-floating mb-3">
                            <input class="form-control" name="username" placeholder="Username" required />
                            <label for="inputEmail">Username</label>
                        </div>
                        <div class="form-floating mb-3 position-relative">
                            <input class="form-control" id="inputPassword" type="password" name="pass" placeholder="Password" required />
                            <label for="inputPassword">Password</label>
                            <!-- Show Password Button -->
                            <button type="button" class="btn btn-sm btn-outline-secondary position-absolute top-50 end-0 translate-middle-y me-2" 
                                onclick="togglePassword()" style="z-index: 5;">
                                <i class="fas fa-eye" id="eyeIcon"></i>
                            </button>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" id="inputRememberPassword" type="checkbox" value="" />
                            <label class="form-check-label" for="inputRememberPassword">Remember Password</label>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mt-4 mb-0">
                            <button type="submit" name="login" class="btn btn-primary">Login</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <script>
            function togglePassword() {
                const passwordInput = document.getElementById("inputPassword");
                const eyeIcon = document.getElementById("eyeIcon");
                if (passwordInput.type === "password") {
                    passwordInput.type = "text";
                    eyeIcon.classList.remove("fa-eye");
                    eyeIcon.classList.add("fa-eye-slash");
                } else {
                    passwordInput.type = "password";
                    eyeIcon.classList.remove("fa-eye-slash");
                    eyeIcon.classList.add("fa-eye");
                }
            }
        </script>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="js/scripts.js"></script>
    </body>
</html>
