document.addEventListener('DOMContentLoaded', function() {
    const buyButtons = document.querySelectorAll('.buy-btn');
    const sellButtons = document.querySelectorAll('.sell-btn');
    
    buyButtons.forEach(button => {
        button.addEventListener('click', function() {
            const card = this.closest('.paper-card');
            showNotification(card, 'success', 'Purchase Successful', 'Your paper order has been placed successfully!');
        });
    });
    
    sellButtons.forEach(button => {
        button.addEventListener('click', function() {
            const card = this.closest('.paper-card');
            showNotification(card, 'error', 'Sell Request Failed', 'Minimum sell quantity not met. Please try again.');
        });
    });
    
    function showNotification(card, type, title, message) {
        const notification = card.querySelector('.notification');
        const successIcon = card.querySelector('.success-icon');
        const errorIcon = card.querySelector('.error-icon');
        const notificationTitle = card.querySelector('.notification-title');
        const notificationMessage = card.querySelector('.notification-message');
        
        // Set notification content
        notificationTitle.textContent = title;
        notificationMessage.textContent = message;
        
        // Show appropriate icon
        if (type === 'success') {
            successIcon.classList.remove('hidden');
            errorIcon.classList.add('hidden');
        } else {
            successIcon.classList.add('hidden');
            errorIcon.classList.remove('hidden');
        }
        
        // Show notification
        notification.classList.remove('hidden');
        // Add close button event
        const closeBtn = card.querySelector('.close-notification');
        closeBtn.addEventListener('click', () => {
            notification.classList.add('hide');
            setTimeout(() => {
                notification.classList.add('hidden');
                notification.classList.remove('hide');
            }, 300);
        });
}
});