<div class="container-jcph">
    <div class="card-header text-center"><h4><%= title %> as of <%= new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) %></h4></div>
    <div id="alert-container" class="text-center" style="text-transform: uppercase;"></div>
    <div class="table-responsive mt-2">
        <table class="table table-bordered table-striped table-hover">
            <thead class="thead-dark text-center" style="text-transform: uppercase;">
                <tr>
                    <th>Client Name</th>
                    <th>Unpaid Invoices</th>
                    <th>Partial Payments</th>
                    <th>Total Balance</th>
                </tr>
            </thead>
            <tbody>
                <% generalReports.forEach(report => { %>
                    <tr class="nowrap">
                        <td><%= report.BusinessName %></td>
                        <td>₱ <%= report.UnpaidInvoices.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) %></td>
                        <td>
                            <% if (report.PartialPayments < 0) { %>
                                (₱ <%= Math.abs(report.PartialPayments).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) %>)
                            <% } else { %>
                                ₱ <%= (report.PartialPayments == null ? 0 : report.PartialPayments).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) %>
                            <% } %>
                        </td>
                        <td class="text-right">
                            ₱ <%= (report.UnpaidInvoices - (report.PartialPayments == null ? 0 : report.PartialPayments)).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) %>
                        </td>
                    </tr>
                <% }) %>
                <tr>
                    <td colspan="3" class="text-right font-weight-bold">Total Collectible</td>
                    <td class="font-weight-bold text-right" style="background-color: yellow;">
                        ₱ <%= generalReports.reduce((sum, report) => sum + (report.UnpaidInvoices - (report.PartialPayments == null ? 0 : report.PartialPayments)), 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) %>
                    </td>
                </tr>
            </tbody>
        </table>
       <div class="row mt-4" style="margin-right:0; margin-left:0;">
            <div class="col-md-6 px-3">
                <table class="table table-bordered mb-0">
                    <thead class="thead-dark text-center" style="text-transform: uppercase;">
                        <tr>
                            <th colspan="2">RECOVERIES</th>
                        </tr>
                    </thead>
                    <thead class="thead-light text-center">
                        <tr>
                            <th>Operators</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% recoveries.forEach(recovery => { %>
                            <tr>
                                <td><%= recovery.ClientCode %></td>
                                <td class="text-right" style="color: red;">
                                    ₱ <%= Number(recovery.Recoveries).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) %>
                                </td>
                            </tr>
                        <% }) %>
                    </tbody>
                </table>
            </div>
            <div class="col-md-6 px-3">
                <table class="table table-bordered mb-0">
                    <thead class="thead-dark text-center" style="text-transform: uppercase;">
                        <tr>
                            <th colspan="2">NET INCOME</th>
                        </tr>
                    </thead>
                    <thead class="thead-light text-center">
                        <tr>
                            <th>Bank Account</th>
                            <th>Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% cashOnHand.forEach(cash => { %>
                            <tr>
                                <td><%= cash.ClientCode %> (**** 3822)</td>
                                <td class="text-right" style="color: white; background-color: green; font-weight: bold;">
                                    ₱ <%= Number(cash.CashOnHand).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2}) %>
                                </td>
                            </tr>
                        <% }) %>
                    </tbody>
                </table>
            </div>
        </div><br>
    </div>
</div>
<div class="card-footer text-center">
    <button id="convertToPDF" class="btn btn-primary">DOWNLOAD</button>
    <a href="/admin" class="btn btn-secondary">BACK</a>
</div>

<!-- Ensure jQuery and html2pdf are loaded before your script -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
<script>
    document.getElementById("convertToPDF").addEventListener("click", function() {
        const element = document.querySelector('.container-jcph');
        const selectedClient = $('#clientNameFilter').val() || 'invoice-details';
        const filename = `${selectedClient.replace(/\s+/g, '_')}.pdf`;
        html2pdf(element, {
            margin: 0.2,
            filename: filename,
            image: { type: 'jpeg', quality: 0.98 },
            html2canvas: { scale: 2 },
            jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
        });
    });
</script>