@php
    $isFavorited = in_array($ad->id, $favoriteAdIds ?? []);
@endphp
{{-- <a href="{{ route('ads.show', ['slug' => $ad->slug, 'ad' => $ad->id]) }}">
    {{ $ad->title }}
</a> --}}
<div class="product-card shadow-sm h-100 {{ $isFavorited ? 'favorited' : '' }}">
    <a href="{{ route('ads.show', $ad->slug) }}" class="text-decoration-none h-100 d-flex flex-column">
        <div class="product-img-wrapper ">
            @if ($ad->images->count() > 0)
                <img src="{{ asset('storage/' . $ad->images->first()->image_path) }}" class="product-img"
                    alt="{{ $ad->title }}" loading="lazy"
                    onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">
            @else
                <img src="{{ asset('storage/product_images/default.png') }}" class="product-img" alt="No Image">
            @endif

            {{-- <span class="wishlist-icon favorite-btn {{ $isFavorited ? 'active' : '' }}" data-ad-id="{{ $ad->id }}"
                data-bs-toggle="tooltip" title="{{ $isFavorited ? 'Remove from wishlist' : 'Add to wishlist' }}">
                <i class="bi {{ $isFavorited ? 'bi-heart-fill' : 'bi-heart' }}"></i>
            </span> --}}

            @if (isset($ad->condition) && $ad->condition)
                <span
                    class="position-absolute bottom-0 start-0 m-2 badge bg-{{ $ad->condition == 'new' ? 'success' : 'info' }}">
                    {{ ucfirst($ad->condition) }}
                </span>
            @endif
        </div>

        <div class="product-info p-3 flex-grow-1">
            <h6 class="text-dark mb-2 fw-semibold text-truncate">{{ $ad->title ?? 'Untitled' }}</h6>

            <div class="d-flex flex-wrap align-items-center gap-2 mb-2 small text-muted">
                <span><i class="bi bi-geo-alt-fill"></i> {{ $ad->state ?? 'N/A' }}</span>
                <span><i class="bi bi-clock"></i> {{ $ad->created_at->diffForHumans() }}</span>
            </div>

            <div class="d-flex justify-content-between align-items-center mt-auto pt-2">
                <div>
                    @if ($ad->is_free)
                        <span class="h5 fw-bold text-success mb-0">FREE</span>
                    @else
                        <span class="h5 fw-bold text-primary mb-0">
                            {{ config('app.currency_symbol', '$') }}{{ number_format($ad->price, 2) }}
                        </span>
                    @endif
                </div>

                <div class="d-flex gap-2">
                    {{-- <button class="btn btn-sm btn-outline-secondary share-btn" data-ad-id="{{ $ad->id }}"
                        data-ad-title="{{ $ad->title }}" data-ad-url="{{ route('ads.show', $ad->slug) }}"
                        data-bs-toggle="tooltip" title="Share">
                        <i class="bi bi-share"></i>
                    </button> --}}

                    <button class="btn btn-sm favorite-btn {{ $isFavorited ? 'btn-danger' : 'btn-outline-danger' }}"
                        data-ad-id="{{ $ad->id }}">
                        <i class="bi {{ $isFavorited ? 'bi-heart-fill' : 'bi-heart' }}"></i>
                        <span class="d-none d-sm-inline">{{ $isFavorited ? 'Favorited' : 'Favorite' }}</span>
                    </button>
                </div>
            </div>
        </div>
    </a>
</div>