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

<head>
    <meta charset="UTF-8">
    <title>Login</title>

    <link href="/css/bases.css" rel="stylesheet"/>

    <script src="/js/utils.js"></script>
    <script src="/js/constants.js"></script>
</head>

<body>

<div id="centerDiv">
    <a href="#" id="googleLogin" onclick="handleGoogleLogin()">
        <img class="google-icon" src="/images/google-login.svg" alt="Google Icon">
    </a>
    <br>

    <form id="otpForm">
        <label>
            Phone Number:
            <input type="text" id="phoneNumber" placeholder="Enter Phone Number" onfocus="phoneFocus()" required>
        </label>
        <label>
            OTP:
            <input type="text" id="otp" placeholder="Enter OTP" onfocus="otpFocus()">
        </label>
        <button type="button" id="otpButton" onclick="handleButtonClick()">Send OTP</button>
    </form>
</div>


<script>
    var operation = SEND_OTP_CODE;

    function phoneFocus() {
        operation = SEND_OTP_CODE;
        document.getElementById("otpButton").innerText = "Send OTP";
    }

    function otpFocus() {
        operation = VERIFY_OTP_CODE;
        document.getElementById("otpButton").innerText = "Verify OTP";
    }

    function handleButtonClick() {
        var phoneNumber = document.getElementById('phoneNumber').value;
        var otp = document.getElementById('otp').value;

        if (operation === SEND_OTP_CODE) {
            getCall("/otp/send/" + phoneNumber);
        } else if (operation === VERIFY_OTP_CODE) {
            getCall("otp/verify/" + phoneNumber + "/" + otp);
        }
    }

    function handleGoogleLogin(){
      window.location.href = '/oauth2/authorization/google';
    }
</script>
</body>

</html>
