<?php
/**
 * ============================================================================
 * MIGRATION GUIDE - How to Update Your Existing Code
 * ============================================================================
 * 
 * This document shows BEFORE and AFTER for common code patterns.
 * Use these examples to update your templates.
 */
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image System Migration Guide</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto;
            background: #f5f5f5;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        h1 {
            color: #111;
            margin-bottom: 20px;
            border-bottom: 3px solid #007bff;
            padding-bottom: 10px;
        }
        h2 {
            background: #f9f9f9;
            padding: 15px;
            margin: 30px 0 15px;
            border-left: 4px solid #007bff;
            color: #333;
        }
        .comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 20px 0;
        }
        .before, .after {
            background: white;
            padding: 20px;
            border-radius: 6px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .before {
            border-left: 4px solid #dc3545;
        }
        .before h3 {
            color: #dc3545;
        }
        .after {
            border-left: 4px solid #28a745;
        }
        .after h3 {
            color: #28a745;
        }
        pre {
            background: #f4f4f4;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
            font-size: 13px;
            font-family: 'Courier New', monospace;
            margin: 10px 0;
            line-height: 1.4;
        }
        .note {
            background: #e7f3ff;
            border-left: 4px solid #2196F3;
            padding: 15px;
            margin: 15px 0;
            border-radius: 4px;
        }
        .checklist {
            list-style: none;
        }
        .checklist li {
            padding: 8px 0;
            padding-left: 25px;
            position: relative;
        }
        .checklist li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #28a745;
            font-weight: bold;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
            background: white;
        }
        table th, table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        table th {
            background: #f9f9f9;
            font-weight: 600;
        }
        .file-path {
            background: #f0f0f0;
            padding: 8px 12px;
            border-radius: 4px;
            font-family: monospace;
            font-size: 12px;
            display: inline-block;
            margin: 10px 0;
        }
    </style>
</head>
<body>

<div class="container">

<h1>🔄 Migration Guide: Before & After</h1>

<!-- =========================================================================
     SHOP PAGE MIGRATION
     ========================================================================= -->
<h2>1. SHOP PAGE - Product Grid</h2>

<div class="comparison">
    <div class="before">
        <h3>❌ Before (Old Way)</h3>
        <pre><code>&lt;?php 
foreach ($products as $p) {
    $imageUrl = getImageForSection($p['image'], 'shop');
    // Result: /ecom/uploads/variants/product_shop.jpg
?&gt;
&lt;div class="product"&gt;
    &lt;img src="&lt;?php echo $imageUrl; ?&gt;" 
         style="width:260px; height:260px; object-fit:cover;"&gt;
&lt;/div&gt;
&lt;?php } ?&gt;</code></pre>
        <p style="margin-top: 10px; font-size: 13px; color: #666;">
            ❌ Hardcoded dimensions<br>
            ❌ Inline styles<br>
            ❌ Using variant image
        </p>
    </div>
    
    <div class="after">
        <h3>✓ After (New Way)</h3>
        <pre><code>&lt;?php 
foreach ($products as $p) {
    $imageUrl = getImageForSection($p['image']);
    // Result: /ecom/uploads/product.jpg
?&gt;
&lt;div class="product"&gt;
    &lt;div class="product-image"&gt;
        &lt;img src="&lt;?php echo $imageUrl; ?&gt;" 
             alt="&lt;?php echo htmlspecialchars($p['title']); ?&gt;"&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;?php } ?&gt;</code></pre>
        <p style="margin-top: 10px; font-size: 13px; color: #666;">
            ✓ No inline styles<br>
            ✓ CSS handles sizing<br>
            ✓ Same image everywhere
        </p>
    </div>
</div>

<!-- =========================================================================
     PRODUCT DETAIL MIGRATION
     ========================================================================= -->
<h2>2. PRODUCT DETAIL - Main Image</h2>

<div class="comparison">
    <div class="before">
        <h3>❌ Before</h3>
        <pre><code>&lt;?php
$imageUrl = getImageForSection(
    $product['image'], 
    'product'
);
?&gt;
&lt;img id="mainProductImage" 
     src="&lt;?php echo $imageUrl; ?&gt;"
     style="width:100%;
            height:350px;
            object-fit:cover;
            border-radius:8px;"&gt;</code></pre>
    </div>
    
    <div class="after">
        <h3>✓ After</h3>
        <pre><code>&lt;?php
$imageUrl = getImageForSection(
    $product['image']
);
?&gt;
&lt;div class="product-detail-image"&gt;
    &lt;img id="mainProductImage" 
         src="&lt;?php echo $imageUrl; ?&gt;"
         alt="&lt;?php echo htmlspecialchars(
           $product['title']
         ); ?&gt;"&gt;
&lt;/div&gt;</code></pre>
    </div>
</div>

<!-- =========================================================================
     FEATURED PRODUCTS MIGRATION
     ========================================================================= -->
<h2>3. FEATURED PRODUCTS - Portrait Cards</h2>

<div class="comparison">
    <div class="before">
        <h3>❌ Before</h3>
        <pre><code>&lt;?php foreach ($featured as $p): ?&gt;
&lt;div class="featured-card"&gt;
    &lt;?php
    $url = getImageForSection(
        $p['image'], 
        'featured_home'
    );
    ?&gt;
    &lt;img src="&lt;?php echo $url; ?&gt;"
         style="width:100%;
                height:350px;
                display:block;"&gt;
&lt;/div&gt;
&lt;?php endforeach; ?&gt;</code></pre>
    </div>
    
    <div class="after">
        <h3>✓ After</h3>
        <pre><code>&lt;?php foreach ($featured as $p): ?&gt;
&lt;div class="featured-product-card"&gt;
    &lt;div class="featured-product-image"&gt;
        &lt;img src="&lt;?php 
            echo getImageForSection(
                $p['image']
            ); 
        ?&gt;"
             alt="&lt;?php echo htmlspecialchars(
               $p['title']
             ); ?&gt;"&gt;
    &lt;/div&gt;
    &lt;div class="featured-info"&gt;
        &lt;h4&gt;&lt;?php echo $p['title']; ?&gt;&lt;/h4&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;?php endforeach; ?&gt;</code></pre>
    </div>
</div>

<!-- =========================================================================
     BLOG SECTION MIGRATION
     ========================================================================= -->
<h2>4. BLOG SECTION - Blog Cards</h2>

<div class="comparison">
    <div class="before">
        <h3>❌ Before</h3>
        <pre><code>&lt;?php foreach ($posts as $post): ?&gt;
&lt;div class="blog-card"&gt;
    &lt;img src="&lt;?php 
        echo getImageForSection(
            $post['image'], 
            'latest_home'
        ); 
    ?&gt;"
         style="width:100%;
                height:250px;
                object-fit:cover;"&gt;
    &lt;h3&gt;&lt;?php echo $post['title']; ?&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;?php endforeach; ?&gt;</code></pre>
    </div>
    
    <div class="after">
        <h3>✓ After</h3>
        <pre><code>&lt;?php foreach ($posts as $post): ?&gt;
&lt;div class="blog-card"&gt;
    &lt;div class="blog-card-image"&gt;
        &lt;img src="&lt;?php 
            echo getImageForSection(
                $post['image']
            ); 
        ?&gt;"
             alt="&lt;?php echo htmlspecialchars(
               $post['title']
             ); ?&gt;"&gt;
    &lt;/div&gt;
    &lt;h3&gt;&lt;?php echo $post['title']; ?&gt;&lt;/h3&gt;
&lt;/div&gt;
&lt;?php endforeach; ?&gt;</code></pre>
    </div>
</div>

<!-- =========================================================================
     SLIDER / HERO MIGRATION
     ========================================================================= -->
<h2>5. HERO SLIDER - Full Width</h2>

<div class="comparison">
    <div class="before">
        <h3>❌ Before</h3>
        <pre><code>&lt;?php 
$slider = json_decode(
    file_get_contents(
        'data/slider.json'
    ), true
);
?&gt;
&lt;div class="slider"&gt;
    &lt;?php foreach (
        $slider['slides'] as $i => $s
    ): ?&gt;
    &lt;div class="slide"&gt;
        &lt;img src="&lt;?php 
            echo $s['image']; 
        ?&gt;"
             style="width:100%;
                    height:500px;
                    object-fit:cover;"&gt;
    &lt;/div&gt;
    &lt;?php endforeach; ?&gt;
&lt;/div&gt;</code></pre>
    </div>
    
    <div class="after">
        <h3>✓ After</h3>
        <pre><code>&lt;?php 
require_once 'config/image_config.php';
$slider = json_decode(
    file_get_contents(
        'data/slider.json'
    ), true
);
?&gt;
&lt;div class="slider"&gt;
    &lt;?php foreach (
        $slider['slides'] as $i => $s
    ): ?&gt;
    &lt;div class="slide"&gt;
        &lt;img src="&lt;?php 
            echo getImageForSection(
                $s['image']
            ); 
        ?&gt;"
             alt="&lt;?php echo htmlspecialchars(
               $s['alt']
             ); ?&gt;"&gt;
    &lt;/div&gt;
    &lt;?php endforeach; ?&gt;
&lt;/div&gt;</code></pre>
    </div>
</div>

<!-- =========================================================================
     CART ITEM MIGRATION
     ========================================================================= -->
<h2>6. CART / WISHLIST - Thumbnail Images</h2>

<div class="comparison">
    <div class="before">
        <h3>❌ Before</h3>
        <pre><code>&lt;?php foreach ($cart as $item): ?&gt;
&lt;tr&gt;
    &lt;td&gt;
        &lt;img src="&lt;?php 
            echo getImageForSection(
                $item['image'], 
                'thumbnail'
            ); 
        ?&gt;"
             style="width:80px;
                    height:80px;
                    object-fit:cover;"&gt;
    &lt;/td&gt;
    &lt;td&gt;&lt;?php echo $item['title']; ?&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;?php endforeach; ?&gt;</code></pre>
    </div>
    
    <div class="after">
        <h3>✓ After</h3>
        <pre><code>&lt;?php foreach ($cart as $item): ?&gt;
&lt;tr&gt;
    &lt;td&gt;
        &lt;div class="cart-item-image" style="width:80px;"&gt;
            &lt;img src="&lt;?php 
                echo getImageForSection(
                    $item['image']
                ); 
            ?&gt;"
                 alt="&lt;?php echo htmlspecialchars(
                   $item['title']
                 ); ?&gt;"&gt;
        &lt;/div&gt;
    &lt;/td&gt;
    &lt;td&gt;&lt;?php echo $item['title']; ?&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;?php endforeach; ?&gt;</code></pre>
    </div>
</div>

<!-- =========================================================================
     MIGRATION STEPS
     ========================================================================= -->
<h2>Migration Checklist</h2>

<ul class="checklist">
    <li>Update <span class="file-path">/classes/ImageHandler.php</span></li>
    <li>Update <span class="file-path">/config/image_config.php</span></li>
    <li>Include CSS: <span class="file-path">/css/universal-image-system.css</span></li>
    <li>Update <span class="file-path">shop.php</span> - Remove inline image styles</li>
    <li>Update <span class="file-path">product.php</span> - Wrap product images in containers</li>
    <li>Update <span class="file-path">index.php</span> - Update featured, latest, slider sections</li>
    <li>Update <span class="file-path">blog.php</span> - Update blog image displays</li>
    <li>Update <span class="file-path">cart.php</span> - Update cart thumbnails</li>
    <li>Update <span class="file-path">wishlist.php</span> - Update wishlist images</li>
    <li>Update <span class="file-path">category.php</span> - Update category images</li>
    <li>Test image upload and display on all pages</li>
    <li>Test responsiveness on mobile/tablet/desktop</li>
</ul>

<!-- =========================================================================
     INLINE STYLES TO REMOVE
     ========================================================================= -->
<h2>Inline Styles to Remove</h2>

<p>Delete these inline styles from your images. CSS classes handle everything:</p>

<table>
    <tr>
        <th>Inline Style</th>
        <th>Why Remove</th>
        <th>Replacement</th>
    </tr>
    <tr>
        <td><code>width:260px; height:260px;</code></td>
        <td>Hardcoded sizes</td>
        <td>Use CSS classes with aspect-ratio</td>
    </tr>
    <tr>
        <td><code>style="width:100%; height:350px;"</code></td>
        <td>Fixed heights break responsiveness</td>
        <td>Wrap in container with aspect-ratio</td>
    </tr>
    <tr>
        <td><code>object-fit:cover;</code></td>
        <td>Should be in CSS</td>
        <td>Included in universal-image-system.css</td>
    </tr>
    <tr>
        <td><code>border-radius:8px;</code></td>
        <td>Should be in CSS</td>
        <td>Add to CSS class or use class="rounded"</td>
    </tr>
    <tr>
        <td><code>display:block;</code></td>
        <td>Default in CSS now</td>
        <td>Removed from inline</td>
    </tr>
</table>

<!-- =========================================================================
     EXAMPLE: COMPLETE FILE BEFORE/AFTER
     ========================================================================= -->
<h2>Complete Example: shop.php Update</h2>

<div class="comparison">
    <div class="before">
        <h3>❌ Before</h3>
        <pre><code>&lt;?php
// shop.php (OLD)
require_once 'config/image_config.php';

$products = json_decode(
    file_get_contents('data/products.json'),
    true
);
?&gt;

&lt;div class="shop-grid" style="
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;"&gt;

&lt;?php foreach ($products as $p): ?&gt;
&lt;div class="product-card"&gt;
    &lt;?php
    $imageUrl = getImageForSection(
        $p['image'], 
        'shop'
    );
    ?&gt;
    &lt;img src="&lt;?php echo $imageUrl; ?&gt;"
         style="width: 100%;
                height: 260px;
                object-fit: cover;
                border-radius: 4px;"&gt;
    
    &lt;h3 style="margin-top: 10px;"&gt;
        &lt;?php echo $p['title']; ?&gt;
    &lt;/h3&gt;
    &lt;p style="color: #ff6b6b; 
              font-weight: bold;"&gt;
        $&lt;?php echo $p['price']; ?&gt;
    &lt;/p&gt;
&lt;/div&gt;
&lt;?php endforeach; ?&gt;

&lt;/div&gt;</code></pre>
    </div>
    
    <div class="after">
        <h3>✓ After</h3>
        <pre><code>&lt;?php
// shop.php (NEW)
require_once 'config/image_config.php';

$products = json_decode(
    file_get_contents('data/products.json'),
    true
);
?&gt;

&lt;div class="shop-grid" style="
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;"&gt;

&lt;?php foreach ($products as $p): ?&gt;
&lt;div class="product-card"&gt;
    &lt;div class="product-image"&gt;
        &lt;img src="&lt;?php 
            echo getImageForSection(
                $p['image']
            ); 
        ?&gt;"
             alt="&lt;?php echo htmlspecialchars(
               $p['title']
             ); ?&gt;"&gt;
    &lt;/div&gt;
    
    &lt;h3 style="margin-top: 10px;"&gt;
        &lt;?php echo $p['title']; ?&gt;
    &lt;/h3&gt;
    &lt;p style="color: #ff6b6b; 
              font-weight: bold;"&gt;
        $&lt;?php echo $p['price']; ?&gt;
    &lt;/p&gt;
&lt;/div&gt;
&lt;?php endforeach; ?&gt;

&lt;/div&gt;</code></pre>
    </div>
</div>

<div class="note">
    <strong>🎯 Key Changes:</strong>
    <ul>
        <li>Removed inline image styles (width, height, object-fit, border-radius)</li>
        <li>Wrapped img in &lt;div class="product-image"&gt;</li>
        <li>Removed second parameter from getImageForSection()</li>
        <li>Added alt text to img tag</li>
        <li>All styling now comes from CSS class</li>
    </ul>
</div>

<!-- =========================================================================
     QUESTIONS & ANSWERS
     ========================================================================= -->
<h2>FAQ - Migration Questions</h2>

<table>
    <tr>
        <th>Question</th>
        <th>Answer</th>
    </tr>
    <tr>
        <td><strong>Will old images still work?</strong></td>
        <td>Yes! Old paths like <code>pics_ecom/file.png</code> still work.</td>
    </tr>
    <tr>
        <td><strong>Do I need to re-upload all images?</strong></td>
        <td>No. Old images continue to work. Only new uploads use the simple system.</td>
    </tr>
    <tr>
        <td><strong>Can I remove variant files?</strong></td>
        <td>Yes, manually delete <code>/uploads/variants/</code> to save space. Old images still work.</td>
    </tr>
    <tr>
        <td><strong>How do I handle missing images?</strong></td>
        <td>Add fallback: <code>&lt;img src="&lt;?php echo getImageForSection($p['image']) ?: 'pics_ecom/placeholder.png'; ?&gt;"&gt;</code></td>
    </tr>
    <tr>
        <td><strong>What if admin pages use images?</strong></td>
        <td>Same process. Wrap in CSS class, remove inline styles.</td>
    </tr>
    <tr>
        <td><strong>Do I update database?</strong></td>
        <td>No. Database stores filenames. Just clean up if paths have prefixes.</td>
    </tr>
</table>

<!-- =========================================================================
     SUMMARY
     ========================================================================= -->
<h2>Summary</h2>

<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 8px; margin-top: 30px;">
    <h3 style="color: white; margin-bottom: 15px;">🎉 What You Gain</h3>
    <ul style="list-style: none; margin-left: 20px;">
        <li style="margin: 10px 0;">✓ Cleaner HTML (no inline styles)</li>
        <li style="margin: 10px 0;">✓ Easier maintenance (one CSS file)</li>
        <li style="margin: 10px 0;">✓ Better performance (no variant generation)</li>
        <li style="margin: 10px 0;">✓ Flexible images (use any resolution)</li>
        <li style="margin: 10px 0;">✓ Professional results (like Amazon/Shopify)</li>
    </ul>
</div>

</div>

</body>
</html>
