@include('layouts.header')

@include('layouts.tostMessage')

<!-- Product -->
<div class="bg0 m-t-80 p-b-140" id="p-head">
    <div class="container">
        <div class="flex-w flex-sb-m p-b-52">
            <div class="flex-w flex-l-m filter-tope-group m-tb-10">
                <button class="category-btn stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5 how-active1 btn-md" data-category="all">
                    All
                </button>
                @foreach ($categories as $category)
                    <button class="category-btn stext-106 cl6 hov1 bor3 trans-04 m-r-32 m-tb-5 btn-md" data-category="{{ $category->slug }}">
                        {{ strtoupper(str_replace('-', ' ', $category->slug)) }}
                    </button>
                @endforeach

            </div>
        <style>
        /* Style the dropdown */
.sort-dropdown_sty {
        font-family: 'Arial', sans-serif;
    font-size: 16px;
    font-weight: bold;
    background: linear-gradient(45deg, #f39c1236, #4b4530);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    box-shadow: 0 4px 6px rgb(0 0 0 / 26%);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Style each option */
.sort-dropdown_sty option {
    background: #fff;
    color: #333;
    font-weight: normal;
}

/* Add hover and focus effects */
.sort-dropdown_sty:hover, .sort-dropdown_sty:focus {
    background: linear-gradient(45deg, #f0efec, #f39c12);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
    outline: none;
}

/* Add some padding to the option texts */
.sort-dropdown_sty option {
    padding: 10px;
}

/* Symbols styling */
.symbol {
    margin-right: 8px;
    color: #f39c12;
}

.block2-pic {
position: relative;
overflow: hidden;
}

.block2-pic .img-primary {
    display: block;
    transition: opacity 0.5s ease-in-out;
}

.block2-pic .img-secondary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.block2-pic:hover .img-primary {
    opacity: 0;
}

.block2-pic:hover .img-secondary {
    opacity: 1;
}
.add_to_cart_btn {
        color: #ffffffcf;
    background: linear-gradient(45deg, #f3be12f2, #f1c40f14);
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 14px;
    border: none;
    border-radius: 58px;
    padding: 10px 20px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 6px rgb(14 13 13 / 38%);
    transition: all 0.3s ease;
}
        </style>
            <div class="flex-w flex-l-m m-tb-10">
                <select id="sortDropdown" class="sort-dropdown stext-106 cl6 hov1 bor3 trans-04 m-tb-5 sort-dropdown_sty">
                    <option value="default" {{ $sort == 'default' ? 'selected' : '' }}>
                        SORT ↕↕
                    </option>
                    <option value="price_asc" {{ $sort == 'price_asc' ? 'selected' : '' }}>
                        ⬆️ Low to High
                    </option>
                    <option value="price_desc" {{ $sort == 'price_desc' ? 'selected' : '' }}>
                        ⬇️ High to Low
                    </option>
                    <option value="newest" {{ $sort == 'newest' ? 'selected' : '' }}>
                        🆕 Newness
                    </option>
                </select>
            </div>

            <div class="product-count-container flex-c-m flex-w w-full">
                @if ($searchQuery)
                    @if ($products->isEmpty())
                    @else
                        <p>Total search products: <strong style="color: rgb(255, 102, 0)">{{ $products->total() }}</strong></p>
                    @endif
                @else
                    <p>We found <strong style="color: rgb(255, 102, 0)">{{ $products->total() }}</strong> products for you!</p>
                @endif
            </div>
        </div>

        @if ($searchQuery)
            <h4>Search Results for: <strong>{{ $searchQuery }}</strong></h4>
        @endif

        @if ($products->isEmpty())
            <p>No products found.</p>
        @else
            <div class="row isotope-grid">
                @foreach ($products as $product)
                    <form action="{{ route('cart.add') }}" method="POST">
                        @csrf
                        <a href="{{ route('product.details', $product) }}">
                            <div class="product-item col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item {{ $product->category->slug }}">
                                <div class="block2">
                                    <div class="block2-pic hov-img0">
                                        @php
                                            $images = explode(',', $product->images);
                                        @endphp
                                        <img src="{{ asset('product/' . $images[0]) }}" alt="IMG-PRODUCT" class="img-primary" loading="lazy" />
                                        @if (isset($images[1]))
                                            <img src="{{ asset('product/' . $images[1]) }}" alt="IMG-PRODUCT" class="img-secondary" loading="lazy"/>
                                        @endif

                                        @if ($product->stock == 'instock')
                                            <button type="submit" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1 add_to_cart_btn">
                                                Add to cart
                                            </button>
                                        @elseif ($product->stock == 'outofstock')
                                            <span class="block2-btn flex-c-m stext-103 cl2 size-102 bg-secondary bor2 p-lr-15 trans-04">
                                                Out of Stock
                                            </span>
                                        @elseif ($product->stock == 'comingsoon')
                                            <span class="block2-btn flex-c-m stext-103 cl2 size-102 bg-secondary bor2 p-lr-15 trans-04">
                                                Coming Soon
                                            </span>
                                        @endif
                                    </div>

                                    <div class="block2-txt flex-w flex-t p-t-14">
                                        <div class="block2-txt-child1 flex-col-l">
                                            <b class=" text-dark">{{ $product->color }}</b>
                                            <a href="{{ route('product.details', $product) }}" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                                {{ $product->name }}
                                            </a>
                                            <span class="stext-105 cl3">${{ $product->price }}</span>
                                        </div>
                                        @auth
                                        <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2" data-product-id="{{ $product->id }}" tabindex="0">
                                            <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON" loading="lazy">
                                            <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON" loading="lazy">
                                        </a>
                                        @endauth
                                    </div>
                                </div>
                            </div>
                        </a>
                        <input type="hidden" name="product_id" value="{{ $product->id }}">
                        <input type="hidden" name="size" id="size" value="S">
                        <input type="hidden" name="quantity" id="quantity" value="1">
                    </form>
                @endforeach
            </div>
        @endif

        <div class="flex-c-m flex-w w-full p-t-20">
            {{ $products->links() }}
        </div>
    </div>
</div>

<script>
    document.querySelectorAll('.js-addwish-b2').forEach(button => {
        button.addEventListener('click', function(event) {
            event.preventDefault();
            const productId = this.dataset.productId;

            // Send an AJAX request to add the product to the wishlist
            fetch('{{ route('wishlist.add') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    product_id: productId
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Failed to add product to wishlist');
                }
                return response.json();
            })
            .then(data => {
                // Reload the page after the product is successfully added to the wishlist
                window.location.reload();
            })
            .catch(error => {
                console.error('Error:', error);
                // Reload the page even if there is an error
                window.location.reload();
            });
        });
    });

    document.getElementById('sortDropdown').addEventListener('change', function() {
        const selectedSort = this.value;
        const url = new URL(window.location.href);
        url.searchParams.set('sort', selectedSort);
        window.location.href = url.toString();
    });

    // Preserve sort parameter on pagination links
    document.querySelectorAll('.pagination a').forEach(link => {
        const url = new URL(link.href);
        const selectedSort = document.getElementById('sortDropdown').value;
        url.searchParams.set('sort', selectedSort);
        link.href = url.toString();
    });

    document.querySelectorAll('.category-btn').forEach(button => {
        button.addEventListener('click', () => {
            const selectedCategorySlug = button.dataset.category;
            const products = document.querySelectorAll('.product-item');
            if (selectedCategorySlug === 'all') {
                products.forEach(product => {
                    product.style.display = 'block';
                });
            } else {
                products.forEach(product => {
                    product.style.display = 'none';
                });
                products.forEach(product => {
                    if (product.classList.contains(selectedCategorySlug)) {
                        product.style.display = 'block';
                    }
                });
            }
        });
    });
</script>

@include('layouts.footer')