<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="~{fragments/layout :: head('MV Rent — Self Drive Car Rentals')}"></head>
<body th:attr="data-min-rate=${minRate}">

<div th:replace="~{fragments/layout :: navbar}"></div>

<!-- Hero carousel -->
<section class="hero" style="padding:0">
    <div class="slides" id="slides">
        <div class="slide active" th:style="'background-image:url(' + @{/images/banner1.jpg} + ')'"></div>
        <div class="slide" th:style="'background-image:url(' + @{/images/banner2.jpg} + ')'"></div>
        <div class="slide" th:style="'background-image:url(' + @{/images/banner3.jpg} + ')'"></div>
        <div class="slide" th:style="'background-image:url(' + @{/images/banner4.jpg} + ')'"></div>
        <div class="slide" th:style="'background-image:url(' + @{/images/banner5.jpg} + ')'"></div>
    </div>
    <div class="dots" id="dots">
        <button class="dot active" type="button"></button>
        <button class="dot" type="button"></button>
        <button class="dot" type="button"></button>
        <button class="dot" type="button"></button>
        <button class="dot" type="button"></button>
    </div>
</section>

<!-- Booking form (advanced) -->
<section class="booking-wrap" style="padding-top:0">
    <div class="container">
        <form class="booking-card" id="bookingForm" th:action="@{/cars}" method="get" novalidate>
            <!-- Vehicle kind tabs (sets hidden 'kind' so backend can branch) -->
            <div class="tabs">
                <button class="tab active" type="button" data-kind="CAR">
                    <img th:src="@{/images/car.png}" alt=""/>Cars
                </button>
                <button class="tab" type="button" data-kind="BIKE">
                    <img th:src="@{/images/bike.png}" alt=""/>Bikes
                </button>
                <button class="spot-cta" type="button" id="spotBookBtn"
                        title="Auto-fills pickup in 30 min and drop-off in 24 hrs">
                    <img th:src="@{/images/spot-booking.svg}" alt=""/>
                    Spot Booking — Drive in 30 minutes
                </button>
            </div>

            <!-- Category quick-filter chips -->
            <div class="chip-row" id="categoryChips">
                <span class="chip-label">Category</span>
                <button type="button" class="chip chip-active" data-type="">All</button>
                <button type="button" class="chip" data-type="HATCHBACK">Hatchback</button>
                <button type="button" class="chip" data-type="SEDAN">Sedan</button>
                <button type="button" class="chip" data-type="SUV">SUV</button>
                <button type="button" class="chip" data-type="MUV">MUV</button>
                <button type="button" class="chip" data-type="LUXURY">Luxury</button>
                <button type="button" class="chip" data-type="BIKE">Bike</button>
            </div>

            <!-- Hidden inputs that actually get submitted -->
            <input type="hidden" name="pickup" id="pickupDate"/>
            <input type="hidden" name="ret" id="returnDate"/>
            <input type="hidden" name="type" id="typeInput"/>

            <!-- Main grid -->
            <div class="booking-grid">
                <div class="field">
                    <label>Pick-up Date &amp; Time</label>
                    <input type="datetime-local" id="pickupDT" required/>
                </div>
                <div class="field" id="pickupLocField">
                    <label>Pick-up Location</label>
                    <select name="pickupLocation" id="pickupLocation">
                        <option>Kochi</option>
                        <option>Kollam</option>
                        <option>Kottayam</option>
                        <option>Calicut</option>
                        <option>Trivandrum</option>
                        <option>Thrissur</option>
                        <option>Kannur</option>
                        <option>Coimbatore</option>
                    </select>
                </div>
                <div class="field">
                    <label>Drop-off Date &amp; Time</label>
                    <input type="datetime-local" id="returnDT" required/>
                </div>
                <div class="field" id="dropLocField">
                    <label>Drop-off Location</label>
                    <select name="dropLocation" id="dropLocation">
                        <option>Kochi</option>
                        <option>Kollam</option>
                        <option>Kottayam</option>
                        <option>Calicut</option>
                        <option>Trivandrum</option>
                    </select>
                </div>
                <button class="drive-btn" type="submit">Let's Drive</button>
            </div>

            <!-- Inline validation message -->
            <div class="booking-error" id="bookingError" hidden></div>

            <!-- Toolbar: duration chips, same-location, promo toggle -->
            <div class="booking-toolbar">
                <div class="duration-chips">
                    <span class="chip-label">Duration</span>
                    <button type="button" class="chip" data-hours="3">+3 hrs</button>
                    <button type="button" class="chip" data-hours="24">+1 day</button>
                    <button type="button" class="chip" data-hours="72">+3 days</button>
                    <button type="button" class="chip" data-hours="168">+1 week</button>
                </div>

                <label class="same-loc">
                    <input type="checkbox" id="sameLoc" checked/> Return to same location
                </label>

                <button type="button" class="promo-toggle" id="promoToggle">
                    Have a promo code? <span aria-hidden="true">&#43;</span>
                </button>
            </div>

            <!-- Promo (collapsed by default) -->
            <div class="promo-row" id="promoRow" hidden>
                <input type="text" name="promo" id="promoInput" placeholder="Enter promo code (e.g. WHEELS10)" maxlength="20"/>
                <button type="button" class="btn btn-outline btn-sm" id="applyPromo">Apply</button>
                <span class="promo-status" id="promoStatus"></span>
            </div>

            <!-- Live trip summary -->
            <div class="trip-summary" id="tripSummary" hidden>
                <div class="ts-item">
                    <span class="ts-label">Duration</span>
                    <span class="ts-value" id="tsDuration">—</span>
                </div>
                <div class="ts-item">
                    <span class="ts-label">From</span>
                    <span class="ts-value" id="tsFrom">—</span>
                </div>
                <div class="ts-item">
                    <span class="ts-label">Until</span>
                    <span class="ts-value" id="tsUntil">—</span>
                </div>
                <div class="ts-item">
                    <span class="ts-label">Est. from</span>
                    <span class="ts-value ts-price" id="tsPrice">[[${currencySymbol}]]0</span>
                </div>
            </div>
        </form>
    </div>
</section>

<!-- Features -->
<section>
    <div class="container">
        <div class="section-title">
            <h2>Why Choose Us</h2>
            <p>Everything you need for a hassle-free drive</p>
        </div>
        <div class="features-grid">
            <div class="feature"><div class="feature-icon">&#128666;</div><h4>Doorstep Delivery</h4></div>
            <div class="feature"><div class="feature-icon">&#128295;</div><h4>Zero Maintenance</h4></div>
            <div class="feature"><div class="feature-icon">&#128205;</div><h4>Multiple Pickup</h4></div>
            <div class="feature"><div class="feature-icon">&#128680;</div><h4>Roadside Assistance</h4></div>
            <div class="feature"><div class="feature-icon">&#128737;</div><h4>Affordable Insurance</h4></div>
            <div class="feature"><div class="feature-icon">&#127873;</div><h4>Offers &amp; Discounts</h4></div>
        </div>
    </div>
</section>

<!-- Promotions -->
<section class="promo-bg">
    <div class="container">
        <div class="section-title">
            <h2>Special Offers</h2>
            <p>Drive more, pay less</p>
        </div>
        <div class="promo-grid">
            <div class="promo-card"><img th:src="@{/images/offer-app.png}" alt="App offer"/></div>
            <div class="promo-card"><img th:src="@{/images/offer-card1.jpeg}" alt="Offer 1"/></div>
            <div class="promo-card"><img th:src="@{/images/offer-card2.jpeg}" alt="Offer 2"/></div>
        </div>
    </div>
</section>

<!-- Vehicles (dynamic from DB) -->
<section>
    <div class="container">
        <div class="section-title">
            <h2>Featured Vehicles</h2>
            <p>Choose from our premium fleet</p>
        </div>

        <div th:if="${#lists.isEmpty(featuredCars)}" style="text-align:center;color:#888">
            No cars in the fleet yet.
        </div>

        <div class="vehicles-grid">
            <div th:each="car : ${featuredCars}" class="vehicle-card">
                <div class="vehicle-img" th:classappend="${car.imageUrl == null} ? 'placeholder' : ''">
                    <img th:if="${car.imageUrl != null}"
                         th:src="${car.imageUrl}" th:alt="${car.make}"/>
                    <span th:unless="${car.imageUrl != null}"
                          th:text="${#strings.substring(car.make,0,1)}">C</span>
                </div>
                <div class="vehicle-body">
                    <h3 th:text="${car.make + ' ' + car.model}">Volkswagen Virtus</h3>
                    <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
                    <div class="specs">
                        <span th:text="${car.transmission}">Automatic</span>
                        <span th:text="${car.fuelType}">Diesel</span>
                        <span th:text="${car.seats + ' Seater'}">5 Seater</span>
                    </div>
                    <div class="price-row">
                        <div class="price">
                            [[${currencySymbol}]]<span th:text="${#numbers.formatDecimal(car.pricePerDay, 0, 'COMMA', 0, 'NONE')}">2,530</span>
                            <small>/day</small>
                        </div>
                        <a class="rent-btn" th:href="@{/cars/{id}(id=${car.id})}">Rent Now</a>
                    </div>
                </div>
            </div>
        </div>

        <div style="text-align:center;margin-top:32px">
            <a class="btn btn-outline" th:href="@{/cars}">Browse all cars &rarr;</a>
        </div>
    </div>
</section>

<!-- Connection -->
<section class="connect-bg">
    <div class="container">
        <div class="connect-grid">
            <div class="connect-card">
                <img th:src="@{/images/connection-1.png}" alt="Mobile App"/>
                <h3>MV Rent Mobile App</h3>
                <p>Book a car in seconds, manage trips on the go.</p>
                <a class="connect-link" href="#">Download Now &rarr;</a>
            </div>
            <div class="connect-card">
                <img th:src="@{/images/connection-2.png}" alt="FAQs"/>
                <h3>More About Us</h3>
                <p>Curious how it works? Browse our most common questions.</p>
                <a class="connect-link" href="#">View FAQs &rarr;</a>
            </div>
            <div class="connect-card">
                <img th:src="@{/images/connection-3.png}" alt="Blog"/>
                <h3>Get Inspired</h3>
                <p>Travel guides, road trip ideas, and driving tips.</p>
                <a class="connect-link" href="#">Read Blogs &rarr;</a>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials -->
<section class="testi-bg" id="testimonials">
    <div class="container">
        <div class="section-title">
            <h2>What Our Customers Say</h2>
            <p>Real stories from happy drivers</p>
        </div>
        <div class="testi-grid">
            <div class="testi-card">
                <img class="testi-icon" th:src="@{/images/testimonial-icon.png}" alt=""/>
                <p class="testi-text">A smooth, reliable rental experience. The pickup was on time and the car was spotless. Recommended for anyone exploring Kerala.</p>
                <div class="testi-author"><div class="avatar">H</div><div><h5>Harish K.</h5><span>Travel Guide</span></div></div>
            </div>
            <div class="testi-card">
                <img class="testi-icon" th:src="@{/images/testimonial-icon.png}" alt=""/>
                <p class="testi-text">Booked through the app, picked up the car at the airport, and we were on the road in minutes. Will book again.</p>
                <div class="testi-author"><div class="avatar">S</div><div><h5>Saiprasad R.</h5><span>Avid Traveller</span></div></div>
            </div>
            <div class="testi-card">
                <img class="testi-icon" th:src="@{/images/testimonial-icon.png}" alt=""/>
                <p class="testi-text">Great pricing and a wide choice of cars. The team helped me with a last-minute change with no hassle.</p>
                <div class="testi-author"><div class="avatar">L</div><div><h5>Lerin Z.</h5><span>Customer</span></div></div>
            </div>
            <div class="testi-card">
                <img class="testi-icon" th:src="@{/images/testimonial-icon.png}" alt=""/>
                <p class="testi-text">Spotless vehicles, fair prices, and professional staff. Five stars for my trip across the backwaters.</p>
                <div class="testi-author"><div class="avatar">R</div><div><h5>Ram Kishore</h5><span>Customer</span></div></div>
            </div>
        </div>
    </div>
</section>

<!-- Subscribe -->
<section class="subscribe">
    <div class="container subscribe-inner">
        <h3>Get Special Offers in Your Inbox</h3>
        <form onsubmit="event.preventDefault();alert('Subscribed!')">
            <input type="email" placeholder="Enter your email address" required/>
            <button type="submit">Subscribe Now</button>
        </form>
    </div>
</section>

<!-- About -->
<section class="about-section">
    <div class="container">
        <h2>Rent a Car from the Best</h2>
        <p>Looking for a self-drive car rental? We offer a flexible, affordable way to explore South India on your own schedule — no hidden fees, no surprises.</p>
        <p>Pick from a fleet of well-maintained hatchbacks, sedans, SUVs and premium cars. Book online in minutes, get the car delivered to your doorstep, and drive wherever you like.</p>
        <p>With branches across Kerala, Tamil Nadu and Karnataka, you're never far from a pickup point. Round-the-clock roadside assistance keeps you covered for the entire trip.</p>
    </div>
</section>

<!-- Locations -->
<section class="loc-bg">
    <div class="container">
        <div class="section-title">
            <h2>Self Drive Cars Near You</h2>
        </div>
        <div class="loc-grid">
            <div class="loc-card"><div class="loc-icon">&#128663;</div><span>Self Drive Car in Kerala</span></div>
            <div class="loc-card"><div class="loc-icon">&#128663;</div><span>Self Drive Car in Kochi</span></div>
            <div class="loc-card"><div class="loc-icon">&#128663;</div><span>Self Drive Car in Thrissur</span></div>
            <div class="loc-card"><div class="loc-icon">&#128663;</div><span>Self Drive Car in Kottayam</span></div>
            <div class="loc-card"><div class="loc-icon">&#128663;</div><span>Self Drive Car in Alappuzha</span></div>
            <div class="loc-card"><div class="loc-icon">&#128663;</div><span>Self Drive Car in Trivandrum</span></div>
            <div class="loc-card"><div class="loc-icon">&#128663;</div><span>Self Drive Car in Quilon</span></div>
            <div class="loc-card"><div class="loc-icon">&#128663;</div><span>Self Drive Car in Varkala</span></div>
            <div class="loc-card"><div class="loc-icon">&#128663;</div><span>Self Drive Car in Calicut</span></div>
            <div class="loc-card"><div class="loc-icon">&#128663;</div><span>Self Drive Car in Kannur</span></div>
        </div>
    </div>
</section>

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

<script th:src="@{/js/home.js}"></script>
<script th:src="@{/js/booking.js}"></script>
</body>
</html>
