{{-- resources/views/backend/users/details/purchase_table.blade.php --}}
<div id="purchase_table_container">
    <div class="card card-default">
        <div class="card-header justify-content-between align-items-center border-l-warning" style="padding:4px 21px;">
            <h6 class="mb-0 text-capitalize">Purchase Details</h6>
        </div>

        <div class="card-body" style="padding:0 25px 20px;">

            {{-- ==== FILTER FORM (AJAX) ==== --}}
            <form id="purchase_filter_form" method="GET">
                @csrf
                <input type="hidden" name="user_id" value="{{ $user->id }}">
                <input type="hidden" name="type" value="{{ $module_type }}">

                <div
                    class="card-header card-header-border-bottom d-flex justify-content-between align-items-center py-2">
                    <div class="d-flex align-items-center flex-nowrap gap-2">
                        <label for="purchase_entries" class="text-muted fw-bold mb-0">Show</label>
                        <select id="purchase_entries" name="entries" class="form-select form-select-sm custom-select">
                            @foreach([5, 10, 20, 30, 75, 'all'] as $v)
                                <option value="{{ $v }}" {{ request('entries', 10) == $v ? 'selected' : '' }}>
                                    {{ $v === 'all' ? 'All' : $v }}
                                </option>
                            @endforeach
                        </select>
                        <span class="text-muted fw-bold mb-0">entries</span>
                    </div>

                    <div class="col-md-4">
                        <input type="text" class="form-control form-control-sm" id="purchase_search" name="search"
                            value="{{ request('search') }}" placeholder="Search & Enter">
                    </div>
                </div>
            </form>

            <table class="table table-hover">
                <thead class="bg-light">
                    <tr>
                        <th>#</th>
                        <th>Order Code</th>
                        <th class="d-none d-lg-table-cell">Num. of Products</th>
                        <th>Amount</th>
                        <th>Order Status</th>
                    </tr>
                </thead>
                <tbody>
                    @if ($orders->isEmpty())
                        <tr>
                            <td colspan="100%" class="text-center text-muted py-4">No Orders found</td>
                        </tr>
                    @else
                        @php
                            $isPaginated = $orders instanceof \Illuminate\Pagination\LengthAwarePaginator;
                            $startIndex = $isPaginated ? ($orders->currentPage() - 1) * $orders->perPage() : 0;
                        @endphp

                        @foreach ($orders as $loopIndex => $order)
                            @php
                                $serial = $startIndex + $loopIndex + 1;
                            @endphp
                            <tr>
                                <td class="d-none d-md-table-cell">{{ $serial }}</td>
                                <td>
                                    @if (Auth::user()->hasPermission('purchase.orders.view'))
                                        <a href="{{ route('purchase.orders.view', $order->id) }}" class="text-decoration-none">
                                            {{ $order->code }}
                                        </a>
                                    @else
                                        {{ $order->code }}
                                    @endif
                                    <div class="d-sm-none text-muted small mt-1">
                                        {{ $order->user->name ?? 'N/A' }}
                                    </div>
                                </td>
                                <td class="d-none d-lg-table-cell">{{ $order->products_count ?? 0 }}</td>
                                <td>{{ number_format($order->sub_total, 2) }}</td>
                                <td>
                                    {!! purchase_order_status_badge($order->status) !!}
                                </td>
                            </tr>
                        @endforeach
                    @endif
                </tbody>
            </table>

            {{-- ==== PAGINATION & SUMMARY (Only show when paginated) ==== --}}
            <div class="d-flex justify-content-between align-items-center mt-3">
                <p class="text-muted mb-0">
                    @if ($orders instanceof \Illuminate\Pagination\LengthAwarePaginator)
                        Showing {{ $orders->firstItem() }} to {{ $orders->lastItem() }} of {{ $orders->total() }} entries
                    @else
                        Showing {{ $orders->count() }} @if($orders->count() === 1) entry @else entries @endif
                    @endif
                </p>

                @if ($orders instanceof \Illuminate\Pagination\LengthAwarePaginator)
                    {!! $orders->appends(request()->query())->links() !!}
                @endif
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        const $form = $('#purchase_filter_form');
        const $tableContainer = $('#purchase_table_container');

        // Change entries
        $('#purchase_entries').on('change', reload);

        // Search on Enter
        let searchTimer;

        $('#purchase_search').on('keyup', function () {
            clearTimeout(searchTimer);

            searchTimer = setTimeout(function () {
                reload();
            }, 300); // delay in ms
        });


        // Pagination click (delegated)
        $(document).on('click', '#purchase_table_container .pagination a', function (e) {
            e.preventDefault();
            const url = $(this).attr('href');
            loadTable(url);
        });

        // Reload table via AJAX
        function reload() {
            let search = $('#purchase_search').val();
            const baseUrl = "{{ route('admin.users.tab.purchases', ['type' => $module_type, 'id' => $user->id]) }}";
            // Get form data including search value
            const formData = $form.serialize();
            // Construct URL with query parameters
            const url = baseUrl + (formData ? '?' + formData : '');
            loadTable(url);
        }

        function loadTable(url) {
            // Show loader
            $('#section_loader').show();

            $.get(url, function (resp) {
                if (resp.html) {
                    // Replace the entire table container with the new HTML
                    $tableContainer.html(resp.html);
                }
                // Hide loader
                $('#section_loader').hide();
            }).fail(function (xhr) {
                // Show error message
                Botble.showError(xhr.responseJSON?.message || 'Failed to load data');
                // Hide loader
                $('#section_loader').hide();
            });
        }
    });
</script>