@if($paginator->total() > 0)
    <div class="table-footer">
        <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
            <div style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-label); font-size: 0.875rem; font-weight: 600;">
                <label for="per_page_select">Number of rows:</label>
                <select id="per_page_select" style="padding: 0.25rem 1.5rem 0.25rem 0.5rem; font-size: 0.875rem; border-radius: 6px; width: auto; border: 1px solid #e2e8f0; background-color: #ffffff; color: #0f172a; cursor: pointer; outline: none;" onchange="changePerPage(this)">
                    @foreach([10, 25, 50, 100, 250, 500] as $val)
                        <option value="{{ $val }}" {{ request('per_page', 10) == $val ? 'selected' : '' }}>{{ $val }}</option>
                    @endforeach
                </select>
            </div>
            <script>
                function changePerPage(select) {
                    const url = new URL(window.location.href);
                    url.searchParams.set('per_page', select.value);
                    url.searchParams.delete('page'); // reset to page 1
                    window.location.href = url.href;
                }
            </script>
            <span class="showing-text" style="margin: 0;">
                Showing {{ $paginator->firstItem() }} to {{ $paginator->lastItem() }} of {{ $paginator->total() }} {{ $resourceName ?? 'items' }}
            </span>
        </div>
        
        @if($paginator->hasPages())
            <ul class="pagination">
                <!-- Previous Page Link -->
                @if ($paginator->onFirstPage())
                    <li class="page-item disabled">
                        <span>
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path>
                            </svg>
                        </span>
                    </li>
                @else
                    <li class="page-item">
                        <a href="{{ $paginator->previousPageUrl() }}">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path>
                            </svg>
                        </a>
                    </li>
                @endif

                <!-- Pagination Elements -->
                @php
                    $last = $paginator->lastPage();
                    $current = $paginator->currentPage();
                    $pages = [];

                    if ($last <= 5) {
                        $pages = range(1, $last);
                    } else {
                        $pages[] = 1;
                        $pages[] = 2;
                        
                        if ($current > 2 && $current < $last - 1) {
                            if ($current > 3) {
                                $pages[] = '...';
                            }
                            $pages[] = $current;
                            if ($current < $last - 2) {
                                $pages[] = '...';
                            }
                        } else {
                            $pages[] = '...';
                        }
                        
                        $pages[] = $last - 1;
                        $pages[] = $last;
                    }
                @endphp

                @foreach ($pages as $page)
                    @if ($page === '...')
                        <li class="page-item disabled">
                            <span style="border: none; background: transparent; padding: 0 0.25rem;">...</span>
                        </li>
                    @elseif ($page == $current)
                        <li class="page-item active">
                            <span>{{ $page }}</span>
                        </li>
                    @else
                        <li class="page-item">
                            <a href="{{ $paginator->url($page) }}">{{ $page }}</a>
                        </li>
                    @endif
                @endforeach

                <!-- Next Page Link -->
                @if ($paginator->hasMorePages())
                    <li class="page-item">
                        <a href="{{ $paginator->nextPageUrl() }}">
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                    </li>
                @else
                    <li class="page-item disabled">
                        <span>
                            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </span>
                    </li>
                @endif
            </ul>
        @endif
    </div>
@endif

<style>
    /* Footer Pagination styling */
    .table-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1.25rem 1.5rem;
        border-top: 1px solid var(--border-color, #e2e8f0);
        background-color: #fafafb;
        flex-wrap: wrap;
        gap: 1rem;
        width: 100%;
    }

    .showing-text {
        font-size: 0.85rem;
        color: var(--text-muted, #64748b);
        font-weight: 600;
    }

    .pagination {
        display: flex;
        align-items: center;
        list-style: none;
        gap: 0.25rem;
        margin: 0;
        padding: 0;
    }

    .page-item a, .page-item span {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 32px;
        height: 32px;
        padding: 0 0.5rem;
        border-radius: 6px;
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--text-label, #334155);
        text-decoration: none;
        border: 1px solid var(--border-color, #e2e8f0);
        background-color: var(--bg-card, #ffffff);
        transition: all 0.2s ease;
        cursor: pointer;
    }

    .page-item.active span {
        background-color: var(--primary-light, #eff6ff);
        color: var(--primary-color, #3b46f1);
        border-color: var(--primary-color, #3b46f1);
    }

    .page-item a:hover {
        border-color: var(--border-hover, #cbd5e1);
        background-color: var(--bg-main, #f8fafc);
    }

    .page-item.disabled span {
        color: #cbd5e1;
        background-color: #f1f5f9;
        cursor: not-allowed;
        border-color: #e2e8f0;
    }

    .page-item svg {
        width: 0.875rem;
        height: 0.875rem;
        stroke-width: 2.5;
    }

    @media (max-width: 640px) {
        .table-footer {
            flex-direction: column !important;
            align-items: center !important;
        }
    }
</style>
