<!-- footer start-->
<?php include('partial/footer.php') ?>
      </div>
    </div>
    <?php include('partial/scripts.php') ?>
    <!-- Plugins JS start-->
<script src="<?= $cfg_baseurl ?>assets/js/clock.js"></script>
<script src="<?= $cfg_baseurl ?>assets/js/chart/apex-chart/moment.min.js"></script>
<script src="<?= $cfg_baseurl ?>assets/js/notify/bootstrap-notify.min.js"></script>
<script src="<?= $cfg_baseurl ?>/assets/js/sweet-alert/sweetalert.min.js"></script>
<script src="<?= $cfg_baseurl ?>/assets/js/sweet-alert/app.js"></script>
<script src="<?= $cfg_baseurl ?>assets/js/dashboard/default.js"></script>
<script src="<?= $cfg_baseurl ?>assets/js/height-equal.js"></script>
<script src="<?= $cfg_baseurl ?>assets/js/animation/wow/wow.min.js"></script>
<!-- Plugins JS Ends-->
<script>
  new WOW().init();
</script>
<script>
    var options = {
      chart: {
        type: "area",
        height: 300,
        foreColor: "#999",
        stacked: true,
        dropShadow: {
          enabled: true,
          enabledSeries: [0],
          top: -2,
          left: 2,
          blur: 5,
          opacity: 0.06
        },
        zoom: {
        enabled: false, 
        type: 'x',
        autoScaleYaxis: false 
        }
      },
      colors: ['#ffa305', '#0090FF', '#05f585', '#080000', '#FF0000'], 
      stroke: {
        curve: "smooth",
        width: 3
      },
      dataLabels: {
        enabled: false
      },
      series: [{
        name: 'Orders Pending',
        data: generateDayWiseTimeSeries(0, 7)
      },{
        name: 'Orders Processing',
        data: generateDayWiseTimeSeries(1, 7)
      }, {
        name: 'Orders Success',
        data: generateDayWiseTimeSeries(2, 7)
      }, {
        name: 'Orders Partial', 
        data: generateDayWiseTimeSeries(3, 7) 
      }, {
        name: 'Orders Error', 
        data: generateDayWiseTimeSeries(4, 7) 
      }],
      markers: {
        size: 0,
        strokeColor: "#fff",
        strokeWidth: 3,
        strokeOpacity: 1,
        fillOpacity: 1,
        hover: {
          size: 6
        }
      },
      xaxis: {
        type: "datetime",
        axisBorder: {
          show: false
        },
        axisTicks: {
          show: false
        }
      },
      yaxis: {
        labels: {
          offsetX: 14,
          offsetY: -5
        },
        tooltip: {
          enabled: true
        }
      },
      grid: {
        padding: {
          left: -5,
          right: 5
        }
      },
      tooltip: {
        x: {
          format: "dd MMM yyyy"
        },
      },
      legend: {
        position: 'bottom',
        horizontalAlign: 'left'
      },
      fill: {
        type: ["solid", "solid", "solid", "solid", "solid"], // Menetapkan jenis pengisian warna untuk setiap area grafik
        fillOpacity: [0.7, 0.7, 0.7, 0.7, 0.7], // Menetapkan opasitas warna untuk setiap area grafik (misalnya, 0.7 untuk warna merah)
        gradient: {
          shade: "light",
          type: "vertical",
          opacityFrom: 0.9,
          opacityTo: 0.3,
          stops: [0, 100]
        }
      }
    };

    var chart = new ApexCharts(document.querySelector("#timeline-chart"), options);

    chart.render();

    function generateDayWiseTimeSeries(s, count) {
      var values = [
        <?= json_encode($data_total[$status_labels[0]]) ?>,
        <?= json_encode($data_total[$status_labels[1]]) ?>,
        <?= json_encode($data_total[$status_labels[2]]) ?>,
        <?= json_encode($data_total[$status_labels[3]]) ?>,
        <?= json_encode($data_total[$status_labels[4]]) ?>,
        ];
      var i = 0;
      var series = [];
      var x = new Date("<?= date('d F Y', strtotime('-5 days'))?>").getTime();
      while (i < count) {
        series.push([x, values[s][i]]);
        x += 86400000;
        i++;
      }
      return series;
    }
  </script>
  <script>
    var options = {
      chart: {
        type: "area",
        height: 300,
        foreColor: "#999",
        stacked: true,
        dropShadow: {
          enabled: true,
          enabledSeries: [0],
          top: -2,
          left: 2,
          blur: 5,
          opacity: 0.06
        },
        zoom: {
        enabled: false, 
        type: 'x',
        autoScaleYaxis: false 
      }
      },
      colors: ['#ffa305', '#0090FF', '#05f585', '#080000', '#FF0000'], 
      stroke: {
        curve: "smooth",
        width: 3
      },
      dataLabels: {
        enabled: false
      },
      series: [{
        name: 'Orders Pending',
        data: generateDayWiseTimeSeries(0, 29)
      },{
        name: 'Orders Processing',
        data: generateDayWiseTimeSeries(1, 29)
      }, {
        name: 'Orders Success',
        data: generateDayWiseTimeSeries(2, 29)
      }, {
        name: 'Orders Partial', 
        data: generateDayWiseTimeSeries(3, 29) 
      }, {
        name: 'Orders Error', 
        data: generateDayWiseTimeSeries(4, 29) 
      }],
      markers: {
        size: 0,
        strokeColor: "#fff",
        strokeWidth: 3,
        strokeOpacity: 1,
        fillOpacity: 1,
        hover: {
          size: 6
        }
      },
      xaxis: {
        type: "datetime",
        axisBorder: {
          show: false
        },
        axisTicks: {
          show: false
        }
      },
      yaxis: {
        labels: {
          offsetX: 14,
          offsetY: -5
        },
        tooltip: {
          enabled: true
        }
      },
      grid: {
        padding: {
          left: -5,
          right: 5
        }
      },
      tooltip: {
        x: {
          format: "dd MMM yyyy"
        },
      },
      legend: {
        position: 'bottom',
        horizontalAlign: 'left'
      },
      fill: {
        type: ["solid", "solid", "solid", "solid", "solid"], // Menetapkan jenis pengisian warna untuk setiap area grafik
        fillOpacity: [0.7, 0.7, 0.7, 0.7, 0.7], // Menetapkan opasitas warna untuk setiap area grafik (misalnya, 0.7 untuk warna merah)
        gradient: {
          shade: "light",
          type: "vertical",
          opacityFrom: 0.9,
          opacityTo: 0.3,
          stops: [0, 100]
        }
      }
    };

    var chart = new ApexCharts(document.querySelector("#total-chart"), options);

    chart.render();

    function generateDayWiseTimeSeries(s, count) {
      var values = [
        <?= json_encode($data_total[$status_labels[0]]) ?>,
        <?= json_encode($data_total[$status_labels[1]]) ?>,
        <?= json_encode($data_total[$status_labels[2]]) ?>,
        <?= json_encode($data_total[$status_labels[3]]) ?>,
        <?= json_encode($data_total[$status_labels[4]]) ?>,
        ];
      var i = 0;
      var series = [];
      var x = new Date("<?= date('d F Y', strtotime('-28 days'))?>").getTime();
      while (i < count) {
        series.push([x, values[s][i]]);
        x += 86400000;
        i++;
      }
      return series;
    }
  </script>
<script>
  $(document).ready(function() {
    const table = $("#ingfo-table");
    const pagination = $("#pagination-ingfo");
    const maxVisiblePages = 5; // Maximum number of visible pagination links

    // Constants to keep track of current page and records per page
    let currentPage = 1;
    const recordsPerPage = 5; // Number of records to show per page

    // Function to fetch and update table data based on the current page
    function updateTableData(page) {
      $.ajax({
        url: "get_news_data.php",
        method: "GET",
        data: { page: page, recordsPerPage: recordsPerPage },
        dataType: "json",
        success: function(data) {
          // Clear existing table rows
          table.empty();

          // Add table header
          table.append("<thead><tr><th>Date</th><th>Content</th></tr></thead>");

          // Add table body with fetched data
          const tbody = $("<tbody></tbody>");
          $.each(data.news, function(index, item) {
            const row = $("<tr></tr>");

            // Split the datetime into date and time parts
            const dateTimeParts = item.date.split(" ");
            const datePart = dateTimeParts[0];
            const timePart = dateTimeParts[1];

            // Modify the date cell to include the vertical-align property
            const dateCell = $("<td style='vertical-align: top;'></td>");
            dateCell.append("<h10>" + datePart + "<br>" + timePart + "</h10>");
            row.append(dateCell);

            row.append("<td>" + nl2br(item.content) + "</td>"); // Use nl2br here
            tbody.append(row);
          });
          table.append(tbody);

          // Update pagination links
          pagination.empty();
          const totalPages = Math.ceil(data.totalPages / recordsPerPage);
          let startPage = 1;
          let endPage = totalPages;

          if (totalPages > maxVisiblePages) {
            const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
            startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
            endPage = startPage + maxVisiblePages - 1;

            if (endPage > totalPages) {
              endPage = totalPages;
              startPage = Math.max(endPage - maxVisiblePages + 1, 1);
            }
          }

          // Add "First Page" link
          //pagination.append('<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>');

          for (let i = startPage; i <= endPage; i++) {
            pagination.append(
              '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
            );
          }

          // Add "Last Page" link
          //pagination.append('<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>');

          // Add navigation arrows for previous and next
          if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }
        },
        error: function(xhr, status, error) {
          console.error("Error fetching data:", error);
        }
      });
    }

    // Function to convert newlines to <br> tags
    function nl2br(str) {
      return str.replace(/(?:\r\n|\r|\n)/g, "<br>");
    }

    // Function to handle page navigation click
    function handlePaginationClick(event) {
      event.preventDefault();
      const newPage = parseInt($(this).data("page"));
      if (newPage !== currentPage) {
        currentPage = newPage;
        updateTableData(currentPage);
      }
    }

    // Attach pagination click event for individual page numbers
    pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

    // Attach click event for previous and next arrows
    pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
      event.preventDefault();
      const newPage = parseInt($(this).data("page"));
      if (newPage !== currentPage) {
        currentPage = newPage;
        updateTableData(currentPage);
      }
    });

    // Initial table data fetch for the first page
    updateTableData(currentPage);
  });
</script>
<script>
  $(document).ready(function () {
    const table = $("#harga-table");
    const pagination = $("#pagination-harga");
    const maxVisiblePages = 5; // Maximum number of visible pagination links

    // Constants to keep track of current page and records per page
    let currentPage = 1;
    const recordsPerPage = 10; // Number of records to show per page

    // Function to fetch and update table data based on the current page, category, and search input
    function updateTableData(page, category = '', searchQuery = '') {
      $.ajax({
        url: "get_services_data.php",
        method: "GET",
        data: { page: page, recordsPerPage: recordsPerPage, category: category, search: searchQuery },
        dataType: "json",
        success: function (data) {
          // Clear existing table rows
          table.empty();

          // Add table header
          table.append("<thead><tr><th>ID</th><th>Kategori</th><th>Layanan</th><th>Harga /1000</th><th>Kecepatan Rata²</th><th>Minimal</th><th>Maximal</th></tr></thead>");

          // ... (rest of the existing code)

          // Add table body with fetched data
          const tbody = $("<tbody></tbody>");
          $.each(data.services, function (index, item) {
            // Check if the category filter is set and matches the current item's category
            if (category === '' || category === item.category) {
              const row = $("<tr class='border-bottom-success'></tr>");
              row.append("<td>" + item.sid + "</td>");
              row.append("<td>" + item.category + "</td>");
              row.append("<td>" + item.service + "</td>");
              row.append("<td>" + formatCurrency(item.price) + "</td>");
              row.append("<td>" + item.average + "</td>");
              row.append("<td>" + item.min + "</td>");
              row.append("<td>" + item.max + "</td>");
              tbody.append(row);
            }
          });
          table.append(tbody);

          // Update pagination links
          pagination.empty();
          const totalPages = data.totalPages;
          let startPage = 1;
          let endPage = totalPages;

          if (totalPages > maxVisiblePages) {
            const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
            startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
            endPage = startPage + maxVisiblePages - 1;

            if (endPage > totalPages) {
              endPage = totalPages;
              startPage = Math.max(endPage - maxVisiblePages + 1, 1);
            }
          }

          for (let i = startPage; i <= endPage; i++) {
            pagination.append(
              '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
            );
          }

          // Add navigation arrows for previous and next
          if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }
        },
        error: function (xhr, status, error) {
          console.error("Error fetching data:", error);
        }
      });
    }

    function handlePaginationClick(event) {
      event.preventDefault();
      const newPage = parseInt($(this).data("page"));
      if (newPage !== currentPage) {
        currentPage = newPage;
        updateTableData(currentPage, $("#category-filter").val(), $("#search-input").val().trim());
      }
    }

    // Function to handle search input
    $("#search-input").on("input", function() {
      const searchQuery = $(this).val().trim();
      currentPage = 1; // Reset to the first page when performing a new search
      updateTableData(currentPage, $("#category-filter").val(), searchQuery);
    });

    // Function to handle category filter
    $("#category-filter").on("change", function () {
      const selectedCategory = $(this).val();
      currentPage = 1; // Reset to the first page when changing the category filter
      updateTableData(currentPage, selectedCategory, $("#search-input").val().trim());
    });

    // Attach pagination click event for individual page numbers
    pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

    // Attach click event for previous and next arrows
    pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
      event.preventDefault();
      const newPage = parseInt($(this).data("page"));
      if (newPage !== currentPage) {
        currentPage = newPage;
        updateTableData(currentPage, $("#category-filter").val(), $("#search-input").val().trim());
      }
    });

    // Initial table data fetch for the first page and all categories
    updateTableData(currentPage);
  });

  // Function to format the number with periods instead of commas
  function formatCurrency(num) {
    return "Rp " + num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
</script>

<script>
$(document).ready(function() {
  const table = $("#user-table");
  const pagination = $("#pagination-user");
  const maxVisiblePages = 5; // Maximum number of visible pagination links

  // Constants to keep track of current page and records per page
  let currentPage = 1;
  const recordsPerPage = 10; // Number of records to show per page

  // Function to fetch and update table data based on the current page and search input
  function updateTableData(page, searchQuery = '') {
    $.ajax({
      url: "get_users_data.php",
      method: "GET",
      data: { page: page, recordsPerPage: recordsPerPage, search: searchQuery },
      dataType: "json",
      success: function(data) {
        // Clear existing table rows
        table.empty();

        // Add table header
        table.append("<thead><tr><th>Status</th><th>Username</th><th>Password</th><th>Level</th><th>Saldo</th><th>Terdaftar</th><th>Uplink</th><th>API Key</th><th>Aksi</th></tr></thead>");

        // Add table body with fetched data
        const tbody = $("<tbody></tbody>");
        $.each(data.users, function(index, item) {
          const row = $("<tr class='border-bottom-success'></tr>");
          row.append("<td align='center'>" + (item.status === "Active" ? "<i class='fa fa-check'></i>" : "<i class='fa fa-times'></i>") + "</td>");
          row.append("<td>" + item.username + "</td>");
          row.append("<td>" + item.password + "</td>");
          row.append("<td>" + item.level + "</td>");
          row.append("<td>" + formatCurrency(item.balance) + "</td>"); // Format the balance as currency
          row.append("<td>" + item.registered + "</td>");
          row.append("<td>" + item.uplink + "</td>");
          row.append("<td>" + item.api_key + "</td>");
          row.append("<td align='center'>" +
            "<a class='btn btn-xs btn-warning' data-bs-toggle='modal' data-bs-target='#editusernya"+item.username+"'><i class='fa fa-edit'></i></a> " +
            "<div class='modal fade' id='editusernya"+item.username+"' tabindex='-1' role='dialog' aria-labelledby='exampleModalgetbootstrap' aria-hidden='true'> <div class='modal-dialog' role='document'> <div class='modal-content'> <div class='modal-toggle-wrapper social-profile text-start dark-sign-up'> <h3 class='modal-header justify-content-center border-0'>User Edit</h3> <div class='modal-body'> <form class='row g-3' method='POST'> <div class='col-md-6'> <label class='form-label' for='validationCustom01'>Username</label> <input type='text' class='form-control' value='"+item.username+"' name='username' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Password</label> <input type='text' class='form-control' name='password' placeholder='Password' value='"+item.password+"' required> </div> <div class='col-md-12'> <label class='form-label' for='exampleFormControlInput1'>Email address</label> <input class='form-control' id='exampleFormControlInput1' type='email' name='email' value='"+item.email+"'> </div> <div class='col-md-12'> <label class='form-label' for='exampleFormControlInput1'>No. Wangsaff</label> <input class='form-control' id='exampleFormControlInput1' type='number' name='nohp' value='"+item.nohp+"'> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Balance</label> <input type='text' class='form-control' name='balance' placeholder='Password' value='"+item.balance+"' required> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Level</label> <select class='form-control' name='level'> <option value='"+item.level+"'>"+item.level+"</option> <option value='Member'>Member</option><option value='Admin'>Admin</option></select> </div><div class='col-md-12'> <label class='form-label' for='validationCustom02'>Status</label> <select class='form-control' name='status'> <option value='"+item.status+"'>"+item.status+"</option> <option value='Active'>Active</option><option value='Suspended'>Suspended</option></select> </div> <div class='col-md-12'> <button class='btn btn-primary' type='submit' name='edit'>Submit Gan</button> </div> </form> </div> </div> </div> </div> </div>"+
            "<a class='btn btn-xs btn-danger' data-bs-toggle='modal' data-bs-target='#deleteusernya"+item.username+"'><i class='fa fa-trash-o'></i></a> " +
            "<div class='modal fade' id='deleteusernya"+item.username+"' tabindex='-1' role='dialog' aria-labelledby='exampleModalgetbootstrap' aria-hidden='true'> <div class='modal-dialog' role='document'> <div class='modal-content'> <div class='modal-toggle-wrapper social-profile text-start dark-sign-up'> <h3 class='modal-header justify-content-center border-0'>Delete User</h3> <div class='modal-body'> <form class='row g-3' method='POST'> <div class='col-md-6'> <label class='form-label' for='validationCustom01'>Username</label> <input type='text' class='form-control' value='"+item.username+"' name='username' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Password</label> <input type='text' class='form-control' name='password' placeholder='Password' value='"+item.password+"' readonly> </div> <div class='col-md-12'> <label class='form-label' for='exampleFormControlInput1'>Email address</label> <input class='form-control' id='exampleFormControlInput1' type='email' name='email' value='"+item.email+"' readonly> </div> <div class='col-md-12'> <label class='form-label' for='exampleFormControlInput1'>No. Wangsaff</label> <input class='form-control' id='exampleFormControlInput1' type='number' name='nohp' value='"+item.nohp+"' readonly> </div> <div class='col-md-12'> <button class='btn btn-danger' type='submit' name='delete'>Hapus Gan</button> </div> </form> </div> </div> </div> </div> </div>"+
            "</td>");
          tbody.append(row);
        });
        table.append(tbody);

        // Update pagination links
        pagination.empty();
        const totalPages = data.totalPages;
        let startPage = 1;
        let endPage = totalPages;

        if (totalPages > maxVisiblePages) {
          const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
          startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
          endPage = startPage + maxVisiblePages - 1;

          if (endPage > totalPages) {
            endPage = totalPages;
            startPage = Math.max(endPage - maxVisiblePages + 1, 1);
          }
        }

        for (let i = startPage; i <= endPage; i++) {
          pagination.append(
            '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
          );
        }

        // Add navigation arrows for previous and next
        if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }
      },
      error: function(xhr, status, error) {
        console.error("Error fetching data:", error);
      }
    });
  }

  // Function to handle page navigation click
  function handlePaginationClick(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-users").val().trim());
    }
  }

  // Function to handle search input
  $("#search-users").on("input", function() {
    const searchQuery = $(this).val().trim();
    currentPage = 1; // Reset to the first page when performing a new search
    updateTableData(currentPage, searchQuery);
  });

  // Attach pagination click event for individual page numbers
  pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

  // Attach click event for previous and next arrows
  pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-users").val().trim());
    }
  });

  // Initial table data fetch for the first page
  updateTableData(currentPage);
});

// Function to format the number as currency (Rp)
function formatCurrency(num) {
  return "Rp " + num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>

<!-- Add the following script in your HTML page -->
<script>
  $(document).ready(function() {
    const table = $("#service-table");
    const pagination = $("#pagination-service");
    const maxVisiblePages = 5; // Maximum number of visible pagination links

    // Constants to keep track of current page and records per page
    let currentPage = 1;
    const recordsPerPage = 10; // Number of records to show per page

    // Function to fetch and update table data based on the current page and search input
    function updateTableData(page, searchQuery = '') {
      $.ajax({
        url: "get_services_data.php",
        method: "GET",
        data: { page: page, recordsPerPage: recordsPerPage, search: searchQuery },
        dataType: "json",
        success: function(data) {
          // Clear existing table rows
          table.empty();

          // Add table header
          table.append("<thead><tr><th>ID</th><th>Category</th><th>Name</th><th>Price</th><th>Min</th><th>Max</th><th>Action</th></tr></thead>");

          // Add table body with fetched data
          const tbody = $("<tbody></tbody>");
          $.each(data.services, function(index, item) {
            const row = $("<tr class='border-bottom-success'></tr>");
            row.append("<td>" + item.sid + "</td>");
            row.append("<td>" + item.category + "</td>");
            row.append("<td>" + item.service + "</td>");
            row.append("<td>" + formatCurrency(item.price) + "</td>"); // Format the price as currency
            row.append("<td>" + item.min + "</td>");
            row.append("<td>" + item.max + "</td>");
            row.append("<td align='center'>" +
              "<a class='btn btn-xs btn-warning' data-bs-toggle='modal' data-bs-target='#editservicenya" + item.sid + "'><i class='fa fa-edit'></i></a> " +
              "<div class='modal fade' id='editservicenya"+item.sid+"' tabindex='-1' role='dialog' aria-labelledby='exampleModalgetbootstrap' aria-hidden='true'> <div class='modal-dialog' role='document'> <div class='modal-content'> <div class='modal-toggle-wrapper social-profile text-start dark-sign-up'> <h3 class='modal-header justify-content-center border-0'>User Edit</h3> <div class='modal-body'> <form class='row g-3' method='POST'> <div class='col-md-6'> <label class='form-label' for='validationCustom01'>ID</label> <input type='text' class='form-control' value='"+item.sid+"' name='idnya' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Category</label> <input type='text' class='form-control' name='categorynya' value='"+item.category+"' > </div> <div class='col-md-12'> <label class='form-label' for='exampleFormControlInput1'>Service Name</label> <input class='form-control' id='exampleFormControlInput1' type='text' name='servicenya' value='"+item.service+"'> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Price</label> <input type='text' class='form-control' name='harganya' placeholder='Password' value='"+item.price+"' > </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Status</label> <select class='form-control' name='statusnya'> <option value='Active'>Active</option> <option value='Not Active'>Not Active</option> </select> </div> <div class='col-md-12'> <button class='btn btn-primary' type='submit' name='editsepis'>Submit Gan</button> </div> </form> </div> </div> </div> </div> </div>"+
            //   "<a class='btn btn-xs btn-danger' data-bs-toggle='modal' data-bs-target='#deleteservicenya" + item.sid + "'><i class='fa fa-trash-o'></i></a> " +
            //   "<div class='modal fade' id='deleteservicenya"+item.sid+"' tabindex='-1' role='dialog' aria-labelledby='exampleModalgetbootstrap' aria-hidden='true'> <div class='modal-dialog' role='document'> <div class='modal-content'> <div class='modal-toggle-wrapper social-profile text-start dark-sign-up'> <h3 class='modal-header justify-content-center border-0'>Delete Service</h3> <div class='modal-body'> <form class='row g-3' method='POST'> <div class='col-md-6'> <label class='form-label' for='validationCustom01'>ID</label> <input type='text' class='form-control' value='"+item.sid+"' name='idnya' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Category</label> <input type='text' class='form-control' name='categorynya' value='"+item.category+"' readonly> </div> <div class='col-md-12'> <label class='form-label' for='exampleFormControlInput1'>Service Name</label> <input class='form-control' id='exampleFormControlInput1' type='text' name='servicenya' value='"+item.service+"' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Price</label> <input type='text' class='form-control' name='harganya' placeholder='Password' value='"+item.price+"' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Status</label> <select class='form-control' name='statusnya' readonly> <option value='Active'>Active</option> <option value='Not Active'>Not Active</option> </select> </div> <div class='col-md-12'> <button class='btn btn-danger' type='submit' name='delete'>Submit Gan</button> </div> </form> </div> </div> </div> </div> </div>"+
              "</td>");
            tbody.append(row);
          });
          table.append(tbody);

          // Update pagination links
          pagination.empty();
          const totalPages = data.totalPages;
          let startPage = 1;
          let endPage = totalPages;

          if (totalPages > maxVisiblePages) {
            const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
            startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
            endPage = startPage + maxVisiblePages - 1;

            if (endPage > totalPages) {
              endPage = totalPages;
              startPage = Math.max(endPage - maxVisiblePages + 1, 1);
            }
          }

          for (let i = startPage; i <= endPage; i++) {
            pagination.append(
              '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
            );
          }

          // Add navigation arrows for previous and next
          if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }
        },
        error: function(xhr, status, error) {
          console.error("Error fetching data:", error);
        }
      });
    }

    // Function to handle page navigation click
    function handlePaginationClick(event) {
      event.preventDefault();
      const newPage = parseInt($(this).data("page"));
      if (newPage !== currentPage) {
        currentPage = newPage;
        updateTableData(currentPage, $("#search-services").val().trim());
      }
    }

    // Function to handle search input
    $("#search-services").on("input", function() {
      const searchQuery = $(this).val().trim();
      currentPage = 1; // Reset to the first page when performing a new search
      updateTableData(currentPage, searchQuery);
    });

    // Attach pagination click event for individual page numbers
    pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

    // Attach click event for previous and next arrows
    pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
      event.preventDefault();
      const newPage = parseInt($(this).data("page"));
      if (newPage !== currentPage) {
        currentPage = newPage;
        updateTableData(currentPage, $("#search-services").val().trim());
      }
    });

    // Initial table data fetch for the first page
    updateTableData(currentPage);
  });

  // Function to format the number as currency (Rp)
  function formatCurrency(num) {
    return "Rp " + num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
</script>

<!-- Add the following JavaScript code to your HTML page -->
<script>
  $(document).ready(function() {
    const table = $("#order-table");
    const pagination = $("#pagination-order");
    const maxVisiblePages = 5; // Maximum number of visible pagination links

    // Constants to keep track of current page and records per page
    let currentPage = 1;
    const recordsPerPage = 10; // Number of records to show per page

    // Function to fetch and update table data based on the current page and search input
    function updateTableData(page, searchQuery = '') {
      $.ajax({
        url: "get_orders_data.php",
        method: "GET",
        data: { page: page, recordsPerPage: recordsPerPage, search: searchQuery },
        dataType: "json",
        success: function(data) {
          // Clear existing table rows
          table.empty();

          // Add table header
          table.append("<thead><tr><th>Tanggal</th><th>PO ID</th><th>User</th><th>Service</th><th>Link</th><th>Quantity</th><th>Remains</th><th>Start Count</th><th>Price</th><th>Status</th><th>Providers</th><th>Refund</th><th>Action</th></tr></thead>");

          // Add table body with fetched data
          const tbody = $("<tbody></tbody>");
          $.each(data.orders, function(index, item) {
            const row = $("<tr class='border-bottom-success'></tr>");
            row.append("<td>" + item.date + "</td>");
            row.append("<td>" + item.poid + "</td>");
            row.append("<td>" + item.user + "</td>");
            row.append("<td>" + item.service + "</td>");
            row.append("<td>" + item.link + "</td>");
            row.append("<td>" + item.quantity + "</td>");
            row.append("<td>" + item.remains + "</td>");
            row.append("<td>" + item.start_count + "</td>");
            row.append("<td>" + formatCurrency(item.price) + "</td>"); // Format the price as currency
            if (item.status == 'Pending') {
            row.append("<td align='center'><span class='badge badge-warning'>"+item.status+"</span></td>");
          } else if (item.status == 'Processing') {
            row.append("<td align='center'><span class='badge badge-primary'>"+item.status+"</span></td>");
          } else if (item.status == 'Error') {
            row.append("<td align='center'><span class='badge badge-danger'>"+item.status+"</span></td>");
          } else if (item.status == 'Partial') {
            row.append("<td align='center'><span class='badge badge-danger'>"+item.status+"</span></td>");
          } else if (item.status == 'Success') {
            row.append("<td align='center'><span class='badge badge-success'>"+item.status+"</span></td>");
          } else {
            row.append("<td></td>"); // Handle other cases, if needed
          }
            row.append("<td>" + item.provider + "</td>");
            
            // Check the value of "refund" and display the appropriate badge
          if (item.refund === '0') {
            row.append("<td align='center'><span class='badge badge-danger'><i class='fa fa-times'></i></span></td>");
          } else if (item.refund === '1') {
            row.append("<td align='center'><span class='badge badge-success'><i class='fa fa-check'></i></span></td>");
          } else {
            row.append("<td></td>"); // Handle other cases, if needed
          }
            
            row.append("<td align='center'>" +
              "<a class='btn btn-xs btn-warning' data-bs-toggle='modal' data-bs-target='#editordernya" + item.poid + "'><i class='fa fa-edit'></i></a> " +
              "<div class='modal fade' id='editordernya" + item.poid + "' tabindex='-1' role='dialog' aria-labelledby='exampleModalgetbootstrap' aria-hidden='true'> <div class='modal-dialog' role='document'> <div class='modal-content'> <div class='modal-toggle-wrapper social-profile text-start dark-sign-up'> <h3 class='modal-header justify-content-center border-0'>Order Edit</h3> <div class='modal-body'> <form class='row g-3' method='POST'> <div class='col-md-6'> <label class='form-label' for='validationCustom01'>Order ID</label> <input type='text' class='form-control' value='" + item.poid + "' name='poid' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>User</label> <input type='text' class='form-control' name='user' placeholder='User' value='" + item.user + "' readonly> </div> <div class='col-md-12'> <label class='form-label' for='exampleFormControlInput1'>Service</label> <input class='form-control' id='exampleFormControlInput1' type='text' name='service' value='" + item.service + "' readonly> </div> <div class='col-md-12'> <label class='form-label' for='exampleFormControlInput1'>Link</label> <input class='form-control' id='exampleFormControlInput1' type='text' name='link' value='" + item.link + "' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Quantity</label> <input type='text' class='form-control' name='quantity' placeholder='Quantity' value='" + item.quantity + "' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Remains</label> <input type='text' class='form-control' name='remains' placeholder='Remains' value='" + item.remains + "' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Start Count</label> <input type='text' class='form-control' name='start_count' placeholder='Start Count' value='" + item.start_count + "' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Price</label> <input type='text' class='form-control' name='price' placeholder='Price' value='" + item.price + "' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Status</label> <select class='form-control' name='status'> <option value='"+item.status+"'>"+item.status+"</option> <option value='Pending'>Pending</option> <option value='Processing'>Processing</option><option value='Success'>Success</option> <option value='Partial'>Partial</option><option value='Error'>Error</option></select> </div> <div class='col-md-6'> <label class='form-label' for='exampleFormControlInput1'>Providers</label> <input class='form-control' id='exampleFormControlInput1' type='text' name='providers' value='" + item.provider + "' readonly> </div> <div class='col-md-12'> <button class='btn btn-secondary' type='button' data-bs-dismiss='modal'>Close</button> <button class='btn btn-primary' type='submit' name='edit'>Submit Gan</button> </div> </form> </div> </div> </div> </div> </div>" +
              "</td>");
            tbody.append(row);
          });
          table.append(tbody);

          // Update pagination links
          pagination.empty();
          const totalPages = data.totalPages;
          let startPage = 1;
          let endPage = totalPages;

          if (totalPages > maxVisiblePages) {
            const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
            startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
            endPage = startPage + maxVisiblePages - 1;

            if (endPage > totalPages) {
              endPage = totalPages;
              startPage = Math.max(endPage - maxVisiblePages + 1, 1);
            }
          }

          for (let i = startPage; i <= endPage; i++) {
            pagination.append(
              '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
            );
          }

          // Add navigation arrows for previous and next
          if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }
        },
        error: function(xhr, status, error) {
          console.error("Error fetching data:", error);
        }
      });
    }

    // Function to handle page navigation click
    function handlePaginationClick(event) {
      event.preventDefault();
      const newPage = parseInt($(this).data("page"));
      if (newPage !== currentPage) {
        currentPage = newPage;
        updateTableData(currentPage, $("#search-orders").val().trim());
      }
    }

    // Function to handle search input
    $("#search-orders").on("input", function() {
      const searchQuery = $(this).val().trim();
      currentPage = 1; // Reset to the first page when performing a new search
      updateTableData(currentPage, searchQuery);
    });

    // Attach pagination click event for individual page numbers
    pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

    // Attach click event for previous and next arrows
    pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
      event.preventDefault();
      const newPage = parseInt($(this).data("page"));
      if (newPage !== currentPage) {
        currentPage = newPage;
        updateTableData(currentPage, $("#search-orders").val().trim());
      }
    });

    // Initial table data fetch for the first page
    updateTableData(currentPage);
  });

  // Function to format the number as currency (Rp)
  function formatCurrency(num) {
    return "Rp " + num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
</script>

<script>
$(document).ready(function() {
  const table = $("#news-table");
  const pagination = $("#pagination-news");
  const maxVisiblePages = 5; // Maximum number of visible pagination links

  // Constants to keep track of current page and records per page
  let currentPage = 1;
  const recordsPerPage = 10; // Number of records to show per page

  // Function to fetch and update table data based on the current page
  function updateTableData(page) {
    $.ajax({
      url: "get_news_data.php",
      method: "GET",
      data: { page: page, recordsPerPage: recordsPerPage },
      dataType: "json",
      success: function(data) {
        // Clear existing table rows
        table.empty();

        // Add table header
        table.append("<thead><tr><th>No.</th><th>Content</th><th>Date</th></tr></thead>");

        // Add table body with fetched data
        const tbody = $("<tbody></tbody>");
        $.each(data.news, function(index, item) {
          const row = $("<tr></tr>");
          row.append("<td>" + (index + 1) + "</td>");
          row.append("<td>" + nl2br(item.content) + "</td>");
          row.append("<td>" + item.date + "</td>");
          row.append("<td align='center'>" +
              "<a class='btn btn-xs btn-warning' data-bs-toggle='modal' data-bs-target='#editnews" + item.id + "'><i class='fa fa-edit'></i></a> " +
              "<div class='modal fade' id='editnews" + item.id + "' tabindex='-1' role='dialog' aria-labelledby='exampleModalgetbootstrap' aria-hidden='true'> <div class='modal-dialog' role='document'> <div class='modal-content'> <div class='modal-toggle-wrapper social-profile text-start dark-sign-up'> <h3 class='modal-header justify-content-center border-0'>Order Edit</h3> <div class='modal-body'> <form class='row g-3' method='POST'> <div class='col-md-6'> <label class='form-label' for='validationCustom01'>ID</label> <input type='text' class='form-control' value='" + item.id + "' name='id' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Date</label> <input type='text' class='form-control' name='date' placeholder='User' value='" + item.date + "' readonly> </div> <div class='col-md-12'> <label class='form-label' for='exampleFormControlInput1'>Konten</label> <textarea class='form-control' id='exampleFormControlInput1' type='text' name='content'>" + item.content + "</textarea> </div>  <div class='col-md-12'> <button class='btn btn-primary' type='submit' name='edit'>Submit Gan</button> </div> </form> </div> </div> </div> </div> </div>" +
              "<a class='btn btn-xs btn-danger' data-bs-toggle='modal' data-bs-target='#deletenews" + item.id + "'><i class='fa fa-trash-o'></i></a> " +
              "<div class='modal fade' id='deletenews" + item.id + "' tabindex='-1' role='dialog' aria-labelledby='exampleModalgetbootstrap' aria-hidden='true'> <div class='modal-dialog' role='document'> <div class='modal-content'> <div class='modal-toggle-wrapper social-profile text-start dark-sign-up'> <h3 class='modal-header justify-content-center border-0'>Order Edit</h3> <div class='modal-body'> <form class='row g-3' method='POST'> <div class='col-md-6'> <label class='form-label' for='validationCustom01'>ID</label> <input type='text' class='form-control' value='" + item.id + "' name='id' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Date</label> <input type='text' class='form-control' name='date' placeholder='User' value='" + item.date + "' readonly> </div> <div class='col-md-12'> <label class='form-label' for='exampleFormControlInput1'>Konten</label> <textarea class='form-control' id='exampleFormControlInput1' type='text' name='content'>" + item.content + "</textarea> </div>  <div class='col-md-12'> <button class='btn btn-primary' type='submit' name='delete'>Submit Gan</button> </div> </form> </div> </div> </div> </div> </div>" +
              "</td>");
          tbody.append(row);
        });
        table.append(tbody);

        // Update pagination links
        pagination.empty();
        const totalPages = data.totalPages;
        let startPage = 1;
        let endPage = totalPages;

        if (totalPages > maxVisiblePages) {
          const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
          startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
          endPage = startPage + maxVisiblePages - 1;

          if (endPage > totalPages) {
            endPage = totalPages;
            startPage = Math.max(endPage - maxVisiblePages + 1, 1);
          }
        }

        for (let i = startPage; i <= endPage; i++) {
          pagination.append(
            '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
          );
        }

        // Add navigation arrows for previous and next
        if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }
      },
      error: function(xhr, status, error) {
        console.error("Error fetching data:", error);
      }
    });
  }

  // Function to handle page navigation click
  function handlePaginationClick(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage);
    }
  }

  // Attach pagination click event for individual page numbers
  pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

  // Attach click event for previous and next arrows
  pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage);
    }
  });
    
    function nl2br(str) {
    return str.replace(/(?:\r\n|\r|\n)/g, "<br>");
  }
  
  // Initial table data fetch for the first page
  updateTableData(currentPage);
});
</script>

<script>
    $(document).ready(function() {
  const table = $("#staff-table");
  const pagination = $("#pagination");
  const maxVisiblePages = 5; // Maximum number of visible pagination links

  // Constants to keep track of current page and records per page
  let currentPage = 1;
  const recordsPerPage = 10; // Number of records to show per page

  // Function to fetch and update table data based on the current page and search input
  function updateTableData(page, searchQuery = '') {
    $.ajax({
      url: "get_staff_data.php",
      method: "GET",
      data: { page: page, recordsPerPage: recordsPerPage, search: searchQuery },
      dataType: "json",
      success: function(data) {
        // Clear existing table rows
        table.empty();

        // Add table header
        table.append("<thead><tr><th>No.</th><th>Name</th><th>Contact</th><th>Level</th></tr></thead>");

        // Add table body with fetched data
        const tbody = $("<tbody></tbody>");
        $.each(data.staff, function(index, item) {
          const row = $("<tr></tr>");
          row.append("<td>" + item.id + "</td>");
          row.append("<td>" + item.name + "</td>");
          row.append("<td>" + nl2br(item.contact) + "</td>");
          row.append("<td>" + item.level + "</td>");
          row.append("<td align='center'>" +
              "<a class='btn btn-xs btn-warning' data-bs-toggle='modal' data-bs-target='#editstaff" + item.id + "'><i class='fa fa-edit'></i></a> " +
              "<div class='modal fade' id='editstaff" + item.id + "' tabindex='-1' role='dialog' aria-labelledby='exampleModalgetbootstrap' aria-hidden='true'> <div class='modal-dialog' role='document'> <div class='modal-content'> <div class='modal-toggle-wrapper social-profile text-start dark-sign-up'> <h3 class='modal-header justify-content-center border-0'>Order Edit</h3> <div class='modal-body'> <form class='row g-3' method='POST'> <div class='col-md-6'> <label class='form-label' for='validationCustom01'>ID</label> <input type='text' class='form-control' value='" + item.id + "' name='id' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Level</label> <select class='form-control' name='level'> <option value='"+item.level+"'>"+item.level+"</option><option value='Admin'>Admin</option> <option value='Reseller'>Reseller</option></select> </div> <div class='col-md-12'> <label class='form-label' for='validationCustom01'>Name</label> <input type='text' class='form-control' value='" + item.name + "' name='name' > </div> <div class='col-md-12'> <label class='form-label' for='exampleFormControlInput1'>Kontak</label> <textarea class='form-control' id='exampleFormControlInput1' type='text' name='contact'>" + item.contact + "</textarea> </div>  <div class='col-md-12'> <button class='btn btn-primary' type='submit' name='edit'>Submit Gan</button> </div> </form> </div> </div> </div> </div> </div>" +
              "<a class='btn btn-xs btn-danger' data-bs-toggle='modal' data-bs-target='#deletestaff" + item.id + "'><i class='fa fa-trash-o'></i></a> " +
              "<div class='modal fade' id='deletestaff" + item.id + "' tabindex='-1' role='dialog' aria-labelledby='exampleModalgetbootstrap' aria-hidden='true'> <div class='modal-dialog' role='document'> <div class='modal-content'> <div class='modal-toggle-wrapper social-profile text-start dark-sign-up'> <h3 class='modal-header justify-content-center border-0'>Order Edit</h3> <div class='modal-body'> <form class='row g-3' method='POST'> <div class='col-md-6'> <label class='form-label' for='validationCustom01'>ID</label> <input type='text' class='form-control' value='" + item.id + "' name='id' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Level</label> <input type='text' class='form-control' name='date' placeholder='User' value='" + item.level + "' readonly> </div> <div class='col-md-12'> <label class='form-label' for='exampleFormControlInput1'>Kontak</label> <textarea class='form-control' id='exampleFormControlInput1' type='text' name='contact' readonly>" + item.contact + "</textarea> </div>  <div class='col-md-12'> <button class='btn btn-danger' type='submit' name='delete'>Delete Gan</button> </div> </form> </div> </div> </div> </div> </div>" +
              "</td>");
          tbody.append(row);
        });
        table.append(tbody);

        // Update pagination links
        pagination.empty();
        const totalPages = data.totalPages;
        let startPage = 1;
        let endPage = totalPages;

        if (totalPages > maxVisiblePages) {
          const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
          startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
          endPage = startPage + maxVisiblePages - 1;

          if (endPage > totalPages) {
            endPage = totalPages;
            startPage = Math.max(endPage - maxVisiblePages + 1, 1);
          }
        }

        for (let i = startPage; i <= endPage; i++) {
          pagination.append(
            '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
          );
        }

        // Add navigation arrows for previous and next
        if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }
      },
      error: function(xhr, status, error) {
        console.error("Error fetching data:", error);
      }
    });
  }

  // Function to handle page navigation click
  function handlePaginationClick(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-staff").val().trim());
    }
  }

  // Function to handle search input
  $("#search-staff").on("input", function() {
    const searchQuery = $(this).val().trim();
    currentPage = 1; // Reset to the first page when performing a new search
    updateTableData(currentPage, searchQuery);
  });

  // Attach pagination click event for individual page numbers
  pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

  // Attach click event for previous and next arrows
  pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-staff").val().trim());
    }
  });
    
    function nl2br(str) {
    return str.replace(/(?:\r\n|\r|\n)/g, "<br>");
  }
  
  // Initial table data fetch for the first page
  updateTableData(currentPage);
});

</script>

<script>
    $(document).ready(function() {
  const table = $("#transfer-balance-table");
  const pagination = $("#pagination-transfer-balance");
  const maxVisiblePages = 5; // Maximum number of visible pagination links

  // Constants to keep track of current page and records per page
  let currentPage = 1;
  const recordsPerPage = 10; // Number of records to show per page

  // Function to fetch and update table data based on the current page and search input
  function updateTableData(page, searchQuery = '') {
    $.ajax({
      url: "get_transfer_balance_data.php",
      method: "GET",
      data: { page: page, recordsPerPage: recordsPerPage, search: searchQuery },
      dataType: "json",
      success: function(data) {
        // Clear existing table rows
        table.empty();

        // Add table header
        table.append("<thead><tr><th>No.</th><th>Sender</th><th>Receiver</th><th>Quantity</th><th>Date</th></tr></thead>");

        // Add table body with fetched data
        const tbody = $("<tbody></tbody>");
        $.each(data.transferBalance, function(index, item) {
          const row = $("<tr class='border-bottom-success'></tr>");
          row.append("<td>" + (index + 1) + "</td>");
          row.append("<td>" + item.sender + "</td>");
          row.append("<td>" + item.receiver + "</td>");
          row.append("<td>" + formatCurrency(item.quantity) + "</td>"); // Format the quantity as currency
          row.append("<td>" + item.date + "</td>");
          tbody.append(row);
        });
        table.append(tbody);

        // Update pagination links
        pagination.empty();
        const totalPages = data.totalPages;
        let startPage = 1;
        let endPage = totalPages;

        if (totalPages > maxVisiblePages) {
          const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
          startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
          endPage = startPage + maxVisiblePages - 1;

          if (endPage > totalPages) {
            endPage = totalPages;
            startPage = Math.max(endPage - maxVisiblePages + 1, 1);
          }
        }

        for (let i = startPage; i <= endPage; i++) {
          pagination.append(
            '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
          );
        }

        // Add navigation arrows for previous and next
        if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }
      },
      error: function(xhr, status, error) {
        console.error("Error fetching data:", error);
      }
    });
  }

  // Function to handle page navigation click
  function handlePaginationClick(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-transfer-balance").val().trim());
    }
  }

  // Function to handle search input
  $("#search-transfer-balance").on("input", function() {
    const searchQuery = $(this).val().trim();
    currentPage = 1; // Reset to the first page when performing a new search
    updateTableData(currentPage, searchQuery);
  });

  // Attach pagination click event for individual page numbers
  pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

  // Attach click event for previous and next arrows
  pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-transfer-balance").val().trim());
    }
  });

  // Initial table data fetch for the first page
  updateTableData(currentPage);
});

// Function to format the number as currency (Rp)
function formatCurrency(num) {
  return "Rp " + num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

</script>

<script>
$(document).ready(function() {
  const table = $("#note-table");
  const pagination = $("#pagination-note");
  const maxVisiblePages = 5; // Maximum number of visible pagination links

  // Constants to keep track of current page and records per page
  let currentPage = 1;
  const recordsPerPage = 10; // Number of records to show per page

  // Function to fetch and update table data based on the current page and search input
  function updateTableData(page, searchQuery = '') {
    $.ajax({
      url: "get_notes_data.php", // Change this URL to the actual PHP script to fetch notes data
      method: "GET",
      data: { page: page, recordsPerPage: recordsPerPage, search: searchQuery },
      dataType: "json",
      success: function(data) {
        // Clear existing table rows
        table.empty();

        // Add table header
        table.append("<thead><tr><th>No.</th><th>Username</th><th>Note</th><th>Time</th></tr></thead>");

        // Add table body with fetched data
        const tbody = $("<tbody></tbody>");
        $.each(data.notes, function(index, item) {
          const row = $("<tr class='border-bottom-success'></tr>");
          row.append("<td>" + (index + 1) + "</td>");
          row.append("<td>" + item.username + "</td>");
          row.append("<td>" + item.note + "</td>");
          row.append("<td>" + item.waktu + "</td>");
          tbody.append(row);
        });
        table.append(tbody);

        // Update pagination links
        pagination.empty();
        const totalPages = data.totalPages;
        let startPage = 1;
        let endPage = totalPages;

        if (totalPages > maxVisiblePages) {
          const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
          startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
          endPage = startPage + maxVisiblePages - 1;

          if (endPage > totalPages) {
            endPage = totalPages;
            startPage = Math.max(endPage - maxVisiblePages + 1, 1);
          }
        }

        for (let i = startPage; i <= endPage; i++) {
          pagination.append(
            '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
          );
        }

        // Add navigation arrows for previous and next
        if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }
      },
      error: function(xhr, status, error) {
        console.error("Error fetching data:", error);
      }
    });
  }

  // Function to handle page navigation click
  function handlePaginationClick(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-notes").val().trim());
    }
  }

  // Function to handle search input
  $("#search-notes").on("input", function() {
    const searchQuery = $(this).val().trim();
    currentPage = 1; // Reset to the first page when performing a new search
    updateTableData(currentPage, searchQuery);
  });

  // Attach pagination click event for individual page numbers
  pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

  // Attach click event for previous and next arrows
  pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-notes").val().trim());
    }
  });

  // Initial table data fetch for the first page
  updateTableData(currentPage);
});
</script>

<!-- Add the Clipboard.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

<script>
$(document).ready(function() {
  const table = $("#order-history-table");
  const pagination = $("#pagination-orders-history");
  const maxVisiblePages = 5; // Maximum number of visible pagination links

  // Constants to keep track of current page and records per page
  let currentPage = 1;
  const recordsPerPage = 10; // Number of records to show per page

  // Function to fetch and update table data based on the current page and search input
  function updateTableData(page, searchQuery = '') {
    $.ajax({
      url: "get_order_history.php",
      method: "GET",
      data: { page: page, recordsPerPage: recordsPerPage, search: searchQuery },
      dataType: "json",
      success: function(data) {
        // Clear existing table rows
        table.empty();

        // Add table header
        table.append("<thead><tr><th>Tanggal</th><th>Order ID</th><th>Service</th><th>Link</th><th>Quantity</th><th>Start Count</th><th>Remains</th><th>Price</th><th>Status</th><th>Refund</th></tr></thead>");

        // Add table body with fetched data
        const tbody = $("<tbody></tbody>");
        $.each(data.order_history, function(index, item) {
          const row = $("<tr></tr>");
          row.append("<td>" + item.date + "</td>");
          row.append("<td>" + item.oid + " <button class='btn btn-primary btn-xs copy-btn' data-clipboard-text='" + item.oid + "'><i class='fa fa-copy'></i></button></td>");
          row.append("<td>" + item.service + "</td>");
          row.append("<td>" + item.link + " <button class='btn btn-primary btn-xs copy-btn' data-clipboard-text='" + item.link + "'><i class='fa fa-copy'></i></button></td>");
          row.append("<td>" + item.quantity + "</td>");
          row.append("<td>" + item.start_count + "</td>");
          row.append("<td>" + item.remains + "</td>");
          row.append("<td>" + item.price + "</td>");
          // Check the value of "status" and display the appropriate badge
          if (item.status == 'Pending') {
            row.append("<td align='center'><span class='badge badge-warning'>"+item.status+"</span></td>");
          } else if (item.status == 'Processing') {
            row.append("<td align='center'><span class='badge badge-primary'>"+item.status+"</span></td>");
          } else if (item.status == 'Error') {
            row.append("<td align='center'><span class='badge badge-danger'>"+item.status+"</span></td>");
          } else if (item.status == 'Partial') {
            row.append("<td align='center'><span class='badge badge-danger'>"+item.status+"</span></td>");
          } else if (item.status == 'Success') {
            row.append("<td align='center'><span class='badge badge-success'>"+item.status+"</span></td>");
          } else {
            row.append("<td></td>"); // Handle other cases, if needed
          }

          // Check the value of "refund" and display the appropriate badge
          if (item.refund === '0') {
            row.append("<td align='center'><span class='badge badge-danger'><i class='fa fa-times'></i></span></td>");
          } else if (item.refund === '1') {
            row.append("<td align='center'><span class='badge badge-success'><i class='fa fa-check'></i></span></td>");
          } else {
            row.append("<td></td>"); // Handle other cases, if needed
          }

          tbody.append(row);
        });
        table.append(tbody);

        // Update pagination links
        pagination.empty();
        const totalPages = data.totalPages;
        let startPage = 1;
        let endPage = totalPages;

        if (totalPages > maxVisiblePages) {
          const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
          startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
          endPage = startPage + maxVisiblePages - 1;

          if (endPage > totalPages) {
            endPage = totalPages;
            startPage = Math.max(endPage - maxVisiblePages + 1, 1);
          }
        }

        for (let i = startPage; i <= endPage; i++) {
          pagination.append(
            '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
          );
        }

        // Add navigation arrows for previous and next
        if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }

        // Initialize Clipboard.js for copy buttons
        new ClipboardJS('.copy-btn');
      },
      error: function(xhr, status, error) {
        console.error("Error fetching data:", error);
      }
    });
  }

  // Function to handle page navigation click
  function handlePaginationClick(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-orders-historys").val().trim());
    }
  }

  // Function to handle search input
  $("#search-orders-historys").on("input", function() {
    const searchQuery = $(this).val().trim();
    currentPage = 1; // Reset to the first page when performing a new search
    updateTableData(currentPage, searchQuery);
  });

  // Attach pagination click event for individual page numbers
  pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

  // Attach click event for previous and next arrows
  pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-orders-historys").val().trim());
    }
  });

  // Initial table data fetch for the first page
  updateTableData(currentPage);
});
</script>

<script>
$(document).ready(function() {
  const table = $("#order-monitor-table");
  const pagination = $("#pagination-orders-monitor");
  const maxVisiblePages = 5; // Maximum number of visible pagination links

  // Constants to keep track of current page and records per page
  let currentPage = 1;
  const recordsPerPage = 10; // Number of records to show per page

  // Function to fetch and update table data based on the current page and search input
  function updateTableData(page, searchQuery = '') {
    $.ajax({
      url: "get_monitoring.php",
      method: "GET",
      data: { page: page, recordsPerPage: recordsPerPage, search: searchQuery },
      dataType: "json",
      success: function(data) {
        // Clear existing table rows
        table.empty();

        // Add table header
        table.append("<thead><tr><th>Date</th><th>Service</th><th>Status</th></tr></thead>");

        // Add table body with fetched data
        const tbody = $("<tbody></tbody>");
        $.each(data.order_history, function(index, item) {
          const row = $("<tr></tr>");
          row.append("<td>" + item.date + "</td>");
          row.append("<td>" + item.service + "</td>");
          // Check the value of "status" and display the appropriate badge
          if (item.status == 'Pending') {
            row.append("<td align='center'><span class='badge badge-warning'>"+item.status+"</span></td>");
          } else if (item.status == 'Processing') {
            row.append("<td align='center'><span class='badge badge-primary'>"+item.status+"</span></td>");
          } else if (item.status == 'Error') {
            row.append("<td align='center'><span class='badge badge-danger'>"+item.status+"</span></td>");
          } else if (item.status == 'Partial') {
            row.append("<td align='center'><span class='badge badge-danger'>"+item.status+"</span></td>");
          } else if (item.status == 'Success') {
            row.append("<td align='center'><span class='badge badge-success'>"+item.status+"</span></td>");
          } else {
            row.append("<td></td>"); // Handle other cases, if needed
          }

          // Check the value of "refund" and display the appropriate badge
          if (item.refund === '0') {
            row.append("<td align='center'><span class='badge badge-danger'><i class='fa fa-times'></i></span></td>");
          } else if (item.refund === '1') {
            row.append("<td align='center'><span class='badge badge-success'><i class='fa fa-check'></i></span></td>");
          } else {
            row.append("<td></td>"); // Handle other cases, if needed
          }

          tbody.append(row);
        });
        table.append(tbody);

        // Update pagination links
        pagination.empty();
        const totalPages = data.totalPages;
        let startPage = 1;
        let endPage = totalPages;

        if (totalPages > maxVisiblePages) {
          const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
          startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
          endPage = startPage + maxVisiblePages - 1;

          if (endPage > totalPages) {
            endPage = totalPages;
            startPage = Math.max(endPage - maxVisiblePages + 1, 1);
          }
        }

        for (let i = startPage; i <= endPage; i++) {
          pagination.append(
            '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
          );
        }

        // Add navigation arrows for previous and next
        if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }

        // Initialize Clipboard.js for copy buttons
        new ClipboardJS('.copy-btn');
      },
      error: function(xhr, status, error) {
        console.error("Error fetching data:", error);
      }
    });
  }

  // Function to handle page navigation click
  function handlePaginationClick(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-orders-historys").val().trim());
    }
  }

  // Function to handle search input
  $("#search-orders-historys").on("input", function() {
    const searchQuery = $(this).val().trim();
    currentPage = 1; // Reset to the first page when performing a new search
    updateTableData(currentPage, searchQuery);
  });

  // Attach pagination click event for individual page numbers
  pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

  // Attach click event for previous and next arrows
  pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-orders-historys").val().trim());
    }
  });

  // Initial table data fetch for the first page
  updateTableData(currentPage);
});
</script>

<script>
    $(document).ready(function() {
  const table = $("#topup-table");
  const pagination = $("#pagination-topup");
  const maxVisiblePages = 5; // Maximum number of visible pagination links

  // Constants to keep track of current page and records per page
  let currentPage = 1;
  const recordsPerPage = 10; // Number of records to show per page

  // Function to fetch and update table data based on the current page and search input
  function updateTableData(page, searchQuery = '') {
    $.ajax({
      url: "get_topup_data.php",
      method: "GET",
      data: { page: page, recordsPerPage: recordsPerPage, search: searchQuery },
      dataType: "json",
      success: function(data) {
        // Clear existing table rows
        table.empty();

        // Add table header
        table.append("<thead><tr><th>ID</th><th>Jumlah</th><th>Status</th><th>Tanggal</th></tr></thead>");

        // Add table body with fetched data
        const tbody = $("<tbody></tbody>");
        $.each(data.topup, function(index, item) {
          const row = $("<tr></tr>");
          row.append("<td>" + item.id + "</td>");
          row.append("<td>" + item.jumlah + "</td>");
          if (item.status == 'Waiting') {
            row.append("<td><span class='badge badge-warning'>"+item.status+"</span></td>");
          } else if (item.status == 'Completed') {
            row.append("<td><span class='badge badge-success'>"+item.status+"</span></td>");
          } else if (item.status == 'Canceled') {
            row.append("<td><span class='badge badge-danger'>"+item.status+"</span></td>");
          }
          row.append("<td>" + item.tanggal + "</td>");
          tbody.append(row);
        });
        table.append(tbody);

        // Update pagination links
        pagination.empty();
        const totalPages = data.totalPages;
        let startPage = 1;
        let endPage = totalPages;

        if (totalPages > maxVisiblePages) {
          const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
          startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
          endPage = startPage + maxVisiblePages - 1;

          if (endPage > totalPages) {
            endPage = totalPages;
            startPage = Math.max(endPage - maxVisiblePages + 1, 1);
          }
        }

        for (let i = startPage; i <= endPage; i++) {
          pagination.append(
            '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
          );
        }

        // Add navigation arrows for previous and next
        if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }
      },
      error: function(xhr, status, error) {
        console.error("Error fetching data:", error);
      }
    });
  }

  // Function to handle page navigation click
  function handlePaginationClick(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-topup").val().trim());
    }
  }

  // Function to handle search input
  $("#search-topup").on("input", function() {
    const searchQuery = $(this).val().trim();
    currentPage = 1; // Reset to the first page when performing a new search
    updateTableData(currentPage, searchQuery);
  });

  // Attach pagination click event for individual page numbers
  pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

  // Attach click event for previous and next arrows
  pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-topup").val().trim());
    }
  });

  // Initial table data fetch for the first page
  updateTableData(currentPage);
});
</script>

<script>
    $(document).ready(function() {
  const table = $("#catatan-table");
  const pagination = $("#pagination-catatan");
  const maxVisiblePages = 5; // Maximum number of visible pagination links

  // Constants to keep track of current page and records per page
  let currentPage = 1;
  const recordsPerPage = 10; // Number of records to show per page

  // Function to fetch and update catatan data based on the current page and search input
  function updateCatatanData(page, searchQuery = '') {
    $.ajax({
      url: "get_catatan_data.php",
      method: "GET",
      data: { page: page, recordsPerPage: recordsPerPage, search: searchQuery },
      dataType: "json",
      success: function(data) {
        // Clear existing table rows
        table.empty();

        // Add table header
        table.append("<thead><tr><th>Note</th><th>Waktu</th></tr></thead>");

        // Add table body with fetched data
        const tbody = $("<tbody></tbody>");
        $.each(data.catatan, function(index, item) {
          const row = $("<tr></tr>");
          row.append("<td>" + item.note + "</td>");
          row.append("<td>" + item.waktu + "</td>");
          tbody.append(row);
        });
        table.append(tbody);

        // Update pagination links
        pagination.empty();
        const totalPages = data.totalPages;
        let startPage = 1;
        let endPage = totalPages;

        if (totalPages > maxVisiblePages) {
          const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
          startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
          endPage = startPage + maxVisiblePages - 1;

          if (endPage > totalPages) {
            endPage = totalPages;
            startPage = Math.max(endPage - maxVisiblePages + 1, 1);
          }
        }

        for (let i = startPage; i <= endPage; i++) {
          pagination.append(
            '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
          );
        }

        // Add navigation arrows for previous and next
        if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }
      },
      error: function(xhr, status, error) {
        console.error("Error fetching data:", error);
      }
    });
  }

  // Function to handle page navigation click
  function handlePaginationClick(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateCatatanData(currentPage, $("#search-catatan").val().trim());
    }
  }

  // Function to handle search input
  $("#search-catatan").on("input", function() {
    const searchQuery = $(this).val().trim();
    currentPage = 1; // Reset to the first page when performing a new search
    updateCatatanData(currentPage, searchQuery);
  });

  // Attach pagination click event for individual page numbers
  pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

  // Attach click event for previous and next arrows
  pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateCatatanData(currentPage, $("#search-catatan").val().trim());
    }
  });

  // Initial catatan data fetch for the first page
  updateCatatanData(currentPage);
});

</script>

<script>
    $(document).ready(function() {
  const table = $("#history_balance-table");
  const pagination = $("#pagination-history_balance");
  const maxVisiblePages = 5; // Maximum number of visible pagination links

  // Constants to keep track of current page and records per page
  let currentPage = 1;
  const recordsPerPage = 10; // Number of records to show per page

  // Function to fetch and update topup data based on the current page and search input
  function updateTopupData(page, searchQuery = '') {
    $.ajax({
      url: "get_history_balancenya.php",
      method: "GET",
      data: { page: page, recordsPerPage: recordsPerPage, search: searchQuery },
      dataType: "json",
      success: function(data) {
        // Clear existing table rows
        table.empty();

        // Add table header
        table.append("<thead><tr><th>ACTION</th><th>NOMINAL</th><th>MESSAGE</th><th>DATE</th></tr></thead>");

        // Add table body with fetched data
        const tbody = $("<tbody></tbody>");
        $.each(data.topup, function(index, item) {
          const row = $("<tr></tr>");
          row.append("<td><span class='label " + getActionLabelClass(item.action) + "'>" + item.action + "</span></td>");
          row.append("<td><span class='label " + getActionQuantityClass(item.action) + "'>Rp " + item.quantity + "</span></td>");
          row.append("<td>" + item.msg + "</td>");
          row.append("<td>" + item.date + "</td>");
          tbody.append(row);
        });
        table.append(tbody);

        // Update pagination links
        pagination.empty();
        const totalPages = data.totalPages;
        let startPage = 1;
        let endPage = totalPages;

        if (totalPages > maxVisiblePages) {
          const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
          startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
          endPage = startPage + maxVisiblePages - 1;

          if (endPage > totalPages) {
            endPage = totalPages;
            startPage = Math.max(endPage - maxVisiblePages + 1, 1);
          }
        }

        for (let i = startPage; i <= endPage; i++) {
          pagination.append(
            '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
          );
        }

        // Add navigation arrows for previous and next
        if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }
      },
      error: function(xhr, status, error) {
        console.error("Error fetching data:", error);
      }
    });
  }

  // Function to get the appropriate label class based on the action
  function getActionLabelClass(action) {
    return action === "Cut Balance" ? "alert alert-danger" : "alert alert-success";
  }

  // Function to get the appropriate quantity class based on the action
  function getActionQuantityClass(action) {
    return action === "Cut Balance" ? "alert alert-danger" : "alert alert-success";
  }

  // Function to handle page navigation click
  function handlePaginationClick(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTopupData(currentPage, $("#search-history_balance").val().trim());
    }
  }

  // Function to handle search input
  $("#search-history_balance").on("input", function() {
    const searchQuery = $(this).val().trim();
    currentPage = 1; // Reset to the first page when performing a new search
    updateTopupData(currentPage, searchQuery);
  });

  // Attach pagination click event for individual page numbers
  pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

  // Attach click event for previous and next arrows
  pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTopupData(currentPage, $("#search-history_balance").val().trim());
    }
  });

  // Initial topup data fetch for the first page
  updateTopupData(currentPage);
});

</script>

<script>
  $(document).ready(function() {
    const table = $("#topupgan-table");
    const pagination = $("#pagination-topupgan");
    const maxVisiblePages = 5; // Maximum number of visible pagination links

    // Constants to keep track of current page and records per page
    let currentPage = 1;
    const recordsPerPage = 10; // Number of records to show per page

    // Function to fetch and update table data based on the current page and search input
    function updateTableData(page, searchQuery = '') {
      $.ajax({
        url: "get_topup_datas.php",
        method: "GET",
        data: { page: page, recordsPerPage: recordsPerPage, search: searchQuery },
        dataType: "json",
        success: function(data) {
          // Clear existing table rows
          table.empty();

          // Add table header
          table.append("<thead><tr><th>ID</th><th>Username</th><th>Jumlah</th><th>Kode Unik</th><th>Status</th><th>Tanggal</th><th>#</th></tr></thead>");

          // Add table body with fetched data
          const tbody = $("<tbody></tbody>");
          $.each(data.topups, function(index, item) {
                    const row = $("<tr class='border-bottom-success'></tr>");
                    row.append("<td>" + item.id + "</td>");
                    row.append("<td>" + item.username + "</td>");
                    row.append("<td>" + item.jumlah + "</td>");
                    row.append("<td>" + item.kode_unik + "</td>");
                    if (item.status == 'Waiting') {
            row.append("<td><span class='badge badge-warning'>"+item.status+"</span></td>");
          }  else if (item.status == 'Canceled') {
            row.append("<td><span class='badge badge-danger'>"+item.status+"</span></td>");
          }  else if (item.status == 'Completed') {
            row.append("<td><span class='badge badge-success'>"+item.status+"</span></td>");
          } else {
            row.append("<td></td>"); // Handle other cases, if needed
          }
                    row.append("<td>" + item.tanggal + "</td>");
                    row.append("<td>" +
              "<a class='btn btn-xs btn-danger' data-bs-toggle='modal' data-bs-target='#deletetopup" + item.id + "'><i class='fa fa-trash-o'></i></a> " +
              "<div class='modal fade' id='deletetopup" + item.id + "' tabindex='-1' role='dialog' aria-labelledby='exampleModalgetbootstrap' aria-hidden='true'> <div class='modal-dialog' role='document'> <div class='modal-content'> <div class='modal-toggle-wrapper social-profile text-start dark-sign-up'> <h3 class='modal-header justify-content-center border-0'>Order Edit</h3> <div class='modal-body'> <form class='row g-3' method='POST'> <div class='col-md-6'> <label class='form-label' for='validationCustom01'>ID</label> <input type='text' class='form-control' value='" + item.id + "' name='id' readonly> </div> <div class='col-md-6'> <label class='form-label' for='validationCustom02'>Jumlah</label> <input type='text' class='form-control' name='date' placeholder='User' value='" + item.jumlah + "' readonly> </div> <div class='col-md-12'> <label class='form-label' for='validationCustom02'>Username</label> <input type='text' class='form-control' name='date' placeholder='User' value='" + item.username + "' readonly> </div>  <div class='col-md-12'> <button class='btn btn-primary' type='submit' name='delete'>Submit Gan</button> </div> </form> </div> </div> </div> </div> </div>" +
              "</td>");
                    tbody.append(row);
                });
                table.append(tbody);

          // Update pagination links
          pagination.empty();
          const totalPages = data.totalPages;
          let startPage = 1;
          let endPage = totalPages;

          if (totalPages > maxVisiblePages) {
            const halfMaxVisiblePages = Math.floor(maxVisiblePages / 2);
            startPage = Math.max(currentPage - halfMaxVisiblePages, 1);
            endPage = startPage + maxVisiblePages - 1;

            if (endPage > totalPages) {
              endPage = totalPages;
              startPage = Math.max(endPage - maxVisiblePages + 1, 1);
            }
          }

          for (let i = startPage; i <= endPage; i++) {
            pagination.append(
              '<li class="page-item' + (i === currentPage ? ' active' : '') + '"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>'
            );
          }

          // Add navigation arrows for previous and next
          if (currentPage > 1) {
            pagination.prepend(
              '<li class="page-item' + (1 === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="1">First</a></li>'+
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage - 1) + '">&#171;</a></li>'
            );
          }

          if (currentPage < totalPages) {
            pagination.append(
              '<li class="page-item"><a class="page-link" href="#" data-page="' + (currentPage + 1) + '">&#187;</a></li>'+
              '<li class="page-item' + (totalPages === currentPage ? ' disabled' : '') + '"><a class="page-link" href="#" data-page="' + totalPages + '">Last</a></li>'
            );
          }
        },
        error: function(xhr, status, error) {
          console.error("Error fetching data:", error);
        }
      });
    }

    // Function to handle page navigation click
  function handlePaginationClick(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-topups").val().trim());
    }
  }

  // Function to handle search input
  $("#search-topups").on("input", function() {
    const searchQuery = $(this).val().trim();
    currentPage = 1; // Reset to the first page when performing a new search
    updateTableData(currentPage, searchQuery);
  });

  // Attach pagination click event for individual page numbers
  pagination.on("click", "li.page-item:not(.active) a.page-link", handlePaginationClick);

  // Attach click event for previous and next arrows
  pagination.on("click", "li.page-item a.page-link[data-page]", function(event) {
    event.preventDefault();
    const newPage = parseInt($(this).data("page"));
    if (newPage !== currentPage) {
      currentPage = newPage;
      updateTableData(currentPage, $("#search-topups").val().trim());
    }
  });

  // Initial table data fetch for the first page
  updateTableData(currentPage);
});

  // Function to format the number as currency (Rp)
  function formatCurrency(num) {
    return "Rp " + num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  }
</script>

<script type="text/javascript">
    function copy_to_clipboard(element) {
        var copyText = document.getElementById(element);
        copyText.select();
        document.execCommand("copy");
    }
</script>

<?php include('partial/footer-end.php') ?>