<!-- <div id="pagination"></div> -->

<script>
var customStyles = `
<style>
    #pagination {
        margin-top: 10px;
    }

    #pagination button {
        margin-right: 5px;
    }

    #pagination button.active {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
    }
</style>
`;

document.head.insertAdjacentHTML('beforeend', customStyles);
// Data pagination
const pageSize = 5;
const totalPages = <?php echo get_jum_table('result_pattaya'); ?>;

function removeAllClasses(element) {
    // Hapus kelas dari elemen saat ini
    element.className = "";
    
    // Iterasi melalui semua elemen di bawahnya
    var childNodes = element.getElementsByTagName("*");
    for (var i = 0; i < childNodes.length; i++) {
        // Hapus kelas dari setiap elemen
        childNodes[i].className = "";
    }
}
<?php
    if(!isset($_GET['page'])){
?>
        var temp = 0;
        let currentPage = 1;
<?php
    }else{
?>
        var temp = <?php echo $_GET['page']; ?>;
        let currentPage = <?php echo $_GET['page']; ?>;
<?php
    }
?>

function rememberId(id){
    var paginationDiv = document.getElementById("pagination");
    removeAllClasses(paginationDiv);
    temp = id;
    let element = document.getElementById('page-' + temp);
    element.classList.add("active");
    window.location.href = '?page=' + temp + "#section-2";
}

// Menampilkan pagination sesuai kelompok
function renderPagination(start, end) {
    let paginationHTML = '';

    // Tombol prev
    paginationHTML += '<li><a href="#pre" onclick="prevPage()">Prev</a></li>';

    // Menampilkan halaman-halaman dalam kelompok
    for (let i = start; i <= end; i++) {
        if(i == temp){
            paginationHTML += `<li><a href='#' class='active' id='page-${i}' onclick="rememberId(${i})">${i}</a></li>`;
        }else{
            paginationHTML += `<li><a href='#' id='page-${i}' onclick="rememberId(${i})">${i}</a></li>`;
        }
    }

    // Tombol next
    paginationHTML += '<li><a href="#next" onclick="nextPage()">Next</a></li>';

    // Memasukkan pagination ke dalam elemen dengan id pagination
    document.getElementById('pagination').innerHTML = paginationHTML;
}

// Membuat kelompok pagination baru
function createPaginationGroup() {
    const groupSize = 5;
    let start = Math.floor((currentPage - 1) / groupSize) * groupSize + 1;
    let end = Math.min(start + groupSize - 1, totalPages);

    renderPagination(start, end);
}

// Navigasi ke halaman sebelumnya
function prevPage() {
    if (currentPage > pageSize) {
        currentPage = currentPage - pageSize;
        createPaginationGroup();
    }
}

// Navigasi ke halaman selanjutnya
function nextPage() {
    if ((currentPage + pageSize) <= totalPages) {
        currentPage = currentPage + pageSize;
        createPaginationGroup();
    }
}

// Memuat halaman pertama
createPaginationGroup();
<?php
    if(!isset($_GET['page'])){
?>
        rememberId(1);
<?php
    }
?>
</script>

