{{-- resources/views/backend/users/details/purchase_table.blade.php --}}
<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-bordered 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 class="bg-light">
                @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>
                            @php
                                $OrderbadgeColor = [
                                    'pending' => 'warning',
                                    'received' => 'success',
                                    'confirmed' => 'info',
                                ];

                                $Orderstatus = $order->status->getValue();
                                $OrderbadgeColor = $OrderstatusColors[$Orderstatus] ?? 'secondary';
                            @endphp

                            <td>
                                <span class="badge bg-{{ $OrderbadgeColor }} text-white">
                                    {{ ucfirst($order->status->label()) }}
                                </span>
                            </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>

<script>
    $(function () {
        const $form = $('#purchase_filter_form');
        const $tableContainer = $('#purchase_table_container'); // Ensure this ID wraps the table

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

        // Search on Enter
        $('#purchase_search').on('keypress', function (e) {
            if (e.which === 13) {
                e.preventDefault();
                reload();
            }
        });

        // 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() {
            const baseUrl = "{{ route('admin.users.tab.purchases', ['type' => $module_type, 'id' => $user->id]) }}";
            loadTable(baseUrl);
        }

        function loadTable(url) {
            $.get(url, $form.serialize(), function (resp) {
                if (resp.html) {
                    $tableContainer.html(resp.html);
                }
            }).fail(function () {
                alert('Failed to load data. Please try again.');
            });
        }
    });
</script>