document.addEventListener('DOMContentLoaded', function() {
    const loginForm = document.getElementById('loginForm');
    const errorMessage = document.getElementById('error-message');
    const submitButton = loginForm.querySelector('button[type="submit"]');

    if (loginForm) {
        loginForm.addEventListener('submit', function(e) {
            const role = document.getElementById('role').value;
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();

            // Reset error message
            errorMessage.style.display = 'none';
            errorMessage.textContent = '';

            // Validation
            if (!role) {
                e.preventDefault();
                errorMessage.textContent = 'Please select your role.';
                errorMessage.style.display = 'block';
                return;
            }
            if (!username) {
                e.preventDefault();
                errorMessage.textContent = 'Please enter your User ID / Email.';
                errorMessage.style.display = 'block';
                return;
            }
            if (!password) {
                e.preventDefault();
                errorMessage.textContent = 'Please enter your password.';
                errorMessage.style.display = 'block';
                return;
            }

            // If validation passes, provide user feedback
            if (submitButton) {
                submitButton.textContent = 'Logging in...';
                submitButton.disabled = true;
            }
            
            console.log('Form submitted with:', { role, username });
        });
    }
});