@php
    $user = auth()->user();
    $isFavorite = false;

    if ($user) {
        $isFavorite = \App\Models\Favorite::where('user_id', $user->id)
            ->where('ads_id', $ad->id)
            ->exists();
    }
@endphp

<div class="card pro-card position-relative @if($ad?->featured && $ad?->status=='active' && $ad?->verification_status=='verified') verified_item @endif">
    
    {{-- Favorite Icon (outside the anchor) --}}
    <button
        type="button"
        class="btn btn-sm p-0 border-0 bg-transparent position-absolute top-0 end-0 m-2"
        onclick="toggleFavorite(this)"
        data-ad-id="{{ $ad->id }}"
        style="position: absolute; z-index: 1050;"
    >
        <i class="{{ $isFavorite ? 'fas fa-heart text-danger' : 'far fa-heart text-muted' }} fs-5"></i>
    </button>

    {{-- Ad Link & Content --}}
    <a href="{{ route('ads.details', ['location' => $ad->city_slug, 'category' => $ad->category_slug, 'scategory' => $ad->subcategory_slug, 'slug' => $ad->slug]) }}" class="d-block stretched-link"></a>
    
    <img src="{{ getPhoto($ad->thumbnail) }}" alt="{{ $ad->slug }}" class="card-img-top img-fluid rounded">
    <div class="card-body">
        <h5 class="card-title pro-price">{{ $setting?->currency_symbol }} {{ $ad?->price }}</h5>
        <p class="card-text pro-title">{{ $ad?->title }}</p>
        <p class="card-text pro-details">{{ $ad?->belongsToRegion?->name }}</p>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>


{{-- AJAX Script --}}
<script>
 function toggleFavorite(button) {
    event.stopPropagation(); // Prevent link click
    event.preventDefault();

    const adId = button.getAttribute('data-ad-id');
    const icon = button.querySelector('i');

    // Toggle visually immediately
    const isFav = icon.classList.contains('fa-heart') && icon.classList.contains('text-danger');
    icon.classList.toggle('fas', !isFav);
    icon.classList.toggle('far', isFav);
    icon.classList.toggle('text-danger', !isFav);
    icon.classList.toggle('text-muted', isFav);

    // AJAX request to backend to toggle favorite
    fetch(`/favorites/toggle/${adId}`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'Accept': 'application/json'
        }
    })
    .then(res => res.json())
    .then(data => {
        if (data.status === 'added') {
            toastr.success(data.message || 'Added to favorites!');
        } else if (data.status === 'removed') {
            toastr.info(data.message || 'Removed from favorites!');
        } else if (data.status === 'nau' || data.status === 'unauthenticated') {
            toastr.warning('Please log in to save favorites.');
        }
    })
    .catch(err => {
        console.error('Error:', err);
        toastr.error('Something went wrong while updating favorites!');
    });
}


</script>