{% extends "base.html" %}

{% block title %}Car Rentals with Driver - LKgetaways{% endblock %}

{% block inner_hero_background %}/static/images/car-inner.webp{% endblock %}
{% block inner_hero_title %}Rent a Car with Driver{% endblock %}
{% block inner_hero_subtitle %}Explore Sri Lanka in comfort and style with our premium car rental services{% endblock %}

{% block content %}


<!-- Rent a Car Fleet Section -->
<section class="rent-car-fleet pb-5">
    <div class="container">
        <!-- <h3 class="  mb-5">Rent A Car With Driver</h3> -->
        <nav>
            <div class="nav nav-tabs  mb-4" id="nav-tab" role="tablist">
                {% for category in categories %}
                    <button class="nav-link {% if category == 'CAR' %}active{% endif %}" id="nav-{{ category }}-tab" data-bs-toggle="tab" data-bs-target="#nav-{{ category }}" type="button" role="tab" aria-controls="nav-{{ category }}" aria-selected="{% if category == 'CAR' %}true{% else %}false{% endif %}">{{ category.replace('_', ' ').title() }}</button>
                {% endfor %}
                <button class="nav-link" id="nav-all-tab" data-bs-toggle="tab" data-bs-target="#nav-all" type="button" role="tab" aria-controls="nav-all" aria-selected="false">All</button>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            {% for category in categories %}
                <div class="tab-pane fade {% if category == 'CAR' %}show active{% endif %}" id="nav-{{ category }}" role="tabpanel" aria-labelledby="nav-{{ category }}-tab">
                    <div class="row">
                        {% for car in cars if car.category.name == category %}
                            <div class="col-md-3 mb-4 car-card" data-category="{{ car.category.name }}">
                                <div class="card">
                                    <!-- <div class="card_image"> -->
                                        <img src="{{ url_for('static', filename='uploads/' + car.image) }}" class="card-img-top" alt="{{ car.name }}">
                                    <!-- </div> -->
                                    <div class="card-body">
                                        <h5 class="card-title">{{ car.name }}</h5>
                                        <p class="card-text">
                                            <span class="me-2"><i class="fa fa-users"></i> {{ car.capacity }} Pax</span>
                                            {% if car.has_usb %}<span class="me-2"><i class="fa-brands fa-usb"></i> USB</span>{% endif %}
                                            {% if car.has_player %}<span class="me-2"><i class="fa fa-music"></i> Player</span>{% endif %}
                                            {% if car.has_bluetooth %}<span class="me-2"><i class="fa-brands fa-bluetooth-b"></i> Bluetooth</span>{% endif %}
                                            {% if car.luggage_space %}<span class="me-2"><i class="fa fa-suitcase"></i> {{ car.luggage_space }}</span>{% endif %}
                                        </p>
                                        <a href="{{ url_for('main.request_quote') }}" class="btn primary_btn"">Request a Quote</a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endfor %}
            <div class="tab-pane fade" id="nav-all" role="tabpanel" aria-labelledby="nav-all-tab">
                <div class="row">
                    {% for car in cars %}
                        <div class="col-md-3 mb-4 car-card" data-category="{{ car.category.name }}">
                            <div class="card">
                                <img src="{{ url_for('static', filename='uploads/' + car.image) }}" class="card-img-top" alt="{{ car.name }}">
                                <div class="card-body">
                                    <h5 class="card-title">{{ car.name }}</h5>
                                    <p class="card-text">
                                        <span class="me-2"><i class="fa fa-users"></i> {{ car.capacity }} Pax</span>
                                        {% if car.has_usb %}<span class="me-2"><i class="fa fa-usb"></i> USB</span>{% endif %}
                                        {% if car.has_player %}<span class="me-2"><i class="fa fa-music"></i> Player</span>{% endif %}
                                        {% if car.has_bluetooth %}<span class="me-2"><i class="fa fa-bluetooth"></i> Bluetooth</span>{% endif %}
                                        {% if car.luggage_space %}<span class="me-2"><i class="fa fa-suitcase"></i> {{ car.luggage_space }}</span>{% endif %}
                                    </p>
                                    <a href="{{ url_for('main.request_quote') }}" class="btn primary_btn"">Request a Quote</a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</section>


<section class="why-choose-us py-5 bg-light">
    <div class="container">
        <h2 class="  mb-5">Why Choose Our Car Rental Service?</h2>
        <div class="row">
            <div class="col-md-4 mb-4">
                <div class=" ">
                    <i class="fas fa-car-alt fa-3x text-primary mb-3"></i>
                    <h3>Well-Maintained Vehicles</h3>
                    <p>Our fleet is regularly serviced and kept in top condition</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class=" ">
                    <i class="fas fa-shield-alt fa-3x text-primary mb-3"></i>
                    <h3>Safe and Reliable</h3>
                    <p>Experienced drivers and 24/7 support for your peace of mind</p>
                </div>
            </div>
            <div class="col-md-4 mb-4">
                <div class=" ">
                    <i class="fas fa-map-marked-alt fa-3x text-primary mb-3"></i>
                    <h3>Local Expertise</h3>
                    <p>Our drivers know the best routes and hidden gems</p>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}