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

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

        <div class="cars-toolbar">
            <input class="cars-search" id="vfSearch" type="text" placeholder="Search settlements…"/>
        </div>

        <div class="table-wrap">
            <table>
                <thead>
                <tr><th>ID</th><th>Period</th><th>Trips</th><th>Gross</th><th>Commission</th>
                    <th>Driver Charges</th><th>Net Payable</th><th>Status</th><th>Export</th></tr>
                </thead>
                <tbody id="vfBody">
                <tr th:each="s : ${settlements}">
                    <td th:text="${s.id}">1</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>[[${currencySymbol}]]<span th:text="${s.driverCharges}">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="@{/vendor/settlements/{id}/pdf(id=${s.id})}" target="_blank">PDF</a>
                        <a class="btn btn-ghost btn-sm" th:href="@{/vendor/settlements/{id}/excel(id=${s.id})}">Excel</a>
                    </td>
                </tr>
                <tr th:if="${#lists.isEmpty(settlements)}"><td colspan="9" style="color:#888">No settlements yet.</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<script src="/js/admin-table.js"></script>
<script>AdminTable.liveFilter(document.getElementById('vfSearch'), document.getElementById('vfBody'));</script>

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