document.addEventListener('DOMContentLoaded', function () {
    const sendButton = document.getElementById('sendMessage');
    const toastContainer = document.querySelector('.toast-container');

    if (sendButton) {
        sendButton.addEventListener('click', function (e) {
            e.preventDefault();

            const toastHTML = `
            <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000">
              <div class="toast-header">
                <strong class="me-auto">Whop Messenger</strong>
                <small>Just now</small>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
              </div>
              <div class="toast-body">
                Message sent successfully!
              </div>
            </div>
            `;

            toastContainer.innerHTML = toastHTML;

            const toast = new bootstrap.Toast(toastContainer.querySelector('.toast'));
            toast.show();
        });
    }

    const selectAllCheckbox = document.getElementById('selectAll');
    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            const memberCheckboxes = document.querySelectorAll('.member-checkbox');
            memberCheckboxes.forEach(checkbox => {
                checkbox.checked = this.checked;
            });
        });
    }
});