<style>
    @media print {
        body * {
            visibility: hidden;
        }
        .printableArea, .printableArea * {
            visibility: visible;
        }
        .printableArea {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }
        .print-header {
            display: block !important;
        }
    }
    .print-header {
        display: none;
    }
</style>

<div class="container-jcph">
    <div class="card-header text-center"><h4><%= title %></h4></div>
    <div class="table-responsive mt-2 printableArea">
        <div class="card-header text-center print-header"><h4><%= title %></h4></div>
        <table class="table table-bordered table-hover table-striped">
            <thead class="text-center thead-dark" style="text-transform: uppercase;">
                <tr>
                    <th>Date</th>
                    <th>Type</th>
                    <th>Item</th>
                    <th>Qty</th>
                    <th>Amount</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <% let overallTotal = 0; %>
                <% expenses.forEach(expense => { %>
                    <% overallTotal += parseFloat(expense.Total); %>
                    <tr>
                        <td class="nowrap"><%= new Date(expense.ExpenseDate).toLocaleString('en-US', { month: 'short', day: '2-digit' }) %></td>
                        <td class="nowrap"><%= expense.ExpenseType %></td>
                        <td class="nowrap" title="<%= expense.SpecialNote %>"><%= expense.ExpenseItem %></td>
                        <td class="nowrap"><%= expense.Quantity %> <%= expense.Unit %></td>
                        <td class="text-right"><%= parseFloat(expense.UnitPrice).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") %></td>
                        <td class="text-right nowrap">₱ <%= parseFloat(expense.Total).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") %></td>
                    </tr>
                <% }) %>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="5" class="text-right">Overall Total</th>
                    <th class="text-right nowrap">₱ <%= overallTotal.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",") %></th>
                </tr>
            </tfoot>
        </table>
    </div>
    <div class="card-footer text-center">
        <button onclick="window.print()" class="btn btn-primary">PRINT</button>
        <a href="/reports" class="btn btn-secondary">BACK</a>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>