<?php
// আপনার কনফিগ ফাইলটি যুক্ত করা হলো
require_once __DIR__ . '/config.php';  

// যদি আপনার config.php ফাইলে কানেকশন ভ্যারিয়েবলের নাম $pdo হয়ে থাকে, তবে সেটি $conn এ সেট করুন
if (!isset($conn) && isset($pdo)) {
    $conn = $pdo; 
} else if (!isset($conn) && isset($db)) {
    $conn = $db;
}

try {
    // PDO দিয়ে কুয়েরি রান করা হচ্ছে
    // সূত্র: ((price - discount_price) / price) * 100
    $sql = "SELECT *, 
            ROUND(((price - discount_price) / price) * 100) AS discount_percentage 
            FROM products 
            WHERE discount_price > 0 AND discount_price < price AND status = 'active'
            ORDER BY discount_percentage DESC 
            LIMIT 10";
            
    $stmt = $conn->query($sql);
    $products = $stmt->fetchAll(PDO::FETCH_ASSOC);

} catch (PDOException $e) {
    die("Database Error: " . $e->getMessage());
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hot Deals</title>
    <!-- FontAwesome icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary-color: #0066ff;
            --text-color: #333333;
            --light-gray: #f5f6fa;
            --border-color: #eaeaea;
            --discount-color: #ff3b30;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #ffffff;
            color: var(--text-color);
        }

        .deals-container {
            padding: 15px;
        }
        .deals-header {
            margin-bottom: 15px;
            font-size: 1.2rem;
            font-weight: bold;
            color: #111;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .deals-header i {
            color: var(--discount-color);
        }

        .products-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .product-card {
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 10px;
            position: relative;
            background: #fff;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* প্রোডাক্ট ডিটেল লিংকের জন্য টেক্সট ডেকোরেশন রিমুভ ও কালার ঠিক করা */
        .product-link {
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .product-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 0.7rem;
            padding: 3px 6px;
            border-radius: 4px;
            color: white;
            font-weight: bold;
            z-index: 5;
        }
        .badge-discount { background: var(--discount-color); }

        .wishlist-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #ccc;
            font-size: 1.1rem;
            background: none;
            border: none;
            cursor: pointer;
            z-index: 5;
        }

        .product-img-wrapper {
            text-align: center;
            margin: 10px 0;
        }
        .product-img-wrapper img {
            max-height: 110px;
            max-width: 100%;
            object-fit: contain;
        }

        .product-card h4 {
            margin: 5px 0;
            font-size: 0.85rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .price-row {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 5px 0;
        }
        .current-price { font-weight: bold; color: #000; font-size: 0.9rem; }
        .old-price { text-decoration: line-through; color: #aaa; font-size: 0.75rem; }

        .rating-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.75rem;
            color: #666;
        }
        .rating-row i { color: #ffcc00; }

        .add-to-cart-btn {
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
            background: transparent;
            width: 28px;
            height: 28px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        /* Load More Button */
        .load-more-wrapper {
            text-align: center;
            margin: 30px 0;
        }
        .load-more-btn {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 30px;
            font-size: 0.9rem;
            font-weight: 600;
            border-radius: 25px;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 102, 255, 0.2);
            transition: background 0.3s ease;
        }
        .load-more-btn:disabled {
            background: #cccccc;
            box-shadow: none;
            cursor: not-allowed;
        }
    </style>
</head>
<body>

    <div class="deals-container">
        <div class="deals-header">
            <i class="fa-solid fa-fire-flame-curved"></i> Highest Discount Deals
        </div>

        <div class="products-grid" id="products-list">
            <?php 
            if (!empty($products)) {
                foreach ($products as $row) {
                    $image_path = 'uploads/products/' . $row['image'];
                    if (empty($row['image'])) {
                        $image_path = 'uploads/products/default.png'; 
                    }
                    ?>
                    <div class="product-card">
                        <span class="product-badge badge-discount">-<?php echo $row['discount_percentage']; ?>%</span>
                        <button class="wishlist-btn"><i class="fa-regular fa-heart"></i></button>
                        
                        <!-- ক্লিকের জন্য লিংক যুক্ত করা হলো (আপনার ডিটেল পেজের নাম product_details.php ধরে নেওয়া হয়েছে) -->
                        <a href="product_details.php?id=<?php echo $row['id']; ?>" class="product-link">
                            <div class="product-img-wrapper">
                                <img src="<?php echo $image_path; ?>" alt="<?php echo htmlspecialchars($row['name']); ?>">
                            </div>
                            
                            <h4><?php echo htmlspecialchars($row['name']); ?></h4>
                        </a>
                        
                        <div class="price-row">
                            <span class="current-price">৳<?php echo number_format($row['discount_price'], 2); ?></span>
                            <span class="old-price">৳<?php echo number_format($row['price'], 2); ?></span>
                        </div>
                        
                        <div class="rating-row">
                            <span><i class="fa-solid fa-star"></i> <?php echo number_format($row['rating'], 1); ?></span>
                            <button class="add-to-cart-btn">
                                <i class="fa-solid fa-plus"></i>
                            </button>
                        </div>
                    </div>
                    <?php
                }
            } else {
                echo "<p style='grid-column: span 2; text-align:center;'>No active deals found!</p>";
            }
            ?>
        </div>

        <div class="load-more-wrapper">
            <button class="load-more-btn" id="load-more-btn" data-offset="10">Load More Deals</button>
        </div>
    </div>

    <div class="bottom-spacer"></div>
    <?php include 'bottom-nav.php'; ?>

    <script>
        document.getElementById('load-more-btn').addEventListener('click', function() {
            const btn = this;
            const offset = parseInt(btn.getAttribute('data-offset'));
            btn.disabled = true;
            btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Loading...';

            fetch(`load_more_deals.php?offset=${offset}`)
                .then(response => response.json())
                .then(data => {
                    if (data.html && data.html.trim() !== '') {
                        document.getElementById('products-list').insertAdjacentHTML('beforeend', data.html);
                        btn.setAttribute('data-offset', offset + 10);
                        btn.disabled = false;
                        btn.innerHTML = 'Load More Deals';
                        
                        if (data.count < 10) {
                            btn.innerHTML = 'No More Deals';
                            btn.disabled = true;
                        }
                    } else {
                        btn.innerHTML = 'No More Deals';
                        btn.disabled = true;
                    }
                })
                .catch(err => {
                    console.error(err);
                    btn.disabled = false;
                    btn.innerHTML = 'Load More Deals';
                });
        });
    </script>
</body>
</html>