<!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; }
        table.summary { width: 100%; border-collapse: collapse; margin-top: 12px; }
        table.summary td { padding: 4px 0; }
        td.amt { text-align: right; }
        tr.net td { border-top: 2px solid #222; font-weight: bold; font-size: 14px; }
        table.items { width: 100%; border-collapse: collapse; margin-top: 18px; }
        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; font-size: 11px; }
        .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">VENDOR SETTLEMENT STATEMENT</div>
</div>

<p>
    <strong>Vendor:</strong> <span th:text="${settlement.vendor.name}">vendor</span><br/>
    <strong>Period:</strong> <span th:text="${settlement.periodStart + ' to ' + settlement.periodEnd}">period</span><br/>
    <strong>Status:</strong> <span th:text="${settlement.status}">DRAFT</span> ·
    <strong>Generated:</strong> <span th:text="${#temporals.format(settlement.generatedAt, 'dd MMM yyyy')}">date</span>
</p>

<table class="summary">
    <tr><td>Trips settled</td><td class="amt" th:text="${settlement.tripCount}">0</td></tr>
    <tr><td>Gross rental revenue</td><td class="amt" th:text="${currencySymbol + settlement.grossRevenue}">₹0</td></tr>
    <tr><td>Less: organization commission</td><td class="amt" th:text="${'- ' + currencySymbol + settlement.commissionAmount}">₹0</td></tr>
    <tr><td>Add: vendor driver charges</td><td class="amt" th:text="${'+ ' + currencySymbol + settlement.driverCharges}">₹0</td></tr>
    <tr class="net"><td>Net payable to vendor</td><td class="amt" th:text="${currencySymbol + settlement.netPayable}">₹0</td></tr>
</table>

<table class="items">
    <thead>
    <tr><th>Booking</th><th>Car</th><th>Pickup</th><th>Return</th><th>Vehicle</th><th>Commission</th><th>Driver</th></tr>
    </thead>
    <tbody>
    <tr th:each="b : ${trips}">
        <td th:text="${'#' + b.id}">#1</td>
        <td th:text="${b.car.make + ' ' + b.car.model}">car</td>
        <td th:text="${b.pickupDate}">date</td>
        <td th:text="${b.returnDate}">date</td>
        <td th:text="${currencySymbol + b.vehicleCharge}">₹0</td>
        <td th:text="${currencySymbol + b.commissionAmount}">₹0</td>
        <td th:text="${currencySymbol + b.driverCharge}">₹0</td>
    </tr>
    <tr th:if="${#lists.isEmpty(trips)}"><td colspan="7">No trips in this period.</td></tr>
    </tbody>
</table>

<div class="foot">
    This is a system-generated settlement statement from <span th:text="${orgName}">MV Rent</span>.
</div>
</body>
</html>
