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

<section class="dash">
    <div class="container">

        <div class="dash-hero">
            <div>
                <h1 th:text="${vendor.name}">Vendor</h1>
                <p>Your cars, drivers, trips &amp; earnings at a glance</p>
            </div>
            <div class="dash-revenue">
                <div class="lbl">Net Payable</div>
                <div class="val">[[${currencySymbol}]]<span th:text="${revenue.net}">0</span></div>
            </div>
        </div>

        <div class="kpi-grid" style="grid-template-columns:repeat(4,1fr)">
            <div class="card kpi v1"><div class="ic">&#128663;</div><div class="v" th:text="${carCount}">0</div><div class="l">My Cars</div></div>
            <div class="card kpi v2"><div class="ic">&#128100;</div><div class="v" th:text="${driverCount}">0</div><div class="l">My Drivers</div></div>
            <div class="card kpi v3"><div class="ic">&#128205;</div><div class="v" th:text="${revenue.trips}">0</div><div class="l">Total Trips</div></div>
            <div class="card kpi v4"><div class="ic">&#128176;</div><div class="v" style="font-size:22px">[[${currencySymbol}]]<span th:text="${revenue.gross}">0</span></div><div class="l">Gross Revenue</div></div>
        </div>

        <div class="chart-grid" style="grid-template-columns:1fr 1fr">
            <div class="card chart-card">
                <h3>Earnings breakdown</h3>
                <canvas id="earnChart"></canvas>
            </div>
            <div class="card chart-card">
                <h3>Summary</h3>
                <table style="margin-top:6px">
                    <tbody>
                    <tr><td>Gross rental revenue</td><td style="text-align:right">[[${currencySymbol}]]<span th:text="${revenue.gross}">0</span></td></tr>
                    <tr><td>Less: organization commission</td><td style="text-align:right">- [[${currencySymbol}]]<span th:text="${revenue.commission}">0</span></td></tr>
                    <tr style="border-top:2px solid #222"><td><strong>Net payable to you</strong></td><td style="text-align:right"><strong>[[${currencySymbol}]]<span th:text="${revenue.net}">0</span></strong></td></tr>
                    <tr><td>Settled trips</td><td style="text-align:right" th:text="${revenue.trips}">0</td></tr>
                    </tbody>
                </table>
                <a class="btn btn-outline btn-sm" th:href="@{/vendor/settlements}" style="margin-top:12px">View settlements &rarr;</a>
            </div>
        </div>

        <div class="card dash-table">
            <h3>Recent Trips</h3>
            <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>
                <tr th:each="b : ${recentTrips}">
                    <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="dash-pill" th:classappend="'pill-' + ${#strings.toLowerCase(b.status)}" th:text="${b.status}">PENDING</span></td>
                </tr>
                <tr th:if="${#lists.isEmpty(recentTrips)}"><td colspan="7" style="color:#888">No trips yet.</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
const earnData = [ /*[[${revenue.net}]]*/ 0, /*[[${revenue.commission}]]*/ 0 ];
if (window.Chart) {
  Chart.defaults.color = '#666';
  Chart.defaults.font.family = "'Poppins', sans-serif";
  new Chart(document.getElementById('earnChart'), {
    type: 'doughnut',
    data: { labels: ['Net to you', 'Org commission'],
      datasets: [{ data: earnData, borderWidth: 0, backgroundColor: ['#16a0ff', '#f7941d'] }] },
    options: { cutout: '62%', plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, padding: 14 } } } }
  });
}
/*]]>*/
</script>

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