//registration.php
<script>

// Email and Checkbox validation
document.addEventListener('DOMContentLoaded', () => {
    // Elements for email validation
    const email1 = document.getElementById('email1');
    const email2 = document.getElementById('email2');
    const emailMatchStatus = document.getElementById('emailMatchStatus');

    // Elements for username validation
    const username = document.getElementById('username');
    const usernameStatus = document.getElementById('usernameStatus');

    // Elements for checkbox validation
    const consentProcess = document.getElementById('consent_process');
    const consentContact = document.getElementById('consent_contact');
    const agreeTerms = document.getElementById('agree_terms');

    // Validate email match on both inputs
    const validateEmailMatch = () => {
        if (email1.value === email2.value && email1.value !== '') {
            emailMatchStatus.textContent = 'Email addresses match.';
            emailMatchStatus.className = 'match-status match';
        } else {
            emailMatchStatus.textContent = 'Email addresses do not match.';
            emailMatchStatus.className = 'match-status no-match';
        }
    };

    // Validate checkboxes
    const validateCheckboxes = (e) => {
        let isValid = true;
        const errorMessages = [];

        if (!consentProcess.checked) {
            isValid = false;
            errorMessages.push("You must consent to process data.");
        }
        if (!consentContact.checked) {
            isValid = false;
            errorMessages.push("You must consent to be contacted.");
        }
        if (!agreeTerms.checked) {
            isValid = false;
            errorMessages.push("You must agree to the terms and conditions.");
        }

        if (!isValid) {
            e.preventDefault();
            alert(errorMessages.join("\n"));
        }
    };

    // Add input event listeners for real-time validation
    email1.addEventListener('input', validateEmailMatch);
    email2.addEventListener('input', validateEmailMatch);
    username.addEventListener('input', checkUsernameAvailability);

    // Add form submission validation
    const form = document.getElementById('signupForm');
    form.addEventListener('submit', (e) => {
        // Validate emails
        if (email1.value !== email2.value) {
            e.preventDefault();
            alert('Email addresses do not match!');
        }

        // Validate username
        if (usernameStatus && usernameStatus.classList.contains('no-match')) {
            e.preventDefault();
            alert('Please choose a different username.');
        }

        // Validate checkboxes
        validateCheckboxes(e);
    });
});


// Password Generation and Validation
document.addEventListener('DOMContentLoaded', () => {
    // Elements for password validation
    const password1 = document.getElementById('password1');
    const password2 = document.getElementById('password2');
    const passwordMatchStatus = document.getElementById('passwordMatchStatus');
    const generatePasswordBtn = document.getElementById('generatePassword');

    // Regex for password validation
    const passwordRegex = /^(?=.*[A-Z])(?=.*\d)(?=.*[!?\&%\$_\-:])[A-Za-z\d!?\&%\$_\-:]{6,}$/;

    // Generate a random password meeting the criteria
    const generatePassword = () => {
        const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        const numbers = '0123456789';
        const special = '!&?%$_-:';

        let password = '';

        // Ensure at least one character from each group
        password += chars[Math.floor(Math.random() * 26)].toUpperCase(); // One uppercase letter
        password += numbers[Math.floor(Math.random() * numbers.length)]; // One number
        password += special[Math.floor(Math.random() * special.length)]; // One special character
        password += chars[Math.floor(Math.random() * chars.length)]; // One lowercase letter

        // Fill the remaining characters with random valid characters
        const allChars = chars + numbers + special;
        for (let i = 4; i < 8; i++) {
            password += allChars[Math.floor(Math.random() * allChars.length)];
        }

        // Shuffle the password to randomise character positions
        password = password.split('').sort(() => 0.5 - Math.random()).join('');
        return password;
    };

    // Insert generated password into both fields and make them visible
    const populatePasswordFields = () => {
        const newPassword = generatePassword();
        password1.value = newPassword;
        password2.value = newPassword;

        // Make the passwords visible
        password1.type = 'text';
        password2.type = 'text';

        // Update the password match status
        validatePasswordMatch();
    };

    // Validate password match and complexity
    const validatePasswordMatch = () => {
        const pass1 = password1.value;
        const pass2 = password2.value;

        if (!passwordRegex.test(pass1)) {
            passwordMatchStatus.textContent = 'Password must have at least 6 characters, 1 uppercase, 1 number, and 1 special character (! ? & % $ _ - :).';
            passwordMatchStatus.className = 'match-status no-match';
            return;
        }

        if (pass1 === pass2 && pass1 !== '') {
            passwordMatchStatus.textContent = 'Passwords match.';
            passwordMatchStatus.className = 'match-status match';
        } else {
            passwordMatchStatus.textContent = 'Passwords do not match.';
            passwordMatchStatus.className = 'match-status no-match';
        }
    };

    // Add event listener to the generate password button
    generatePasswordBtn.addEventListener('click', populatePasswordFields);

    // Add input event listeners for real-time validation
    password1.addEventListener('input', validatePasswordMatch);
    password2.addEventListener('input', validatePasswordMatch);
});


document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('signupForm');

    form.addEventListener('submit', (e) => {
        let isValid = true;

        // Select all input, select, and textarea fields with the "required" attribute
        const requiredFields = form.querySelectorAll('input[required], select[required], textarea[required]');

        // Loop through all required fields for validation
        requiredFields.forEach(field => {
            const errorTextId = `${field.id}-error`;
            let errorElement = document.getElementById(errorTextId);

            // Clear previous errors
            field.style.borderColor = '';
            if (errorElement) {
                errorElement.remove();
            }

            // Check if the field is empty
            if (!field.value.trim()) {
                isValid = false;

                // Highlight the border in red
                field.style.borderColor = 'red';

                // Add error message below the field
                errorElement = document.createElement('div');
                errorElement.id = errorTextId;
                errorElement.className = 'text-danger mt-1';
                errorElement.textContent = 'This field is required.';
                field.parentElement.appendChild(errorElement); // Add message after parent element
            }
        });

        // Prevent form submission if validation fails
        if (!isValid) {
            e.preventDefault();
            alert('Please complete all required fields.');
        }
    });
});

</script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const username = document.getElementById('username');
        const usernameStatus = document.getElementById('usernameStatus');
        let debounceTimeout; // For debounce functionality

        // Reserved words and invalid usernames
        const reservedWords = ['admin', 'root', 'superuser'];
        const invalidCharacters = /[^a-zA-Z0-9._-]/; // Regex for invalid characters

        // Profanity list (add more as needed)
        const profanities = [
            'cunt', 'fuck', 'nigger', 'queer', 'refugee',
            'palestine', 'israel', 'jew', 'bastard', 'bitch', 'twat', 'knacker' // Replace with real profanities
        ];

        const checkUsernameAvailability = () => {
            const usernameValue = username.value.trim();

            // Clear status if input is empty
            if (usernameValue.length === 0) {
                usernameStatus.textContent = '';
                usernameStatus.className = 'match-status';
                return;
            }

            // Check for minimum character length
            if (usernameValue.length < 5) {
                usernameStatus.textContent = 'Username must be at least 5 characters.';
                usernameStatus.className = 'match-status no-match';
                return;
            }

            // Check for invalid characters
            if (invalidCharacters.test(usernameValue)) {
                usernameStatus.textContent = 'Username contains invalid characters. Only letters, numbers, ".", "_", and "-" are allowed.';
                usernameStatus.className = 'match-status no-match';
                return;
            }

            // Check for reserved words
            if (reservedWords.includes(usernameValue.toLowerCase())) {
                usernameStatus.textContent = 'This username is reserved. Please choose another.';
                usernameStatus.className = 'match-status no-match';
                return;
            }

            // Check for profanities
            if (profanities.some((word) => usernameValue.toLowerCase().includes(word))) {
                usernameStatus.textContent = 'This username contains inappropriate language.';
                usernameStatus.className = 'match-status no-match';
                return;
            }

            // Make AJAX request to check_username.php
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'check_username.php', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onload = () => {
                if (xhr.status === 200) {
                    try {
                        const response = JSON.parse(xhr.responseText);
                        if (response.status === 'available') {
                            usernameStatus.textContent = 'Username is available.';
                            usernameStatus.className = 'match-status match';
                        } else if (response.status === 'taken') {
                            usernameStatus.textContent = 'Username is already taken.';
                            usernameStatus.className = 'match-status no-match';
                        } else {
                            usernameStatus.textContent = 'Error checking username.';
                            usernameStatus.className = 'match-status no-match';
                        }
                    } catch (error) {
                        console.error('Error parsing JSON:', error);
                        usernameStatus.textContent = 'Error checking username.';
                        usernameStatus.className = 'match-status no-match';
                    }
                } else {
                    usernameStatus.textContent = 'Server error. Please try again later.';
                    usernameStatus.className = 'match-status no-match';
                }
            };

            xhr.onerror = () => {
                console.error('AJAX error occurred.');
                usernameStatus.textContent = 'Network error. Please check your connection.';
                usernameStatus.className = 'match-status no-match';
            };

            xhr.send('username=' + encodeURIComponent(usernameValue));
        };

        const debounceCheck = () => {
            clearTimeout(debounceTimeout);
            debounceTimeout = setTimeout(checkUsernameAvailability, 300);
        };

        // Attach debounced event listener to the username input
        username.addEventListener('input', debounceCheck);
    });
</script>