<?php
/**
 * Provide a admin area view for pricing plan settings
 *
 * @link       https://yourwebsite.com
 * @since      1.0.0
 *
 * @package    Subscription_System
 * @subpackage Subscription_System/admin/partials
 */

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

// Prevent multiple inclusions of this file
if (defined('SS_PRICING_SETTINGS_DISPLAY_INCLUDED')) {
    return;
}
define('SS_PRICING_SETTINGS_DISPLAY_INCLUDED', true);

// Get current settings
$default_layout = get_option('subscription_default_layout', 'layout1');

// Add this at the top of the file
global $wp_settings_fields, $wp_settings_sections, $wp_registered_settings;

// At the top of the file, after checking for direct access
if (isset($_POST['save_layout_settings']) && check_admin_referer('save_layout_settings_nonce')) {
    $layout = isset($_POST['subscription_default_layout']) ? sanitize_text_field(wp_unslash($_POST['subscription_default_layout'])) : 'layout1';
    update_option('subscription_default_layout', $layout);
    
    // Show success message
    echo '<div class="notice notice-success is-dismissible"><p>' . esc_html__('Settings saved successfully.', 'subscription-system') . '</p></div>';
    
    // Refresh the default layout variable
    $default_layout = get_option('subscription_default_layout', 'layout1');
}
?>

<div class="wrap subscription-settings-page">
    <h1><?php echo esc_html__('Pricing Plan Settings', 'subscription-system'); ?></h1>
    
    <!-- Shortcode Info Box -->
    <div class="notice notice-info is-dismissible">
        <h3><?php echo esc_html__('Subscription Plans Shortcode:', 'subscription-system'); ?></h3>
        <p><?php echo esc_html__('Use the following shortcode to display your subscription plans:', 'subscription-system'); ?></p>
        <code>[pricing_plans]</code> <?php echo esc_html__('– This will use the default layout set in the admin settings.', 'subscription-system'); ?>
        <p><code>[pricing_plans layout="layout1" code="2"]</code> <?php echo esc_html__('– This will display plans in Layout 1 filtered by category ID.', 'subscription-system'); ?></p>
        <p><code>[pricing_plans layout="layout2" code="3"]</code> <?php echo esc_html__('– This will display plans in Layout 2 filtered by category ID.', 'subscription-system'); ?></p>
        <p><code>[pricing_plans layout="layout3" orientation="horizontal"]</code> <?php echo esc_html__('– This will display plans in Layout 3 with horizontal orientation.', 'subscription-system'); ?></p>
        <p><?php echo esc_html__('Customize your subscription plans display by adding this shortcode to any post or page.', 'subscription-system'); ?></p>
    </div>
    
    <form method="post" action="">
        <?php wp_nonce_field('save_layout_settings_nonce'); ?>
        
        <div class="layout-settings-section">
            <h2><?php echo esc_html__('Layout Settings', 'subscription-system'); ?></h2>
            <table class="form-table">
                <tr>
                    <th scope="row"><?php echo esc_html__('Default Pricing Layout', 'subscription-system'); ?></th>
                    <td>
                        <select name="subscription_default_layout" id="default-layout">
                            <option value="layout1" <?php selected($default_layout, 'layout1'); ?>><?php echo esc_html__('Layout 1', 'subscription-system'); ?></option>
                            <option value="layout2" <?php selected($default_layout, 'layout2'); ?>><?php echo esc_html__('Layout 2', 'subscription-system'); ?></option>
                            <option value="layout3" <?php selected($default_layout, 'layout3'); ?>><?php echo esc_html__('Layout 3', 'subscription-system'); ?></option>
                        </select>
                    </td>
                </tr>
            </table>
            <p class="submit">
                <input type="submit" name="save_layout_settings" class="button button-primary" value="<?php esc_attr_e('Save Changes', 'subscription-system'); ?>">
            </p>
        </div>
        
        <!-- Layout Previews -->
        <div class="layout-previews-section">
            <h2><?php echo esc_html__('Layout Previews', 'subscription-system'); ?></h2>
            <p><?php echo esc_html__('Current default layout:', 'subscription-system'); ?> <strong><?php echo esc_html(ucfirst($default_layout)); ?></strong></p>
            
            <div class="layout-tabs">
                <div class="layout-tab <?php echo ($default_layout === 'layout1') ? 'active' : ''; ?>" data-layout="layout1"><?php echo esc_html__('Layout 1', 'subscription-system'); ?></div>
                <div class="layout-tab <?php echo ($default_layout === 'layout2') ? 'active' : ''; ?>" data-layout="layout2"><?php echo esc_html__('Layout 2', 'subscription-system'); ?></div>
                <div class="layout-tab <?php echo ($default_layout === 'layout3') ? 'active' : ''; ?>" data-layout="layout3"><?php echo esc_html__('Layout 3', 'subscription-system'); ?></div>
            </div>
            
            <div class="layout-preview layout1-preview <?php echo ($default_layout === 'layout1') ? 'active' : ''; ?>">
                <h3><?php echo esc_html__('Layout 1 Preview', 'subscription-system'); ?></h3>
                <div class="ss-pricing-container ss-layout1">
                    <!-- Layout 1 Preview Content -->
                    <div class="ss-pricing-plans">
                        <div class="ss-pricing-plan">
                            <div class="ss-plan-header">
                                <h3>BASIC</h3>
                                <div class="ss-price">$19.99<span>/month</span></div>
                            </div>
                            <div class="ss-plan-features">
                                <ul>
                                    <li>5GB Disk Space</li>
                                    <li>10 Domain Names</li>
                                    <li>5 E-Mail Address</li>
                                    <li>50GB Monthly Bandwidth</li>
                                    <li>Fully Support</li>
                                </ul>
                            </div>
                            <div class="ss-plan-footer">
                                <a href="#" class="ss-button">Order Now</a>
                            </div>
                        </div>
                        
                        <div class="ss-pricing-plan ss-featured">
                            <div class="ss-plan-header">
                                <h3>STANDARD</h3>
                                <div class="ss-price">$29.99<span>/month</span></div>
                            </div>
                            <div class="ss-plan-features">
                                <ul>
                                    <li>10GB Disk Space</li>
                                    <li>20 Domain Names</li>
                                    <li>10 E-Mail Address</li>
                                    <li>100GB Monthly Bandwidth</li>
                                    <li>Fully Support</li>
                                </ul>
                            </div>
                            <div class="ss-plan-footer">
                                <a href="#" class="ss-button">Order Now</a>
                            </div>
                        </div>
                        
                        <div class="ss-pricing-plan">
                            <div class="ss-plan-header">
                                <h3>PREMIUM</h3>
                                <div class="ss-price">$49.99<span>/month</span></div>
                            </div>
                            <div class="ss-plan-features">
                                <ul>
                                    <li>50GB Disk Space</li>
                                    <li>50 Domain Names</li>
                                    <li>20 E-Mail Address</li>
                                    <li>300GB Monthly Bandwidth</li>
                                    <li>Fully Support</li>
                                </ul>
                            </div>
                            <div class="ss-plan-footer">
                                <a href="#" class="ss-button">Order Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="layout-preview layout2-preview <?php echo ($default_layout === 'layout2') ? 'active' : ''; ?>">
                <h3><?php echo esc_html__('Layout 2 Preview', 'subscription-system'); ?></h3>
                <div class="ss-pricing-container ss-layout2">
                    <!-- Layout 2 Preview Content -->
                    <div class="ss-pricing-plans">
                        <div class="ss-pricing-plan">
                            <div class="ss-plan-header">
                                <h3>BASIC</h3>
                                <div class="ss-price">$19.99<span>/month</span></div>
                            </div>
                            <div class="ss-plan-features">
                                <ul>
                                    <li>5GB Disk Space</li>
                                    <li>10 Domain Names</li>
                                    <li>5 E-Mail Address</li>
                                    <li>50GB Monthly Bandwidth</li>
                                    <li>Fully Support</li>
                                </ul>
                            </div>
                            <div class="ss-plan-footer">
                                <a href="#" class="ss-button">Order Now</a>
                            </div>
                        </div>
                        
                        <div class="ss-pricing-plan ss-featured">
                            <div class="ss-plan-header">
                                <h3>STANDARD</h3>
                                <div class="ss-price">$29.99<span>/month</span></div>
                            </div>
                            <div class="ss-plan-features">
                                <ul>
                                    <li>10GB Disk Space</li>
                                    <li>20 Domain Names</li>
                                    <li>10 E-Mail Address</li>
                                    <li>100GB Monthly Bandwidth</li>
                                    <li>Fully Support</li>
                                </ul>
                            </div>
                            <div class="ss-plan-footer">
                                <a href="#" class="ss-button">Order Now</a>
                            </div>
                        </div>
                        
                        <div class="ss-pricing-plan">
                            <div class="ss-plan-header">
                                <h3>PREMIUM</h3>
                                <div class="ss-price">$49.99<span>/month</span></div>
                            </div>
                            <div class="ss-plan-features">
                                <ul>
                                    <li>50GB Disk Space</li>
                                    <li>50 Domain Names</li>
                                    <li>20 E-Mail Address</li>
                                    <li>300GB Monthly Bandwidth</li>
                                    <li>Fully Support</li>
                                </ul>
                            </div>
                            <div class="ss-plan-footer">
                                <a href="#" class="ss-button">Order Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="layout-preview layout3-preview <?php echo ($default_layout === 'layout3') ? 'active' : ''; ?>">
                <h3><?php echo esc_html__('Layout 3 Preview', 'subscription-system'); ?></h3>
                <div class="ss-pricing-container ss-layout3">
                    <!-- Layout 3 Preview Content -->
                    <div class="ss-pricing-plans">
                        <div class="ss-pricing-plan">
                            <div class="ss-plan-header">
                                <h3>BASIC</h3>
                                <div class="ss-price">$19.99<span>/month</span></div>
                            </div>
                            <div class="ss-plan-features">
                                <ul>
                                    <li>5GB Disk Space</li>
                                    <li>10 Domain Names</li>
                                    <li>5 E-Mail Address</li>
                                    <li>50GB Monthly Bandwidth</li>
                                    <li>Fully Support</li>
                                </ul>
                            </div>
                            <div class="ss-plan-footer">
                                <a href="#" class="ss-button">Order Now</a>
                            </div>
                        </div>
                        
                        <div class="ss-pricing-plan ss-featured">
                            <div class="ss-plan-header">
                                <h3>STANDARD</h3>
                                <div class="ss-price">$29.99<span>/month</span></div>
                            </div>
                            <div class="ss-plan-features">
                                <ul>
                                    <li>10GB Disk Space</li>
                                    <li>20 Domain Names</li>
                                    <li>10 E-Mail Address</li>
                                    <li>100GB Monthly Bandwidth</li>
                                    <li>Fully Support</li>
                                </ul>
                            </div>
                            <div class="ss-plan-footer">
                                <a href="#" class="ss-button">Order Now</a>
                            </div>
                        </div>
                        
                        <div class="ss-pricing-plan">
                            <div class="ss-plan-header">
                                <h3>PREMIUM</h3>
                                <div class="ss-price">$49.99<span>/month</span></div>
                            </div>
                            <div class="ss-plan-features">
                                <ul>
                                    <li>50GB Disk Space</li>
                                    <li>50 Domain Names</li>
                                    <li>20 E-Mail Address</li>
                                    <li>300GB Monthly Bandwidth</li>
                                    <li>Fully Support</li>
                                </ul>
                            </div>
                            <div class="ss-plan-footer">
                                <a href="#" class="ss-button">Order Now</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<style>
/* Layout Preview Styles */
.layout-previews-section {
    margin-top: 30px;
}

.layout-tabs {
    display: flex;
    margin-bottom: 0;
    border-bottom: 1px solid #ccc;
}

.layout-tab {
    padding: 12px 25px;
    cursor: pointer;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-bottom: none;
    margin-right: 5px;
    border-radius: 5px 5px 0 0;
    font-weight: 500;
    transition: all 0.2s ease;
}

.layout-tab:hover {
    background-color: #f0f0f0;
}

.layout-tab.active {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    font-weight: bold;
    color: #2271b1;
}

.layout-preview {
    display: none;
    padding: 30px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
    overflow-x: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.layout-preview.active {
    display: block;
}

.layout-preview h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 18px;
    color: #23282d;
    font-weight: 500;
}

/* Common styles for all layouts */
.ss-pricing-container {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 20px 0;
    background: transparent !important;
}

.ss-pricing-plans {
    display: flex;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    gap: 20px;
    flex-wrap: wrap;
}

.ss-pricing-plan {
    flex: 1;
    max-width: 350px;
    min-width: 280px;
    background-color: transparent !important;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e0e0e0;
    position: relative;
}

.ss-pricing-plan:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.ss-plan-header {
    padding: 25px 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.ss-plan-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #333;
}

.ss-price {
    font-size: 34px;
    font-weight: bold;
    margin-top: 10px;
    color: #333;
}

.ss-price span {
    font-size: 16px;
    font-weight: normal;
    opacity: 0.8;
}

.ss-plan-features {
    padding: 0;
}

.ss-plan-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ss-plan-features li {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
    font-size: 14px;
    color: #555;
}

.ss-plan-footer {
    padding: 25px;
    text-align: center;
    background-color: transparent;
}

.ss-button {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background-color: #0073aa;
    color: white;
    border: none;
}

.ss-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    background-color: #005a87;
}

/* Layout 1 Styles - Modern Clean */
.ss-layout1 .ss-pricing-plan {
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.07);
    background: white !important;
}

.ss-layout1 .ss-pricing-plan.ss-featured {
    border: 2px solid #0073aa;
    transform: translateY(-10px);
    position: relative;
}

.ss-layout1 .ss-pricing-plan.ss-featured::after {
    content: 'POPULAR';
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #0073aa;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 20px;
    font-weight: bold;
}

.ss-layout1 .ss-plan-header h3 {
    color: #333;
}

.ss-layout1 .ss-featured .ss-plan-header h3 {
    color: #0073aa;
}

.ss-layout1 .ss-price {
    color: #0073aa;
}

.ss-layout1 .ss-plan-features li {
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
    position: relative;
}

.ss-layout1 .ss-plan-footer {
    background-color: transparent;
}

.ss-layout1 .ss-button {
    background-color: #0073aa;
    color: white;
}

.ss-layout1 .ss-featured .ss-button {
    background-color: #0073aa;
    color: white;
}

/* Layout 2 Styles - Elegant Design */
.ss-layout2 .ss-pricing-plan {
    border: 1px solid #e8e8e8;
    background: white !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.ss-layout2 .ss-pricing-plan.ss-featured {
    border: 2px solid #6a11cb;
    transform: scale(1.05);
    z-index: 1;
    box-shadow: 0 15px 30px rgba(106, 17, 203, 0.2);
    position: relative;
}

.ss-layout2 .ss-pricing-plan.ss-featured::before {
    content: 'POPULAR';
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #6a11cb;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 20px;
    font-weight: bold;
}

.ss-layout2 .ss-plan-header {
    padding: 30px 20px;
    position: relative;
}

.ss-layout2 .ss-plan-header h3 {
    color: #333;
}

.ss-layout2 .ss-featured .ss-plan-header h3 {
    color: #6a11cb;
}

.ss-layout2 .ss-price {
    color: #6a11cb;
    font-size: 36px;
}

.ss-layout2 .ss-plan-features li {
    padding: 15px;
    border-top: none;
    border-bottom: 1px solid #f0f0f0;
    text-align: center;
    position: relative;
}

.ss-layout2 .ss-plan-footer {
    background-color: transparent;
    padding-top: 30px;
}

.ss-layout2 .ss-button {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border: none;
    box-shadow: 0 5px 15px rgba(106, 17, 203, 0.3);
}

.ss-layout2 .ss-featured .ss-button {
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    color: white;
}

/* Layout 3 Styles - Modern Cards */
.ss-layout3 .ss-pricing-plan {
    border-radius: 15px;
    border: 1px solid #e5e5e5;
    background: white !important;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.ss-layout3 .ss-pricing-plan:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.ss-layout3 .ss-pricing-plan.ss-featured {
    border: 2px solid #4CAF50;
    box-shadow: 0 15px 30px rgba(76, 175, 80, 0.25);
    position: relative;
}

.ss-layout3 .ss-pricing-plan.ss-featured::before {
    content: 'BEST VALUE';
    position: absolute;
    top: 15px;
    right: -35px;
    background-color: #FF9800;
    color: white;
    padding: 5px 40px;
    font-size: 12px;
    transform: rotate(45deg);
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 1;
}

.ss-layout3 .ss-plan-header {
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
    border-bottom: none;
}

.ss-layout3 .ss-plan-header h3 {
    color: #333;
}

.ss-layout3 .ss-featured .ss-plan-header h3 {
    color: #4CAF50;
}

.ss-layout3 .ss-price {
    color: #4CAF50;
}

.ss-layout3 .ss-plan-features li {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #555;
}

.ss-layout3 .ss-plan-features li:before {
    content: "✓";
    color: #4CAF50;
    margin-right: 15px;
    font-weight: bold;
}

.ss-layout3 .ss-plan-footer {
    padding: 30px;
    text-align: center;
    background-color: transparent;
}

.ss-layout3 .ss-button {
    background-color: #4CAF50;
    color: white;
    border-radius: 30px;
    padding: 14px 35px;
    box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
    transition: all 0.3s ease;
}

.ss-layout3 .ss-featured .ss-button {
    background-color: #4CAF50;
    color: white;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .ss-pricing-plans {
        flex-direction: column;
        align-items: center;
    }
    
    .ss-pricing-plan {
        width: 100%;
        max-width: 450px;
        margin-bottom: 20px;
    }
    
    .ss-layout1 .ss-pricing-plan.ss-featured,
    .ss-layout2 .ss-pricing-plan.ss-featured,
    .ss-layout3 .ss-pricing-plan.ss-featured {
        transform: none;
    }
}
</style>

<script>
jQuery(document).ready(function($) {
    // Switch tabs
    $('.layout-tab').on('click', function() {
        var layout = $(this).data('layout');
        
        // Update tabs
        $('.layout-tab').removeClass('active');
        $(this).addClass('active');
        
        // Update previews
        $('.layout-preview').removeClass('active');
        $('.' + layout + '-preview').addClass('active');
        
        // Update select
        $('#default-layout').val(layout);
    });
    
    // Update active tab when changing default layout select
    $('#default-layout').on('change', function() {
        var layout = $(this).val();
        $('.layout-tab').removeClass('active');
        $('.layout-tab[data-layout="' + layout + '"]').addClass('active');
        
        $('.layout-preview').removeClass('active');
        $('.' + layout + '-preview').addClass('active');
    });
});
</script> 