@if ($paginator->hasPages())
    <div class="pagination-wrapper">
        <!-- Results Info -->
        <div class="pagination-info">
            <span class="results-text">
                Hiển thị <strong>{{ $paginator->firstItem() ?? 0 }}</strong> đến <strong>{{ $paginator->lastItem() ?? 0 }}</strong>
                trong tổng số <strong>{{ number_format($paginator->total()) }}</strong> kết quả
            </span>
        </div>

        <!-- Desktop Pagination -->
        <div class="pagination-nav desktop-pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <span class="page-link disabled">
                    <i class="fas fa-chevron-left"></i> Trước
                </span>
            @else
                <a href="{{ $paginator->previousPageUrl() }}" class="page-link">
                    <i class="fas fa-chevron-left"></i> Trước
                </a>
            @endif

            {{-- Pagination Elements --}}
            @foreach ($elements as $element)
                {{-- "Three Dots" Separator --}}
                @if (is_string($element))
                    <span class="page-link dots">{{ $element }}</span>
                @endif

                {{-- Array Of Links --}}
                @if (is_array($element))
                    @foreach ($element as $page => $url)
                        @if ($page == $paginator->currentPage())
                            <span class="page-link active">{{ $page }}</span>
                        @else
                            <a href="{{ $url }}" class="page-link">{{ $page }}</a>
                        @endif
                    @endforeach
                @endif
            @endforeach

            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <a href="{{ $paginator->nextPageUrl() }}" class="page-link">
                    Sau <i class="fas fa-chevron-right"></i>
                </a>
            @else
                <span class="page-link disabled">
                    Sau <i class="fas fa-chevron-right"></i>
                </span>
            @endif
        </div>

        <!-- Mobile Pagination -->
        <div class="pagination-nav mobile-pagination">
            {{-- Previous Page Link --}}
            @if ($paginator->onFirstPage())
                <span class="page-link disabled">
                    <i class="fas fa-chevron-left"></i>
                </span>
            @else
                <a href="{{ $paginator->previousPageUrl() }}" class="page-link">
                    <i class="fas fa-chevron-left"></i>
                </a>
            @endif

            <!-- Page Info -->
            <div class="page-info">
                <span class="current-page">{{ $paginator->currentPage() }}</span>
                <span class="page-separator">của</span>
                <span class="total-pages">{{ $paginator->lastPage() }}</span>
            </div>

            {{-- Next Page Link --}}
            @if ($paginator->hasMorePages())
                <a href="{{ $paginator->nextPageUrl() }}" class="page-link">
                    <i class="fas fa-chevron-right"></i>
                </a>
            @else
                <span class="page-link disabled">
                    <i class="fas fa-chevron-right"></i>
                </span>
            @endif
        </div>
    </div>

    <style>
        .pagination-wrapper {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-top: 1.5rem;
            padding: 1.5rem;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .pagination-info {
            text-align: center;
        }

        .results-text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 14px;
            font-weight: 500;
        }

        .results-text strong {
            color: white;
            font-weight: 600;
        }

        .pagination-nav {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .desktop-pagination {
            display: flex;
        }

        .mobile-pagination {
            display: none;
        }

        .page-link {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            padding: 0.75rem 1rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            min-width: 44px;
            justify-content: center;
        }

        .page-link:hover:not(.disabled):not(.active) {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.4);
            color: white;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .page-link.active {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            border-color: #3b82f6;
            color: white;
            font-weight: 600;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }

        .page-link.disabled {
            background: rgba(255, 255, 255, 0.05);
            border-color: rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.4);
            cursor: not-allowed;
            opacity: 0.6;
        }

        .page-link.dots {
            border: none;
            background: none;
            color: rgba(255, 255, 255, 0.5);
            cursor: default;
        }

        .page-link.dots:hover {
            background: none;
            transform: none;
            box-shadow: none;
        }

        .page-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
        }

        .current-page {
            color: #60a5fa;
            font-weight: 600;
        }

        .page-separator {
            color: rgba(255, 255, 255, 0.6);
        }

        .total-pages {
            color: rgba(255, 255, 255, 0.8);
        }

        @media (max-width: 768px) {
            .pagination-wrapper {
                padding: 1rem;
                gap: 0.75rem;
            }

            .desktop-pagination {
                display: none;
            }

            .mobile-pagination {
                display: flex;
            }

            .pagination-info {
                order: 2;
            }

            .mobile-pagination {
                order: 1;
            }

            .results-text {
                font-size: 13px;
            }

            .page-link {
                padding: 0.625rem;
                min-width: 40px;
                font-size: 13px;
            }

            .page-info {
                padding: 0.625rem 0.875rem;
                font-size: 13px;
            }
        }

        @media (max-width: 480px) {
            .pagination-wrapper {
                padding: 0.75rem;
            }

            .page-link {
                padding: 0.5rem;
                min-width: 36px;
                font-size: 12px;
            }

            .page-info {
                padding: 0.5rem 0.75rem;
                font-size: 12px;
            }

            .results-text {
                font-size: 12px;
            }
        }
    </style>
@endif