<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <style type="text/css">
        body { font-family: "DejaVu Sans", Helvetica, Arial, sans-serif; color: #222; font-size: 12px; }
        .head { border-bottom: 2px solid #f7941d; padding-bottom: 10px; margin-bottom: 16px; }
        .brand { font-size: 20px; font-weight: bold; color: #f7941d; }
        .title { font-size: 18px; font-weight: bold; margin-top: 4px; }
        .meta td { padding: 2px 0; font-size: 12px; }
        table.items { width: 100%; border-collapse: collapse; margin-top: 14px; }
        table.items th { text-align: left; border-bottom: 1px solid #999; padding: 6px 4px; font-size: 11px; }
        table.items td { padding: 6px 4px; border-bottom: 1px solid #eee; }
        td.amt { text-align: right; }
        tr.total td { border-top: 2px solid #222; font-weight: bold; font-size: 13px; }
        .foot { margin-top: 18px; font-size: 11px; color: #777; }
    </style>
</head>
<body>
<div class="head">
    <div class="brand" th:text="${orgName}">MV Rent</div>
    <div class="title">INVOICE</div>
</div>

<table class="meta" width="100%">
    <tr>
        <td>
            <strong>Billed To:</strong><br/>
            <span th:text="${booking.user.fullName}">name</span><br/>
            <span th:text="${booking.user.email}">email</span>
        </td>
        <td style="text-align:right">
            <strong>Invoice:</strong> <span th:text="${invoice.invoiceNumber}">INV-00001</span><br/>
            <strong>Issued:</strong> <span th:text="${#temporals.format(invoice.issuedAt, 'dd MMM yyyy')}">date</span><br/>
            <strong>Booking:</strong> #<span th:text="${booking.id}">1</span>
        </td>
    </tr>
</table>

<p style="margin-top:10px">
    <strong>Vehicle:</strong> <span th:text="${booking.car.make + ' ' + booking.car.model}">car</span> ·
    <span th:text="${booking.pickupDate + ' to ' + booking.returnDate}">dates</span> ·
    <span th:text="${booking.quantity + ' ' + #strings.toLowerCase(booking.rentalUnit)}">1 day</span><br/>
    <strong>Route:</strong> <span th:text="${booking.pickupLocation + ' to ' + booking.dropLocation}">loc</span>
</p>

<table class="items">
    <thead>
    <tr><th>Description</th><th class="amt">Amount</th></tr>
    </thead>
    <tbody>
    <tr>
        <td th:text="${'Vehicle rental (' + booking.quantity + ' ' + #strings.toLowerCase(booking.rentalUnit) + ')'}">Vehicle</td>
        <td class="amt" th:text="${currencySymbol + booking.vehicleCharge}">₹0</td>
    </tr>
    <tr th:if="${booking.withDriver}">
        <td th:text="${'Driver charge' + (booking.driver != null ? ' (' + booking.driver.name + ')' : '')}">Driver</td>
        <td class="amt" th:text="${currencySymbol + booking.driverCharge}">₹0</td>
    </tr>
    <tr>
        <td th:text="${'Tax (' + booking.taxPercent + '%)'}">Tax</td>
        <td class="amt" th:text="${currencySymbol + booking.taxAmount}">₹0</td>
    </tr>
    <tr class="total">
        <td>Total</td>
        <td class="amt" th:text="${currencySymbol + booking.totalAmount}">₹0</td>
    </tr>
    </tbody>
</table>

<div class="foot">
    Status: <span th:text="${booking.status}">PENDING</span> · Thank you for choosing <span th:text="${orgName}">MV Rent</span>.
</div>
</body>
</html>
