<?php
require_once 'includes/header.php';

$category_id = isset($_GET['id']) ? intval($_GET['id']) : null;
$category_info = null;
$products = [];
$all_categories =[];

try {
    if ($category_id) {
        $stmt = $pdo->prepare("SELECT * FROM categories WHERE id = ? AND status = 1");
        $stmt->execute([$category_id]);
        $category_info = $stmt->fetch(PDO::FETCH_ASSOC);

        if ($category_info) {
            $stmt = $pdo->prepare("SELECT * FROM products WHERE category_id = ? AND status = 1 ORDER BY id DESC");
            $stmt->execute([$category_id]);
            $products = $stmt->fetchAll(PDO::FETCH_ASSOC);
        }
    } else {
        $stmt = $pdo->query("SELECT * FROM categories WHERE status = 1");
        $all_categories = $stmt->fetchAll(PDO::FETCH_ASSOC);
    }
} catch (PDOException $e) {
    echo "Error: " . $e->getMessage();
}
?>

<!-- Breadcrumb -->
<div class="bg-gray-100 py-3 border-b border-gray-200">
    <div class="container mx-auto px-4">
        <ul class="flex items-center text-sm font-bangla text-gray-600">
            <li><a href="index.php" class="hover:text-primary"><i class="fa-solid fa-house mr-1"></i> হোম</a></li>
            <li><span class="mx-2 text-gray-400">/</span></li>
            <?php if ($category_info): ?>
                <li><a href="category.php" class="hover:text-primary">ক্যাটাগরি</a></li>
                <li><span class="mx-2 text-gray-400">/</span></li>
                <li class="text-primary font-bold"><?= htmlspecialchars($category_info['name']) ?></li>
            <?php else: ?>
                <li class="text-primary font-bold">সব ক্যাটাগরি</li>
            <?php endif; ?>
        </ul>
    </div>
</div>

<!-- Main Content -->
<section class="py-12 bg-gray-50 min-h-[60vh] pb-20 md:pb-12">
    <div class="container mx-auto px-4">

        <?php if ($category_id && $category_info): ?>
            <!-- SCENARIO 1: নির্দিষ্ট ক্যাটাগরির প্রোডাক্ট দেখানো -->
            
            <div class="text-center mb-10">
                <h1 class="text-3xl font-bold text-gray-800 font-bangla mb-2"><?= htmlspecialchars($category_info['name']) ?></h1>
                <p class="text-gray-500 font-bangla">এই ক্যাটাগরিতে মোট <?= count($products) ?> টি প্রোডাক্ট পাওয়া গেছে</p>
            </div>

            <?php if (count($products) > 0): ?>
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
                    <?php foreach ($products as $prod): ?>
                        <div class="bg-white rounded-lg shadow-sm border border-gray-100 hover:shadow-lg transition group overflow-hidden flex flex-col">
                            <div class="relative bg-gray-100 h-40 md:h-56 flex items-center justify-center overflow-hidden">
                                <?php if (!empty($prod['image'])): ?>
                                    <img src="uploads/products/<?= $prod['image'] ?>" alt="<?= htmlspecialchars($prod['name']) ?>" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                                <?php else: ?>
                                    <span class="text-gray-400"><i class="fa-solid fa-image text-4xl"></i></span>
                                <?php endif; ?>
                                
                                <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
                                    <a href="product-details.php?id=<?= $prod['id'] ?>" class="bg-white text-gray-800 px-4 py-2 rounded-full text-sm font-bold hover:bg-secondary hover:text-white transition font-bangla">বিস্তারিত দেখুন</a>
                                </div>
                            </div>
                            <div class="p-3 md:p-4 flex flex-col flex-grow">
                                <h3 class="font-bold text-gray-800 text-sm md:text-lg mb-2 line-clamp-2 font-bangla group-hover:text-primary transition">
                                    <?= htmlspecialchars($prod['name']) ?>
                                </h3>
                                <div class="mt-auto flex items-center justify-between">
                                    <span class="text-primary font-bold text-base md:text-lg en-font">৳ <?= number_format($prod['base_price'], 2) ?></span>
                                    <a href="product-details.php?id=<?= $prod['id'] ?>" class="w-8 h-8 md:w-9 md:h-9 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 hover:bg-secondary hover:text-white transition shadow-sm">
                                        <i class="fa-solid fa-cart-plus text-xs md:text-sm"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            <?php else: ?>
                <!-- No Products Found -->
                <div class="text-center py-16 bg-white rounded-lg shadow-sm border border-gray-100">
                    <div class="text-gray-300 mb-4"><i class="fa-solid fa-box-open text-6xl"></i></div>
                    <h2 class="text-xl font-bold text-gray-600 font-bangla">দুঃখিত! এই মুহূর্তে কোনো প্রোডাক্ট নেই।</h2>
                    <p class="text-gray-400 mt-2 font-bangla">খুব শিগগিরই এখানে নতুন প্রোডাক্ট যোগ করা হবে।</p>
                    <a href="category.php" class="inline-block mt-6 px-6 py-2 bg-primary text-white rounded-full hover:bg-blue-700 transition font-bangla">সব ক্যাটাগরি দেখুন</a>
                </div>
            <?php endif; ?>

        <?php elseif ($category_id && !$category_info): ?>
            <!-- Invalid Category ID -->
            <div class="text-center py-20">
                <h2 class="text-2xl font-bold text-red-500 font-bangla">ভুল ক্যাটাগরি!</h2>
                <p class="text-gray-500 mt-2">আপনি যে ক্যাটাগরি খুঁজছেন তা পাওয়া যায়নি।</p>
                <a href="category.php" class="inline-block mt-4 text-primary hover:underline font-bangla">সব ক্যাটাগরি দেখুন</a>
            </div>

        <?php else: ?>
            <!-- SCENARIO 2: সব ক্যাটাগরি দেখানো -->
            
            <div class="text-center mb-10">
                <h1 class="text-2xl md:text-3xl font-bold text-gray-800 font-bangla mb-2">আমাদের <span class="text-primary">ক্যাটাগরি সমূহ</span></h1>
                <p class="text-sm md:text-base text-gray-500 font-bangla max-w-2xl mx-auto">আপনার প্রয়োজনীয় প্রিন্টিং সার্ভিসটি বেছে নিন নিচের তালিকা থেকে</p>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 md:gap-6">
                <?php if (empty($all_categories)): ?>
                    <!-- Demo Categories (Database Empty) -->
                    <?php 
                    $demo_cats =['আইডি কার্ড', 'ব্যানার', 'ক্যাশ মেমো', 'প্যাড', 'স্টিকার', 'খাম'];
                    foreach($demo_cats as $cat) {
                        echo '
                        <a href="#" class="bg-white p-4 md:p-6 rounded-xl shadow-sm hover:shadow-lg transition text-center group border border-gray-100 hover:border-primary transform hover:-translate-y-1">
                            <div class="w-16 h-16 md:w-20 md:h-20 mx-auto bg-blue-50 rounded-full flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition duration-300 mb-3 md:mb-4 shadow-inner overflow-hidden">
                                <i class="fa-solid fa-image text-2xl md:text-3xl opacity-50"></i>
                            </div>
                            <h3 class="font-bold text-sm md:text-lg text-gray-700 font-bangla group-hover:text-primary">'.$cat.'</h3>
                        </a>';
                    }
                    ?>
                <?php else: ?>
                    <!-- Database Categories (WITH IMAGE SUPPORT) -->
                    <?php foreach ($all_categories as $cat): ?>
                        <a href="category.php?id=<?= $cat['id'] ?>" class="bg-white p-4 md:p-6 rounded-xl shadow-sm hover:shadow-lg transition text-center group border border-gray-100 hover:border-primary transform hover:-translate-y-1 flex flex-col items-center justify-center">
                            
                            <!-- Category Image Circle -->
                            <div class="w-16 h-16 md:w-20 md:h-20 mx-auto rounded-full flex items-center justify-center bg-blue-50 text-primary group-hover:bg-primary group-hover:text-white transition duration-300 mb-3 md:mb-4 shadow-inner overflow-hidden border-2 border-transparent group-hover:border-blue-100">
                                <?php if(!empty($cat['image'])): ?>
                                    <!-- যদি ছবি থাকে -->
                                    <img src="uploads/categories/<?= $cat['image'] ?>" alt="<?= htmlspecialchars($cat['name']) ?>" class="w-full h-full object-cover">
                                <?php else: ?>
                                    <!-- যদি ছবি না থাকে, তাহলে ডিফল্ট আইকন -->
                                    <i class="fa-solid fa-layer-group text-2xl md:text-3xl"></i>
                                <?php endif; ?>
                            </div>
                            
                            <h3 class="font-bold text-sm md:text-lg text-gray-700 font-bangla group-hover:text-primary"><?= htmlspecialchars($cat['name']) ?></h3>
                        </a>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>

        <?php endif; ?>

    </div>
</section>

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