@push('style')

<style>
                .badge {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 0.25rem;
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}


.badge-premium { background-color: #FFD700; color: #000; }
.badge-top { background-color: #FFA500; color: #fff; } /* darker gold / orange */
.badge-featured { background-color: #C0C0C0; color: #000; }
</style>
@endpush
<div class="listing_item mb-2 rounded position-relative @if ($ads?->featured && $ads?->status=='active' && $ads?->verification_status=='verified') verified_item @else bg-white @endif">
    <div class="listing_badge position-absolute top-0 end-0 m-2">
 @if(in_array($ads?->featured,[1,2,3]))
        @if($ads?->featured == 1)
                   <span class="badge badge-featured">Silver</span>
        @elseif($ads?->featured == 2)
                   <span class="badge badge-top">Gold</span>
        @elseif($ads?->featured == 3 )
            <span class="badge badge-premium">Premium</span>
        @endif
        {{-- {{dd($ads->featured) }} --}}
@endif
</div>

    <div
        class="status_tag @if($ads?->status=='info') info @elseif($ads->featured) primary @else
        @switch($ads?->status)
            @case('pending')
                warning
                @break
            @case('sold')
                info
            @break
        @endswitch
        @endif">
        <span>{{ ucfirst($ads?->status) }}</span>
    </div>
    <!-- If nee class d-block stretched-link-->
    <div class="d-flex position-relative w-100">
        <a href="{{ route('ads.details', ['location' => $ads?->city_slug, 'category' => $ads?->category_slug, 'scategory' => $ads->subcategory_slug, 'slug' => $ads?->slug]) }}"
            class="listing_img">
            <img src="{{ getPhoto($ads?->thumbnail) }}" class="me-3" alt="{{ $ads?->title }}">
        </a>
        <div class="listing_content w-100 overflow-hidden">
            <a
                href="{{ route('ads.details', ['location' => $ads?->city_slug, 'category' => $ads?->category_slug, 'scategory' => $ads->subcategory_slug, 'slug' => $ads?->slug]) }}">
                <h2 class="mb-1 listing_name">{{ $ads?->title }}</h2>
            </a>
            <!--<div class="car_info mb-1">62.000 km</div>-->
             
            <div class="listing_tag mb-1 d-sm-flex align-items-center">
                {{-- <div class="member me-3 text-uppercase">
                    <i class="fa fa-star"></i>
                    Member
                </div> --}}
              

                @if ($user?->is_verified_seller == '1')
                    <div class="verified text-uppercase">
                        <i class="fa fa-check-square"></i>
                        Verified Seller
                    </div>
                @endif
                 <div class="view_count mb-1 d-sm-flex align-items-center">
                    <span class="text-muted"> Views: {{ $ads?->total_views ?? 0 }}</span>
                </div>
            </div>
            <div class="listing_info mb-1">{{ $ads?->belongsToRegion?->name }}, {{ $ads?->belongsToCategory?->name }}</div>
           @if ($ads->category_slug && $ads->category_slug != 'jobs')
    @php
        $priceExists = $ads->price && $ads->price > 0;
        $isNegotiable = $ads->negotiable == '1';
    @endphp

    @if ($priceExists || $isNegotiable)
        <div class="listing_price">
            @if ($priceExists)
                    {{ $setting?->currency_symbol }} {{ $ads->price }}
            @endif

            @if ($isNegotiable)
                    @if ($priceExists)
                        (Negotiable)
                    @else
                        Negotiable
                    @endif
            @endif
        </div>
    @endif
@endif

            <div class="mt-2">
                @if ($ads?->status == 'pending' || $ads?->status == 'active')
                    <a href="{{ route('user.ads.edit', ['id' => $ads?->id]) }}" class="text-primary me-2"><i
                            class="fas fa-edit"></i> Edit</a>
                @endif
                {{-- <a href="{{route('user.ads.delete', ['id'=>$ads?->id])}}" class="text-danger me-3"><i class="fas fa-trash"></i> Delete</a> --}}
                @if ($ads?->status == 'pending' || $ads?->status == 'active')   
                    <a type="button" class="text-success me-2" data-bs-toggle="modal" data-bs-target="#markSoldModal" data-ad-id="{{ $ads->id }}">
                       <i
                            class="fa-regular fa-square"></i> Mark as Sold
                    </a>
                @endif
                @if ($ads?->verification_status == 'verified' && $ads?->status == 'pending')
                    <a onclick="return confirm('Are you sure to perform this action?')"
                        href="{{ route('user.ads.active', ['id' => $ads?->id]) }}" class="text-success"><i
                            class="fa-regular fa-square"></i> Mark as Active</a>
                @endif
                @if ($ads?->verification_status == 'verified' && $ads?->status == 'active')
                    <a onclick="return confirm('Are you sure to perform this action?')"
                        href="{{ route('user.ads.pending', ['id' => $ads?->id]) }}" class="text-success me-2"><i
                            class="fa-regular fa-square"></i> Mark as Pending</a>

                    {{-- <a onclick="return confirm('Are you sure to perform this action?')"
                        href="{{ route('user.ads.featured', $ads?->featured!=1 ? ['id' => $ads?->id] : ['id' => $ads?->id,'remove-featured']) }}" class="text-info"><i
                            class="fa-regular fa-square"></i> {{ $ads?->featured!=1 ? 'Mark as Featured' : 'Remove from Featured' }} </a> --}}

                @endif
                    <a href="{{ route('user.ads.sdelete',$ads->id) }}" class="text-danger"> <i class="fas fa-trash"></i> Delete</a>
            </div>
            @if ($ads?->verification_status == 'declined' && !empty($ads?->feedback))
    <div class="mt-2 rounded border border-danger bg-light p-2">
        <small class="text-danger">
            <i class="fas fa-exclamation-circle"></i>
            <strong>Rejected Reason:</strong> {{ $ads->feedback }}
            <br>Note: Please edit your ad and resubmit for review.
        </small>
    </div>
@endif

            <div class="date text-end">{{ $ads?->created_at->diffForHumans(['parts' => 2]) }}</div>

        </div>
    </div>
</div>
<!-- Mark Sold Modal -->
<div class="modal fade" id="markSoldModal" tabindex="-1" aria-labelledby="markSoldModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="markSoldForm" method="POST" action="">
                @csrf
                <div class="modal-header">
                    <h5 class="modal-title" id="markSoldModalLabel">Mark Ad as Sold</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="mb-3">
                        <label for="buyer_search" class="form-label">Select Buyer</label>
                        <input type="text" id="buyer_search" class="form-control" placeholder="Search buyer by name, email or phone">
                        <input type="hidden" name="receiver_id" id="receiver_id">
                        <div id="buyer_list" class="list-group mt-1"></div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Mark as Sold</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
</div>
@push('scripts')
<script>
    let debounceTimer;

$(document).ready(function() {

    // When modal opens, set the form action dynamically
    $('#markSoldModal').on('show.bs.modal', function(event) {
        let button = $(event.relatedTarget);
        let adId = button.data('ad-id');
        let form = $(this).find('#markSoldForm');

        // Ensure POST method and proper action
        form.attr('method', 'POST');
        form.attr('action', `/user/trades/${adId}/mark-sold`);

        // Clear previous selections
        $('#buyer_search').val('');
        $('#receiver_id').val('');
        $('#buyer_list').empty();
    });

        // Debounce AJAX search
        $(document).off('input', '#buyer_search').on('input', '#buyer_search', function () {
        clearTimeout(debounceTimer);
        let query = $(this).val().trim();

        if (query.length < 2) {
            $('#buyer_list').empty();
            return;
        }

        debounceTimer = setTimeout(function () {
            $.ajax({
                url: "{{ route('user.ads.buyerSearch') }}",
                type: "GET",
                data: { query: query },
                success: function (data) {
                    $('#buyer_list').empty();
                    if (data.length > 0) {
                        data.forEach(function (user) {
                            $('#buyer_list').append(
                                `<a href="#" class="list-group-item list-group-item-action buyer-item" data-id="${user.id}">${user.name} (${user.email})</a>`
                            );
                        });
                    } else {
                        $('#buyer_list').append(`<div class="list-group-item disabled">No users found</div>`);
                    }
                }
            });
        }, 300);
    });
    // Select buyer from list
    $(document).on('click', '.buyer-item', function(e) {
        e.preventDefault();
        let name = $(this).text();
        let id = $(this).data('id');
        $('#buyer_search').val(name);
        $('#receiver_id').val(id);
        $('#buyer_list').empty();
    });
});
</script>
@endpush