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

<section>
    <div class="container">
        <div class="detail-grid">
            <div>
                <div class="detail-img">
                    <img th:if="${car.imageUrl != null}" th:src="${car.imageUrl}" th:alt="${car.make}"/>
                    <div th:unless="${car.imageUrl != null}"
                         style="font-size:80px;color:#ddd;font-weight:800"
                         th:text="${#strings.substring(car.make,0,1)}">C</div>
                </div>
                <div class="photo-thumbs" th:if="${not #lists.isEmpty(car.photos)}">
                    <img th:each="p : ${car.photos}" th:src="${p.url}" alt="photo"/>
                </div>
            </div>

            <div class="detail-info">
                <span class="tag" th:text="${car.type}">SUV</span>
                <h1 th:text="${car.make + ' ' + car.model}">Car name</h1>
                <p style="color:#888;font-size:13px">
                    Registration <span th:text="${car.registrationNumber}">REG</span>
                    <span th:if="${car.yearOfRegistration}" th:text="' · ' + ${car.yearOfRegistration}"></span>
                    <span th:if="${car.colour}" th:text="' · ' + ${car.colour}"></span>
                </p>

                <div class="spec-list">
                    <div><strong>Seats</strong><span th:text="${car.seats}">5</span></div>
                    <div><strong>Transmission</strong><span th:text="${car.transmission}">Manual</span></div>
                    <div><strong>Fuel</strong><span th:text="${car.fuelType}">Petrol</span></div>
                    <div><strong>Type</strong><span th:text="${car.type}">SUV</span></div>
                </div>

                <div class="feature-tags" th:if="${not #sets.isEmpty(car.featureTags)}" style="margin:12px 0">
                    <span class="ftag" th:each="ft : ${car.featureTags}" th:text="${ft}">AC</span>
                </div>

                <div class="rate-cards">
                    <div class="rate-card" th:if="${car.hourlyRate}">
                        <div class="r">[[${currencySymbol}]]<span th:text="${car.hourlyRate}">0</span></div><small>per hour</small>
                    </div>
                    <div class="rate-card highlight">
                        <div class="r">[[${currencySymbol}]]<span th:text="${car.pricePerDay}">2000</span></div><small>per day</small>
                    </div>
                    <div class="rate-card" th:if="${car.monthlyRate}">
                        <div class="r">[[${currencySymbol}]]<span th:text="${car.monthlyRate}">0</span></div><small>per month</small>
                    </div>
                </div>

                <div class="detail-price" th:if="${days != null}">
                    Est. <strong>[[${currencySymbol}]]<span th:text="${car.pricePerDay * days}">0</span></strong>
                    <small th:text="'for ' + ${days} + ' day' + (${days} > 1 ? 's' : '') + ' (excl. driver &amp; tax)'">for days</small>
                </div>

                <div sec:authorize="isAuthenticated()" th:if="${car.bookable}" style="margin-top:8px">
                    <a class="btn btn-primary"
                       th:href="@{/cars/{id}/book(id=${car.id}, pickup=${pickup}, ret=${ret})}">Self-drive</a>
                    <a class="btn btn-outline"
                       th:href="@{/cars/{id}/book(id=${car.id}, withDriver=true, pickup=${pickup}, ret=${ret})}">Book with driver</a>
                    <p th:if="${availableDrivers == 0}" style="font-size:12px;color:#888;margin-top:6px">
                        (No drivers available right now — self-drive only.)
                    </p>
                </div>
                <a sec:authorize="!isAuthenticated()" class="btn btn-primary"
                   th:href="@{/login}">Login to book</a>
                <span th:unless="${car.bookable}" class="badge badge-cancelled" style="margin-left:8px">Not available</span>
            </div>
        </div>

        <!-- ============ Reviews & ratings ============ -->
        <div class="reviews-section">
            <div class="reviews-head">
                <h2>Reviews</h2>
                <div class="reviews-summary" th:if="${reviewCount > 0}">
                    <span class="rating-big" th:text="${avgRating}">4.5</span>
                    <div>
                        <div class="rating-stars" th:attr="data-rating=${avgRating}"></div>
                        <small th:text="${reviewCount} + ' review' + (${reviewCount} > 1 ? 's' : '')">12 reviews</small>
                    </div>
                </div>
            </div>

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

            <!-- Write a review (authenticated users) -->
            <form sec:authorize="isAuthenticated()" class="review-form" th:action="@{/reviews}" method="post">
                <input type="hidden" name="carId" th:value="${car.id}"/>
                <h4>Write a review</h4>
                <div class="star-input" id="starInput">
                    <span data-v="1">&#9734;</span><span data-v="2">&#9734;</span><span data-v="3">&#9734;</span>
                    <span data-v="4">&#9734;</span><span data-v="5">&#9734;</span>
                </div>
                <input type="hidden" name="rating" id="ratingField" value="5"/>
                <textarea name="comment" rows="3" placeholder="Share your experience with this car…"></textarea>
                <button class="btn btn-primary btn-sm" type="submit">Post Review</button>
            </form>
            <p sec:authorize="!isAuthenticated()" class="review-login">
                <a th:href="@{/login}">Log in</a> to leave a review.
            </p>

            <!-- Review list -->
            <div class="review-list">
                <div th:if="${#lists.isEmpty(reviews)}" class="media-empty" style="background:none;border:none">
                    No reviews yet — be the first to review this car.
                </div>
                <div th:each="rv : ${reviews}" class="review-item">
                    <div class="review-avatar" th:text="${#strings.substring(rv.user.fullName ?: rv.user.username, 0, 1)}">A</div>
                    <div class="review-body">
                        <div class="review-meta">
                            <strong th:text="${rv.user.fullName} ?: ${rv.user.username}">Customer</strong>
                            <span class="rating-stars" th:attr="data-rating=${rv.rating}"></span>
                        </div>
                        <p th:if="${rv.comment}" th:text="${rv.comment}">Great car!</p>
                        <small th:text="${#temporals.format(rv.createdAt, 'd MMM yyyy')}">1 Jan 2026</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
// star-rating widget + render read-only star strings
(function(){
  document.querySelectorAll('.rating-stars').forEach(function(el){
    var r=Math.round(parseFloat(el.getAttribute('data-rating'))||0), s='';
    for(var i=1;i<=5;i++) s+= (i<=r?'★':'☆');
    el.textContent=s;
  });
  var input=document.getElementById('starInput');
  if(input){
    var field=document.getElementById('ratingField');
    function paint(v){ input.querySelectorAll('span').forEach(function(sp){
      sp.textContent = (parseInt(sp.dataset.v)<=v)?'★':'☆'; }); }
    input.querySelectorAll('span').forEach(function(sp){
      sp.addEventListener('mouseover',function(){paint(parseInt(sp.dataset.v));});
      sp.addEventListener('click',function(){ field.value=sp.dataset.v; paint(parseInt(sp.dataset.v)); });
    });
    input.addEventListener('mouseleave',function(){ paint(parseInt(field.value)); });
    paint(5);
  }
})();
</script>

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