function iafwzcai_showErrorDetails(errorLogID) {

    
    jQuery.ajax({
        url: iafwzcai_error_log.ajax_url, // WordPress AJAX URL
        type: 'POST',
        data: {
            action: 'IAFWZCAI_Error_Log_show_action', // Action name registered in PHP
            log_id: errorLogID, // Data to send to PHP
            security: iafwzcai_error_log.error_log_nonce  // Send nonce for security
        },
        success: function(response) {
            if (response.success) {
                const details = response.data.details;

                // Build the HTML content dynamically
                let content = `<h3>Error Log Details</h3>
                               <table class="iafwzcai-error-table">
                                   <tr>
                                       <th>Integration Name</th>
                                       <td>${details.integration_name || 'N/A'}</td>
                                   </tr>
                                   <tr>
                                       <th>Error Type</th>
                                       <td>${details.error_type || 'N/A'}</td>
                                   </tr>
                                   <tr>
                                       <th>Retry Count</th>
                                       <td>${details.retry_count || 'N/A'}</td>
                                   </tr>
                                   <tr>
                                       <th>Created At</th>
                                       <td>${details.created_at || 'N/A'}</td>
                                   </tr>
                                   <tr>
                                       <th>Updated At</th>
                                       <td>${details.updated_at || 'N/A'}</td>
                                   </tr>
                               </table>`;

                content += `<h4>Form Data</h4>
                            <table class="iafwzcai-error-table">`;
                for (const [key, value] of Object.entries(details.form_data || {})) {
                    content += `<tr>
                                    <th>${key}</th>
                                    <td>${value}</td>
                                </tr>`;
                }
                content += `</table>`;

                content += `<h4>Response</h4>
                            <table class="iafwzcai-error-table">`;
                            const apiResponse = details.api_response || {};
                
                            if (apiResponse.status) {
                                for (const [key, value] of Object.entries(apiResponse)) {
                                    if (typeof value === 'object' && value !== null) {
                                        content += `<tr><th>${key}</th><td><ul>`;
                                        for (const [subKey, subValue] of Object.entries(value)) {
                                            content += `<li><strong>${subKey}:</strong> ${subValue}</li>`;
                                        }
                                        content += `</ul></td></tr>`;
                                    } else {
                                        content += `<tr><th>${key}</th><td>${value}</td></tr>`;
                                    }
                                }
                            } else {
                                content += `<tr><td colspan="2">No API response details available.</td></tr>`;
                            }
                content += `</table>`;

                // Append the content to the modal
                const overlay = document.getElementById('iafwzcai-error-overlay');
                const contentDiv = document.getElementById('iafwzcai-error-content');
                contentDiv.innerHTML = content;

                // Make the overlay visible
                overlay.style.visibility = 'visible';
                overlay.style.opacity = '1';
            } else {
                alert('Failed to fetch error log details: ' + response.data.message);
            }
        },
        error: function(xhr, status, error) {
            alert('An error occurred while fetching error log details.');
        }
    });
}


function iafwzcai_closeErrorOverlay() {
    const overlay = document.getElementById('iafwzcai-error-overlay');
    if (overlay) {
        overlay.style.visibility = 'hidden';
        overlay.style.opacity = '0';
    }
}
