<?php
/**
 * ============================================================================
 * QUICK REFERENCE - Copy & Paste Examples
 * ============================================================================
 * 
 * Just copy these code snippets and use them directly in your templates!
 */
?>

<!-- CHEAT SHEET FOR COPY & PASTE -->

<!-- INCLUDE THIS IN YOUR HEADER -->
<link rel="stylesheet" href="/ecom/css/universal-image-system.css">

<!-- =========================================================================
     UPLOAD PRODUCT IMAGE
     ========================================================================= -->

<?php
// Handle file upload
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_FILES['productImage'])) {
    require_once 'config/image_config.php';
    
    $result = uploadProductImage($_FILES['productImage'], 'my_product');
    
    if ($result['success']) {
        $filename = $result['filename'];
        // Save to database: $filename
        // UPDATE products SET image = ? WHERE id = ?
    }
}
?>

<form method="POST" enctype="multipart/form-data">
    <input type="file" name="productImage" accept="image/jpeg,image/png" required>
    <button type="submit">Upload</button>
</form>

<!-- =========================================================================
     SHOP GRID (Square Products)
     ========================================================================= -->

<?php require_once 'config/image_config.php'; ?>

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; padding: 20px;">
    <?php foreach ($products as $product): ?>
    <div class="product-card">
        <div class="product-image">
            <img src="<?php echo getImageForSection($product['image']); ?>" 
                 alt="<?php echo htmlspecialchars($product['title']); ?>">
        </div>
        <h3><?php echo htmlspecialchars($product['title']); ?></h3>
        <p class="price">$<?php echo htmlspecialchars($product['price']); ?></p>
        <a href="product.php?id=<?php echo $product['id']; ?>" class="btn">View</a>
    </div>
    <?php endforeach; ?>
</div>

<!-- =========================================================================
     FEATURED PRODUCTS (Portrait 3:4)
     ========================================================================= -->

<?php require_once 'config/image_config.php'; ?>

<section class="featured" style="padding: 40px 20px;">
    <h2>Featured Products</h2>
    <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;">
        <?php foreach ($featured as $product): ?>
        <div class="featured-product-card">
            <div class="featured-product-image">
                <img src="<?php echo getImageForSection($product['image']); ?>" 
                     alt="<?php echo htmlspecialchars($product['title']); ?>">
            </div>
            <div style="padding: 12px 0;">
                <h4><?php echo htmlspecialchars($product['title']); ?></h4>
                <p style="color: #ff6b6b; font-weight: bold;">$<?php echo $product['price']; ?></p>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
</section>

<!-- =========================================================================
     BLOG CARDS (16:9 Landscape)
     ========================================================================= -->

<?php require_once 'config/image_config.php'; ?>

<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 20px;">
    <?php foreach ($posts as $post): ?>
    <article class="blog-card">
        <div class="blog-card-image">
            <img src="<?php echo getImageForSection($post['image']); ?>" 
                 alt="<?php echo htmlspecialchars($post['title']); ?>">
        </div>
        <div style="padding: 15px;">
            <h3><?php echo htmlspecialchars($post['title']); ?></h3>
            <p><?php echo substr($post['excerpt'], 0, 100) . '...'; ?></p>
            <a href="blog.php?id=<?php echo $post['id']; ?>">Read More →</a>
        </div>
    </article>
    <?php endforeach; ?>
</div>

<!-- =========================================================================
     HERO SLIDER
     ========================================================================= -->

<?php require_once 'config/image_config.php'; ?>

<div class="slider" style="position: relative; width: 100%; margin-bottom: 20px;">
    <?php foreach ($slides as $i => $slide): ?>
    <div class="slide <?php echo $i === 0 ? 'active' : ''; ?>" style="display: <?php echo $i === 0 ? 'block' : 'none'; ?>;">
        <img src="<?php echo getImageForSection($slide['image']); ?>" 
             alt="<?php echo htmlspecialchars($slide['alt']); ?>">
        <div class="hero-content" style="position: absolute; bottom: 50px; left: 50px; color: white;">
            <h1><?php echo htmlspecialchars($slide['title']); ?></h1>
            <p><?php echo htmlspecialchars($slide['subtitle']); ?></p>
        </div>
    </div>
    <?php endforeach; ?>
</div>

<!-- =========================================================================
     CART / WISHLIST (Thumbnails 1:1)
     ========================================================================= -->

<?php require_once 'config/image_config.php'; ?>

<table style="width: 100%; border-collapse: collapse;">
    <tr style="border-bottom: 1px solid #ddd;">
        <th style="padding: 10px; text-align: left;">Image</th>
        <th style="padding: 10px; text-align: left;">Product</th>
        <th style="padding: 10px; text-align: left;">Price</th>
    </tr>
    <?php foreach ($cartItems as $item): ?>
    <tr style="border-bottom: 1px solid #eee;">
        <td style="padding: 10px;">
            <div class="cart-item-image" style="width: 80px;">
                <img src="<?php echo getImageForSection($item['image']); ?>" 
                     alt="<?php echo htmlspecialchars($item['title']); ?>">
            </div>
        </td>
        <td style="padding: 10px;">
            <?php echo htmlspecialchars($item['title']); ?>
        </td>
        <td style="padding: 10px;">
            $<?php echo htmlspecialchars($item['price']); ?>
        </td>
    </tr>
    <?php endforeach; ?>
</table>

<!-- =========================================================================
     PRODUCT DETAIL PAGE
     ========================================================================= -->

<?php require_once 'config/image_config.php'; ?>

<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 20px;">
    <div>
        <div class="product-detail-image">
            <img src="<?php echo getImageForSection($product['image']); ?>" 
                 alt="<?php echo htmlspecialchars($product['title']); ?>"
                 id="mainProductImage">
        </div>
    </div>
    
    <div class="product-info">
        <h1><?php echo htmlspecialchars($product['title']); ?></h1>
        <p class="price" style="font-size: 24px; color: #ff6b6b; margin: 15px 0;">
            $<?php echo htmlspecialchars($product['price']); ?>
        </p>
        <p><?php echo nl2br(htmlspecialchars($product['description'])); ?></p>
        
        <button class="btn-add-to-cart">Add to Cart</button>
    </div>
</div>

<!-- =========================================================================
     CATEGORY GRID
     ========================================================================= -->

<?php require_once 'config/image_config.php'; ?>

<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 20px;">
    <?php foreach ($categories as $category): ?>
    <a href="category.php?id=<?php echo $category['id']; ?>" style="text-decoration: none; color: inherit;">
        <div class="category-image">
            <img src="<?php echo getImageForSection($category['image']); ?>" 
                 alt="<?php echo htmlspecialchars($category['name']); ?>">
        </div>
        <h3 style="text-align: center; margin-top: 10px;">
            <?php echo htmlspecialchars($category['name']); ?>
        </h3>
    </a>
    <?php endforeach; ?>
</div>

<!-- =========================================================================
     CSS CLASSES REFERENCE
     ========================================================================= -->

<!-- Square (1:1) -->
<div class="product-image">
    <img src="..." alt="...">
</div>

<!-- Portrait (3:4) -->
<div class="featured-product-image">
    <img src="..." alt="...">
</div>

<!-- Landscape (16:9) -->
<div class="blog-card-image">
    <img src="..." alt="...">
</div>

<!-- Wide (2:1) -->
<div class="blog-featured-image">
    <img src="..." alt="...">
</div>

<!-- Slider/Hero -->
<div class="slider">
    <div class="slide">
        <img src="..." alt="...">
    </div>
</div>

<!-- =========================================================================
     PHP FUNCTIONS REFERENCE
     ========================================================================= -->

<?php
// Upload image
$result = uploadProductImage($_FILES['image'], 'filename');
// Returns: ['success' => true, 'filename' => 'filename.jpg', 'url' => '/ecom/uploads/filename.jpg']

// Get image URL
$url = getImageForSection('filename.jpg');
// Returns: '/ecom/uploads/filename.jpg'

// Delete image
deleteProductImage('filename.jpg');
// Returns: true/false

// Check if exists
if (imageExists('filename.jpg')) { ... }

// Get image info
$info = getImageInfo('filename.jpg');
// Returns: ['width' => 800, 'height' => 600, 'type' => 2, 'size' => 123456, 'mime' => 'image/jpeg']

// Generate image tag
echo imageTag('filename.jpg', ['alt' => 'Product', 'class' => 'product-image']);
// Returns: <img src="/ecom/uploads/filename.jpg" alt="Product" class="product-image" />
?>

<!-- =========================================================================
     INLINE STYLES (Responsive Grid Examples)
     ========================================================================= -->

<!-- 4-column grid (desktop) -->
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;">

<!-- 3-column grid (tablet) -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">

<!-- 2-column grid (mobile) -->
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;">

<!-- 1-column grid (small phone) -->
<div style="display: grid; grid-template-columns: 1fr; gap: 20px;">

<!-- =========================================================================
     COMMON PATTERNS
     ========================================================================= -->

<!-- Pattern 1: Product Card with Badge -->
<div class="product-card">
    <div style="position: relative;">
        <div class="product-image">
            <img src="..." alt="...">
        </div>
        <?php if ($product['on_sale']): ?>
        <div style="position: absolute; top: 10px; right: 10px; background: #ff6b6b; color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; font-weight: bold;">
            SALE
        </div>
        <?php endif; ?>
    </div>
</div>

<!-- Pattern 2: Image with Overlay Text -->
<div class="featured-product-image" style="position: relative;">
    <img src="..." alt="...">
    <div style="position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); padding: 20px; color: white;">
        <h3><?php echo $product['title']; ?></h3>
    </div>
</div>

<!-- Pattern 3: Hover Zoom Effect -->
<div class="product-image image-hover-zoom">
    <img src="..." alt="...">
</div>

<!-- =========================================================================
     RESPONSIVE BREAKPOINTS
     ========================================================================= -->

<!-- Desktop: 4 columns -->
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;">

<!-- Tablet: 2-3 columns (add to your CSS) -->
@media (max-width: 1024px) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

<!-- Mobile: 2 columns -->
@media (max-width: 768px) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

<!-- Small phone: 1 column -->
@media (max-width: 480px) {
    display: grid;
    grid-template-columns: 1fr;
}
