<?php $__env->startSection('content'); ?>
    <!-- Banner Section -->
    

    <!-- Collection Section -->
    <section class="mb-12">
        <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">COLLECTION</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <?php $__empty_1 = true; $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div class="bg-white p-4 rounded-lg shadow-sm text-center">
                    <a href="<?php echo e(route('category.show', $category->slug)); ?>">
                        <?php if($category->image): ?>
                            <img src="<?php echo e(asset('storage/' . $category->image)); ?>" alt="<?php echo e($category->name); ?>"
                                class="mx-auto h-24 mb-2 object-cover">
                        <?php else: ?>
                            <img src="https://placehold.co/200x150/FEF3C7/8B5CF6?text=<?php echo e(urlencode($category->name)); ?>"
                                class="mx-auto h-24 mb-2">
                        <?php endif; ?>
                        <h3 class="font-semibold"><?php echo e($category->name); ?></h3>
                    </a>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="col-span-4 text-center text-gray-500">
                    <p>No categories available at the moment.</p>
                </div>
            <?php endif; ?>
        </div>
    </section>

    <!-- All Products Section -->
    <section>
        <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">ALL PRODUCTS</h2>
        <div id="product-grid" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 md:gap-6">
            <?php $__empty_1 = true; $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <div
                    class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden group text-center relative">
                    <?php if($product->discount_percentage > 0): ?>
                        <span
                            class="absolute top-2 left-2 bg-red-500 text-white text-xs font-semibold px-2 py-1 rounded-full">
                            -<?php echo e($product->discount_percentage); ?>%
                        </span>
                    <?php endif; ?>

                    <a href="<?php echo e(route('products.show', $product->slug)); ?>" class="block">
                        <?php if($product->image): ?>
                            <img src="<?php echo e(asset('storage/' . $product->image)); ?>" alt="<?php echo e($product->name); ?>"
                                class="w-full h-40 md:h-48 object-cover group-hover:scale-105 transition-transform duration-300">
                        <?php else: ?>
                            <img src="https://placehold.co/300x300/FFF7ED/F58220?text=<?php echo e(urlencode($product->name)); ?>"
                                alt="<?php echo e($product->name); ?>"
                                class="w-full h-40 md:h-48 object-cover group-hover:scale-105 transition-transform duration-300">
                        <?php endif; ?>
                    </a>

                    <div class="p-4">
                        <h3 class="font-semibold text-gray-800 truncate"><?php echo e($product->name); ?></h3>

                        <?php if($product->compare_price > $product->price): ?>
                            <p class="text-lg font-bold custom-orange">
                                ৳<?php echo e(number_format($product->price, 2)); ?>

                                <span
                                    class="text-sm font-normal text-gray-500 line-through">৳<?php echo e(number_format($product->compare_price, 2)); ?></span>
                            </p>
                        <?php else: ?>
                            <p class="text-lg font-bold custom-orange">৳<?php echo e(number_format($product->price, 2)); ?></p>
                        <?php endif; ?>

                        <button
                            class="mt-3 w-full bg-custom-orange text-white py-2 rounded-md hover:bg-custom-orange-dark transition-colors duration-300 add-to-cart"
                            data-product-id="<?php echo e($product->id); ?>" data-product-name="<?php echo e($product->name); ?>">
                            Add to Cart
                        </button>
                        <button
                            class="mt-2 w-full bg-gray-900 text-white py-2 rounded-md hover:bg-gray-800 transition-colors duration-300 buy-now-btn"
                            data-product-id="<?php echo e($product->id); ?>" data-product-name="<?php echo e($product->name); ?>">
                            Buy Now
                        </button>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div class="col-span-full text-center text-gray-500">
                    <p>No products available at the moment.</p>
                </div>
            <?php endif; ?>
        </div>

        <!-- Pagination is not shown on homepage as we're displaying limited featured products -->
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            function addToCart(productId, productName, isBuyNow = false) {
                fetch('<?php echo e(route('cart.add')); ?>', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute(
                                'content')
                        },
                        body: JSON.stringify({
                            product_id: productId,
                            quantity: 1
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Update cart count
                            const cartCountEl = document.getElementById('cart-count');
                            if (cartCountEl) cartCountEl.textContent = data.cart_count;

                            if (isBuyNow) {
                                window.location.href = "<?php echo e(route('checkout')); ?>";
                            } else {
                                // Show success message
                                alert(`${productName} added to cart successfully!`);
                            }
                        } else {
                            alert('Error: ' + data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('An error occurred while adding to cart');
                    });
            }

            // Add to cart functionality
            document.querySelectorAll('.add-to-cart').forEach(button => {
                button.addEventListener('click', function() {
                    const productId = this.getAttribute('data-product-id');
                    const productName = this.getAttribute('data-product-name');
                    addToCart(productId, productName, false);
                });
            });

            // Buy Now functionality
            document.querySelectorAll('.buy-now-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const productId = this.getAttribute('data-product-id');
                    const productName = this.getAttribute('data-product-name');
                    addToCart(productId, productName, true);
                });
            });
        });
    </script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\ecomm\resources\views/homepage.blade.php ENDPATH**/ ?>