@extends('layouts.master')

@section('title', 'Agency List')

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="mb-0">Agency List</h5>
            <input type="text" id="searchAgency" class="form-control form-control-sm w-25" placeholder="Search agency...">
        </div>

        <div class="card-body">
            <table class="table table-bordered text-center align-middle">
                <thead class="table-light">
                    <tr>
                        <th>SL</th>
                        <th>Logo</th>
                        <th>Name</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="agencyTableBody">
                    @include('admin.transaction.partials.agency_rows', ['agencies' => $agencies])
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function() {
            let debounceTimer;

            $('#searchAgency').on('keyup', function() {
                clearTimeout(debounceTimer);
                var query = $(this).val();

                // Only send request if input is 3 or more characters
                if (query.length >= 3 || query.length === 0) {
                    debounceTimer = setTimeout(function() {
                        $.ajax({
                            url: "{{ route('transaction.agency_list') }}",
                            type: "GET",
                            data: {
                                query: query
                            },
                            success: function(response) {
                                $('#agencyTableBody').html(response.html);
                            },
                            error: function(xhr) {
                                console.error(xhr.responseText);
                            }
                        });
                    }, 300); // 300ms debounce
                }
            });
        });
    </script>
@endsection