document.addEventListener('DOMContentLoaded', function() {
    const selectAllCheckbox = document.getElementById('select_all');
    const userCheckboxes = document.querySelectorAll('.user_checkbox');
    const deleteIcon = document.getElementById('bulk_delete_btn');
    const confirmationPopup = document.getElementById('confirmation_popup');
    const confirmYes = document.getElementById('confirm_yes');
    const confirmNo = document.getElementById('confirm_no');

    // Show and select all user checkboxes when "Select All" is clicked
    selectAllCheckbox.addEventListener('change', function() {
        if (selectAllCheckbox.checked) {
            userCheckboxes.forEach(checkbox => {
                checkbox.style.display = 'block'; // Show checkboxes
                checkbox.checked = true; // Select all checkboxes
            });
            deleteIcon.style.display = 'block'; // Show the delete button
        } else {
            userCheckboxes.forEach(checkbox => {
                checkbox.style.display = 'none'; // Hide checkboxes
                checkbox.checked = false; // Uncheck if hidden
            });
            deleteIcon.style.display = 'none'; // Hide the delete button
        }
    });

    // Maintain visibility of delete button if any user checkbox is checked
    userCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            if (Array.from(userCheckboxes).some(checkbox => checkbox.checked)) {
                deleteIcon.style.display = 'block'; // Show the delete button
            } else {
                deleteIcon.style.display = 'none'; // Hide the delete button if no checkboxes are checked
            }

            // Uncheck "Select All" if any individual checkbox is unchecked
            if (!checkbox.checked) {
                selectAllCheckbox.checked = false;
            }
        });
    });

    // Show confirmation popup when delete icon is clicked
    deleteIcon.addEventListener('click', function() {
        confirmationPopup.style.display = 'flex'; // Show the popup
    });

    // Handle confirmation
    confirmYes.addEventListener('click', function() {
        const selectedUsers = Array.from(userCheckboxes)
            .filter(checkbox => checkbox.checked)
            .map(checkbox => checkbox.getAttribute('data-pid'));

        if (selectedUsers.length > 0) {
            // Create and submit form for bulk delete
            const deleteForm = document.createElement('form');
            deleteForm.action = '../user/bulk_delete.php'; // Update with your actual path
            deleteForm.method = 'POST';

            const pidsInputField = document.createElement('input');
            pidsInputField.type = 'hidden';
            pidsInputField.name = 'pids'; // Use an array in PHP
            pidsInputField.value = JSON.stringify(selectedUsers); // Send PIDs as a JSON array
            deleteForm.appendChild(pidsInputField);

            document.body.appendChild(deleteForm);
            deleteForm.submit();
        }

        confirmationPopup.style.display = 'none'; // Hide the popup
    });

    confirmNo.addEventListener('click', function() {
        confirmationPopup.style.display = 'none'; // Hide the popup and return to user list page
        window.location.href = 'userlist.php'; // Redirect to user list page
    });
});