@section('pagination-css')
<style type="text/css" nonce="{{ csp_nonce() }}">
    .page-item {
        cursor: pointer;
    }
    li.disabled {
        pointer-events: none;
    }
</style>
@stop

@if ($paginator->hasPages())
    <ul name="pagination" class="pagination">
        {{-- Previous Page Link --}}
        @if ($paginator->onFirstPage())
            <li class="page-item disabled"><span class="page-link">«</span></li>
        @else
            <li class="page-item" data-url={{ $paginator->currentPage()-1 }}><span class="page-link">«</span></li>
        @endif

        @if($paginator->currentPage() > 3)
            <li class="page-item hidden-xs" data-url=1><span class="page-link" >1</span></li>
        @endif
        @if($paginator->currentPage() > 4)
            <li class="page-item disabled"><span class="page-link">...</span></li>
        @endif
        @foreach(range(1, $paginator->lastPage()) as $i)
            @if($i >= $paginator->currentPage() - 2 && $i <= $paginator->currentPage() + 2)
                @if ($i == $paginator->currentPage())
                    <li class="page-item active" data-url={{$i}}><span class="page-link">{{ $i }}</span></li>
                @else
                    <li class="page-item" data-url={{$i}}><span class="page-link">{{ $i }}</span></li>
                @endif
            @endif
        @endforeach
        @if($paginator->currentPage() < $paginator->lastPage() - 3)
            <li class="page-item disabled"><span class="page-link">...</span></li>
        @endif
        @if($paginator->currentPage() < $paginator->lastPage() - 2)
            <li class="page-item hidden-xs" data-url={{ $paginator->lastPage() }}><span class="page-link">{{ $paginator->lastPage() }}</span></li>
        @endif

        {{-- Next Page Link --}}
        @if ($paginator->hasMorePages())
            <li class="page-item" data-url={{ $paginator->currentPage()+1 }}><span class="page-link">»</span></li>
        @else
            <li class="page-item disabled"><span class="page-link">»</span></li>
        @endif
    </ul>
@endif

@section('pagination-js')
<script nonce="{{ csp_nonce() }}">
    $('ul[name="pagination"]').on('click','li.page-item', function() {
        var url = $(this).attr('data-url');
        var hidden = document.createElement("input");
        hidden.type = "hidden";
        hidden.name = "page";
        hidden.value = url;
        var form = document.getElementById("form");
        form.appendChild(hidden);
        form.submit();
    });
</script>
@stop