function iafwzcEscapeHtml(str) {
    if (str == null) return '';
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

function iafwzc_showErrorDetails(errorLogID) {


    jQuery.ajax({
        url: iafwzc_error_log.ajax_url, // WordPress AJAX URL
        type: 'POST',
        data: {
            action: 'IAFWZC_Error_Log_show_action', // Action name registered in PHP
            log_id: errorLogID, // Data to send to PHP
            security: iafwzc_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="iafwzc-error-table">
                                   <tr>
                                       <th>Integration Name</th>
                                       <td>${iafwzcEscapeHtml(details.integration_name) || 'N/A'}</td>
                                   </tr>
                                   <tr>
                                       <th>Error Type</th>
                                       <td>${iafwzcEscapeHtml(details.error_type) || 'N/A'}</td>
                                   </tr>
                                   <tr>
                                       <th>Retry Count</th>
                                       <td>${iafwzcEscapeHtml(details.retry_count) || 'N/A'}</td>
                                   </tr>
                                   <tr>
                                       <th>Created At</th>
                                       <td>${iafwzcEscapeHtml(details.created_at) || 'N/A'}</td>
                                   </tr>
                                   <tr>
                                       <th>Updated At</th>
                                       <td>${iafwzcEscapeHtml(details.updated_at) || 'N/A'}</td>
                                   </tr>
                               </table>`;

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

                content += `<h4>Response</h4>
                            <table class="iafwzc-error-table">`;
                const apiResponse = details.api_response?.data?.[0];
                if (apiResponse) {
                    content += `<tr>
                                    <th>Status</th>
                                    <td>${iafwzcEscapeHtml(apiResponse.status) || 'N/A'}</td>
                                </tr>
                                <tr>
                                    <th>Message</th>
                                    <td>${iafwzcEscapeHtml(apiResponse.message) || 'N/A'}</td>
                                </tr>
                                <tr>
                                    <th>Code</th>
                                    <td>${iafwzcEscapeHtml(apiResponse.code) || 'N/A'}</td>
                                </tr>`;
                    for (const [key, value] of Object.entries(apiResponse.details || {})) {
                        content += `<tr>
                                        <th>${iafwzcEscapeHtml(key)}</th>
                                        <td>${iafwzcEscapeHtml(value)}</td>
                                    </tr>`;
                    }
                }
                content += `</table>`;

                // Append the content to the modal
                const overlay = document.getElementById('iafwzc-error-overlay');
                const contentDiv = document.getElementById('iafwzc-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 iafwzc_closeErrorOverlay() {
    const overlay = document.getElementById('iafwzc-error-overlay');
    if (overlay) {
        overlay.style.visibility = 'hidden';
        overlay.style.opacity = '0';
    }
}
