<?php
// ১. ডাটাবেজ কনফিগ ফাইল ও সেশন যুক্ত করা
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// এখানে পাথ ফিক্স করা হলো (ডট সরিয়ে স্ল্যাশ দেওয়া হয়েছে)
require_once __DIR__ . '/config.php';

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// ২. ডাটাবেজের site_settings টেবিল থেকে লোগো ও টাইটেল তুলে আনা
try {
    $stmt = $pdo->query("SELECT site_title, site_logo FROM site_settings WHERE id = 1");
    $site_settings = $stmt->fetch(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    // ডাটাবেজ এরর হলে একটি ডিফল্ট ভ্যালু সেট করে রাখা
    $site_settings = [
        'site_title' => 'ShopVista',
        'site_logo' => 'default_logo.png'
    ];
}

// লোগোর পাথ সেট করা
$logo_path = "uploads/assets/" . ($site_settings['site_logo'] ?? 'default_logo.png');

// ৩. ডাটাবেজ থেকে ক্যাটাগরিগুলো তুলে আনা (টেবিলের কলাম অনুযায়ী name এবং image ব্যবহার করা হয়েছে)
try {
    $cat_stmt = $pdo->query("SELECT id, name, image FROM categories WHERE status = 1 ORDER BY id DESC LIMIT 10");
    $categories = $cat_stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    $categories = []; // এরর হলে খালি এরে থাকবে
}

$sql = "SELECT * FROM products 
        WHERE status = 'active' 
        AND discount_price > 0 
        ORDER BY RAND() 
        LIMIT 6";

$stmt = $pdo->query($sql);
$discount_products = $stmt->fetchAll(PDO::FETCH_ASSOC);

// ফিচার্ড প্রোডাক্ট ১০টি তুলে আনা
$featured_stmt = $pdo->prepare("SELECT * FROM products WHERE is_featured = 1 ORDER BY id DESC LIMIT 10");
$featured_stmt->execute();
$featured_products = $featured_stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($site_settings['site_title'] ?? 'ShopVista | Home'); ?></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/home.css?v=7.1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
</head>
<body>

   <header class="main-header">
        <div class="nav-top">
            <div class="brand-area">
                <i class="fa-solid fa-bars" id="menuToggle" style="cursor: pointer; font-size: 1.2rem;"></i>
                
                <?php if (!empty($site_settings['site_logo']) && file_exists($logo_path)): ?>
                    <img src="<?php echo $logo_path; ?>" alt="<?php echo htmlspecialchars($site_settings['site_title']); ?>" style="max-height: 50px; max-width: 200px; object-fit: contain; display: inline-block; vertical-align: middle; margin-left: 8px;">
                <?php else: ?>
                    <span style="font-weight: bold; font-size: 1.3rem; margin-left: 8px; vertical-align: middle;"><?php echo htmlspecialchars($site_settings['site_title'] ?? 'ShopVista'); ?></span>
                <?php endif; ?>
                
            </div>
            <div class="welcome">
                Welcome
            </div>
        </div>
        
        <div class="search-category-row">
            <!-- সার্চ বক্স আগের মতোই রইল, শুধু আইডি আর অটো-কমপ্লিট অফ করা হয়েছে -->
            <div class="search-box">
                <i class="fa-solid fa-search"></i>
                <input type="text" id="liveSearchInput" placeholder="Search for products..." autocomplete="off">
            </div>
            
            <button class="category-dropdown-btn">
                <a href="all_categories.php" class="category-dropdown-btn">
                    <i class="fa-solid fa-bars-staggered"></i> All Categories
                </a>
            </button>
        </div>
    </header>
    
    <!-- শুধু আইটেমগুলোর জন্য ক্লিন সাইডবার বক্স -->
<aside class="sidebar-drawer" id="sidebarDrawer">
    <ul class="sidebar-menu">
        <li>
            <a href="about.php"><i class="fa-solid fa-circle-info"></i> About Us</a>
        </li>
        <li>
            <a href="privacy_policy.php"><i class="fa-solid fa-user-shield"></i> Privacy Policy</a>
        </li>
        <li>
            <a href="terms.php"><i class="fa-solid fa-file-contract"></i> Terms & Conditions</a>
        </li>
        <li>
            <a href="contact.php"><i class="fa-solid fa-headset"></i> Contact Us</a>
        </li>
    </ul>
</aside>
<div class="swiper hero-slider">
  <div class="swiper-wrapper">
    <?php foreach ($discount_products as $product): ?>
    <div class="swiper-slide">
        <img src="uploads/products/<?php echo $product['image']; ?>" alt="Product">
        
        <a href="product_details.php?id=<?php echo $product['id']; ?>" class="btn-shop1-now">Shop Now</a>
    </div>
    <?php endforeach; ?>
  </div>
  <div class="swiper-pagination"></div>
</div>
    
<section class="categories-section" style="padding: 15px; display: flex; gap: 15px; overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none;">
        
        <style>
            .categories-section::-webkit-scrollbar { display: none; }
        </style>

        <?php 
        if (!empty($categories)): 
            foreach ($categories as $cat): 
                $cat_img_path = "uploads/categories/" . $cat['image'];
                
                if (empty($cat['image']) || !file_exists($cat_img_path)) {
                    $cat_img_path = "uploads/categories/default_cat.png"; 
                }
        ?>
            <a href="category_products.php?id=<?php echo $cat['id']; ?>" class="category-item" style="display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 80px; text-decoration: none; color: inherit;">
                <div class="category-icon-box" style="width: 65px; height: 65px; background: #f5f6fa; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #eaeaea;">
                    <img src="<?php echo $cat_img_path; ?>" alt="<?php echo htmlspecialchars($cat['name']); ?>" style="width: 100%; height: 100%; object-fit: contain; padding: 4px; display: block;">
                </div>
                <span style="font-size: 0.85rem; font-weight: 600; text-align: center; max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: #007bff; margin-top: 2px;">
                    <?php echo htmlspecialchars($cat['name']); ?>
                </span>
            </a>
        <?php 
            endforeach; 
        endif; 
        ?>
        
        <a href="all_categories.php" class="category-item" style="display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 80px; text-decoration: none; color: inherit;">
            <div class="category-icon-box" style="width: 65px; height: 65px; background: #e0edff; color: var(--primary-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #eaeaea;">
                <i class="fa-solid fa-grid-2" style="font-size: 1.2rem;">📑</i>
            </div>
            <span style="font-size: 0.85rem; font-weight: 600; text-align: center; color: #007bff; margin-top: 2px;">More</span>
        </a>
    </section>
    <section class="features-section">
        <div class="feature-box">
            <i class="fa-solid fa-truck"></i>
            <div class="feature-info">
                <h5>Free Delivery</h5>
                <p>On orders over ৳999</p>
            </div>
        </div>
        <div class="feature-box">
            <i class="fa-solid fa-shield-halved"></i>
            <div class="feature-info">
                <h5>Secure Payment</h5>
                <p>100% secure checkout</p>
            </div>
        </div>
    </section>

    <section class="promo-section">
        <div class="promo-card promo-1">
            <div>
                <span style="color: var(--discount-color); font-weight: bold; font-size: 0.75rem;">Super Sale</span>
                <h4>Up to 50% Off</h4>
                <p>Limited time offer</p>
            </div>
            <a href="#" class="btn-shop2-now" style="background: var(--discount-color); padding: 5px 10px; font-size: 0.75rem; width: fit-content;">Shop Now →</a>
        </div>
        <div class="promo-card promo-2">
            <div>
                <span style="color: var(--primary-color); font-weight: bold; font-size: 0.75rem;">New Arrivals</span>
                <h4>Check Out Our Latest Collection</h4>
            </div>
            <a href="#" class="btn-shop2-now" style="padding: 5px 10px; font-size: 0.75rem; width: fit-content;">Explore Now →</a>
        </div>
    </section>

    <div class="section-header">
        <h3>Featured Products</h3>
        <a href="#" class="view-all">View All →</a>
    </div>

   <section class="products-grid">
    <?php if (count($featured_products) > 0): ?>
        <?php foreach ($featured_products as $product): ?>
            <a href="product_details.php?id=<?php echo $product['id']; ?>" class="product-card-link" style="text-decoration:none; color:inherit;">
                <div class="product-card">
                    <?php if ($product['discount_price'] > 0): ?>
                        <span class="product-badge badge-discount">
                            <?php echo round((($product['price'] - $product['discount_price']) / $product['price']) * 100); ?>% OFF
                        </span>
                    <?php endif; ?>
                    
                    <i class="fa-regular fa-heart wishlist-btn"></i>
                    
                    <div class="product-img-wrapper">
                        <img src="../uploads/products/<?php echo htmlspecialchars($product['image']); ?>" alt="<?php echo htmlspecialchars($product['name']); ?>">
                    </div>
                    
                    <h4><?php echo htmlspecialchars($product['name']); ?></h4>
                    
                    <div class="price-row">
                        <span class="current-price">৳<?php echo number_format($product['discount_price'] ?? $product['price']); ?></span>
                        <?php if ($product['discount_price'] > 0): ?>
                            <span class="old-price">৳<?php echo number_format($product['price']); ?></span>
                        <?php endif; ?>
                    </div>
                    
                    <div class="rating-row">
                        <span><i class="fa-solid fa-star"></i> 4.8 (124)</span>
                        <button class="add-to-cart-btn"><i class="fa-solid fa-cart-plus"></i></button>
                    </div>
                </div>
            </a>
        <?php endforeach; ?>
    <?php else: ?>
        <p>বর্তমানে কোনো ফিচার্ড প্রোডাক্ট নেই।</p>
    <?php endif; ?>
</section>
    <section class="exclusive-banner">
        <div style="width: 60%;">
            <h3 style="margin: 0 0 10px 0; font-size: 1.2rem;">Exclusive Deals Only For You!</h3>
            <p style="margin: 0 0 15px 0; font-size: 0.75rem; color: #ccc;">Shop more, save more. Only on ShopVista.</p>
            <a href="#" class="btn-shop2-now" style="background: white; color: black; font-weight: bold;">Shop Now →</a>
        </div>
        <div style="width: 40%; text-align: right;">
            <i class="fa-solid fa-gift" style="font-size: 3.5rem; color: #ffcc00;"></i>
        </div>
    </section>

    <div class="bottom-spacer"></div>

    <nav class="bottom-nav">
        <a href="#" class="bottom-nav-item active">
            <i class="fa-solid fa-house"></i>
            <span>Home</span>
        </a>
        <a href="all_categories.php" class="bottom-nav-item">
            <i class="fa-solid fa-layer-group"></i>
            <span>Categories</span>
        </a>
        <a href="deals.php" class="bottom-nav-item">
            <i class="fa-solid fa-tags"></i>
            <span>Deals</span>
        </a>
        <a href="wishlist.php" class="bottom-nav-item">
            <i class="fa-regular fa-heart"></i>
            <span>Wishlist</span>
        </a>
        <a href="account.php" class="bottom-nav-item">
            <i class="fa-regular fa-user"></i>
            <span>Account</span>
        </a>
    </nav>
<script>
  const swiper = new Swiper('.hero-slider', {
    loop: true,
    effect: 'fade', // স্লাইড না হয়ে ফেড হবে
    fadeEffect: {
      crossFade: true
    },
    autoplay: {
      delay: 3000, // ঠিক ৩ সেকেন্ড পর পর পরিবর্তন হবে
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  });
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const searchInput = document.getElementById("liveSearchInput");
    const suggestionsBox = document.getElementById("searchSuggestions");

    function positionSearchDropdown() {
        if (suggestionsBox.style.display === "block" && searchInput) {
            const rect = searchInput.getBoundingClientRect();
            // ইনপুটের নিখুঁত পজিশন ও সাইজ ট্র্যাক করা হচ্ছে
            suggestionsBox.style.top = (window.scrollY + rect.bottom) + "px";
            suggestionsBox.style.left = (window.scrollX + rect.left) + "px";
            suggestionsBox.style.width = rect.width + "px";
        }
    }

    searchInput.addEventListener("input", function() {
        let query = this.value.trim();

        if (query.length >= 2) {
            suggestionsBox.style.display = "block";
            positionSearchDropdown(); // ড্রপডাউন পজিশন ফিক্সড করা হলো

            fetch("live_search.php?query=" + encodeURIComponent(query))
                .then(response => response.text())
                .then(data => {
                    suggestionsBox.innerHTML = data;
                })
                .catch(error => console.error("Error fetching data:", error));
        } else {
            suggestionsBox.style.display = "none";
        }
    });

    // স্ক্রিন ছোট-বড় করলে বা স্ক্রোল করলে যেন পজিশন ঠিক থাকে
    window.addEventListener("resize", positionSearchDropdown);
    window.addEventListener("scroll", positionSearchDropdown);

    // ড্রপডাউনের বাইরে ক্লিক করলে সেটি বন্ধ হয়ে যাবে
    document.addEventListener("click", function(e) {
        if (!searchInput.contains(e.target) && !suggestionsBox.contains(e.target)) {
            suggestionsBox.style.display = "none";
        }
    });
});
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
    const menuToggle = document.getElementById("menuToggle") || document.querySelector(".fa-bars");
    const sidebarDrawer = document.getElementById("sidebarDrawer");

    if (menuToggle && sidebarDrawer) {
        menuToggle.style.cursor = "pointer";

        // মেনু আইকনে ক্লিক করলে টগল (খোলা/বন্ধ) হবে
        menuToggle.addEventListener("click", function(e) {
            e.stopPropagation();
            sidebarDrawer.classList.toggle("active");
        });

        // সাইডবারের বাইরে স্ক্রিনের যেকোনো জায়গায় ক্লিক করলে বন্ধ হয়ে যাবে
        document.addEventListener("click", function(e) {
            if (!sidebarDrawer.contains(e.target) && !menuToggle.contains(e.target)) {
                sidebarDrawer.classList.remove("active");
            }
        });
    }
});
</script>

 <!-- সাজেশনের জন্য এই স্বাধীন ড্রপডাউন বক্সটি হেডারের ঠিক নিচে থাকবে, মূল লেআউটে কোনো ডিস্টার্ব করবে না -->
    <div id="searchSuggestions" style="display: none; position: absolute; background: #ffffff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); z-index: 999999; max-height: 300px; overflow-y: auto;"></div>
</body>
</html>