@if ($items->total() == 0)
<div class="h-screen flex flex-col items-center">
    <div class="w-80 h-64 mx-auto my-auto">
        <img src="images/no_data.png" alt="" class="-mt-48">
        <h2 class="text-lg text-center mt-6">No such records found on database!</h2>
    </div>

</div>
@else
@yield('table')
<nav class="flex items-center justify-between pt-3 pb-32" aria-label="Table navigation">
    <div class="flex flex-row space-x-2">
        <select id="page_count" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 text-xs rounded-lg cursor-pointer">
            @if ($items->count() <= 15) <option value="0" selected>{{ $items->count() }}</option>
                @else
                <option value="{{ $items->count() }}" selected>{{ $items->count() }}</option>
                @endif

                <option value="15">15</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="75">75</option>
                <option value="100">100</option>
        </select>
        <div class="my-auto">
            <span class="text-sm font-normal text-gray-500">Showing <span class="font-semibold text-primary">
                    {{ $items->firstItem() . ' - ' . $items->lastItem() }}
                </span>
                of <span class="font-semibold text-primary">{{ $items->total() }}</span>
            </span>
        </div>
    </div>

    <ul class="pagination items-center -space-x-px flex flex-row">
        @if ($items->currentPage() != 1)
        <li>
            <a href={{ $items->url($items->currentPage() - 1) }} class="flex items-center justify-center px-3 h-8 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700">
                <span class="sr-only">Previous</span>
                <svg class="w-2.5 h-2.5" aria-hidden="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
                </svg>
            </a>
        </li>
        @if ($items->currentPage() >= 3)
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">...</a>
        </li>
        @endif

        <li>
            <a href={{ $items->url($items->currentPage() - 1) }} class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">{{ $items->currentPage() - 1 }}</a>
        </li>
        @endif
        @if ($items->currentPage() == 1)
        @if ($items->nextPageUrl() == null)
        <li>
            <a href="" aria-current="page" class="z-10 flex items-center justify-center px-3 h-8 leading-tight text-white border border-blue-300 rounded-lg bg-primary hover:bg-blue-100 hover:text-blue-700">{{ $items->currentPage() }}</a>
        </li>
        @else
        <li>
            <a href="" aria-current="page" class="z-10 flex items-center justify-center px-3 h-8 leading-tight text-white border border-blue-300 rounded-l-lg bg-primary hover:bg-blue-100 hover:text-blue-700">{{ $items->currentPage() }}</a>
        </li>
        @endif
        @elseif($items->nextPageUrl() == null)
        <li>
            <a href="" aria-current="page" class="z-10 flex items-center justify-center px-3 h-8 leading-tight text-white border border-blue-300 rounded-r-lg bg-primary hover:bg-blue-100 hover:text-blue-700">{{ $items->currentPage() }}</a>
        </li>
        @else
        <li>
            <a href="" aria-current="page" class="z-10 flex items-center justify-center px-3 h-8 leading-tight text-white border border-blue-300 bg-primary hover:bg-blue-100 hover:text-blue-700">{{ $items->currentPage() }}</a>
        </li>
        @endif

        @if ($items->nextPageUrl() != null)
        <li>
            <a href={{ $items->url($items->currentPage() + 1) }} class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">{{ $items->currentPage() + 1 }}</a>
        </li>
        <li>
            <a href="#" class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700">...</a>
        </li>
        <li>
            <a href={{ $items->url($items->currentPage() + 1) }} class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700">
                <span class="sr-only">Next</span>
                <svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
                </svg>
            </a>
        </li>
        @endif
    </ul>
</nav>

</div>
@endif

<script>
    $(document).ready(function() {
        tippy('#approveIcon', {
            content: 'Approve Detail'
        });
        tippy('#viewIcon', {
            content: 'View Detail'
        });
        tippy('#editIcon', {
            content: 'Update Detail'
        });
        tippy('#deleteIcon', {
            content: 'Delete Detail'
        });
        tippy('#selectAll', {
            content: 'Select All'
        });
    });
    $('#page_count').change(function(e) {
        e.preventDefault();
        getDataTable();
    });
</script>