<?php
// index.php
require_once __DIR__ . '/includes/config.php';
require_once __DIR__ . '/includes/functions.php';

$categories = getCategories($pdo);
$banners = getBanners($pdo);
$featured_products = getFeaturedProducts($pdo, 12);
$new_products = getNewProducts($pdo, 12);
$top_selling = getTopSellingProducts($pdo, 12);

include __DIR__ . '/includes/header.php';
?>

<!-- ============ Banner Area Start ============ -->
<style>

</style>

<!-- ===== MODERN BANNER SLIDER ===== -->
<div class="banner_area">
    <div class="container">
        <div class="row">
            <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="modern-banner-slider slide-effect-zoom">
                    
                    <?php 
                    // Get banners from database
                    $stmt = $pdo->query("SELECT * FROM banners WHERE status = 1 ORDER BY `order` ASC, created_at DESC LIMIT 5");
                    $banners = $stmt->fetchAll();
                    ?>
                    
                    <?php if (!empty($banners)): ?>
                        <?php $slide_index = 0; ?>
                        <?php foreach ($banners as $banner): ?>
                        <div class="banner-slide <?php echo $slide_index === 0 ? 'active' : ''; ?>" data-index="<?php echo $slide_index; ?>">
                            <img src="assets/images/banners/<?php echo $banner['image']; ?>" alt="<?php echo $banner['title'] ?: 'Banner'; ?>">
                            <div class="banner-overlay"></div>
                            
                            <!-- Banner Content -->
<div class="banner-content">
    <?php if ($banner['title']): ?>
    <div class="banner-badge">Featured</div>
    <h2 class="banner-title"><?php echo $banner['title']; ?></h2>
    <?php endif; ?>
    
    <?php if ($banner['description']): ?>
    <p class="banner-desc"><?php echo $banner['description']; ?></p>
    <?php endif; ?>
    
    <?php if ($banner['link']): ?>
    <a href="<?php echo $banner['link']; ?>" class="banner-btn">
        Shop Now <i class="fa-solid fa-arrow-right ms-2"></i>
    </a>
    <?php endif; ?>
</div>
                        </div>
                        <?php $slide_index++; ?>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <!-- Default Fallback Banners -->
                        <div class="banner-slide active" data-index="0">
                            <img src="assets/images/banners/banner-1.jpg" alt="Banner 1">
                            <div class="banner-overlay"></div>
                            <div class="banner-content">
                                <div class="banner-badge">Welcome</div>
                                <h2 class="banner-title">Summer <span>Sale</span> 2024</h2>
                                <p class="banner-desc">Get up to 50% off on all products. Limited time offer!</p>
                                <a href="shop.php" class="banner-btn">Shop Now <i class="fa-solid fa-arrow-right ms-2"></i></a>
                            </div>
                        </div>
                        
                        <div class="banner-slide" data-index="1">
                            <img src="assets/images/banners/banner-2.avif" alt="Banner 2">
                            <div class="banner-overlay"></div>
                            <div class="banner-content">
                                <div class="banner-badge">New Collection</div>
                                <h2 class="banner-title">Trendy <span>Fashion</span></h2>
                                <p class="banner-desc">Discover the latest trends and style your wardrobe</p>
                                <a href="shop.php" class="banner-btn">Explore <i class="fa-solid fa-arrow-right ms-2"></i></a>
                            </div>
                        </div>
                        
                        <div class="banner-slide" data-index="2">
                            <img src="assets/images/banners/banner3.jpg" alt="Banner 3">
                            <div class="banner-overlay"></div>
                            <div class="banner-content">
                                <div class="banner-badge">Exclusive</div>
                                <h2 class="banner-title">Premium <span>Quality</span></h2>
                                <p class="banner-desc">Handpicked products with guaranteed quality</p>
                                <a href="shop.php" class="banner-btn">View Collection <i class="fa-solid fa-arrow-right ms-2"></i></a>
                            </div>
                        </div>
                    <?php endif; ?>
                    
                    <!-- Navigation Arrows -->
                    <button class="banner-arrow prev" onclick="changeSlide(-1)">
                        <i class="fa-solid fa-chevron-left"></i>
                    </button>
                    <button class="banner-arrow next" onclick="changeSlide(1)">
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>
                    
                    <!-- Dots -->
                    <div class="banner-dots" id="bannerDots"></div>
                    
                    <!-- Progress Bar -->
                    <div class="banner-progress" id="bannerProgress"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ===== BANNER SLIDER SCRIPT ===== -->
<script>
// ========================================
// MODERN BANNER SLIDER
// ========================================

document.addEventListener('DOMContentLoaded', function() {
    const slides = document.querySelectorAll('.banner-slide');
    const dotsContainer = document.getElementById('bannerDots');
    const progressBar = document.getElementById('bannerProgress');
    let currentSlide = 0;
    let slideInterval;
    let isTransitioning = false;
    const intervalTime = 5000; // 5 seconds
    
    // Create dots
    slides.forEach((slide, index) => {
        const dot = document.createElement('div');
        dot.className = 'dot' + (index === 0 ? ' active' : '');
        dot.setAttribute('data-index', index);
        dot.addEventListener('click', () => goToSlide(index));
        dotsContainer.appendChild(dot);
    });
    
    // Go to specific slide
    function goToSlide(index) {
        if (isTransitioning || index === currentSlide) return;
        isTransitioning = true;
        
        // Remove active class from all slides
        slides.forEach(slide => slide.classList.remove('active'));
        
        // Add active class to current slide
        slides[index].classList.add('active');
        
        // Update dots
        document.querySelectorAll('.dot').forEach((dot, i) => {
            dot.classList.toggle('active', i === index);
        });
        
        currentSlide = index;
        resetProgress();
        
        setTimeout(() => {
            isTransitioning = false;
        }, 800);
    }
    
    // Change slide by direction
    window.changeSlide = function(direction) {
        const totalSlides = slides.length;
        let newIndex = currentSlide + direction;
        
        if (newIndex < 0) newIndex = totalSlides - 1;
        if (newIndex >= totalSlides) newIndex = 0;
        
        goToSlide(newIndex);
    };
    
    // Reset progress bar
    function resetProgress() {
        progressBar.style.width = '0%';
        clearTimeout(slideInterval);
        startProgress();
    }
    
    // Start progress bar animation
    function startProgress() {
        let progress = 0;
        const step = 100 / (intervalTime / 100);
        
        slideInterval = setInterval(() => {
            progress += step;
            if (progress >= 100) {
                progress = 100;
                clearInterval(slideInterval);
                // Auto advance to next slide
                setTimeout(() => {
                    changeSlide(1);
                }, 300);
            }
            progressBar.style.width = progress + '%';
        }, 100);
    }
    
    // Auto play
    function startAutoPlay() {
        clearInterval(slideInterval);
        startProgress();
    }
    
    // Pause on hover
    const slider = document.querySelector('.modern-banner-slider');
    slider.addEventListener('mouseenter', () => {
        clearInterval(slideInterval);
    });
    
    slider.addEventListener('mouseleave', () => {
        startAutoPlay();
    });
    
    // Keyboard navigation
    document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft') changeSlide(-1);
        if (e.key === 'ArrowRight') changeSlide(1);
    });
    
    // Touch support
    let touchStartX = 0;
    let touchEndX = 0;
    
    slider.addEventListener('touchstart', (e) => {
        touchStartX = e.changedTouches[0].screenX;
    });
    
    slider.addEventListener('touchend', (e) => {
        touchEndX = e.changedTouches[0].screenX;
        const diff = touchStartX - touchEndX;
        if (Math.abs(diff) > 50) {
            if (diff > 0) changeSlide(1);
            else changeSlide(-1);
        }
    });
    
    // Initialize
    startAutoPlay();
    
    // Pause on dot click
    document.querySelectorAll('.dot').forEach(dot => {
        dot.addEventListener('click', () => {
            clearInterval(slideInterval);
            setTimeout(startAutoPlay, 5000);
        });
    });
});

// ========================================
// ADDITIONAL ANIMATION EFFECTS
// ========================================

// Add parallax effect to banner images
document.querySelectorAll('.banner-slide img').forEach(img => {
    img.addEventListener('mousemove', function(e) {
        const rect = this.getBoundingClientRect();
        const x = (e.clientX - rect.left) / rect.width - 0.5;
        const y = (e.clientY - rect.top) / rect.height - 0.5;
        this.style.transform = `scale(1.05) translate(${x * -10}px, ${y * -10}px)`;
    });
    
    img.addEventListener('mouseleave', function() {
        this.style.transform = 'scale(1)';
    });
});

// Add particle effect (optional)
function createParticles() {
    const container = document.querySelector('.modern-banner-slider');
    for (let i = 0; i < 30; i++) {
        const particle = document.createElement('div');
        particle.style.cssText = `
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(255,255,255,0.3);
            border-radius: 50%;
            top: ${Math.random() * 100}%;
            left: ${Math.random() * 100}%;
            animation: floatParticle ${5 + Math.random() * 10}s linear infinite;
            animation-delay: ${Math.random() * 5}s;
            z-index: 0;
            pointer-events: none;
        `;
        container.appendChild(particle);
    }
}

// Add keyframe for particle animation
const style = document.createElement('style');
style.textContent = `
    @keyframes floatParticle {
        0% {
            transform: translateY(0) translateX(0);
            opacity: 0;
        }
        10% {
            opacity: 1;
        }
        90% {
            opacity: 1;
        }
        100% {
            transform: translateY(-200px) translateX(50px);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);

// Uncomment to enable particles
// createParticles();
</script>
<!-- ============ Banner Area End ============ -->

<!-- ============ Category Area Start ============ -->
<section class="category_area section_padding_bottom">
    <div class="container">
        <div class="container">
            <div class="row">
                <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                    <div class="section_title text-center mb-3">
                        <h2>Top Category List</h2>
                        <div>
                            <hr class="title_bottom_underline">
                            <div class="title_bottom_over_underline"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="category_active owl-carousel owl-theme">
                    <?php if (!empty($categories)): ?>
                        <?php foreach ($categories as $category): ?>
                        <div class="category_item">
                            <a href="shop.php?category=<?php echo $category['slug']; ?>" class="category_item_link">
                                <div class="category_image">
                                    <img src="assets/images/categories/<?php echo $category['image'] ?: 'default-category.jpg'; ?>" alt="<?php echo $category['name']; ?>">
                                </div>
                                <div class="category_name">
                                    <p><?php echo $category['name']; ?></p>
                                </div>
                            </a>
                        </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="category_item">
                            <a href="#" class="category_item_link">
                                <div class="category_image">
                                    <img src="assets/images/categories/default-category.jpg" alt="Category">
                                </div>
                                <div class="category_name">
                                    <p>Sample Category</p>
                                </div>
                            </a>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ============ Category Area End ============ -->

<!-- ============ Products Tabs Area Start ============ -->
<section class="products_tabs_area section_padding_bottom mt-2">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                <div class="all_products_container">
                    <div class="products_tabs_list">
                        <ul class="nav nav-tabs" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">All Products</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="new-tab" data-bs-toggle="tab" data-bs-target="#new" type="button" role="tab" aria-controls="new" aria-selected="false">New Products</button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="top-tab" data-bs-toggle="tab" data-bs-target="#top" type="button" role="tab" aria-controls="top" aria-selected="false">Top Selling Products</button>
                            </li>
                        </ul>
                    </div>

                    <div class="products_tabs_content">
                        <div class="tab-content" id="myTabContent">
                            <!-- All Products Tab -->
                            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                                <div class="product_tabs_card">
                                    <div class="row gy-2 gx-2 gy-lg-3 gx-lg-3">
                                        <?php if (!empty($featured_products)): ?>
                                            <?php foreach ($featured_products as $product): ?>
                                            <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4">
                                                <div class="product_card">
                                                    <div class="product_image" style="aspect-ratio:1/1">
                                                        <a href="product.php?slug=<?php echo $product['slug']; ?>">
                                                            <img src="assets/images/products/<?php echo $product['image'] ?: 'default.jpg'; ?>" alt="<?php echo $product['name']; ?>">
                                                        </a>
                                                        <?php if ($product['sale_price']): ?>
                                                        <div class="product_discount">
                                                            <span><?php echo round((1 - $product['sale_price']/$product['price']) * 100); ?>%</span>
                                                        </div>
                                                        <?php endif; ?>
                                                    </div>
                                                    <div class="product_content">
                                                        <div class="product_name">
                                                            <a href="product.php?slug=<?php echo $product['slug']; ?>" class="product_name_link"><?php echo $product['name']; ?></a>
                                                        </div>
                                                        <div class="product_price">
                                                            <span class="product_new_price"><?php echo number_format($product['sale_price'] ?: $product['price']); ?> TK</span>
                                                            <?php if ($product['sale_price']): ?>
                                                            <span class="product_discount_price"><?php echo number_format($product['price']); ?> TK</span>
                                                            <?php endif; ?>
                                                        </div>
                                                        <div class="product_btn">
                                                            <a href="product.php?slug=<?php echo $product['slug']; ?>" class="product_btn_link">Order Now</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <?php endforeach; ?>
                                        <?php else: ?>
                                            <div class="col-12 text-center">
                                                <p>No products found.</p>
                                            </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>

                            <!-- New Products Tab -->
                            <div class="tab-pane fade" id="new" role="tabpanel" aria-labelledby="new-tab">
                                <div class="row gy-2 gx-2 gy-lg-3 gx-lg-3">
                                    <?php if (!empty($new_products)): ?>
                                        <?php foreach ($new_products as $product): ?>
                                        <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4">
                                            <div class="product_card">
                                                <div class="product_image" style="aspect-ratio:1/1">
                                                    <a href="product.php?slug=<?php echo $product['slug']; ?>">
                                                        <img src="assets/images/products/<?php echo $product['image'] ?: 'default.jpg'; ?>" alt="<?php echo $product['name']; ?>">
                                                    </a>
                                                    <?php if ($product['sale_price']): ?>
                                                    <div class="product_discount">
                                                        <span><?php echo round((1 - $product['sale_price']/$product['price']) * 100); ?>%</span>
                                                    </div>
                                                    <?php endif; ?>
                                                </div>
                                                <div class="product_content">
                                                    <div class="product_name">
                                                        <a href="product.php?slug=<?php echo $product['slug']; ?>" class="product_name_link"><?php echo $product['name']; ?></a>
                                                    </div>
                                                    <div class="product_price">
                                                        <span class="product_new_price"><?php echo number_format($product['sale_price'] ?: $product['price']); ?> TK</span>
                                                        <?php if ($product['sale_price']): ?>
                                                        <span class="product_discount_price"><?php echo number_format($product['price']); ?> TK</span>
                                                        <?php endif; ?>
                                                    </div>
                                                    <div class="product_btn">
                                                        <a href="product.php?slug=<?php echo $product['slug']; ?>" class="product_btn_link">Order Now</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <?php endforeach; ?>
                                    <?php else: ?>
                                        <div class="col-12 text-center">
                                            <p>No new products found.</p>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>

                            <!-- Top Selling Products Tab -->
                            <div class="tab-pane fade" id="top" role="tabpanel" aria-labelledby="top-tab">
                                <div class="row gy-2 gx-2 gy-lg-3 gx-lg-3">
                                    <?php if (!empty($top_selling)): ?>
                                        <?php foreach ($top_selling as $product): ?>
                                        <div class="col-xxl-2 col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4">
                                            <div class="product_card">
                                                <div class="product_image" style="aspect-ratio:1/1">
                                                    <a href="product.php?slug=<?php echo $product['slug']; ?>">
                                                        <img src="assets/images/products/<?php echo $product['image'] ?: 'default.jpg'; ?>" alt="<?php echo $product['name']; ?>">
                                                    </a>
                                                    <?php if ($product['sale_price']): ?>
                                                    <div class="product_discount">
                                                        <span><?php echo round((1 - $product['sale_price']/$product['price']) * 100); ?>%</span>
                                                    </div>
                                                    <?php endif; ?>
                                                </div>
                                                <div class="product_content">
                                                    <div class="product_name">
                                                        <a href="product.php?slug=<?php echo $product['slug']; ?>" class="product_name_link"><?php echo $product['name']; ?></a>
                                                    </div>
                                                    <div class="product_price">
                                                        <span class="product_new_price"><?php echo number_format($product['sale_price'] ?: $product['price']); ?> TK</span>
                                                        <?php if ($product['sale_price']): ?>
                                                        <span class="product_discount_price"><?php echo number_format($product['price']); ?> TK</span>
                                                        <?php endif; ?>
                                                    </div>
                                                    <div class="product_btn">
                                                        <a href="product.php?slug=<?php echo $product['slug']; ?>" class="product_btn_link">Order Now</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <?php endforeach; ?>
                                    <?php else: ?>
                                        <div class="col-12 text-center">
                                            <p>No top selling products found.</p>
                                        </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ============ Products Tabs Area End ============ -->

<!-- ============ See More Button ============ -->
<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="text-center section_top_space">
                <a href="shop.php" class="product_see_more_btn">
                    See More <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- ============ Service Area Start ============ -->
<section class="service_area section_padding_bottom d-none d-lg-block">
    <div class="container">
        <div class="row gy-4">
            <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                <div class="service_item">
                    <div class="service_icon">
                        <i class="fa-solid fa-thumbs-up"></i>
                    </div>
                    <div class="service_title">
                        <h4>High-quality Goods</h4>
                    </div>
                    <div class="service_description">
                        <p>Enjoy top quality items for less</p>
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                <div class="service_item">
                    <div class="service_icon">
                        <i class="fa-solid fa-headset"></i>
                    </div>
                    <div class="service_title">
                        <h4>24/7 Live chat</h4>
                    </div>
                    <div class="service_description">
                        <p>Get instant assistance whenever you need it</p>
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                <div class="service_item">
                    <div class="service_icon">
                        <i class="fa-solid fa-truck"></i>
                    </div>
                    <div class="service_title">
                        <h4>Express Shipping</h4>
                    </div>
                    <div class="service_description">
                        <p>Fast & reliable delivery options</p>
                    </div>
                </div>
            </div>
            <div class="col-xxl-3 col-xl-3 col-lg-3 col-md-6">
                <div class="service_item">
                    <div class="service_icon">
                        <i class="fa fa-credit-card"></i>
                    </div>
                    <div class="service_title">
                        <h4>Secure Payment</h4>
                    </div>
                    <div class="service_description">
                        <p>Multiple safe payment methods</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ============ Service Area End ============ -->

<?php include __DIR__ . '/includes/footer.php'; ?>