@extends('layouts.app')

@section('content')
<div class="container py-5">
    <h2 class="mb-4 text-center fw-bold">My Favorite Ads</h2>

    @if ($favorites->count())
        <div class="row g-4">
            @foreach ($favorites as $ad)
                <div class="col-12 col-sm-6 col-md-4">
                    <div class="card h-100 shadow-sm border-0 rounded-3 ad-card">
                        <!-- Ad Image -->
                        <div class="ratio ratio-4x3">
                            <img src="{{ $ad->images->first()->image_path ? asset('storage/' . $ad->images->first()->image_path) : asset('storage/app/public/product_images/default.png') }}"
                                class="card-img-top object-fit-cover rounded-top"
                                alt="Ad Image"
                                onerror="this.onerror=null; this.src='{{ asset('storage/app/public/product_images/default.png') }}';">
                        </div>

                        <!-- Card Body -->
                        <div class="card-body d-flex flex-column p-3">
                            <h5 class="card-title text-truncate fw-semibold">{{ $ad->title ?? 'Untitled Ad' }}</h5>
                            <p class="text-primary fs-5 fw-bold mb-2">
                                {{ config('app.currency_symbol') . number_format($ad->price, 2) }}
                            </p>

                            <div class="mt-auto">
                                <a href="{{ route('ads.show', $ad->slug) }}" class="btn btn-sm btn-primary w-100">
                                    View Details
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Pagination -->
        <div class="mt-4 d-flex justify-content-center">
            {{ $favorites->links('pagination::bootstrap-5') }}
        </div>
    @else
        <div class="text-center text-muted py-5">
            <i class="bi bi-heart fs-1 d-block mb-3"></i>
            <p class="fs-5">You haven’t added any favorites yet.</p>
        </div>
    @endif
</div>

<!-- Custom CSS -->
<style>
    .ad-card {
        transition: all 0.3s ease-in-out;
    }
    .ad-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    }
    .object-fit-cover {
        object-fit: cover;
    }
</style>
@endsection