<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('My Profile')}"></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>
        <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" 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.employmentType}">EMPLOYED</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="settings-grid" style="margin-top:4px">
            <!-- Details -->
            <div class="card" style="padding:22px">
                <h2 style="font-size:18px;margin-bottom:6px">My 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">Experience</span><span class="v"><span th:text="${driver.yearsExperience}">0</span> yrs</span></div>
                <div class="info-row"><span class="k">Daily Charge</span><span class="v">[[${currencySymbol}]]<span th:text="${driver.dailyCharge} ?: '—'">—</span></span></div>
                <p class="subtitle" style="margin-top:12px">To update these details, contact the office.</p>
            </div>

            <!-- Documents -->
            <div class="card" style="padding:22px">
                <h2 style="font-size:18px;margin-bottom:12px">My Documents</h2>
                <div th:if="${#lists.isEmpty(driver.documents)}" class="media-empty">No documents on file.</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>

        <!-- Change password -->
        <div class="card" style="padding:22px;margin-top:20px;max-width:520px">
            <h2 style="font-size:18px">Change Password</h2>
            <form th:action="@{/driver/password}" method="post">
                <div class="form-group field"><label>Current password</label><input type="password" name="currentPassword" required/></div>
                <div class="form-group field"><label>New password</label><input type="password" name="newPassword" required minlength="6"/></div>
                <button class="btn btn-primary" type="submit">Update Password</button>
            </form>
        </div>

    </div>
</section>

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