<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <link rel="stylesheet" href="/css/style.css"> <!-- เชื่อมต่อ CSS -->
</head>
<body>
    <div class="auth-container">  <!-- ใช้คลาสตาม CSS -->
        <h1>Register</h1>
        <form id="registerForm" action="/register" method="post">
            <div class="form-group">
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>
            <button type="submit">Register</button>  <!-- ลบ style inline ออก -->
        </form>
        <p>Already have an account? <a href="/login">Login</a></p>
    </div>

    <!-- JavaScript ตรวจสอบการส่งฟอร์ม -->
    <script>
    document.getElementById("registerForm").addEventListener("submit", function(event) {
        event.preventDefault();  // ป้องกันการรีเฟรชหน้า

        const formData = {
            name: document.getElementById("name").value,
            email: document.getElementById("email").value,
            password: document.getElementById("password").value
        };

        fetch("/register", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(formData) 
        })
        .then(response => response.json()) // ใช้ response เป็น JSON
        .then(data => {
            if (data.success) {
                alert("Registration successful! Redirecting...");
                window.location.href = "/login";  // ไปหน้าล็อกอิน
            } else {
                alert("Error: " + data.message); // แสดงข้อความผิดพลาด
            }
        })
        .catch(error => console.error("Error:", error));
    });
    </script>
</body>
</html>