@if ($paginator->hasPages())
    <nav class="d-flex justify-items-center justify-content-between align-items-center mt-2">

        {{-- Info teks --}}
        <p style="font-size:13px;color:#64748b;margin:0">
            Menampilkan
            <span style="font-weight:700;color:#1e293b">{{ $paginator->firstItem() }}</span>
            –
            <span style="font-weight:700;color:#1e293b">{{ $paginator->lastItem() }}</span>
            dari
            <span style="font-weight:700;color:#1e293b">{{ $paginator->total() }}</span>
            data
        </p>

        {{-- Tombol pagination --}}
        <ul style="display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0">

            {{-- Prev --}}
            @if ($paginator->onFirstPage())
                <li>
                    <span style="
                        display:inline-flex;align-items:center;justify-content:center;
                        width:34px;height:34px;border-radius:10px;
                        background:#f1f5f9;color:#cbd5e1;
                        font-size:16px;font-weight:700;cursor:not-allowed;
                        border:1.5px solid #e2e8f0;
                    ">‹</span>
                </li>
            @else
                <li>
                    <a href="{{ $paginator->previousPageUrl() }}" rel="prev" style="
                        display:inline-flex;align-items:center;justify-content:center;
                        width:34px;height:34px;border-radius:10px;
                        background:#fff;color:#2b8ef3;
                        font-size:16px;font-weight:700;
                        border:1.5px solid #2b8ef3;
                        text-decoration:none;transition:all 0.2s;
                    "
                    onmouseover="this.style.background='#2b8ef3';this.style.color='#fff'"
                    onmouseout="this.style.background='#fff';this.style.color='#2b8ef3'"
                    >‹</a>
                </li>
            @endif

            {{-- Nomor halaman --}}
            @foreach ($elements as $element)
                @if (is_string($element))
                    <li>
                        <span style="
                            display:inline-flex;align-items:center;justify-content:center;
                            width:34px;height:34px;border-radius:10px;
                            background:#f1f5f9;color:#94a3b8;
                            font-size:13px;font-weight:700;
                            border:1.5px solid #e2e8f0;
                        ">…</span>
                    </li>
                @endif

                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <li>
                                <span style="
                                    display:inline-flex;align-items:center;justify-content:center;
                                    width:34px;height:34px;border-radius:10px;
                                    background:#2b8ef3;color:#fff;
                                    font-size:13px;font-weight:700;
                                    border:1.5px solid #2b8ef3;
                                ">{{ $page }}</span>
                            </li>
                        @else
                            <li>
                                <a href="{{ $url }}" style="
                                    display:inline-flex;align-items:center;justify-content:center;
                                    width:34px;height:34px;border-radius:10px;
                                    background:#fff;color:#475569;
                                    font-size:13px;font-weight:600;
                                    border:1.5px solid #e2e8f0;
                                    text-decoration:none;transition:all 0.2s;
                                "
                                onmouseover="this.style.background='#e6f0ff';this.style.borderColor='#2b8ef3';this.style.color='#2b8ef3'"
                                onmouseout="this.style.background='#fff';this.style.borderColor='#e2e8f0';this.style.color='#475569'"
                                >{{ $page }}</a>
                            </li>
                        @endif
                    @endforeach
                @endif
            @endforeach

            {{-- Next --}}
            @if ($paginator->hasMorePages())
                <li>
                    <a href="{{ $paginator->nextPageUrl() }}" rel="next" style="
                        display:inline-flex;align-items:center;justify-content:center;
                        width:34px;height:34px;border-radius:10px;
                        background:#fff;color:#2b8ef3;
                        font-size:16px;font-weight:700;
                        border:1.5px solid #2b8ef3;
                        text-decoration:none;transition:all 0.2s;
                    "
                    onmouseover="this.style.background='#2b8ef3';this.style.color='#fff'"
                    onmouseout="this.style.background='#fff';this.style.color='#2b8ef3'"
                    >›</a>
                </li>
            @else
                <li>
                    <span style="
                        display:inline-flex;align-items:center;justify-content:center;
                        width:34px;height:34px;border-radius:10px;
                        background:#f1f5f9;color:#cbd5e1;
                        font-size:16px;font-weight:700;cursor:not-allowed;
                        border:1.5px solid #e2e8f0;
                    ">›</span>
                </li>
            @endif

        </ul>
    </nav>
@endif