<%- include('../layouts/header.ejs') %>
<%- include('../layouts/navbar.ejs', { client: client }) %>

<section class="account-page">

    <div class="account-header">
        <h1>My Payments</h1>
        <p>View your invoices, payment status and receipts.</p>
    </div>

    <table class="website-table">
        <thead>
            <tr>
                <th>Invoice</th>
                <th>Room</th>
                <th>Total</th>
                <th>Status</th>
                <th>Action</th>
            </tr>
        </thead>

        <tbody>

            <% if(invoices.length > 0){ %>

                <% invoices.forEach(invoice => { %>

                    <tr>
                        <td><%= invoice.invoice_number %></td>

                        <td>
                            Room <%= invoice.Reservation.Room.room_number %>
                        </td>

                        <td>
                            $<%= invoice.total_amount %>
                        </td>

                        <td>
                            <span class="status-badge status-<%= invoice.payment_status %>">
                                <%= invoice.payment_status %>
                            </span>
                        </td>

                        <td>
                            <% if(invoice.payment_status !== "paid"){ %>

                                <a
                                    href="/client/payments/pay/<%= invoice.id %>"
                                    class="primary-btn"
                                >
                                    Pay Now
                                </a>

                            <% } else { %>

                                <span style="color:green;font-weight:bold;">
                                    Paid
                                </span>

                            <% } %>
                        </td>
                    </tr>

                <% }) %>

            <% } else { %>

                <tr>
                    <td colspan="5" style="text-align:center; padding:40px;">
                        No invoices found.
                    </td>
                </tr>

            <% } %>

        </tbody>
    </table>

</section>

<%- include('../layouts/footer.ejs') %>