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

<section>
    <div class="container">

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

        <div class="form-card" style="max-width:760px">
            <h2 th:text="${car.id == null} ? 'Add Car' : 'Edit Car'">Add Car</h2>
            <p class="subtitle">Vehicle details, rates, ownership &amp; status</p>

            <form th:action="@{/admin/cars}" th:object="${car}" method="post">
                <input type="hidden" th:field="*{id}"/>

                <h4 class="form-section">Basic details</h4>
                <div class="form-grid2">
                    <div class="form-group field">
                        <label>Make</label>
                        <input type="text" th:field="*{make}" required/>
                        <small class="err" th:if="${#fields.hasErrors('make')}" th:errors="*{make}"></small>
                    </div>
                    <div class="form-group field">
                        <label>Model</label>
                        <input type="text" th:field="*{model}" required/>
                        <small class="err" th:if="${#fields.hasErrors('model')}" th:errors="*{model}"></small>
                    </div>
                    <div class="form-group field">
                        <label>Registration Number</label>
                        <input type="text" th:field="*{registrationNumber}" required/>
                        <small class="err" th:if="${#fields.hasErrors('registrationNumber')}" th:errors="*{registrationNumber}"></small>
                    </div>
                    <div class="form-group field">
                        <label>Year of Registration</label>
                        <input type="number" th:field="*{yearOfRegistration}" min="1990" max="2100" placeholder="2022"/>
                    </div>
                    <div class="form-group field">
                        <label>Colour</label>
                        <input type="text" th:field="*{colour}" placeholder="White"/>
                    </div>
                </div>

                <h4 class="form-section">Classification</h4>
                <div class="form-grid2">
                    <div class="form-group field">
                        <label>Type</label>
                        <select th:field="*{type}" required>
                            <option th:each="t : ${T(com.mvrent.carrental.model.CarType).values()}"
                                    th:value="${t}" th:text="${t}"></option>
                        </select>
                    </div>
                    <div class="form-group field">
                        <label>Seats</label>
                        <input type="number" th:field="*{seats}" min="2" max="15" required/>
                    </div>
                    <div class="form-group field">
                        <label>Transmission</label>
                        <select th:field="*{transmission}">
                            <option th:each="t : ${T(com.mvrent.carrental.model.Transmission).values()}"
                                    th:value="${t}" th:text="${t}"></option>
                        </select>
                    </div>
                    <div class="form-group field">
                        <label>Fuel Type</label>
                        <select th:field="*{fuelType}">
                            <option th:each="f : ${T(com.mvrent.carrental.model.FuelType).values()}"
                                    th:value="${f}" th:text="${f}"></option>
                        </select>
                    </div>
                    <div class="form-group field" style="grid-column:1 / -1">
                        <label>Feature Tags (comma separated)</label>
                        <input type="text" name="featureTagsCsv" placeholder="AC, GPS, Sunroof, Bluetooth"
                               th:value="${#strings.listJoin(car.featureTags, ', ')}"/>
                    </div>
                </div>

                <h4 class="form-section">Rates ([[${currencySymbol}]])</h4>
                <div class="form-grid2">
                    <div class="form-group field">
                        <label>Hourly Rate</label>
                        <input type="number" step="0.01" th:field="*{hourlyRate}" placeholder="optional"/>
                    </div>
                    <div class="form-group field">
                        <label>Daily Rate *</label>
                        <input type="number" step="0.01" th:field="*{pricePerDay}" required/>
                        <small class="err" th:if="${#fields.hasErrors('pricePerDay')}" th:errors="*{pricePerDay}"></small>
                    </div>
                    <div class="form-group field">
                        <label>Monthly Rate</label>
                        <input type="number" step="0.01" th:field="*{monthlyRate}" placeholder="optional"/>
                    </div>
                </div>

                <h4 class="form-section">Ownership &amp; availability</h4>
                <div class="form-grid2">
                    <div class="form-group field">
                        <label>Ownership</label>
                        <select th:field="*{ownership}">
                            <option th:each="o : ${T(com.mvrent.carrental.model.CarOwnership).values()}"
                                    th:value="${o}" th:text="${o}"></option>
                        </select>
                    </div>
                    <div class="form-group field">
                        <label>Vendor (if vendor-attached)</label>
                        <select name="vendorId">
                            <option value="">— none (owned) —</option>
                            <option th:each="v : ${vendors}" th:value="${v.id}" th:text="${v.name}"
                                    th:selected="${car.vendor != null and car.vendor.id == v.id}"></option>
                        </select>
                    </div>
                    <div class="form-group field">
                        <label>Commission % override (vendor cars)</label>
                        <input type="number" step="0.01" th:field="*{commissionPercentOverride}" placeholder="blank = vendor/global"/>
                    </div>
                    <div class="form-group field">
                        <label>Units (total)</label>
                        <input type="number" th:field="*{unitsTotal}" min="1"/>
                    </div>
                    <div class="form-group field">
                        <label>Status</label>
                        <select th:field="*{status}">
                            <option th:each="s : ${T(com.mvrent.carrental.model.CarStatus).values()}"
                                    th:value="${s}" th:text="${s}"></option>
                        </select>
                    </div>
                    <div class="form-group field">
                        <label>Image URL</label>
                        <input type="text" th:field="*{imageUrl}" placeholder="/images/car.png"/>
                    </div>
                    <div class="form-group" style="grid-column:1 / -1">
                        <label style="font-weight:500;color:#444">
                            <input type="checkbox" th:field="*{available}"/> Listed for booking
                        </label>
                    </div>
                </div>

                <button class="btn btn-primary" type="submit" style="width:100%">Save Car</button>
                <a class="btn btn-ghost" th:href="@{/admin/cars}" style="display:block;margin-top:8px;text-align:center">Cancel</a>
            </form>
        </div>

        <!-- Documents (edit only) -->
        <div class="form-card" style="max-width:760px;margin-top:24px" th:if="${car.id != null}">
            <h2 style="font-size:18px">Documents</h2>
            <p class="subtitle">RC, insurance, permit &amp; more — with expiry tracking</p>

            <div class="table-wrap" th:if="${not #lists.isEmpty(car.documents)}">
                <table>
                    <thead><tr><th>Type</th><th>File</th><th>Issued</th><th>Expiry</th><th>State</th><th></th></tr></thead>
                    <tbody>
                    <tr th:each="d : ${car.documents}">
                        <td th:text="${d.docType}">RC</td>
                        <td><a th:if="${d.fileUrl}" th:href="${d.fileUrl}" target="_blank">view</a><span th:unless="${d.fileUrl}">—</span></td>
                        <td th:text="${d.issuedDate} ?: '—'">—</td>
                        <td th:text="${d.expiryDate} ?: '—'">—</td>
                        <td>
                            <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>
                        </td>
                        <td>
                            <form th:action="@{/admin/cars/{id}/documents/{docId}/delete(id=${car.id},docId=${d.id})}"
                                  method="post" onsubmit="return confirm('Remove document?');">
                                <button class="btn btn-danger btn-sm" type="submit">Delete</button>
                            </form>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <form th:action="@{/admin/cars/{id}/documents(id=${car.id})}" method="post" enctype="multipart/form-data"
                  style="display:grid;grid-template-columns:150px 1fr 130px 130px auto;gap:10px;align-items:end;margin-top:14px">
                <div class="field">
                    <label>Type</label>
                    <select name="docType" required>
                        <option th:each="t : ${T(com.mvrent.carrental.model.CarDocumentType).values()}"
                                th:value="${t}" th:text="${t}"></option>
                    </select>
                </div>
                <div class="field"><label>Upload file</label><input type="file" name="file" accept=".pdf,.jpg,.jpeg,.png"/></div>
                <div class="field"><label>Issued</label><input type="date" name="issuedDate"/></div>
                <div class="field"><label>Expiry</label><input type="date" name="expiryDate"/></div>
                <button class="btn btn-primary" type="submit">Add</button>
            </form>
        </div>

        <!-- Photos (edit only) -->
        <div class="form-card" style="max-width:760px;margin-top:24px" th:if="${car.id != null}">
            <h2 style="font-size:18px">Photos</h2>
            <p class="subtitle">Gallery shown on the customer page</p>

            <div class="photo-grid" th:if="${not #lists.isEmpty(car.photos)}">
                <div class="photo-cell" th:each="p : ${car.photos}">
                    <img th:src="${p.url}" alt="car photo"/>
                    <form th:action="@{/admin/cars/{id}/photos/{photoId}/delete(id=${car.id},photoId=${p.id})}"
                          method="post" onsubmit="return confirm('Remove photo?');">
                        <button class="btn btn-danger btn-sm" type="submit">Delete</button>
                    </form>
                </div>
            </div>

            <form th:action="@{/admin/cars/{id}/photos(id=${car.id})}" method="post" enctype="multipart/form-data"
                  style="display:grid;grid-template-columns:1fr 1fr 110px auto;gap:10px;align-items:end;margin-top:14px">
                <div class="field"><label>Upload photo</label><input type="file" name="file" accept="image/*"/></div>
                <div class="field"><label>or Photo URL</label><input type="text" name="url" placeholder="/images/..."/></div>
                <div class="field"><label>Sort order</label><input type="number" name="sortOrder" value="0"/></div>
                <button class="btn btn-primary" type="submit">Add</button>
            </form>
        </div>

    </div>
</section>

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