@extends('layout2.clim.header')

@section('content')
<div class="container py-5">
    <h2 class="mb-4">Your Wishlist</h2>
    <div id="wishlist-container" class="row g-4"></div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const wishlistItems = JSON.parse(localStorage.getItem('wishlist')) || [];
        const container = document.getElementById('wishlist-container');

        if (wishlistItems.length === 0) {
            container.innerHTML = '<p>No items in wishlist.</p>';
            return;
        }

        wishlistItems.forEach(product => {
            const col = document.createElement('div');
            col.className = 'col-6 col-md-2';
            col.dataset.id = product.id;

            col.innerHTML = `
                <div class="single-product-wrap border border-secondary p-2 rounded d-flex flex-column h-100">
                    <div class="product-image banner-hover flex-grow-1 position-relative" style="height: 180px; overflow: hidden;">
                        <button class="wishlist-remove-btn position-absolute top-0 start-0 m-2 p-0 border-0 bg-transparent"
                            onclick="removeFromWishlistItem(${product.id})" title="Remove from Wishlist">
                            <i class="fa-solid fa-xmark  fs-5" style="color:#ed1e54"></i>
                        </button>

                        <a href="/product/${product.id}-${slugify(product.name)}" class="pro-img h-100 d-block">
                            <img src="${product.image}" class="img-fluid w-100 h-100 object-fit-cover" alt="${product.name}">
                        </a>
                    </div>
                    <div class="product-content mt-2">
                        <div class="product-title" style="overflow: hidden;">
                            <h6 class="m-0">
                                <a href="/product/${product.id}-${slugify(product.name)}"
                                   class="product-title-link text-dark text-decoration-none">
                                    ${product.name}
                                </a>
                            </h6>
                        </div>
                        <div class="product-price mt-2">
                            <div class="pro-price-box">
                                <span class="new-price fw-bold">TK ${parseFloat(product.price).toLocaleString()}</span>
                            </div>
                        </div>
                        <div class="AddToCart_btn mt-2 d-flex align-items-center justify-content-center">
                            <button style="background-color: #ed1e54"
                                class="add-button addcart-button btn buy-button text-light"
                                data-bs-toggle="offcanvas"
                                data-bs-target="#cartDrawer"
                                onclick="AddToCart('${product.id}', '${escapeHtml(product.name)}', ${parseFloat(product.price)}, '${product.image}')">
                                <div class="d-block text-light">Add to Cart</div>
                            </button>
                        </div>
                    </div>
                </div>
            `;

            container.appendChild(col);
        });
    });

    function removeFromWishlistItem(id) {
        let wishlistItems = JSON.parse(localStorage.getItem('wishlist')) || [];
        wishlistItems = wishlistItems.filter(item => item.id !== id);
        localStorage.setItem('wishlist', JSON.stringify(wishlistItems));
        updateWishlistCount();

        const container = document.getElementById('wishlist-container');
        const cardToRemove = container.querySelector(`[data-id="${id}"]`);
        if (cardToRemove) {
            cardToRemove.remove();
        }

        if (wishlistItems.length === 0) {
            container.innerHTML = '<p>No items in wishlist.</p>';
        }
    }

    function slugify(text) {
        return text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)+/g, '');
    }

    function escapeHtml(text) {
        return text.replace(/'/g, "\\'");
    }

    function updateWishlistCount() {
        const wishlist = JSON.parse(localStorage.getItem('wishlist')) || [];
        const count = wishlist.length;
        document.querySelectorAll('.wishlist-count, .wishlist-counter').forEach(el => {
            el.textContent = count;
        });
    }

    function AddToCart(id, name, price, image) {
        // Your actual add-to-cart logic here
        console.log('Add to cart:', id, name, price, image);
    }
</script>
@endsection