@extends('front.layout.app')
@section('title', 'Motor City Awards and Engraving')
@section('content')

<style>
   
/* #loader1 {
    display:none;
    position: fixed;
    top: 28px;
    right: 27px;
    z-index: 9999;
}

.loader1 {
    background-color: transparent;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-block;
    border-top: 3px solid #000;
    border-right: 3px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
} */
.disabled {
    color: #ccc;  /* Gray out the icon */
    pointer-events: none;  /* Disable clicks */
}

    
.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);
    }
}

/* .product__card_btn1 {
    position: relative;
}

.product__card_btn1 li {
    position: relative;
} */


.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>


<div class="preloader">
    <h5>Motor City Awards and Engraving</h5>
    <div class="line"></div>
    <div class="counter">
        <span>0</span><span>%</span>
    </div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>

<section class="main-banner">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="main-banner__content">
                    <h1>{{ $data->content['home_banner_heading'] ?? '' }}</h1>
                    <figure class="main-banner__logo">
                        <img src="{{ $data->cmsImages('banner_logo') ?? '' }}" alt="image" class="img-fluid d-block">
                        {{-- {{ asset('front/assets/images/main-banner-logo.webp') }} --}}
                    </figure>
                    <p>
                        {{ $data->content['home_banner_description'] ?? '' }}
                    </p>
                    <div class="main-banner__btn">
                        <a href="{{ route('front.shop') }}" class="themeBtn mx-auto">Shop Now</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="about-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="about__content">
                    <h5 class="subHeading" data-aos="fade-up">About Us</h5>
                    <h3 class="mainHeading" data-aos="fade-up">{{ $data->content['home_sub_heading'] ?? '' }}</h3>
                    <p data-aos="fade-up">
                        {{ $data->content['home_sub_description'] ?? '' }}
                    </p>
                    <div data-aos="fade-up">
                        <a href="{{ route('front.about') }}" class="themeBtn">Read More</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <figure class="about__img" data-aos="fade-left">

                    <img src="{{ $data->cmsImages('about') ?? '' }}" alt="image" class="img-fluid">
                </figure>
            </div>
        </div>
    </div>
</section>

<section class="product-section">
    <div class="container">
        <div class="title text-center mb-5">
            <h5 class="subHeading mx-auto" data-aos="fade-up">Motor City</h5>
            <h3 class="mainHeading" data-aos="fade-up">Our Products</h3>
        </div>
        <div id="product-list" class="row">
            @php
            use App\Models\Product;
            $products = Product::take(6)->get();
            @endphp
            @foreach ($products as $product)
            <div class="col-lg-4">
                    <div class="product__card" data-aos="zoom-in" data-product-id="{{ $product->id }}">
                        <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>
                            @if($product->getMedia('banner_image')->isNotEmpty())
                                <a href="{{ route('front.single-product-detail', ['product_slug' => $product->slug]) }}" class="hover-img d-block">
                                    <img src="{{ $product->getFirstMediaUrl('gallery_images', 'thumb') ?: asset('upload/No-Image.png') }}" alt="image" class="img-fluid">
                                </a>
                            @endif
                        </figure>
                        <div class="product__card_content">
                            <h3><a href="">{{ $product->name }}</a></h3>
                            <ul class="d-flex align-items-center gap-05">
                                <li><a href="">
                                {{ preg_replace('/\s+/', ' ', str_replace('\n', ' ', strip_tags($product->description))) }}

                                     <!-- Lorem ipsum dolor sit amet, consectetur adipiscing elit, -->
                                    </a></li>
                            </ul>
                            <h5>&dollar;{{ number_format($product->price, 2) }}</h5>
                        </div>
                        <ul class="product__card_btn">

                            <div class="loader-wrapper" id="loader-add-to-cart">
                                <span class="loader"></span>
                            </div>
                            <li><a class="add-to-cart"><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>
                            <li>
                            <div class="loader-wrapper4" id="loader4">
                                <span class="loader4"></span>
                            </div>

                            <a href="javascript:void(0)" class="add-to-wishlist" data-product-id="{{ $product->id }}">
                                <i class="fa-regular fa-heart"></i>


                            </a>

                            <!-- <button id="clear-wishlist" class="btn btn-danger">Clear Wishlist</button> -->
                            </li>
                        </ul>
                    </div>
            </div>
            @endforeach

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



<section class="gift-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-4">
                <figure class="gift-img overflow-hidden">
                    <img src="{{ $data->cmsImages('gift_items1') ?? '' }}" alt="image" class="img-fluid" data-aos="zoom-out">
                </figure>
            </div>
            <div class="col-lg-4">
                <div class="gift-content text-center">
                    <h3 class="mainHeading color-primary" data-aos="fade-up">{{ $data->content['home_gift_title'] ?? '' }}</h3>
                    <h4 data-aos="fade-up">{{ $data->content['home_gift_heading'] ?? '' }}</h4>
                    <p data-aos="fade-up">
                        {{ $data->content['home_gift_description'] ?? '' }}
                    </p>
                    <div data-aos="fade-up">
                        <a href="{{ route('front.about') }}" class="themeBtn mx-auto">Read More</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <figure class="gift-img overflow-hidden">
                    <img src="{{ $data->cmsImages('gift_items2') ?? '' }}" alt="image" class="img-fluid" data-aos="zoom-out">
                </figure>
            </div>
        </div>
    </div>
</section>

<section class="work-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <div class="work__content">
                    <h5 class="subHeading">{{ $data->content['work_section_title'] ?? '' }}</h5>
                    <h3 class="mainHeading text-white">{{ $data->content['our_goal_sec_des'] ?? '' }}</h3>
                </div>
            </div>
            <div class="col-lg-4 offset-lg-1">
                <div class="work__wrapper">
                    <div class="work__counter" data-aos="zoom-in">
                        <h4>100</h4>
                        <h5>Products</h5>
                    </div>
                    <div class="work__counter" data-aos="zoom-in">
                        <h4>25</h4>
                        <h5>Experience</h5>
                    </div>
                    <div class="work__counter" data-aos="zoom-in">
                        <h4>150</h4>
                        <h5>Clients</h5>
                    </div>
                    <div class="work__counter" data-aos="zoom-in">
                        <h4>35</h4>
                        <h5>Employees</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>







<section class="testimonial-section">
    <div class="container">
        <div class="title position-relative text-center mb-4">
            <h3 class="mainHeading color-primary" data-aos="fade-up">Testimonials</h3>
        </div>
        <div class="swiper testimonialSlider" data-aos="fade-up">
            <div class="swiper-wrapper">
                @foreach ($testimonials as $testimonial)

                <div class="swiper-slide">

                    <div class="testimonial__card">
                        <figure class="testimonial__card_img">
                            {{-- "{{ asset('uploads/testimonials/' . ($testimonial->image ?: 'No-Image.png')) }}" --}}


                            <img
                            src="{{ $testimonial->testimonialImage('testimonial_image') ?: asset('upload/No-Image.png') }}"
                            alt="{{ $testimonial->name }}"
                            class="img-fluid">

                            {{-- <img src="{{ asset('front/assets/images/client1.webp') }}" $testimonials->image alt="image" class="img-fluid"> --}}
                        </figure>
                        <div class="testimonial__card_content">
                            <ul class="stars d-flex align-items-center justify-content-center gap-025">
                                @for ($i = 1; $i <= 5; $i++)
                                    <li>
                                        <i class="fa-solid fa-star{{ $i <= $testimonial->rating ? '' : '-o' }}"></i>
                                    </li>
                                @endfor
                            </ul>
                            <p>
                                {{ $testimonial->description }}
                            </p>
                            <h5>{{ $testimonial->name }}</h5>
                        </div>
                    </div>
                </div>
                @endforeach

            </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>


<!-- Modal Template -->
<!-- <div class="wishlist-modal modal fade" id="viewCartModal-{{ $product->id }}" tabindex="-1" aria-labelledby="viewCartModalLabel-{{ $product->id }}" aria-hidden="true" data-product-id="{{ $product->id }}">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-body">
                <div id="cart-items-{{ $product->id }}">
                    <h5 class="modal-title" id="viewCartModalLabel-{{ $product->id }}">Product was successfully added to your wishlist</h5>
                </div>
            </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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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);
    });
});


// $(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) {
//                     fetchWishlistItems(productId);  // Correct function name
//                     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 fetchWishlistItems(productId) {
//         $.ajax({
//             url: '{{ route('wishlist.index') }}',
//             type: 'GET',
//             success: function (response) {
//                 console.log('Response HTML:', response.html); // Log the response to inspect the HTML
//                 if (response.html) {
//                     // Dynamically insert the fetched HTML for the product's modal
//                     var modalHtml = response.html;
//                     var modalId = 'viewCartModal-' + productId;
                    
//                     // Check if the modal already exists
//                     if ($('#' + modalId).length === 0) {
//                         // If the modal doesn't exist, append it to the body (or appropriate container)
//                         $('body').append(modalHtml);
//                     } else {
//                         // If the modal exists, just update its content
//                         $('#cart-items-' + productId).html(response.html);
//                     }
                    
//                     // Now show the modal
//                     showViewCartModal(productId);
//                 } else {
//                     $('#cart-items-' + productId).html('<p>No items in your wishlist.</p>');
//                 }
//             },
//             error: function (xhr, status, error) {
//                 console.error('Error fetching wishlist items:', error);
//             },
//         });
//     }


//     function showViewCartModal(productId) {
//         console.log('Showing the modal for product ID:', productId); // This log should appear

//         var modalId = '#viewCartModal-' + productId;
//         const modal = $(modalId);

//         if (modal.length) {
//             modal.modal('show');  // Ensure modal function is called here
//         } else {
//             console.error('Modal element not found for product ID:', productId);
//         }
//     }






 $(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 () {
    // Event handler for removing an item from the wishlist
    $('.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();  // Fetch the updated wishlist items

                    // Optionally remove the modal for the removed product
                    $('#viewCartModal-' + productId).modal('hide');  // Close modal for that product
                } else {
                    toastr.error('Failed to remove product from wishlist.');
                }
            },
            error: function (xhr, status, error) {
                toastr.error('An error occurred. Please try again.');

                // Log error to the console for debugging
                console.error('Error:', status, error);
            },
        });
    });
});

// Function to fetch updated wishlist items
function fetchWishlistItems() {
    $.ajax({
        url: '{{ route('wishlist.index') }}',
        type: 'GET',
        success: function (response) {
            if (response.html) {
                // Update the wishlist items section with the new HTML
                $('#wishlist-items').html(response.html);
            } else {
                $('#wishlist-items').html('<p>No items in your wishlist.</p>');
            }
        },
        error: function (xhr, status, error) {
            console.error('Error fetching wishlist items:', error);
        },
    });
}

$(document).ready(function () {
    // Handle click event for clearing all products from the wishlist
    $('#clear-wishlist').on('click', function () {
        var url = '{{ route('wishlist.clear') }}';

        $.ajax({
            url: url,
            type: 'POST',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
            },
            success: function (response) {
                if (response.success) {
                    toastr.success(response.message);
                    // Optionally, refresh or hide the wishlist section
                    $('#wishlist-items').html('<p>Your wishlist is empty.</p>');
                } else {
                    toastr.error('Failed to clear wishlist.');
                }
            },
            error: function (xhr, status, error) {
                toastr.error('An error occurred. Please try again.');
            },
        });
    });
});


// $(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() {
    $(document).on('click', '.add-to-cart', function() {
        $('.loader-wrapper').css('display', 'flex');
        $('.fa-cart-shopping').css('display', 'none');
        
        setTimeout(() => {
            const productCard = $(this).closest('.product__card');
            const productId = productCard.data('product-id');
            const quantity = 1;

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

                    if (response.success == true) {
                        toastr.success(response.message);
                        showViewCartModal();

                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function () {
                    $('.loader-wrapper').css('display', 'none');
                    alert('An error occurred. Please try again.');
                },
            });
        }, 500);
    });

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

// $(document).ready(function () {
//     $(document).on('click', '.add-to-cart', function () {
//         const loader = $('.loader-wrapper');
//         const cartIcon = $('.fa-cart-shopping');
//         loader.css('display', 'flex');
//         cartIcon.css('display', 'none');

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

//         // AJAX call to check stock
//         $.ajax({
//             url: '{{ route('cart.add') }}', // Define a route for checking stock
//             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.stock === 0) {
//                     toastr.error('This product is out of stock.');
//                 } else if (response.available_quantity < quantity) {
//                     toastr.error('Not enough stock available.');
//                 } else {
//                     toastr.success(addResponse.message);
//                 }
//             },
//             error: function () {
//                 loader.css('display', 'none');
//                 cartIcon.css('display', 'flex');
//                 toastr.error('An error occurred while checking stock.');
//             },
//         });
//     });

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


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

<script>
$(document).ready(function () {
    $('#search-form').on('submit', function (e) {
        e.preventDefault();
        const searchTerm = $('#search-term').val();
        const category = $('#category').val();
        $.ajax({
            url: '{{ route('product.search') }}',
            type: 'GET',
            data: {
                search_term: searchTerm,
                category: category,
            },
            success: function (response) {
                console.log('Response:', response);
                $('#product-list').html(response.html);
            },
            error: function (xhr, status, error) {
                console.error('Error:', error);
                alert('An error occurred while processing the search.');
            },
        });
    });
});

$(document).ready(function () {
    $(document).on('click', '.category-link, .subcategory-link', function (e) {
        e.preventDefault();

        var categoryId = $(this).data('category-id');

        $.ajax({
            url: '{{ route('product.search') }}',
            type: 'GET',
            data: {
                category_id: categoryId,
            },
            success: function (response) {
                console.log('Response:', response);
                $('#product-list').html(response.html);
            },
            error: function (xhr, status, error) {
                console.error('Error:', error);
                alert('An error occurred while processing the search.');
            },
        });
    });
});


$(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