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

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

        <div style="margin-bottom:16px">
            <a class="btn btn-ghost btn-sm" th:href="@{/admin/drivers}">&larr; All Drivers</a>
        </div>

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

        <!-- Hero -->
        <div class="profile-hero">
            <div class="profile-hero-body">
                <div class="profile-avatar">
                    <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="profile-chip" th:text="${driver.category != null ? driver.category.name : 'No category'}">Standard</span>
                        <span class="profile-chip" th:text="${driver.employmentType}">EMPLOYED</span>
                        <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 th:if="${driver.licenceExpired}" class="badge badge-cancelled">&#9888; LICENCE EXPIRED</span>
                    </div>
                </div>
                <div class="profile-actions">
                    <a class="btn btn-outline btn-sm" th:href="@{/admin/drivers(edit=${driver.id})}">Edit</a>
                </div>
            </div>
        </div>

        <!-- KPIs -->
        <div class="kpi-grid" style="grid-template-columns:repeat(4,1fr)">
            <div class="card kpi v1"><div class="ic">&#127894;</div><div class="v"><span th:text="${driver.yearsExperience}">0</span> <small style="font-size:13px;font-weight:500;color:#888">yrs</small></div><div class="l">Experience</div></div>
            <div class="card kpi v2"><div class="ic">&#128205;</div><div class="v" th:text="${totalTrips}">0</div><div class="l">Total Trips</div></div>
            <div class="card kpi v3"><div class="ic">&#9889;</div><div class="v" style="font-size:18px" th:text="${driver.status}">AVAILABLE</div><div class="l">Status</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>

        <!-- Details + Documents -->
        <div class="settings-grid" style="margin-top:4px">
            <div class="card" style="padding:22px">
                <h2 style="font-size:18px;margin-bottom:6px">Details</h2>
                <div class="info-row"><span class="k">Phone</span><span class="v" th:text="${driver.phone} ?: '—'">—</span></div>
                <div class="info-row"><span class="k">Licence No.</span><span class="v" th:text="${driver.licenceNumber}">DL</span></div>
                <div class="info-row"><span class="k">Licence Expiry</span><span class="v" th:text="${driver.licenceExpiry} ?: '—'">—</span></div>
                <div class="info-row"><span class="k">Category</span><span class="v" th:text="${driver.category != null ? driver.category.name : '—'}">Standard</span></div>
                <div class="info-row"><span class="k">Employment</span><span class="v" th:text="${driver.employmentType}">EMPLOYED</span></div>
                <div class="info-row" th:if="${driver.vendor != null}"><span class="k">Vendor</span><span class="v" th:text="${driver.vendor.name}">vendor</span></div>
                <div class="info-row"><span class="k">Hourly Charge</span><span class="v">[[${currencySymbol}]]<span th:text="${driver.hourlyCharge} ?: '—'">—</span></span></div>
                <div class="info-row"><span class="k">Daily Charge</span><span class="v">[[${currencySymbol}]]<span th:text="${driver.dailyCharge} ?: '—'">—</span></span></div>
                <div class="info-row"><span class="k">Monthly Charge</span><span class="v">[[${currencySymbol}]]<span th:text="${driver.monthlyCharge} ?: '—'">—</span></span></div>
            </div>

            <div class="card" style="padding:22px">
                <h2 style="font-size:18px;margin-bottom:12px">Documents</h2>
                <div th:if="${#lists.isEmpty(driver.documents)}" class="media-empty">No documents uploaded.</div>
                <div th:each="d : ${driver.documents}" class="doc-card">
                    <div>
                        <div class="doc-card-type">
                            <span th:text="${d.docType}">LICENCE</span>
                            <span th:if="${d.expired}" class="badge badge-cancelled">EXPIRED</span>
                            <span th:if="${d.expiringSoon}" class="badge badge-pending">EXPIRING</span>
                            <span th:if="${!d.expired and !d.expiringSoon}" class="badge badge-confirmed">OK</span>
                        </div>
                        <div class="doc-card-meta">Issued <span th:text="${d.issuedDate} ?: '—'">—</span> &middot; Expires <span th:text="${d.expiryDate} ?: '—'">—</span></div>
                        <a th:if="${d.fileUrl}" class="doc-card-link" th:href="${d.fileUrl}" target="_blank">View file &#8599;</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Portal login -->
        <div class="card" style="padding:22px;margin-top:20px;max-width:520px">
            <h2 style="font-size:18px">Driver Portal Login</h2>
            <p class="subtitle">Create credentials so this driver can sign in at <code>/driver/login</code> to see their trips.</p>
            <form th:action="@{/admin/drivers/{id}/portal-user(id=${driver.id})}" method="post">
                <div class="form-group field"><label>Username</label><input type="text" name="username" required/></div>
                <div class="form-group field"><label>Email</label><input type="email" name="email" required/></div>
                <div class="form-group field"><label>Password</label><input type="password" name="password" required minlength="6"/></div>
                <button class="btn btn-primary" type="submit" style="width:100%">Create Login</button>
            </form>
        </div>

        <!-- Trip history -->
        <div class="card dash-table" style="margin-top:20px">
            <h3>Trip History</h3>
            <table th:if="${not #lists.isEmpty(trips)}">
                <thead><tr><th>ID</th><th>Customer</th><th>Car</th><th>Pickup</th><th>Return</th><th>Total</th><th>Status</th></tr></thead>
                <tbody>
                <tr th:each="b : ${trips}">
                    <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>[[${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>
                </tbody>
            </table>
            <div th:if="${#lists.isEmpty(trips)}" class="media-empty">No trips recorded yet.</div>
        </div>

    </div>
</section>

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