<?php
@ob_start();
session_start();
require 'config.php';

$err_msg = "";

// Cek apakah user menekan tombol login
if (isset($_POST['proses'])) {
    $user = strip_tags($_POST['user']);
    $pass = strip_tags($_POST['pass']);

    $query_user = mysqli_query($conn, "SELECT * FROM login WHERE user='$user'");
    if (mysqli_num_rows($query_user) > 0) {
        $data = mysqli_fetch_assoc($query_user);
        if ($data['pass'] === $pass) {
            $_SESSION['user'] = $user;
            $_SESSION['status'] = "index";
            header("Location: dasboard.php");
            exit;
        } else {
            $err_msg = "Password salah.";
        }
    } else {
        $err_msg = "Username tidak ditemukan.";
    }
}

if (isset($_SESSION['status']) && $_SESSION['status'] === "index") {
    header("Location: index.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Login - Toko Wawan</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="assets/img/kasir.ico" type="image/x-icon">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <style>
        body {
            background: linear-gradient(to right, #6a11cb, #2575fc);
            font-family: 'Poppins', sans-serif;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-card {
            width: 400px; /* Ukuran tetap */
            border: none;
            border-radius: 15px;
            box-shadow: 0 0 30px rgba(0,0,0,0.1);
            background-color: #fff;
            padding: 40px;
        }

        .login-card h1 {
            font-weight: 600;
            color: #444;
            font-size: 25px;
            margin-bottom: 20px;
        }

        .form-control {
            border-radius: 10px;
        }

        .btn-purple {
            background-color: #6a11cb;
            border: none;
            border-radius: 10px;
            color: #fff;
            font-weight: bold;
        }

        .btn-purple:hover {
            background-color: #5a0ebd;
        }

        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #999;
        }

        .position-relative {
            position: relative;
        }

        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-10px); }
        }

        /* Responsif jika layar terlalu kecil */
        @media screen and (max-width: 420px) {
            .login-card {
                width: 90%;
                padding: 30px;
            }
        }
    </style>
</head>
<body>

<div class="login-card">
    <div class="text-center mb-3">
        <img src="assets/img/logo_toko.png" alt="Logo Toko" style="max-width: 100px; height: auto;">
    </div>
    <h1 class="text-center">Silakan Login</h1>

    <?php if ($err_msg != ""): ?>
        <div class="alert alert-danger fade-in" id="alert-msg"><?= $err_msg ?></div>
    <?php endif; ?>

    <form method="POST" autocomplete="off">
        <div class="form-group">
            <label for="user">Username</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                </div>
                <input type="text" class="form-control" name="user" id="user" placeholder="Masukkan Username" autocomplete="off" required>
            </div>
        </div>

        <div class="form-group">
            <label for="pass">Password</label>
            <div class="input-group position-relative">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                </div>
                <input type="password" class="form-control" name="pass" id="pass" placeholder="Masukkan Password" required>
                <i class="fas fa-eye password-toggle" id="eye-icon" onclick="togglePassword()"></i>
            </div>
        </div>

        <button type="submit" name="proses" class="btn btn-purple btn-block mt-3">Login</button>
    </form>

    <p class="text-center text-muted mt-3" style="font-size: 14px;">&copy; <?= date('Y') ?> Toko Wawan</p>
</div>

<script>
    function togglePassword() {
        const passwordInput = document.getElementById("pass");
        const eyeIcon = document.getElementById("eye-icon");
        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");
        }
    }

    // Auto-hide alert after 3 seconds
    setTimeout(function () {
        const alertMsg = document.getElementById('alert-msg');
        if (alertMsg) {
            alertMsg.style.animation = 'fadeOut 0.5s ease-in-out forwards';
            setTimeout(() => alertMsg.remove(), 500);
        }
    }, 3000);
</script>
</body>
</html>
