<?php

require_once 'function.php';

session_start();


// ==========================================
// CEK SESSION JIKA SUDAH LOGIN
// ==========================================

if (isset($_SESSION['role'])) {

    if ($_SESSION['role'] == "Admin") {

        header("Location: ../admin/index.php");
        exit;

    } elseif ($_SESSION['role'] == "Petugas") {

        header("Location: ../petugas/index.php");
        exit;

    } elseif ($_SESSION['role'] == "Pengawas") {

        header("Location: ../pengawas/index.php");
        exit;
    }
}


// ==========================================
// PROSES LOGIN
// ==========================================

if (isset($_POST['login'])) {

    $email = $_POST['email'];
    $userpass = $_POST['password'];


  // Query ke database
 // Query ke database db_rpl2526 (tanpa memanggil kolom name yang tidak ada)
    $sql = mysqli_query(
        $koneksi,
        "SELECT email, password, role
         FROM tbl_users
         WHERE email='$email'"
    );


    // ==========================================
    // CEK DATA USER
    // ==========================================

    if ($sql && mysqli_num_rows($sql) > 0) {

        $data = mysqli_fetch_assoc($sql);

        $paswd = $data['password'];
        $role = $data['role'];
        
        // Jika butuh nama, bisa diambil dari session atau query tambahan. 
        // Untuk sementara kita kosongkan atau ambil dari email/role dulu agar login berhasil.
        $nama = "Admin";
        
        // ==========================================
        // CEK PASSWORD
        // ==========================================

        if (password_verify($userpass, $paswd)) {


            // ==========================================
            // BUAT SESSION
            // ==========================================

            $_SESSION['email'] = $email;
            $_SESSION['role'] = $role;
            $_SESSION['nama'] = $nama;


            // ==========================================
            // REDIRECT SESUAI ROLE
            // ==========================================

            if ($_SESSION['role'] == "Admin") {

                header("Location: ../admin/index.php");
                exit;

            } elseif ($_SESSION['role'] == "Petugas") {

                header("Location: ../petugas/index.php");
                exit;

            } elseif ($_SESSION['role'] == "Pengawas") {

                header("Location: ../pengawas/index.php");
                exit;

            } else {

                echo "<script>
                        alert('Role pengguna tidak valid!');
                        window.location.href='login.php';
                      </script>";
                exit;
            }


        } else {

            echo "<script>
                    alert('Login gagal! Password salah.');
                    window.location.href='login.php';
                  </script>";
            exit;
        }


    } else {

        echo "<script>
                alert('Login gagal! Email tidak ditemukan.');
                window.location.href='login.php';
              </script>";
        exit;
    }
}

?>

<!DOCTYPE html>
<html lang="id" class="h-full">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Login - Keen</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <script src="https://unpkg.com/lucide@latest"></script>

    <style>

        body {
            font-family: 'Inter', sans-serif;
        }

    </style>

</head>


<body class="h-full w-full bg-gray-100 font-sans antialiased">


    <div class="w-full h-full min-h-screen flex flex-col md:flex-row">


        <!-- ==========================================
             GAMBAR
        =========================================== -->

        <div
            class="w-full md:w-3/5 min-h-[200px] md:min-h-full bg-cover bg-center relative"
            style="background-image: url('https://i.pinimg.com/736x/59/2d/5d/592d5d3d4177c56b30df2f219be64891.jpg');"
        >

            <div class="absolute inset-0 bg-black/10"></div>

        </div>


        <!-- ==========================================
             BAGIAN LOGIN
        =========================================== -->

        <div
            class="w-full md:w-2/5 bg-white/80 backdrop-blur-md p-8 md:p-12 flex flex-col justify-between border-l border-gray-200/50"
        >


            <div class="max-w-sm w-full mx-auto my-auto">


                <!-- JUDUL -->

                <div class="text-center mb-8">

                    <h1 class="text-3xl font-bold text-gray-900">
                        Login
                    </h1>

                    <p class="text-xs text-gray-400 mt-1">
                        Your Social Campaigns
                    </p>

                    <span class="inline-block text-xs text-gray-400 mt-6">
                        Or with email
                    </span>

                </div>


                <!-- FORM -->

                <form
                    action=""
                    method="POST"
                    class="space-y-4"
                >


                    <!-- EMAIL -->

                    <div>

                        <input
                            type="email"
                            name="email"
                            placeholder="email"
                            class="w-full px-4 py-3.5 text-sm bg-white/60 backdrop-blur-sm border border-gray-300/70 rounded-xl focus:outline-none focus:border-blue-500 focus:bg-white transition placeholder:text-gray-400"
                            required
                        >

                    </div>


                    <!-- PASSWORD -->

                    <div>

                        <input
                            type="password"
                            name="password"
                            placeholder="password"
                            class="w-full px-4 py-3.5 text-sm bg-white/60 backdrop-blur-sm border border-gray-300/70 rounded-xl focus:outline-none focus:border-blue-500 focus:bg-white transition placeholder:text-gray-400"
                            required
                        >

                    </div>


                    <!-- BUTTON LOGIN -->

                    <button
                        type="submit"
                        name="login"
                        class="w-full bg-[#0066FF] hover:bg-blue-700 text-white font-medium py-3.5 rounded-xl text-sm transition shadow-md hover:shadow-lg mt-2"
                    >
                        Login
                    </button>

                </form>


                <!-- REGISTER -->

                <div class="text-center mt-6">

                    <p class="text-xs text-gray-400">

                        belum punya akun?

                        <a
                            href="register.php"
                            class="text-blue-600 font-semibold hover:underline"
                        >
                            register
                        </a>

                    </p>

                </div>

            </div>


            <!-- FOOTER -->

            <div class="flex justify-center gap-6 text-xs text-blue-500 pt-6">

                <a href="#" class="hover:underline">
                    Terms
                </a>

                <a href="#" class="hover:underline">
                    Plans
                </a>

                <a href="#" class="hover:underline">
                    Contact Us
                </a>

            </div>

        </div>

    </div>


    <script>

        lucide.createIcons();

    </script>

</body>

</html>