<?php
/**
 * Total Processing Gateway Logger - Metabox View
 * 
 * Template for order logs metabox
 *
 * @package TotalProcessing
 * @subpackage Gateway_Logger
 */

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

$order_id = $order->get_id();
?>

<div id="tp-gateway-logs-container" data-order-id="<?php echo esc_attr($order_id); ?>">
    
    <div class="tp-logs-header">
        <div class="tp-logs-info">
            <p>
                <strong>💡 Transaction logs help diagnose payment issues.</strong> 
                Logs are loaded on demand to improve page performance.
            </p>
        </div>
        
        <div class="tp-logs-actions">
            <button type="button" class="button button-primary" id="tp-load-logs-btn">
                📋 Load Gateway Logs
            </button>
            <button type="button" class="button button-secondary" id="tp-clear-logs-btn" style="display: none;">
                🗑️ Clear Order Logs
            </button>
        </div>
    </div>
    
    <div id="tp-logs-filters" style="display: none;">
        <div class="tp-filter-buttons">
            <button type="button" class="tp-filter-btn active" data-filter="all">
                All
            </button>
            <button type="button" class="tp-filter-btn" data-filter="error">
                🔴 Errors
            </button>
            <button type="button" class="tp-filter-btn" data-filter="warning">
                ⚠️ Warnings
            </button>
            <button type="button" class="tp-filter-btn" data-filter="info">
                ℹ️ Info
            </button>
            <button type="button" class="tp-filter-btn" data-filter="success">
                ✅ Success
            </button>
        </div>
        
        <div class="tp-logs-counter">
            <span id="tp-logs-count">Loading...</span>
        </div>
    </div>
    
    <div id="tp-logs-content">
        <!-- Logs will be loaded here via AJAX -->
    </div>
    
    <div id="tp-logs-loader" style="display: none;">
        <div class="tp-loader-spinner">
            <div class="tp-spinner"></div>
            <p>Loading logs...</p>
        </div>
    </div>
    
    <div id="tp-load-more-container" style="display: none;">
        <button type="button" class="button" id="tp-load-more-btn">
            Load More Logs
        </button>
    </div>
    
</div>
