tomsjavajive-app/shop.php

<?php
/**
 * Tom's Java Jive - Shop Page
 */

$pageTitle = "Shop - Tom's Java Jive";
require_once __DIR__ . '/includes/functions.php';

// Get filters
$category = $_GET['category'] ?? '';
$search = $_GET['search'] ?? '';
$sort = $_GET['sort'] ?? 'newest';
$page = max(1, intval($_GET['page'] ?? 1));

// Build query
$where = ['is_active = 1'];
$params = [];

if ($category) {
    $where[] = 'category = :category';
    $params['category'] = $category;
}

if ($search) {
    $where[] = '(name LIKE :search OR description LIKE :search)';
    $params['search'] = '%' . $search . '%';
}

$whereClause = implode(' AND ', $where);

// Sort
$orderBy = match($sort) {
    'price_low' => 'COALESCE(sale_price, price) ASC',
    'price_high' => 'COALESCE(sale_price, price) DESC',
    'name' => 'name ASC',
    default => 'created_at DESC'
};

// Get total count
$totalProducts = db()->count('products', $whereClause, $params);
$pagination = paginate($totalProducts, $page, 12);

// Get products
$products = db()->fetchAll(
    "SELECT * FROM products WHERE {$whereClause} ORDER BY {$orderBy} LIMIT :limit OFFSET :offset",
    array_merge($params, ['limit' => $pagination['per_page'], 'offset' => $pagination['offset']])
);

// Get categories for filter
$categories = db()->fetchAll(
    "SELECT DISTINCT category FROM products WHERE category IS NOT NULL AND category != '' AND is_active = 1 ORDER BY category"
);

require_once __DIR__ . '/includes/header.php';
?>

<!-- Page Header -->
<section style="background: linear-gradient(135deg, var(--color-secondary) 0%, #5D2E0A 100%); color: white; padding: 3rem 0; text-align: center;">
    <div class="container">
        <h1 style="font-family: var(--font-display); font-size: 2.5rem; margin-bottom: 0.5rem;">Our Coffee Collection</h1>
        <p style="opacity: 0.9;">Discover your perfect brew from our selection of premium coffees</p>
    </div>
</section>

<section class="section">
    <div class="container">
        <!-- Filters Bar -->
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;">
            <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
                <a href="/shop.php" class="btn <?= !$category ? 'btn-primary' : 'btn-secondary' ?>">All</a>
                <?php foreach ($categories as $cat): ?>
                    <a href="/shop.php?category=<?= urlencode($cat['category']) ?>" 
                       class="btn <?= $category === $cat['category'] ? 'btn-primary' : 'btn-secondary' ?>">
                        <?= htmlspecialchars(ucfirst($cat['category'])) ?>
                    </a>
                <?php endforeach; ?>
            </div>
            
            <div style="display: flex; gap: 1rem; align-items: center;">
                <form method="GET" style="display: flex; gap: 0.5rem;">
                    <?php if ($category): ?>
                        <input type="hidden" name="category" value="<?= htmlspecialchars($category) ?>">
                    <?php endif; ?>
                    <input type="text" name="search" class="form-input" placeholder="Search..." 
                           value="<?= htmlspecialchars($search) ?>" style="width: 200px;">
                    <button type="submit" class="btn btn-secondary"><i class="fas fa-search"></i></button>
                </form>
                
                <select onchange="window.location.href=this.value" class="form-select" style="width: auto;">
                    <option value="/shop.php?sort=newest<?= $category ? '&category=' . urlencode($category) : '' ?>" <?= $sort === 'newest' ? 'selected' : '' ?>>Newest</option>
                    <option value="/shop.php?sort=price_low<?= $category ? '&category=' . urlencode($category) : '' ?>" <?= $sort === 'price_low' ? 'selected' : '' ?>>Price: Low to High</option>
                    <option value="/shop.php?sort=price_high<?= $category ? '&category=' . urlencode($category) : '' ?>" <?= $sort === 'price_high' ? 'selected' : '' ?>>Price: High to Low</option>
                    <option value="/shop.php?sort=name<?= $category ? '&category=' . urlencode($category) : '' ?>" <?= $sort === 'name' ? 'selected' : '' ?>>Name</option>
                </select>
            </div>
        </div>
        
        <!-- Results count -->
        <p class="text-muted" style="margin-bottom: 1.5rem;">
            Showing <?= count($products) ?> of <?= $totalProducts ?> products
            <?= $category ? ' in ' . htmlspecialchars(ucfirst($category)) : '' ?>
        </p>
        
        <!-- Product Grid -->
        <?php if (empty($products)): ?>
            <div style="text-align: center; padding: 4rem 0;">
                <i class="fas fa-coffee" style="font-size: 4rem; color: var(--color-text-muted); margin-bottom: 1rem;"></i>
                <h3>No products found</h3>
                <p class="text-muted">Try adjusting your search or filters</p>
                <a href="/shop.php" class="btn btn-primary mt-1">View All Products</a>
            </div>
        <?php else: ?>
            <div class="product-grid">
                <?php foreach ($products as $product): 
                    $images = json_decode($product['images'] ?? '[]', true);
                    $imageUrl = !empty($images) ? $images[0] : '/assets/images/placeholder-product.svg';
                    $price = $product['sale_price'] ?? $product['price'];
                ?>
                    <div class="product-card">
                        <a href="/product.php?id=<?= $product['product_id'] ?>" class="product-card-image">
                            <img src="<?= htmlspecialchars($imageUrl) ?>" alt="<?= htmlspecialchars($product['name']) ?>">
                            <?php if ($product['sale_price']): ?>
                                <span class="product-card-badge">Sale</span>
                            <?php elseif ($product['is_featured']): ?>
                                <span class="product-card-badge">Featured</span>
                            <?php endif; ?>
                        </a>
                        <div class="product-card-body">
                            <?php if ($product['category']): ?>
                                <div class="product-card-category"><?= htmlspecialchars($product['category']) ?></div>
                            <?php endif; ?>
                            <h3 class="product-card-title">
                                <a href="/product.php?id=<?= $product['product_id'] ?>"><?= htmlspecialchars($product['name']) ?></a>
                            </h3>
                            <div class="product-card-price">
                                <span class="current"><?= formatCurrency($price) ?></span>
                                <?php if ($product['sale_price']): ?>
                                    <span class="original"><?= formatCurrency($product['price']) ?></span>
                                <?php endif; ?>
                            </div>
                            <button class="btn btn-primary btn-block add-to-cart" data-id="<?= $product['product_id'] ?>">
                                <i class="fas fa-shopping-bag"></i> Add to Cart
                            </button>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
            
            <!-- Pagination -->
            <?php if ($pagination['total_pages'] > 1): ?>
                <div style="display: flex; justify-content: center; gap: 0.5rem; margin-top: 3rem;">
                    <?php for ($i = 1; $i <= $pagination['total_pages']; $i++): ?>
                        <a href="/shop.php?page=<?= $i ?><?= $category ? '&category=' . urlencode($category) : '' ?><?= $sort ? '&sort=' . $sort : '' ?>" 
                           class="btn <?= $i === $page ? 'btn-primary' : 'btn-secondary' ?>">
                            <?= $i ?>
                        </a>
                    <?php endfor; ?>
                </div>
            <?php endif; ?>
        <?php endif; ?>
    </div>
</section>

<?php require_once __DIR__ . '/includes/footer.php'; ?>