@if ($ads->count() > 0)
    @foreach ($ads as $index => $ad)
        <div class="col-md-4 col-sm-6">
            <a href="{{ route('ads.show', $ad->slug) }}" class="lp-product-link">
                <div class="lp-product-card">
                    <div class="lp-product-img-wrapper">
                        @if ($ad->images->count() > 0)
                            <img src="{{ asset('storage/' . $ad->images->first()->image_path) }}" class="lp-product-img"
                                alt="User Profile Image" loading="lazy"
                                onerror="this.onerror=null; this.src='{{ asset('storage/product_images/default.png') }}';">
                        @else
                            <img src="{{ asset('storage/product_images/default.png') }}" class="card-img-top"
                                alt="No Image">
                        @endif
                    </div>
                    <div class="lp-product-info">
                        <h5 class="lp-product-name">{{ $ad->title ?? '' }}</h5>
                        <p class="lp-product-location">State: {{ $ad->state ?? '' }}</p>
                        <p class="lp-product-upload-time">Uploaded: {{ $ad->created_at }}</p>
                        <span class="lp-product-price">
                            Price: {{ config('app.currency_symbol') }} {{ number_format($ad->price, 2) }}
                        </span>
                    </div>
                </div>
            </a>
        </div>

        @if (($index + 1) % 12 == 0)
            <div class="col-12">

            </div>
        @endif
    @endforeach


    {{ $ads->links('pagination::bootstrap-5') }}
@else
    <div class="col-12 text-center my-4">
        <p class="text-muted fs-5">No ads available at the moment.</p>
    </div>
@endif