<?php
/**
 * Account subscription history 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();

// Get subscription information
global $wpdb;
$subscriptions_table = $wpdb->prefix . 'subscriptions';
$plans_table = $wpdb->prefix . 'subscription_plans';

// Get currency from options
$currency = get_option('subscription_currency', 'USD');

// Get user info
$user_info = get_userdata($user_id);
$username = $user_info->user_login;
?>

<div class="account-tab-content history-tab">
    <div class="subscription-history-header">
        <h2><?php esc_html_e('Subscription History', 'subscription-system'); ?></h2>
        <p><?php 
        /* translators: %s: username wrapped in HTML strong tags */
        echo sprintf(esc_html__('View and manage all your subscription history for account %s.', 'subscription-system'), '<strong>' . esc_html($username) . '</strong>'); ?></p>
    </div>
    
    <div class="subscription-history-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="expired"><?php echo esc_html__('Expired', 'subscription-system'); ?></option>
            </select>
        </div>
        
        <div class="filter-group date-range">
            <label for="date-from"><?php echo esc_html__('Date Range:', 'subscription-system'); ?></label>
            <div class="date-inputs">
                <input type="date" id="date-from" class="date-filter" placeholder="<?php echo esc_attr__('From', 'subscription-system'); ?>">
                <span class="date-separator">-</span>
                <input type="date" id="date-to" class="date-filter" placeholder="<?php echo esc_attr__('To', 'subscription-system'); ?>">
            </div>
        </div>
        
        <button type="button" id="reset-filters" class="subscription-system-btn subscription-system-btn-secondary">
            <i class="dashicons dashicons-dismiss"></i>
            <?php echo esc_html__('Reset Filters', 'subscription-system'); ?>
        </button>
    </div>
    
    <div id="history-content">
        <?php 
        // Include the subscription history component with full functionality
        $history_title = __('Complete Subscription History', 'subscription-system');
        $show_actions = true; // Show action buttons
        $show_invoice = true; // Show invoice button
        include plugin_dir_path(dirname(dirname(__FILE__))) . 'partials/components/subscription-history.php';
        ?>
    </div>
    
    <script>
    jQuery(document).ready(function($) {
        // Filter functionality
        function filterHistory() {
            $('#history-content').addClass('loading-state');
            
            var statusFilter = $('#status-filter').val();
            var dateFrom = $('#date-from').val();
            var dateTo = $('#date-to').val();
            
            $('.subscription-history-table tbody tr').each(function() {
                var $row = $(this);
                var showRow = true;
                
                // Status filter
                if (statusFilter !== 'all') {
                    var rowStatus = $row.find('.subscription-status').attr('class').split(' ')[1];
                    if (rowStatus !== statusFilter) {
                        showRow = false;
                    }
                }
                
                // Date range filter
                if (dateFrom || dateTo) {
                    var startDateText = $row.find('td:nth-child(3)').text().trim();
                    var startDate = new Date(startDateText);
                    
                    if (dateFrom) {
                        var fromDate = new Date(dateFrom);
                        if (startDate < fromDate) {
                            showRow = false;
                        }
                    }
                    
                    if (dateTo) {
                        var toDate = new Date(dateTo);
                        if (startDate > toDate) {
                            showRow = false;
                        }
                    }
                }
                
                // Show/hide row
                if (showRow) {
                    $row.show();
                } else {
                    $row.hide();
                }
            });
            
            // Show message if no results
            if ($('.subscription-history-table tbody tr:visible').length === 0) {
                if ($('.no-results-message').length === 0) {
                    $('.subscription-history-wrapper').append('<p class="no-results-message"><?php echo esc_js(__('No subscriptions match your filters. Try adjusting your filter criteria.', 'subscription-system')); ?></p>');
                }
            } else {
                $('.no-results-message').remove();
            }
            
            setTimeout(function() {
                $('#history-content').removeClass('loading-state');
            }, 300);
        }
        
        // Bind filter events
        $('#status-filter, #date-from, #date-to').on('change', filterHistory);
        
        // Reset filters
        $('#reset-filters').on('click', function() {
            $('#status-filter').val('all');
            $('#date-from, #date-to').val('');
            $('.subscription-history-table tbody tr').show();
            $('.no-results-message').remove();
        });
        
        // Initialize tooltips
        $('.subscription-action-btn').hover(function() {
            var $this = $(this);
            if (!$this.attr('title')) return;
            
            var tooltipText = $this.attr('title');
            $this.data('title', tooltipText).removeAttr('title');
            
            $('<div class="tooltip"></div>')
                .text(tooltipText)
                .appendTo('body')
                .css({
                    top: $this.offset().top - 30,
                    left: $this.offset().left + ($this.outerWidth() / 2) - 50
                })
                .fadeIn('fast');
        }, function() {
            var $this = $(this);
            $this.attr('title', $this.data('title'));
            $('.tooltip').remove();
        });
    });
    </script>
    
    <style>
    /* Enhanced History Tab Styling */
    .history-tab {
        max-width: 1100px;
        margin: 0 auto;
    }
    
    .history-tab h2 {
        font-size: 28px;
        color: #23282d;
        margin-bottom: 25px;
        position: relative;
        padding-bottom: 15px;
        border-bottom: 2px solid #f0f0f1;
    }
    
    .history-tab h2:after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 60px;
        height: 2px;
        background-color: #2271b1;
    }
    
    .history-intro {
        margin-bottom: 25px;
        color: #646970;
        font-size: 15px;
        line-height: 1.5;
        background-color: #f0f7fc;
        border-left: 4px solid #2271b1;
        padding: 15px 20px;
        border-radius: 0 4px 4px 0;
    }
    
    .history-intro strong {
        color: #2271b1;
    }
    
    /* Enhanced filters section */
    .subscription-history-filters {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 30px;
        padding: 25px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        align-items: center;
        position: relative;
    }
    
    .subscription-history-filters:before {
        content: '<?php echo esc_js(__('Filter History', 'subscription-system')); ?>';
        position: absolute;
        top: -10px;
        left: 20px;
        background-color: #fff;
        padding: 0 10px;
        font-size: 12px;
        color: #646970;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    
    .subscription-history-filters .filter-group {
        display: flex;
        align-items: center;
        position: relative;
    }
    
    .subscription-history-filters label {
        margin-right: 12px;
        font-weight: 600;
        min-width: 80px;
        color: #23282d;
    }
    
    .subscription-history-filters select {
        min-width: 200px;
        padding: 12px 15px;
        border: 1px solid #dcdcde;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
        transition: all 0.2s ease;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6"><path fill="%23646970" d="M0 0l6 6 6-6z"/></svg>');
        background-repeat: no-repeat;
        background-position: right 15px center;
        padding-right: 35px;
    }
    
    .subscription-history-filters select:focus {
        border-color: #2271b1;
        box-shadow: 0 0 0 1px #2271b1;
        outline: 2px solid transparent;
    }
    
    .subscription-history-filters .date-range {
        display: flex;
        align-items: center;
    }
    
    .subscription-history-filters .date-inputs {
        display: flex;
        align-items: center;
    }
    
    .subscription-history-filters input[type="date"] {
        padding: 11px 15px;
        border: 1px solid #dcdcde;
        border-radius: 4px;
        background-color: #fff;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
        min-width: 160px;
        transition: all 0.2s ease;
    }
    
    .subscription-history-filters input[type="date"]:focus {
        border-color: #2271b1;
        box-shadow: 0 0 0 1px #2271b1;
        outline: 2px solid transparent;
    }
    
    .subscription-history-filters .date-separator {
        margin: 0 10px;
        color: #646970;
        font-weight: 500;
    }
    
    .subscription-history-filters #reset-filters {
        margin-left: auto;
        display: flex;
        align-items: center;
        padding: 12px 18px;
        background-color: #f6f7f7;
        border: 1px solid #2271b1;
        color: #2271b1;
        border-radius: 4px;
        font-weight: 600;
        transition: all 0.2s ease;
    }
    
    .subscription-history-filters #reset-filters:hover {
        background-color: #f0f0f1;
        color: #135e96;
        border-color: #135e96;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    
    .subscription-history-filters #reset-filters .dashicons {
        margin-right: 8px;
        font-size: 16px;
        width: 16px;
        height: 16px;
    }
    
    /* Enhanced history component styling */
    #history-content {
        transition: all 0.3s ease;
        position: relative;
    }
    
    #history-content:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.7);
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    #history-content.loading-state:before {
        opacity: 1;
        visibility: visible;
    }
    
    #history-content.loading-state:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 3px solid rgba(34, 113, 177, 0.2);
        border-top-color: #2271b1;
        z-index: 11;
        animation: spin 1s infinite linear;
    }
    
    .subscription-history-component {
        margin-top: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        border: 1px solid #e5e5e5;
        padding: 25px;
        overflow: hidden;
    }
    
    .subscription-history-component h3 {
        margin-top: 0;
        margin-bottom: 25px;
        font-size: 20px;
        color: #23282d;
        position: relative;
        padding-bottom: 15px;
        border-bottom: 1px solid #e5e5e5;
    }
    
    .subscription-history-component h3:after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 40px;
        height: 2px;
        background-color: #2271b1;
    }
    
    .subscription-history-wrapper {
        overflow-x: auto;
    }
    
    .subscription-history-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
    
    .subscription-history-table th {
        background-color: #f6f7f7;
        font-weight: 600;
        color: #23282d;
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid #e5e5e5;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.5px;
    }
    
    .subscription-history-table td {
        padding: 15px;
        vertical-align: middle;
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.2s ease;
    }
    
    .subscription-history-table tr:last-child td {
        border-bottom: none;
    }
    
    .subscription-history-table tr:hover td {
        background-color: #f9f9f9;
    }
    
    /* Enhanced status badges */
    .subscription-status {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: center;
        min-width: 90px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .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, 
    .subscription-status.canceled {
        background-color: #feeef0;
        color: #d63638;
        border: 1px solid #f5c2c7;
    }
    
    .subscription-status.expired {
        background-color: #f0f0f1;
        color: #646970;
        border: 1px solid #dcdcde;
    }
    
    /* Enhanced action buttons */
    .subscription-actions-cell {
        white-space: nowrap;
    }
    
    .subscription-action-btn {
        display: inline-block;
        padding: 8px 14px;
        margin-right: 6px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
    
    .pause-subscription {
        background-color: #fff8e6;
        color: #b78105;
        border: 1px solid #ffeeba;
    }
    
    .pause-subscription:hover {
        background-color: #fff5d8;
        box-shadow: 0 2px 5px rgba(183, 129, 5, 0.15);
        transform: translateY(-1px);
    }
    
    .resume-subscription {
        background-color: #e3f9e5;
        color: #0a7d33;
        border: 1px solid #a3e9b7;
    }
    
    .resume-subscription:hover {
        background-color: #d1f7d7;
        box-shadow: 0 2px 5px rgba(10, 125, 51, 0.15);
        transform: translateY(-1px);
    }
    
    .cancel-subscription {
        background-color: #feeef0;
        color: #d63638;
        border: 1px solid #f5c2c7;
    }
    
    .cancel-subscription:hover {
        background-color: #fde8ea;
        box-shadow: 0 2px 5px rgba(214, 54, 56, 0.15);
        transform: translateY(-1px);
    }
    
    .renew-subscription {
        background-color: #e6f0fa;
        color: #2271b1;
        border: 1px solid #c5d9ed;
    }
    
    .renew-subscription:hover {
        background-color: #d9e7f6;
        box-shadow: 0 2px 5px rgba(34, 113, 177, 0.15);
        transform: translateY(-1px);
    }
    
    .view-invoice {
        background-color: #f0f0f1;
        color: #50575e;
        border: 1px solid #dcdcde;
    }
    
    .view-invoice:hover {
        background-color: #e5e5e5;
        box-shadow: 0 2px 5px rgba(80, 87, 94, 0.15);
        transform: translateY(-1px);
    }
    
    /* Enhanced footer */
    .subscription-history-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15px;
        padding: 12px 18px;
        background-color: #f9f9f9;
        border-radius: 4px;
        border: 1px solid #e5e5e5;
    }
    
    .showing-entries {
        color: #646970;
        font-size: 13px;
        margin: 0;
        font-style: italic;
    }
    
    .no-results-message {
        padding: 25px;
        text-align: center;
        background-color: #f9f9f9;
        border-radius: 4px;
        margin-top: 20px;
        color: #646970;
        border: 1px dashed #dcdcde;
        font-size: 15px;
    }
    
    .tooltip {
        position: absolute;
        background-color: #333;
        color: #fff;
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 12px;
        width: 120px;
        text-align: center;
        z-index: 100;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        opacity: 0.9;
    }
    
    .tooltip:after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 50%;
        margin-left: -6px;
        border-width: 6px 6px 0;
        border-style: solid;
        border-color: #333 transparent transparent;
    }
    
    @keyframes spin {
        0% { transform: translate(-50%, -50%) rotate(0deg); }
        100% { transform: translate(-50%, -50%) rotate(360deg); }
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        .history-tab h2 {
            font-size: 22px;
        }
        
        .subscription-history-filters {
            flex-direction: column;
            align-items: flex-start;
            padding: 20px;
        }
        
        .subscription-history-filters .filter-group {
            width: 100%;
            margin-bottom: 15px;
        }
        
        .subscription-history-filters label {
            min-width: 100px;
        }
        
        .subscription-history-filters select,
        .subscription-history-filters input[type="date"] {
            width: 100%;
        }
        
        .subscription-history-filters .date-range {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }
        
        .subscription-history-filters .date-inputs {
            width: 100%;
            margin-top: 10px;
            flex-direction: column;
        }
        
        .subscription-history-filters .date-inputs input[type="date"] {
            width: 100%;
            margin-bottom: 10px;
        }
        
        .subscription-history-filters .date-separator {
            display: none;
        }
        
        .subscription-history-filters #reset-filters {
            margin-left: 0;
            width: 100%;
            justify-content: center;
        }
        
        .subscription-history-component {
            padding: 15px;
        }
        
        .subscription-history-table th,
        .subscription-history-table td {
            padding: 10px;
        }
        
        .subscription-action-btn {
            padding: 6px 10px;
            font-size: 11px;
            margin-bottom: 5px;
            display: block;
            margin-right: 0;
            text-align: center;
        }
    }
    </style>
</div> 