@php
  use App\Enums\PageSize;
@endphp
<div class="d-flex justify-content-end flex-wrap flex-wrap pt-3">
  {{-- <div class="number-record-wrap d-flex align-items-center mt-sm-0 mt-3">
    <label class="fw-500 text-neutral-04 me-4">Hiển thị:</label>
    <select name="pageSize" id="selectedPageSize" value="" class="number-record-select rounded-1 border-0 px-3 py-2">
      @foreach (PageSize::getValues() as $size)
        <option value="{{ $size }}" {{ $paginator->perPage() == $size ? 'selected' : '' }}>{{ $size }}
        </option>
      @endforeach
    </select>
  </div> --}}
  <div class="pagination-wrap d-flex align-items-end mt-sm-0 ps-sm-0 mt-3 ps-2">
    <ul class="pagination pagination-sm align-items-center m-0">
      @if ($paginator->onFirstPage())
        <li class="page-item disabled pe-1">
          <a href="#" class="page-link page-navigate text-red-main">Previous</a>
        </li>
      @else
        <li class="page-item pe-1">
          <a href="{{ $paginator->previousPageUrl() }}" class="page-link page-navigate text-red-main">Previous</a>
        </li>
      @endif

      <div class="page-button-wrap d-flex px-2">
        @foreach ($elements as $element)
          @if (is_array($element))
            @foreach ($element as $page => $url)
              @if ($page == $paginator->currentPage())
                <li class="page-item fw-500">
                  <a class="page-link page-button active" href="#">{{ $page }}</a>
                </li>
              @else
                <li class="page-item fw-500">
                  <a href="{{ $url }}" class="page-link page-button">{{ $page }}</a>
                </li>
              @endif
            @endforeach
          @endif
        @endforeach
      </div>
      @if ($paginator->hasMorePages())
        <li class="page-item ps-1">
          <a class="page-link page-navigate text-red-main" href="{{ $paginator->nextPageUrl() }}">Next
          </a>
        </li>
      @else
        <li class="page-item disabled ps-1">
          <a class="page-link page-navigate text-red-main" href="#">Next</a>
        </li>
      @endif
    </ul>
  </div>
</div>
@push('script')
  <script>
    if (typeof selectedPageSize !== 'undefined' && selectedPageSize !== null) {
      selectedPageSize.addEventListener('change', function() {
        const pageSize = this.value;
        const currentUrl = new URL(window.location.href);
        const params = new URLSearchParams(currentUrl.search);

        if (params.has('page')) {
          params.set('page', 1);
        }
        // if (params.has('pageSize')) {
        //   params.set('pageSize', pageSize);
        // } else {
        //   params.append('pageSize', pageSize);
        // }
        currentUrl.search = params.toString();
        window.location.href = currentUrl.toString();
      });
    }
  </script>
@endpush