<?php
// index.php - Catalog & Homepage
require_once 'db_connect.php';

// Retrieve Filters & Search parameters
$search = $_GET['search'] ?? '';
$category = $_GET['category'] ?? '';
$size = $_GET['size'] ?? '';
$color = $_GET['color'] ?? '';
$min_price = isset($_GET['min_price']) && $_GET['min_price'] !== '' ? floatval($_GET['min_price']) : 0;
$max_price = isset($_GET['max_price']) && $_GET['max_price'] !== '' ? floatval($_GET['max_price']) : 999999;
$sort = $_GET['sort'] ?? 'newest';

// Build SQL query dynamically
$query = "SELECT p.*, u.username AS seller_name FROM products p JOIN users u ON p.seller_id = u.id WHERE p.status = 'approved'";
$params = [];

if (!empty($search)) {
    $query .= " AND (p.title LIKE ? OR p.description LIKE ? OR p.category LIKE ?)";
    $params[] = "%$search%";
    $params[] = "%$search%";
    $params[] = "%$search%";
}

if (!empty($category)) {
    $query .= " AND p.category = ?";
    $params[] = $category;
}

if ($min_price >= 0) {
    $query .= " AND p.price >= ?";
    $params[] = $min_price;
}

if ($max_price > 0 && $max_price > $min_price) {
    $query .= " AND p.price <= ?";
    $params[] = $max_price;
}

if (isset($_GET['in_stock']) && $_GET['in_stock'] === '1') {
    $query .= " AND p.stock > 0";
}

if (!empty($size)) {
    $query .= " AND FIND_IN_SET(?, p.sizes) > 0";
    $params[] = $size;
}

if (!empty($color)) {
    $query .= " AND FIND_IN_SET(?, p.colors) > 0";
    $params[] = $color;
}

// Sorting logic
switch ($sort) {
    case 'price_asc':
        $query .= " ORDER BY p.price ASC";
        break;
    case 'price_desc':
        $query .= " ORDER BY p.price DESC";
        break;
    case 'best_selling':
        // Sum total quantities sold in order items
        $query .= " ORDER BY (SELECT IFNULL(SUM(oi.quantity), 0) FROM order_items oi WHERE oi.product_id = p.id) DESC";
        break;
    case 'newest':
    default:
        $query .= " ORDER BY p.created_at DESC";
        break;
}

$stmt = $pdo->prepare($query);
$stmt->execute($params);
$products = $stmt->fetchAll();

// Get Best Selling / Featured for Flash Sale block
$flashStmt = $pdo->query("SELECT * FROM products WHERE status = 'approved' AND stock > 0 ORDER BY stock DESC LIMIT 4");
$flashProducts = $flashStmt->fetchAll();

renderHeader(__('index_page_title'));
?>

<!-- 1. Hero Slide Carousel -->
<section class="relative rounded-3xl overflow-hidden h-[260px] sm:h-[380px] mb-10 shadow-lg border border-gray-100">
    <div id="carousel-slide-1" class="absolute inset-0 bg-gradient-to-r from-slate-900/90 to-indigo-900/90 flex items-center px-8 sm:px-16 transition-opacity duration-1000 ease-in-out opacity-100">
        <div class="max-w-md text-white space-y-4">
            <span class="px-3 py-1 bg-white/20 backdrop-blur text-xs font-bold uppercase rounded-full tracking-widest text-orange-300"><?php echo __('hero1_badge'); ?></span>
            <h1 class="text-3xl sm:text-5xl font-black tracking-tight leading-tight"><?php echo __('hero1_title'); ?></h1>
            <p class="text-xs sm:text-sm text-gray-200"><?php echo __('hero1_desc'); ?></p>
            <a href="index.php?category=Electronics" class="inline-block px-5 py-2.5 bg-white text-indigo-600 hover:bg-indigo-50 font-bold rounded-xl shadow-md transition-all text-xs sm:text-sm"><?php echo __('hero1_btn'); ?></a>
        </div>
        <div class="absolute right-0 bottom-0 h-full w-1/2 hidden md:block bg-[url('https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800')] bg-cover bg-center"></div>
    </div>
    
    <div id="carousel-slide-2" class="absolute inset-0 bg-gradient-to-r from-orange-600/95 to-amber-700/95 flex items-center px-8 sm:px-16 transition-opacity duration-1000 ease-in-out opacity-0 pointer-events-none">
        <div class="max-w-md text-white space-y-4">
            <span class="px-3 py-1 bg-white/20 backdrop-blur text-xs font-bold uppercase rounded-full tracking-widest text-amber-200"><?php echo __('hero2_badge'); ?></span>
            <h1 class="text-3xl sm:text-5xl font-black tracking-tight leading-tight"><?php echo __('hero2_title'); ?></h1>
            <p class="text-xs sm:text-sm text-gray-100"><?php echo __('hero2_desc'); ?></p>
            <a href="index.php?category=Home+%26+Living" class="inline-block px-5 py-2.5 bg-white text-orange-600 hover:bg-orange-50 font-bold rounded-xl shadow-md transition-all text-xs sm:text-sm"><?php echo __('hero2_btn'); ?></a>
        </div>
        <div class="absolute right-0 bottom-0 h-full w-1/2 hidden md:block bg-[url('https://images.unsplash.com/photo-1517668808822-9ebe02f2a698?w=800')] bg-cover bg-center"></div>
    </div>

    <!-- Dots -->
    <div class="absolute bottom-5 left-1/2 -translate-x-1/2 flex gap-2 z-10">
        <button onclick="setSlide(1)" id="carousel-dot-1" class="w-2.5 h-2.5 rounded-full bg-white transition-all"></button>
        <button onclick="setSlide(2)" id="carousel-dot-2" class="w-2.5 h-2.5 rounded-full bg-white/50 transition-all"></button>
    </div>
</section>

<!-- 2. Flash Sale countdown banner -->
<section class="mb-12 bg-gradient-to-r from-red-600 to-orange-500 rounded-3xl p-6 text-white shadow-xl">
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
        <div class="flex items-center gap-3">
            <svg class="w-6 h-6 text-amber-300 animate-pulse flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
            <h2 class="text-xl sm:text-2xl font-black tracking-tight"><?php echo __('flash_sale_title'); ?></h2>
            <div class="flex gap-2 items-center ml-2">
                <span id="timer-hours" class="bg-black/40 backdrop-blur px-2.5 py-1.5 rounded-lg text-sm font-black font-mono">02</span>
                <span class="font-bold">:</span>
                <span id="timer-mins" class="bg-black/40 backdrop-blur px-2.5 py-1.5 rounded-lg text-sm font-black font-mono">14</span>
                <span class="font-bold">:</span>
                <span id="timer-secs" class="bg-black/40 backdrop-blur px-2.5 py-1.5 rounded-lg text-sm font-black font-mono">55</span>
            </div>
        </div>
        <span class="text-xs font-bold bg-white/20 px-3.5 py-1.5 rounded-full backdrop-blur"><?php echo __('flash_ends_soon'); ?></span>
    </div>
    
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <?php foreach ($flashProducts as $flash): 
            $originalPrice = floatval($flash['price']);
            $discountPrice = ($originalPrice * 0.75); // 25% off
            $img = getProductImgUrl($flash['id'], $flash['images']);
        ?>
            <a href="javascript:void(0)" onclick="openProductModal(<?php echo htmlspecialchars(json_encode($flash)); ?>)" class="bg-white/10 hover:bg-white/20 backdrop-blur p-3 rounded-2xl flex flex-col justify-between text-white transition-all transform hover:-translate-y-0.5 border border-white/10">
                <div class="relative rounded-xl overflow-hidden mb-3 h-28 bg-gray-100/10">
                    <img src="<?php echo $img; ?>" class="w-full h-full object-cover" onerror="this.onerror=null; this.src='https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=300';">
                    <span class="absolute top-2 left-2 bg-yellow-400 text-slate-900 text-[9px] font-black px-1.5 py-0.5 rounded uppercase">-25%</span>
                </div>
                <div>
                    <h4 class="font-bold text-xs line-clamp-1"><?php echo sanitize($flash['title']); ?></h4>
                    <div class="flex items-baseline gap-2 mt-1">
                        <span class="text-sm font-black text-yellow-300">$<?php echo number_format($discountPrice, 2); ?></span>
                        <span class="text-[10px] line-through text-white/50">$<?php echo number_format($originalPrice, 2); ?></span>
                    </div>
                </div>
            </a>
        <?php endforeach; ?>
    </div>
</section>

<!-- 3. Category shortcuts -->
<section class="mb-12">
    <h3 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-6"><?php echo __('cat_featured'); ?></h3>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        <a href="index.php?category=Electronics" class="group relative rounded-2xl overflow-hidden h-24 sm:h-28 flex items-center justify-center shadow hover:shadow-lg transition-all duration-300">
            <div class="absolute inset-0 bg-cover bg-center bg-[url('https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400')] group-hover:scale-110 transition-transform duration-300"></div>
            <div class="absolute inset-0 bg-slate-900/50 group-hover:bg-slate-900/65 transition-colors"></div>
            <span class="relative text-white font-extrabold text-sm sm:text-base tracking-wider text-center px-2"><?php echo __('cat_electronics'); ?></span>
        </a>
        <a href="index.php?category=Home+%26+Living" class="group relative rounded-2xl overflow-hidden h-24 sm:h-28 flex items-center justify-center shadow hover:shadow-lg transition-all duration-300">
            <div class="absolute inset-0 bg-cover bg-center bg-[url('https://images.unsplash.com/photo-1517668808822-9ebe02f2a698?w=400')] group-hover:scale-110 transition-transform duration-300"></div>
            <div class="absolute inset-0 bg-slate-900/50 group-hover:bg-slate-900/65 transition-colors"></div>
            <span class="relative text-white font-extrabold text-sm sm:text-base tracking-wider text-center px-2"><?php echo __('cat_home'); ?></span>
        </a>
        <a href="index.php?category=Fashion" class="group relative rounded-2xl overflow-hidden h-24 sm:h-28 flex items-center justify-center shadow hover:shadow-lg transition-all duration-300">
            <div class="absolute inset-0 bg-cover bg-center bg-[url('https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=400')] group-hover:scale-110 transition-transform duration-300"></div>
            <div class="absolute inset-0 bg-slate-900/50 group-hover:bg-slate-900/65 transition-colors"></div>
            <span class="relative text-white font-extrabold text-sm sm:text-base tracking-wider text-center px-2"><?php echo __('cat_fashion'); ?></span>
        </a>
        <a href="index.php?category=Food+%26+Beverages" class="group relative rounded-2xl overflow-hidden h-24 sm:h-28 flex items-center justify-center shadow hover:shadow-lg transition-all duration-300">
            <div class="absolute inset-0 bg-cover bg-center bg-[url('https://images.unsplash.com/photo-1536256263959-770b48d82b0a?w=400')] group-hover:scale-110 transition-transform duration-300"></div>
            <div class="absolute inset-0 bg-slate-900/50 group-hover:bg-slate-900/65 transition-colors"></div>
            <span class="relative text-white font-extrabold text-sm sm:text-base tracking-wider text-center px-2"><?php echo __('cat_food'); ?></span>
        </a>
    </div>
</section>

<!-- 4. Marketplace Filters & Grid -->
<div class="flex flex-col lg:flex-row gap-8">
    
    <!-- Filter Sidebar (GET Form) -->
    <aside class="w-full lg:w-64 flex-shrink-0 bg-white p-6 rounded-2xl border border-gray-100 shadow-sm h-fit">
        <form action="index.php" method="GET" class="space-y-6">
            <!-- Persist search query -->
            <?php if (!empty($search)): ?>
                <input type="hidden" name="search" value="<?php echo sanitize($search); ?>">
            <?php endif; ?>

            <div class="flex justify-between items-center border-b border-gray-100 pb-3">
                <h3 class="font-bold text-gray-900 text-lg"><?php echo __('filter_title'); ?></h3>
                <a href="index.php" class="text-xs font-semibold text-orange-500 hover:underline"><?php echo __('filter_reset'); ?></a>
            </div>

            <!-- Price Filters -->
            <div>
                <h4 class="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3"><?php echo __('filter_price'); ?></h4>
                <div class="flex gap-2">
                    <input type="number" name="min_price" placeholder="<?php echo __('filter_price_min'); ?>" value="<?php echo isset($_GET['min_price']) ? sanitize($_GET['min_price']) : ''; ?>" class="w-1/2 p-2 bg-gray-50 border border-gray-200 rounded-lg text-xs focus:outline-none focus:bg-white">
                    <input type="number" name="max_price" placeholder="<?php echo __('filter_price_max'); ?>" value="<?php echo isset($_GET['max_price']) ? sanitize($_GET['max_price']) : ''; ?>" class="w-1/2 p-2 bg-gray-50 border border-gray-200 rounded-lg text-xs focus:outline-none focus:bg-white">
                </div>
            </div>

            <!-- Category Radio Filters -->
            <div>
                <h4 class="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3"><?php echo __('filter_categories'); ?></h4>
                <div class="space-y-2 max-h-56 overflow-y-auto pr-1">
                    <?php 
                    $categoriesList = [
                        __('cat_all') => '',
                        'Electronics' => 'Electronics',
                        'Gadgets' => 'Gadgets',
                        'Home & Living' => 'Home & Living',
                        'Fashion' => 'Fashion',
                        'Beauty & Health' => 'Beauty & Health',
                        'Sports & Outdoors' => 'Sports & Outdoors',
                        'Food & Beverages' => 'Food & Beverages',
                        'Books & Stationery' => 'Books & Stationery',
                        'Toys & Hobbies' => 'Toys & Hobbies',
                        'Other' => 'Other'
                    ];
                    foreach ($categoriesList as $label => $val):
                        $isChecked = $category === $val;
                    ?>
                        <label class="flex items-center gap-2.5 text-sm text-gray-600 hover:text-orange-500 cursor-pointer">
                            <input type="radio" name="category" value="<?php echo sanitize($val); ?>" <?php echo $isChecked ? 'checked' : ''; ?> class="text-orange-500 focus:ring-orange-500"> <?php echo sanitize($label); ?>
                        </label>
                    <?php endforeach; ?>
                </div>
            </div>

            <!-- Availability Filter -->
            <div>
                <h4 class="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3"><?php echo __('filter_availability'); ?></h4>
                <label class="flex items-center gap-2.5 text-sm text-gray-600 hover:text-orange-500 cursor-pointer">
                    <input type="checkbox" name="in_stock" value="1" <?php echo isset($_GET['in_stock']) && $_GET['in_stock'] === '1' ? 'checked' : ''; ?> class="rounded text-orange-500 focus:ring-orange-500">
                    <span><?php echo __('filter_in_stock'); ?></span>
                </label>
            </div>

            <!-- Color / Variant Filters (Universal) -->
            <div>
                <h4 class="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3"><?php echo __('filter_color'); ?></h4>
                <div class="flex flex-wrap gap-1.5">
                    <?php 
                    $colorsList = ['Black', 'White', 'Silver', 'Gray', 'Blue', 'Red'];
                    foreach ($colorsList as $col): 
                        $isSelected = $color === $col;
                    ?>
                        <label class="cursor-pointer">
                            <input type="radio" name="color" value="<?php echo $col; ?>" <?php echo $isSelected ? 'checked' : ''; ?> class="sr-only">
                            <span class="px-2.5 py-1 text-xs font-semibold rounded-lg border block transition-all <?php echo $isSelected ? 'border-orange-500 text-orange-500 bg-orange-50/50 shadow-sm' : 'border-gray-200 text-gray-600 bg-gray-50 hover:border-orange-500 hover:text-orange-500'; ?>">
                                <?php echo $col; ?>
                            </span>
                        </label>
                    <?php endforeach; ?>
                </div>
            </div>

            <button type="submit" class="w-full py-2.5 bg-gray-900 text-white font-bold text-sm rounded-xl hover:bg-gray-800 transition-colors">
                <?php echo __('filter_apply'); ?>
            </button>
        </form>
    </aside>

    <!-- Product catalog Grid Area -->
    <div class="flex-grow space-y-6">
        <!-- Sort bar -->
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 bg-white p-4 rounded-2xl border border-gray-100 shadow-sm">
            <span class="text-xs font-semibold text-gray-400 uppercase tracking-wider">
                <?php echo __('products_found', ['count' => count($products)]); ?>
            </span>
            <div class="flex items-center gap-2">
                <span class="text-xs font-bold text-gray-400 uppercase tracking-widest"><?php echo __('sort_by'); ?></span>
                <select onchange="location = this.value;" class="p-2 bg-gray-50 border border-gray-200 rounded-lg text-xs font-bold text-gray-700 focus:outline-none">
                    <?php
                    // Build sort options mapping
                    $sorts = [
                        'newest'       => __('sort_newest'),
                        'price_asc'    => __('sort_price_asc'),
                        'price_desc'   => __('sort_price_desc'),
                        'best_selling' => __('sort_best_selling'),
                    ];
                    
                    // Generate full query params excluding sort
                    $sortParams = $_GET;
                    foreach ($sorts as $key => $label) {
                        $sortParams['sort'] = $key;
                        $url = 'index.php?' . http_build_query($sortParams);
                        $selected = $sort === $key ? 'selected' : '';
                        echo "<option value='".sanitize($url)."' {$selected}>" . sanitize($label) . "</option>";
                    }
                    ?>
                </select>
            </div>
        </div>

        <?php if (empty($products)): ?>
            <div class="text-center py-20 bg-white rounded-3xl border border-gray-100 shadow-sm space-y-4">
                <div class="w-16 h-16 bg-gray-50 border border-gray-100 text-gray-400 rounded-2xl flex items-center justify-center mx-auto">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 11h14l1 12H4L5 11z"/></svg>
                </div>
                <h3 class="text-xl font-bold text-gray-900"><?php echo __('no_products'); ?></h3>
                <p class="text-sm text-gray-500 max-w-xs mx-auto"><?php echo __('no_products_desc'); ?></p>
            </div>
        <?php else: ?>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
                <?php foreach ($products as $prod): 
                    $price = floatval($prod['price']);
                    $img = getProductImgUrl($prod['id'], $prod['images']);
                    $isOutOfStock = intval($prod['stock']) === 0;
                ?>
                    <div class="group bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col justify-between relative hover:-translate-y-1">
                        <?php if ($isOutOfStock): ?>
                            <div class="absolute inset-0 bg-white/70 backdrop-blur-[1px] flex items-center justify-center z-10">
                                <span class="px-4 py-2 bg-slate-900/90 text-white text-xs font-black uppercase rounded-lg tracking-widest"><?php echo __('out_of_stock'); ?></span>
                            </div>
                        <?php endif; ?>

                        <!-- Product Link -->
                        <a href="javascript:void(0)" onclick="openProductModal(<?php echo htmlspecialchars(json_encode($prod)); ?>)" class="block relative aspect-w-4 aspect-h-5 bg-gray-100 overflow-hidden h-60">
                            <img src="<?php echo $img; ?>" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" onerror="this.onerror=null; this.src='https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=300';">
                        </a>

                        <div class="p-4 flex-grow flex flex-col justify-between space-y-3">
                            <div>
                                <span class="text-[9px] font-bold text-orange-500 uppercase tracking-widest"><?php echo sanitize($prod['category']); ?></span>
                                <a href="javascript:void(0)" onclick="openProductModal(<?php echo htmlspecialchars(json_encode($prod)); ?>)" class="block mt-1 font-bold text-gray-900 group-hover:text-orange-500 transition-colors text-sm sm:text-base line-clamp-2">
                                    <?php echo sanitize($prod['title']); ?>
                                </a>
                            </div>

                            <div class="flex items-center justify-between">
                                <span class="text-base font-black text-rose-600">$<?php echo number_format($price, 2); ?></span>
                                <span class="text-xs text-gray-400 font-semibold"><?php echo __('stock_label'); ?> <?php echo $prod['stock']; ?></span>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    </div>

</div>

<!-- 5. Product Details Modal Drawer (Populated dynamically) -->
<div id="product-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-sm transition-all duration-300 opacity-0 pointer-events-none">
    <div class="bg-white max-w-2xl w-full rounded-3xl shadow-2xl border border-gray-100 overflow-hidden flex flex-col md:flex-row relative max-h-[90vh]">
        
        <!-- Close Button -->
        <button onclick="closeProductModal()" class="absolute top-4 right-4 z-10 w-8 h-8 rounded-full bg-slate-900/60 hover:bg-slate-900 text-white font-bold flex items-center justify-center transition-colors">
            &times;
        </button>

        <!-- Product Image (Left side) -->
        <div class="md:w-1/2 h-64 md:h-auto bg-gray-100 relative">
            <img id="modal-image" src="" alt="" class="w-full h-full object-cover">
        </div>

        <!-- Product Controls & Data (Right side) -->
        <form action="cart.php?action=add" method="POST" class="md:w-1/2 p-6 sm:p-8 flex flex-col justify-between overflow-y-auto">
            <input type="hidden" name="product_id" id="modal-product-id">

            <div class="space-y-4">
                <div>
                    <span id="modal-category" class="text-[10px] font-bold text-orange-500 uppercase tracking-widest">Category</span>
                    <h2 id="modal-title" class="text-xl sm:text-2xl font-extrabold text-gray-900 mt-1 line-clamp-2">Product Title</h2>
                    <span id="modal-price" class="text-2xl font-black text-rose-600 block mt-2">$0.00</span>
                </div>

                <div class="text-xs text-gray-500 leading-relaxed border-t border-b border-gray-50 py-3">
                    <p id="modal-description" class="line-clamp-4"></p>
                </div>

                <!-- Attributes selections -->
                <div class="space-y-3">
                    <!-- Sizes options (Conditional) -->
                    <div id="modal-sizes-wrapper">
                        <h4 class="text-xs font-bold uppercase tracking-wider text-gray-400 mb-1.5"><?php echo __('modal_size_option'); ?></h4>
                        <div class="flex flex-wrap gap-2" id="modal-sizes-container">
                            <!-- Populated in JS -->
                        </div>
                    </div>
                    
                    <!-- Colors options (Conditional) -->
                    <div id="modal-colors-wrapper">
                        <h4 class="text-xs font-bold uppercase tracking-wider text-gray-400 mb-1.5"><?php echo __('modal_color_variant'); ?></h4>
                        <div class="flex flex-wrap gap-2" id="modal-colors-container">
                            <!-- Populated in JS -->
                        </div>
                    </div>

                    <!-- Quantity adjustments -->
                    <div class="flex items-center gap-3">
                        <span class="text-xs font-bold uppercase tracking-wider text-gray-400"><?php echo __('modal_qty'); ?></span>
                        <div class="flex items-center border border-gray-200 rounded-lg overflow-hidden bg-gray-50">
                            <button type="button" onclick="adjustModalQty(-1)" class="px-2 py-1 text-gray-500 hover:bg-gray-100 font-bold">-</button>
                            <input type="number" name="quantity" id="modal-qty-input" value="1" min="1" max="99" class="w-10 text-center bg-white font-bold text-xs border-x border-gray-100 py-1 focus:outline-none">
                            <button type="button" onclick="adjustModalQty(1)" class="px-2 py-1 text-gray-500 hover:bg-gray-100 font-bold">+</button>
                        </div>
                        <span id="modal-stock-info" class="text-xs text-gray-400 font-medium ml-2"><?php echo __('stock_label'); ?> 0</span>
                    </div>
                </div>
            </div>

            <!-- Modal Action Footer -->
            <div class="pt-6 mt-6 border-t border-gray-50 flex gap-3 items-center">
                <button type="submit" class="flex-grow py-3 bg-gradient-to-r from-orange-500 to-rose-500 text-white font-extrabold text-sm rounded-xl shadow-lg hover:shadow-xl transition-all focus:outline-none">
                    <?php echo __('modal_add_cart'); ?>
                </button>
                <button type="button" onclick="openReportModal()" class="px-3.5 py-3 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-colors border border-gray-200 text-xs font-bold flex items-center gap-1.5" title="Report Prohibited Listing">
                    <svg class="w-4 h-4 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
                </button>
            </div>
        </form>

    </div>
</div>

<!-- Report Product Dialog Modal -->
<div id="report-modal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm transition-all duration-300 opacity-0 pointer-events-none">
    <div class="bg-white max-w-md w-full rounded-3xl shadow-2xl border border-gray-100 p-6 sm:p-8 relative">
        <button onclick="closeReportModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 font-bold text-lg">&times;</button>
        <h3 class="font-extrabold text-gray-900 text-lg mb-1 flex items-center gap-2">
            <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
            Report Prohibited Listing
        </h3>
        <p class="text-xs text-gray-500 mb-5">Flag this item to Admin for safety violations, illegal items, or prohibited content.</p>

        <form action="index.php?action=report_product" method="POST" class="space-y-4">
            <input type="hidden" name="product_id" id="report-product-id">

            <div>
                <label for="report_reason" class="block text-xs font-bold uppercase tracking-wider text-gray-500 mb-1.5">Reason for Report</label>
                <select name="reason" id="report_reason" required class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:bg-white">
                    <option value="Illegal or Prohibited Item">Illegal or Prohibited Item (Weapons, Drugs, etc.)</option>
                    <option value="Counterfeit / Fake Document">Counterfeit / Fake Document or Currency</option>
                    <option value="Prohibited Adult Content">Prohibited Adult Content or Gambling</option>
                    <option value="Fraud / Misleading Listing">Fraud or Misleading Information</option>
                    <option value="Other Safety Violation">Other Safety Violation</option>
                </select>
            </div>

            <div>
                <label for="report_details" class="block text-xs font-bold uppercase tracking-wider text-gray-500 mb-1.5">Additional Details (Optional)</label>
                <textarea name="details" id="report_details" rows="3" placeholder="Provide details to help admin review this product..." class="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl text-sm focus:outline-none focus:bg-white"></textarea>
            </div>

            <button type="submit" class="w-full py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-xl shadow text-sm transition-all">
                Submit Report to Admin
            </button>
        </form>
    </div>
</div>

<script>
    // Slide show parameters
    let slideIdx = 1;
    setInterval(() => {
        setSlide(slideIdx === 1 ? 2 : 1);
    }, 6000);

    function setSlide(num) {
        slideIdx = num;
        const s1 = document.getElementById('carousel-slide-1');
        const s2 = document.getElementById('carousel-slide-2');
        const d1 = document.getElementById('carousel-dot-1');
        const d2 = document.getElementById('carousel-dot-2');

        if (num === 1) {
            s1.className = "absolute inset-0 bg-gradient-to-r from-slate-900/90 to-indigo-900/90 flex items-center px-8 sm:px-16 transition-opacity duration-1000 ease-in-out opacity-100";
            s2.className = "absolute inset-0 bg-gradient-to-r from-orange-600/95 to-amber-700/95 flex items-center px-8 sm:px-16 transition-opacity duration-1000 ease-in-out opacity-0 pointer-events-none";
            d1.className = "w-2.5 h-2.5 rounded-full bg-white transition-all";
            d2.className = "w-2.5 h-2.5 rounded-full bg-white/50 transition-all";
        } else {
            s2.className = "absolute inset-0 bg-gradient-to-r from-orange-600/95 to-amber-700/95 flex items-center px-8 sm:px-16 transition-opacity duration-1000 ease-in-out opacity-100";
            s1.className = "absolute inset-0 bg-gradient-to-r from-slate-900/90 to-indigo-900/90 flex items-center px-8 sm:px-16 transition-opacity duration-1000 ease-in-out opacity-0 pointer-events-none";
            d2.className = "w-2.5 h-2.5 rounded-full bg-white transition-all";
            d1.className = "w-2.5 h-2.5 rounded-full bg-white/50 transition-all";
        }
    }

    // Flash sale countdown mock timer
    let countSeconds = 2 * 3600 + 14 * 60 + 55;
    setInterval(() => {
        if (countSeconds > 0) {
            countSeconds--;
            const hrs = Math.floor(countSeconds / 3600);
            const mns = Math.floor((countSeconds % 3600) / 60);
            const scs = countSeconds % 60;
            document.getElementById('timer-hours').innerText = hrs.toString().padStart(2, '0');
            document.getElementById('timer-mins').innerText = mns.toString().padStart(2, '0');
            document.getElementById('timer-secs').innerText = scs.toString().padStart(2, '0');
        }
    }, 1000);

    // Product Modal controller
    let modalStock = 0;
    
    // Mapping of mock Unsplash items
    const UNSPLASH_IMAGES = {
        1: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=800",
        2: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=800",
        3: "https://images.unsplash.com/photo-1517668808822-9ebe02f2a698?w=800",
        4: "https://images.unsplash.com/photo-1587829741301-dc798b83add3?w=800",
        5: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=800",
        6: "https://images.unsplash.com/photo-1580481072645-022f9a6d8310?w=800",
        7: "https://images.unsplash.com/photo-1536256263959-770b48d82b0a?w=800",
        8: "https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800"
    };

    function openProductModal(prod) {
        const modal = document.getElementById('product-modal');
        
        // Populate inputs
        document.getElementById('modal-product-id').value = prod.id;
        document.getElementById('modal-category').innerText = prod.category;
        document.getElementById('modal-title').innerText = prod.title;
        document.getElementById('modal-price').innerText = '$' + parseFloat(prod.price).toFixed(2);
        document.getElementById('modal-description').innerText = prod.description;
        document.getElementById('modal-stock-info').innerText = '<?php echo addslashes(__('stock_label')); ?> ' + prod.stock;
        
        modalStock = parseInt(prod.stock);
        document.getElementById('modal-qty-input').value = 1;
        document.getElementById('modal-qty-input').max = modalStock;

        // Image fallback check
        let imgUrl = '';
        let parsedImgs = [];
        try {
            parsedImgs = JSON.parse(prod.images) || [];
        } catch (e) {
            parsedImgs = [];
        }

        if (parsedImgs.length > 0 && !parsedImgs[0].includes('/uploads/mock-') && !parsedImgs[0].includes('placeholder-product.jpg')) {
            imgUrl = parsedImgs[0];
        } else {
            imgUrl = UNSPLASH_IMAGES[prod.id] || (parsedImgs.length > 0 ? parsedImgs[0] : 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?w=800');
        }

        // Strip leading slash if present to make path relative
        if (imgUrl && imgUrl.startsWith('/')) {
            imgUrl = imgUrl.substring(1);
        }
        document.getElementById('modal-image').src = imgUrl;

        // Render Sizes Radio select list (if available)
        const sizesWrapper = document.getElementById('modal-sizes-wrapper');
        const sizesDiv = document.getElementById('modal-sizes-container');
        const sizes = prod.sizes ? prod.sizes.split(',').map(s => s.trim()).filter(s => s) : [];
        if (sizes.length > 0) {
            sizesWrapper.classList.remove('hidden');
            sizesDiv.innerHTML = sizes.map((sz, idx) => `
                <label class="cursor-pointer">
                    <input type="radio" name="size" value="${sz}" ${idx === 0 ? 'checked' : ''} class="sr-only">
                    <span class="px-3 py-1.5 text-xs font-bold rounded-lg border block border-gray-200 text-gray-700 bg-gray-50">
                        ${sz}
                    </span>
                </label>
            `).join('');
            setupBadgeRadioSwaps('size');
        } else {
            sizesWrapper.classList.add('hidden');
            sizesDiv.innerHTML = '<input type="hidden" name="size" value="Standard">';
        }

        // Render Colors Radio select list (if available)
        const colorsWrapper = document.getElementById('modal-colors-wrapper');
        const colorsDiv = document.getElementById('modal-colors-container');
        const colors = prod.colors ? prod.colors.split(',').map(c => c.trim()).filter(c => c) : [];
        if (colors.length > 0) {
            colorsWrapper.classList.remove('hidden');
            colorsDiv.innerHTML = colors.map((col, idx) => `
                <label class="cursor-pointer">
                    <input type="radio" name="color" value="${col}" ${idx === 0 ? 'checked' : ''} class="sr-only">
                    <span class="px-3 py-1.5 text-xs font-bold rounded-lg border block border-gray-200 text-gray-700 bg-gray-50">
                        ${col}
                    </span>
                </label>
            `).join('');
            setupBadgeRadioSwaps('color');
        } else {
            colorsWrapper.classList.add('hidden');
            colorsDiv.innerHTML = '<input type="hidden" name="color" value="Standard">';
        }

        // Show Modal
        modal.classList.remove('opacity-0', 'pointer-events-none');
        modal.classList.add('opacity-100');
    }

    function setupBadgeRadioSwaps(name) {
        const radios = document.querySelectorAll(`input[name="${name}"]`);
        radios.forEach((rad, idx) => {
            const span = rad.nextElementSibling;
            if (span && rad.checked) {
                span.className = "px-3 py-1.5 text-xs font-bold rounded-lg border-2 border-orange-500 text-orange-500 bg-orange-50/50 block";
            }
            rad.addEventListener('change', () => {
                document.querySelectorAll(`input[name="${name}"]`).forEach(r => {
                    if (r.nextElementSibling) {
                        r.nextElementSibling.className = "px-3 py-1.5 text-xs font-bold rounded-lg border border-gray-200 text-gray-700 bg-gray-50 block";
                    }
                });
                if (span) {
                    span.className = "px-3 py-1.5 text-xs font-bold rounded-lg border-2 border-orange-500 text-orange-500 bg-orange-50/50 block";
                }
            });
        });
    }

    function closeProductModal() {
        const modal = document.getElementById('product-modal');
        modal.classList.add('opacity-0', 'pointer-events-none');
        modal.classList.remove('opacity-100');
    }

    function adjustModalQty(val) {
        const input = document.getElementById('modal-qty-input');
        let current = parseInt(input.value) + val;
        if (current >= 1 && current <= modalStock) {
            input.value = current;
        }
    }

    function openReportModal() {
        const prodId = document.getElementById('modal-product-id').value;
        document.getElementById('report-product-id').value = prodId;
        
        const reportModal = document.getElementById('report-modal');
        reportModal.classList.remove('opacity-0', 'pointer-events-none');
        reportModal.classList.add('opacity-100');
    }

    function closeReportModal() {
        const reportModal = document.getElementById('report-modal');
        reportModal.classList.add('opacity-0', 'pointer-events-none');
        reportModal.classList.remove('opacity-100');
    }
</script>

<?php
renderFooter();
?>
