@if($paginator->total() > 25)
<div class="flex flex-col lg:flex-row items-center justify-between">
    <div class="flex items-center gap-3 min-w-[200px]">
        <div class="dataTables_length" id="datatable_length">
            <label>{{ __('forms.lbl_show') }}
                <select name="per_page_visual" aria-controls="datatable" class="custom-select w-max per-page">
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="-1">{{ __('forms.lbl_all') }}</option>
                </select>
                {{-- this over engineering is done to accomodate two tables in one page
                and to make their corresponding select work individually --}}
                <select name="per_page" class="hidden">
                    <option value="25" {{ request('per_page') == 25 ? "selected" : ""}}>25</option>
                    <option value="50" {{ request('per_page') == 50 ? "selected" : ""}}>50</option>
                    <option value="100" {{ request('per_page') == 100 ? "selected" : ""}}>100</option>
                    <option value="-1" {{ request('per_page') == -1 ? "selected" : ""}}>{{ __('forms.lbl_all') }}</option>
                </select>
                {{ __('forms.lbl_entries') }}
            </label>
        </div>
    </div>
    <div class="flex items-center gap-5">
        <nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="pagination">
            <div class="paginate_button page-item previous {{ $paginator->onFirstPage() ? 'disabled' : '' }}">
                <a class="pagination-btn {{ $paginator->onFirstPage() ? 'disabled' : '' }}"
                    href="{{ $paginator->onFirstPage() ? '' : $paginator->previousPageUrl() }}">
                    <x-svg-icon icon="icon-arrow-left" />
                    <p class="text-sm font-semibold">{{ trans('forms.lbl_previous') }}</p>
                </a>
            </div>
            @foreach ($elements as $element)
                {{-- "Three Dots" Separator --}}
                @if (is_string($element))
                    <div class="paginate_button page-item disabled">
                        <a class="page-link disabled">{{ $element }}</a>
                    </div>
                @endif

                {{-- Array Of Links --}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        <div class="paginate_button page-item {{ $page == $paginator->currentPage() ? 'active' : '' }}" data-url="{{ $url }}" data-page="{{ $paginator->currentPage() }}">
                            @if ($page == $paginator->currentPage())
                                <a class="page-link disabled">
                                    {{ $page }}
                                </a>
                            @else
                                <a href="{{ $url }}" class="page-link">
                                    {{ $page }}
                                </a>
                            @endif
                        </div>
                    @endforeach
                @endif
            @endforeach
            <div class="paginate_button page-item next {{ $paginator->hasMorePages() ? '' : 'disabled' }}">
                <a class="pagination-btn {{ $paginator->hasMorePages() ? '' : 'disabled' }}"
                    href="{{ $paginator->hasMorePages() ? $paginator->nextPageUrl() : '' }}">
                    <p class="text-sm font-semibold">{{ trans('forms.lbl_next') }}</p>
                    <x-svg-icon icon="icon-arrow-right" />
                </a>
            </div>
        </nav>
    </div>
</div>
@endif
@push('component-scripts')
    <script type="text/javascript">
        $(document).off('change').on('change', 'select[name="per_page_visual"]', function() {
            let selected = $(this).val();
            let paginationWrapper = $(this).closest('.laravel-pagination');
            $('select[name="per_page"] option[value='+selected+']').prop('selected', true);
            let elmentId = '#' + paginationWrapper.attr('id');

            // if total page is less than current page then set current page to last page
            let currentPage = paginationWrapper.find('.paginate_button.active').data('page');
            let currentPageUrl = paginationWrapper.find('.paginate_button.active').data('url');
            let totalPage = Math.max(1, Math.ceil({{ $paginator->total() }} / selected));
            if(currentPage > totalPage){
                currentPage = totalPage;
                currentPageUrl = currentPageUrl.replace(/page=\d+/, 'page=' + currentPage);
            }

            if (currentPageUrl) {
                getItems($(elmentId), currentPageUrl).then(function () {
                    $(elmentId).find('select[name="per_page_visual"] option[value='+selected+']').prop('selected', true);
                });
            }
        });
        $("body").on("click", ".pagination a", function(event) {

            event.preventDefault();

            let url = $(this).attr('href');
            let elmentId = '#' + $(this).closest('.laravel-pagination').attr('id');
            let selected = $(elmentId).find('select[name="per_page_visual"]').val();

            getItems($(this).parents(elmentId), url).then((response) => {
                $(elmentId).find('select[name="per_page_visual"] option[value='+selected+']').prop('selected', true);
                if(elmentId == '#light-gallery-with-initsort'){
                    initSortFeature();
                }
            });

        });
    </script>
@endpush