{% extends "base.html" %}
{% set use_main_hero = True %}

{% block title %}Lanka Travel Bee - Explore Sri Lanka{% endblock %}

{% block hero_background %}/static/images/hot_air_baloon_sri_lanka.webp{% endblock %}
{% block hero_title %}Discover Sri Lanka - Your Journey, Our Expertise{% endblock %}
{% block hero_subtitle %}Embark on an unforgettable adventure with our premium car and driver hire services. From Colombo to the hidden gems of Sri Lanka, experience comfort, convenience, and local insights. <br> Let us be your guide to the wonders of this beautiful island.{% endblock %}
{% block hero_cta_text %}Start Your Adventure{% endblock %}




{% block content %}

  <!-- Search Bar -->
  <!-- <div class="mb-3">
    <div class="input-group bg-light rounded-pill">
        <span class="input-group-text bg-transparent border-0">
            <i class="bi bi-search text-muted"></i>
        </span>
        <input type="text" class="form-control bg-transparent border-0" placeholder="Search tours and vehicles">
    </div>
</div> -->


<div class="container py-5">
    <h2 class="  mb-4 moblie-title">Explore Sri Lanka with Us</h2>
    
    <ul class="nav nav-pills mb-4 justify-content-center" id="mainTab" role="tablist">
        {% for category in parent_categories %}
        <li class="nav-item" role="presentation">
            <button class="nav-link {% if loop.first %}active{% endif %}" id="{{ category.slug }}-tab" data-bs-toggle="pill" data-bs-target="#{{ category.slug }}" type="button" role="tab" aria-controls="{{ category.slug }}" aria-selected="{% if loop.first %}true{% else %}false{% endif %}">{{ category.name }}</button>
        </li>
        {% endfor %}
    </ul>
    
    <div class="tab-content" id="mainTabContent">
        {% for category in parent_categories %}
        <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="{{ category.slug }}" role="tabpanel" aria-labelledby="{{ category.slug }}-tab">
            <a href="{{ url_for('main.tour_packages', category=category.slug) }}" class="see_all_btn">See All</a>
            <div class="tour-cards-container">
                <div class="tour-cards-wrapper">
                    {% for subcategory in category.subcategories %}
                        {% for tour in subcategory.tours[:8] %}
                            {% include 'partials/mobile_tour_card.html' %}
                        {% endfor %}
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>


<!-- Tour Categories -->
<h3 class="h5 mb-3">Tour Categories</h3>
<!-- Tab Navigation for Categories -->
<ul class="nav nav-tabs mt-5" id="categoryTabs" role="tablist">
    {% for category in parent_categories %}
    <li class="nav-item" role="presentation">
        <button class="nav-link {% if loop.first %}active{% endif %}" id="tab-{{ category.id }}" data-bs-toggle="tab" data-bs-target="#content-{{ category.id }}" type="button" role="tab" aria-controls="content-{{ category.id }}" aria-selected="{% if loop.first %}true{% else %}false{% endif %}">
            {{ category.name }}
        </button>
    </li>
    {% endfor %}
</ul>

<!-- Tab Content for Subcategories -->
<div class="tab-content" id="categoryTabsContent">
    {% for category in parent_categories %}
    <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="content-{{ category.id }}" role="tabpanel" aria-labelledby="tab-{{ category.id }}">
        <!-- Updated Row with row-cols classes -->
        <div class="row row-cols-2 row-cols-md-6 row-cols-lg-8 g-3 mt-3">
            {% for subcategory in category.subcategories %}
            <div class="col">
                <a href="{{ url_for('main.tour_packages', category=category.slug, subcategory=subcategory.slug) }}" class="text-decoration-none">
                    <div class="card h-100 border-0 rounded-4 overflow-hidden shadow-sm">
                        {% if subcategory.image %}
                            <img src="{{ url_for('static', filename='uploads/' + subcategory.image) }}" class="card-img-top" alt="{{ subcategory.name }}">
                        {% else %}
                            <img src="{{ url_for('static', filename='uploads/default-image.avif') }}" class="card-img-top" alt="{{ subcategory.name }}">
                        {% endif %}
                        <div class="card-body">
                            <h5 class="card-title">{{ subcategory.name }}</h5>
                            <p class="card-text text-muted">{{ subcategory.description }}</p>
                        </div>
                    </div>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>



    


<!-- Rent a Car Fleet Section -->
<div class="container py-5">
    <h2 class="  mb-4 moblie-title">Our Vehicle Fleet <a href="{{ url_for('main.car_rentals') }}" class="small">See All</a></h2>
    
 
 
    <ul class="nav nav-pills mb-4 justify-content-center" id="vehicleTab" role="tablist">
        {% for category in VehicleCategory %}
        <li class="nav-item" role="presentation">
            <button class="nav-link {% if loop.first %}active{% endif %}" id="{{ category.name|lower }}-tab" data-bs-toggle="pill" data-bs-target="#{{ category.name|lower }}" type="button" role="tab" aria-controls="{{ category.name|lower }}" aria-selected="{% if loop.first %}true{% else %}false{% endif %}">{{ category.value }}</button>
        </li>
        {% endfor %}
    </ul>
    
    <div class="tab-content" id="vehicleTabContent">
        {% for category in VehicleCategory %}
        <div class="tab-pane fade {% if loop.first %}show active{% endif %}" id="{{ category.name|lower }}" role="tabpanel" aria-labelledby="{{ category.name|lower }}-tab">
           
            <div class="tour-cards-container">
                <div class="tour-cards-wrapper-cars row">
                    {% for car in cars if car.category == category %}
                      
                        <div class="col-sm-1 col-md-4 col-lg-3 mb-3">
                            
                            <div class="h-100 border-0 shadow-sm d-flex">
                                <div class="card-img-top w-50" style="height: 100px; overflow: hidden;">
                                    <img src="{{ url_for('static', filename='uploads/' + (car.image or 'default_car.jpg')) }}" class="img-fluid w-100 h-100" style="object-fit: cover;" alt="{{ car.name }}">
                                </div>
                                <div class="card-body">
                                    <h5 class="card-title h6 mb-1">{{ car.name }}</h5>
                                    <p class="card-text small text-muted mb-2">{{ car.description }}</p>
                                    <a href="{{ url_for('main.request_quote') }}" class="btn btn-sm btn-light rounded-pill">Request a Quote</a>
                                </div>
                            </div>
                        </div>
                     
                    {% endfor %}
                </div>
            </div>
        </div>
      
        {% endfor %}

       
       
    </div>

    
</div>

</div>
<!-- Discover Sri Lanka Section -->
<section class="discover-sl py-5">
    <div class="container">
        <div class="row justify-content-between">
            <div class="col-md-7">
                <h2>Why <span class="text-primary">Sri Lanka ? </span></h2>
                <p>Sri Lanka offers a perfect mix of adventure and tranquility. From ancient temples and wild elephants to golden beaches and vibrant cities, Sri Lanka is rich in diversity. Discover misty mountains, tea plantations, and colorful festivals that showcase the unique culture. Sri Lanka is a dream destination with endless opportunities for relaxation and unforgettable experiences.</p>

                <h2>Why <span class="text-primary">Lanka Travel Bee ? </span></h2>
               <p>At Lanka Travel Bee, our expert local knowledge and connections give you access to hidden gems and personalized itineraries. We manage every detail, from luxury stays to cultural experiences, ensuring a stress-free journey. Our trusted services, like car hire with drivers, let you explore Sri Lanka effortlessly. With a focus on quality and customization, we turn your trip into a memorable adventure.</p>
              
                
                <a href="/about" class="btn btn-link">Read More</a>
                
            </div>
            <div class="col-md-4">
                <img src="/static/images/sri-lanka-map-outline.png" class="img-fluid rounded" alt="Sri Lanka Landscape">
            </div>
        </div>
    </div>
</section>


<!-- Testimonials -->
<!-- <section class="testimonials py-5">
    <div class="container">
        <h2 class="  mb-4">What Our Clients Say</h2>
        <div class="row">
            <div class="col-md-4 mb-3">
                <div class="card h-100">
                    <div class="card-body">
                        <blockquote class="blockquote">
                            <p>This is a testimonial. It's a short quote or statement that represents the opinion of the person giving it.</p>
                            <footer class="blockquote-footer">John Doe</footer>
                        </blockquote>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="card h-100">
                    <div class="card-body">
                        <blockquote class="blockquote">
                            <p>This is a testimonial. It's a short quote or statement that represents the opinion of the person giving it.</p>
                            <footer class="blockquote-footer">Jane Doe</footer>
                        </blockquote>
                    </div>
                </div>
            </div>
            <div class="col-md-4 mb-3">
                <div class="card h-100">
                    <div class="card-body">
                        <blockquote class="blockquote">
                            <p>This is a testimonial. It's a short quote or statement that represents the opinion of the person giving it.</p>
                            <footer class="blockquote-footer">John Smith</footer>
                        </blockquote>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section> -->


<!-- Blog Section -->
<section class="blog-section py-5 bg-light">
    <div class="container">
        <h2 class="  mb-4">Latest from Our Blog</h2>
        <div class="row">
           {% for post in latest_posts %}
<div class="col-md-4 mb-4">
    <div class="card h-100">
        {% if post.feature_image %}
            <img src="{{ url_for('static', filename='uploads/' + post.feature_image) }}" class="card-img-top" alt="{{ post.title }}">
        {% else %}
            <img src="{{ url_for('static', filename='images/default-blog-image.jpg') }}" class="card-img-top" alt="Default Image">
        {% endif %}
        <div class="card-body">
            <h5 class="card-title">{{ post.title }}</h5>
            <p class="card-text">{{ post.content|truncate(100) }}</p>
            <a href="{{ url_for('main.blog_post', slug=post.slug) }}" class="btn primary_btn">Read More</a>
        </div>
    </div>
</div>
{% endfor %}
        </div>
        <div class="  mt-4">
            <a href="{{ url_for('main.blog_list') }}" class="btn primary_btn">View All Posts</a>
        </div>
    </div>
</section>
    








{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Load parent categories
        fetch('/api/parent-categories')
            .then(response => response.json())
            .then(data => {
                const parentCategoriesContainer = document.getElementById('parentCategories');
                data.forEach(category => {
                    const categoryElement = document.createElement('div');
                    categoryElement.className = 'col-md-4 mb-3';
                    categoryElement.innerHTML = `
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">${category.title}</h5>
                                <a href="#" class="btn primary_btn load-subcategories" data-category-id="${category.id}">Explore</a>
                            </div>
                        </div>
                    `;
                    parentCategoriesContainer.appendChild(categoryElement);
                });
            });

        // Load subcategories when a parent category is clicked
        document.getElementById('parentCategories').addEventListener('click', function(e) {
            if (e.target.classList.contains('load-subcategories')) {
                e.preventDefault();
                const categoryId = e.target.getAttribute('data-category-id');
                fetch(`/api/subcategories/${categoryId}`)
                    .then(response => response.json())
                    .then(data => {
                        const subcategoriesList = document.getElementById('subcategoriesList');
                        subcategoriesList.innerHTML = '';
                        data.forEach(subcategory => {
                            const subcategoryElement = document.createElement('div');
                            subcategoryElement.innerHTML = `
                                <h6>${subcategory.title}</h6>
                                <p>${subcategory.description}</p>
                            `;
                            subcategoriesList.appendChild(subcategoryElement);
                        });
                        const modal = new bootstrap.Modal(document.getElementById('subcategoriesModal'));
                        modal.show();
                    });
            }
        });
    });
</script>
{% endblock %}