<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <title>Artifacts | Account</title>
    <link rel = "icon" href = "images/icon.jpg" type = "image/x-icon">
    <link rel="stylesheet" href="stylel.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins:400,500&display=swap">

    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
    <div class="container">
        <div class="card">
            <div class="inner-box" id="card">
                <div class="card-front">
                <%@include file="components/invalid.jsp" %>
                    <h2>LOGIN</h2>
                    <form action="LoginServlet" method="post">
                       <div class="field mail">
                            <span class="fa fa-user"></span>

                            <input name="email" type="email" placeholder="Your Email ID" required>
                        </div>



                        <div class="field space">
                            <span class="fa fa-lock"></span>
                            <input name="password" type="password" class="pass-key" placeholder="Password" required>
                            <span class="show">SHOW</span>
                        </div>


                        <button type="submit" class="submit-btn"> LOGIN </button>
                    </form>


                    <a href=" "> Forgot Password ?</a>
                    <div class="login"> Or login with </div>
                    <div class="links">
                        <div class="google">
                            <i class="fa fa-google"><span>Google</span></i>
                        </div>
                    </div>
                    <button type="button" class="btn" onclick="openResgister()"> Don't have Account? </button>
                    <div class="business"> Create/Login Business Account?
                        <a href="baccount.jsp"> Create Here! / Login Here !</a>
                    </div>

                </div>
                <div class="card-back">
                    <h2>REGISTER</h2>
                    <form action="RegisterServlet" method="post">
                        <div class="field">
                            <span class="fa fa-user-circle"></span>

                            <input name="user_name" type="text" placeholder="Your Name" required>
                        </div>
                         <div class="field mail">
                            <span class="fa fa-user"></span>

                            <input name="user_email" type="email" placeholder="Your Email ID" required>
                        </div>

                        <div class="field phone">
                            <span class="fa fa-phone"></span>

                            <input name="user_phone" type="text" placeholder="Your Phone Number" required>
                        </div>
                        <div class="field space">
                            <span class="fa fa-lock"></span>
                            <input name="user_password" type="password" class="pas-key" placeholder="Password" required>
                            <span class="shows">SHOW</span>
                        </div>

                        <button type="submit" class="submit-btn"> Sign Up </button>

                    </form>

                    <div class="login"> SignUp with</div>
                    <div class="links">
                        <div class="google">
                            <i class="fa fa-google"><span>Google</span></i>
                        </div>
                    </div>
                    <button type="button" class="btn" onclick="openLogin()">ALready Have An Account? </button>
                    <div class="business"> Wanna Create Business Account ?
                        <a href="baccount.jsp">Create Here !</a>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script>
        var card = document.getElementById("card");

        function openResgister() {
            card.style.transform = "rotateY(-180deg)";

        }

        function openLogin() {
            card.style.transform = "rotateY( 0deg)";

        }
    </script>

    <script>
        const pass_field = document.querySelector('.pass-key');
        const showBtn = document.querySelector('.show');
        showBtn.addEventListener('click', function() {
            if (pass_field.type === "password") {
                pass_field.type = "text";
                showBtn.textContent = "HIDE";
                showBtn.style.color = "#3498db";
            } else {
                pass_field.type = "password";
                showBtn.textContent = "SHOW";
                showBtn.style.color = "#222";
            }
        });
    </script>
    <script>
        const pas_field = document.querySelector('.pas-key');
        const shownBtn = document.querySelector('.shows');
        shownBtn.addEventListener('click', function() {
            if (pas_field.type === "password") {
                pas_field.type = "text";
                shownBtn.textContent = "HIDE";
                shownBtn.style.color = "#3498db";
            } else {
                pas_field.type = "password";
                shownBtn.textContent = "SHOW";
                shownBtn.style.color = "#222";
            }
        });
    </script>
</body>

</html>
