@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://placehold.co/1200x320/FBBF24/333333?text=Products" alt="Promotional Banner"
                class="w-full h-full object-cover">
        </div>
    </section>

    <!-- Product Listing Section -->
    <section>
        <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">ALL PRODUCTS</h2>
        <div class="flex flex-col md:flex-row gap-8">
            <!-- Filters Sidebar -->
            <aside class="hidden md:block md:w-1/4 lg:w-1/5 bg-white p-6 rounded-lg shadow-sm h-fit">
                <div id="filter-accordion">
                    <!-- Category Filter -->
                    <div>
                        <h3 class="text-lg font-semibold mb-3 flex justify-between items-center cursor-pointer">
                            <span>Categories</span>
                            <i class="fas fa-chevron-down text-sm"></i>
                        </h3>
                        <div id="category-filters" class="space-y-2 text-gray-700">
                            <div class="flex items-center">
                                <input type="checkbox" id="cat-all" name="category" value=""
                                    class="custom-checkbox h-4 w-4 rounded border-gray-300 text-orange-500 focus:ring-orange-200"
                                    @if(!request('category')) checked @endif>
                                <label for="cat-all" class="ml-2 text-sm text-gray-600">All Categories</label>
                            </div>

                            @foreach($categories as $category)
                                <div class="flex items-center">
                                    <input type="checkbox" id="cat-{{ $category->id }}" name="category"
                                        value="{{ $category->id }}"
                                        class="custom-checkbox category-checkbox h-4 w-4 rounded border-gray-300 text-orange-500 focus:ring-orange-200"
                                        @if(request('category') == $category->slug) checked @endif>
                                    <label for="cat-{{ $category->id }}"
                                        class="ml-2 text-sm text-gray-600">{{ $category->name }}</label>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- Price Filter -->
                    <div class="mt-6">
                        <h3 class="text-lg font-semibold mb-3 flex justify-between items-center cursor-pointer">
                            <span>Price Range</span>
                            <i class="fas fa-chevron-down text-sm"></i>
                        </h3>
                        <div class="space-y-4">
                            <div>
                                <label for="min-price" class="block text-sm font-medium text-gray-700 mb-1">Min
                                    Price</label>
                                <input type="number" id="min-price" min="0" placeholder="0"
                                    class="w-full border border-gray-300 rounded-md p-2 text-sm"
                                    value="{{ request('min_price', '') }}">
                            </div>
                            <div>
                                <label for="max-price" class="block text-sm font-medium text-gray-700 mb-1">Max
                                    Price</label>
                                <input type="number" id="max-price" min="0" placeholder="5000"
                                    class="w-full border border-gray-300 rounded-md p-2 text-sm"
                                    value="{{ request('max_price', '') }}">
                            </div>
                            <button id="apply-price-filter"
                                class="w-full bg-custom-orange text-white py-2 rounded-md hover:bg-custom-orange-dark transition-colors duration-300">
                                Apply Filter
                            </button>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- Products Grid -->
            <div class="w-full md:w-3/4 lg:w-4/5">
                <!-- Sorting Dropdown -->
                <div
                    class="hidden sm:flex flex-col sm:flex-row justify-between items-center mb-6 bg-white p-4 rounded-lg shadow-sm">
                    <p class="text-sm text-gray-600 mb-2 sm:mb-0">Showing <strong id="product-count"
                            class="custom-orange">{{ $products->total() }}</strong> of {{ $products->total() }} products</p>
                    <div class="flex items-center gap-2">
                        <label for="sort-by" class="text-sm font-medium text-gray-700">Sort by:</label>
                        <select id="sort-by"
                            class="border border-gray-300 rounded-md p-2 text-sm focus:ring-orange-300 focus:border-orange-300">
                            <option value="latest" @if(request('sort') === null || request('sort') === 'latest') selected
                            @endif>Latest</option>
                            <option value="price-asc" @if(request('sort') === 'price-asc') selected @endif>Price: Low to High
                            </option>
                            <option value="price-desc" @if(request('sort') === 'price-desc') selected @endif>Price: High to
                                Low</option>
                            <option value="name-asc" @if(request('sort') === 'name-asc') selected @endif>Name: A to Z</option>
                            <option value="name-desc" @if(request('sort') === 'name-desc') selected @endif>Name: Z to A
                            </option>
                        </select>
                    </div>
                </div>

                <div id="product-grid" class="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 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 flex flex-col justify-between">
                            <div>
                                @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 h-6">{{ $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
                                </div>
                            </div>

                            <div class="p-4 pt-0">
                                <button
                                    class="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 py-10">
                            <p>No products found matching your criteria.</p>
                        </div>
                    @endforelse
                </div>

                @if($products->hasPages())
                    <div class="mt-8">
                        {{ $products->appends(request()->query())->links() }}
                    </div>
                @endif
            </div>
        </div>
    </section>

    <!-- Include the Product Options Modal -->
    @include('components.product-options-modal')

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Add to cart functionality - opens modal
            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');
                    openProductModal(productId, productName, false);
                });
            });

            // Buy Now functionality - opens modal
            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');
                    openProductModal(productId, productName, true);
                });
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Accordion for filters
            document.querySelectorAll('#filter-accordion h3').forEach(header => {
                header.addEventListener('click', () => {
                    const content = header.nextElementSibling;
                    const icon = header.querySelector('i');
                    content.classList.toggle('hidden');
                    icon.classList.toggle('fa-chevron-down');
                    icon.classList.toggle('fa-chevron-up');
                });
            });

            // Initially hide filter content except first one
            const filterContents = document.querySelectorAll('#filter-accordion > div > div:nth-child(2)');
            filterContents.forEach((content, index) => {
                if (index !== 0) {
                    content.classList.add('hidden');
                }
            });

            // Category filter handling
            document.querySelectorAll('.category-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    const categoryValue = this.value;
                    if (this.checked) {
                        // Uncheck "All" checkbox when selecting a specific category
                        document.getElementById('cat-all').checked = false;
                    }
                    applyFilters();
                });
            });

            // "All" checkbox handling
            document.getElementById('cat-all').addEventListener('change', function () {
                if (this.checked) {
                    // Uncheck all other categories
                    document.querySelectorAll('.category-checkbox').forEach(checkbox => {
                        checkbox.checked = false;
                    });
                }
                applyFilters();
            });

            // Sort by handling
            document.getElementById('sort-by').addEventListener('change', function () {
                applyFilters();
            });

            // Apply price filter
            document.getElementById('apply-price-filter').addEventListener('click', function () {
                applyFilters();
            });

            // Also trigger filter on Enter key in price inputs
            document.getElementById('min-price').addEventListener('keypress', function (e) {
                if (e.key === 'Enter') {
                    applyFilters();
                }
            });

            document.getElementById('max-price').addEventListener('keypress', function (e) {
                if (e.key === 'Enter') {
                    applyFilters();
                }
            });

            function applyFilters() {
                const selectedCategories = Array.from(document.querySelectorAll('.category-checkbox:checked')).map(cb => cb.value);
                const allChecked = document.getElementById('cat-all').checked;
                const sortBy = document.getElementById('sort-by').value;
                const minPrice = document.getElementById('min-price').value;
                const maxPrice = document.getElementById('max-price').value;

                // Build URL with filters
                let url = new URL(window.location.href);
                url.searchParams.delete('category');
                url.searchParams.delete('sort');
                url.searchParams.delete('min_price');
                url.searchParams.delete('max_price');

                if (!allChecked && selectedCategories.length > 0) {
                    url.searchParams.set('category', selectedCategories[0]); // Using first selected category
                }

                if (sortBy && sortBy !== 'latest') {
                    url.searchParams.set('sort', sortBy);
                }

                if (minPrice) {
                    url.searchParams.set('min_price', minPrice);
                }

                if (maxPrice) {
                    url.searchParams.set('max_price', maxPrice);
                }

                window.location.href = url.toString();
            }
        });
    </script>
@endsection