<div class="container-jcph">
    <div class="card-header text-center"><h4><%= title %></h4></div>
    <div class="table-responsive mt-2">
        <table class="table table-bordered table-striped table-hover">
            <thead class="thead-dark" style="text-transform: uppercase;">
                <tr>
                    <th>Invoice Number</th>
                    <th>Business Name</th>
                    <th class="text-center">Orders</th>
                    <th class="text-right">Amount</th>
                    <th class="text-center">Payment</th>
                </tr>
            </thead>
            <tbody id="invoiceTableBody">
                <% 
                    // Sort invoices by IsPaid (unpaid invoices first) and then by BusinessName
                    invoices.sort((a, b) => {
                        if (a.IsPaid === b.IsPaid) {
                            return a.BusinessName.localeCompare(b.BusinessName);
                        }
                        return a.IsPaid - b.IsPaid;
                    });
                    invoices.slice(0, 25).forEach(invoice => { 
                %>
                    <tr>
                        <td class="nowrap">
                            <form action="/payment/view-invoice" method="GET" style="display:inline;">
                                <input type="hidden" name="invoiceNumber" value="<%= invoice.InvoiceNumber %>">
                                <button type="submit" class="btn btn-primary btn-sm"><%= invoice.InvoiceNumber %></button>
                            </form>
                        </td>
                        <td class="nowrap"><%= invoice.BusinessName %></td>
                        <td class="text-center"><%= invoice.Orders %></td>
                        <td class="text-right">₱<%= parseFloat(invoice.Amount).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") %></td>
                        <td class="text-center">
                            <% if (invoice.IsPaid) { %>
                                <i class="fas fa-check-circle text-success"></i>
                            <% } else { %>
                                <i class="fas fa-window-close text-danger"></i>
                            <% } %>
                        </td>
                    </tr>
                <% }) %>
            </tbody>
        </table>
    </div>
    <div class="card-footer text-center">
        <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
                <% for (let i = 1; i <= Math.ceil(invoices.length / 25); i++) { %>
                    <li class="page-item <%= i === 1 ? 'active' : '' %>">
                        <a class="page-link" href="#" data-page="<%= i %>"><%= i %></a>
                    </li>
                <% } %>
            </ul>
        </nav>
        <button type="button" class="btn btn-secondary" onclick="window.location.href='/payment'">CANCEL</button>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function() {
        $('.page-link').click(function(e) {
            e.preventDefault();
            const page = $(this).data('page');
            const startIndex = (page - 1) * 25;
            const endIndex = startIndex + 25;
            const paginatedInvoices = <%- JSON.stringify(invoices) %>.slice(startIndex, endIndex);

            // Clear the table body
            $('#invoiceTableBody').empty();

            // Populate the table with paginated invoices
            paginatedInvoices.forEach(invoice => {
                const row = `
                    <tr>
                        <td class="nowrap">
                            <form action="/payment/view-invoice" method="GET" style="display:inline;">
                                <input type="hidden" name="invoiceNumber" value="${invoice.InvoiceNumber}">
                                <button type="submit" class="btn btn-primary btn-sm">${invoice.InvoiceNumber}</button>
                            </form>
                        </td>
                        <td class="nowrap">${invoice.BusinessName}</td>
                        <td class="text-center">${invoice.Orders}</td>
                        <td class="text-right">₱${parseFloat(invoice.Amount).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</td>
                        <td class="text-center">
                            ${invoice.IsPaid ? '<i class="fas fa-check-circle text-success"></i>' : '<i class="fas fa-window-close text-danger"></i>'}
                        </td>
                    </tr>
                `;
                $('#invoiceTableBody').append(row);
            });

            // Update active page
            $('.page-item').removeClass('active');
            $(this).parent().addClass('active');
        });
    });
</script>