product.php

<?php
/**
 * Product Details Page
 */
require_once __DIR__ . '/includes/helpers.php';

$slug = clean($_GET['slug'] ?? '');

if (empty($slug)) {
    redirect('404.php');
}

try {
    // Fetch product with brand, category, vendor
    $stmt = db()->prepare("
        SELECT p.*, c.name as category_name, c.slug as category_slug, 
               b.name as brand_name, b.slug as brand_slug,
               vp.store_name, vp.store_logo, vp.user_id as vendor_user_id
        FROM `products` p
        LEFT JOIN `categories` c ON p.category_id = c.id
        LEFT JOIN `brands` b ON p.brand_id = b.id
        LEFT JOIN `vendor_profiles` vp ON p.vendor_id = vp.user_id
        WHERE p.slug = ? AND p.status = 'active'
        LIMIT 1
    ");
    $stmt->execute([$slug]);
    $product = $stmt->fetch();

    if (!$product) {
        redirect('404.php');
    }

    $productId = $product['id'];

    // Gallery images
    $galStmt = db()->prepare("SELECT * FROM `product_gallery` WHERE `product_id` = ?");
    $galStmt->execute([$productId]);
    $gallery = $galStmt->fetchAll();

    // Variants
    $varStmt = db()->prepare("SELECT * FROM `product_variants` WHERE `product_id` = ?");
    $varStmt->execute([$productId]);
    $variants = $varStmt->fetchAll();

    // Product Reviews
    $revStmt = db()->prepare("
        SELECT r.*, u.name as reviewer_name, u.avatar as reviewer_avatar 
        FROM `reviews` r
        JOIN `users` u ON r.user_id = u.id
        WHERE r.product_id = ? AND r.status = 'approved'
        ORDER BY r.created_at DESC
    ");
    $revStmt->execute([$productId]);
    $reviews = $revStmt->fetchAll();

    // Calculate rating breakdown
    $totalReviews = count($reviews);
    $avgRating = 0;
    if ($totalReviews > 0) {
        $sum = 0;
        foreach ($reviews as $r) {
            $sum += $r['rating'];
        }
        $avgRating = round($sum / $totalReviews, 1);
    }

    // Related products (same category, different ID)
    $relStmt = db()->prepare("
        SELECT p.*, c.name as category_name 
        FROM `products` p
        LEFT JOIN `categories` c ON p.category_id = c.id
        WHERE p.category_id = ? AND p.id != ? AND p.status = 'active' 
        LIMIT 4
    ");
    $relStmt->execute([$product['category_id'], $productId]);
    $relatedProducts = $relStmt->fetchAll();

} catch (Exception $e) {
    die("Error processing product details.");
}

$pageTitle = !empty($product['meta_title']) ? $product['meta_title'] : $product['name'] . " - buy on " . get_setting('site_name', 'VortexMarket');
$pageDesc = !empty($product['meta_description']) ? $product['meta_description'] : $product['short_description'];
require_once __DIR__ . '/includes/header.php';
require_once __DIR__ . '/includes/navbar.php';
?>

<div class="container my-4">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="<?php echo BASE_URL; ?>index.php" class="text-decoration-none">Home</a></li>
            <?php if ($product['category_name']): ?>
                <li class="breadcrumb-item"><a href="<?php echo BASE_URL; ?>category.php?slug=<?php echo $product['category_slug']; ?>" class="text-decoration-none"><?php echo htmlspecialchars($product['category_name']); ?></a></li>
            <?php endif; ?>
            <li class="breadcrumb-item active" aria-current="page"><?php echo htmlspecialchars($product['name']); ?></li>
        </ol>
    </nav>

    <div class="row g-4">
        <!-- Left: Image Gallery -->
        <div class="col-md-6">
            <div class="product-zoom-container rounded-4 mb-3" id="main-image-container">
                <img src="<?php echo BASE_URL; ?>uploads/products/<?php echo htmlspecialchars($product['image']); ?>" id="product-main-img" class="img-fluid" onerror="this.src='https://placehold.co/600x600?text=Product+Image';" alt="<?php echo htmlspecialchars($product['name']); ?>">
            </div>
            
            <?php if (!empty($gallery)): ?>
                <div class="row g-2">
                    <div class="col-3">
                        <img src="<?php echo BASE_URL; ?>uploads/products/<?php echo htmlspecialchars($product['image']); ?>" class="img-thumbnail img-gallery-thumb border-primary" style="cursor:pointer;" onclick="changeMainImage(this.src)">
                    </div>
                    <?php foreach ($gallery as $img): ?>
                        <div class="col-3">
                            <img src="<?php echo BASE_URL; ?>uploads/products/<?php echo htmlspecialchars($img['image_url']); ?>" class="img-thumbnail img-gallery-thumb" style="cursor:pointer;" onclick="changeMainImage(this.src)">
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php endif; ?>
        </div>

        <!-- Right: Details Info -->
        <div class="col-md-6">
            <div class="card border-0 shadow-sm p-4 rounded-4">
                <span class="badge bg-secondary-subtle text-dark align-self-start mb-2"><?php echo htmlspecialchars($product['brand_name'] ?? 'Generic Brand'); ?></span>
                <h2 class="fw-bold mb-2"><?php echo htmlspecialchars($product['name']); ?></h2>
                
                <div class="d-flex align-items-center gap-2 mb-3">
                    <div class="text-warning">
                        <?php for ($i=1; $i<=5; $i++): ?>
                            <i class="bi bi-star-<?php echo ($i <= $avgRating) ? 'fill' : 'hash'; ?>-fill"></i>
                        <?php endfor; ?>
                    </div>
                    <span class="small text-secondary fw-semibold">(<?php echo $totalReviews; ?> Review<?php echo ($totalReviews !== 1) ? 's' : ''; ?>)</span>
                    <span class="text-muted">|</span>
                    <span class="text-secondary small">SKU: <strong id="display-sku"><?php echo htmlspecialchars($product['sku'] ?? 'N/A'); ?></strong></span>
                </div>

                <!-- Price Block -->
                <div class="bg-light p-3 rounded-3 mb-3">
                    <?php if ($product['discount_price'] !== null): ?>
                        <div class="d-flex align-items-baseline gap-2">
                            <span class="fs-2 fw-bold text-danger" id="display-price"><?php echo format_price($product['discount_price']); ?></span>
                            <span class="text-decoration-line-through text-muted" id="display-old-price"><?php echo format_price($product['price']); ?></span>
                            <span class="badge bg-danger-subtle text-danger">-<?php echo round((($product['price'] - $product['discount_price']) / $product['price']) * 100); ?>%</span>
                        </div>
                    <?php else: ?>
                        <span class="fs-2 fw-bold text-dark" id="display-price"><?php echo format_price($product['price']); ?></span>
                    <?php endif; ?>
                    <p class="text-muted small mb-0 mt-1"><i class="bi bi-shield-check"></i> Price inclusive of standard commission and taxes.</p>
                </div>

                <p class="text-secondary small mb-3"><?php echo htmlspecialchars($product['short_description']); ?></p>

                <!-- Variants Selector (If any) -->
                <?php if (!empty($variants)): ?>
                    <div class="mb-4">
                        <label class="form-label fw-bold small text-uppercase">Select Specification Combination:</label>
                        <select class="form-select" id="variant-selector" onchange="updateVariantDetails()">
                            <option value="" data-price-modifier="0.00" data-stock="<?php echo $product['stock']; ?>" data-sku="<?php echo htmlspecialchars($product['sku']); ?>">-- Standard Option --</option>
                            <?php foreach ($variants as $v): 
                                $varText = "";
                                if ($v['color']) $varText .= "Color: " . $v['color'] . " ";
                                if ($v['size']) $varText .= "Size: " . $v['size'] . " ";
                                if ($v['ram']) $varText .= "RAM: " . $v['ram'] . " ";
                                if ($v['storage']) $varText .= "Storage: " . $v['storage'] . " ";
                                $modText = $v['price_modifier'] > 0 ? " (+" . format_price($v['price_modifier']) . ")" : "";
                            ?>
                                <option value="<?php echo $v['id']; ?>" data-price-modifier="<?php echo $v['price_modifier']; ?>" data-stock="<?php echo $v['stock']; ?>" data-sku="<?php echo htmlspecialchars($v['sku']); ?>">
                                    <?php echo htmlspecialchars($varText . $modText); ?> (Stock: <?php echo $v['stock']; ?>)
                                </option>
                            <?php endforeach; ?>
                        </select>
                        <!-- Hidden inputs for AJAX addition -->
                        <input type="hidden" id="product-variant-id" value="">
                    </div>
                <?php endif; ?>

                <!-- Stock / Actions -->
                <div class="row g-2 mb-4 align-items-center">
                    <div class="col-auto">
                        <label class="form-label mb-0 fw-semibold text-muted small text-uppercase">Qty:</label>
                    </div>
                    <div class="col-3 col-md-2">
                        <input type="number" id="product-qty-input" class="form-control text-center" value="1" min="1" max="<?php echo $product['stock']; ?>">
                    </div>
                    <div class="col-auto">
                        <span class="text-secondary small fw-bold" id="display-stock-status">
                            <?php if ($product['stock'] > 0): ?>
                                <span class="text-success"><i class="bi bi-check-circle-fill"></i> In Stock (<?php echo $product['stock']; ?>)</span>
                            <?php else: ?>
                                <span class="text-danger"><i class="bi bi-x-circle-fill"></i> Out of Stock</span>
                            <?php endif; ?>
                        </span>
                    </div>
                </div>

                <div class="d-flex gap-2 mb-4">
                    <button type="button" class="btn btn-primary btn-lg flex-grow-1 add-to-cart-btn" data-product-id="<?php echo $productId; ?>">
                        <i class="bi bi-cart-plus-fill"></i> Add to Cart
                    </button>
                    <button type="button" class="btn btn-warning btn-lg flex-grow-1 buy-now-btn fw-bold text-white" data-product-id="<?php echo $productId; ?>">
                        <i class="bi bi-lightning-fill"></i> Buy Now
                    </button>
                    <button type="button" class="btn btn-outline-danger btn-lg add-to-wishlist-btn" data-product-id="<?php echo $productId; ?>" title="Add to Wishlist">
                        <i class="bi bi-heart"></i>
                    </button>
                    <button type="button" class="btn btn-outline-secondary btn-lg add-to-compare-btn" data-product-id="<?php echo $productId; ?>" title="Add to Compare">
                        <i class="bi bi-arrow-left-right"></i>
                    </button>
                </div>

                <!-- Seller Info Box -->
                <?php if ($product['store_name']): ?>
                    <div class="border-top pt-3 mt-2 d-flex align-items-center gap-3">
                        <img src="<?php echo BASE_URL; ?>uploads/vendors/<?php echo htmlspecialchars($product['store_logo']); ?>" onerror="this.src='https://placehold.co/50x50?text=Store';" class="rounded border" width="48" height="48" alt="Store">
                        <div>
                            <span class="text-muted small d-block">Sold by:</span>
                            <a href="<?php echo BASE_URL; ?>search.php?vendor=<?php echo $product['vendor_user_id']; ?>" class="fw-bold text-decoration-none text-primary"><?php echo htmlspecialchars($product['store_name']); ?></a>
                        </div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- Product Description & Specifications Tabs -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card border-0 shadow-sm p-4 rounded-4">
                <ul class="nav nav-tabs mb-4" id="productTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active fw-bold text-uppercase" id="desc-tab" data-bs-toggle="tab" data-bs-target="#desc" type="button" role="tab" aria-controls="desc" aria-selected="true">Description</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link fw-bold text-uppercase" id="spec-tab" data-bs-toggle="tab" data-bs-target="#spec" type="button" role="tab" aria-controls="spec" aria-selected="false">Specifications</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link fw-bold text-uppercase" id="policy-tab" data-bs-toggle="tab" data-bs-target="#policy" type="button" role="tab" aria-controls="policy" aria-selected="false">Return & Warranty</button>
                    </li>
                </ul>
                <div class="tab-content" id="productTabsContent">
                    <div class="tab-pane fade show active" id="desc" role="tabpanel" aria-labelledby="desc-tab">
                        <div class="text-secondary lh-lg">
                            <?php echo nl2br($product['description']); ?>
                        </div>
                    </div>
                    
                    <div class="tab-pane fade" id="spec" role="tabpanel" aria-labelledby="spec-tab">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered mb-0">
                                <tbody>
                                    <?php 
                                    $specs = json_decode($product['specifications'] ?? '', true);
                                    if (is_array($specs) && !empty($specs)):
                                        foreach ($specs as $key => $val):
                                    ?>
                                        <tr>
                                            <th width="30%" class="bg-light"><?php echo htmlspecialchars($key); ?></th>
                                            <td><?php echo htmlspecialchars($val); ?></td>
                                        </tr>
                                    <?php 
                                        endforeach;
                                    else:
                                    ?>
                                        <tr>
                                            <td colspan="2" class="text-muted text-center">No specific configurations registered.</td>
                                        </tr>
                                    <?php endif; ?>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="policy" role="tabpanel" aria-labelledby="policy-tab">
                        <p class="text-secondary small"><strong>Warranty:</strong> <?php echo htmlspecialchars($product['warranty'] ?? 'No merchant warranty available.'); ?></p>
                        <p class="text-secondary small"><strong>Return Policy:</strong> <?php echo htmlspecialchars($product['return_policy'] ?? 'Standard marketplace return rules apply within 3 days of delivery.'); ?></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Review Section -->
    <div class="card border-0 shadow-sm p-4 rounded-4 mt-5">
        <h4 class="fw-bold mb-4">Customer Reviews</h4>
        
        <div class="row align-items-center mb-4">
            <div class="col-md-4 text-center border-end">
                <h1 class="display-3 fw-bold text-primary"><?php echo $avgRating; ?></h1>
                <div class="text-warning mb-2 fs-5">
                    <?php for ($i=1; $i<=5; $i++): ?>
                        <i class="bi bi-star-<?php echo ($i <= $avgRating) ? 'fill' : 'hash'; ?>-fill"></i>
                    <?php endfor; ?>
                </div>
                <p class="text-muted small">Average Store Rating</p>
            </div>
            <div class="col-md-8 ps-md-4">
                <div class="small fw-semibold text-secondary">Ratings Breakdown</div>
                <!-- Mock breakdown visual progress bars -->
                <div class="d-flex align-items-center gap-3 my-1">
                    <span class="small text-secondary" style="width:40px;">5 Star</span>
                    <div class="progress flex-grow-1" style="height: 8px;"><div class="progress-bar bg-success" style="width: 80%"></div></div>
                    <span class="small text-secondary">80%</span>
                </div>
                <div class="d-flex align-items-center gap-3 my-1">
                    <span class="small text-secondary" style="width:40px;">4 Star</span>
                    <div class="progress flex-grow-1" style="height: 8px;"><div class="progress-bar bg-primary" style="width: 15%"></div></div>
                    <span class="small text-secondary">15%</span>
                </div>
                <div class="d-flex align-items-center gap-3 my-1">
                    <span class="small text-secondary" style="width:40px;">3 Star</span>
                    <div class="progress flex-grow-1" style="height: 8px;"><div class="progress-bar bg-warning" style="width: 5%"></div></div>
                    <span class="small text-secondary">5%</span>
                </div>
            </div>
        </div>

        <hr class="my-4">

        <?php if (empty($reviews)): ?>
            <p class="text-muted text-center py-4">No approved reviews yet for this product. Be the first to buy and review!</p>
        <?php else: ?>
            <div class="d-flex flex-column gap-4">
                <?php foreach ($reviews as $rev): ?>
                    <div class="d-flex gap-3">
                        <img src="<?php echo BASE_URL; ?>uploads/avatars/<?php echo htmlspecialchars($rev['reviewer_avatar']); ?>" onerror="this.src='https://cdn-icons-png.flaticon.com/512/147/147144.png';" class="rounded-circle border" width="48" height="48" alt="Avatar">
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="fw-bold mb-0"><?php echo htmlspecialchars($rev['reviewer_name']); ?></h6>
                                <span class="small text-muted"><?php echo date('M d, Y', strtotime($rev['created_at'])); ?></span>
                            </div>
                            <div class="text-warning small my-1">
                                <?php for ($i=1; $i<=5; $i++): ?>
                                    <i class="bi bi-star-<?php echo ($i <= $rev['rating']) ? 'fill' : 'hash'; ?>-fill"></i>
                                <?php endfor; ?>
                            </div>
                            <p class="text-secondary small mb-1"><?php echo htmlspecialchars($rev['comment']); ?></p>
                            <?php if ($rev['reply']): ?>
                                <div class="bg-light p-3 rounded mt-2 border-start border-primary border-4">
                                    <h6 class="fw-bold mb-1"><i class="bi bi-reply-fill text-primary"></i> Seller Response:</h6>
                                    <p class="text-secondary small mb-0"><?php echo htmlspecialchars($rev['reply']); ?></p>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>

    <!-- Related Products -->
    <?php if (!empty($relatedProducts)): ?>
        <div class="my-5">
            <h3 class="fw-bold mb-4">Customers Also Bought</h3>
            <div class="row g-4">
                <?php foreach ($relatedProducts as $p): 
                    $price = $p['price'];
                    $discountPrice = $p['discount_price'];
                ?>
                    <div class="col-md-3 col-sm-6">
                        <div class="card h-100 product-card shadow-sm border-0 rounded-4">
                            <a href="<?php echo BASE_URL; ?>product.php?slug=<?php echo $p['slug']; ?>" class="text-decoration-none">
                                <div class="product-img-wrapper rounded-top-4">
                                    <img src="<?php echo BASE_URL; ?>uploads/products/<?php echo htmlspecialchars($p['image']); ?>" onerror="this.src='https://placehold.co/300x300?text=Product';" alt="<?php echo htmlspecialchars($p['name']); ?>">
                                </div>
                            </a>
                            <div class="card-body d-flex flex-column p-3">
                                <span class="text-muted small"><?php echo htmlspecialchars($p['category_name'] ?? 'General'); ?></span>
                                <h6 class="card-title fw-bold my-1 text-truncate">
                                    <a href="<?php echo BASE_URL; ?>product.php?slug=<?php echo $p['slug']; ?>" class="text-decoration-none text-dark"><?php echo htmlspecialchars($p['name']); ?></a>
                                </h6>
                                <div class="mt-auto d-flex justify-content-between align-items-center">
                                    <div>
                                        <?php if ($discountPrice): ?>
                                            <span class="fw-bold text-primary fs-5"><?php echo format_price($discountPrice); ?></span>
                                        <?php else: ?>
                                            <span class="fw-bold text-dark fs-5"><?php echo format_price($price); ?></span>
                                        <?php endif; ?>
                                    </div>
                                    <button type="button" class="btn btn-outline-primary btn-sm add-to-cart-btn" data-product-id="<?php echo $p['id']; ?>">
                                        <i class="bi bi-cart-plus"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    <?php endif; ?>
</div>

<script>
function changeMainImage(src) {
    document.getElementById('product-main-img').src = src;
    const thumbs = document.querySelectorAll('.img-gallery-thumb');
    thumbs.forEach(t => t.classList.remove('border-primary'));
    event.currentTarget.classList.add('border-primary');
}

function updateVariantDetails() {
    const sel = document.getElementById('variant-selector');
    if (!sel) return;
    
    const opt = sel.options[sel.selectedIndex];
    const modifier = parseFloat(opt.getAttribute('data-price-modifier') || 0);
    const stock = parseInt(opt.getAttribute('data-stock') || 0);
    const sku = opt.getAttribute('data-sku') || '';
    const variantId = opt.value;
    
    // Base Price
    const basePrice = <?php echo ($product['discount_price'] !== null) ? $product['discount_price'] : $product['price']; ?>;
    const finalPrice = basePrice + modifier;
    
    // Update DOM prices
    const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
    document.getElementById('display-price').innerText = formatter.format(finalPrice);
    
    // Update SKU
    document.getElementById('display-sku').innerText = sku ? sku : '<?php echo htmlspecialchars($product['sku'] ?? 'N/A'); ?>';
    
    // Update Stock Display
    const stockEl = document.getElementById('display-stock-status');
    const qtyInput = document.getElementById('product-qty-input');
    
    if (stock > 0) {
        stockEl.innerHTML = `<span class="text-success"><i class="bi bi-check-circle-fill"></i> In Stock (${stock})</span>`;
        qtyInput.max = stock;
        qtyInput.value = 1;
    } else {
        stockEl.innerHTML = `<span class="text-danger"><i class="bi bi-x-circle-fill"></i> Out of Stock</span>`;
        qtyInput.max = 0;
        qtyInput.value = 0;
    }

    // Set Hidden variant inputs
    document.getElementById('product-variant-id').value = variantId;
}
</script>

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