const loginForm = document.getElementById('login-form');
        const useridInput = document.getElementById('userid');
        const passwordInput = document.getElementById('password');
        const errorMessageDiv = document.getElementById('login-error-message');
        const successMessageDiv = document.getElementById('login-success-message');
        const submitButton = loginForm.querySelector('.login-submit-btn');

        const togglePassword = document.querySelector('.toggle-password');
        if (togglePassword && passwordInput) {
            togglePassword.addEventListener('click', function () {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                const icon = this.querySelector('i');
                icon.classList.toggle('fa-eye');
                icon.classList.toggle('fa-eye-slash');
            });
        }

        document.getElementById('current-year').textContent = new Date().getFullYear();

        if (loginForm) {
            loginForm.addEventListener('submit', function(e) {
                e.preventDefault();

                const userid = useridInput.value.trim();
                const password = passwordInput.value;

                if (!userid || !password) {
                    errorMessageDiv.textContent = 'User ID dan password tidak boleh kosong.';
                    errorMessageDiv.style.display = 'flex';
                    successMessageDiv.style.display = 'none';
                    return;
                }
                
                submitButton.disabled = true;
                submitButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sedang memproses...';
                errorMessageDiv.style.display = 'none';
                successMessageDiv.style.display = 'none';

                const formData = new FormData();
                formData.append('userid', userid);
                formData.append('password', password);

                fetch('api/user_login', {
                    method: 'POST',
                    body: formData
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().catch(() => {
                            throw new Error(`Error ${response.status}: ${response.statusText}`);
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.status === 'success') {
                        successMessageDiv.textContent = data.message || 'Login berhasil!';
                        successMessageDiv.style.display = 'flex';
                        errorMessageDiv.style.display = 'none';

                        setTimeout(() => {
                            window.location.href = 'dashboard/';
                        }, 1500);
                    } else {
                        errorMessageDiv.textContent = data.message || 'Terjadi kesalahan saat login.';
                        errorMessageDiv.style.display = 'flex';
                        successMessageDiv.style.display = 'none';
                        submitButton.disabled = false;
                        submitButton.innerHTML = '<i class="fas fa-sign-in-alt"></i> Login';
                    }
                })
                .catch(error => {
                    console.error('Login Fetch Error:', error);
                    errorMessageDiv.textContent = error.message || 'Tidak dapat terhubung ke server. Coba lagi nanti.';
                    errorMessageDiv.style.display = 'flex';
                    successMessageDiv.style.display = 'none';
                    submitButton.disabled = false;
                    submitButton.innerHTML = '<i class="fas fa-sign-in-alt"></i> Login';
                });
            });
        }