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

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, height=device-height, initial-scale=0.8, maximum-scale=0.9, user-scalable=no">
    <title data-i18n="loginTitle">User Login</title>
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-title" content="ESLogix" />
    <link rel="manifest" href="/site.webmanifest" />
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <link href="./css/global.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/login.css">
    <script src="./js/language.js"></script>
</head>

<body>
    <div class="background">
        <div class="shape"></div>
        <div class="shape"></div>
    </div>
    <form action="/login" method="post" enctype="application/x-www-form-urlencoded">
        <h3><img src="./assets/logo.png" alt="Logo" width="250"></h3>
        <h4 data-i18n="loginTitleBody">Escape Room Management</h4>
        <h5 id="systemName"></h5>
        <label data-i18n="username" for="username">Username</label>
        <input data-i18n="usernamePlace" type="text" name="username" placeholder="Enter User Name" id="username"
            required>
        <label data-i18n="password" for="password">Password</label>
        <input data-i18n="passwordPlace" type="password" name="password" placeholder="Enter Password" id="password"
            required>
        <button data-i18n="loginBTN" type="submit">Login</button>
    </form>
    <div class="fingerprint-login">
        <div class="social"></div>
        <div class="response"></div>
    </div>
    <script>
        loadSettings();
        document.querySelector('form').addEventListener('submit', async (event) => {
            event.preventDefault();

            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;

            const responseDiv = document.querySelector('.response');
            responseDiv.innerHTML = '';

            try {
                const response = await fetch('/login', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ username, password }),
                });

                const result = await response.json();

                if (result.success) {
                    responseDiv.innerHTML = `<p class="text-success">${result.message}</p>`;
                    window.location.href = '/index.html';
                } else {
                    responseDiv.innerHTML = `<p class="text-danger">${result.message}</p>`;
                }
            } catch (error) {
                console.error('Error during login:', error);
                responseDiv.innerHTML = `<p class="text-danger">Server error, please try again later.</p>`;
            }
        });

        function loadSettings() {
            fetch('/api/settings')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('systemName').innerText = data.systemName || 'Default System Name';
                })
                .catch(error => console.error('Error loading settings:', error));
        }
    </script>
</body>

</html>