<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('Book ' + ${car.make})}"></head>
<body>
<nav th:replace="~{fragments/layout :: navbar}"></nav>

<section>
    <div class="container">
        <div class="form-card" style="max-width:640px">
            <h2>Book the <span th:text="${car.make + ' ' + car.model}">car</span></h2>
            <p class="subtitle">
                [[${currencySymbol}]]<span th:text="${car.pricePerDay}">2000</span> / day
                <span th:if="${car.monthlyRate}"> &middot; [[${currencySymbol}]]<span th:text="${car.monthlyRate}">0</span> / month</span>
                &middot; <span th:text="${car.transmission}">Manual</span>
                &middot; <span th:text="${car.fuelType}">Petrol</span>
            </p>

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

            <form th:action="@{/cars/{id}/book(id=${car.id})}" th:object="${booking}" method="post">
                <div class="form-grid2">
                    <div class="form-group field">
                        <label>Pickup Date</label>
                        <input type="date" th:field="*{pickupDate}" required/>
                    </div>
                    <div class="form-group field">
                        <label>Return Date</label>
                        <input type="date" th:field="*{returnDate}" required/>
                    </div>
                    <div class="form-group field">
                        <label>Billing Period</label>
                        <select th:field="*{rentalUnit}">
                            <option value="DAY">Per Day</option>
                            <option value="MONTH">Per Month</option>
                        </select>
                    </div>
                    <div class="form-group field">
                        <label>Pickup Location</label>
                        <input type="text" th:field="*{pickupLocation}" placeholder="e.g. Kochi Airport" required/>
                    </div>
                    <div class="form-group field">
                        <label>Drop Location</label>
                        <input type="text" th:field="*{dropLocation}" placeholder="e.g. Kochi Airport" required/>
                    </div>
                </div>

                <h4 class="form-section">Driver</h4>
                <div class="form-group">
                    <label style="font-weight:500;color:#444">
                        <input type="checkbox" th:field="*{withDriver}" id="withDriver"
                               onchange="document.getElementById('driverPick').style.display=this.checked?'block':'none'"/>
                        Book with a driver (chauffeur)
                    </label>
                </div>
                <div class="form-group field" id="driverPick"
                     th:style="${booking.withDriver} ? 'display:block' : 'display:none'">
                    <label>Choose Driver</label>
                    <select name="driverId">
                        <option value="">— select a driver —</option>
                        <option th:each="d : ${drivers}" th:value="${d.id}"
                                th:text="${d.name + ' (' + (d.category != null ? d.category.name : 'Standard') + ') — ' + currencySymbol + '' + (d.dailyCharge != null ? d.dailyCharge : '—') + '/day'}">
                            Driver</option>
                    </select>
                    <small style="color:#888;margin-top:6px">Driver charges are added on top of the vehicle rate. Tax applies to the total.</small>
                </div>

                <button class="btn btn-primary" type="submit" style="width:100%;margin-top:10px">Confirm Booking</button>
            </form>
        </div>
    </div>
</section>

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