<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('Invoice ' + ${invoice.invoiceNumber})}"></head>
<body>
<nav th:replace="~{fragments/layout :: navbar}"></nav>

<section>
    <div class="container">
        <div class="invoice-card">
            <div class="invoice-head">
                <div>
                    <div class="logo-text">MV<span>Rent</span></div>
                    <p style="font-size:13px;color:#666">Self drive car rentals</p>
                </div>
                <div style="text-align:right">
                    <h2 style="margin:0">INVOICE</h2>
                    <p style="font-size:14px;color:#444" th:text="${invoice.invoiceNumber}">INV-00001</p>
                    <p style="font-size:13px;color:#888" th:text="${'Issued: ' + #temporals.format(invoice.issuedAt, 'dd MMM yyyy')}">date</p>
                </div>
            </div>

            <div class="invoice-meta">
                <div>
                    <h4>Billed To</h4>
                    <p th:text="${booking.user.fullName}">name</p>
                    <p style="color:#888" th:text="${booking.user.email}">email</p>
                </div>
                <div>
                    <h4>Booking</h4>
                    <p th:text="${'#' + booking.id + ' · ' + booking.car.make + ' ' + booking.car.model}">car</p>
                    <p style="color:#888" th:text="${booking.pickupDate + ' → ' + booking.returnDate + ' (' + booking.quantity + ' ' + #strings.toLowerCase(booking.rentalUnit) + ')'}">dates</p>
                    <p style="color:#888" th:text="${booking.pickupLocation + ' → ' + booking.dropLocation}">loc</p>
                </div>
            </div>

            <table class="invoice-table">
                <thead><tr><th>Description</th><th style="text-align:right">Amount</th></tr></thead>
                <tbody>
                <tr>
                    <td th:text="${'Vehicle rental (' + booking.car.make + ' ' + booking.car.model + ', ' + booking.quantity + ' ' + #strings.toLowerCase(booking.rentalUnit) + ')'}">Vehicle</td>
                    <td style="text-align:right">[[${currencySymbol}]]<span th:text="${booking.vehicleCharge}">0</span></td>
                </tr>
                <tr th:if="${booking.withDriver}">
                    <td th:text="${'Driver charge' + (booking.driver != null ? ' (' + booking.driver.name + ')' : '')}">Driver</td>
                    <td style="text-align:right">[[${currencySymbol}]]<span th:text="${booking.driverCharge}">0</span></td>
                </tr>
                <tr>
                    <td th:text="${'Tax (' + booking.taxPercent + '%)'}">Tax</td>
                    <td style="text-align:right">[[${currencySymbol}]]<span th:text="${booking.taxAmount}">0</span></td>
                </tr>
                <tr class="invoice-total">
                    <td><strong>Total</strong></td>
                    <td style="text-align:right"><strong>[[${currencySymbol}]]<span th:text="${booking.totalAmount}">0</span></strong></td>
                </tr>
                <tr th:if="${amountPaid != null}">
                    <td>Amount paid</td>
                    <td style="text-align:right;color:#1f9d55">[[${currencySymbol}]]<span th:text="${amountPaid}">0</span></td>
                </tr>
                <tr th:if="${amountPaid != null}">
                    <td><strong>Balance due</strong></td>
                    <td style="text-align:right"><strong th:style="${balance.signum() > 0 ? 'color:#c0392b' : 'color:#1f9d55'}">[[${currencySymbol}]]<span th:text="${balance}">0</span></strong></td>
                </tr>
                </tbody>
            </table>

            <div class="invoice-foot">
                <span>Status:
                    <span class="badge" th:classappend="'badge-' + ${#strings.toLowerCase(booking.status)}" th:text="${booking.status}">PENDING</span>
                </span>
                <span>
                    <a class="btn btn-outline btn-sm" th:if="${pdfUrl}" th:href="${pdfUrl}" target="_blank">Download PDF</a>
                    <button class="btn btn-outline btn-sm" onclick="window.print()">Print</button>
                </span>
            </div>
        </div>
    </div>
</section>

<footer th:replace="~{fragments/layout :: footer}"></footer>
</body>
</html>
