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

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

        <div class="stat-grid">
            <div class="stat-card"><h4>Trips</h4><div class="num" th:text="${revenue.trips}">0</div></div>
            <div class="stat-card"><h4>Gross</h4><div class="num" style="font-size:22px">[[${currencySymbol}]]<span th:text="${revenue.gross}">0</span></div></div>
            <div class="stat-card"><h4>Commission</h4><div class="num" style="font-size:22px">[[${currencySymbol}]]<span th:text="${revenue.commission}">0</span></div></div>
            <div class="stat-card"><h4>Net</h4><div class="num" style="font-size:22px">[[${currencySymbol}]]<span th:text="${revenue.net}">0</span></div></div>
        </div>

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

        <div class="table-wrap">
            <table>
                <thead><tr><th>ID</th><th>Car</th><th>Customer</th><th>Pickup</th><th>Return</th><th>Amount</th><th>Status</th></tr></thead>
                <tbody id="vfBody">
                <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.user.fullName}">name</td>
                    <td th:text="${b.pickupDate}">date</td>
                    <td th:text="${b.returnDate}">date</td>
                    <td>[[${currencySymbol}]]<span th:text="${b.totalAmount}">0</span></td>
                    <td><span class="badge" th:classappend="'badge-' + ${#strings.toLowerCase(b.status)}" th:text="${b.status}">PENDING</span></td>
                </tr>
                <tr th:if="${#lists.isEmpty(trips)}"><td colspan="7" style="color:#888">No trips 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>
