@if ($paginator->hasPages())
<style>
    .custom-pagination-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        padding: 20px 0;
    }

    .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        list-style: none;
        margin: 0;
        padding: 10px 15px;
        background: #f8f9fa;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .page-item {
        list-style: none;
    }

    .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 36px;
        padding: 0 12px;
        color: #475569;
        background: white;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 500;
        font-size: 14px;
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .page-link:hover {
        background: #f1f5f9;
        border-color: #cbd5e1;
        color: #1e293b;
    }

    .page-item.active .page-link {
        background: #3b82f6;
        color: white;
        border-color: #3b82f6;
    }

    .page-item.disabled .page-link {
        color: #cbd5e1;
        background: #f8fafc;
        border-color: #e2e8f0;
        cursor: not-allowed;
        pointer-events: none;
    }

    .pagination-info {
        text-align: center;
        color: #64748b;
        font-size: 14px;
    }

    .pagination-info strong {
        color: #1e293b;
        font-weight: 600;
    }

    @media (max-width: 768px) {
        .pagination {
            flex-wrap: wrap;
            gap: 4px;
        }

        .page-link {
            min-width: 32px;
            height: 32px;
            padding: 0 10px;
            font-size: 13px;
        }
    }
</style>

<div class="custom-pagination-wrapper">
    <ul class="pagination">
        {{-- Previous Button --}}
        @if ($paginator->onFirstPage())
            <li class="page-item disabled">
                <span class="page-link">
                    <i class="fa fa-chevron-left mr-2"></i> Prev
                </span>
            </li>
        @else
            <li class="page-item">
                <a class="page-link pagination-link" href="{{ $paginator->previousPageUrl() }}">
                    <i class="fa fa-chevron-left mr-2"></i> Prev
                </a>
            </li>
        @endif

        {{-- Page Numbers --}}
        @php
            $start = max($paginator->currentPage() - 2, 1);
            $end = min($paginator->currentPage() + 2, $paginator->lastPage());
        @endphp

        {{-- First Page --}}
        @if ($start > 1)
            <li class="page-item">
                <a class="page-link pagination-link" href="{{ $paginator->url(1) }}">1</a>
            </li>
            @if ($start > 2)
                <li class="page-item disabled">
                    <span class="page-link">...</span>
                </li>
            @endif
        @endif

        {{-- Page Range --}}
        @foreach (range($start, $end) as $page)
            <li class="page-item {{ $page == $paginator->currentPage() ? 'active' : '' }}">
                <a class="page-link pagination-link" href="{{ $paginator->url($page) }}">{{ $page }}</a>
            </li>
        @endforeach

        {{-- Last Page --}}
        @if ($end < $paginator->lastPage())
            @if ($end < $paginator->lastPage() - 1)
                <li class="page-item disabled">
                    <span class="page-link">...</span>
                </li>
            @endif
            <li class="page-item">
                <a class="page-link pagination-link" href="{{ $paginator->url($paginator->lastPage()) }}">
                    {{ $paginator->lastPage() }}
                </a>
            </li>
        @endif

        {{-- Next Button --}}
        @if ($paginator->hasMorePages())
            <li class="page-item">
                <a class="page-link pagination-link" href="{{ $paginator->nextPageUrl() }}">
                    Next <i class="ml-2 fa fa-chevron-right"></i>
                </a>
            </li>
        @else
            <li class="page-item disabled">
                <span class="page-link">
                    Next <i class="fa fa-chevron-right ml-2"></i>
                </span>
            </li>
        @endif
    </ul>

    {{-- Pagination Info --}}
    <div class="pagination-info">
        Showing <strong>{{ $paginator->firstItem() }}</strong> to
        <strong>{{ $paginator->lastItem() }}</strong> of
        <strong>{{ $paginator->total() }}</strong> results
    </div>
</div>
@endif