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

<section>
    <div class="container">
        <div class="page-header"><h1>Vendor Settlements</h1></div>

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

        <div class="table-wrap">
            <table>
                <thead>
                <tr><th>ID</th><th>Vendor</th><th>Period</th><th>Trips</th><th>Gross</th>
                    <th>Commission</th><th>Net Payable</th><th>Status</th><th></th></tr>
                </thead>
                <tbody>
                <tr th:each="s : ${settlements}">
                    <td th:text="${s.id}">1</td>
                    <td th:text="${s.vendor.name}">vendor</td>
                    <td th:text="${s.periodStart + ' → ' + s.periodEnd}">period</td>
                    <td th:text="${s.tripCount}">0</td>
                    <td>[[${currencySymbol}]]<span th:text="${s.grossRevenue}">0</span></td>
                    <td>[[${currencySymbol}]]<span th:text="${s.commissionAmount}">0</span></td>
                    <td><strong>[[${currencySymbol}]]<span th:text="${s.netPayable}">0</span></strong></td>
                    <td>
                        <span class="badge"
                              th:classappend="${s.status.name() == 'PAID'} ? 'badge-confirmed' : (${s.status.name() == 'FINALISED'} ? 'badge-pending' : 'badge-cancelled')"
                              th:text="${s.status}">DRAFT</span>
                    </td>
                    <td>
                        <a class="btn btn-ghost btn-sm" th:href="@{/admin/settlements/{id}(id=${s.id})}">Open</a>
                    </td>
                </tr>
                <tr th:if="${#lists.isEmpty(settlements)}"><td colspan="9" style="color:#888">No settlements generated yet.</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

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