@if (method_exists($data, 'total'))
<div class="pagination-wrap">
	<div class="col-lg-12">
        <div class="d-flex justify-content-between align-items-center my-3 pagination-info">
            <div class="d-flex align-items-center">
                <div class="me-3">
                    @if(isset($data) && method_exists($data, 'total'))
                        Total records: {{ $data->total() }}
                    @endif
                </div>
            </div>
            <div class="d-flex align-items-center justify-content-end gap-3 pagination-info-inner">
                <div class="d-flex align-items-center per-page-select">
                    <label for="itemsPerPage" class="form-label mb-0 me-2">Items per page:</label>
                    <select id="itemsPerPage" class="form-select form-select-sm select2 no-search" style="width: auto;" onchange="changeItemsPerPage(this.value)">
                        @foreach([10, 25, 50, 100, 500, 1000] as $perPage)
                            <option value="{{ $perPage }}" {{ request('offset', config('settings.per_page_record', 30)) == $perPage ? 'selected' : '' }}>{{ $perPage }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="{{ request()->ajax() ? 'ajax-pagination' : '' }} pagination-links">
                    {{ $data->appends(request()->input())->links() }}
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function changeItemsPerPage(perPage) {
        let url = new URL(window.location.href);
        url.searchParams.set('offset', perPage);
        if (url.searchParams.has('page')) {
            url.searchParams.delete('page');
        }
        window.location.href = url.toString();
    }
</script>
@endif