@extends('layouts.app')

@section('content')
    <!-- Banner Section -->
    {{-- <section class="mb-12">
        <div class="bg-yellow-200 rounded-lg overflow-hidden h-48 md:h-64 lg:h-80 flex items-center justify-center">
            <img src="https://ghorerbazar.com/cdn/shop/files/web-Banner.jpg?v=1756728692" alt="Promotional Banner"
                class="w-full h-full object-cover">
        </div>
    </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">
            @forelse($categories as $category)
                <div class="bg-white p-4 rounded-lg shadow-sm text-center">
                    <a href="{{ route('category.show', $category->slug) }}">
                        @if ($category->image)
                            <img src="{{ asset('storage/' . $category->image) }}" alt="{{ $category->name }}"
                                class="mx-auto h-24 mb-2 object-cover">
                        @else
                            <img src="https://placehold.co/200x150/FEF3C7/8B5CF6?text={{ urlencode($category->name) }}"
                                class="mx-auto h-24 mb-2">
                        @endif
                        <h3 class="font-semibold">{{ $category->name }}</h3>
                    </a>
                </div>
            @empty
                <div class="col-span-4 text-center text-gray-500">
                    <p>No categories available at the moment.</p>
                </div>
            @endforelse
        </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">
            @forelse($products as $product)
                <div
                    class="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden group text-center relative">
                    @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">
                            -{{ $product->discount_percentage }}%
                        </span>
                    @endif

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

                    <div class="p-4">
                        <h3 class="font-semibold text-gray-800 truncate">{{ $product->name }}</h3>

                        @if ($product->compare_price > $product->price)
                            <p class="text-lg font-bold custom-orange">
                                ৳{{ number_format($product->price, 2) }}
                                <span
                                    class="text-sm font-normal text-gray-500 line-through">৳{{ number_format($product->compare_price, 2) }}</span>
                            </p>
                        @else
                            <p class="text-lg font-bold custom-orange">৳{{ number_format($product->price, 2) }}</p>
                        @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="{{ $product->id }}" data-product-name="{{ $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="{{ $product->id }}" data-product-name="{{ $product->name }}">
                            Buy Now
                        </button>
                    </div>
                </div>
            @empty
                <div class="col-span-full text-center text-gray-500">
                    <p>No products available at the moment.</p>
                </div>
            @endforelse
        </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('{{ 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 = "{{ 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>
@endsection
