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

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

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

        <!-- Hero -->
        <div class="profile-hero">
            <div class="profile-hero-body">
                <div class="profile-avatar" style="background:linear-gradient(135deg,#1abc9c,#2ecc71)">
                    <img th:if="${driver.photoUrl}" th:src="${driver.photoUrl}" alt="photo"/>
                    <span th:unless="${driver.photoUrl}" th:text="${initials}">RK</span>
                </div>
                <div class="profile-meta">
                    <h1 th:text="${driver.name}">Driver</h1>
                    <div class="profile-chips">
                        <span class="badge"
                              th:classappend="${driver.status.name() == 'AVAILABLE'} ? 'badge-confirmed' : (${driver.status.name() == 'ON_TRIP'} ? 'badge-pending' : 'badge-cancelled')"
                              th:text="${driver.status}">AVAILABLE</span>
                        <span class="profile-chip" th:text="${driver.category != null ? driver.category.name : 'Driver'}">Standard</span>
                        <span th:if="${driver.licenceExpired}" class="badge badge-cancelled">&#9888; LICENCE EXPIRED</span>
                    </div>
                </div>
                <div class="profile-actions" style="display:flex;gap:8px">
                    <form th:action="@{/driver/availability}" method="post" th:if="${driver.status.name() != 'AVAILABLE'}">
                        <input type="hidden" name="status" value="AVAILABLE"/>
                        <button class="btn btn-primary btn-sm" type="submit">I'm Available</button>
                    </form>
                    <form th:action="@{/driver/availability}" method="post" th:if="${driver.status.name() != 'OFF'}">
                        <input type="hidden" name="status" value="OFF"/>
                        <button class="btn btn-outline btn-sm" type="submit">Go Off Duty</button>
                    </form>
                </div>
            </div>
        </div>

        <!-- KPIs -->
        <div class="kpi-grid" style="grid-template-columns:repeat(3,1fr)">
            <div class="card kpi v3"><div class="ic">&#128205;</div><div class="v" th:text="${totalTrips}">0</div><div class="l">Total Trips</div></div>
            <div class="card kpi v1"><div class="ic">&#128197;</div><div class="v" th:text="${#lists.size(upcoming)}">0</div><div class="l">Upcoming</div></div>
            <div class="card kpi v4"><div class="ic">&#128176;</div><div class="v" style="font-size:20px">[[${currencySymbol}]]<span th:text="${driver.dailyCharge} ?: '—'">—</span></div><div class="l">Daily Charge</div></div>
        </div>

        <!-- Upcoming trips -->
        <div class="card dash-table" style="margin-top:20px">
            <h3>Upcoming Trips</h3>
            <table th:if="${not #lists.isEmpty(upcoming)}">
                <thead><tr><th>ID</th><th>Customer</th><th>Car</th><th>Pickup</th><th>Return</th><th>Route</th><th>Status</th></tr></thead>
                <tbody>
                <tr th:each="b : ${upcoming}">
                    <td th:text="${'#' + b.id}">#1</td>
                    <td th:text="${b.user.fullName}">name</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 th:text="${b.pickupLocation + ' → ' + b.dropLocation}">route</td>
                    <td><span class="dash-pill" th:classappend="'pill-' + ${#strings.toLowerCase(b.status)}" th:text="${b.status}">PENDING</span></td>
                </tr>
                </tbody>
            </table>
            <div th:if="${#lists.isEmpty(upcoming)}" class="media-empty">No upcoming trips right now.</div>
        </div>

        <!-- Recent trips -->
        <div class="card dash-table" style="margin-top:20px">
            <h3>Recent Trips</h3>
            <table th:if="${not #lists.isEmpty(recentTrips)}">
                <thead><tr><th>ID</th><th>Customer</th><th>Car</th><th>Pickup</th><th>Return</th><th>Status</th></tr></thead>
                <tbody>
                <tr th:each="b : ${recentTrips}">
                    <td th:text="${'#' + b.id}">#1</td>
                    <td th:text="${b.user.fullName}">name</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><span class="dash-pill" th:classappend="'pill-' + ${#strings.toLowerCase(b.status)}" th:text="${b.status}">PENDING</span></td>
                </tr>
                </tbody>
            </table>
            <div th:if="${#lists.isEmpty(recentTrips)}" class="media-empty">No trips recorded yet.</div>
        </div>

    </div>
</section>

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