<?php
/**
 * Provide a admin area view for the subscribers page
 *
 * @link       https://example.com
 * @since      1.0.0
 *
 * @package    Subscription_System
 */

// If this file is called directly, abort.
if (!defined('WPINC')) {
    die;
}
?>

<div class="wrap">
    <h1><?php echo esc_html__('Subscribers', 'subscription-system'); ?></h1>
    
    <?php 
    // Database information panel - helps identify issues
    global $wpdb;
    $subscription_count = $wpdb->get_var("SELECT COUNT(*) FROM {$wpdb->prefix}subscriptions");
    $user_count = $wpdb->get_var("SELECT COUNT(*) FROM {$wpdb->users}");
    $plan_count = $wpdb->get_var("SELECT COUNT(*) FROM {$wpdb->prefix}subscription_plans");
    $with_subs_count = 0;
    foreach ($subscribers as $sub) {
        if (!empty($sub['subscriptions'])) {
            $with_subs_count++;
        }
    }
    
    // Show warning if no subscriptions exist
    if ($subscription_count == 0) {
        ?>
        <div class="notice notice-warning" style="padding: 15px; margin: 15px 0;">
            <h3 style="margin-top: 0;">⚠️ No Subscriptions Found</h3>
            <p>There are currently <strong>no subscriptions</strong> in the database.</p>
            <p>To see subscription data here:</p>
            <ol>
                <li>Make sure you have created at least one <a href="<?php echo admin_url('edit.php?post_type=subscription&page=subscription-plans'); ?>">subscription plan</a></li>
                <li>Create a test subscription by purchasing a plan through your site</li>
                <li>Or manually add a subscription in the database</li>
            </ol>
            <p><strong>Database Stats:</strong></p>
            <ul>
                <li>Total Users: <?php echo esc_html($user_count); ?></li>
                <li>Total Plans: <?php echo esc_html($plan_count); ?></li>
                <li>Total Subscriptions: <?php echo esc_html($subscription_count); ?></li>
            </ul>
        </div>
        <?php
    } elseif ($with_subs_count == 0 && count($subscribers) > 0) {
        ?>
        <div class="notice notice-info" style="padding: 15px; margin: 15px 0;">
            <h3 style="margin-top: 0;">ℹ️ Subscriptions Not Linked</h3>
            <p>Found <strong><?php echo esc_html($subscription_count); ?> subscription(s)</strong> in database, but they are not linked to the displayed users.</p>
            <p>This could mean:</p>
            <ul>
                <li>Subscriptions exist but are linked to different user accounts</li>
                <li>There's a data mismatch between users and subscriptions</li>
                <li>The subscription user_id doesn't match any WordPress user ID</li>
            </ul>
            <details style="margin-top: 10px;">
                <summary style="cursor: pointer; font-weight: bold;">🔍 Debug Information (Click to view)</summary>
                <div style="background: #f5f5f5; padding: 10px; margin-top: 10px;">
                    <p><strong>Total Users:</strong> <?php echo esc_html($user_count); ?></p>
                    <p><strong>Total Subscriptions in DB:</strong> <?php echo esc_html($subscription_count); ?></p>
                    <p><strong>Total Plans:</strong> <?php echo esc_html($plan_count); ?></p>
                    <p><strong>Users Displayed:</strong> <?php echo esc_html(count($subscribers)); ?></p>
                    <p><strong>Users with Subscriptions:</strong> <?php echo esc_html($with_subs_count); ?></p>
                </div>
            </details>
        </div>
        <?php
    }
    ?>
    
    <div class="subscribers-stats">
        <div class="stat-card active-subscribers">
            <h3><?php echo esc_html__('Active Subscribers', 'subscription-system'); ?></h3>
            <div class="stat-value">
                <?php 
                $active_count = 0;
                foreach ($subscribers as $subscriber) {
                    foreach ($subscriber['subscriptions'] as $subscription) {
                        if ($subscription['status'] === 'active') {
                            $active_count++;
                            break; // Count each subscriber only once
                        }
                    }
                }
                echo esc_html($active_count);
                ?>
            </div>
        </div>
        
        <div class="stat-card paused-subscribers">
            <h3><?php echo esc_html__('Paused Subscribers', 'subscription-system'); ?></h3>
            <div class="stat-value">
                <?php 
                $paused_count = 0;
                foreach ($subscribers as $subscriber) {
                    $has_active = false;
                    $has_paused = false;
                    
                    foreach ($subscriber['subscriptions'] as $subscription) {
                        if ($subscription['status'] === 'active') {
                            $has_active = true;
                        }
                        if ($subscription['status'] === 'paused') {
                            $has_paused = true;
                        }
                    }
                    
                    // Only count as paused if they have a paused subscription and no active ones
                    if ($has_paused && !$has_active) {
                        $paused_count++;
                    }
                }
                echo esc_html($paused_count);
                ?>
            </div>
        </div>
        
        <div class="stat-card cancelled-subscribers">
            <h3><?php echo esc_html__('Cancelled Subscribers', 'subscription-system'); ?></h3>
            <div class="stat-value">
                <?php 
                $cancelled_count = 0;
                foreach ($subscribers as $subscriber) {
                    $has_active_or_paused = false;
                    $has_cancelled = false;
                    
                    foreach ($subscriber['subscriptions'] as $subscription) {
                        if ($subscription['status'] === 'active' || $subscription['status'] === 'paused') {
                            $has_active_or_paused = true;
                        }
                        if ($subscription['status'] === 'cancelled') {
                            $has_cancelled = true;
                        }
                    }
                    
                    // Only count as cancelled if they have a cancelled subscription and no active/paused ones
                    if ($has_cancelled && !$has_active_or_paused) {
                        $cancelled_count++;
                    }
                }
                echo esc_html($cancelled_count);
                ?>
            </div>
        </div>
        
        <div class="stat-card total-revenue">
            <h3><?php echo esc_html__('Total Revenue', 'subscription-system'); ?></h3>
            <div class="stat-value">
                <?php 
                $total_revenue = 0;
                foreach ($subscribers as $subscriber) {
                    foreach ($subscriber['subscriptions'] as $subscription) {
                        if ($subscription['status'] === 'active') {
                            $total_revenue += floatval($subscription['amount']);
                        }
                    }
                }
                $currency = get_option('subscription_currency', 'USD');
                echo esc_html($currency . ' ' . number_format($total_revenue, 2));
                ?>
            </div>
        </div>
    </div>

    <div class="subscribers-filters">
        <div class="filter-group">
            <label for="status-filter"><?php echo esc_html__('Status:', 'subscription-system'); ?></label>
            <select id="status-filter" class="status-filter">
                <option value="all"><?php echo esc_html__('All Statuses', 'subscription-system'); ?></option>
                <option value="active"><?php echo esc_html__('Active', 'subscription-system'); ?></option>
                <option value="paused"><?php echo esc_html__('Paused', 'subscription-system'); ?></option>
                <option value="cancelled"><?php echo esc_html__('Cancelled', 'subscription-system'); ?></option>
                <option value="no-subscription"><?php echo esc_html__('No Subscription', 'subscription-system'); ?></option>
            </select>
        </div>
        
        <div class="filter-group search-group">
            <label for="search-subscribers"><?php echo esc_html__('Search:', 'subscription-system'); ?></label>
            <div class="search-input-wrapper">
                <input type="text" id="search-subscribers" placeholder="<?php echo esc_attr__('Search by name, email...', 'subscription-system'); ?>">
                <span class="dashicons dashicons-search"></span>
            </div>
        </div>
        
        <button type="button" id="reset-filters" class="button">
            <span class="dashicons dashicons-dismiss"></span>
            <?php echo esc_html__('Reset Filters', 'subscription-system'); ?>
        </button>
    </div>

    <div class="loading-indicator">
        <span class="spinner is-active"></span>
        <span><?php echo esc_html__('Loading...', 'subscription-system'); ?></span>
    </div>
    
    <div class="subscription-system-admin-content">
        <?php settings_errors('subscription_messages'); ?>
        
        <div class="subscription-system-card">
            <h2><?php echo esc_html__('All Subscribers', 'subscription-system'); ?></h2>
            
            <?php if (empty($subscribers)): ?>
                <p><?php echo esc_html__('No subscribers found.', 'subscription-system'); ?></p>
            <?php else: ?>
                <table class="wp-list-table widefat fixed striped subscribers-table">
                    <thead>
                        <tr>
                            <th width="60"><?php echo esc_html__('#', 'subscription-system'); ?></th>
                            <th><?php echo esc_html__('Username', 'subscription-system'); ?></th>
                            <th><?php echo esc_html__('Email', 'subscription-system'); ?></th>
                            <th><?php echo esc_html__('Name', 'subscription-system'); ?></th>
                            <th><?php echo esc_html__('Registered Date', 'subscription-system'); ?></th>
                            <th><?php echo esc_html__('Subscription Status', 'subscription-system'); ?></th>
                            <th><?php echo esc_html__('Current Plan', 'subscription-system'); ?></th>
                            <th><?php echo esc_html__('Actions', 'subscription-system'); ?></th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
                        $counter = 1;
                        foreach ($subscribers as $subscriber): 
                        ?>
                            <tr>
                                <td><?php echo esc_html($counter++); ?></td>
                                <td><?php echo esc_html($subscriber['username']); ?></td>
                                <td><?php echo esc_html($subscriber['email']); ?></td>
                                <td><?php echo esc_html($subscriber['display_name']); ?></td>
                                <td><?php echo esc_html(date_i18n(get_option('date_format'), strtotime($subscriber['registered_date']))); ?></td>
                                <td>
                                    <?php 
                                    $status = 'No subscription';
                                    $status_class = 'no-subscription';
                                    
                                    if (!empty($subscriber['subscriptions'])) {
                                        $active_subscription = null;
                                        
                                        // Find the active subscription if any
                                        foreach ($subscriber['subscriptions'] as $subscription) {
                                            if ($subscription['status'] === 'active') {
                                                $active_subscription = $subscription;
                                                break;
                                            }
                                        }
                                        
                                        // If no active subscription, use the most recent one
                                        if (!$active_subscription && !empty($subscriber['subscriptions'])) {
                                            $active_subscription = $subscriber['subscriptions'][0];
                                        }
                                        
                                        if ($active_subscription) {
                                            $status = ucfirst($active_subscription['status']);
                                            $status_class = $active_subscription['status'];
                                        }
                                    }
                                    ?>
                                    <span class="subscription-status <?php echo esc_attr($status_class); ?>">
                                        <?php echo esc_html($status); ?>
                                    </span>
                                </td>
                                <td>
                                    <?php 
                                    $plan_name = 'None';
                                    
                                    if (!empty($subscriber['subscriptions'])) {
                                        foreach ($subscriber['subscriptions'] as $subscription) {
                                            if ($subscription['status'] === 'active') {
                                                $plan_name = $subscription['plan_name'];
                                                break;
                                            }
                                        }
                                    }
                                    
                                    echo esc_html($plan_name);
                                    ?>
                                </td>
                                <td>
                                    <a href="<?php echo esc_url(admin_url('user-edit.php?user_id=' . $subscriber['user_id'])); ?>" class="button button-small">
                                        <?php echo esc_html__('Edit User', 'subscription-system'); ?>
                                    </a>
                                    
                                    <?php if (!empty($subscriber['subscriptions'])): ?>
                                        <button type="button" class="button button-small view-subscriptions-btn" data-user-id="<?php echo esc_attr($subscriber['user_id']); ?>">
                                            <?php echo esc_html__('View Subscriptions', 'subscription-system'); ?>
                                        </button>
                                    <?php endif; ?>
                                    
                                    <a href="<?php echo esc_url(admin_url('admin.php?page=subscription-work-logs&user_id=' . $subscriber['user_id'])); ?>" class="button button-small work-logs-btn">
                                        <?php echo esc_html__('Work Logs', 'subscription-system'); ?>
                                    </a>
                                </td>
                            </tr>
                            
                            <?php if (!empty($subscriber['subscriptions'])): ?>
                                <tr class="subscription-details-row" id="subscription-details-<?php echo esc_attr($subscriber['user_id']); ?>" style="display: none;">
                                    <td colspan="8">
                                        <div class="subscription-details">
                                            <h4><?php echo esc_html__('Subscription History', 'subscription-system'); ?></h4>
                                            <table class="widefat fixed">
                                                <thead>
                                                    <tr>
                                                        <th><?php echo esc_html__('ID', 'subscription-system'); ?></th>
                                                        <th><?php echo esc_html__('Plan', 'subscription-system'); ?></th>
                                                        <th><?php echo esc_html__('Status', 'subscription-system'); ?></th>
                                                        <th><?php echo esc_html__('Start Date', 'subscription-system'); ?></th>
                                                        <th><?php echo esc_html__('End Date', 'subscription-system'); ?></th>
                                                        <th><?php echo esc_html__('Amount', 'subscription-system'); ?></th>
                                                        <th><?php echo esc_html__('Actions', 'subscription-system'); ?></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php foreach ($subscriber['subscriptions'] as $subscription): ?>
                                                        <tr>
                                                            <td><?php echo esc_html($subscription['id']); ?></td>
                                                            <td><?php echo esc_html($subscription['plan_name']); ?></td>
                                                            <td>
                                                                <span class="subscription-status <?php echo esc_attr($subscription['status']); ?>">
                                                                    <?php echo esc_html(ucfirst($subscription['status'])); ?>
                                                                </span>
                                                            </td>
                                                            <td>
                                                                <?php 
                                                                echo esc_html(date_i18n(get_option('date_format'), strtotime($subscription['start_date']))); 
                                                                ?>
                                                            </td>
                                                            <td>
                                                                <?php 
                                                                if (!empty($subscription['end_date']) && $subscription['end_date'] !== '0000-00-00 00:00:00') {
                                                                    echo esc_html(date_i18n(get_option('date_format'), strtotime($subscription['end_date'])));
                                                                } else {
                                                                    // Calculate renewal date based on duration and start date
                                                                    $duration = isset($subscription['duration']) ? intval($subscription['duration']) : 30; // Default to monthly
                                                                    $start_timestamp = strtotime($subscription['start_date']);
                                                                    
                                                                    // Calculate the renewal date by adding the duration in days
                                                                    $renewal_timestamp = strtotime("+{$duration} days", $start_timestamp);
                                                                    
                                                                    // Format the renewal date
                                                                    $renewal_date = date_i18n(get_option('date_format'), $renewal_timestamp);
                                                                    
                                                                    // Add a human-readable label
                                                                    $duration_label = '';
                                                                    switch ($duration) {
                                                                        case 30:
                                                                            $duration_label = __('Monthly', 'subscription-system');
                                                                            break;
                                                                        case 90:
                                                                            $duration_label = __('Quarterly', 'subscription-system');
                                                                            break;
                                                                        case 180:
                                                                            $duration_label = __('Biannually', 'subscription-system');
                                                                            break;
                                                                        case 365:
                                                                            $duration_label = __('Annually', 'subscription-system');
                                                                            break;
                                                                        default:
                                                                            /* translators: %d: number of days between subscription renewals */
                                                                            $duration_label = sprintf(__('Every %d days', 'subscription-system'), $duration);
                                                                    }
                                                                    
                                                                    echo esc_html($renewal_date);
                                                                    echo ' <span class="renewal-type">(' . esc_html($duration_label) . ')</span>';
                                                                }
                                                                ?>
                                                            </td>
                                                            <td>
                                                                <?php 
                                                                $currency = get_option('subscription_currency', 'USD');
                                                                echo esc_html($currency . ' ' . number_format($subscription['amount'], 2));
                                                                ?>
                                                            </td>
                                                            <td>
                                                                <?php if ($subscription['status'] === 'active'): ?>
                                                                    <button type="button" class="button button-small pause-subscription-btn" data-subscription-id="<?php echo esc_attr($subscription['id']); ?>">
                                                                        <?php echo esc_html__('Pause', 'subscription-system'); ?>
                                                                    </button>
                                                                    <button type="button" class="button button-small cancel-subscription-btn" data-subscription-id="<?php echo esc_attr($subscription['id']); ?>">
                                                                        <?php echo esc_html__('Cancel', 'subscription-system'); ?>
                                                                    </button>
                                                                <?php elseif ($subscription['status'] === 'paused'): ?>
                                                                    <button type="button" class="button button-small resume-subscription-btn" data-subscription-id="<?php echo esc_attr($subscription['id']); ?>">
                                                                        <?php echo esc_html__('Resume', 'subscription-system'); ?>
                                                                    </button>
                                                                    <button type="button" class="button button-small cancel-subscription-btn" data-subscription-id="<?php echo esc_attr($subscription['id']); ?>">
                                                                        <?php echo esc_html__('Cancel', 'subscription-system'); ?>
                                                                    </button>
                                                                <?php endif; ?>
                                                            </td>
                                                        </tr>
                                                    <?php endforeach; ?>
                                                </tbody>
                                            </table>
                                        </div>
                                    </td>
                                </tr>
                            <?php endif; ?>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            <?php endif; ?>
        </div>
    </div>
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {
    // Toggle subscription details with animation
    $('.view-subscriptions-btn').on('click', function() {
        var userId = $(this).data('user-id');
        $('#subscription-details-' + userId).slideToggle(300);
        
        // Change button text based on state
        var $button = $(this);
        if ($button.text().trim() === '<?php echo esc_js(__('View Subscriptions', 'subscription-system')); ?>') {
            $button.text('<?php echo esc_js(__('Hide Subscriptions', 'subscription-system')); ?>');
        } else {
            $button.text('<?php echo esc_js(__('View Subscriptions', 'subscription-system')); ?>');
        }
    });
    
    // Handle subscription actions
    $('.pause-subscription-btn, .resume-subscription-btn, .cancel-subscription-btn').on('click', function() {
        var subscriptionId = $(this).data('subscription-id');
        var action = '';
        
        if ($(this).hasClass('pause-subscription-btn')) {
            action = 'pause';
            if (!confirm('<?php echo esc_js(__('Are you sure you want to pause this subscription?', 'subscription-system')); ?>')) {
                return;
            }
        } else if ($(this).hasClass('resume-subscription-btn')) {
            action = 'resume';
            if (!confirm('<?php echo esc_js(__('Are you sure you want to resume this subscription?', 'subscription-system')); ?>')) {
                return;
            }
        } else if ($(this).hasClass('cancel-subscription-btn')) {
            action = 'cancel';
            if (!confirm('<?php echo esc_js(__('Are you sure you want to cancel this subscription? This action cannot be undone.', 'subscription-system')); ?>')) {
                return;
            }
        }
        
        $('.loading-indicator').show();
        
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'manage_subscription',
                ss_action: action,
                subscription_id: subscriptionId,
                nonce: '<?php echo wp_create_nonce('ss_admin_nonce'); ?>'
            },
            success: function(response) {
                if (response.success) {
                    // Show success message with better styling
                    showNotification(response.data.message, 'success');
                    
                    // Reload after a short delay
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                } else {
                    showNotification(response.data.message, 'error');
                }
            },
            error: function() {
                showNotification('<?php echo esc_js(__('An error occurred. Please try again.', 'subscription-system')); ?>', 'error');
            },
            complete: function() {
                $('.loading-indicator').hide();
            }
        });
    });
    
    // Search and filter functionality
    $('#search-subscribers').on('keyup', function() {
        filterSubscribers();
    });
    
    $('#status-filter').on('change', function() {
        filterSubscribers();
    });
    
    $('#reset-filters').on('click', function() {
        $('#search-subscribers').val('');
        $('#status-filter').val('all');
        filterSubscribers();
    });
    
    function filterSubscribers() {
        var searchTerm = $('#search-subscribers').val().toLowerCase();
        var statusFilter = $('#status-filter').val();
        
        $('.subscribers-table tbody tr').each(function() {
            var $row = $(this);
            
            // Skip subscription details rows
            if ($row.hasClass('subscription-details-row')) {
                return;
            }
            
            var username = $row.find('td:eq(1)').text().toLowerCase();
            var email = $row.find('td:eq(2)').text().toLowerCase();
            var name = $row.find('td:eq(3)').text().toLowerCase();
            var statusText = $row.find('.subscription-status').text().toLowerCase();
            var statusClass = $row.find('.subscription-status').attr('class').replace('subscription-status ', '');
            
            // Check if row matches search term
            var matchesSearch = searchTerm === '' || 
                               username.indexOf(searchTerm) > -1 || 
                               email.indexOf(searchTerm) > -1 || 
                               name.indexOf(searchTerm) > -1;
            
            // Check if row matches status filter
            var matchesStatus = statusFilter === 'all' || statusClass === statusFilter;
            
            // Show/hide row based on filters
            if (matchesSearch && matchesStatus) {
                $row.show();
                
                // Also show the details row if it's currently visible
                var userId = $row.find('.view-subscriptions-btn').data('user-id');
                var $detailsRow = $('#subscription-details-' + userId);
                if ($detailsRow.is(':visible')) {
                    $detailsRow.show();
                }
            } else {
                $row.hide();
                
                // Also hide the details row
                var userId = $row.find('.view-subscriptions-btn').data('user-id');
                $('#subscription-details-' + userId).hide();
            }
        });
    }
    
    // Helper function to show notifications
    function showNotification(message, type) {
        // Remove any existing notifications
        $('.notification-message').remove();
        
        // Create notification element
        var $notification = $('<div class="notification-message notification-' + type + '">' + 
                             '<p>' + message + '</p>' +
                             '<button type="button" class="notice-dismiss"></button>' +
                             '</div>');
        
        // Add to the page
        $('.subscription-system-admin-content').prepend($notification);
        
        // Add dismiss functionality
        $notification.find('.notice-dismiss').on('click', function() {
            $notification.fadeOut(300, function() {
                $(this).remove();
            });
        });
        
        // Auto dismiss after 5 seconds
        setTimeout(function() {
            $notification.fadeOut(300, function() {
                $(this).remove();
            });
        }, 5000);
    }
});
</script>

<style>
/* Main container styling */
.subscription-system-admin-content {
    margin-top: 20px;
}

.subscription-system-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 24px;
    margin-bottom: 20px;
}

.subscription-system-card h2 {
    margin-top: 0;
    color: #23282d;
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

/* Table styling */
.subscribers-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
}

.subscribers-table th {
    background-color: #f9f9f9;
    font-weight: 600;
    text-align: left;
    padding: 12px 15px;
    border-bottom: 1px solid #e5e5e5;
}

.subscribers-table td {
    padding: 12px 15px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

.subscribers-table tr:last-child td {
    border-bottom: none;
}

.subscribers-table tr:hover td {
    background-color: #f9f9f9;
}

/* Status badges */
.subscription-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subscription-status.active {
    background-color: #e3f9e5;
    color: #0a7d33;
    border: 1px solid #a3e9b7;
}

.subscription-status.paused {
    background-color: #fff8e6;
    color: #b78105;
    border: 1px solid #ffeeba;
}

.subscription-status.cancelled {
    background-color: #feeef0;
    color: #d63638;
    border: 1px solid #f5c2c7;
}

.subscription-status.expired {
    background-color: #feeef0;
    color: #d63638;
    border: 1px solid #f5c2c7;
}

.subscription-status.no-subscription {
    background-color: #f0f0f1;
    color: #50575e;
    border: 1px solid #dcdcde;
}

/* Button styling */
.subscribers-table .button {
    margin-right: 5px;
    border-radius: 4px;
    font-weight: 500;
}

.view-subscriptions-btn {
    background-color: #f0f0f1;
    color: #2271b1;
    border-color: #2271b1;
}

.view-subscriptions-btn:hover {
    background-color: #f6f7f7;
}

.pause-subscription-btn {
    background-color: #fff8e6;
    color: #b78105;
    border-color: #ffeeba;
}

.pause-subscription-btn:hover {
    background-color: #fff5d8;
}

.resume-subscription-btn {
    background-color: #e3f9e5;
    color: #0a7d33;
    border-color: #a3e9b7;
}

.resume-subscription-btn:hover {
    background-color: #d1f7d7;
}

.cancel-subscription-btn {
    background-color: #feeef0;
    color: #d63638;
    border-color: #f5c2c7;
}

.cancel-subscription-btn:hover {
    background-color: #fde8ea;
}

/* Subscription details section */
.subscription-details {
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    margin-top: 10px;
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.05);
}

.subscription-details h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 16px;
    color: #23282d;
    font-weight: 600;
}

.subscription-details table {
    border-radius: 4px;
    overflow: hidden;
}

/* Animation for expanding details */
.subscription-details-row {
    transition: all 0.3s ease;
}

/* Search and filter section */
.subscribers-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    align-items: center;
}

.subscribers-filters .filter-group {
    display: flex;
    align-items: center;
    position: relative;
}

.subscribers-filters label {
    margin-right: 10px;
    font-weight: 600;
    color: #23282d;
}

.subscribers-filters select,
.subscribers-filters input[type="text"] {
    min-width: 200px;
    height: 36px;
    border-radius: 4px;
}

.subscribers-filters .button {
    height: 36px;
    padding: 0 15px;
}

/* Pagination styling */
.subscribers-pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.subscribers-pagination .page-numbers {
    display: inline-block;
    min-width: 30px;
    height: 30px;
    margin: 0 5px;
    padding: 0 10px;
    line-height: 28px;
    text-align: center;
    background-color: #f0f0f1;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    color: #2271b1;
    text-decoration: none;
}

.subscribers-pagination .page-numbers.current {
    background-color: #2271b1;
    border-color: #2271b1;
    color: #fff;
}

.subscribers-pagination .page-numbers:hover {
    background-color: #f6f7f7;
}

/* Stats cards */
.subscribers-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
}

.stat-card {
    flex: 1;
    min-width: 200px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 20px;
    text-align: center;
}

.stat-card h3 {
    margin-top: 0;
    color: #50575e;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card .stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #23282d;
    margin: 10px 0;
}

.stat-card.active-subscribers {
    border-top: 4px solid #0a7d33;
}

.stat-card.paused-subscribers {
    border-top: 4px solid #b78105;
}

.stat-card.cancelled-subscribers {
    border-top: 4px solid #d63638;
}

.stat-card.total-revenue {
    border-top: 4px solid #2271b1;
}

/* Loading indicator */
.loading-indicator {
    display: none;
    text-align: center;
    padding: 20px;
}

.loading-indicator .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    vertical-align: middle;
}

/* Notification styling */
.notification-message {
    position: relative;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    border-left: 4px solid #000;
}

.notification-success {
    background-color: #e3f9e5;
    border-left-color: #0a7d33;
    color: #0a7d33;
}

.notification-error {
    background-color: #feeef0;
    border-left-color: #d63638;
    color: #d63638;
}

.notification-message p {
    margin: 0;
    padding-right: 30px;
}

.notice-dismiss {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    padding: 0;
    cursor: pointer;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.7;
}

.notice-dismiss:before {
    content: "\f153";
    display: block;
    font: normal 16px/20px dashicons;
    speak: never;
    height: 20px;
    width: 20px;
    text-align: center;
}

.notice-dismiss:hover {
    opacity: 1;
}
</style> 