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

// Get billing information from user meta
$user_id = get_current_user_id();
$billing_info = array(
    'billing_first_name' => get_user_meta($user_id, 'billing_first_name', true),
    'billing_last_name' => get_user_meta($user_id, 'billing_last_name', true),
    'billing_company' => get_user_meta($user_id, 'billing_company', true),
    'billing_address_1' => get_user_meta($user_id, 'billing_address_1', true),
    'billing_address_2' => get_user_meta($user_id, 'billing_address_2', true),
    'billing_city' => get_user_meta($user_id, 'billing_city', true),
    'billing_state' => get_user_meta($user_id, 'billing_state', true),
    'billing_postcode' => get_user_meta($user_id, 'billing_postcode', true),
    'billing_country' => get_user_meta($user_id, 'billing_country', true),
    'billing_email' => get_user_meta($user_id, 'billing_email', true),
    'billing_phone' => get_user_meta($user_id, 'billing_phone', true),
);

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

$subscription = $wpdb->get_row($wpdb->prepare(
    "SELECT s.*, p.plan_name, p.duration 
     FROM $subscription_table s 
     LEFT JOIN $plans_table p ON s.plan_id = p.id 
     WHERE s.user_id = %d 
     ORDER BY s.id DESC 
     LIMIT 1",
    $user_id
));

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

<div class="account-tab-content billing-tab">
    <h2><?php echo esc_html__('Billing Information', 'subscription-system'); ?></h2>
    
    <div class="subscription-system-message-container"></div>
    
    <div class="billing-section">
        <div class="billing-info-card">
            <h3><?php echo esc_html__('Billing Details', 'subscription-system'); ?></h3>
            
            <form id="billing-info-form" class="subscription-system-form">
                <div class="form-row">
                    <div class="two-columns">
                        <div class="form-group">
                            <label for="billing_first_name"><?php echo esc_html__('First Name', 'subscription-system'); ?></label>
                            <input type="text" id="billing_first_name" name="billing_first_name" class="form-control" value="<?php echo esc_attr($billing_info['billing_first_name']); ?>">
                        </div>
                        
                        <div class="form-group">
                            <label for="billing_last_name"><?php echo esc_html__('Last Name', 'subscription-system'); ?></label>
                            <input type="text" id="billing_last_name" name="billing_last_name" class="form-control" value="<?php echo esc_attr($billing_info['billing_last_name']); ?>">
                        </div>
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="billing_company"><?php echo esc_html__('Company (Optional)', 'subscription-system'); ?></label>
                        <input type="text" id="billing_company" name="billing_company" class="form-control" value="<?php echo esc_attr($billing_info['billing_company']); ?>">
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="billing_address_1"><?php echo esc_html__('Address Line 1', 'subscription-system'); ?></label>
                        <input type="text" id="billing_address_1" name="billing_address_1" class="form-control" value="<?php echo esc_attr($billing_info['billing_address_1']); ?>">
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="billing_address_2"><?php echo esc_html__('Address Line 2 (Optional)', 'subscription-system'); ?></label>
                        <input type="text" id="billing_address_2" name="billing_address_2" class="form-control" value="<?php echo esc_attr($billing_info['billing_address_2']); ?>">
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="three-columns">
                        <div class="form-group">
                            <label for="billing_city"><?php echo esc_html__('City', 'subscription-system'); ?></label>
                            <input type="text" id="billing_city" name="billing_city" class="form-control" value="<?php echo esc_attr($billing_info['billing_city']); ?>">
                        </div>
                        
                        <div class="form-group">
                            <label for="billing_state"><?php echo esc_html__('State/Province', 'subscription-system'); ?></label>
                            <input type="text" id="billing_state" name="billing_state" class="form-control" value="<?php echo esc_attr($billing_info['billing_state']); ?>">
                        </div>
                        
                        <div class="form-group">
                            <label for="billing_postcode"><?php echo esc_html__('Postal Code', 'subscription-system'); ?></label>
                            <input type="text" id="billing_postcode" name="billing_postcode" class="form-control" value="<?php echo esc_attr($billing_info['billing_postcode']); ?>">
                        </div>
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="form-group">
                        <label for="billing_country"><?php echo esc_html__('Country', 'subscription-system'); ?></label>
                        <input type="text" id="billing_country" name="billing_country" class="form-control" value="<?php echo esc_attr($billing_info['billing_country']); ?>">
                    </div>
                </div>
                
                <div class="form-row">
                    <div class="two-columns">
                        <div class="form-group">
                            <label for="billing_email"><?php echo esc_html__('Email', 'subscription-system'); ?></label>
                            <input type="email" id="billing_email" name="billing_email" class="form-control" value="<?php echo esc_attr($billing_info['billing_email']); ?>">
                        </div>
                        
                        <div class="form-group">
                            <label for="billing_phone"><?php echo esc_html__('Phone', 'subscription-system'); ?></label>
                            <input type="tel" id="billing_phone" name="billing_phone" class="form-control" value="<?php echo esc_attr($billing_info['billing_phone']); ?>">
                        </div>
                    </div>
                </div>
                
                <div class="form-row">
                    <button type="submit" class="subscription-system-btn subscription-system-btn-primary">
                        <?php echo esc_html__('Update Billing Information', 'subscription-system'); ?>
                    </button>
                </div>
                
                <?php wp_nonce_field('subs_sys_nonce', 'billing_nonce'); ?>
            </form>
        </div>
    </div>
    
    <script>
    jQuery(document).ready(function($) {
        $('#billing-info-form').on('submit', function(e) {
            e.preventDefault();
            
            var formData = $(this).serialize();
            var messageContainer = $('.subscription-system-message-container');
            
            // Clear previous messages
            messageContainer.empty();
            
            // Disable submit button
            $('.subscription-system-btn-primary').prop('disabled', true).text('<?php echo esc_js(__('Updating...', 'subscription-system')); ?>');
            
            // Send AJAX request
            $.ajax({
                url: '<?php echo esc_url(admin_url('admin-ajax.php')); ?>',
                type: 'POST',
                data: {
                    action: 'update_billing_info',
                    nonce: '<?php echo esc_attr(wp_create_nonce('update_billing_nonce')); ?>',
                    formData: formData
                },
                success: function(response) {
                    if (response.success) {
                        messageContainer.html('<div class="subscription-system-message success">' + response.data.message + '</div>');
                    } else {
                        messageContainer.html('<div class="subscription-system-message error">' + response.data.message + '</div>');
                    }
                    
                    // Re-enable submit button
                    $('.subscription-system-btn-primary').prop('disabled', false).text('<?php echo esc_js(__('Update Billing Information', 'subscription-system')); ?>');
                },
                error: function() {
                    messageContainer.html('<div class="subscription-system-message error"><?php echo esc_js(__('An error occurred. Please try again.', 'subscription-system')); ?></div>');
                    
                    // Re-enable submit button
                    $('.subscription-system-btn-primary').prop('disabled', false).text('<?php echo esc_js(__('Update Billing Information', 'subscription-system')); ?>');
                }
            });
        });
    });
    </script>
    
    <style>
    .billing-tab {
        max-width: 900px;
        margin: 0 auto;
    }
    
    .billing-tab h2 {
        font-size: 28px;
        color: #23282d;
        margin-bottom: 25px;
        position: relative;
        padding-bottom: 15px;
        border-bottom: 2px solid #f0f0f1;
    }
    
    .billing-tab h2:after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 60px;
        height: 2px;
        background-color: #2271b1;
    }
    
    .billing-section {
        margin-bottom: 30px;
    }
    
    .billing-info-card, 
    .subscription-period-card {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
        padding: 30px;
        border: 1px solid #e5e5e5;
    }
    
    .billing-section h3 {
        margin-top: 0;
        margin-bottom: 20px;
        font-size: 20px;
        color: #23282d;
    }
    
    .subscription-system-form .form-row {
        margin-bottom: 20px;
    }
    
    .subscription-system-form .two-columns {
        display: flex;
        gap: 20px;
    }
    
    .subscription-system-form .three-columns {
        display: flex;
        gap: 15px;
    }
    
    .subscription-system-form .form-group {
        flex: 1;
    }
    
    .subscription-system-form label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #23282d;
    }
    
    .subscription-system-form .form-control {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #dcdcde;
        border-radius: 4px;
        font-size: 14px;
    }
    
    .subscription-system-form .form-control:focus {
        border-color: #2271b1;
        box-shadow: 0 0 0 1px #2271b1;
        outline: 2px solid transparent;
    }
    
    .subscription-system-btn {
        display: inline-block;
        padding: 12px 24px;
        border-radius: 4px;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease;
        border: none;
        font-size: 14px;
    }
    
    .subscription-system-btn-primary {
        background-color: #2271b1;
        color: #fff;
    }
    
    .subscription-system-btn-primary:hover {
        background-color: #135e96;
    }
    
    .subscription-system-message {
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 20px;
    }
    
    .subscription-system-message.success {
        background-color: #e3f9e5;
        color: #0a7d33;
        border: 1px solid #a3e9b7;
    }
    
    .subscription-system-message.error {
        background-color: #feeef0;
        color: #d63638;
        border: 1px solid #f5c2c7;
    }
    
    @media (max-width: 768px) {
        .subscription-system-form .two-columns,
        .subscription-system-form .three-columns {
            flex-direction: column;
            gap: 15px;
        }
        
        .billing-info-card, 
        .subscription-period-card {
            padding: 20px;
        }
    }
    </style>
</div> 