<?php
    require_once 'config.php';  
    include 'session_check.php';

    // načítanie odporúčaných produktov (iba s dostupným skladom)
    $featured_products = [];
    try {
        $stmt_featured = $pdo->query("SELECT p.id, p.name, p.price, p.product_gallery, p.rating FROM products p WHERE (SELECT COALESCE(SUM(ps.quantity), 0) FROM product_stock ps WHERE ps.product_id = p.id) > 0 AND p.id BETWEEN 1 AND 4 ORDER BY p.id ASC LIMIT 4");
        $featured_products = $stmt_featured->fetchAll(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        error_log("Database error fetching featured products: " . $e->getMessage());
    }

    // načítanie najnovších produktov (iba s dostupným skladom)
    $latest_products = [];
    try {
        $stmt_latest = $pdo->query("SELECT p.id, p.name, p.price, p.product_gallery, p.rating FROM products p WHERE (SELECT COALESCE(SUM(ps.quantity), 0) FROM product_stock ps WHERE ps.product_id = p.id) > 0 AND p.id BETWEEN 5 AND 12 ORDER BY p.id ASC LIMIT 8");
        $latest_products = $stmt_latest->fetchAll(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        error_log("Database error fetching latest products: " . $e->getMessage());
    }

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShoeBox</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">

</head>
<body>
<div class="header">

    <div class="container">
        <div class="navbar">
            <div class="logo">
                <a href="index.php"><img src="obrazky/logo.png" width="125px"></a>
            </div>
            <nav>
                <ul id="MenuItems">
                    <li><a href="index.php">Home</a></li>
                    <li><a href="products.php">Product</a></li>
                    <li><a href="about.php">About</a></li>
                    <li><a href="contact.php">Contact</a></li>
                    <?php if ($is_logged_in): ?>
                        <li><a href="account.php"><?php echo htmlspecialchars($username); ?></a></li>
                        <?php if ($is_admin): ?><li><a href="admin/index.php">Admin</a></li><?php endif; ?>
                        <li><a href="logout.php">Logout</a></li>
                    <?php else: ?>
                        <li><a href="account.php">Login/Register</a></li>
                    <?php endif; ?>
                </ul>
            </nav>
            <a href="cart.php"><img src="obrazky/cart.svg" class="cart-icon" width="30px" height="30px"></a>
            <img src="obrazky/menu.png" class="menu-icon" onclick="menutoggel()">
        </div>
        <div class="row">
            <div class="col-2">
                <h1>Give Your Workout<br> A New Style!</h1>
                <p>Success isn't always about greatness. It's about
                    consistency. Consistent<br> hard work gains success. Greatness 
                    will come.
                </p>
                <a href="products.php" class="btn">Explore Now &#8594;</a>
            </div>
            <div class="col-2">
                <img src="obrazky/image1.png">
            </div>
        </div>
    </div>

<!--odporúčané kategórie-->
<div class="categories">
    <div class="small-container">
        <div class="row">
            <div class="col-3">
                <img src="obrazky/category-1.jpg">
            </div>
            <div class="col-3">
                <img src="obrazky/category-2.jpg">
            </div>
            <div class="col-3">
                <img src="obrazky/category-3.jpg">
            </div>
        </div>
    </div>
    
</div>
<!--odporúčané produkty (Featured Products) -->
<div class="small-container">
    <h2 class="title">Featured Products</h2>
    <div class="row">
        <?php if (!empty($featured_products)): ?>
            <?php foreach ($featured_products as $product): ?>
                <div class="col-4">
                    <a href="product_detail.php?id=<?= htmlspecialchars($product['id']) ?>">
                        <img src="<?= image_url_src(product_main_image($product['product_gallery'] ?? null)) ?>" alt="<?= htmlspecialchars($product['name']) ?>">
                    </a>
                    <a href="product_detail.php?id=<?= htmlspecialchars($product['id']) ?>">
                         <h4><?= htmlspecialchars($product['name']) ?></h4>
                    </a>
                    <div class="rating">
                        <?php for ($i = 1; $i <= 5; $i++): ?>
                            <span class="fa fa-star<?= ($i <= $product['rating']) ? ' checked' : '' ?>"></span>
                        <?php endfor; ?>
                    </div>
                    <p>€<?= htmlspecialchars(number_format($product['price'], 2)) ?></p>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <p>No featured products found.</p>
        <?php endif; ?>
    </div>

    <!-- Najnovsie produkty (Latest Products) -->
    <h2 class="title">Latest Products</h2>
    <div class="row">
         <?php if (!empty($latest_products)): ?>
            <?php foreach ($latest_products as $product): ?>
                <div class="col-4">
                     <a href="product_detail.php?id=<?= htmlspecialchars($product['id']) ?>">
                        <img src="<?= image_url_src(product_main_image($product['product_gallery'] ?? null)) ?>" alt="<?= htmlspecialchars($product['name']) ?>">
                    </a>
                    <a href="product_detail.php?id=<?= htmlspecialchars($product['id']) ?>">
                         <h4><?= htmlspecialchars($product['name']) ?></h4>
                    </a>
                    <div class="rating">
                        <?php for ($i = 1; $i <= 5; $i++): ?>
                            <span class="fa fa-star<?= ($i <= $product['rating']) ? ' checked' : '' ?>"></span>
                        <?php endfor; ?>
                    </div>
                    <p>€<?= htmlspecialchars(number_format($product['price'], 2)) ?></p>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <p>No latest products found.</p>
        <?php endif; ?>
    </div>

</div>

    <div class="offer">
        <div class="small-container">
            <div class="row">
                <div class="col-2">
                <img src="obrazky/exclusive.png" class="offer-img">
                </div>
                <div class="col-2">
                    <p>Exclusively Avalible on ShoeBox</p>
                    <h1>Jordan 1 Retro OG x Travis Scott High Mocha</h1>
                    <small>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores, laboriosam, veritatis accusantium qui minima fugit tenetur, atque tempora velit at provident esse sunt! Veritatis aliquam ipsam consequatur iste cum suscipit?</small>
                    <a href="" class="btn">Buy Now &#8594;</a>
                </div>
            </div>
        </div>
    </div>
    
    <div class="testimonial">
        <div class="small-container">
            <div class="row">
                <div class="col-3">
                    <p>&#10078;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, nihil cumque omnis facere molestiae exercitationem ea eius sunt aperiam assumenda, veniam vero, officiis voluptatibus velit aut perferendis voluptatum amet deleniti.&#10078;</p>
                    <div class="rating">
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star checked"></span>
                    </div>
                    <img src="obrazky/user-1.png">
                    <h3>Sean Parker</h3>
                </div>
                <div class="col-3">
                    <p>&#10078;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, nihil cumque omnis facere molestiae exercitationem ea eius sunt aperiam assumenda, veniam vero, officiis voluptatibus velit aut perferendis voluptatum amet deleniti.&#10078;</p>
                    <div class="rating">
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star-half-o checked"></span>
                    </div>
                    <img src="obrazky/user-2.png">
                    <h3>Mike Smith</h3>
                </div>
                <div class="col-3">
                    <p>&#10078;Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, nihil cumque omnis facere molestiae exercitationem ea eius sunt aperiam assumenda, veniam vero, officiis voluptatibus velit aut perferendis voluptatum amet deleniti.&#10078;</p>
                    <div class="rating">
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star checked"></span>
                        <span class="fa fa-star checked"></span>
                    </div>
                    <img src="obrazky/user-3.png">
                    <h3>Mabel Joe</h3>
                </div>
                
            </div>
        </div>
    </div>

<div class="brands">
    <div class="small-container">
        <div class="row">
            <div class="col-5">
                <img src="obrazky/logo-godrej.png">
            </div>
            <div class="col-5">
                <img src="obrazky/logo-oppo.png">
            </div>
            <div class="col-5">
                <img src="obrazky/logo-coca-cola.png">
            </div>
            <div class="col-5">
                <img src="obrazky/logo-paypal.png">
            </div>
            <div class="col-5">
                <img src="obrazky/logo-philips.png">
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="container">
        <div class="row">
            <div class="footer-col-1">
                <h3>Download Our App</h3>
                <p>Download App for Android and IOS Mobile phone.</p>
                <br>
                <div class="app-logo">
                    <img src="obrazky/play-store.png">
                    <img src="obrazky/app-store.png">
                </div>
            </div>
            <div class="footer-col-2">
                <img src="obrazky/logo-white.png">
                <p>Our Purpose Is To Sustainably Make the Pleasure and Benefits of Sports Accessible to the Many</p>
            </div>
            <div class="footer-col-3">
                <h3>Useful Links</h3>
                <ul>
                    <li>Cupons</li>
                    <li>Blog Post</li>
                    <li>Return Policy</li>
                    <li>Join Affliate</li>
                </ul>
            </div>
            <div class="footer-col-4">
                <h3>Follow us</h3>
                <ul>
                    <li>Facebook</li>
                    <li>Twitter</li>
                    <li>Instagram</li>
                    <li>YouTube</li>
                </ul>
            </div>
        </div>
        <hr>
            <p class="copyright">Copyright 2025 Alex Melicher</p>
    </div>
</div>
    <script>
        var MenuItems = document.getElementById("MenuItems");
        MenuItems.style.maxHeight = "0px";
        function menutoggel()
        {
            if(MenuItems.style.maxHeight == "0px")
            {
                MenuItems.style.maxHeight = "200px"
            }
            else
            {
                MenuItems.style.maxHeight = "0px"
            }
        }
    </script>
</body>
</html>

