@extends('layouts.app')
@section('title', 'My Saved Wishlist | Saree Store')

@section('content')
@include('layouts.breadcrumb', [
    'title' => 'My Wishlist', 
    'crumbs' => [
        ['name' => 'Home', 'url' => route('home')], 
        ['name' => 'Wishlist', 'url' => null]
    ]
])

<div class="ul-container py-5">
    <div class="p-4 bg-white rounded-4 border shadow-sm">
        <h5 class="fw-bold mb-4" style="color: #2B1820;">Saved Saree Wishlist ({{ $wishlistItems->count() }} items)</h5>

        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
            @forelse($wishlistItems as $item)
                <div class="col">
                    <div class="ul-product border rounded-4 overflow-hidden h-100 bg-white">
                        <div class="ul-product-heading">
                            <span class="ul-product-price">₹{{ number_format($item->product->sale_price ?: $item->product->price, 2) }}</span>
                        </div>

                        <div class="ul-product-img">
                            <img src="{{ asset($item->product->image) }}" alt="{{ $item->product->name }}" style="height: 240px; object-fit: cover; width: 100%;">
                        </div>

                        <div class="ul-product-txt p-3 text-center">
                            <h4 class="ul-product-title mb-1 fs-6">
                                <a href="#" class="text-dark text-decoration-none fw-semibold">{{ $item->product->name }}</a>
                            </h4>
                            <p class="small text-muted mb-3">{{ $item->product->category }}</p>

                            <div class="d-flex gap-2">
                                <form method="POST" action="{{ route('cart.add', $item->product) }}" class="flex-grow-1">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-danger w-100 rounded-3">Add to Cart</button>
                                </form>
                                <form method="POST" action="{{ route('wishlist.toggle', $item->product) }}">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-outline-secondary rounded-3" title="Remove from Wishlist">
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <polyline points="3 6 5 6 21 6"></polyline>
                                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                        </svg>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 py-5 text-center text-muted">
                    <div class="mb-3">
                        <i class="flaticon-heart" style="font-size: 3rem; color: #D6C4CD;"></i>
                    </div>
                    <h5>Your wishlist is currently empty</h5>
                    <p class="small">Save your favorite sarees while browsing the collection.</p>
                    <a href="{{ route('shop') }}" class="btn btn-danger rounded-3 mt-2">Explore Sarees</a>
                </div>
            @endforelse
        </div>
    </div>
</div>
@endsection