{{-- <script>
        document.getElementById('minus').addEventListener('click', function() {
            var input = document.getElementById('numberInput');
            var value = parseInt(input.value);
            if (value > 1) { // value should not be less than 1
                input.value = value - 1;
            }
        });
        document.getElementById('plus').addEventListener('click', function() {
            var input = document.getElementById('numberInput');
            var value = parseInt(input.value);
            input.value = value + 1;
        });
    </script> --}}

    {{-- <script>
        $(document).ready(function() {
            @if (Auth::check())
                $.ajax({
                    url: '{{ route('getWishlistProducts') }}',
                    method: 'GET',
                    success: function(response) {
                        $('#wishlist_orders').empty();

                        if (response.length > 0) {
                            response.forEach(function(item, index) {
                                var price = item.product_prize;
                                var totalPrice = price * (item.quantity || 1);

                                // Split sizes and size IDs
                                var sizes = item.sizes ? item.sizes.split(',') : [];
                                var sizeIds = item.size_ids ? item.size_ids.split(',') : [];

                                var sizeHtml = '';
                                if (sizes.length > 0 && sizes[0] !== '') {
                                    sizeHtml +=
                                        '<div class="d-flex justify-content-between align-items-center"><div class="product_size wish_size"><p>Size</p><div class="custom_radio">';
                                    sizes.forEach(function(size, i) {
                                        sizeHtml += `
                                        <label>
                                            <input type="radio" name="size_${index}" value="${sizeIds[i]}">
                                            <span>${size}</span>
                                        </label>`;
                                    });
                                    sizeHtml +=
                                        '</div></div><span id="size-error"></span></div>';
                                }

                                var wishlistProduct = `
                                    <div class="checkout_product" id="wishlist_product_${index}">
                                        <div class="left">
                                            <div class="check_img">
                                                <img src="{{ asset('storage/product-images') }}/${item.product_image}">
                                            </div>
                                            <div class="check_count">
                                                <div class="que">
                                                    <span class="minus" data-productid="${item.product_id}" data-index="${index}">
                                                        <i class="fa-solid fa-minus"></i>
                                                    </span>
                                                    <input id="numberInput_${index}" type="text" value="1" data-productid="${item.product_id}">
                                                    <span class="plus" data-productid="${item.product_id}" data-index="${index}">
                                                        <i class="fa-solid fa-plus"></i>
                                                    </span>
                                                </div>
                                                <span id="quantity-error"></span>
                                            </div>
                                        </div>
                                        <div class="right">
                                            <h4>${item.product_name}</h4>
                                            <span><img src="{{ asset('assets/images/coin.png') }}"> <span id="productPrice_${index}">${price}</span></span>
                                            ${sizeHtml}
                                           <p>
                                                <button
                                                    type="button"
                                                    class="btn btn-primary wishlist-add-to-cart"
                                                    data-product-id="${item.product_id}"
                                                    data-index="${index}"
                                                    style="position: relative; width: auto; height: auto; padding: 3px 10px; border: 0; margin-left: auto; background: #d90b1d !important; font-size: 13px;">
                                                    Add to cart
                                                </button>
                                            </p>
                                            <div class="text-end pt-3">
                                                <p>Total Price: <span><img src="{{ asset('assets/images/coin.png') }}">
                                                    <span id="totalPrice_${index}">${totalPrice}</span></span>
                                                </p>
                                            </div>
                                            <input id="wishlist_total_price_${index}" class="wishlist_total_price" type="hidden" value="${totalPrice}">
                                        </div>
                                        <button class="btn remove-wishlist" data-product-id="${item.product_id}">
                                            <img src="{{ asset('assets/images/delete.png') }}">
                                        </button>
                                    </div>
                                `;

                                $('#wishlist_orders').append(wishlistProduct);
                            });


                            calculateWishlistTotal();
                        } else {
                            $('#wishlist_orders').html('<p>No products in wishlist</p>');
                        }
                    }
                });
            @endif
        });



        $(document).on('click', '.plus', function() {
            var index = $(this).data('index');
            var quantityInput = $('#numberInput_' + index);
            var quantity = parseInt(quantityInput.val());
            var newQuantity = quantity + 1;

            quantityInput.val(newQuantity);

            updateWishlistPrice(index, newQuantity);
        });

        $(document).on('click', '.minus', function() {
            var index = $(this).data('index');
            var quantityInput = $('#numberInput_' + index);
            var quantity = parseInt(quantityInput.val());

            if (quantity > 1) {
                var newQuantity = quantity - 1;
                quantityInput.val(newQuantity);

                updateWishlistPrice(index, newQuantity);
            }
        });

        function updateWishlistPrice(index, quantity) {
            var price = parseFloat($('#productPrice_' + index).text());
            var totalPrice = price * quantity;

            $('#totalPrice_' + index).text(totalPrice);
            $('#wishlist_total_price_' + index).val(totalPrice);

            calculateWishlistTotal();
        }

        function calculateWishlistTotal() {
            var total = 0;
            $('.wishlist_total_price').each(function() {
                total += parseFloat($(this).val());
            });
            $('#wishlist_total').text(total);
        }

        // Add to Cart from Wishlist
        $(document).on('click', '.wishlist-add-to-cart', function() {
            var index = $(this).data('index');
            var productId = $(this).data('product-id');
            var productQuantity = $('#numberInput_' + index).val();

            // Check selected size if available
            var sizeInputs = $('input[name="size_' + index + '"]');
            var productSize = sizeInputs.length ? $('input[name="size_' + index + '"]:checked').val() : 'noSize';

            addToCart(productId, productSize, productQuantity);
        });

        // Reusable Add to Cart Function
        function addToCart(productId, productSize, productQuantity) {
            // Reset errors
            $('#quantity-error').html('');
            $('#size-error').html('');

            // Validate Quantity
            if (!productQuantity || productQuantity == '0') {
                $.notify('Quantity is required', 'error');
                return;
            }

            // Validate Size
            if (productSize === undefined || productSize === '') {
                $.notify('Please select a size', 'error');
                return;
            }

            // Retrieve existing orders
            var orders = JSON.parse(localStorage.getItem('orders')) || [];

            // Check if product already in cart
            var existingOrderIndex = orders.findIndex(function(order) {
                return productId == order.product_id && productSize == order.product_size;
            });

            if (existingOrderIndex !== -1) {
                orders[existingOrderIndex].product_quantity = productQuantity;
            } else {
                orders.push({
                    product_id: productId,
                    product_quantity: productQuantity,
                    product_size: productSize
                });
            }

            // Save updated orders to localStorage
            localStorage.setItem('orders', JSON.stringify(orders));

            // Update server if logged in
            @if (Auth::user())
                $.ajax({
                    url: '{{ route('updateCart') }}',
                    method: 'POST',
                    data: {
                        '_token': "{{ csrf_token() }}",
                        'orders': JSON.stringify(orders)
                    }
                });
            @endif

            // Update cart count and notify
            $.notify('Product added to cart!', "success");
            $('#cart_items').html(orders.length);
        }
    </script> --}}











    // public function myRewardPaginate(Request $request)
    // {
    //     $query = DB::table('points')
    //         ->leftJoin('quarters', 'points.quarter_id', '=', 'quarters.id')
    //         ->leftJoin('users', 'points.user_id', '=', 'users.id')
    //         ->select(
    //             'points.id',
    //             'points.year',
    //             'points.quarter_id',
    //             'points.points as earning',
    //             DB::raw('0 as spent'),
    //             DB::raw('points.points as remaining'),
    //             'quarters.quarter_name as quarter_name',
    //             'users.total_points as total_points',
    //             'points.created_at'
    //         )
    //         ->where('points.user_id', Auth::user()->id)
    //         ->orderBy('points.id', 'desc');

    //     return DataTables::of($query)
    //         ->addIndexColumn()

    //         ->editColumn('year', function ($data) {
    //             return $data->year ?: null;
    //         })

    //         ->editColumn('quarter_name', function ($data) {
    //             return $data->quarter_name ?: 'N/A';
    //         })

    //         ->editColumn('earning', function ($data) {
    //             return '<div class="coin_v">
    //                     <img src="' . asset("assets/images/favicon.png") . '" class="me-2" width="20px">' . $data->earning . '
    //                 </div>';
    //         })

    //         ->editColumn('spent', function ($data) {
    //             $spent = (int) $data->earning - (int) $data->total_points;
    //             return '<div class="coin_v">
    //                     <img src="' . asset("assets/images/favicon.png") . '" class="me-2" width="20px">'. $spent . '
    //                 </div>';
    //         })

    //         ->editColumn('remaining', function ($data) {
    //             return '<div class="coin_v">
    //                     <img src="' . asset("assets/images/favicon.png") . '" class="me-2" width="20px">' . $data->total_points . '
    //                 </div>';
    //         })

    //         ->editColumn('created_at', function ($data) {
    //             return '<p class="mb-0">
    //                     <span class="d-flex align-items-center justify-content-center">
    //                         <i class="fa fa-calendar-alt me-2"></i>' . date('d/m/Y', strtotime($data->created_at)) . '
    //                     </span>
    //                     <span class="time_span">
    //                         <i class="fa fa-clock me-2"></i>' . date('h:i A', strtotime($data->created_at)) . '
    //                     </span>
    //                 </p>';
    //         })

    //         ->filter(function ($instance) use ($request) {
    //             if (!empty($request->year)) {
    //                 $instance->where('points.year', $request->year);
    //             }
    //             if (!empty($request->quarter)) {
    //                 $instance->where('points.quarter_id', $request->quarter);
    //             }
    //             if (!empty($_REQUEST['search']['value'])) {
    //                 $search = $_REQUEST['search']['value'];
    //                 $instance->where(function ($w) use ($search) {
    //                     $w->orWhere('points.year', 'LIKE', "%$search%")
    //                         ->orWhere('quarters.quarter_name', 'LIKE', "%$search%");
    //                 });
    //             }
    //         })

    //         ->rawColumns(['earning', 'spent', 'remaining', 'created_at'])
    //         ->make(true);
    // }


























                            // if (response.length > 0) {
                            //     response.forEach(function(item, index) {
                            //         var price = item.product_prize;
                            //         var totalPrice = price * (item.quantity || 1);

                            //         // Split sizes and size IDs
                            //         var sizes = item.sizes ? item.sizes.split(',') : [];
                            //         var sizeIds = item.size_ids ? item.size_ids.split(',') : [];

                            //         var sizeHtml = '';
                            //         if (sizes.length > 0 && sizes[0] !== '') {
                            //             sizeHtml += `
                        //         <div class="d-flex justify-content-between align-items-center">
                        //             <div class="product_size wish_size">
                        //                 <p>Size</p>
                        //                 <div class="custom_radio">`;
                            //             sizes.forEach(function(size, i) {
                            //                 sizeHtml += `
                        //             <label>
                        //                 <input type="radio" name="size_${index}" value="${sizeIds[i]}">
                        //                 <span>${size}</span>
                        //             </label>`;
                            //             });
                            //             sizeHtml += `
                        //                 </div>
                        //                 <span class="size-error" id="size-error-${index}"></span>
                        //             </div>
                        //         </div>`;
                            //         }

                            //         var wishlistProduct = `
                        //             <div class="checkout_product" id="wishlist_product_${index}">
                        //                 <div class="left">
                        //                     <div class="check_img">
                        //                         <img src="{{ asset('storage/product-images') }}/${item.product_image}">
                        //                     </div>
                        //                     <div class="check_count">
                        //                         <div class="que">
                        //                             <span class="minus" data-productid="${item.product_id}" data-index="${index}">
                        //                                 <i class="fa-solid fa-minus"></i>
                        //                             </span>
                        //                             <input id="numberInput_${index}" type="text" value="1" data-productid="${item.product_id}">
                        //                             <span class="plus" data-productid="${item.product_id}" data-index="${index}">
                        //                                 <i class="fa-solid fa-plus"></i>
                        //                             </span>
                        //                         </div>
                        //                         <span class="quantity-error" id="quantity-error-${index}"></span>
                        //                     </div>
                        //                 </div>
                        //                 <div class="right">
                        //                     <h4>${item.product_name}</h4>
                        //                     <span><img src="{{ asset('assets/images/coin.png') }}"> <span id="productPrice_${index}">${price}</span></span>
                        //                     ${sizeHtml}
                        //                     <p>
                        //                         <button
                        //                             type="button"
                        //                             class="btn btn-primary wishlist-add-to-cart"
                        //                             data-product-id="${item.product_id}"
                        //                             data-index="${index}"
                        //                             style="position: relative; width: auto; height: auto; padding: 3px 10px; border: 0; margin-left: auto; background: #d90b1d !important; font-size: 13px;">
                        //                             Add to cart
                        //                         </button>
                        //                     </p>
                        //                     <div class="text-end pt-3">
                        //                         <p>Total Price: <span><img src="{{ asset('assets/images/coin.png') }}">
                        //                             <span id="totalPrice_${index}">${totalPrice}</span></span>
                        //                         </p>
                        //                     </div>
                        //                     <input id="wishlist_total_price_${index}" class="wishlist_total_price" type="hidden" value="${totalPrice}">
                        //                 </div>
                        //                 <button class="btn remove-wishlist" data-product-id="${item.product_id}">
                        //                     <img src="{{ asset('assets/images/delete.png') }}">
                        //                 </button>
                        //             </div>
                        //         `;

                            //         $('#wishlist_orders').append(wishlistProduct);
                            //     });

                            //     calculateWishlistTotal();
                            //     renderPagination(response);
                            // } else {
                            //     $('#wishlist_orders').html('<p>No products in wishlist</p>');
                            //     $('.pagination').html('');
                            // }



















































                                        // function loadWishlist(page) {
            //     @if (Auth::check())
            //         $.ajax({
            //             url: '{{ route('getWishlistProducts') }}?page=' + page,
            //             method: 'GET',
            //             success: function(response) {
            //                 $('#wishlist_orders').empty();
            //                 if (response.data.length > 0) {
            //                     response.data.forEach(function(item, index) {
            //                         var price = item.product_prize;
            //                         var totalPrice = price * (item.quantity || 1);

            //                         var sizes = item.sizes ? item.sizes.split(',') : [];
            //                         var sizeIds = item.size_ids ? item.size_ids.split(',') : [];

            //                         var sizeHtml = '';
            //                         if (sizes.length > 0 && sizes[0] !== '') {
            //                             sizeHtml += `
        //                         <div class="d-flex justify-content-between align-items-center">
        //                             <div class="product_size wish_size">
        //                                 <p>Size</p>
        //                                 <div class="custom_radio">`;
            //                             sizes.forEach(function(size, i) {
            //                                 sizeHtml += `
        //                                 <label>
        //                                     <input type="radio" name="size_${index}" value="${sizeIds[i]}">
        //                                     <span>${size}</span>
        //                                 </label>`;
            //                             });
            //                             sizeHtml += `
        //                                 </div>
        //                                 <span class="size-error" id="size-error-${index}"></span>
        //                             </div>
        //                         </div>`;
            //                         }

            //                         var wishlistProduct = `
        //                         <div class="checkout_product" id="wishlist_product_${index}">
        //                             <div class="left">
        //                                 <div class="check_img">
        //                                     <img src="{{ asset('storage/product-images') }}/${item.product_image}">
        //                                 </div>
        //                                 <div class="check_count">
        //                                     <div class="que">
        //                                         <span class="minus" data-productid="${item.product_id}" data-index="${index}">
        //                                             <i class="fa-solid fa-minus"></i>
        //                                         </span>
        //                                         <input id="numberInput_${index}" type="text" value="1" data-productid="${item.product_id}">
        //                                         <span class="plus" data-productid="${item.product_id}" data-index="${index}">
        //                                             <i class="fa-solid fa-plus"></i>
        //                                         </span>
        //                                     </div>
        //                                     <span class="quantity-error" id="quantity-error-${index}"></span>
        //                                 </div>
        //                             </div>
        //                             <div class="right">
        //                                 <h4>${item.product_name}</h4>
        //                                 <span><img src="{{ asset('assets/images/coin.png') }}"> <span id="productPrice_${index}">${price}</span></span>
        //                                 ${sizeHtml}
        //                                 <p>
        //                                     <button
        //                                         type="button"
        //                                         class="btn btn-primary wishlist-add-to-cart"
        //                                         data-product-id="${item.product_id}"
        //                                         data-index="${index}"
        //                                         style="position: relative; width: auto; height: auto; padding: 3px 10px; border: 0; margin-left: auto; background: #d90b1d !important; font-size: 13px;">
        //                                         Add to cart
        //                                     </button>
        //                                 </p>
        //                                 <div class="text-end pt-3">
        //                                     <p>Total Price: <span><img src="{{ asset('assets/images/coin.png') }}">
        //                                         <span id="totalPrice_${index}">${totalPrice}</span></span>
        //                                     </p>
        //                                 </div>
        //                                 <input id="wishlist_total_price_${index}" class="wishlist_total_price" type="hidden" value="${totalPrice}">
        //                             </div>
        //                             <button class="btn remove-wishlist" data-product-id="${item.product_id}">
        //                                 <img src="{{ asset('assets/images/delete.png') }}">
        //                             </button>
        //                         </div>
        //                         `;

            //                         $('#wishlist_orders').append(wishlistProduct);
            //                     });

            //                     calculateWishlistTotal();
            //                     renderPagination(response);
            //                 } else if (page > 1) {
            //                     loadWishlist(page - 1);
            //                 } else {
            //                     $('#wishlist_orders').html('<p>No products in wishlist</p>');
            //                     $('.pagination').html('');
            //                 }

            //             }
            //         });
            //     @endif
            // }






    //slick slider
    // $('.img_big').slick({
    //     slidesToShow: 1,
    //     slidesToScroll: 1,
    //     arrows: true,
    //     fade: true,
    //     asNavFor: '.img_small'
    // });
    // $('.img_small').slick({
    //     slidesToShow: 5,
    //     slidesToScroll: 1,
    //     asNavFor: '.img_big',
    //     dots: false,
    //     arrows: true,
    //     focusOnSelect: true,
    //     responsive: [
    //         {
    //             breakpoint: 1024,
    //             settings: {
    //                 slidesToShow: 3,
    //                 slidesToScroll: 1,
    //                 infinite: true
    //             }
    //         }
    //         // {
    //         // breakpoint: 600,
    //         // settings: {
    //         //     slidesToShow: 2,
    //         //     slidesToScroll: 1
    //         // }
    //         // },
    //         // {
    //         // breakpoint: 480,
    //         // settings: {
    //         //     slidesToShow: 1,
    //         //     slidesToScroll: 1
    //         // }
    //         // }
    //         // You can unslick at a given breakpoint now by adding:
    //         // settings: "unslick"
    //         // instead of a settings object
    //     ]
    // });