<?php
/**
 * Stablezact Admin Transactions Page Template
 */

if (!defined('ABSPATH')) {
    exit;
}

// Check if API is configured
$stablezact_is_configured = !empty($this->gateway_settings['public_key']);
?>


<div class="wrap stablezact-admin">
    <div class="stablezact-header">
        <div class="stablezact-header-content">
            <h1><?php esc_html_e('Transaction Management', 'stablezact-crypto-payments'); ?></h1>
            <p><?php esc_html_e('View and manage all cryptocurrency transactions for your store', 'stablezact-crypto-payments'); ?></p>
        </div>
    </div>

    <?php if (!$stablezact_is_configured): ?>
    <div class="notice notice-warning">
        <p>
            <strong><?php esc_html_e('Setup Required', 'stablezact-crypto-payments'); ?></strong><br>
            <?php
            printf(
                /* translators: %s: link to settings page */
                esc_html__('Please configure your Stablezact Public Key in the %s to view transactions.', 'stablezact-crypto-payments'),
                '<a href="' . esc_url(admin_url('admin.php?page=wc-settings&tab=checkout&section=stablezact')) . '">' . esc_html__('WooCommerce payment settings', 'stablezact-crypto-payments') . '</a>'
            );
            ?>
        </p>
    </div>
    <?php else: ?>

    <!-- Enhanced Filters -->
    <div class="stablezact-filters">
        <!-- Active Filters Display -->
        <div class="active-filters" id="active-filters-container" style="display: none;">
            <!-- Active filter chips will be populated by JavaScript -->
        </div>

        <div class="filter-section">
            <div class="filter-container">
                <div class="filter-grid">
                    <!-- Status Filter -->
                    <div class="filter-group" data-filter="status">
                        <label for="status-filter"><?php esc_html_e('Status', 'stablezact-crypto-payments'); ?></label>
                        <select id="status-filter" class="filter-input">
                            <option value=""><?php esc_html_e('All Statuses', 'stablezact-crypto-payments'); ?></option>
                            <option value="pending"><?php esc_html_e('Pending', 'stablezact-crypto-payments'); ?></option>
                            <option value="processing"><?php esc_html_e('Processing', 'stablezact-crypto-payments'); ?></option>
                            <option value="completed"><?php esc_html_e('Completed', 'stablezact-crypto-payments'); ?></option>
                            <option value="failed"><?php esc_html_e('Failed', 'stablezact-crypto-payments'); ?></option>
                        </select>
                    </div>

                    <!-- Currency Filter -->
                    <div class="filter-group" data-filter="currency">
                        <label for="currency-filter"><?php esc_html_e('Currency', 'stablezact-crypto-payments'); ?></label>
                        <select id="currency-filter" class="filter-input">
                            <option value=""><?php esc_html_e('All Currencies', 'stablezact-crypto-payments'); ?></option>
                            <option value="USDT">USDT</option>
                            <option value="USDC">USDC</option>
                            <option value="BNB">BNB</option>
                            <option value="ETH">ETH</option>
                            <option value="SOL">SOL</option>
                        </select>
                    </div>

                    <!-- Network Filter -->
                    <div class="filter-group" data-filter="network">
                        <label for="network-filter"><?php esc_html_e('Network', 'stablezact-crypto-payments'); ?></label>
                        <select id="network-filter" class="filter-input">
                            <option value=""><?php esc_html_e('All Networks', 'stablezact-crypto-payments'); ?></option>
                            <option value="ethereum">Ethereum</option>
                            <option value="bsc">BSC</option>
                            <option value="polygon">Polygon</option>
                            <option value="solana">Solana</option>
                        </select>
                    </div>

                    <!-- From Date Filter -->
                    <div class="filter-group" data-filter="date-from">
                        <label for="date-from"><?php esc_html_e('From Date', 'stablezact-crypto-payments'); ?></label>
                        <input type="date" id="date-from" class="filter-input">
                    </div>

                    <!-- To Date Filter -->
                    <div class="filter-group" data-filter="date-to">
                        <label for="date-to"><?php esc_html_e('To Date', 'stablezact-crypto-payments'); ?></label>
                        <input type="date" id="date-to" class="filter-input">
                    </div>
                </div>

                <!-- Filter Action Buttons -->
                <div class="filter-actions">
                    <button class="button button-primary" id="apply-filters" aria-label="<?php esc_attr_e('Apply selected filters to transactions', 'stablezact-crypto-payments'); ?>">
                        <span class="dashicons dashicons-filter" aria-hidden="true"></span>
                        <?php esc_html_e('Apply Filters', 'stablezact-crypto-payments'); ?>
                        <span class="filter-count" id="filter-count" style="display: none;" aria-live="polite">0</span>
                    </button>
                    <button class="button" id="clear-filters" aria-label="<?php esc_attr_e('Clear all filters', 'stablezact-crypto-payments'); ?>">
                        <span class="dashicons dashicons-dismiss" aria-hidden="true"></span>
                        <?php esc_html_e('Clear All', 'stablezact-crypto-payments'); ?>
                    </button>
                    <button class="button" id="export-transactions" aria-label="<?php esc_attr_e('Export transactions to CSV', 'stablezact-crypto-payments'); ?>">
                        <span class="dashicons dashicons-download" aria-hidden="true"></span>
                        <?php esc_html_e('Export', 'stablezact-crypto-payments'); ?>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Transactions Table -->
    <div class="stablezact-transactions-wrapper">
        <div class="table-nav">
            <div class="table-nav-left">
                <span class="transaction-count"><?php esc_html_e('Loading transactions...', 'stablezact-crypto-payments'); ?></span>
            </div>
            <div class="table-nav-right">
                <button class="button" id="refresh-transactions" aria-label="<?php esc_attr_e('Refresh transactions list', 'stablezact-crypto-payments'); ?>">
                    <span class="dashicons dashicons-update" aria-hidden="true"></span>
                    <?php esc_html_e('Refresh', 'stablezact-crypto-payments'); ?>
                </button>
            </div>
        </div>

        <table class="wp-list-table widefat fixed striped" id="transactions-table" aria-label="<?php esc_attr_e('Cryptocurrency transactions', 'stablezact-crypto-payments'); ?>">
            <thead>
                <tr>
                    <th class="check-column" scope="col">
                        <label for="select-all-transactions" class="screen-reader-text"><?php esc_html_e('Select all transactions', 'stablezact-crypto-payments'); ?></label>
                        <input type="checkbox" id="select-all-transactions">
                    </th>
                    <th scope="col"><?php esc_html_e('Payment ID', 'stablezact-crypto-payments'); ?></th>
                    <th scope="col"><?php esc_html_e('Amount', 'stablezact-crypto-payments'); ?></th>
                    <th scope="col"><?php esc_html_e('Currency', 'stablezact-crypto-payments'); ?></th>
                    <th scope="col"><?php esc_html_e('Network', 'stablezact-crypto-payments'); ?></th>
                    <th scope="col"><?php esc_html_e('Status', 'stablezact-crypto-payments'); ?></th>
                    <th scope="col"><?php esc_html_e('Transaction Hash', 'stablezact-crypto-payments'); ?></th>
                    <th scope="col"><?php esc_html_e('Date', 'stablezact-crypto-payments'); ?></th>
                    <th scope="col"><?php esc_html_e('Actions', 'stablezact-crypto-payments'); ?></th>
                </tr>
            </thead>
            <tbody id="transactions-tbody">
                <tr>
                    <td colspan="9" class="loading">
                        <div class="spinner is-active"></div>
                        <?php esc_html_e('Loading transactions...', 'stablezact-crypto-payments'); ?>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- Pagination -->
        <div class="tablenav bottom">
            <div class="alignleft actions">
                <label for="bulk-action" class="screen-reader-text"><?php esc_html_e('Select bulk action', 'stablezact-crypto-payments'); ?></label>
                <select id="bulk-action">
                    <option value=""><?php esc_html_e('Bulk Actions', 'stablezact-crypto-payments'); ?></option>
                    <option value="export"><?php esc_html_e('Export Selected', 'stablezact-crypto-payments'); ?></option>
                </select>
                <button class="button action" id="apply-bulk-action" aria-label="<?php esc_attr_e('Apply bulk action to selected transactions', 'stablezact-crypto-payments'); ?>">
                    <?php esc_html_e('Apply', 'stablezact-crypto-payments'); ?>
                </button>
            </div>
            <div class="tablenav-pages" id="pagination-container">
                <!-- Pagination will be populated by JavaScript -->
            </div>
        </div>
    </div>

    <?php endif; ?>
</div>

<!-- Transaction Details Modal -->
<div id="transaction-modal" class="coinley-modal" style="display: none;" role="dialog" aria-modal="true" aria-labelledby="transaction-modal-title">
    <div class="stablezact-modal-content large">
        <div class="stablezact-modal-header">
            <h3 id="transaction-modal-title"><?php esc_html_e('Transaction Details', 'stablezact-crypto-payments'); ?></h3>
            <button type="button" class="stablezact-modal-close" aria-label="<?php esc_attr_e('Close transaction details', 'stablezact-crypto-payments'); ?>">&times;</button>
        </div>
        <div class="stablezact-modal-body">
            <div class="loading"><?php esc_html_e('Loading transaction details...', 'stablezact-crypto-payments'); ?></div>
        </div>
    </div>
</div>

<?php
// Emit this page's script as an inline script on the enqueued admin handle
// (wp_enqueue policy) rather than a raw inline script; ob_start captures the
// rendered JS (including translated strings) unchanged.
ob_start();
?>
document.addEventListener('DOMContentLoaded', function() {
    let currentPage = 1;
    let currentFilters = {};
    let activeFilterCount = 0;

    // The filters/table UI only renders once the plugin is configured. On the
    // "Setup Required" screen these elements are absent, so bail out before binding
    // to them (avoids "Cannot read properties of null" on the transactions page).
    if (!document.getElementById('apply-filters')) {
        return;
    }

    // Initialize filter functionality
    initializeFilters();
    
    // Load initial transactions
    loadTransactions();
    
    function initializeFilters() {
        // Add change listeners to all filter inputs
        document.querySelectorAll('.filter-input').forEach(input => {
            input.addEventListener('change', function() {
                updateFilterVisualState(this);
                updateActiveFilterCount();
            });
        });
        
        // Apply filters button
        document.getElementById('apply-filters').addEventListener('click', function() {
            applyFilters();
        });
        
        // Clear filters button
        document.getElementById('clear-filters').addEventListener('click', function() {
            clearAllFilters();
        });
        
        // Refresh button
        document.getElementById('refresh-transactions').addEventListener('click', function() {
            const btn = this;
            btn.querySelector('.dashicons').classList.add('dashicons-update-spin');
            loadTransactions(() => {
                btn.querySelector('.dashicons').classList.remove('dashicons-update-spin');
            });
        });
    }
    
    function updateFilterVisualState(input) {
        const filterGroup = input.closest('.filter-group');
        if (input.value) {
            filterGroup.classList.add('has-value');
        } else {
            filterGroup.classList.remove('has-value');
        }
    }
    
    function updateActiveFilterCount() {
        activeFilterCount = 0;
        document.querySelectorAll('.filter-input').forEach(input => {
            if (input.value) activeFilterCount++;
        });
        
        const filterCountBadge = document.getElementById('filter-count');
        if (activeFilterCount > 0) {
            filterCountBadge.textContent = activeFilterCount;
            filterCountBadge.style.display = 'inline-flex';
        } else {
            filterCountBadge.style.display = 'none';
        }
    }
    
    function applyFilters() {
        currentFilters = {
            status: document.getElementById('status-filter').value,
            currency: document.getElementById('currency-filter').value,
            network: document.getElementById('network-filter').value,
            start_date: document.getElementById('date-from').value,
            end_date: document.getElementById('date-to').value
        };
        currentPage = 1;
        updateActiveFiltersDisplay();
        loadTransactions();
    }
    
    function updateActiveFiltersDisplay() {
        const container = document.getElementById('active-filters-container');
        const activeFilters = [];
        
        // Build active filter chips
        Object.entries(currentFilters).forEach(([key, value]) => {
            if (value) {
                let displayName = '';
                let displayValue = value;
                
                switch(key) {
                    case 'status':
                        displayName = '<?php esc_html_e('Status', 'stablezact-crypto-payments'); ?>';
                        displayValue = value.charAt(0).toUpperCase() + value.slice(1);
                        break;
                    case 'currency':
                        displayName = '<?php esc_html_e('Currency', 'stablezact-crypto-payments'); ?>';
                        break;
                    case 'network':
                        displayName = '<?php esc_html_e('Network', 'stablezact-crypto-payments'); ?>';
                        displayValue = value.charAt(0).toUpperCase() + value.slice(1);
                        break;
                    case 'start_date':
                        displayName = '<?php esc_html_e('From', 'stablezact-crypto-payments'); ?>';
                        displayValue = new Date(value).toLocaleDateString();
                        break;
                    case 'end_date':
                        displayName = '<?php esc_html_e('To', 'stablezact-crypto-payments'); ?>';
                        displayValue = new Date(value).toLocaleDateString();
                        break;
                }
                
                activeFilters.push(`
                    <div class="filter-chip" data-filter="${key}">
                        <span>${displayName}: <strong>${displayValue}</strong></span>
                        <span class="remove-filter" data-filter="${key}">×</span>
                    </div>
                `);
            }
        });
        
        if (activeFilters.length > 0) {
            container.innerHTML = activeFilters.join('');
            container.style.display = 'flex';
            
            // Add remove filter listeners
            container.querySelectorAll('.remove-filter').forEach(btn => {
                btn.addEventListener('click', function() {
                    removeFilter(this.dataset.filter);
                });
            });
        } else {
            container.style.display = 'none';
        }
    }
    
    function removeFilter(filterKey) {
        // Clear the specific filter
        switch(filterKey) {
            case 'status':
                document.getElementById('status-filter').value = '';
                break;
            case 'currency':
                document.getElementById('currency-filter').value = '';
                break;
            case 'network':
                document.getElementById('network-filter').value = '';
                break;
            case 'start_date':
                document.getElementById('date-from').value = '';
                break;
            case 'end_date':
                document.getElementById('date-to').value = '';
                break;
        }
        
        // Update visual state
        const input = document.querySelector(`[data-filter="${filterKey}"] .filter-input`);
        if (input) updateFilterVisualState(input);
        
        updateActiveFilterCount();
        applyFilters();
    }
    
    function clearAllFilters() {
        document.querySelectorAll('.filter-input').forEach(input => {
            input.value = '';
            updateFilterVisualState(input);
        });
        currentFilters = {};
        currentPage = 1;
        updateActiveFilterCount();
        updateActiveFiltersDisplay();
        loadTransactions();
    }
    
    // Select all functionality
    document.getElementById('select-all-transactions').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('#transactions-tbody input[type="checkbox"]');
        checkboxes.forEach(cb => cb.checked = this.checked);
    });
    
    function loadTransactions(callback) {
        const tbody = document.getElementById('transactions-tbody');
        tbody.innerHTML = '<tr><td colspan="9" class="loading"><div class="spinner is-active"></div> <?php esc_html_e('Loading transactions...', 'stablezact-crypto-payments'); ?></td></tr>';
        
        const data = Object.assign({
            action: 'stablezact_fetch_transactions',
            nonce: stablezact_admin.nonce,
            limit: 20,
            offset: (currentPage - 1) * 20
        }, currentFilters);
        
        jQuery.post(stablezact_admin.ajax_url, data, function(response) {
            if (response.success) {
                displayTransactions(response.data.payments || []);
                updatePagination(response.data.pagination || {});
                updateTransactionCount(response.data.pagination || {});
            } else {
                tbody.innerHTML = '<tr><td colspan="9" class="error"><?php esc_html_e('Failed to load transactions', 'stablezact-crypto-payments'); ?></td></tr>';
            }
            if (callback) callback();
        });
    }
    
    function displayTransactions(transactions) {
        const tbody = document.getElementById('transactions-tbody');

        if (transactions.length === 0) {
            tbody.innerHTML = '<tr><td colspan="9" class="no-data"><?php esc_html_e('No transactions found', 'stablezact-crypto-payments'); ?></td></tr>';
            return;
        }

        tbody.innerHTML = transactions.map(transaction => {
            // Get network info from the Network object
            const networkName = transaction.Network?.name || 'N/A';
            const explorerUrl = transaction.Network?.explorerUrl || '';
            const txHash = transaction.transactionHash || '';

            // Build explorer link or pending button
            let actionCell = '';
            if (txHash && explorerUrl) {
                actionCell = `<a href="${explorerUrl}/tx/${txHash}" target="_blank" class="button button-small" title="<?php esc_html_e('View on Explorer', 'stablezact-crypto-payments'); ?>">
                    <span class="dashicons dashicons-external" style="vertical-align: middle; margin-top: -2px;"></span>
                    <?php esc_html_e('Explorer', 'stablezact-crypto-payments'); ?>
                </a>`;
            } else {
                actionCell = `<span class="button button-small button-disabled"><?php esc_html_e('Pending', 'stablezact-crypto-payments'); ?></span>`;
            }

            return `
            <tr>
                <td class="check-column">
                    <input type="checkbox" value="${transaction.id}">
                </td>
                <td>
                    <code>${transaction.id}</code>
                </td>
                <td>
                    <strong>$${parseFloat(transaction.amount).toFixed(2)}</strong>
                </td>
                <td>
                    <span class="currency-badge">${transaction.currency}</span>
                </td>
                <td>
                    ${networkName}
                </td>
                <td>
                    <span class="status-badge status-${transaction.status}">${transaction.status}</span>
                </td>
                <td>
                    ${txHash ?
                        `<code class="transaction-hash" title="${txHash}">${txHash.substring(0, 10)}...${txHash.substring(txHash.length - 8)}</code>` :
                        'N/A'
                    }
                </td>
                <td>
                    ${new Date(transaction.createdAt).toLocaleDateString()} ${new Date(transaction.createdAt).toLocaleTimeString()}
                </td>
                <td>
                    ${actionCell}
                </td>
            </tr>
        `}).join('');
    }
    
    function updatePagination(pagination) {
        const container = document.getElementById('pagination-container');
        if (!pagination.total) {
            container.innerHTML = '';
            return;
        }
        
        const totalPages = Math.ceil(pagination.total / pagination.limit);
        const currentPageNum = Math.floor(pagination.offset / pagination.limit) + 1;
        
        let paginationHTML = '<span class="pagination-links">';
        
        // Previous page
        if (currentPageNum > 1) {
            paginationHTML += `<a class="prev-page" href="#" data-page="${currentPageNum - 1}">‹</a>`;
        }
        
        // Page numbers
        for (let i = Math.max(1, currentPageNum - 2); i <= Math.min(totalPages, currentPageNum + 2); i++) {
            if (i === currentPageNum) {
                paginationHTML += `<span class="paging-input">${i}</span>`;
            } else {
                paginationHTML += `<a class="page-number" href="#" data-page="${i}">${i}</a>`;
            }
        }
        
        // Next page
        if (currentPageNum < totalPages) {
            paginationHTML += `<a class="next-page" href="#" data-page="${currentPageNum + 1}">›</a>`;
        }
        
        paginationHTML += '</span>';
        container.innerHTML = paginationHTML;
        
        // Add event listeners
        container.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                currentPage = parseInt(this.dataset.page);
                loadTransactions();
            });
        });
    }
    
    function updateTransactionCount(pagination) {
        const countEl = document.querySelector('.transaction-count');
        if (pagination.total) {
            const start = pagination.offset + 1;
            const end = Math.min(pagination.offset + pagination.limit, pagination.total);
            countEl.textContent = `<?php esc_html_e('Showing', 'stablezact-crypto-payments'); ?> ${start}-${end} <?php esc_html_e('of', 'stablezact-crypto-payments'); ?> ${pagination.total} <?php esc_html_e('transactions', 'stablezact-crypto-payments'); ?>`;
        } else {
            countEl.textContent = '<?php esc_html_e('No transactions found', 'stablezact-crypto-payments'); ?>';
        }
    }
    
    function showTransactionDetails(paymentId) {
        const modal = document.getElementById('transaction-modal');
        const modalBody = modal.querySelector('.stablezact-modal-body');
        
        modalBody.innerHTML = '<div class="loading"><?php esc_html_e('Loading transaction details...', 'stablezact-crypto-payments'); ?></div>';
        modal.style.display = 'block';

        jQuery.post(stablezact_admin.ajax_url, {
            action: 'stablezact_get_transaction_details',
            nonce: stablezact_admin.nonce,
            payment_id: paymentId
        }, function(response) {
            if (response.success) {
                modalBody.innerHTML = buildTransactionDetailsHTML(response.data);
            } else {
                modalBody.innerHTML = '<div class="error"><?php esc_html_e('Failed to load transaction details', 'stablezact-crypto-payments'); ?></div>';
            }
        });
    }
    
    function buildTransactionDetailsHTML(transaction) {
        return `
            <div class="transaction-details">
                <div class="detail-section">
                    <h4><?php esc_html_e('Payment Information', 'stablezact-crypto-payments'); ?></h4>
                    <div class="detail-grid">
                        <div class="detail-row">
                            <label><?php esc_html_e('Payment ID:', 'stablezact-crypto-payments'); ?></label>
                            <span><code>${transaction.id}</code></span>
                        </div>
                        <div class="detail-row">
                            <label><?php esc_html_e('Amount:', 'stablezact-crypto-payments'); ?></label>
                            <span><strong>$${parseFloat(transaction.amount).toFixed(2)}</strong></span>
                        </div>
                        <div class="detail-row">
                            <label><?php esc_html_e('Total Amount:', 'stablezact-crypto-payments'); ?></label>
                            <span><strong>$${parseFloat(transaction.totalAmount || transaction.amount).toFixed(2)}</strong></span>
                        </div>
                        <div class="detail-row">
                            <label><?php esc_html_e('Fee Amount:', 'stablezact-crypto-payments'); ?></label>
                            <span>$${parseFloat(transaction.feeAmount || 0).toFixed(2)}</span>
                        </div>
                        <div class="detail-row">
                            <label><?php esc_html_e('Currency:', 'stablezact-crypto-payments'); ?></label>
                            <span class="currency-badge">${transaction.currency}</span>
                        </div>
                        <div class="detail-row">
                            <label><?php esc_html_e('Network:', 'stablezact-crypto-payments'); ?></label>
                            <span>${transaction.network}</span>
                        </div>
                        <div class="detail-row">
                            <label><?php esc_html_e('Status:', 'stablezact-crypto-payments'); ?></label>
                            <span class="status-badge status-${transaction.status}">${transaction.status}</span>
                        </div>
                    </div>
                </div>
                
                ${transaction.transactionHash ? `
                <div class="detail-section">
                    <h4><?php esc_html_e('Blockchain Information', 'stablezact-crypto-payments'); ?></h4>
                    <div class="detail-grid">
                        <div class="detail-row">
                            <label><?php esc_html_e('Transaction Hash:', 'stablezact-crypto-payments'); ?></label>
                            <span><code>${transaction.transactionHash}</code></span>
                        </div>
                        <div class="detail-row">
                            <label><?php esc_html_e('Confirmations:', 'stablezact-crypto-payments'); ?></label>
                            <span>${transaction.confirmations || 'N/A'}</span>
                        </div>
                    </div>
                </div>
                ` : ''}
                
                <div class="detail-section">
                    <h4><?php esc_html_e('Timeline', 'stablezact-crypto-payments'); ?></h4>
                    <div class="detail-grid">
                        <div class="detail-row">
                            <label><?php esc_html_e('Created:', 'stablezact-crypto-payments'); ?></label>
                            <span>${new Date(transaction.createdAt).toLocaleString()}</span>
                        </div>
                        ${transaction.processedAt ? `
                        <div class="detail-row">
                            <label><?php esc_html_e('Processed:', 'stablezact-crypto-payments'); ?></label>
                            <span>${new Date(transaction.processedAt).toLocaleString()}</span>
                        </div>
                        ` : ''}
                        ${transaction.expiresAt ? `
                        <div class="detail-row">
                            <label><?php esc_html_e('Expires:', 'stablezact-crypto-payments'); ?></label>
                            <span>${new Date(transaction.expiresAt).toLocaleString()}</span>
                        </div>
                        ` : ''}
                    </div>
                </div>
            </div>
        `;
    }
    
    // Modal close functionality
    const modal = document.getElementById('transaction-modal');
    const closeBtn = modal.querySelector('.stablezact-modal-close');
    
    closeBtn.addEventListener('click', function() {
        modal.style.display = 'none';
    });

    window.addEventListener('click', function(event) {
        if (event.target === modal) {
            modal.style.display = 'none';
        }
    });
});
<?php
wp_add_inline_script('stablezact-admin', ob_get_clean());