<?php
require_once __DIR__ . '/includes/config.php';
$pageTitle = 'Shop';

// Search & filter
$search = trim($_GET['search'] ?? '');
$statusFilter = trim($_GET['status'] ?? '');

$db = getDB();
$sql = "SELECT p.*, (SELECT image_path FROM product_images WHERE product_id = p.id ORDER BY sort_order ASC LIMIT 1) AS main_image
        FROM products p WHERE 1=1";
$params = [];

if ($search) {
    $sql .= " AND (p.name LIKE ? OR p.description LIKE ? OR p.color LIKE ?)";
    $params[] = "%$search%";
    $params[] = "%$search%";
    $params[] = "%$search%";
}
if ($statusFilter) {
    $sql .= " AND p.selling_status = ?";
    $params[] = $statusFilter;
}
$sql .= " ORDER BY p.created_at DESC";

$stmt = $db->prepare($sql);
$stmt->execute($params);
$products = $stmt->fetchAll();

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

<!-- Breadcrumb -->
<div class="container-fluid bg-secondary py-3 mb-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="<?= SITE_URL ?>/" class="text-white">Home</a></li>
                <li class="breadcrumb-item active text-white-50">Shop</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container py-4">
    <!-- Filter Bar -->
    <div class="row g-3 mb-4 align-items-end">
        <div class="col-md-8">
            <form action="" method="GET" class="d-flex gap-2">
                <input type="text" name="search" class="form-control" placeholder="Search products..." value="<?= sanitize($search) ?>">
                <select name="status" class="form-select" style="max-width:180px;">
                    <option value="">All Status</option>
                    <option value="available" <?= $statusFilter === 'available' ? 'selected' : '' ?>>Available</option>
                    <option value="out_of_stock" <?= $statusFilter === 'out_of_stock' ? 'selected' : '' ?>>Out of Stock</option>
                    <option value="coming_soon" <?= $statusFilter === 'coming_soon' ? 'selected' : '' ?>>Coming Soon</option>
                </select>
                <button type="submit" class="btn btn-primary px-4">Filter</button>
                <?php if ($search || $statusFilter): ?>
                    <a href="<?= SITE_URL ?>/shop.php" class="btn btn-outline-secondary">Clear</a>
                <?php endif; ?>
            </form>
        </div>
        <div class="col-md-4 text-md-end">
            <span class="text-muted"><?= count($products) ?> product(s) found</span>
        </div>
    </div>

    <!-- Product Grid -->
    <?php if (empty($products)): ?>
        <div class="text-center py-5">
            <i class="fas fa-search fa-4x text-muted mb-3"></i>
            <h4>No products found</h4>
            <?php if ($search || $statusFilter): ?>
                <p class="text-muted">Try adjusting your search or filters.</p>
                <a href="<?= SITE_URL ?>/shop.php" class="btn btn-primary">View All Products</a>
            <?php else: ?>
                <p class="text-muted">No products have been added yet.</p>
            <?php endif; ?>
        </div>
    <?php else: ?>
    <div class="row g-4">
        <?php foreach ($products as $product): ?>
        <div class="col-xl-3 col-lg-4 col-md-6 col-sm-6">
            <div class="card h-100 border-0 shadow-sm product-card">
                <a href="<?= SITE_URL ?>/product.php?id=<?= $product['id'] ?>" class="text-decoration-none">
                    <div class="position-relative overflow-hidden bg-light" style="height:220px;">
                        <?php if ($product['main_image']): ?>
                            <img src="<?= UPLOAD_URL . sanitize($product['main_image']) ?>"
                                 class="w-100 h-100 p-3"
                                 style="object-fit:contain;"
                                 alt="<?= sanitize($product['name']) ?>">
                        <?php else: ?>
                            <div class="d-flex align-items-center justify-content-center h-100">
                                <i class="fas fa-image fa-4x text-muted"></i>
                            </div>
                        <?php endif; ?>
                        <div class="position-absolute top-0 end-0 m-2">
                            <?= getStatusBadge($product['selling_status']) ?>
                        </div>
                    </div>
                </a>
                <div class="card-body d-flex flex-column">
                    <a href="<?= SITE_URL ?>/product.php?id=<?= $product['id'] ?>" class="text-decoration-none text-dark">
                        <h6 class="fw-bold mb-1"><?= sanitize($product['name']) ?></h6>
                    </a>
                    <?php if ($product['color']): ?>
                        <small class="text-muted"><i class="fas fa-palette me-1 text-secondary"></i><?= sanitize($product['color']) ?></small>
                    <?php endif; ?>
                    <div class="mt-auto pt-3 d-flex align-items-center justify-content-between">
                        <span class="fs-5 fw-bold text-primary"><?= formatPrice($product['price']) ?></span>
                        <a href="<?= SITE_URL ?>/product.php?id=<?= $product['id'] ?>" class="btn btn-primary btn-sm">
                            <i class="fas fa-eye me-1"></i>View
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <?php endforeach; ?>
    </div>
    <?php endif; ?>
</div>

<style>
.product-card { transition: transform 0.2s, box-shadow 0.2s; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.12)!important; }
</style>

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