<%- include('../layouts/header.ejs') %>
<%- include('../layouts/navbar.ejs', { client: client }) %>

<section class="auth-page">

    <div class="auth-card">

        <h1>Pay Invoice</h1>

        <p>
            Invoice:
            <strong><%= invoice.invoice_number %></strong>
        </p>

        <p>
            Room:
            <strong><%= invoice.Reservation.Room.room_number %></strong>
        </p>

        <p>
            Amount Due:
            <strong>$<%= invoice.total_amount %></strong>
        </p>

        <form action="/client/payments/pay/<%= invoice.id %>" method="POST">

            <input
                type="number"
                step="0.01"
                name="amount_paid"
                value="<%= invoice.total_amount %>"
                required
            >

            <select name="payment_method" required>
                <option value="">Select Payment Method</option>
                <option value="card">Card</option>
                <option value="mobile_money">Mobile Money</option>
                <option value="ecocash">EcoCash</option>
                <option value="onemoney">OneMoney</option>
                <option value="bank_transfer">Bank Transfer</option>
                <option value="cash">Cash at Reception</option>
            </select>

            <textarea
                name="notes"
                placeholder="Reference / notes"
            ></textarea>

            <button type="submit">
                Continue Payment
            </button>

        </form>

    </div>

</section>

<%- include('../layouts/footer.ejs') %>