{{-- Reusable Vue-driven pagination (scoped) --}}
@php
  // Pass these from the parent view (Blade). These are *names* of Vue vars/methods.
  // Defaults let it work with your original global state if you ever use it that way.
  $current = $current ?? 'current_page';     // e.g. 'regional_current_page' | 'revenue_current_page' | 'leads_current_page'
  $last    = $last    ?? 'last_page';        // e.g. 'regional_last_page'   | 'revenue_last_page'   | 'leads_last_page'
  $onClick = $onClick ?? 'paginate';         // e.g. 'regionalPaginate'     | 'revenuePaginate'     | 'leadsPaginate'
@endphp

<div class="pagination d-flex justify-content-end" v-if="{{ $last }} > 1">
  <a class="paginate_button previous"
     :class="{{ $current }} == 1 ? 'disabled': ''"
     @click.prevent="{{ $onClick }}({{ $current }}-1)">
    <i class="material-icons">keyboard_arrow_left</i>
  </a>

  <a class="paginate_button"
     :class="1=={{ $current }} ? 'current' : ''"
     @click.prevent="{{ $onClick }}(1)"
     v-if="{{ $current }} > 3">1</a>

  <a class="paginate_button"
     @click.prevent="{{ $onClick }}(1)"
     v-if="{{ $current }} > 4"><span>...</span></a>

  <template v-for="page in {{ $last }}"
            v-if="page >= {{ $current }} - 2 && page <= {{ $current }} + 2">
    <a class="paginate_button"
       :class="page=={{ $current }} ? 'current' : ''"
       @click.prevent="{{ $onClick }}(page)">
      @{{ page }}
    </a>
  </template>

  <span v-if="{{ $current }} < {{ $last }} - 3">...</span>

  <a class="paginate_button"
     :class="{{ $last }}==={{ $current }} ? 'current' : ''"
     @click.prevent="{{ $onClick }}({{ $last }})"
     v-if="{{ $current }} < {{ $last }} - 2">
    <span v-text="{{ $last }}"></span>
  </a>

  <a class="paginate_button next"
     :class="{{ $current }} == {{ $last }} ? 'disabled': ''"
     @click.prevent="{{ $onClick }}({{ $current }}+1)">
    <i class="material-icons">arrow_right_alt</i>
  </a>
</div>