@extends('layouts.store')

@section('title', 'My Favorites')

@section('content')
    <section class="dashboard-head">
        <div>
            <span class="eyebrow">Saved</span>
            <h1>My Favorites</h1>
        </div>
    </section>

    @if (session('status'))
        <p class="form-status">{{ session('status') }}</p>
    @endif

    <section class="product-grid">
        @forelse ($favorites as $favorite)
            <article class="product-card">
                <div class="product-media">
                    <img src="{{ $favorite->product->primaryImageUrl() ?: \App\Models\SiteSetting::productFallbackImageUrl() }}" alt="{{ $favorite->product->name }}" loading="lazy">
                    <span class="badge">{{ $favorite->product->category->name }}</span>
                </div>
                <div class="product-body">
                    <h3>{{ $favorite->product->name }}</h3>
                    <div class="price-row">
                        <div class="price-stack">
                            <span class="price">{{ \App\Models\SiteSetting::formatPrice($favorite->product->sellingPrice()) }}</span>
                            @if ($favorite->product->compareAtPrice())
                                <small><s>{{ \App\Models\SiteSetting::formatPrice($favorite->product->compareAtPrice()) }}</s></small>
                            @endif
                        </div>
                        <small>{{ $favorite->product->stock }} in stock</small>
                    </div>
                    <div class="product-actions">
                        <form method="POST" action="{{ route('customer.cart.store', $favorite->product) }}">
                            @csrf
                            <button class="button primary" type="submit">Add to bag</button>
                        </form>
                        <form method="POST" action="{{ route('customer.favorites.destroy', $favorite) }}">
                            @csrf
                            @method('DELETE')
                            <button class="button ghost" type="submit">Remove</button>
                        </form>
                    </div>
                </div>
            </article>
        @empty
            <p class="empty-state">No favorites yet.</p>
        @endforelse
    </section>
@endsection