document.addEventListener('DOMContentLoaded', function () {
    const callButton = document.getElementById('call-btn');
    const putButton = document.getElementById('put-btn');

    function handleTradeAction(action) {
        // Disable buttons
        callButton.disabled = true;
        putButton.disabled = true;

        // Show toast notification
        const asset = document.querySelector('.info-value').textContent;
        showToast(`${action.toUpperCase()} trade placed for ${asset}.`);

        // Re-enable buttons after a delay (e.g., 1 minute for expiry)
        setTimeout(() => {
            callButton.disabled = false;
            putButton.disabled = false;
        }, 5000); // 5 second demo timeout
    }

    callButton.addEventListener('click', () => handleTradeAction('call'));
    putButton.addEventListener('click', () => handleTradeAction('put'));
});

function showToast(message) {
    const toastContainer = document.getElementById('toast-container');
    const toast = document.createElement('div');
    toast.className = 'toast show';
    toast.setAttribute('role', 'alert');
    toast.setAttribute('aria-live', 'assertive');
    toast.setAttribute('aria-atomic', 'true');

    toast.innerHTML = `
        <div class="toast-header">
            <strong class="me-auto">Trade Alert</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            ${message}
        </div>
    `;

    toastContainer.appendChild(toast);

    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();

    toast.addEventListener('hidden.bs.toast', () => {
        toast.remove();
    });
}