<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('Vendor')}"></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/vendors}">&larr; All Vendors</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" style="background:linear-gradient(135deg,#16a0ff,#7b5cff)" th:text="${initials}">KC</div>
                <div class="profile-meta">
                    <h1 th:text="${vendor.name}">Vendor</h1>
                    <div class="profile-chips">
                        <span class="badge" th:classappend="${vendor.active} ? 'badge-confirmed' : 'badge-cancelled'"
                              th:text="${vendor.active} ? 'ACTIVE' : 'INACTIVE'">ACTIVE</span>
                        <span class="profile-chip" th:text="${vendor.commissionPercent != null ? vendor.commissionPercent + '% commission' : 'Global commission'}">15% commission</span>
                        <span class="profile-chip" th:if="${vendor.contactPerson}" th:text="${vendor.contactPerson}">contact</span>
                    </div>
                </div>
                <div class="profile-actions">
                    <a class="btn btn-outline btn-sm" th:href="@{/admin/vendors(edit=${vendor.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">&#128663;</div><div class="v" th:text="${#lists.size(cars)}">0</div><div class="l">Cars</div></div>
            <div class="card kpi v2"><div class="ic">&#128100;</div><div class="v" th:text="${#lists.size(drivers)}">0</div><div class="l">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">Trips</div></div>
            <div class="card kpi v4"><div class="ic">&#128176;</div><div class="v" style="font-size:20px">[[${currencySymbol}]]<span th:text="${revenue.net}">0</span></div><div class="l">Net Payable</div></div>
        </div>

        <!-- Details + Portal login -->
        <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">Contact Person</span><span class="v" th:text="${vendor.contactPerson} ?: '—'">—</span></div>
                <div class="info-row"><span class="k">Phone</span><span class="v" th:text="${vendor.phone} ?: '—'">—</span></div>
                <div class="info-row"><span class="k">Email</span><span class="v" th:text="${vendor.email} ?: '—'">—</span></div>
                <div class="info-row"><span class="k">GST Number</span><span class="v" th:text="${vendor.gstNumber} ?: '—'">—</span></div>
                <div class="info-row"><span class="k">Commission</span><span class="v" th:text="${vendor.commissionPercent != null ? vendor.commissionPercent + '%' : 'Global default'}">15%</span></div>
                <div class="info-row"><span class="k">Settlement</span><span class="v" th:text="${vendor.settlementDetails} ?: '—'">—</span></div>
                <div class="info-row"><span class="k">Gross Revenue</span><span class="v">[[${currencySymbol}]]<span th:text="${revenue.gross}">0</span></span></div>
                <div class="info-row"><span class="k">Commission Earned</span><span class="v">[[${currencySymbol}]]<span th:text="${revenue.commission}">0</span></span></div>
            </div>

            <div class="card" style="padding:22px">
                <h2 style="font-size:18px">Portal Login</h2>
                <p class="subtitle">Create credentials for the /vendor portal</p>
                <form th:action="@{/admin/vendors/{id}/portal-user(id=${vendor.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>
        </div>

        <!-- Settlements -->
        <div class="card dash-table" style="margin-top:20px">
            <h3>Settlements</h3>
            <form th:action="@{/admin/vendors/{id}/settlements(id=${vendor.id})}" method="post"
                  class="media-add" style="margin:0 0 14px">
                <h5>Generate settlement</h5>
                <div style="display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end">
                    <div class="field"><label>Period Start</label><input type="date" name="periodStart" required/></div>
                    <div class="field"><label>Period End</label><input type="date" name="periodEnd" required/></div>
                    <button class="btn btn-primary btn-sm" type="submit">Generate</button>
                </div>
            </form>
            <table>
                <thead><tr><th>ID</th><th>Period</th><th>Trips</th><th>Gross</th><th>Net Payable</th><th>Status</th><th></th></tr></thead>
                <tbody>
                <tr th:each="s : ${settlements}">
                    <td th:text="${'#' + s.id}">#1</td>
                    <td th:text="${s.periodStart + ' → ' + s.periodEnd}">period</td>
                    <td th:text="${s.tripCount}">0</td>
                    <td>[[${currencySymbol}]]<span th:text="${s.grossRevenue}">0</span></td>
                    <td><strong>[[${currencySymbol}]]<span th:text="${s.netPayable}">0</span></strong></td>
                    <td><span class="dash-pill"
                              th:classappend="${s.status.name() == 'PAID'} ? 'pill-confirmed' : (${s.status.name() == 'FINALISED'} ? 'pill-pending' : 'pill-cancelled')"
                              th:text="${s.status}">DRAFT</span></td>
                    <td><a class="btn btn-ghost btn-sm" th:href="@{/admin/settlements/{id}(id=${s.id})}">Open</a></td>
                </tr>
                <tr th:if="${#lists.isEmpty(settlements)}"><td colspan="7" class="media-empty" style="background:none;border:none">No settlements yet.</td></tr>
                </tbody>
            </table>
        </div>

        <!-- Attached cars + drivers -->
        <div class="settings-grid" style="margin-top:20px">
            <div class="card dash-table" style="padding:22px">
                <h3>Attached Cars</h3>
                <table>
                    <thead><tr><th>Reg No</th><th>Make / Model</th><th>Price/day</th></tr></thead>
                    <tbody>
                    <tr th:each="c : ${cars}">
                        <td th:text="${c.registrationNumber}">REG</td>
                        <td th:text="${c.make + ' ' + c.model}">name</td>
                        <td>[[${currencySymbol}]]<span th:text="${c.pricePerDay}">2000</span></td>
                    </tr>
                    <tr th:if="${#lists.isEmpty(cars)}"><td colspan="3" class="media-empty" style="background:none;border:none">No cars attached.</td></tr>
                    </tbody>
                </table>
            </div>

            <div class="card dash-table" style="padding:22px">
                <h3>Attached Drivers</h3>
                <table>
                    <thead><tr><th>Name</th><th>Day Charge</th><th>Status</th></tr></thead>
                    <tbody>
                    <tr th:each="d : ${drivers}">
                        <td th:text="${d.name}">name</td>
                        <td>[[${currencySymbol}]]<span th:text="${d.dailyCharge} ?: '—'">800</span></td>
                        <td><span class="dash-pill"
                                  th:classappend="${d.status.name() == 'AVAILABLE'} ? 'pill-confirmed' : (${d.status.name() == 'ON_TRIP'} ? 'pill-pending' : 'pill-cancelled')"
                                  th:text="${d.status}">AVAILABLE</span></td>
                    </tr>
                    <tr th:if="${#lists.isEmpty(drivers)}"><td colspan="3" class="media-empty" style="background:none;border:none">No drivers attached.</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</section>

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