<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TexprintApp - Cardinal Alpha V.0.5</title>

    <!-- Plugins -->
    <link rel="stylesheet" type="text/css" href="https://texapp.is3.cloudhost.id/api/krystal/assets/plugins/metismenu/metisMenu.min.css" />
    <link rel="stylesheet" type="text/css" href="https://texapp.is3.cloudhost.id/api/krystal/assets/plugins/metismenu/mm-vertical.css" />
     <link rel="stylesheet" type="text/css" href="https://texapp.is3.cloudhost.id/api/krystal/assets/plugins/slick/slick.css" />
     <link rel="stylesheet" type="text/css" href="https://texapp.is3.cloudhost.id/api/krystal/assets/plugins/slick/slick-theme.css" />
 <!-- Generics -->

 <link rel="icon" href="https://s3.ap-southeast-1.wasabisys.com/c361529/api/cdn/image/clock-image.png" sizes="32x32">

<link rel="icon" href="https://s3.ap-southeast-1.wasabisys.com/c361529/api/cdn/image/clock-image.png" sizes="128x128">

<link rel="icon" href="https://s3.ap-southeast-1.wasabisys.com/c361529/api/cdn/image/clock-image.png" sizes="192x192">



<!-- Android -->

<link rel="shortcut icon" href="https://s3.ap-southeast-1.wasabisys.com/c361529/api/cdn/image/clock-image.png" sizes="196x196">



<!-- iOS -->

<link rel="apple-touch-icon" href="https://s3.ap-southeast-1.wasabisys.com/c361529/api/cdn/image/clock-image.png" sizes="152x152">

<link rel="apple-touch-icon" href="https://s3.ap-southeast-1.wasabisys.com/c361529/api/cdn/image/clock-image.png" sizes="167x167">

<link rel="apple-touch-icon" href="https://s3.ap-southeast-1.wasabisys.com/c361529/api/cdn/image/clock-image.png" sizes="180x180">
    <!--CSS Files-->
    <link href="https://texapp.is3.cloudhost.id/api/krystal/assets/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
    <link href="https://texapp.is3.cloudhost.id/api/krystal/assets/css/style.css" rel="stylesheet"/>
    <link href="https://texapp.is3.cloudhost.id/api/krystal/assets/css/dark-theme.css" rel="stylesheet"/>
  </head>
  <body>

    <!--page loader-->
    <div class="loader-wrapper">
      <div class="d-flex justify-content-center align-items-center position-absolute top-50 start-50 translate-middle">
        <div class="spinner-border text-white" role="status">
          <span class="visually-hidden">Loading... </span>
          <a href="<?php echo base_url('invoice/qcapp'); ?>" class="btn btn-outline-dark btn-ecomm rounded-3 mt-3">Reload</a>
        </div>
      </div>
    </div>
   <!--end loader-->

   <!--start wrapper-->
    <div class="wrapper">

       <!--start to header-->
       <header class="top-header fixed-top border-bottom d-flex align-items-center">
        <nav class="navbar navbar-expand w-100 p-0 gap-3 align-items-center">
            <div class="nav-button" onclick=""><a href="<?php echo base_url('/'); ?>"><i class="bi bi-arrow-left"></i></a></div>
            <div class="shop-Cart">
              <h6 class="mb-0 fw-bold text-dark">Texprint</h6>
            </div>
            <form class="searchbar">
              <div class="position-absolute top-50 translate-middle-y search-icon start-0 ms-4"><i class="bi bi-search"></i></div>
              <input class="form-control px-5" id="searchInput" type="text" placeholder="Search for anything">
              <div class="position-absolute top-50 translate-middle-y end-0 search-close-icon me-4"><i class="bi bi-x-lg"></i></div>
            </form>
            <ul class="navbar-nav ms-auto d-flex align-items-center top-right-menu">
              <li class="nav-item mobile-search-button">
                <a class="nav-link" href="javascript:;"><i class="bi bi-search"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link"  href="#offcanvasSortBy" data-bs-toggle="offcanvas"><i class="bi bi-filter-right"></i></a>
              </li>
            </ul>
        </nav>
       </header>
        <!--end to header-->

      <!--start to page content-->
       <div class="page-content">


       <!--start cart list-->
         <div class="cart-list d-flex flex-column gap-4">
          
         <div id="orders"></div>


         
         </div><!--end cart list-->


       </div>
     <!--end to page content-->


     <!--start to footer-->
       <footer class="page-footer fixed-bottom border-top d-flex align-items-center px-0">
          <div class="hstack align-items-center justify-content-center w-100 align-items-stretch">
              <div id="pagination" class="mt-3"></div>
          </div>
       </footer>
       <!--end to footer-->

       <!--start sidenav-->
   
       <div class="offcanvas offcanvas-bottom h-auto" tabindex="-1" id="offcanvasSortBy">
        <div class="offcanvas-header border-bottom justify-content-center">
          <h6 class="offcanvas-title mb-0 fw-bold text-uppercase text-dark">Filter</h6>
        </div>
        <div class="offcanvas-body p-0">
          <ul class="list-group list-group-flush text-center">
            <li class="list-group-item fw-bold text-uppercase mb-4 mt-4">
              <div class="form-group mb-4">
              <select class="form-control" id="filter">
              <option value="">Semua</option>
                <option value="1">Siap Kirim</option>
                <option value="2">Dalam Pengerjaan</option>
                <option value="3">Parsial</option>
              </select>
            </div></li>
          </ul>
        </div>
      </div>
  <!--end sidenav-->

    </div>
   <!--end wrapper-->


    <!--JS Files-->  
    <script src="https://texapp.is3.cloudhost.id/api/krystal/assets/js/bootstrap.bundle.min.js"></script>

    <script src="https://texapp.is3.cloudhost.id/api/krystal/assets/js/jquery.min.js"></script>
    <script src="https://texapp.is3.cloudhost.id/api/krystal/assets/js/cookies-theme-switcher.js"></script>
    <script src="https://texapp.is3.cloudhost.id/api/krystal/assets/plugins/metismenu/metisMenu.min.js"></script>
    <script src="https://texapp.is3.cloudhost.id/api/krystal/assets/plugins/slick/slick.min.js"></script>
    <script src="https://texapp.is3.cloudhost.id/api/krystal/assets/js/main.js"></script>
    <script src="https://texapp.is3.cloudhost.id/api/krystal/assets/js/loader.js"></script>
    <script>
$(document).ready(function() {
// Event listener untuk form pencarian

    $('#searchInput').on('input', function() {
      var searchQuery = $(this).val(); // Mendapatkan nilai pencarian dari input
        var filterValue = $('#filter').val();
        loadOrders(1, searchQuery, filterValue); // Memuat data sesuai dengan nilai pencarian
    });
    $('#filter').change(function() {
            var searchQuery = $('#searchInput').val(); // Mendapatkan nilai pencarian
            var filterValue = $(this).val(); // Mendapatkan nilai filter yang baru dipilih
            loadOrders(1, searchQuery, filterValue); // Memuat data sesuai dengan nilai pencarian dan filter
        });

loadOrders(); // Memuat data tanpa pencarian saat pertama kali halaman dimuat

function loadOrders(page = 1, searchQuery = '', filterValue = '') {
    $('.loader-wrapper').show();
$.ajax({
    url: '<?php echo base_url('invoice/test'); ?>?page=' + page + '&search=' + searchQuery + '&filter=' + filterValue,
    method: 'GET',
    dataType: 'json',
    success: function(response) {
        $('#orders').empty();
        // Menampilkan data Order beserta OrderItem seperti sebelumnya
        $.each(response.orders, function(index, order) {
            var statusButton = '';
            if (order.status_produksi == 2) {
                statusButton = ' <span class="badge bg-warning rounded-0">Dalam Pengerjaan</span>';
            } else if (order.status_produksi == 1) {
                statusButton = '<span class="badge bg-green rounded-0">Siap Kirim</span>';
            } else if (order.status_produksi == 3) {
                statusButton = '<button type="button" class="btn btn-sm btn-light rounded-3" style ="background-color:#fff6cc;">Kirim Parsial</button>';
            }
            var cat_order2 = '';
            if (order.cat_order2 == 1) {
                cat_order2 = '<span class="badge bg-danger rounded-0">Sameday</span>';
            }

            var orderHtml = '<div class="card rounded-3 overflow-hidden mb-2">' +
                '<div class="card-body">' +
                '<div class="d-flex flex-row align-items-start align-items-stretch gap-3">' +
                '<div class="product-info flex-grow-1">' +
                '<h6 class="fw-bold mb-0 text-dark mb-3">' + order.customer_name + ' - ' + order.bill_no + '</h6>' +
                '<div class="product-price d-flex align-items-center gap-2 mt-2">' +
                '<div class="fw-bold text-dark">Tanggal Order</div>' +
                '<p class="mt-1 fw-bold mb-0 mt-0 text-success">' + order.tanggal_order + '</p>' +

                '</div>' +
                '<div class="mt-3 hstack gap-2">'+
                '' + statusButton + '' +
                '' + cat_order2 + '' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>';

            orderHtml += '<table class="table table-hover"><thead><tr><th style="width:70%">Nama File</th><th style="width:15%">Qty</th><th style="width:15%">jenis</th></tr></thead><tbody>';
            $.each(order.items, function(index, item) {
                orderHtml += '<tr>' +
                    '<td><p class="mb-2 mt-2">' + item.details + '</p></td>' +
                    '<td><p class="mb-2 mt-2">' + item.totalqc + ' / ' + item.qty + '</p></td>' +
                    '<td><p class="mb-2 mt-2"><b>' + item.product_name + '</b></p></td>' +
                    '</tr>';
            });
            orderHtml += '</tbody></table><a href="<?php echo base_url('invoice/qcupdate'); ?>?kode=' + order.bill_no + '" class="btn btn-ecomm rounded-3 btn-dark flex-fill">View All<i class="bi bi-arrow-right ms-2"></i></a></div>';
            $('.loader-wrapper').hide();
            $('#orders').append(orderHtml);
        });

        var paginationHtml = '<nav aria-label="Page navigation">' +
'<ul class="pagination justify-content-center">';

// Tautan untuk halaman pertama
paginationHtml += '<li class="page-item"><a class="page-link" href="#" data-page="1">First</a></li>';

// Tautan untuk halaman sebelumnya, jika halaman saat ini bukan halaman pertama
if (response.pager.currentPage > 1) {
paginationHtml += '<li class="page-item"><a class="page-link" href="#" data-page="' + (response.pager.currentPage - 1) + '">Prev</a></li>';
} else {
paginationHtml += '<li class="page-item disabled"><span class="page-link">Prev</span></li>';
}

// Batasi jumlah halaman yang ditampilkan menjadi maksimal 5
var startPage = Math.max(1, response.pager.currentPage - 2);
var endPage = Math.min(response.pager.totalPages, startPage + 4);
for (var i = startPage; i <= endPage; i++) {
if (i == response.pager.currentPage) {
paginationHtml += '<li class="page-item active"><span class="page-link">' + i + '</span></li>';
} else {
paginationHtml += '<li class="page-item"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>';
}
}

// Tautan untuk halaman berikutnya, jika halaman saat ini bukan halaman terakhir
if (response.pager.currentPage < response.pager.totalPages) {
paginationHtml += '<li class="page-item"><a class="page-link" href="#" data-page="' + (parseInt(response.pager.currentPage) + 1) + '">Next</a></li>';
} else {
paginationHtml += '<li class="page-item disabled"><span class="page-link">Next</span></li>';
}

// Tautan untuk halaman terakhir
paginationHtml += '<li class="page-item"><a class="page-link" href="#" data-page="' + response.pager.totalPages + '">Last</a></li>';

paginationHtml += '</ul></nav>';
$('#pagination').html(paginationHtml);




    },
    error: function(xhr, status, error) {
        // Menampilkan pesan kesalahan jika mendapat respons kode status 500
        if (xhr.status === 500) {
            var errorHtml = '<div class="card rounded-3 border-0 bg-transparent">' +
                '<div class="card-body">' +
                '<div class="text-center error-img">' +
                '<img src="assets/images/social-icons/error.webp" width="80" alt="">' +
                '<h5 class="text-dark mt-4 fw-bold">Error!</h5>' +
                '<p class="mb-0">NO ENTRY</p>' +
                '<a href="<?php echo base_url('invoice/qcapp'); ?>" class="btn btn-outline-dark btn-ecomm rounded-3 mt-3">Reload</a>' +
                '</div>' +
                '</div>' +
                '</div>';
            $('#orders').html(errorHtml);
            $('.loader-wrapper').hide();
        }
    }
});
}

// Event listener untuk pagination
$(document).on('click', '.page-link', function(event) {
event.preventDefault();
var page = $(this).data('page');
var searchQuery = $('#searchInput').val();
var filterValue = $('#filter').val();
 // Mendapatkan nilai pencarian saat mengklik halaman
loadOrders(page, searchQuery, filterValue);
});
});

</script>

  </body>
</html>