<?php
/**
 * Account orders tab template
 *
 * @link       https://yourwebsite.com
 * @since      1.0.0
 *
 * @package    Subscription_System
 * @subpackage Subscription_System/public/partials/account-tabs
 */

// Get current user ID
$user_id = get_current_user_id();

// Check if the orders table exists
global $wpdb;
$orders_table = $wpdb->prefix . 'subscription_orders';
$table_exists = $wpdb->get_var("SHOW TABLES LIKE '$orders_table'") === $orders_table;

// Get user orders if table exists
$orders = array();
if ($table_exists) {
    // Check if the Subs_Sys_Order class exists
    if (class_exists('Subs_Sys_Order')) {
        $orders = Subs_Sys_Order::get_user_orders($user_id);
    } else {
        // Fallback if class doesn't exist
        $orders = $wpdb->get_results($wpdb->prepare(
            "SELECT * FROM $orders_table WHERE user_id = %d ORDER BY created_at DESC",
            $user_id
        ));
    }
}
?>

<div class="account-tab-content orders-tab">
    <h2><?php esc_html_e('Your Orders', 'subscription-system'); ?></h2>
    
    <?php if (!$table_exists) : ?>
        <div class="no-orders-message">
            <div class="message-icon">
                <span class="dashicons dashicons-info"></span>
            </div>
            <div class="message-content">
                <h3><?php esc_html_e('Orders Feature Coming Soon', 'subscription-system'); ?></h3>
                <p><?php esc_html_e('We\'re currently working on implementing the orders feature. Check back soon!', 'subscription-system'); ?></p>
            </div>
        </div>
    <?php elseif (empty($orders)) : ?>
        <div class="no-orders">
            <p><?php esc_html_e('You have no orders yet.', 'subscription-system'); ?></p>
        </div>
    <?php else : ?>
        <div class="orders-list">
            <table class="orders-table">
                <thead>
                    <tr>
                        <th><?php esc_html_e('Order ID', 'subscription-system'); ?></th>
                        <th><?php esc_html_e('Date', 'subscription-system'); ?></th>
                        <th><?php esc_html_e('Plan', 'subscription-system'); ?></th>
                        <th><?php esc_html_e('Amount', 'subscription-system'); ?></th>
                        <th><?php esc_html_e('Status', 'subscription-system'); ?></th>
                        <th><?php esc_html_e('Actions', 'subscription-system'); ?></th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($orders as $order) : ?>
                        <tr>
                            <td><?php echo esc_html($order->id); ?></td>
                            <td><?php echo esc_html(date_i18n(get_option('date_format') . ' ' . get_option('time_format'), strtotime($order->transaction_date))); ?></td>
                            <td><?php echo esc_html($order->plan_name); ?></td>
                            <td>$<?php echo esc_html(number_format($order->amount, 2)); ?></td>
                            <td>
                                <span class="order-status <?php echo esc_attr($order->status); ?>">
                                    <?php echo esc_html(ucfirst($order->status)); ?>
                                </span>
                            </td>
                            <td>
                                <button class="ss-button view-order" data-order-id="<?php echo esc_attr($order->id); ?>">
                                    <?php esc_html_e('View', 'subscription-system'); ?>
                                </button>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        
        <!-- Order Details Modal -->
        <div id="order-details-modal" class="ss-modal">
            <div class="ss-modal-content">
                <span class="ss-modal-close">&times;</span>
                <div id="order-details-content"></div>
            </div>
        </div>
        
        <div class="orders-pagination">
            <div class="pagination-info">
                <span class="displaying-num">
                    <?php 
                    // translators: %s is the number of order items
                    printf(_n('%s item', '%s items', count($orders), 'subscription-system'), number_format_i18n(count($orders))); 
                    ?>
                </span>
            </div>
            
            <div class="pagination-links">
                <?php esc_html_e('Pagination links would go here', 'subscription-system'); ?>
            </div>
        </div>
        
        <script>
        jQuery(document).ready(function($) {
            // View order details
            $('.view-order').on('click', function() {
                var orderId = $(this).data('order-id');
                
                // Show loading state
                $('#order-details-content').html('<p>Loading order details...</p>');
                $('#order-details-modal').show();
                
                // Get order details via AJAX
                $.ajax({
                    url: '<?php echo esc_url(admin_url('admin-ajax.php')); ?>',
                    type: 'POST',
                    data: {
                        action: 'get_order_details',
                        order_id: orderId,
                        nonce: '<?php echo esc_attr(wp_create_nonce('subs_sys_nonce')); ?>'
                    },
                    success: function(response) {
                        if (response.success) {
                            $('#order-details-content').html(response.data.html);
                        } else {
                            $('#order-details-content').html('<p class="error">' + response.data.message + '</p>');
                        }
                    },
                    error: function() {
                        $('#order-details-content').html('<p class="error">Error loading order details. Please try again.</p>');
                    }
                });
            });
            
            // Close modal
            $('.ss-modal-close').on('click', function() {
                $('#order-details-modal').hide();
            });
            
            // Close modal when clicking outside
            $(window).on('click', function(event) {
                if ($(event.target).is('#order-details-modal')) {
                    $('#order-details-modal').hide();
                }
            });
        });
        </script>
    <?php endif; ?>
</div>

<style>
.orders-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.orders-table th,
.orders-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.orders-table th {
    background-color: #f5f5f5;
    font-weight: 600;
}

.order-status {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}

.order-status.completed {
    background-color: #e6f7e6;
    color: #2e7d32;
}

.order-status.pending {
    background-color: #fff8e1;
    color: #ff8f00;
}

.order-status.failed {
    background-color: #ffebee;
    color: #c62828;
}

.ss-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.ss-modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 80%;
    max-width: 600px;
    position: relative;
}

.ss-modal-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.ss-modal-close:hover {
    color: black;
}

.order-details-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.order-details-table th,
.order-details-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.order-details-table th {
    width: 40%;
    font-weight: 600;
}

.no-orders {
    text-align: center;
    padding: 30px;
    background-color: #f9f9f9;
    border-radius: 4px;
    margin-top: 20px;
}

.no-orders-message {
    display: flex;
    align-items: center;
    padding: 30px;
    background-color: #f0f7ff;
    border-radius: 8px;
    border: 1px solid #c5d9ed;
    margin: 20px 0;
}

.message-icon {
    margin-right: 20px;
}

.message-icon .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: #2271b1;
}

.message-content h3 {
    margin-top: 0;
    color: #2271b1;
    font-size: 18px;
}

.message-content p {
    margin-bottom: 0;
    color: #50575e;
}
</style> 