<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ลงทะเบียน</title>
    <link rel="stylesheet" href="/css/register.css">
</head>
<body>
    <div class="container">
        <!-- ซ้าย: ภาพ -->
        <div class="left"></div>

        <!-- ขวา: ฟอร์ม -->
        <div class="right">
                <h2>Welcome!</h2>
                <p>Register</p>

                <form action="/register" method="POST" onsubmit="return validateForm()">
                    <h3>Personal Information</h3>
                    <div class="input-group">
                        <label>First Name:<span class="required">*</span></label>
                        <input type="text" name="fname" required>
                    </div>
                    <div class="input-group">
                        <label>Last Name:<span class="required">*</span></label>
                        <input type="text" name="lname" required>
                    </div>
                    <div class="input-group">
                        <label>Date of birth:<span class="required">*</span></label>
                        <input type="date" name="dob" required>
                    </div>

                    <h3>Login information</h3>
                    <div class="input-group">
                        <label>Email:<span class="required">*</span></label>
                        <input type="email" name="email" id="email" required>
                    </div>
                    <div class="input-group password-group">
                        <label>Password:<span class="required">*</span></label>
                        <input type="password" name="password" id="password" required minlength="6">
                        <span class="toggle-password" onclick="togglePassword('password')">👁</span>
                        <small class="error-message" id="passwordError">Password must contain at least 6 characters.</small>
                    </div>
                    
                    <div class="input-group password-group">
                        <label>Confirm password:<span class="required">*</span></label>
                        <input type="password" name="confirmPassword" id="confirmPassword" required minlength="6">
                        <span class="toggle-password" onclick="togglePassword('confirmPassword')">👁</span>
                        <small class="error-message" id="confirmPasswordError">Passwords must match.</small>
                    </div>
                    

                    <h3>Contact information</h3>
                    <div class="input-group">
                        <label>Address:</label>
                        <input type="text" name="address">
                    </div>
                    <div class="input-group">
                        <label>Phone:<span class="required">*</span></label>
                        <input type="text" name="phone" id="phone" maxlength="10" required>
                    </div>

                    <div class="button-group">
                        <button type="button" class="cancel-btn" onclick="window.location.href='/login'">Cancel</button>
                        <button type="submit" class="submit-btn">Confirm</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        // ทำให้ช่องเบอร์โทรศัพท์รับเฉพาะตัวเลข
        document.getElementById("phone").addEventListener("input", function () {
            this.value = this.value.replace(/\D/g, "").slice(0, 10);
        });

        // ตรวจสอบอีเมลต้องมี @
        document.getElementById("email").addEventListener("input", function () {
            if (!this.value.includes("@")) {
                this.setCustomValidity("กรุณาใส่อีเมลที่ถูกต้อง (ต้องมี @)");
            } else {
                this.setCustomValidity("");
            }
        });

        // แสดง/ซ่อนรหัสผ่าน
        function togglePassword(fieldId) {
            let passwordField = document.getElementById(fieldId);
            if (passwordField.type === "password") {
                passwordField.type = "text";
            } else {
                passwordField.type = "password";
            }
        }

        // ตรวจสอบรหัสผ่าน
    function validateForm() {
        const password = document.getElementById("password").value;
        const confirmPassword = document.getElementById("confirmPassword").value;
        const passwordError = document.getElementById("passwordError");
        const confirmPasswordError = document.getElementById("confirmPasswordError");

        let isValid = true;

        // ตรวจสอบความยาวรหัสผ่าน
        if (password.length < 6) {
            passwordError.style.display = "block";
            isValid = false;
        } else {
            passwordError.style.display = "none";
        }

        // ตรวจสอบว่ารหัสผ่านตรงกัน
        if (password !== confirmPassword) {
            confirmPasswordError.style.display = "block";
            isValid = false;
        } else {
            confirmPasswordError.style.display = "none";
        }

        return isValid;
    }

    // เพิ่ม Event Listener ให้ตรวจสอบเมื่อผู้ใช้พิมพ์รหัสผ่าน
    document.getElementById("password").addEventListener("input", function () {
        if (this.value.length < 6) {
            document.getElementById("passwordError").style.display = "block";
        } else {
            document.getElementById("passwordError").style.display = "none";
        }
    });

    document.getElementById("confirmPassword").addEventListener("input", function () {
        if (this.value !== document.getElementById("password").value) {
            document.getElementById("confirmPasswordError").style.display = "block";
        } else {
            document.getElementById("confirmPasswordError").style.display = "none";
        }
    });
    </script>
</body>
</html>