function showErrorDetails(errorLogID) {

    
    jQuery.ajax({
        url: integrazo_fwcrm_form_error_log.ajax_url, // WordPress AJAX URL
        type: 'POST',
        data: {
            action: 'integrazo_fwcrm_form_errorlog_show_action', // Action name registered in PHP
            log_id: errorLogID, // Data to send to PHP
            security: integrazo_fwcrm_form_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="integrazo_fwcrm_form-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="integrazo_fwcrm_form-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="integrazo_fwcrm_form-error-table">`;
                const apiResponse = details.api_response?.data?.[0];
                if (apiResponse) {
                    content += `<tr>
                    <th>Status</th>
                    <td>${apiResponse.status || 'N/A'}</td>
                </tr>
                <tr>
                    <th>Code</th>
                    <td>${apiResponse.code || 'N/A'}</td>
                </tr>`;
    
    // Check for 'api_response' and extract only the 'message' array
    if (apiResponse.api_response && Array.isArray(apiResponse.api_response.errors?.message)) {
        apiResponse.api_response.errors.message.forEach((message, index) => {
            // Avoiding nested error details, only top-level messages
            if (!message.includes('Mcr error')) {
                content += `<tr>
                                <th>Message ${index + 1}</th>
                                <td>${message}</td>
                            </tr>`;
            }
        });
    }
    
                }
                content += `</table>`;

                // Append the content to the modal
                const overlay = document.getElementById('integrazo_fwcrm_form-error-overlay');
                const contentDiv = document.getElementById('integrazo_fwcrm_form-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) {
            console.error('AJAX error:', status, error);
            alert('An error occurred while fetching error log details.');
        }
    });
}


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