<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('Settlement')}"></head>
<body>
<nav th:replace="~{fragments/layout :: adminbar}"></nav>

<section>
    <div class="container">
        <div class="page-header">
            <h1>Settlement #<span th:text="${settlement.id}">1</span></h1>
            <div>
                <a class="btn btn-outline btn-sm" th:href="@{/admin/settlements/{id}/pdf(id=${settlement.id})}" target="_blank">PDF</a>
                <a class="btn btn-outline btn-sm" th:href="@{/admin/settlements/{id}/excel(id=${settlement.id})}">Excel</a>
                <a class="btn btn-ghost btn-sm" th:href="@{/admin/settlements}">&larr; All</a>
            </div>
        </div>

        <div th:if="${success}" class="alert alert-success" th:text="${success}"></div>

        <div class="settings-grid" style="margin-top:8px">
            <div class="form-card" style="margin:0">
                <h2 style="font-size:18px" th:text="${settlement.vendor.name}">Vendor</h2>
                <p class="subtitle" th:text="${settlement.periodStart + ' → ' + settlement.periodEnd}">period</p>
                <table style="margin-top:8px">
                    <tbody>
                    <tr><td>Trips settled</td><td style="text-align:right" th:text="${settlement.tripCount}">0</td></tr>
                    <tr><td>Gross rental revenue</td><td style="text-align:right">[[${currencySymbol}]]<span th:text="${settlement.grossRevenue}">0</span></td></tr>
                    <tr><td>Less: commission</td><td style="text-align:right">- [[${currencySymbol}]]<span th:text="${settlement.commissionAmount}">0</span></td></tr>
                    <tr><td>Add: vendor driver charges</td><td style="text-align:right">+ [[${currencySymbol}]]<span th:text="${settlement.driverCharges}">0</span></td></tr>
                    <tr style="border-top:2px solid #222"><td><strong>Net payable</strong></td><td style="text-align:right"><strong>[[${currencySymbol}]]<span th:text="${settlement.netPayable}">0</span></strong></td></tr>
                    </tbody>
                </table>
            </div>

            <div class="form-card" style="margin:0">
                <h2 style="font-size:18px">Status</h2>
                <p class="subtitle">Current:
                    <span class="badge"
                          th:classappend="${settlement.status.name() == 'PAID'} ? 'badge-confirmed' : (${settlement.status.name() == 'FINALISED'} ? 'badge-pending' : 'badge-cancelled')"
                          th:text="${settlement.status}">DRAFT</span>
                </p>
                <form th:action="@{/admin/settlements/{id}/status(id=${settlement.id})}" method="post"
                      style="display:flex;gap:8px;align-items:end">
                    <div class="field" style="flex:1">
                        <label>Set status</label>
                        <select name="status">
                            <option th:each="st : ${T(com.mvrent.carrental.model.SettlementStatus).values()}"
                                    th:value="${st}" th:text="${st}" th:selected="${settlement.status == st}"></option>
                        </select>
                    </div>
                    <button class="btn btn-primary" type="submit">Update</button>
                </form>
            </div>
        </div>

        <h3 style="margin:24px 0 14px;font-size:18px">Trips in this period</h3>
        <div class="table-wrap">
            <table>
                <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>[[${currencySymbol}]]<span th:text="${b.vehicleCharge}">0</span></td>
                    <td>[[${currencySymbol}]]<span th:text="${b.commissionAmount}">0</span></td>
                    <td>[[${currencySymbol}]]<span th:text="${b.driverCharge}">0</span></td>
                </tr>
                <tr th:if="${#lists.isEmpty(trips)}"><td colspan="7" style="color:#888">No trips in this period.</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

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