<?php
session_start();
include 'koneksi.php';

/* LOGIN */
if (isset($_POST['login'])) {
    $username = trim($_POST['username']);
    $password = trim($_POST['password']);

    // cek admin
    $admin = mysqli_query($conn, "SELECT * FROM admin WHERE username='$username' AND password='$password'");
    if (mysqli_num_rows($admin) > 0) {
        $_SESSION['admin'] = $username;
        header("Location: /warungpojok/admin.php");
        exit;
    }

    // cek user
    $user = mysqli_query($conn, "SELECT * FROM users WHERE username='$username' AND password='$password'");
    if (mysqli_num_rows($user) > 0) {
        $u = mysqli_fetch_assoc($user);
        $_SESSION['user'] = $u['username'];
        $_SESSION['nama_user'] = $u['nama'];

        header("Location: /warungpojok/user_dashboard.php");
        exit;
    }

    echo "<script>alert('Username atau password salah');</script>";
}

/* REGISTER USER */
if (isset($_POST['register'])) {
    $nama = trim($_POST['nama']);
    $username = trim($_POST['username_reg']);
    $password = trim($_POST['password_reg']);

    $cekUser = mysqli_query($conn, "SELECT * FROM users WHERE username='$username'");
    if (mysqli_num_rows($cekUser) > 0) {
        echo "<script>alert('Username sudah digunakan');</script>";
    } else {
        mysqli_query($conn, "INSERT INTO users (nama, username, password) VALUES ('$nama', '$username', '$password')");
        echo "<script>alert('Registrasi berhasil, silakan login');</script>";
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <title>Warung Pojok Online</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    
    <style>
    body{
        font-family:Arial;
        background: linear-gradient(135deg,#f4f6f9,#dfe9f3);
        display:flex;
        justify-content:center;
        align-items:flex-start; /* ubah ini */
        min-height:100vh;
        margin:0;
        overflow-y:auto; /* ubah ini */
        padding:30px 0; /* kasih jarak atas bawah */
        position:relative;
    }

    /* Bubble background animation */
    .bubble{
        position:absolute;
        bottom:-120px;
        background:rgba(255,255,255,0.85);
        border-radius:50%;
        animation: floatUp 15s infinite linear;
    }

    .bubble:nth-child(1){ width:60px; height:60px; left:10%; animation-duration:12s; }
    .bubble:nth-child(2){ width:100px; height:100px; left:25%; animation-duration:18s; }
    .bubble:nth-child(3){ width:40px; height:40px; left:50%; animation-duration:10s; }
    .bubble:nth-child(4){ width:80px; height:80px; left:70%; animation-duration:16s; }
    .bubble:nth-child(5){ width:120px; height:120px; left:85%; animation-duration:20s; }
    
    .floating-icon{
    position:absolute;
    font-size:60px;
    opacity:0.18;
    animation: drift 18s infinite linear;
    z-index:1;
}

.floating-icon:nth-child(6){ top:10%; left:8%; animation-duration:20s; }
.floating-icon:nth-child(7){ top:20%; left:85%; animation-duration:16s; }
.floating-icon:nth-child(8){ top:70%; left:15%; animation-duration:22s; }
.floating-icon:nth-child(9){ top:75%; left:80%; animation-duration:18s; }
.floating-icon:nth-child(10){ top:45%; left:50%; animation-duration:25s; }

@keyframes drift{
    0%{
        transform:translateY(0px) translateX(0px) rotate(0deg);
    }
    25%{
        transform:translateY(-20px) translateX(15px) rotate(5deg);
    }
    50%{
        transform:translateY(-40px) translateX(-10px) rotate(-5deg);
    }
    75%{
        transform:translateY(-20px) translateX(10px) rotate(3deg);
    }
    100%{
        transform:translateY(0px) translateX(0px) rotate(0deg);
    }
}




    @keyframes floatUp{
        0%{
            transform:translateY(0) scale(1);
            opacity:0.3;
        }
        50%{
            opacity:0.6;
        }
        100%{
            transform:translateY(-110vh) scale(1.2);
            opacity:0;
        }
    }

    .box{
        width:420px;
        background:rgba(255,255,255,0.95);
        backdrop-filter:blur(8px);
        padding:30px;
        border-radius:18px;
        box-shadow:0 8px 25px rgba(0,0,0,0.15);
        position:relative;
        z-index:2;
    }

    .logo{
        text-align:center;
        margin-bottom:20px;
    }

    .logo img{
        width:180px;
    }

    h2{
        text-align:center;
        color:#f44336;
        margin-bottom:20px;
    }

    h3{
        color:#333;
        margin-bottom:10px;
    }

    input{
        width:100%;
        padding:12px;
        margin:8px 0;
        border:1px solid #ddd;
        border-radius:10px;
        box-sizing:border-box;
    }

    button{
        width:100%;
        padding:12px;
        border:none;
        border-radius:10px;
        color:white;
        font-size:16px;
        cursor:pointer;
        margin-top:10px;
        font-weight:bold;
    }

    .login-btn{ background:#f44336; }
    .reg-btn{ background:#28a745; }

    hr{
        margin:25px 0;
        border:0;
        border-top:1px solid #ddd;
    }
</style>


</head>
<body>

<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>
<div class="bubble"></div>

<div class="floating-icon">🛒</div>
<div class="floating-icon">🍜</div>
<div class="floating-icon">☕</div>
<div class="floating-icon">🥤</div>
<div class="floating-icon">🍪</div>


<div class="box">

    <div class="logo">
        <img src="/warungpojok/images/logo.png" alt="Logo WPO">
    </div>

    <h2>🛒Warung Pojok Online</h2>

    <!-- LOGIN -->
    <form method="POST">
        <h3>Login</h3>
        <input type="text" name="username" placeholder="Masukkan username" required>
        <input type="password" name="password" placeholder="Masukkan password" required>
        <button type="submit" name="login" class="login-btn">Login</button>
    </form>
    
    <hr>

<div style="text-align:center;">
    <p>Belum punya akun?</p>
    <a href="register.php">
        <button type="button" class="reg-btn">Daftar Sekarang</button>
    </a>
</div>


    <hr>

    

</div>

</body>
</html>