<!-- resources/templates/login.html -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <style>
        @keyframes gradientAnimation1 {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        @keyframes gradientAnimation2 {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        body {
            background: linear-gradient(135deg, #3498db, #5dade2, #85c1e9, #aed6f1, #d6eaf8);
            background-size: 400% 400%;
            animation: gradientAnimation1 6s infinite, gradientAnimation2 8s infinite;
        }
    </style>
</head>
<body class="bg-gray-100">
<!-- Include the navbar from mainlayout -->
<div th:replace="layouts/mainLayout"></div>

<div class="container mx-auto p-4 flex justify-center items-center h-screen">
    <div class="w-full max-w-md">




        <div th:if="${param.error}" class="text-red-500 mb-2 text-center">
            Invalid username and password.
        </div>

        <div th:if="${param.logout}" class="text-green-500 mb-2 text-center">
            You have been logged out.
        </div>

        <div class="bg-white p-6 rounded-md shadow-md">
            <h2 class="text-2xl font-semibold mb-4 text-center">Sign In</h2>
            <!-- Font Awesome login icon indicating login -->
            <div class="text-center p-4">
                <i class="fa fa-sign-in-alt fa-3x text-blue-500"></i>
            </div>

            <form th:action="@{/login}" method="post">
                <!-- Username -->
                <div class="mb-4 relative">
                    <label for="username" class="block text-sm font-medium text-gray-600">Username:</label>
                    <input type="text" id="username" name="username" required
                           class="mt-1 p-2 w-full border rounded focus:outline-none focus:ring focus:border-blue-300"
                           oninput="checkUsername()">
                    <!-- Loader icon and validation icons -->
                    <span id="loaderIcon" class="absolute right-2 top-3 text-gray-600" style="display: none;">
                            <i class="fa fa-spinner fa-spin"></i> Loading...
                        </span>

                    <span class="absolute right-4 top-4 px-4 py-4">
                         <i class="fa fa-check-circle text-green-500" id="usernameExistsIcon" style="display: none; color: green;">Valid Username</i>
                         <i class="fa fa-times-circle text-red-500" id="usernameNotExistsIcon" style="display: none; color: red;">Invalid Username</i>
                     </span>
                    <!-- Username validation message -->
                    <!--   <p id="usernameMessage" class="text-red-500 mt-2"></p> -->
                   </div>

                   <!-- Password -->
                <div class="mb-4">
                    <label for="password" class="block text-sm font-medium text-gray-600" id="passwordLabel">Password:</label>
                    <input type="password" id="password" name="password" required
                           class="mt-1 p-2 w-full border rounded focus:outline-none focus:ring focus:border-blue-300">
                </div>

                <!-- Login button -->
                <button id="loginButton" type="submit"
                        class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
                    Login
                </button>

                <!-- Register button -->
                <div id="registerCard" class="bg-gray-100 border rounded p-4 mt-2 hidden">
                    <p class="text-red-500" id="usernameMessage"></p>
                    <button type="button" id="registerButton" onclick="location.href='/register'"
                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
                        Sign Up
                    </button>
                </div>
            </form>

            <!-- External login options -->
            <div class="mt-4">
                <!-- Login with Github button -->
                <button onclick="window.location.href='/oauth2/authorization/github'"
                        class="block mb-2 w-full bg-gray-700 hover:bg-gray-800 text-white font-bold py-2 px-4 rounded">
                    <i class="fab fa-github mr-2"></i>Login with Github
                </button>

                <div class="mt-4 flex items-center">
                    <a href="/forgot-password" class="flex-1 text-center text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800">
                        Forgot Password?
                    </a>
                    <span class="mx-2 text-gray-400">|</span>
                    <a href="/forgot-username" class="flex-1 text-center text-gray-600 hover:text-gray-800 focus:outline-none focus:text-gray-800">
                        Forgot Username?
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function checkUsername() {
        const usernameInput = document.getElementById('username');
        const usernameMessage = document.getElementById('usernameMessage');
        const usernameExistsIcon = document.getElementById('usernameExistsIcon');
        const usernameNotExistsIcon = document.getElementById('usernameNotExistsIcon');
        const passwordField = document.getElementById('password');
        const passwordLabel = document.getElementById('passwordLabel');
        const loginButton = document.getElementById('loginButton');
        const registerButton = document.getElementById('registerButton');
        registerButton.style.display = 'none';
        const registerCard= document.getElementById('registerCard');
        registerCard.style.display= 'none';
        const loaderIcon = document.getElementById('loaderIcon');
        loaderIcon.style.display = 'inline-block';


        const username = usernameInput.value.trim();

        if (username === '') {
            // Empty username, hide icons, show message, and hide password field, label, and login button
            usernameExistsIcon.style.display = 'none';
            usernameNotExistsIcon.style.display = 'none';
            usernameMessage.innerHTML = '';
            passwordField.style.display = 'none';
            passwordLabel.style.display = 'none';
            loginButton.style.display = 'none';
            loaderIcon.style.display = 'none';
            return;
        }
        // Set buffer timer duration in milliseconds (e.g., 1000 milliseconds = 1 second)
        const bufferTimerDuration = 500;

        // Set a timer to initiate the API call after the buffer duration
        const bufferTimer = setTimeout(() => {
            // Call the API to check username existence
            fetch(`/api/user/public/check/username?username=${username}`)
                .then(response => response.json())
                .then(data => {
                    loaderIcon.style.display = 'none';
                    if (data.exists) {
                        // Username exists, show green check icon, password field, label, and login button
                        usernameExistsIcon.style.display = 'inline';
                        usernameNotExistsIcon.style.display = 'none';
                        usernameMessage.innerHTML = '';
                        passwordField.style.display = 'inline-block';
                        passwordLabel.style.display = 'inline-block';
                        loginButton.style.display = 'block';
                        registerButton.style.display= 'none';
                        registerCard.style.display= 'none';
                    } else {

                        // Username does not exist, show red cross icon, message, and hide password field, label, and login button
                        usernameExistsIcon.style.display = 'none';
                        usernameNotExistsIcon.style.display = 'inline';
                        usernameMessage.innerHTML = 'Username does not exists, please Sign Up';

                        // Show register button
                        document.getElementById('registerButton').style.display = 'block';

                        passwordField.style.display = 'none';
                        passwordLabel.style.display = 'none';
                        loginButton.style.display = 'none';
                        registerButton.style.display='block';
                        registerCard.style.display= 'block';

                    }
                })
                .catch(error => {
                    loaderIcon.style.display = 'none';
                    console.error('Error checking username:', error);
                })
                .finally(() => {
                    // Hide loader icon after the API call is complete
                    loaderIcon.style.display = 'none';
                });
        }, bufferTimerDuration);

        // Clear the buffer timer if the user starts typing again during the buffer period
        usernameInput.addEventListener('input', () => {
            clearTimeout(bufferTimer);
        });
    }
    document.addEventListener('DOMContentLoaded', function () {
        // Call your function here
        checkUsername();
        document.getElementById('loaderIcon').style.display = 'none';
    });
</script>
</body>
<div th:replace="layouts/footerLayout"></div>
</html>


