@extends('front.layout.app')
@section('title', 'Single Product')
@section('content')

<style>
.loader-wrapper {
    display: none;
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.loader {
    background-color: transparent;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-block;
    border-top: 2px solid #000;
    border-right: 2px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.loader-wrapper2 {
    display: none;
    position: absolute;
    top: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.loader2 {
    background-color: transparent;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-block;
    border-top: 2px solid #000;
    border-right: 2px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


.loader-wrapper3 {
    display: none;
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.loader3 {
    background-color: transparent;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-block;
    border-top: 2px solid #000;
    border-right: 2px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


.loader-wrapper4 {
    display: none;
    position: absolute;
    top: 87%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.loader4 {
    background-color: transparent;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-block;
    border-top: 2px solid #000;
    border-right: 2px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


</style>
<section class="pagetitle">
    
    <div class="container">
        <div class="pagetitle__content">
            <!-- <h2>Shop</h2> -->

            <h2><i class="fal fa-long-arrow-left fa-xs" ></i>{{ 'Shop' ?? '' }}</h2>
                <ul class="beef-list">
                    <img src="https://testv57.demowebsitelinks.com/MotorCityV3/wp-content/uploads/2021/08/cat-flower.svg" title="cat-flower" class="wd-nav-img" width="40" height="40">
                    @forelse($categories as $category)
                    <li>                         
                    <a href="{{ route('front.shop', ['category_id' => $category->id]) }}">
                            <span>{{ $category->name ?: '' }}</span>
                                {{ $category->products_count }} Products
                            </a>
                        </li>
                    @empty
                        <h3>Shop</h3>
                    @endforelse
                    <!-- @foreach ($categories as $category)
                        <div class="category-item">
                            <a href="javascript:void(0);" class="category-link" data-category-id="{{ $category->id }}">
                                <span>{{ $category->name }}</span>
                                <small>{{ $category->products_count }} Products</small>
                            </a>
                        </div>
                    @endforeach -->
                </ul>
        </div>

    </div>
</section>

<section class="shop-page">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <div class="shop-filter">
                  
                    <div class="rabge-set">
                        <h5>Filtered By Price</h5>
                    </div>
                    
                    <!-- <div class="price-input">
                        <div class="field">
                        <span>Min</span>
                        <input type="number" class="input-min" value="2500">
                        </div>
                        <div class="separator">-</div>
                            <div class="field">
                            <span>Max</span>
                            <input type="number" class="input-max" value="7500">
                            </div>
                        </div>
                        <div class="slider">
                            <div class="progress"></div>
                        </div>
                        <div class="range-input">
                            <input type="range" class="range-min" min="0" max="10000" value="2500" step="100">
                            <input type="range" class="range-max" min="0" max="10000" value="7500" step="100">
                        </div>
                    </div> -->
                    
                      
                        <form id="price-filter-form" method="GET" action="{{ route('front.pricefilter') }}" class="mb-4">
                            <div class="wrapper">
                                <fieldset class="filter-price">
                                    <div class="price-field">
                                        <input type="range" min="0" max="10000" name="min_price" value="{{ request('min_price', 0) }}" id="lower">
                                        <input type="range" min="0" max="10000" name="max_price" value="{{ request('max_price', 10000) }}" id="upper">
                                    </div>
                                    <div class="price-wrap">
                                        <div class="price-wrap-1">
                                            <input id="one" value="{{ request('min_price', 0) }}" readonly>
                                            <label for="one">$</label>
                                        </div>
                                        <div class="price-wrap_line">-</div>
                                        <div class="price-wrap-2">
                                            <input id="two" value="{{ request('max_price', 10000) }}" readonly>
                                            <label for="two">$</label>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="align-self-end">
                                <button type="submit" class="btn mt-2" style="background-color:black; color:whitesmoke">Filter</button>
                            </div>
                        </form>
                        {{-- <form id="price-filter-form" class="mb-4">
                            <div class="wrapper">
                                <fieldset class="filter-price">
                                    <div class="price-field">
                                        <input type="range" min="0" max="10000" name="min_price" value="{{ request('min_price', 0) }}" id="lower">
                                        <input type="range" min="0" max="10000" name="max_price" value="{{ request('max_price', 10000) }}" id="upper">
                                    </div>
                                    <div class="price-wrap">
                                        <div class="price-wrap-1">
                                            <input id="one" value="{{ request('min_price', 0) }}" readonly>
                                            <label for="one">$</label>
                                        </div>
                                        <div class="price-wrap_line">-</div>
                                        <div class="price-wrap-2">
                                            <input id="two" value="{{ request('max_price', 10000) }}" readonly>
                                            <label for="two">$</label>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="align-self-end">
                                <button type="button" id="filter-btn" class="btn mt-2" style="background-color:black; color:whitesmoke">
                                    Filter
                                </button>
                            </div>
                        </form> --}}
                                     
                      
                </div>

                <div class="top-rated">
                    <div class="rated-head">
                        <h5>Top Rated Products</h5>
                    </div>
                    @foreach($topRatedProducts as $product)
                        <div class="product-cntnt">
                            <img src="{{ $product->productImage('product_image') ?: asset('upload/images/default.png') }}" class="img-fluid" alt="{{ $product->product_name }}">
                            <div class="prod-info">
                                <h6>{{ $product->name ?? 'Anoynmus' }}</h6>
                                <p>${{ number_format($product->price, 2) }}</p>

                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
            <div class="col-md-9">
                <div class="searchbtn">
                    <form class="search-form" action="{{ route('front.shop') }}" method="GET">
                        <input type="text" name="search" placeholder="Search products" value="{{ request('search') }}">
                        <button type="submit"><i class="far fa-search"></i></button>
                    </form>

                </div>
                <div class="filter">
                    <div>
                        <ul>
                            <li>
                                <a href="#"><i class="fas fa-th-large"></i></a>
                            </li>
                            <li><a href="#"><i class="fal fa-list"></i></a></li>
                        </ul>
                        <span>Showing 1-9 Results</span>
                    </div>
                    <div class="rightselect">
                        <li>
                            @if($products->count() > 0)
                                <label>Show Pages:</label>
                                @php
                                    $totalPages = $products->lastPage();
                                    $currentPage = $products->currentPage();
                                @endphp
                                <a href="?per_page=9" class="per-page-variation {{ request('per_page') == 9 ? 'current-variation' : '' }}">
                                    <span>9/</span>
                                </a>
                                <a href="?per_page=12" class="per-page-variation {{ request('per_page') == 12 ? 'current-variation' : '' }}">
                                    <span>12/</span>
                                </a>
                                <a href="?per_page=18" class="per-page-variation {{ request('per_page') == 18 ? 'current-variation' : '' }}">
                                    <span>18/</span>
                                </a>
                                <a href="?per_page=24" class="per-page-variation {{ request('per_page') == 24 ? 'current-variation' : '' }}">
                                    <span>24</span>
                                </a>
                            @endif
                        </li>

                        <p> Sort by</p>
                        {{-- <form id="filter-form">
                            <select name="sort" id="sort" >
                                <option value="menu_order" {{ request('sort') == 'menu_order' ? 'selected' : '' }}>Default sorting</option>
                                <option value="date" {{ request('sort') == 'date' ? 'selected' : '' }}>Sort by latest</option>
                                <option value="price" {{ request('sort') == 'price' ? 'selected' : '' }}>Sort by price: low to high</option>
                                <option value="price-desc" {{ request('sort') == 'price-desc' ? 'selected' : '' }}>Sort by price: high to low</option>
                            </select>
                        </form> --}}
                        <form id="filter-form">
                            <select name="sort" id="sort" onchange="this.form.submit()">
                                <option value="menu_order" {{ request('sort') == 'menu_order' ? 'selected' : '' }}>Default sorting</option>
                                <option value="date" {{ request('sort') == 'date' ? 'selected' : '' }}>Sort by latest</option>
                                <option value="price" {{ request('sort') == 'price' ? 'selected' : '' }}>Sort by price: low to high</option>
                                <option value="price-desc" {{ request('sort') == 'price-desc' ? 'selected' : '' }}>Sort by price: high to low</option>
                            </select>
                        </form>
                        
                        <a href=""><i class="far fa-bars"></i></a>
                    </div>
                </div>

                <div id="product-loader" style="display: none; text-align: center;">
                    <span class="loader"></span>
                </div>
                
                <div id="product-list">
                    @include('front.partials.product-list', ['products' => $products])
                </div>
                
                 {{-- <div id="product-list">
                    <div class="row">
                        @forelse ($products as $product)
                            <div class="col-lg-4">
                                <div class="product__card" data-aos="zoom-in">
                                    <figure class="product__card_img">
                                        <a href="{{ route('front.single-product-detail', ['product_slug' => $product->slug]) }}" class="d-block">
                                            <img src="{{ $product->getFirstMediaUrl('product_image', 'thumb') ?: asset('upload/No-Image.png') }}"
                                                 alt="{{ $product->name }}"
                                                 class="img-fluid">
                                        </a>
                                    </figure>
                                    <div class="product__card_content">
                                        <h3><a href="{{ route('front.single-product-detail', ['product_slug' => $product->slug]) }}">{{ $product->name }}</a></h3>
                                        <ul class="d-flex align-items-center gap-05">
                                            @if ($product->category)
                                                <li><a href="{{ route('front.shop', ['category_id' => $product->category->id]) }}">{{ $product->category->name }}</a></li>
                                            @else
                                                <li><a href="#">Uncategorized</a></li>
                                            @endif
                                        </ul>
                                        <h5>&dollar;{{ number_format($product->price, 2) }}</h5>
                                    </div>
                                    <ul class="product__card_btn">
                                        <div class="loader-wrapper" id="loader-add-to-cart-{{ $product->id }}">
                                            <span class="loader"></span>
                                        </div>
                                        
                                        <li><a href="javascript:void(0);" class="add-to-cart" data-product-id="{{ $product->id }}"><i class="fa-regular fa-cart-shopping"></i></a></li>

                                        
                                        <div class="loader-wrapper2" id="loader2">
                                            <span class="loader2"></span>
                                        </div>
                                        <li>
                                            <a href="javascript:void(0);" class="redirect-to-shop">
                                                <i class="far fa-search"></i>
                                            </a>
                                        </li>
                                        <div class="loader-wrapper3" id="loader3">
                                            <span class="loader3"></span>
                                        </div>
                                        <li>
                                            <a href="javascript:void(0);" class="trigger-compare">
                                                <i class="fa-solid fa-code-compare"></i>
                                            </a>
                                        </li>
                                        <div class="loader-wrapper4" id="loader4">
                                            <span class="loader4"></span>
                                        </div>
                                        <li>
                                        <a href="javascript:void(0)" class="add-to-wishlist" data-product-id="{{ $product->id }}">
                                            <i class="fa-regular fa-heart"></i>
                                        </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        @empty
                            <div class="col-12">
                                <div class="product__card" data-aos="zoom-in">
                                    <p>No products found</p>
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>  --}}


                <!-- @if($products->count() > 0)
                    <div class="pagination p3">
                        <ul>
                            @if ($products->lastPage() > 1)
                                @foreach ($products->links()->elements as $element)
                                    @if (is_string($element))
                                        <li class="disabled">{{ $element }}</li>
                                    @endif

                                    @if (is_array($element))
                                        @foreach ($element as $page => $url)
                                            <a href="{{ $url }}&search={{ request('search') }}&category_id={{ request('category_id') }}&subcategory_id={{ request('subcategory_id') }}&min_price={{ request('min_price') }}&max_price={{ request('max_price') }}&sort={{ request('sort') }}&subsubcategory_id={{ request('subsubcategory_id') }}"
                                            class="{{ $page == $products->currentPage() ? 'is-active' : '' }}">
                                                <li>{{ $page }}</li>
                                            </a>
                                        @endforeach
                                    @endif
                                @endforeach
                            @else
                                <li class="disabled">1</li>
                            @endif
                        </ul>
                    </div>
                @else
                @endif           -->
                @if($products->count() > 0)
                    <div class="pagination p3">
                        <ul>
                            @if ($products->lastPage() > 1)
                                @foreach ($products->links()->elements as $element)
                                    @if (is_string($element))
                                        <li class="disabled">{{ $element }}</li>
                                    @endif

                                    @if (is_array($element))
                                        @foreach ($element as $page => $url)
                                            <!-- Append all query parameters, including per_page and others -->
                                            <a href="{{ $url }}&search={{ request('search') }}&category_id={{ request('category_id') }}&subcategory_id={{ request('subcategory_id') }}&min_price={{ request('min_price') }}&max_price={{ request('max_price') }}&sort={{ request('sort') }}&subsubcategory_id={{ request('subsubcategory_id') }}&per_page={{ request('per_page', 9) }}"
                                            class="{{ $page == $products->currentPage() ? 'is-active' : '' }}">
                                                <li>{{ $page }}</li>
                                            </a>
                                        @endforeach
                                    @endif
                                @endforeach
                            @else
                                <li class="disabled">1</li>
                            @endif
                        </ul>
                    </div>
                @else
                @endif

            </div>
        </div>
    </div>


    <!-- Modal Structure -->
    <div class="modal fade" id="viewCartModal" tabindex="-1" aria-labelledby="viewCartModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-body">
                <div id="cart-items">
                    <h5 class="modal-title" id="viewCartModalLabel">Product was successfully added to your cart</h5>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="themeBtn" data-bs-dismiss="modal">Continue Shopping</button>
                <button type="button" class="themeBtn" id="view-cart-button">View Cart</button>
            </div>
        </div>
    </div>
</div>


<div class="wishlist-modal modal fade" id="viewCartModal1" tabindex="-1" aria-labelledby="viewCartModalLabel1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-body">
                <div id="cart-items1">
                    <h5 class="modal-title" id="viewCartModalLabel1">Product was successfully added to your cart</h5>
                </div>
            </div>
        </div>
    </div>
</div>


<div id="compareModal" class="modal1">
    <div class="modal-content1">
        <span class="close1">&times;</span>
        <h2>Compare Products</h2>
        <table id="compareTable" class="wd-compare-table">
            <thead>
                <tr>
                    <th>Image</th>
                    <th>Name</th>
                    <th>Price</th>
                    <th>Description</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

</section>
@endsection

@section('scripts')

<script>
$(document).ready(function () {
    $(document).on('click', '.redirect-to-shop', function () {
        $('.loader-wrapper2').css('display', 'block');
        $('.fa-search').css('display', 'none');

        
        setTimeout(() => {
            $('.loader-wrapper2').css('display', 'none');
            $('.fa-search').css('display', 'block');

            window.location.href = "{{ route('front.shop') }}";
        }, 500);
    });
});
$(function () {
    // Trigger sorting
    $('#sort').change(function () {
        fetchProducts();
    });

    function fetchProducts() {
        const formData = $('#filter-form').serialize(); // Serialize the form, including sort and filters
        const loader = $('#product-loader');

        $('#product-list').hide();
        loader.show();

        $.ajax({
            url: "{{ route('front.shop') }}",
            method: 'GET',
            data: formData,
            beforeSend: function () {
                loader.show();
            },
            success: function (response) {
                if (response.html) {
                    $('#product-list').html(response.html).show();
                } else {
                    $('#product-list').html('<p>No products found.</p>').show();
                }
                loader.hide();
            },
            error: function (xhr, status, error) {
                console.error('Error fetching products:', error);
                $('#product-list').html('<p>Something went wrong. Please try again.</p>').show();
                loader.hide();
            }
        });
    }
});


$(document).on('click', '.pagination a', function (e) {
    e.preventDefault();

    const page = $(this).data('page'); // Get the page number from data attribute
    const formData = $('#price-filter-form').serialize(); // Serialize filter form data

    fetchProducts(page, formData);
});

$('#filter-btn').click(function () {
    const formData = $('#price-filter-form').serialize();
    fetchProducts(1, formData); // Always start with the first page for new filters
});

function fetchProducts(page, formData) {
    const loader = $('#product-loader');
    $('#product-list').hide();
    loader.show();

    $.ajax({
        url: "{{ route('front.shop') }}?page=" + page,
        method: 'GET',
        data: formData,
        beforeSend: function () {
            loader.show();
        },
        success: function (response) {
            if (response.html) {
                $('#product-list').html(response.html).show();
            } else {
                $('#product-list').html('<p>No products found.</p>').show();
            }
            loader.hide();
        },
        error: function (xhr, status, error) {
            console.error('Error fetching products:', error);
            $('#product-list').html('<p>Something went wrong. Please try again.</p>').show();
            loader.hide();
        }
    });
}


// $(function () {
//     $('#filter-btn').click(function () {
//             fetchProducts();
//         });
// });

// function fetchProducts() {
//     const formData = $('#price-filter-form').serialize();

//     const loader = $('#product-loader');
//     $('#product-list').hide();
//     loader.show();

//     $.ajax({
//         url: "{{ route('front.shop') }}",
//         method: 'GET',
//         data: formData,
//         beforeSend: function () {
//             loader.show();

//         },
//         success: function (response) {
//             if (response.html) {
//                 $('#product-list').html(response.html).show();
//             } else {
//                 $('#product-list').html('<p>No products found.</p>').show();
//             }
//             loader.hide();
//         },
//         error: function (xhr, status, error) {
//             console.error('Error fetching products:', error);
//             $('#product-list').html('<p>Something went wrong. Please try again.</p>').show();
//             loader.hide();
//         }
//     });
// }

$(document).ready(function () {
    $('#lower').on('input', function () {
        $('#one').val($(this).val());
    });

    $('#upper').on('input', function () {
        $('#two').val($(this).val());
    });

});


$(document).ready(function() {
    $('.category-link').on('click', function() {
        var categoryId = $(this).data('category-id');
        var url = '{{ route('front.shop') }}'; 

        $.ajax({
            url: url,
            type: 'GET',
            data: {
                category_id: categoryId,
                per_page: 12,
            },
            success: function(response) {
                $('#product-list').html(response.productsHtml);
                $('.category-title').text('Category: ' + response.categoryName);
            },
            error: function(xhr, status, error) {
                alert('Error fetching category products!');
            }
        });
    });
});


$(document).ready(function () {
    $(document).on('click', '.add-to-cart', function (e) {
        e.preventDefault();

        const productCard = $(this).closest('.product__card');
        const productId = $(this).data('product-id');
        const quantity = 1;

        if (!productId) {
            alert('Product ID is missing.');
            return;
        }

        const loader = productCard.find('.loader-wrapper');
        const cartIcon = $(this).find('.fa-cart-shopping');
        loader.css('display', 'flex');
        cartIcon.css('display', 'none');

        // Single AJAX request
        $.ajax({
            url: '{{ route('cart.add') }}',
            type: 'POST',
            data: {
                product_id: productId,
                quantity: quantity,
                _token: $('meta[name="csrf-token"]').attr('content'),
            },
            success: function (response) {
                loader.css('display', 'none');
                cartIcon.css('display', 'flex');

                if (response.success) {
                    toastr.success(response.message);
                    showViewCartModal();
                } else {
                    toastr.error(response.message);
                }
            },
            error: function () {
                loader.css('display', 'none');
                cartIcon.css('display', 'flex');
                toastr.error('An error occurred while adding the product to the cart. Please try again.');
            },
        });
    });

    function showViewCartModal() {
        $('#viewCartModal').modal('show');
    }
});



$(document).ready(function() {
        $('#view-cart-button').on('click', function() {
            window.location.href = '{{ route('cart.index') }}';
        });
    });


    $(document).ready(function () {
    $('.add-to-wishlist').on('click', function () {
        const $this = $(this);
        const productId = $this.data('product-id');
        const $loader = $('.loader-wrapper4');
        const $faHeart = $this.find('.fa-heart');

        let url = '{{ route('wishlist.add', ':productId') }}';
        url = url.replace(':productId', productId);

        $loader.show();
        $faHeart.hide();

        $.ajax({
            url: url,
            type: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                product_id: productId,
            },
            success: function (response) {
                setTimeout(function () {
                    $loader.hide();
                    $faHeart.show();
                }, 500);

                if (response.success) {
                    fetchWishlistItems1();
                    toastr.success(response.message);
                } else {
                    toastr.error(response.message);
                }
            },
            error: function (xhr, status, error) {
                toastr.error('An error occurred. Please try again.');
                setTimeout(function () {
                    $loader.hide();
                    $faHeart.show();
                }, 500);
            },
        });
    });


    function fetchWishlistItems1() {
        $.ajax({
            url: '{{ route('wishlist.index') }}',
            type: 'GET',
            success: function (response) {
                if (response.html) {
                    $('#cart-items1').html(response.html);
                    showViewCartModal1();
                } else {
                    $('#cart-items1').html('<p>No items in your wishlist.</p>');
                }
            },
            error: function (xhr, status, error) {
                console.error(error);
            },
        });
    }


    function showViewCartModal1() {
        $('#viewCartModal1').modal('show');
    }
});

$(document).ready(function() {

    $('.remove-wishlist-item').on('click', function () {
            var productId = $(this).data('product-id');
            var url = '{{ route('wishlist.remove', ':productId') }}';
            url = url.replace(':productId', productId);

            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    product_id: productId,
                },
                success: function (response) {
                    if (response.success) {
                        toastr.success(response.message);
                        fetchWishlistItems();
                    } else {
                        alert('Failed to remove product from wishlist.');
                    }
                },
                error: function (xhr, status, error) {
                    toastr.error(response.message);

                    alert('An error occurred. Please try again.');
                },
            });
        });
});


$(document).ready(function () {
    const $compareModal = $('#compareModal');
    const $compareTableBody = $('#compareTable tbody');
    const $loader3 = $('.loader-wrapper3');
    const $faCompare = $('.fa-code-compare');
    
    let comparedProducts = [];

    $('.trigger-compare').on('click', function () {
        const $productCard = $(this).closest('.product__card');
        const productId = $productCard.data('product-id');
        const productName = $productCard.find('h3 a').text();
        const productImage = $productCard.find('img').attr('src');
        const productPrice = $productCard.find('h5').text();
        const productDescription = $productCard.find('ul a').text();

        if (comparedProducts.includes(productId)) {
            toastr.error('Product already added to compare.');
            return;
        }

        comparedProducts.push(productId);

        $loader3.show();
        $faCompare.hide();
        setTimeout(() => {
            $loader3.hide();
            $faCompare.show();

            const row = `
                <tr data-product-id="${productId}">
                    <td><img src="${productImage}" alt="${productName}" width="50"></td>
                    <td>${productName}</td>
                    <td>${productPrice}</td>
                    <td>${productDescription}</td>
                    <td><button class="remove-product" style="background-color:red">Remove</button></td>
                </tr>
            `;
            $compareTableBody.append(row);
            $compareModal.show();
        }, 500);
    });

    $('.close1').on('click', function () {
        $compareModal.hide();
    });

    $compareTableBody.on('click', '.remove-product', function () {
        const $row = $(this).closest('tr');
        const productId = $row.data('product-id');
        comparedProducts = comparedProducts.filter(id => id !== productId);

        $row.remove();
    });

    $(window).on('click', function (e) {
        if ($(e.target).is($compareModal)) {
            $compareModal.hide();
        }
    });
});
</script>
@endsection