<?php
// products.php - Products page with Jumia Kenya-style centered layout, compact product cards (tighter horizontal spacing), advertisements slideshow, and sidebar
session_start();
include_once 'config.php';
include_once 'header.php';

// Get category filter
$category_id = isset($_GET['category']) ? (int)$_GET['category'] : null;
$where_clause = $category_id ? "WHERE p.category_id = $category_id" : "";
?>

<style>
    /* Jumia-style Advertisements Slideshow */
    #adCarousel .carousel-item {
        height: 400px;
        background-size: cover;
        background-position: center;
        border-radius: 8px;
    }
    #adCarousel .carousel-caption {
        background: rgba(0, 0, 0, 0.7);
        border-radius: 8px;
        padding: 15px;
        bottom: 20px;
        text-align: left;
        color: #fff;
    }
    #adCarousel .carousel-caption h5 {
        font-size: 1.8rem;
        font-weight: bold;
        color: #f68b1e; /* Jumia orange */
    }
    #adCarousel .carousel-caption p {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    #adCarousel .carousel-caption .btn {
        background-color: #f68b1e;
        border-color: #f68b1e;
        font-weight: bold;
        padding: 8px 20px;
    }
    #adCarousel .carousel-control-prev, #adCarousel .carousel-control-next {
        width: 5%;
        background: rgba(0, 0, 0, 0.3);
    }
    /* Sidebar */
    .sidebar {
        background-color: #f8f9fa;
        padding: 15px;
        border-right: 1px solid #dee2e6;
    }
    .sidebar h5 {
        color: #0D6EFD;
        font-size: 1.1rem;
        margin-bottom: 15px;
    }
    .sidebar .nav-link {
        color: #6C757D;
        padding: 8px 0;
        font-size: 0.9rem;
    }
    .sidebar .nav-link:hover {
        color: #f68b1e;
    }
    .sidebar .flash-sale-banner {
        background-color: #fff3e0;
        border: 1px solid #f68b1e;
        padding: 10px;
        text-align: center;
        margin-top: 20px;
        border-radius: 4px;
    }
    .sidebar .flash-sale-banner img {
        max-width: 100%;
        height: auto;
        border-radius: 4px;
    }
    /* Main Content */
    .main-content {
        padding: 15px;
    }
    .product-card {
        width: 200px;
        height: 350px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    }
    .product-card .card-img-top {
        height: 150px;
        object-fit: cover;
        width: 100%;
    }
    .product-card .card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 5px;
    }
    .product-card .card-title {
        font-size: 0.8rem;
        margin-bottom: 0.2rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .product-card .card-text {
        font-size: 0.7rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 0.2rem;
    }
    .product-card .text-primary {
        font-size: 0.8rem;
        margin-bottom: 0.2rem;
    }
    .product-card .text-muted {
        font-size: 0.7rem;
        margin-bottom: 0.2rem;
    }
    .product-card .btn-sm {
        font-size: 0.7rem;
        padding: 0.15rem 0.3rem;
    }
    .product-card .d-grid {
        margin-top: auto;
        gap: 0.2rem;
    }
    .flash-sale-badge {
        font-size: 0.65rem;
        padding: 0.15rem 0.3rem;
        background-color: #0D6EFD;
        z-index: 1;
    }
    .product-row {
        --bs-gutter-x: 0.25rem; /* Tighter horizontal spacing (~4px) */
    }
</style>

<!-- Advertisements Slideshow -->
<section class="mb-4">
    <div class="container">
        <div id="adCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active" style="background-image: url('images/ad1.jfif');">
                    <div class="carousel-caption">
                        <h5>50% Off Fashion Sale!</h5>
                        <p>Shop Doll Shoes and Slides at unbeatable prices.</p>
                        <a href="products.php?category=<?php echo $conn->query("SELECT id FROM categories WHERE name = 'Fashion'")->fetch_assoc()['id'] ?? 3; ?>" class="btn btn-primary">Shop Now</a>
                    </div>
                </div>
                <div class="carousel-item" style="background-image: url('images/ad2.jfif');">
                    <div class="carousel-caption">
                        <h5>New Stationery Arrivals</h5>
                        <p>Get premium notebooks and pens for back to school.</p>
                        <a href="products.php?category=<?php echo $conn->query("SELECT id FROM categories WHERE name = 'Stationery'")->fetch_assoc()['id'] ?? 1; ?>" class="btn btn-primary">Explore</a>
                    </div>
                </div>
                <div class="carousel-item" style="background-image: url('images/ad3.jfif');">
                    <div class="carousel-caption">
                        <h5>Sports Gear Discount</h5>
                        <p>Up to 30% off on soccer balls and rackets.</p>
                        <a href="products.php?category=<?php echo $conn->query("SELECT id FROM categories WHERE name = 'Sports'")->fetch_assoc()['id'] ?? 2; ?>" class="btn btn-primary">Buy Now</a>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#adCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#adCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </div>
</section>

<!-- Main Content with Sidebar -->
<div class="container">
    <div class="row">
        <!-- Sidebar -->
        <div class="col-md-3 sidebar">
            <h5>Shop by Category</h5>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link <?php echo !$category_id ? 'active' : ''; ?>" href="products.php">All Categories</a>
                </li>
                <?php
                $cats = $conn->query("SELECT * FROM categories WHERE parent_id IS NULL");
                while ($cat = $cats->fetch_assoc()): ?>
                    <li class="nav-item">
                        <a class="nav-link <?php echo $category_id == $cat['id'] ? 'active' : ''; ?>" href="products.php?category=<?php echo $cat['id']; ?>">
                            <i class="fas fa-<?php echo $cat['name'] == 'Fashion' ? 'tshirt' : ($cat['name'] == 'Stationery' ? 'pen' : 'futbol'); ?> me-2"></i>
                            <?php echo htmlspecialchars($cat['name']); ?>
                        </a>
                        <?php
                        $subcats = $conn->query("SELECT * FROM categories WHERE parent_id = " . $cat['id']);
                        if ($subcats->num_rows > 0): ?>
                            <ul class="nav flex-column ms-3">
                                <?php while ($subcat = $subcats->fetch_assoc()): ?>
                                    <li class="nav-item">
                                        <a class="nav-link <?php echo $category_id == $subcat['id'] ? 'active' : ''; ?>" href="products.php?category=<?php echo $subcat['id']; ?>">
                                            <?php echo htmlspecialchars($subcat['name']); ?>
                                        </a>
                                    </li>
                                <?php endwhile; ?>
                            </ul>
                        <?php endif; ?>
                    </li>
                <?php endwhile; ?>
            </ul>
            <div class="flash-sale-banner">
                <h6>Flash Sale!</h6>
                <p>Up to 20% off select items</p>
                <img src="images/flash.jfif" alt="Flash Sale Banner">
                <a href="flash_sales.php" class="btn btn-sm btn-primary mt-2">Shop Now</a>
            </div>
        </div>
        <!-- Main Content -->
        <div class="col-md-9 main-content">
            <!-- Products Section -->
            <section class="mb-4">
                <h2 class="text-center mb-3">Products</h2>
                <div class="row justify-content-center product-row row-cols-md-3 g-2">
                    <?php
                    $result = $conn->query("SELECT p.*, c.name as category FROM products p LEFT JOIN categories c ON p.category_id = c.id $where_clause ORDER BY p.created_at DESC");
                    if ($result->num_rows == 0): ?>
                        <p class="text-center">No products available<?php echo $category_id ? ' in this category' : ''; ?>.</p>
                    <?php else: ?>
                        <?php while ($row = $result->fetch_assoc()): ?>
                            <div class="col">
                                <div class="card product-card">
                                    <?php if ($row['is_flash_sale']): ?>
                                        <span class="flash-sale-badge badge position-absolute top-0 start-0 m-1">Flash Sale</span>
                                    <?php endif; ?>
                                    <img src="<?php echo $row['image'] ?? 'placeholder.jpg'; ?>" class="card-img-top" alt="<?php echo htmlspecialchars($row['name']); ?>">
                                    <div class="card-body">
                                        <h6 class="card-title"><?php echo htmlspecialchars($row['name']); ?></h6>
                                        <p class="card-text"><?php echo htmlspecialchars(substr($row['description'], 0, 60)); ?>...</p>
                                        <?php if ($row['is_flash_sale']): ?>
                                            <p class="text-decoration-line-through text-muted">KES <?php echo number_format($row['price'] * 1.2, 2); ?></p>
                                            <p class="text-primary fw-bold">KES <?php echo number_format($row['price'], 2); ?> <span class="badge bg-primary">20% OFF</span></p>
                                        <?php else: ?>
                                            <p class="text-primary fw-bold">KES <?php echo number_format($row['price'], 2); ?></p>
                                        <?php endif; ?>
                                        <div class="d-grid">
                                            <a href="product.php?id=<?php echo $row['id']; ?>" class="btn btn-outline-primary btn-sm">View Details</a>
                                            <form method="get" action="cart.php">
                                                <input type="hidden" name="action" value="add">
                                                <input type="hidden" name="product_id" value="<?php echo $row['id']; ?>">
                                                <input type="hidden" name="return_url" value="<?php echo urlencode($_SERVER['REQUEST_URI']); ?>">
                                                <button type="submit" class="btn btn-primary btn-sm">Add to Cart</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>
            </section>
        </div>
    </div>
</div>

<?php include_once 'footer.php'; ?>