@extends('user.layouts.main')

@section('contents')
<div class="dashboard_wrapper border_start p-3">
    <div class="listings_wrap">
        <div class="mb-4 d-flex justify-content-between align-items-center">
            <h4 class="page_title">Mark Ad as Sold</h4>
        </div>

        <div class="card">
            <div class="card-body">
                {{-- Buyer Search Form --}}
                <form id="markSoldForm" method="POST" action="{{ route('user.trades.markSold', $ad->id) }}">
                    @csrf

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

                    <button type="submit" class="btn btn-success">Mark as Sold</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#buyer_search').on('input', function() {
        let query = $(this).val();

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

        $.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>`);
                }
            }
        });
    });

    $(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