<%- include('../layouts/header') %>

<div class="main-container">

<%- include('../layouts/sidebar', { user: user }) %>

<div class="content-area">

<%- include('../layouts/navbar') %>

<div class="dashboard-content">

<div class="page-header">
    <h2>Payments</h2>
</div>

<table class="room-table">

<thead>
<tr>
    <th>Receipt</th>
    <th>Guest</th>
    <th>Invoice</th>
    <th>Amount</th>
    <th>Method</th>
    <th>Date</th>
    <th>Action</th>
</tr>
</thead>

<tbody>

<% if(payments.length > 0){ %>

    <% payments.forEach(payment => { %>

    <tr>
        <td><%= payment.receipt_number %></td>

        <td><%= payment.Invoice.Reservation.guest_name %></td>

        <td><%= payment.Invoice.invoice_number %></td>

        <td>$<%= payment.amount_paid %></td>

        <td><%= payment.payment_method %></td>

        <td><%= payment.payment_date.toDateString() %></td>

        <td>
            <a href="/payments/receipt/<%= payment.id %>" class="pay-btn">
                Receipt
            </a>
        </td>
    </tr>

    <% }) %>

<% } else { %>

    <tr>
        <td colspan="7" style="text-align:center; padding:40px;">
            No payments found.
        </td>
    </tr>

<% } %>

</tbody>

</table>

</div>

</div>

</div>

<%- include('../layouts/footer') %>