document.addEventListener('DOMContentLoaded', () => {
    const preloader = document.querySelector('.preloader');
    const submitButton = document.getElementById('submitButton');
    const forgotForm = document.getElementById('forgotForm');
    const emailField = document.getElementById('email');
    const emailErrorRequired = document.getElementById('emailErrorRequired');
    const emailErrorInvalid = document.getElementById('emailErrorInvalid');
    const emailPattern = /(?=.*[\W_0-9])/;

    if (submitButton) {
        // Event listener untuk tombol SEND
        submitButton.addEventListener('click', (event) => {
            const emailValue = emailField.value.trim();
            let isValid = true;

            // Reset error states
            emailErrorRequired.style.display = 'none';
            emailErrorInvalid.style.display = 'none';
            emailField.style.border = '1px solid red';

            // Validasi email
            if (!emailValue) {
                emailErrorRequired.style.display = 'block';
                isValid = false;
            } else if (!emailPattern.test(emailValue)) {
                emailErrorInvalid.style.display = 'block';
                isValid = false;
            } else {
                emailField.style.border = '1px solid blue';
            }

            if (!isValid) {
                // Jika validasi gagal, cegah pengiriman form dan tampilkan error
                event.preventDefault();
            } else {
                // Jika validasi berhasil, tampilkan preloader
                if (preloader) preloader.style.display = 'flex';
            }
        });
    }

    if (forgotForm) {
        forgotForm.addEventListener('submit', (event) => {
            const emailValue = emailField.value.trim();
            let isValid = true;

            // Reset error states
            emailErrorRequired.style.display = 'none';
            emailErrorInvalid.style.display = 'none';
            emailField.style.border = '1px solid red';

            if (!emailValue) {
                emailErrorRequired.style.display = 'block';
                isValid = false;
            } else if (!emailPattern.test(emailValue)) {
                emailErrorInvalid.style.display = 'block';
                isValid = false;
            } else {
                emailField.style.border = '1px solid blue';
            }

            if (!isValid) {
                // Jika validasi gagal, cegah pengiriman form
                event.preventDefault();
            }
        });
    }

    if (emailField) {
        emailField.addEventListener('input', () => {
            const emailValue = emailField.value.trim();

            emailErrorRequired.style.display = 'none';
            emailErrorInvalid.style.display = 'none';
            emailField.style.border = '1px solid red';

            if (!emailValue) {
                emailErrorRequired.style.display = 'block';
            } else if (!emailPattern.test(emailValue)) {
                emailErrorInvalid.style.display = 'block';
            } else {
                emailField.style.border = '1px solid blue';
            }
        });
    }

    // Pastikan preloader menghilang jika halaman selesai dimuat
    window.addEventListener('load', () => {
        if (preloader) preloader.style.display = 'none';
    });
});