@extends('layouts.user') 

@section('content')

<!-- 🔥 Wishlist Page Heading -->
<div class="container mt-4 mb-3">
    <h2 class="text-center fw-bold" style="font-size: 28px; color:#333;">
        ❤️ My Wishlist
    </h2>
    <p class="text-center" style="color:#777;">Items you love, saved for later</p>
</div>


<section class="flat-spacing">

    <div class="container">

        <!-- Added styling box around wishlist -->
        <div class="p-3 rounded shadow-sm" style="background: #fff; border:1px solid #eee;">

            <div class="tf-grid-layout wrapper-shop tf-col-4" id="gridLayout">

                @forelse($wishlist as $product)

                    @if($product) {{-- Prevent null product crash --}}

                    @php
                        $variant = optional($product->variants)->first(); 
                        $isWishlisted = true;
                    @endphp

                    <div class="card-product grid">

                        <div class="card-product-wrapper">

                            <!-- ⭐ FIX: Wishlist icon visible on mobile also -->
                            <div class="wishlist-icon-mobile" 
                                style="
                                    position:absolute;
                                    top:10px;
                                    right:10px;
                                    background:#fff;
                                    width:38px;
                                    height:38px;
                                    display:flex;
                                    justify-content:center;
                                    align-items:center;
                                    border:1px solid #ddd;
                                    z-index:20;
                                ">
                                <a href="{{ route('wishlist.toggle', $product->product_id) }}" class="text-danger">
                                    <i class="icon icon-heart" style="font-size:18px;"></i>
                                </a>
                            </div>
                            <!-- END FIX -->

                            <a href="{{ url('product-details/'.$product->product_id) }}" class="product-img d-block">

                                <img class="lazyload img-product" src="{{ asset(''.$product->product_thumbnail) }}" alt="{{ $product->product_name }}">

                                @if($variant)
                                    <img class="lazyload img-hover" src="{{ asset(''.$variant->image ?? $product->product_thumbnail) }}" alt="{{ $product->product_name }}">
                                @endif

                            </a>

                            <div class="list-product-btn">

                                <a href="{{ route('wishlist.toggle', $product->product_id) }}" class="box-icon wishlist btn-icon-action text-danger">
                                    <span class="icon icon-heart"></span>
                                    <span class="tooltip">Remove from Wishlist</span>
                                </a>

                            </div>

                            <div class="list-btn-main">
                                <form action="{{ url('cart/add/'.$product->product_id) }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $product->product_id }}">
                                    <input type="hidden" name="product_name" value="{{ $product->product_name }}">
                                    <input type="hidden" name="product_price" value="{{ $variant->sale_price ?? $variant->mrp ?? 0 }}">
                                    <input type="hidden" name="product_image" value="{{ $product->product_thumbnail }}">
                                    <button type="submit" class="btn-main-product">Add To Cart</button>
                                </form>
                            </div>

                        </div>

                        <div class="card-product-info">

                            <a href="{{ url('product-details/'.$product->product_id) }}" class="title link">{{ $product->product_name }}</a>

                            <div class="price">
                                @if($variant && $variant->mrp && $variant->sale_price && $variant->sale_price < $variant->mrp)
                                    <span class="old-price">₹{{ number_format($variant->mrp, 2) }}</span>
                                @endif

                                <span class="current-price">₹{{ number_format($variant->sale_price ?? $variant->mrp ?? 0, 2) }}</span>
                            </div>

                        </div>

                    </div>

                    @endif {{-- end product check --}}

                @empty

                    <p class="text-center fw-semibold mt-3" style="font-size:18px;">Your wishlist is empty.</p>

                @endforelse

            </div>

        </div>
    </div>

</section>


<!-- Responsive 2-column layout for mobile -->
<style>
@media (max-width: 767px) {
    .tf-grid-layout.wrapper-shop.tf-col-4 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .card-product.grid {
        width: 100% !important;
    }
}

/* Additional UI Enhancements */
.card-product {
    transition: all .2s ease-in-out;
}
.card-product:hover {
    transform: translateY(-4px);
}
</style>


<script>
document.addEventListener("DOMContentLoaded", function () {

    function refreshWishlist() {

        fetch("{{ route('wishlist.fetch') }}")
            .then(res => res.json())
            .then(data => {

                let grid = document.getElementById("gridLayout");

                if (!data.length) {
                    grid.innerHTML = "<p class='text-center fw-semibold mt-3' style='font-size:18px;'>Your wishlist is empty.</p>";
                    return;
                }

                let html = "";

                data.forEach(product => {

                    if (!product) return; // Prevent null crash

                    let variant = (product.variants && product.variants.length)
                        ? product.variants[0]
                        : null;

                    let price = variant?.sale_price ?? variant?.mrp ?? 0;

                    let oldPrice = (variant?.sale_price && variant?.mrp && variant.sale_price < variant.mrp)
                        ? `<span class="old-price">₹${parseFloat(variant.mrp).toFixed(2)}</span>`
                        : "";

                    html += `
                        <div class="card-product grid">

                            <div class="card-product-wrapper">

                                <!-- ⭐ Wishlist icon for mobile refresh also -->
                                <div class="wishlist-icon-mobile" 
                                    style="
                                        position:absolute;
                                        top:10px;
                                        right:10px;
                                        background:#fff;
                                        width:38px;
                                        height:38px;
                                        display:flex;
                                        justify-content:center;
                                        align-items:center;
                                        border:1px solid #ddd;
                                        z-index:20;
                                    ">
                                    <a href="/wishlist/toggle/${product.product_id}" class="text-danger">
                                        <i class="icon icon-heart" style="font-size:18px;"></i>
                                    </a>
                                </div>

                                <a href="/product-details/${product.product_id}" class="product-img d-block">
                                    <img class="lazyload img-product" src="${product.product_thumbnail}" alt="${product.product_name}">
                                    ${variant ? `<img class="lazyload img-hover" src="${variant.image ?? product.product_thumbnail}" alt="${product.product_name}">` : ""}
                                </a>

                                <div class="list-product-btn">
                                    <a href="/wishlist/toggle/${product.product_id}" class="box-icon wishlist btn-icon-action text-danger">
                                        <span class="icon icon-heart"></span>
                                        <span class="tooltip">Remove from Wishlist</span>
                                    </a>
                                </div>

                                <div class="list-btn-main">
                                    <a href="/add-to-cart/${product.product_id}" class="btn-main-product">Add To Cart</a>
                                </div>

                            </div>

                            <div class="card-product-info">

                                <a href="/product-details/${product.product_id}" class="title link">${product.product_name}</a>

                                <div class="price">
                                    ${oldPrice}
                                    <span class="current-price">₹${parseFloat(price).toFixed(2)}</span>
                                </div>

                            </div>

                        </div>
                    `;
                });

                grid.innerHTML = html;

            })
            .catch(err => console.error(err));
    }

    setInterval(refreshWishlist, 5000);
});
</script>

@endsection