@if ($paginator->hasPages())
{{--
    Ebda Admin — Modern Pagination Component
    RTL-aware · Tailwind CSS · SaaS-grade UX
    v2 — Accessibility + Alignment + Ellipsis polish
--}}
<nav role="navigation" aria-label="Pagination" dir="rtl"
     class="flex items-center justify-between gap-4 px-1 py-1 select-none">

    {{-- ── معلومات النتائج — self-center يضمن المحاذاة الرأسية مع الأزرار ── --}}
    <div class="self-center text-sm text-gray-500 font-medium hidden sm:flex items-center gap-1 leading-none">
        <span class="text-gray-800 font-bold tabular-nums">{{ $paginator->firstItem() }}</span>
        <span class="text-gray-400">–</span>
        <span class="text-gray-800 font-bold tabular-nums">{{ $paginator->lastItem() }}</span>
        <span class="text-gray-400 mx-0.5">من</span>
        <span class="text-gray-800 font-bold tabular-nums">{{ $paginator->total() }}</span>
        <span class="text-gray-500">نتيجة</span>
    </div>

    {{-- ── أزرار الترقيم ── --}}
    <div class="flex items-center gap-1">

        {{-- ── زر السابق ── --}}
        @if ($paginator->onFirstPage())
            {{-- Disabled --}}
            <span aria-disabled="true" aria-label="الصفحة السابقة"
                  class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg border border-gray-200
                         bg-gray-50 text-gray-300 text-sm font-semibold cursor-not-allowed select-none">
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2.5"
                     stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M9 18l6-6-6-6"/>
                </svg>
                السابق
            </span>
        @else
            <a href="{{ $paginator->previousPageUrl() }}" rel="prev" aria-label="الصفحة السابقة"
               class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg border border-gray-200
                      bg-white text-[#1e3a8a] text-sm font-semibold shadow-sm
                      hover:bg-blue-50 hover:border-blue-200 hover:shadow-md
                      transition-all duration-200 ease-in-out group">
                <svg class="w-4 h-4 flex-shrink-0 transition-transform duration-200 group-hover:translate-x-0.5"
                     fill="none" stroke="currentColor" stroke-width="2.5"
                     stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M9 18l6-6-6-6"/>
                </svg>
                السابق
            </a>
        @endif

        {{-- ── أرقام الصفحات + Ellipsis ── --}}
        @foreach ($elements as $element)

            {{-- ─── Ellipsis "..." ─── --}}
            @if (is_string($element))
                <span aria-hidden="true"
                      class="inline-flex items-center justify-center w-9 h-9 text-sm text-gray-400
                             font-bold rounded-lg select-none pointer-events-none pb-1 tracking-widest">
                    {{ $element }}
                </span>
            @endif

            {{-- ─── أرقام الصفحات ─── --}}
            @if (is_array($element))
                @foreach ($element as $page => $url)
                    @if ($page == $paginator->currentPage())
                        {{-- الصفحة الحالية --}}
                        <span aria-current="page" aria-label="الصفحة {{ $page }}، الحالية"
                              class="inline-flex items-center justify-center w-9 h-9 rounded-lg
                                     bg-[#1e3a8a] text-white text-sm font-black shadow-sm shadow-blue-900/20
                                     select-none cursor-default tabular-nums">
                            {{ $page }}
                        </span>
                    @else
                        {{-- لون text-gray-700 أعمق لتحسين Accessibility WCAG AA --}}
                        <a href="{{ $url }}" aria-label="الانتقال إلى الصفحة {{ $page }}"
                           class="inline-flex items-center justify-center w-9 h-9 rounded-lg border border-gray-200
                                  bg-white text-gray-700 text-sm font-semibold shadow-sm tabular-nums
                                  hover:bg-blue-50 hover:border-blue-300 hover:text-[#1e3a8a] hover:shadow-md
                                  transition-all duration-200 ease-in-out">
                            {{ $page }}
                        </a>
                    @endif
                @endforeach
            @endif
        @endforeach

        {{-- ── زر التالي ── --}}
        @if ($paginator->hasMorePages())
            <a href="{{ $paginator->nextPageUrl() }}" rel="next" aria-label="الصفحة التالية"
               class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg border border-gray-200
                      bg-white text-[#1e3a8a] text-sm font-semibold shadow-sm
                      hover:bg-blue-50 hover:border-blue-200 hover:shadow-md
                      transition-all duration-200 ease-in-out group">
                التالي
                <svg class="w-4 h-4 flex-shrink-0 transition-transform duration-200 group-hover:-translate-x-0.5"
                     fill="none" stroke="currentColor" stroke-width="2.5"
                     stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M15 18l-6-6 6-6"/>
                </svg>
            </a>
        @else
            {{-- Disabled --}}
            <span aria-disabled="true" aria-label="الصفحة التالية"
                  class="inline-flex items-center gap-1.5 px-3.5 py-2 rounded-lg border border-gray-200
                         bg-gray-50 text-gray-300 text-sm font-semibold cursor-not-allowed select-none">
                التالي
                <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="2.5"
                     stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
                    <path d="M15 18l-6-6 6-6"/>
                </svg>
            </span>
        @endif

    </div>
</nav>
@endif