@extends('frontend.layout.master')
@section('title', $pageTitle)
@section('content')

<section>
    <div class="blog_div_1">
        <div class="nk_about_div_2" style="background-image: url({{ url('/') }}/frontend/img/about-banner.png);">
            <div class="nk_about_div_3">
                <div class="nk_about_div_4">
                    <p class="nk_about_p_1">Wishlist</p>
                </div>
            </div>
        </div>

        <div class="wishlist_div_1 my-5">
            <div class="container">
                @if($WishlistData->count() > 0)
                <div class="row">
                    @foreach($WishlistData as $wishlistItem)
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6 col-6" style="padding: 0px;">
                        <div class="nk_shop_div_5">
                            <a href="{{ route('product_details', ['slug' => $wishlistItem->product->product_slug]) }}">
                                <img src="{{ url('/') }}/{{$wishlistItem->product->product_image}}" class="nk_shop_img_1">
                            </a>
                            <div class="nk_shop_div_7">
                                <p class="nk_shop_p_1">{{$wishlistItem->product->product_name}}</p>
                                <div class="nk_shop_div_8">
                                    <div class="row">
                                        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 col-5 mobile-price-padding" style="padding: 0px 5px;">
                                            <div class="nk_shop_div_9">
                                                <p class="nk_shop_p_2">
                                                    Rs. {{$wishlistItem->product->product_saleprice}}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 col-5" style="padding: 0px 5px;">
                                            <div class="nk_shop_div_9">
                                                <form class="add-to-cart-form" action="{{ route('add.to.cart', $wishlistItem->product->id) }}" method="POST">
                                                    @csrf
                                                    <button class="nk_shop_button_1">Add to Cart</button>
                                                </form>
                                                <!--<button class="nk_shop_button_1 removeFromWishlist" data-id="{{ $wishlistItem->id }}">Remove</button>-->
                                            </div>
                                        </div>
                                        <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 col-2" style="padding: 0px 5px;">
                                            <div class="nk_shop_div_20">
                                                <button class="nk_shop_button_001 removeFromWishlist" data-id="{{ $wishlistItem->id }}">
                                                    <i class="fa-solid fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
    
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="empty_alart_div_1 text-center">
    			    <img src="{{ url('/') }}/frontend/img/shopping-cart.gif" class="empty_alart_img_1">
    			    <p class="empty_alart_p_1">There is No Product in Your Wishlist</p>
    			</div>
                <!--<h1 class="text-center mt-5 wishlist_empty_h_1">There is No Product in Your Wishlist</h1>-->
                @endif
            </div>
        </div>
            
    </div>
</section>

<!-- Include jQuery and SweetAlert2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.10.3/sweetalert2.all.min.js"></script>

<script>
    $(document).ready(function() {
        $('.removeFromWishlist').click(function(e) {
            e.preventDefault();

            var wishlist_id = $(this).data('id');
            var _token = "{{ csrf_token() }}";

            Swal.fire({
                title: "Are you sure?",
                text: "You want to remove this item from your wishlist!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonText: "Yes, Remove it!",
                cancelButtonText: "No, Keep it"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('remove.from.wishlist') }}",
                        method: "POST",
                        data: {
                            wishlist_id: wishlist_id,
                            _token: _token
                        },
                        success: function(response) {
                            if (response.status === 'success') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Removed!',
                                    text: 'Product removed from wishlist successfully!',
                                    showConfirmButton: false,
                                    timer: 2000
                                });
                                location.reload(); // Reload page after success
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Something went wrong!',
                                    text: 'Please try again later.',
                                });
                            }
                        },
                        error: function(xhr, status, error) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Something went wrong!',
                                text: 'Please try again later.',
                            });
                        }
                    });
                }
            });
        });
    });
</script>


<script>

$(document).ready(function () {
    $(document).on("submit", ".add-to-cart-form", function (e) {
        e.preventDefault(); // Prevent default form submission

        var form = $(this);

        $.ajax({
            url: form.attr("action"),
            method: "POST",
            data: form.serialize(),
            dataType: "json",
            success: function (response) {
                if (response.status === "error") {
                    Swal.fire({
                        icon: "error",
                        title: "Oops...",
                        text: response.message
                    });
                } else if (response.status === "success") {
                    Swal.fire({
                        icon: "success",
                        title: "Success!",
                        text: "Product added to cart and removed from wishlist!",
                        showConfirmButton: true
                    }).then((result) => {
                        if (result.isConfirmed) {
                            location.reload(); // Reload the page after confirmation
                        }
                    });

                    // Update cart count dynamically
                    $("#cart-count").text(response.cart_count);
                }
            },
            error: function (xhr) {
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: "Something went wrong, Please log in first to continue."
                });
                console.log(xhr.responseText);
            }
        });
    });
});



// 	$(document).ready(function () {
//     $(document).on("submit", ".add-to-cart-form", function (e) {
//         e.preventDefault(); // Prevent default form submission

//         var form = $(this);

//         $.ajax({
//             url: form.attr("action"),
//             method: "POST",
//             data: form.serialize(),
//             dataType: "json",
//             success: function (response) {
//                 if (response.status === "error") {
//                     Swal.fire({
//                         icon: "error",
//                         title: "Oops...",
//                         text: response.message
//                     });
//                 } else if (response.status === "success") {
//                     Swal.fire({
//                         icon: "success",
//                         title: "Success!",
//                         text: "Product added to cart!",
//                         showConfirmButton: true
//                     }).then((result) => {
//                         if (result.isConfirmed) {
//                             location.reload(); // Reload the page after clicking OK
//                         }
//                     });

//                     // Update cart count dynamically
//                     $("#cart-count").text(response.cart_count);
//                 }
//             },
//             error: function (xhr) {
//                 Swal.fire({
//                     icon: "error",
//                     title: "Error",
//                     text: "Something went wrong, Please log in first to continue."
//                 });
//                 console.log(xhr.responseText);
//             }
//         });
//     });
// });
</script>



@endsection