<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BIS Campaign | Sign in</title>
    <link rel="stylesheet" href="public/css/bis-login.css">
</head>
<body>
    <div class="login-card">
        <img
            src="public/images/bis-research-logo.png"
            alt="BIS Research"
            class="login-logo"
            onerror="this.onerror=null;this.src='https://bisresearch.com/img/logo.png';"
        >

        <h1 class="login-title">BIS Campaign</h1>
        <p class="login-subtitle">Sign in to continue</p>

        <form id="formlogin" name="frmlogin" method="post" autocomplete="on">
            <input type="hidden" name="action" value="Login_Flow">
            <input type="hidden" name="output">
            <input type="hidden" id="companyID" name="companyID" value="2224">

            <div class="login-field">
                <label for="loginID">Email</label>
                <input type="email" id="loginID" name="loginID" placeholder="you@company.com" required autofocus>
            </div>

            <div class="login-field">
                <label for="password">Password</label>
                <div class="password-wrap">
                    <input type="password" id="password" name="passID" placeholder="Enter your password" required>
                    <button type="button" class="toggle-password" id="togglePassword" aria-label="Show password">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path>
                            <circle cx="12" cy="12" r="3"></circle>
                        </svg>
                    </button>
                </div>
            </div>

            <p class="login-error errormsglogin"></p>

            <button type="submit" class="login-submit" id="loginBtn">Sign in</button>
        </form>

        <p class="login-footer">&copy; <?= date('Y') ?> BIS Research</p>
    </div>

    <script src="public/js/jquery-1.10.2.min.js"></script>
    <script src="public/js/md5.js"></script>
    <script src="public/js/sha1.js"></script>
    <script>
    (function () {
        var form = document.getElementById('formlogin');
        var passwordInput = document.getElementById('password');
        var loginBtn = document.getElementById('loginBtn');

        document.getElementById('togglePassword').addEventListener('click', function () {
            var isHidden = passwordInput.type === 'password';
            passwordInput.type = isHidden ? 'text' : 'password';
        });

        $(form).on('submit', function (e) {
            e.preventDefault();
            $('.errormsglogin').text('');

            if (!form.loginID.value.trim()) {
                $('.errormsglogin').text('Please enter your email.');
                form.loginID.focus();
                return;
            }
            if (!form.passID.value) {
                $('.errormsglogin').text('Please enter your password.');
                form.passID.focus();
                return;
            }

            form.output.value = hex_md5(sha1(hex_md5(form.passID.value)));
            loginBtn.disabled = true;
            loginBtn.textContent = 'Signing in…';

            $.ajax({
                url: 'function/login_flow.php',
                type: 'POST',
                data: $(form).serialize(),
                dataType: 'json',
                success: function (response) {
                    if (response.status) {
                        window.location.href = response.redirect;
                    } else {
                        $('.errormsglogin').text(response.message || 'Sign in failed.');
                        loginBtn.disabled = false;
                        loginBtn.textContent = 'Sign in';
                    }
                },
                error: function (xhr) {
                    var message = 'Unable to sign in. Please try again.';
                    if (xhr.responseText) {
                        try {
                            var err = JSON.parse(xhr.responseText);
                            if (err.message) {
                                message = err.message;
                            }
                        } catch (e) {
                            if (/parse error|syntax error|fatal error/i.test(xhr.responseText)) {
                                message = 'Server error during sign in. Please contact support.';
                            }
                        }
                    }
                    $('.errormsglogin').text(message);
                    loginBtn.disabled = false;
                    loginBtn.textContent = 'Sign in';
                }
            });
        });
    })();
    </script>
</body>
</html>
