@extends('front/app/layout')
@section('content')
    <!-- //wrapper -->
    <div class="wrapper" id="wrapper">
        <div class="product_row" style="background-image:url('{{ asset('assets/images/product_detiles.png') }}');">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                        <h2 class="pro_duct_title">Wishlist</h2>
                        <div class="wishlist_scroll1" id="wishlist_orders">
                            <!-- Wishlist items -->
                        </div>
                        <div class="text-center mt-3">
                            <nav aria-label="Page navigation example">
                                <ul class="pagination justify-content-end"></ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div> <!--  wrapper end  -->
    <!-- //wrapper-end -->
@endsection
@section('js')
    <script>
        @if (Auth::user())
            var carts = @json($carts);
            var orders = carts.map(function(cart) {
                return {
                    product_id: cart.product_id,
                    product_quantity: cart.quantity,
                    product_size: cart.size
                };
            });
            localStorage.setItem('orders', JSON.stringify(orders));

            var totalOrders = orders.length;
            $('#cart_items').html(totalOrders);
        @endif
    </script>

    <script>
        $(document).ready(function() {
            loadWishlist(1);

            function loadWishlist(page) {
                var currentQuantities = {};
                $('.checkout_product').each(function() {
                    var productId = $(this).find('input[type="text"]').data('productid');
                    var quantity = $(this).find('input[type="text"]').val();
                    currentQuantities[productId] = quantity;
                });

                @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 quantity = currentQuantities[item.product_id] || 1;

                                    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="${quantity}" 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}">${price * quantity}</span></span>
                                    </p>
                                </div>
                                <input id="wishlist_total_price_${index}" class="wishlist_total_price" type="hidden" value="${price * quantity}">
                            </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
            }


            function renderPagination(response) {
                let pagination = '';
                if (response.prev_page_url) {
                    pagination +=
                        `<li class="page-item"><a class="page-link" href="#" data-page="${response.current_page - 1}">Previous</a></li>`;
                }

                for (let i = 1; i <= response.last_page; i++) {
                    pagination += `<li class="page-item ${i == response.current_page ? 'active' : ''}">
                            <a class="page-link" href="#" data-page="${i}">${i}</a>
                           </li>`;
                }

                if (response.next_page_url) {
                    pagination +=
                        `<li class="page-item"><a class="page-link" href="#" data-page="${response.current_page + 1}">Next</a></li>`;
                }

                $('.pagination').html(pagination);
            }

            $(document).on('click', '.pagination a', function(e) {
                e.preventDefault();
                let page = $(this).data('page');
                loadWishlist(page);
            });

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

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

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

            $(document).on('click', '.remove-wishlist', function() {
                var productId = $(this).data('product-id');

                var currentPage = $('.pagination .active a').data('page') || 1;

                $.ajax({
                    url: '{{ route('addWishlist') }}',
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        product_id: productId
                    },
                    success: function(response) {
                        $('#wishlistCount').text(response.wishlistCount);

                        if (response.wishlistCount === 0) {
                            $('#wishlist_orders').html('<p>No products in wishlist</p>');
                            $('.pagination').html('');
                        } else {
                            loadWishlist(currentPage);
                        }
                    }
                });
            });


            $(document).on('click', '.wishlist-add-to-cart', function() {
                var index = $(this).data('index');
                var productId = $(this).data('product-id');
                var productQuantity = $('#numberInput_' + index).val();
                var sizeInputs = $('input[name="size_' + index + '"]');
                var productSize = sizeInputs.length ? $('input[name="size_' + index + '"]:checked').val() :
                    'noSize';

                $('#quantity-error-' + index).html('');
                $('#size-error-' + index).html('');

                if (!productQuantity || productQuantity == '0') {
                    $('#quantity-error-' + index).html('This field is required.');
                    return;
                }

                if (sizeInputs.length > 0) {
                    if (!productSize) {
                        $('#size-error-' + index).html('This field is required.');
                        return;
                    }
                } else {
                    if (productSize != 'noSize') {
                        $('#size-error-' + index).html('This field is required.');
                        return;
                    }
                }

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

            function addToCart(productId, productSize, productQuantity) {
                var orders = JSON.parse(localStorage.getItem('orders')) || [];

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

                localStorage.setItem('orders', JSON.stringify(orders));

                var currentPage = $('.pagination .active a').data('page') || 1;

                @if (Auth::user())
                    $.ajax({
                        url: '{{ route('updateCart') }}',
                        method: 'POST',
                        data: {
                            '_token': "{{ csrf_token() }}",
                            'orders': JSON.stringify(orders)
                        },
                        success: function() {
                            $.ajax({
                                url: '{{ route('addWishlist') }}',
                                method: 'POST',
                                data: {
                                    _token: '{{ csrf_token() }}',
                                    product_id: productId
                                },
                                success: function(response) {
                                    $('#wishlistCount').text(response.wishlistCount);

                                    if (response.wishlistCount === 0) {
                                        $('#wishlist_orders').html(
                                            '<p>No products in wishlist</p>');
                                        $('.pagination').html('');
                                    } else {
                                        loadWishlist(
                                            currentPage);
                                    }

                                    $.notify('Order has been updated in the cart!',
                                        "success");
                                    $('#cart_items').html(orders
                                        .length);
                                }
                            });
                        }
                    });
                @endif
            }
        });
    </script>
@endsection