<?php
/**
 * Demo Page Template for Product Compare Kav
 * 
 * Copy this file to your theme directory and create a new page with this template
 * to see the plugin in action.
 */

get_header();
?>

<div class="container" style="max-width: 1200px; margin: 0 auto; padding: 20px;">
    <h1 style="text-align: center; margin-bottom: 40px;"><?php _e('Product Compare Demo', 'kavehTheme'); ?></h1>
    
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 40px;">
        <h2><?php _e('How to use:', 'kavehTheme'); ?></h2>
        <ol>
            <li><?php _e('Browse products and click "Add to compare" buttons', 'kavehTheme'); ?></li>
            <li><?php _e('View the comparison table below', 'kavehTheme'); ?></li>
            <li><?php _e('Add more products using the "Add Product" button', 'kavehTheme'); ?></li>
            <li><?php _e('Remove products by clicking the X button', 'kavehTheme'); ?></li>
        </ol>
    </div>
    
    <!-- Recent Products with Compare Buttons -->
    <h2><?php _e('Recent Products', 'kavehTheme'); ?></h2>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-bottom: 40px;">
        <?php
        $recent_products = wc_get_products(array(
            'limit' => 8,
            'status' => 'publish',
            'orderby' => 'date',
            'order' => 'DESC'
        ));
        
        foreach ($recent_products as $product) :
            $product_id = $product->get_id();
            $image_url = wp_get_attachment_image_url($product->get_image_id(), 'medium');
        ?>
            <div style="border: 1px solid #ddd; border-radius: 8px; padding: 15px; text-align: center; background: white;">
                <?php if ($image_url) : ?>
                    <img src="<?php echo esc_url($image_url); ?>" alt="<?php echo esc_attr($product->get_name()); ?>" style="width: 100%; max-width: 150px; height: 150px; object-fit: cover; margin-bottom: 10px;">
                <?php endif; ?>
                
                <h3 style="font-size: 16px; margin: 10px 0;">
                    <a href="<?php echo esc_url($product->get_permalink()); ?>" style="text-decoration: none; color: #333;">
                        <?php echo esc_html($product->get_name()); ?>
                    </a>
                </h3>
                
                <div style="margin: 10px 0; font-weight: bold; color: #3d5aff;">
                    <?php echo $product->get_price_html(); ?>
                </div>
                
                <div style="margin-top: 15px;">
                    <?php
                    // Manually add compare button
                    $compare_instance = ProductCompareKav::get_instance();
                    $GLOBALS['product'] = $product;
                    $compare_instance->add_compare_button();
                    ?>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
    
    <!-- Shortcode Examples -->
    <h2><?php _e('Shortcode Examples', 'kavehTheme'); ?></h2>
    <div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 40px;">
        <h3><?php _e('Different Button Styles:', 'kavehTheme'); ?></h3>
        <div style="display: flex; gap: 15px; flex-wrap: wrap; margin-bottom: 20px;">
            <?php if (!empty($recent_products)) : ?>
                <div>
                    <p><strong><?php _e('Default Button:', 'kavehTheme'); ?></strong></p>
                    <?php echo do_shortcode('[compare_button id="' . $recent_products[0]->get_id() . '"]'); ?>
                </div>
                
                <div>
                    <p><strong><?php _e('Red Button:', 'kavehTheme'); ?></strong></p>
                    <?php echo do_shortcode('[compare_button id="' . $recent_products[0]->get_id() . '" background_color="#dc3545" radius="8"]'); ?>
                </div>
                
                <div>
                    <p><strong><?php _e('Green Rounded:', 'kavehTheme'); ?></strong></p>
                    <?php echo do_shortcode('[compare_button id="' . $recent_products[0]->get_id() . '" background_color="#28a745" color="#ffffff" radius="20"]'); ?>
                </div>
                
                <div>
                    <p><strong><?php _e('Link Style:', 'kavehTheme'); ?></strong></p>
                    <?php echo do_shortcode('[compare_button id="' . $recent_products[0]->get_id() . '" tag="a" background_color="transparent" color="#007cba" style="text_only"]'); ?>
                </div>
                
                <div>
                    <p><strong><?php _e('Icon Only:', 'kavehTheme'); ?></strong></p>
                    <?php echo do_shortcode('[compare_button id="' . $recent_products[0]->get_id() . '" style="icon_only" background_color="#6f42c1" radius="50"]'); ?>
                </div>
            <?php endif; ?>
        </div>
        
        <h4><?php _e('Shortcode Examples:', 'kavehTheme'); ?></h4>
        <div style="background: white; padding: 15px; border-radius: 4px; font-family: monospace; font-size: 12px;">
            <p><code>[compare_button id="123"]</code> - <?php _e('Basic button', 'kavehTheme'); ?></p>
            <p><code>[compare_button id="123" background_color="#dc3545" radius="8"]</code> - <?php _e('Red button with rounded corners', 'kavehTheme'); ?></p>
            <p><code>[compare_button id="123" background_color="#28a745" color="#ffffff" radius="20"]</code> - <?php _e('Green button with custom colors', 'kavehTheme'); ?></p>
            <p><code>[compare_button id="123" tag="a" style="text_only"]</code> - <?php _e('Link-style text only', 'kavehTheme'); ?></p>
            <p><code>[compare_button id="123" style="icon_only" radius="50"]</code> - <?php _e('Circular icon button', 'kavehTheme'); ?></p>
        </div>
    </div>
    
    <!-- Comparison Table -->
    <h2><?php _e('Product Comparison', 'kavehTheme'); ?></h2>
    <div style="margin-bottom: 40px;">
        <?php echo do_shortcode('[product_compare_kav]'); ?>
    </div>
    
    <!-- Instructions -->
    <div style="background: #e7f3ff; padding: 20px; border-radius: 8px; border-left: 4px solid #3d5aff;">
        <h3><?php _e('Plugin Features:', 'kavehTheme'); ?></h3>
        <ul>
            <li><?php _e('✅ Beautiful Persian/RTL design', 'kavehTheme'); ?></li>
            <li><?php _e('✅ Responsive layout', 'kavehTheme'); ?></li>
            <li><?php _e('✅ AJAX-powered functionality', 'kavehTheme'); ?></li>
            <li><?php _e('✅ Cookie-based storage (no database required)', 'kavehTheme'); ?></li>
            <li><?php _e('✅ Compare up to 4 products (configurable)', 'kavehTheme'); ?></li>
            <li><?php _e('✅ Product search in modal', 'kavehTheme'); ?></li>
            <li><?php _e('✅ Advanced shortcode support with styling options', 'kavehTheme'); ?></li>
            <li><?php _e('✅ Customizable button styles (colors, radius, HTML tags)', 'kavehTheme'); ?></li>
            <li><?php _e('✅ New modern compare icon', 'kavehTheme'); ?></li>
            <li><?php _e('✅ Shortcode options override admin settings', 'kavehTheme'); ?></li>
            <li><?php _e('✅ WooCommerce integration', 'kavehTheme'); ?></li>
        </ul>
        
        <p><strong><?php _e('Shortcodes:', 'kavehTheme'); ?></strong></p>
        <ul>
            <li><code>[product_compare_kav]</code> - <?php _e('Display comparison table', 'kavehTheme'); ?></li>
            <li><code>[compare_button id="123"]</code> - <?php _e('Display compare button for specific product', 'kavehTheme'); ?></li>
        </ul>
        <p><strong><?php _e('Admin Settings:', 'kavehTheme'); ?></strong> <?php _e('WooCommerce → Product Compare', 'kavehTheme'); ?></p>
    </div>
</div>

<style>
/* Additional demo styles */
.compare-kav-btn {
    margin-top: 10px;
}

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
}
</style>

<?php
get_footer();
?>