<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Orders</title>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
    <div class="container mt-5">
        <!-- Form pencarian -->
        <form id="searchForm" class="form-inline mb-3">
            <div class="form-group mr-2">
                <label for="searchInput" class="sr-only">Search</label>
                <input type="text" class="form-control" id="searchInput" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-primary">Search</button>
        </form>

        <!-- Daftar Order -->
        <div id="orders" class="row"></div>

        <!-- Pagination -->
        <div id="pagination" class="mt-3"></div>
    </div>

    <!-- Include jQuery and Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <!-- Include custom JavaScript -->
    <script>
        $(document).ready(function() {
    // Event listener untuk form pencarian
    $('#searchForm').submit(function(event) {
        event.preventDefault(); // Mencegah pengiriman form bawaan browser
        var searchQuery = $('#searchInput').val(); // Mendapatkan nilai pencarian dari input
        loadOrders(1, searchQuery); // Memuat data sesuai dengan nilai pencarian
    });

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

    function loadOrders(page = 1, searchQuery = '') {
        $.ajax({
            url: '<?php echo base_url('invoice/test'); ?>?page=' + page + '&search=' + searchQuery,
            method: 'GET',
            dataType: 'json',
            success: function(response) {
                $('#orders').empty();
                // Menampilkan data Order beserta OrderItem seperti sebelumnya
                $.each(response.orders, function(index, order) {
                    var orderHtml = '<div class="card">' +
                        '<div class="card-body">' +
                        '<h5 class="card-title">Order Data</h5>' +
                        '<p class="card-text">Bill No: ' + order.bill_no + '</p>' +
                        '<p class="fw-bold mb-0 mt-0 text-success>Tanggal Order: ' + order.tanggal_order + '</p>' +
                        '<p class="card-text">Status Order: ' + order.status_order + '</p>' +
                        '<p class="card-text">Status Produksi: ' + order.status_produksi + '</p>' +
                        '</div>';
                    orderHtml += '<ul class="list-group list-group-flush">';
                    $.each(order.items, function(index, item) {
                        orderHtml += '<li class="list-group-item">Order Item Data' +
                            '<p>Order ID: ' + item.order_id + '</p>' +
                            '<p>Product ID: ' + item.product_name + '</p>' +
                            '<p>Quantity: ' + item.qty + '</p>' +
                            '<p>Width: ' + item.width + '</p>' +
                            '<p>PCS: ' + item.pcs + '</p>' +
                            '</li>';
                    });
                    orderHtml += '</ul></div>';

                    $('#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) + '">Previous</a></li>';
} else {
    paginationHtml += '<li class="page-item disabled"><span class="page-link">Previous</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);




            }
        });
    }

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

    </script>
</body>

</html>
