<?php
session_start();
$file = 'users.json';

// Inisialisasi variabel error
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $user_input = trim($_POST['username'] ?? '');
    $pass_input = $_POST['password'] ?? '';

    if (empty($user_input) || empty($pass_input)) {
        $error = "Username dan password wajib diisi!";
    } else {
        // Ambil data dari JSON
        if (file_exists($file)) {
            $json_data = file_get_contents($file);
            $users = json_decode($json_data, true) ?: [];

            $found = false;
            foreach ($users as $user) {
                if ($user['username'] === $user_input && password_verify($pass_input, $user['password'])) {
                    $_SESSION['logged_in'] = true;
                    $_SESSION['username'] = $user['username'];
                    $_SESSION['role'] = $user['role'] ?? 'member';
                    
                    $found = true;
                    break;
                }
            }

            if ($found) {
                header('Location: st.php');
                exit;
            } else {
                $error = "Username atau Password salah!";
            }
        } else {
            $error = "Database tidak ditemukan!";
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register Akun ©LevyHost</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet">
<style>
:root { 
  --main: #ffffff;
  --second: #cccccc; 
  --bg: #0e0e0e; 
  --text: #eeeeee; }
* { margin:0; padding:0; box-sizing:border-box; font-family:'Orbitron', sans-serif; }

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
}

/* --- EFEK CAHAYA LATAR BELAKANG --- */
.bg-glow {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(0, 242, 255, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
z-index: 0;
pointer-events: none;
animation: pulse-bg 5s infinite alternate;
  
}


#particles-js {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}

.brand-sub {
font-size: 10px;
color: var(--main);
text-transform: uppercase;
letter-spacing: 4px;
margin-bottom: 25px;
display: block;
font-weight: bold;
}

.glass-box { 
position: relative;
background: rgba(255, 255, 255, 0.05);
padding: 30px 35px; 
border-radius: 30px; 
width: 380px; 
text-align: center; 
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 2px solid var(--main); 
box-shadow: 0 0 25px var(--gold-glow);
z-index: 10;
}

h1 { 
font-size:1.8rem;
color:var(--main);
margin-bottom:30px;
animation: neon 2s infinite alternate; }
.neon {
color:#0ff;
text-shadow:0 0 5px #0ff,0 0 10px #0ff,0 0 20px #0ff;
animation: flicker 1.5s infinite alternate; }
@keyframes flicker { 0%,19%,21%,23%,25%,54%,56%,100% { opacity:1; } 20%,24%,55% { opacity:0.4; } }


input {
background: rgba(255,255,255,0.05);
color:white;
border:1px solid rgba(255,255,255,0.1); 
border-radius:12px;
padding:12px; width:100%;
margin-bottom:15px;
transition:0.3s; }
input:focus { outline:none;
border:1px solid var(--main); 
background: rgba(255,255,255,0.1); }

button {
background: linear-gradient(135deg,var(--main),var(--second));
border:none;
color:black;
width:100%;
padding:14px; 
border-radius:50px; 
font-size:1rem; 
cursor:pointer; 
display:flex;
align-items:center;
justify-content:center; 
gap:10px; box-shadow:0 0 15px var(--main);
transition:0.3s; }
button:hover { transform:scale(1.03); }

.footer-text {
margin-top:20px;
font-size:0.9rem;
color:#bbbbbb; }
.footer-text a { color:#0ff;
text-decoration:none; }

/* Styling untuk pesan error */
.result { 
margin-top:15px; 
font-size:0.95rem;
display: none; }
.result.error { color:#ff4d4d; }
.result.success { color:#0f0; } /* Tidak akan digunakan jika redirect berhasil, tapi baik untuk ada */
</style>
</head>
<body>

<div class="bg-glow"></div>

<div id="particles-js"></div>

<div class="glass-box">
  
  <h1 class="neon"><i class="fas fa-lock"></i> Login Panel</h1>
  <span class="brand-sub">Levy Access System</span>
  <form id="loginForm" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="POST" autocomplete="off">
    <input type="text" id="username" name="username" placeholder="Username" required>
    <input type="password" id="password" name="password" placeholder="Password" required>
    <button type="submit" id="loginBtn"><i class="fas fa-sign-in-alt"></i> LOGIN</button>
  </form>
  
  <?php if (!empty($error)): // Tampilkan pesan error jika ada ?>
    <div id="result" class="result error" style="display: block;"><?php echo $error; ?></div>
  <?php else: ?>
    <div id="result" class="result"></div> <!-- Ini akan kosong jika tidak ada error -->
  <?php endif; ?>

  </div>
</div>

    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
    <script>

    // --- CONFIG PARTICLES LEBIH BESAR & JELAS ---
    particlesJS('particles-js', {
        "particles": {
            "number": { "value": 120, "density": { "enable": true, "value_area": 800 } },
            "color": { "value": ["#00f2ff", "#ffffff", "#ffea00"] },
            "shape": { "type": "circle" },
            "opacity": { "value": 0.6, "random": true },
            "size": { "value": 7, "random": true }, /* Ukuran partikel diperbesar */
            "line_linked": { "enable": true, "distance": 140, "color": "#00f2ff", "opacity": 0.3, "width": 1.5 },
            "move": { "enable": true, "speed": 4, "direction": "none", "random": true, "out_mode": "out" }
        }
    });
</script>

</body>
</html>