<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login | Signup</title>
    <link rel="stylesheet" href="/PageCss/login.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
</head>

<body>
    <div class="container">
        <div class="forms-container">
            <div class="signin-signup">
                <form id="signInForm" class="sign-in-form" method="post" action="/signin">
                    <h2 class="title">Sign in</h2>
                    <div class="input-field">
                        <i class="fas fa-user"></i>
                        <input type="text" id="username1" name="username" placeholder="Username"
                            onchange={validateHandleUsername1()} required />
                    </div>
                    <div class="input-field">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password1" name="password" placeholder="Password" minlength="8"
                            required />
                    </div>
                    <input type="submit" value="Login" class="btn solid" />
                </form>
                <form id="signUpForm" class="sign-up-form" method="post" action="/signup">
                    <h2 class="title">Sign up</h2>
                    <div class="input-field">
                        <i class="fas fa-envelope"></i>
                        <input type="text" id="name" name="name" placeholder="Name" required />
                    </div>
                    <div class="input-field">
                        <i class="fas fa-envelope"></i>
                        <input type="email" id="email" name="email" placeholder="Email" onchange={validateHandleEmail()}
                            required />
                    </div>
                    <div class="input-field">
                        <i class="fas fa-envelope"></i>
                        <input type="number" id="phonenumber" name="phonenumber" placeholder="Phone Number" required
                            onchange={handlePhoneNumberValidation()} />
                    </div>
                    <div class="input-field">
                        <i class="fas fa-user"></i>
                        <input type="text" id="username2" name="username" placeholder="Username" required
                            onchange={validateHandleUsername2()} />

                    </div>
                    <div class="input-field">
                        <i class="fas fa-lock"></i>
                        <input type="password" id="password2" name="password" placeholder="Password" required
                            minlength="8" />
                    </div>
                    <div class="input-field">
                        <i class="fas fa-envelope"></i>
                        <input type="number" id="age" name="age" placeholder="Age" required />
                    </div>
                    <div class="input-field">
                        <i class="fas fa-envelope"></i>
                        <input type="text" id="gender" name="gender" placeholder="Gender" />
                    </div>
                    <input type="submit" id="Signup" class="btn" value="Sign up" />
                </form>
            </div>
        </div>

        <div class="panels-container">
            <div class="panel left-panel" style="margin-right: 20rem; padding-bottom: 15rem;">
                <div class="content">
                    <img src="/Gifs/Authentication-amico.svg" height="100%" alt="" style="padding-bottom: 4rem;" />
                    <h3>New here ?</h3>
                    <p>
                        Click here to Sign Up
                    </p>
                    <button class="btn transparent" id="sign-up-btn">
                        Sign up
                    </button>
                </div>
            </div>
            <div class="panel right-panel">
                <div class="content" style="padding-bottom: 15rem; padding-right: 3rem;">
                    <img src="/Gifs/Authentication-bro.svg" height="100%" alt="" style="padding-bottom: 4rem;" />
                    <h3>One of us ?</h3>
                    <p>
                        Click here to Sign In
                    </p>
                    <button class="btn transparent" id="sign-in-btn">
                        Sign in
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script>
        let regexEmail = /^[A-Za-z0-9._]+@[A-Za-z]+[.][A-Za-z]+$/
        let regexUsername = /^[A-Za-z][A-Za-z0-9_]{7,29}$/
        let regexPhonenumber = /^[6-9]\d{9}$/

        const validateHandleUsername2 = () => {
            let username = document.getElementById("username2")
            if (!username.value.match(regexUsername)) {
                alert("Please enter valid Username")
                username.value = "";
            }
        }

        const validateHandleUsername1 = () => {
            let username = document.getElementById("username1")
            if (!username.value.match(regexUsername)) {
                alert("Please enter valid Username")
                username.value = "";
            }
        }

        const validateHandleEmail = () => {
            let email = document.getElementById("email")
            console.log(email);
            if (!email.value.match(regexEmail)) {
                alert("Please enter valid Email")
                email.value = "";
            }
        }

        const handlePhoneNumberValidation = () => {
            let phonenumber = document.getElementById("phonenumber")
            if (!phonenumber.value.match(regexPhonenumber)) {
                alert("Please enter valid Phone Number")
                phonenumber.value = "";
            }
        }

        const sign_in_btn = document.querySelector("#sign-in-btn");
        const sign_up_btn = document.querySelector("#sign-up-btn");
        const container = document.querySelector(".container");

        sign_up_btn.addEventListener("click", () => {
            container.classList.add("sign-up-mode");
        });

        sign_in_btn.addEventListener("click", () => {
            container.classList.remove("sign-up-mode");
        });
    </script>
</body>

</html>