@props(['paginator'])

@if($paginator->hasPages())
    <div class="row mb-4 align-items-center" id="pagination-element">
        <div class="col-sm">
            <div class="text-muted text-center text-sm-start">
                نمایش
                <span class="fw-semibold">{{ $paginator->firstItem() ?? 0 }}</span>
                تا
                <span class="fw-semibold">{{ $paginator->lastItem() ?? 0 }}</span>
                از
                <span class="fw-semibold">{{ $paginator->total() }}</span>
                نتیجه
            </div>
        </div>

        <div class="col-sm-auto mt-3 mt-sm-0">
            <div class="pagination-wrap hstack gap-2 justify-content-center">

                {{-- Previous Page --}}
                @if ($paginator->onFirstPage())
                    <span class="page-item pagination-prev disabled">
                        <i class="mdi mdi-chevron-right align-middle"></i>
                    </span>
                @else
                    <a class="page-item pagination-prev"
                       href="{{ $paginator->previousPageUrl() }}">
                        <i class="mdi mdi-chevron-right align-middle"></i>
                    </a>
                @endif

                {{-- Page Numbers --}}
                <ul class="pagination listjs-pagination mb-0">
                    @php
                        $current = $paginator->currentPage();
                        $last = $paginator->lastPage();

                        $start = max(1, $current - 2);
                        $end = min($last, $current + 2);
                    @endphp

                    {{-- First Page --}}
                    @if($start > 1)
                        <li class="{{ 1 == $current ? 'active' : '' }}">
                            <a class="page"
                               href="{{ $paginator->url(1) }}"
                               data-i="1"
                               data-page="10">
                                1
                            </a>
                        </li>
                        @if($start > 2)
                            <li class="disabled"><span class="page">...</span></li>
                        @endif
                    @endif

                    {{-- Middle Pages --}}
                    @for ($page = $start; $page <= $end; $page++)
                        <li class="{{ $page == $current ? 'active' : '' }}">
                            <a class="page"
                               href="{{ $page == $current ? '#' : $paginator->url($page) }}"
                               data-i="{{ $page }}"
                               data-page="10">
                                {{ $page }}
                            </a>
                        </li>
                    @endfor

                    {{-- Last Page --}}
                    @if($end < $last)
                        @if($end < $last - 1)
                            <li class="disabled"><span class="page">...</span></li>
                        @endif
                        <li class="{{ $last == $current ? 'active' : '' }}">
                            <a class="page"
                               href="{{ $paginator->url($last) }}"
                               data-i="{{ $last }}"
                               data-page="10">
                                {{ $last }}
                            </a>
                        </li>
                    @endif
                </ul>

                {{-- Next Page --}}
                @if ($paginator->hasMorePages())
                    <a class="page-item pagination-next"
                       href="{{ $paginator->nextPageUrl() }}">
                        <i class="mdi mdi-chevron-left align-middle"></i>
                    </a>
                @else
                    <span class="page-item pagination-next disabled">
                        <i class="mdi mdi-chevron-left align-middle"></i>
                    </span>
                @endif

            </div>
        </div>
    </div>
@endif