<?php
// index.php - Browse All Products (Shows Reserved Products with Badge)
// File location: /bidwheels.net/product/index.php

require_once '../includes/functions.php';
require_once '../includes/header.php';

// Pagination
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$offset = ($page - 1) * PRODUCTS_PER_PAGE;

// Filter by category
$category_id = isset($_GET['category']) ? (int)$_GET['category'] : 0;

// Search query
$search = isset($_GET['search']) ? sanitize($_GET['search']) : '';

// Sort
$sort = isset($_GET['sort']) ? $_GET['sort'] : 'newest';

// Build where clause - REMOVED is_reserved = 0 to show reserved products
$where = "p.end_time > NOW()";
if ($category_id > 0) {
    $where .= " AND p.category_id = $category_id";
}
if ($search) {
    $where .= " AND (p.name LIKE '%$search%' OR p.short_desc LIKE '%$search%' OR p.tags LIKE '%$search%')";
}

// Build order by
$order_by = "ORDER BY p.created_at DESC";
switch($sort) {
    case 'price_low':
        $order_by = "ORDER BY p.starting_price ASC";
        break;
    case 'price_high':
        $order_by = "ORDER BY p.starting_price DESC";
        break;
    case 'bid_high':
        $order_by = "ORDER BY (SELECT MAX(amount) FROM bids WHERE product_id = p.id) DESC";
        break;
    case 'ending_soon':
        $order_by = "ORDER BY p.end_time ASC";
        break;
    case 'newest':
    default:
        $order_by = "ORDER BY p.created_at DESC";
        break;
}

// Get total products count
$total = getCount('products p', $where);
$total_pages = ceil($total / PRODUCTS_PER_PAGE);

// Get products
$products = fetchAll("
    SELECT p.*, c.name as category_name,
           (SELECT COUNT(*) FROM bids WHERE product_id = p.id) as total_bids,
           (SELECT MAX(amount) FROM bids WHERE product_id = p.id) as highest_bid
    FROM products p
    LEFT JOIN categories c ON p.category_id = c.id
    WHERE $where
    $order_by
    LIMIT $offset, " . PRODUCTS_PER_PAGE
);

// Get all categories for sidebar
$all_categories = fetchAll("SELECT * FROM categories ORDER BY name");
$display_categories = array_slice($all_categories, 0, 12);
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browse Vehicles - <?php echo SITE_NAME; ?></title>
    
    <style>
        .products-page {
            background: linear-gradient(135deg, #EFEBE0 0%, #e5e0d4 100%);
            min-height: 100vh;
            padding: 50px 0 70px;
        }
        
        .products-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 24px;
        }
        
        .page-header {
            text-align: center;
            margin-bottom: 50px;
            position: relative;
        }
        
        .page-header h1 {
            font-size: 48px;
            font-weight: 800;
            background: linear-gradient(135deg, #1a1a1a 0%, #FF8C3E 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 15px;
            letter-spacing: -0.5px;
        }
        
        .page-header p {
            color: #555;
            font-size: 18px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .page-header::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background: linear-gradient(90deg, #FF8C3E, #046307);
            border-radius: 3px;
        }
        
        .products-layout {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 35px;
        }
        
        .products-sidebar {
            position: sticky;
            top: 100px;
            height: fit-content;
        }
        
        .sidebar-widget {
            background: white;
            border-radius: 24px;
            padding: 28px;
            margin-bottom: 25px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .sidebar-widget:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
        }
        
        .sidebar-widget h3 {
            font-size: 18px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid #FF8C3E;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        
        .sidebar-widget h3 i {
            color: #FF8C3E;
        }
        
        .search-form {
            display: flex;
            gap: 12px;
        }
        
        .search-form input {
            flex: 1;
            padding: 14px 18px;
            border: 2px solid #f0f0f0;
            border-radius: 16px;
            font-size: 14px;
            background: #f8f8f8;
            transition: all 0.3s;
        }
        
        .search-form input:focus {
            outline: none;
            border-color: #FF8C3E;
            background: white;
        }
        
        .search-form button {
            padding: 14px 24px;
            background: linear-gradient(135deg, #FF8C3E, #e67a22);
            border: none;
            border-radius: 16px;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .search-form button:hover {
            background: linear-gradient(135deg, #e67a22, #FF8C3E);
            transform: scale(1.02);
        }
        
        .category-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .category-list li {
            margin-bottom: 8px;
        }
        
        .category-list li a {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 12px 16px;
            color: #444;
            text-decoration: none;
            border-radius: 14px;
            transition: all 0.3s;
            font-size: 14px;
            font-weight: 500;
        }
        
        .category-list li a i {
            width: 24px;
            color: #FF8C3E;
            font-size: 18px;
        }
        
        .category-list li a:hover {
            background: linear-gradient(135deg, #FFF5EE, #ffe8dc);
            color: #FF8C3E;
            transform: translateX(5px);
        }
        
        .category-list li a.active {
            background: linear-gradient(135deg, #FF8C3E, #e67a22);
            color: white;
        }
        
        .category-list li a.active i {
            color: white;
        }
        
        .sort-select {
            width: 100%;
            padding: 14px 16px;
            border: 2px solid #f0f0f0;
            border-radius: 16px;
            font-size: 14px;
            background: #f8f8f8;
            cursor: pointer;
            transition: all 0.3s;
            font-weight: 500;
        }
        
        .sort-select:focus {
            outline: none;
            border-color: #FF8C3E;
            background: white;
        }
        
        .mobile-categories {
            display: none;
            margin-bottom: 30px;
        }
        
        .categories-marquee {
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
            position: relative;
            padding: 15px 0;
            background: white;
            border-radius: 24px;
            margin-bottom: 20px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        }
        
        .categories-track {
            display: inline-flex;
            animation: scrollCategories 25s linear infinite;
        }
        
        .categories-track:hover {
            animation-play-state: paused;
        }
        
        @keyframes scrollCategories {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        .category-scroll-card {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #f8f8f8;
            border-radius: 20px;
            padding: 12px 24px;
            margin: 0 10px;
            text-decoration: none;
            transition: all 0.3s;
            min-width: 110px;
        }
        
        .category-scroll-card:hover {
            background: #FF8C3E;
            transform: translateY(-5px);
        }
        
        .category-scroll-card i {
            font-size: 28px;
            color: #FF8C3E;
            margin-bottom: 8px;
        }
        
        .category-scroll-card:hover i {
            color: white;
        }
        
        .category-scroll-card span {
            font-size: 13px;
            color: #333;
            font-weight: 500;
        }
        
        .category-scroll-card:hover span {
            color: white;
        }
        
        .view-all-categories-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
            border: none;
            border-radius: 50px;
            color: white;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: 14px;
        }
        
        .view-all-categories-btn:hover {
            background: linear-gradient(135deg, #FF8C3E, #e67a22);
            transform: translateY(-2px);
        }
        
        .products-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 28px;
        }
        
        .product-card {
            background: white;
            border-radius: 24px;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 10px 25px rgba(0,0,0,0.05);
            position: relative;
        }
        
        .product-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #FF8C3E, #046307);
            transform: scaleX(0);
            transition: transform 0.4s;
        }
        
        .product-card:hover::before {
            transform: scaleX(1);
        }
        
        .product-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(255,140,62,0.15);
        }
        
        .product-image {
            position: relative;
            aspect-ratio: 4/3;
            overflow: hidden;
            cursor: pointer;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .product-card:hover .product-image img {
            transform: scale(1.08);
        }
        
        .product-badge {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(4px);
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 11px;
            color: white;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .product-badge i {
            color: #FF8C3E;
        }
        
        .reserved-badge-card {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #dc3545;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 5px;
            z-index: 10;
        }
        
        .product-info {
            padding: 16px;
        }
        
        .product-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px;
            color: #1a1a1a;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.4;
        }
        
        .product-category {
            font-size: 12px;
            color: #FF8C3E;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
            font-weight: 500;
        }
        
        .product-price {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 12px;
        }
        
        .current-bid {
            font-size: 20px;
            font-weight: 800;
            color: #FF8C3E;
        }
        
        .starting-price {
            font-size: 12px;
            color: #aaa;
            text-decoration: line-through;
        }
        
        .product-time {
            font-size: 12px;
            color: #666;
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 15px;
            padding: 8px 12px;
            background: #f8f8f8;
            border-radius: 30px;
            width: fit-content;
        }
        
        .product-time i {
            color: #046307;
        }
        
        .product-btn {
            display: block;
            text-align: center;
            background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
            color: white;
            padding: 12px;
            border-radius: 40px;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .product-btn:hover {
            background: linear-gradient(135deg, #FF8C3E, #e67a22);
            transform: translateY(-2px);
        }
        
        .product-btn-disabled {
            display: block;
            text-align: center;
            background: #6c757d;
            color: white;
            padding: 12px;
            border-radius: 40px;
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            cursor: not-allowed;
        }
        
        .no-results {
            text-align: center;
            padding: 80px;
            background: white;
            border-radius: 24px;
            grid-column: 1/-1;
        }
        
        .no-results i {
            font-size: 70px;
            color: #ddd;
            margin-bottom: 20px;
        }
        
        .no-results h3 {
            font-size: 28px;
            color: #333;
            margin-bottom: 10px;
        }
        
        .no-results p {
            color: #888;
            margin-bottom: 25px;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 50px;
            flex-wrap: wrap;
        }
        
        .pagination a {
            padding: 12px 18px;
            background: white;
            color: #333;
            text-decoration: none;
            border-radius: 14px;
            transition: all 0.3s;
            font-weight: 600;
            min-width: 45px;
            text-align: center;
        }
        
        .pagination a:hover {
            background: #FF8C3E;
            color: white;
            transform: translateY(-2px);
        }
        
        .pagination a.active {
            background: linear-gradient(135deg, #FF8C3E, #e67a22);
            color: white;
        }
        
        .categories-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(8px);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }
        
        .categories-modal-content {
            background: #EFEBE0;
            border-radius: 32px;
            max-width: 850px;
            width: 90%;
            max-height: 85vh;
            overflow-y: auto;
            padding: 35px;
            position: relative;
            animation: modalSlide 0.3s ease;
        }
        
        @keyframes modalSlide {
            from {
                transform: translateY(-30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        
        .categories-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #FF8C3E;
        }
        
        .categories-modal-header h3 {
            font-size: 26px;
            color: #1a1a1a;
            font-weight: 700;
        }
        
        .modal-close {
            font-size: 32px;
            cursor: pointer;
            color: #888;
            transition: color 0.3s;
        }
        
        .modal-close:hover {
            color: #FF8C3E;
        }
        
        .categories-modal-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 18px;
        }
        
        .modal-category-card {
            background: white;
            border-radius: 20px;
            padding: 25px 20px;
            text-align: center;
            text-decoration: none;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .modal-category-card:hover {
            background: #FF8C3E;
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(255,140,62,0.2);
        }
        
        .modal-category-card i {
            font-size: 40px;
            color: #FF8C3E;
            margin-bottom: 12px;
        }
        
        .modal-category-card:hover i {
            color: white;
        }
        
        .modal-category-card h4 {
            font-size: 15px;
            color: #1a1a1a;
            font-weight: 600;
        }
        
        .modal-category-card:hover h4 {
            color: white;
        }
        
        .result-count {
            background: white;
            border-radius: 40px;
            padding: 8px 20px;
            display: inline-block;
            margin-bottom: 25px;
            font-size: 14px;
            font-weight: 500;
            color: #666;
        }
        
        .result-count span {
            color: #FF8C3E;
            font-weight: 700;
        }
        
        @media (max-width: 1200px) {
            .products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 992px) {
            .products-layout {
                grid-template-columns: 1fr;
            }
            
            .products-sidebar {
                display: none;
            }
            
            .mobile-categories {
                display: block;
            }
            
            .products-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .products-page {
                padding: 30px 0 50px;
            }
            
            .products-container {
                padding: 0 16px;
            }
            
            .page-header h1 {
                font-size: 32px;
            }
            
            .page-header p {
                font-size: 14px;
            }
            
            .products-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .product-image {
                width: 100%;
                aspect-ratio: 4/3;
            }
            
            .product-image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            
            .category-scroll-card {
                padding: 10px 18px;
                min-width: 90px;
            }
            
            .category-scroll-card i {
                font-size: 22px;
            }
            
            .category-scroll-card span {
                font-size: 11px;
            }
        }
        
        @media (max-width: 480px) {
            .category-scroll-card {
                padding: 8px 12px;
                min-width: 75px;
            }
            
            .category-scroll-card i {
                font-size: 18px;
            }
            
            .category-scroll-card span {
                font-size: 10px;
            }
            
            .categories-modal-grid {
                grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            }
            
            .modal-category-card {
                padding: 15px 12px;
            }
            
            .modal-category-card i {
                font-size: 28px;
            }
            
            .modal-category-card h4 {
                font-size: 12px;
            }
        }
        
        .text-center {
            text-align: center;
        }
    </style>
</head>
<body>

<div class="products-page">
    <div class="products-container">
        <div class="page-header">
            <h1>Browse Vehicles</h1>
            <p>Discover your dream vehicle from our wide selection of luxury cars, motorcycles, and yachts</p>
        </div>
        
        <!-- Mobile Categories - Infinite Scroll -->
        <div class="mobile-categories">
            <div class="categories-marquee">
                <div class="categories-track" id="categoriesTrackMobile">
                    <?php foreach ($display_categories as $category): ?>
                        <a href="category.php?id=<?php echo $category['id']; ?>" class="category-scroll-card">
                            <i class="<?php echo $category['icon'] ?? 'fas fa-car'; ?>"></i>
                            <span><?php echo htmlspecialchars($category['name']); ?></span>
                        </a>
                    <?php endforeach; ?>
                    <?php foreach ($display_categories as $category): ?>
                        <a href="category.php?id=<?php echo $category['id']; ?>" class="category-scroll-card">
                            <i class="<?php echo $category['icon'] ?? 'fas fa-car'; ?>"></i>
                            <span><?php echo htmlspecialchars($category['name']); ?></span>
                        </a>
                    <?php endforeach; ?>
                </div>
            </div>
            <button class="view-all-categories-btn" onclick="openCategoriesModal()">
                <i class="fas fa-th-large"></i> View All Categories
            </button>
        </div>
        
        <div class="products-layout">
            <!-- Sidebar (Desktop) -->
            <aside class="products-sidebar">
                <div class="sidebar-widget">
                    <h3><i class="fas fa-search"></i> Search</h3>
                    <form method="GET" action="" class="search-form">
                        <input type="text" name="search" placeholder="Search vehicles..." value="<?php echo htmlspecialchars($search); ?>">
                        <button type="submit"><i class="fas fa-search"></i></button>
                    </form>
                </div>
                
                <div class="sidebar-widget">
                    <h3><i class="fas fa-filter"></i> Categories</h3>
                    <ul class="category-list">
                        <li><a href="index.php" <?php echo !$category_id ? 'class="active"' : ''; ?>><i class="fas fa-car"></i> All Categories</a></li>
                        <?php foreach ($all_categories as $cat): ?>
                            <li>
                                <a href="index.php?category=<?php echo $cat['id']; ?>&search=<?php echo urlencode($search); ?>&sort=<?php echo $sort; ?>" <?php echo $category_id == $cat['id'] ? 'class="active"' : ''; ?>>
                                    <i class="<?php echo $cat['icon'] ?? 'fas fa-car'; ?>"></i> <?php echo htmlspecialchars($cat['name']); ?>
                                </a>
                            </li>
                        <?php endforeach; ?>
                    </ul>
                </div>
                
                <div class="sidebar-widget">
                    <h3><i class="fas fa-sort-amount-down"></i> Sort By</h3>
                    <select class="sort-select" id="sortSelect" onchange="window.location.href=this.value">
                        <option value="index.php?category=<?php echo $category_id; ?>&search=<?php echo urlencode($search); ?>&sort=newest" <?php echo $sort == 'newest' ? 'selected' : ''; ?>>Newest First</option>
                        <option value="index.php?category=<?php echo $category_id; ?>&search=<?php echo urlencode($search); ?>&sort=price_low" <?php echo $sort == 'price_low' ? 'selected' : ''; ?>>Price: Low to High</option>
                        <option value="index.php?category=<?php echo $category_id; ?>&search=<?php echo urlencode($search); ?>&sort=price_high" <?php echo $sort == 'price_high' ? 'selected' : ''; ?>>Price: High to Low</option>
                        <option value="index.php?category=<?php echo $category_id; ?>&search=<?php echo urlencode($search); ?>&sort=bid_high" <?php echo $sort == 'bid_high' ? 'selected' : ''; ?>>Highest Bid</option>
                        <option value="index.php?category=<?php echo $category_id; ?>&search=<?php echo urlencode($search); ?>&sort=ending_soon" <?php echo $sort == 'ending_soon' ? 'selected' : ''; ?>>Ending Soon</option>
                    </select>
                </div>
            </aside>
            
            <!-- Products Content -->
            <div class="products-content">
                <div class="result-count">
                    <i class="fas fa-car"></i> Found <span><?php echo $total; ?></span> vehicles
                </div>
                
                <div class="products-grid">
                    <?php if (count($products) > 0): ?>
                        <?php foreach ($products as $product): ?>
                            <div class="product-card">
                                <?php if ($product['is_reserved'] == 1): ?>
                                    <div class="reserved-badge-card">
                                        <i class="fas fa-ban"></i> RESERVED
                                    </div>
                                <?php endif; ?>
                                <div class="product-image" onclick="window.location.href='detail.php?id=<?php echo $product['id']; ?>'">
                                    <img src="<?php echo getFeaturedImage($product['id']); ?>" alt="<?php echo htmlspecialchars($product['name']); ?>">
                                    <div class="product-badge">
                                        <i class="fas fa-gavel"></i> <?php echo $product['total_bids']; ?> bids
                                    </div>
                                </div>
                                <div class="product-info">
                                    <h3 class="product-title"><?php echo htmlspecialchars($product['name']); ?></h3>
                                    <div class="product-category">
                                        <i class="fas fa-tag"></i> <?php echo htmlspecialchars($product['category_name']); ?>
                                    </div>
                                    <div class="product-price">
                                        <span class="current-bid"><?php echo formatPrice($product['highest_bid'] ?? $product['starting_price']); ?></span>
                                        <span class="starting-price"><?php echo formatPrice($product['starting_price']); ?></span>
                                    </div>
                                    <div class="product-time" data-end-time="<?php echo $product['end_time']; ?>">
                                        <i class="fas fa-clock"></i> <?php echo getRemainingTime($product['end_time']); ?>
                                    </div>
                                    <?php if ($product['is_reserved'] == 1): ?>
                                        <div class="product-btn-disabled">
                                            <i class="fas fa-ban"></i> Not Available
                                        </div>
                                    <?php else: ?>
                                        <a href="detail.php?id=<?php echo $product['id']; ?>" class="product-btn">Place Bid <i class="fas fa-arrow-right"></i></a>
                                    <?php endif; ?>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="no-results">
                            <i class="fas fa-search"></i>
                            <h3>No vehicles found</h3>
                            <p>Try adjusting your search or browse other categories.</p>
                            <a href="index.php" class="product-btn" style="display: inline-block; padding: 12px 28px;">View All Vehicles</a>
                        </div>
                    <?php endif; ?>
                </div>
                
                <!-- Pagination -->
                <?php if ($total_pages > 1): ?>
                    <div class="pagination">
                        <?php if ($page > 1): ?>
                            <a href="?page=<?php echo $page - 1; ?>&category=<?php echo $category_id; ?>&search=<?php echo urlencode($search); ?>&sort=<?php echo $sort; ?>"><i class="fas fa-chevron-left"></i> Prev</a>
                        <?php endif; ?>
                        
                        <?php
                        $start_page = max(1, $page - 2);
                        $end_page = min($total_pages, $page + 2);
                        
                        if ($start_page > 1) {
                            echo '<a href="?page=1&category=' . $category_id . '&search=' . urlencode($search) . '&sort=' . $sort . '">1</a>';
                            if ($start_page > 2) echo '<span style="padding: 12px 8px;">...</span>';
                        }
                        
                        for ($i = $start_page; $i <= $end_page; $i++): ?>
                            <a href="?page=<?php echo $i; ?>&category=<?php echo $category_id; ?>&search=<?php echo urlencode($search); ?>&sort=<?php echo $sort; ?>" class="<?php echo $i == $page ? 'active' : ''; ?>"><?php echo $i; ?></a>
                        <?php endfor;
                        
                        if ($end_page < $total_pages) {
                            if ($end_page < $total_pages - 1) echo '<span style="padding: 12px 8px;">...</span>';
                            echo '<a href="?page=' . $total_pages . '&category=' . $category_id . '&search=' . urlencode($search) . '&sort=' . $sort . '">' . $total_pages . '</a>';
                        }
                        ?>
                        
                        <?php if ($page < $total_pages): ?>
                            <a href="?page=<?php echo $page + 1; ?>&category=<?php echo $category_id; ?>&search=<?php echo urlencode($search); ?>&sort=<?php echo $sort; ?>">Next <i class="fas fa-chevron-right"></i></a>
                        <?php endif; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<!-- Categories Modal -->
<div id="categoriesModal" class="categories-modal">
    <div class="categories-modal-content">
        <div class="categories-modal-header">
            <h3><i class="fas fa-tags"></i> All Categories</h3>
            <span class="modal-close" onclick="closeCategoriesModal()">&times;</span>
        </div>
        <div class="categories-modal-grid">
            <?php foreach ($all_categories as $category): ?>
                <a href="category.php?id=<?php echo $category['id']; ?>" class="modal-category-card" onclick="closeCategoriesModal()">
                    <i class="<?php echo $category['icon'] ?? 'fas fa-car'; ?>"></i>
                    <h4><?php echo htmlspecialchars($category['name']); ?></h4>
                </a>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<script>
function openCategoriesModal() {
    document.getElementById('categoriesModal').style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

function closeCategoriesModal() {
    document.getElementById('categoriesModal').style.display = 'none';
    document.body.style.overflow = 'auto';
}

window.onclick = function(event) {
    const modal = document.getElementById('categoriesModal');
    if (event.target === modal) {
        closeCategoriesModal();
    }
}

function updateCountdowns() {
    document.querySelectorAll('.product-time').forEach(el => {
        const endTime = el.getAttribute('data-end-time');
        if (endTime) {
            const remaining = getRemainingTime(endTime);
            el.innerHTML = `<i class="fas fa-clock"></i> ${remaining}`;
        }
    });
}

function getRemainingTime(endTime) {
    const now = new Date().getTime();
    const end = new Date(endTime).getTime();
    const distance = end - now;
    
    if (distance < 0) return 'Ended';
    
    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
    const hours = Math.floor((distance % (86400000)) / (3600000));
    const minutes = Math.floor((distance % (3600000)) / (60000));
    
    if (days > 0) {
        return days + 'd ' + hours + 'h';
    } else if (hours > 0) {
        return hours + 'h ' + minutes + 'm';
    } else if (minutes > 0) {
        return minutes + 'm left';
    } else {
        return 'Ending soon';
    }
}

setInterval(updateCountdowns, 1000);
</script>

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