Laravel And Alpinej.js Pagination Component ,Alpine js

Laravel And Alpine Pagination

<div class="container-fluid">
    <div class="row">
        <!-- /.col-md-6 -->
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <div class="row" id="laravelPagination" data-url="{{ route('country.page') }}" x-data="laravelPagination()"
                        x-init="init()">
                        <template x-for="item in country" :key="item.id">
                            <div class="card col-12 mb-3">
                                <div class="card-body">
                                    {{-- <h5 class="card-title mb-0" x-text="item.name"></h5> --}}
                                    <div x-text="item.name"></div>
                                </div>
                            </div>
                        </template>

                        <nav class="navbar navbar-expand-lg p-0 mb-5">

                            <ul class="pagination mb-0">

                                <li class="page-item" :class="{'disabled': 1 == pagination.current_page }">
                                    <a href="javascript:void(0)" class="page-link" aria-label="Previous"
                                        @click.prevent="changePage(pagination.current_page - 1)">
                                        <span>Previous</span>
                                    </a>
                                </li>

                                <template x-for="page in pagesNumber()">
                                    <li class="page-item" :class="{'active': page == current_page}">
                                        <a href="javascript:void(0)" class="page-link" @click.prevent="changePage(page)"
                                            x-text="page"></a>
                                    </li>
                                </template>

                                <li class="page-item"
                                    :class="{'disabled': pagination.last_page == pagination.current_page }">
                                    <a href="javascript:void(0)" aria-label="Next" class="page-link"
                                        @click.prevent="changePage(pagination.current_page + 1)">
                                        <span aria-hidden="true">Next</span>
                                    </a>
                                </li>
                            </ul>
                            <form class="form-inline mx-2 ">

                                <input class="form-control mr-sm-2" type="text" x-model="goto" 
                                 placeholder="Goto" >

                                <input class="form-control mr-sm-2" type="text" @keyup="changePage(1)"  x-model.debounce.500="search" 
                                 placeholder="Search" aria-label="Search">

                                <button class="btn btn-outline-success my-2 my-sm-0" type="submit"
                                    @click.prevent="gotopages()">Go</button>
                            </form>
                        </nav>


                    </div>
                </div>
            </div>
        </div>
        <!-- /.col-md-6 -->
    </div>
    <!-- /.row -->
</div>

 <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
 
 <script>
    function laravelPagination() {
        return {
            path: document.getElementById('laravelPagination').dataset.url ,
            country : [],
            pagination:{} ,
            offset: 4,
            pages : [],
            goto : null ,
            search : null ,
            gotopages(){
                if(this.goto && this.goto  <= this.pagination.last_page) {
                    this.changePage(this.goto);
                }
            },
            pagesNumber() {

                if (!this.pagination.to) {
                    return [];
                }

                let from = this.pagination.current_page - this.offset;

                if (from < 1) {
                    from = 1;
                }
                let to = from + (this.offset * 2);

                if (to >= this.pagination.last_page) {

                    to = this.pagination.last_page;

                }

                let pagesArray = [];

                for (let page = from; page <= to; page++) {
                    pagesArray.push(page);
                }
        
                return pagesArray;

            },
            changePage(number){

                showLoader(); 

                let self = this;

                number =  number ? number : localStorage.getItem('current_page' , number) ;

                console.log(this.buildUrl(number));

                return fetch(`${this.path}?page=${number}`).then(function (response) {
                    return response.json();
                }).then(function (res) {

                    self.pagination = res.data;

                    self.current_page = res.data.current_page;

                    self.country = res.data.data;

                    self.pages = self.pagesNumber();

                    self.goto = null;

                    localStorage.setItem('current_page' , number);

                    stopLoader();

                    return res ;       

                }).catch(console.error);

            },
            buildUrl(page = 1){
               const params = new URLSearchParams({
                    page : page ,
                    search: this.search,
                });

                return params.toString();
            },
            init() {

                let self = this;    


                this.changePage(this.pagination.current_page);


            }
        }
    }
</script>