<!DOCTYPE html>
<html lang="en-US">
  <!DOCTYPE html>
  <html lang="en-US">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="theme-color" content="#ffffff">


      
      <!-- Primary Meta Tags -->
      <title>{% block title %}Lanka Travel Bee - Tour Packages & Car and Driver Rental{% endblock %}</title>
      <meta name="description" content="{% block description %}Discover Sri Lanka with Lanka Travel Bee! We offer personalized tour packages and reliable car and driver hire services.{% endblock %}">
  
      <!-- Web App Manifest -->
      <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
      <meta name="theme-color" content="#ffffff">
  
        
      <!-- Favicon and App Icons -->
      <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicon/favicon-32x32.png') }}">
      <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicon/favicon-16x16.png') }}">
      <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='favicon/logo.avif') }}">
      <link rel="manifest" href="{{ url_for('static', filename='favicon/site.webmanifest') }}">
  
      <!-- Open Graph / Social Media -->
      <meta property="og:type" content="website">
      <meta property="og:url" content="{{ request.url }}">
      <meta property="og:title" content="{% block og_title %}Lanka Travel Bee - Tour Packages & Car and Driver Rental{% endblock %}">
      <meta property="og:description" content="{% block og_description %}Discover Sri Lanka with Lanka Travel Bee! We offer personalized tour packages and reliable car and driver hire services.{% endblock %}">
      <meta property="og:image" content="{{ url_for('static', filename='images/Hot_air.avif', _external=True) }}">
      
      <meta name="twitter:card" content="summary_large_image">
      <meta name="twitter:url" content="{{ request.url }}">
      <meta name="twitter:title" content="{% block twitter_title %}Lanka Travel Bee - Tour Packages & Car and Driver Rental{% endblock %}">
      <meta name="twitter:description" content="{% block twitter_description %}Discover Sri Lanka with Lanka Travel Bee! We offer personalized tour packages and reliable car and driver hire services.{% endblock %}">
      <meta name="twitter:image" content="{{ url_for('static', filename='images/blog-inner.avif', _external=True) }}">
  
      <!-- Canonical URL -->
      <link rel="canonical" href="{{ request.url }}">

     
      <!-- Fonts -->
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Prompt:wght@100..900&family=Marcellus&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
  
      <!-- Critical CSS -->
      <style>
          .menu-icon-wrapper {
              position: fixed;
              transform: translateY(-50%);
              z-index: 1000;
          }
          #menu-icon { cursor: pointer; }
          #drag-handle { cursor: move; text-align: center; margin-top: 5px; }

          .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 998;
  }

  .menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  #menu-popup {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100%;
    background: #fff;
    z-index: 999;
    transition: right 0.3s ease;
    overflow-y: auto;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  }

  #menu-popup.active {
    right: 0;
  }

  .menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 1rem; */
    /* background: #1a73e8; 
    color: white; */
  }

  .close-button {
    background: none;
    border: none;
    /* color: white; */
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
  }

  .navbar-nav {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .nav-item {
    border-bottom: 1px solid #eee;
  }

  .nav-link {
    display: block;
    padding: 1rem;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s;
  }

  .nav-link:hover {
    background-color: #f5f5f5;
  }

  .nav-item.has-submenu > .nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-item.has-submenu > .nav-link::after {
    content: '›';
    font-size: 1.2rem;
    transition: transform 0.3s;
  }

  .nav-item.has-submenu.active > .nav-link::after {
    transform: rotate(90deg);
  }

  .submenu {
    display: none;
    background: #f8f9fa;
    padding-left: 1rem;
  }

  .submenu.active {
    display: block;
  }

  .cta-button {
    display: block;
    margin: 1rem;
    padding: 0.8rem;
    background: #1a73e8;
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s;
  }

  .cta-button:hover {
    background: #1557b0;
  }

  .contact-info {
    padding: 1rem;
    background: #f8f9fa;
    margin-top: 1rem;
  }
      </style>
  
      <!-- External CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
      <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css', v=4.5) }}">
  
      <!-- Structured Data -->
      <script type="application/ld+json">
      {
          "@context": "https://schema.org",
          "@type": "TravelAgency",
          "name": "Lanka Travel Bee",
          "url": "https://lankatravelbee.com/",
          "logo": "{{ url_for('static', filename='images/logo.png', _external=True) }}",
          "description": "Experience the best of Sri Lanka with Lanka Travel Bee. We offer personalized car rentals with experienced drivers, tailored tour packages, and expert local insights. Discover the beauty of Sri Lanka hassle-free.",
          "address": {
              "@type": "PostalAddress",
              "streetAddress": "No.86, Station Road, Palangathure",
              "addressLocality": "Negombo",
              "addressRegion": "Negombo",
              "postalCode": "11540",
              "addressCountry": "LK"
          },
          "telephone": "+94773866402",
          "email": "info@lankatravelbee.com"
      }
      </script>
  
      <!-- Scripts -->
      <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
      <script async src="https://www.googletagmanager.com/gtm.js?id=GTM-TLB8N8FN"></script>
      <script>
          (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-TLB8N8FN');
      </script>
  </head>

  <body>

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TLB8N8FN"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->


<div class="menu-overlay"></div>
<div id="menu-popup">
  <div class="menu-header">
    <h2>Lanka Travel Bee</h2>
    <button class="close-button">&times;</button>
  </div>

  <nav>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="{{ url_for('main.home') }}">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url_for('main.car_rentals') }}">Car Rentals with Driver</a>
      </li>
      
      <li class="nav-item has-submenu">
        <a class="nav-link" href="#">Tours & Packages</a>
        <ul class="submenu">
          {% for category in parent_categories %}
      <li class="nav-item">
        <a class="nav-link" href="{{ url_for('main.tour_packages', category_slug=category.slug) }}">
          {{ category.name }} Tours
        </a>
      </li>
    {% endfor %}
        </ul>
      </li>
      
     
      <li class="nav-item">
        <a class="nav-link" href="{{ url_for('main.blog_list') }}">Blog</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url_for('main.contact') }}">Contact</a>
      </li>
    </ul>
  </nav>

  <a href="{{ url_for('main.request_quote') }}" class="cta-button">Request a Quote</a>

  <div class="contact-info">
    <p><strong>Contact Us:</strong></p>
    <p>Phone: +94 77 4087 251</p>
    <p>Email: info@lankatravelbee.com</p>
  </div>
</div>


   

<!-- Main Header -->
<header>
  <!-- Top Contact Bar -->
  <div class="bg-dark top-bar text-light py-2">
    <div class="container">
      <div class="row">
        <div class="col-6">
          <small>HOTLINE - <a href="tel:+94773866402" class="text-light">+94 77 4087 251</a></small>
        </div>
        <div class="col-6 text-end">
          <small><a href="mailto:info@lankatravelbee.com" class="text-light">info@lankatravelbee.com</a></small>
        </div>
      </div>
    </div>
  </div>

  <!-- Main Navigation Bar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a class="navbar-brand" href="{{ url_for('main.home') }}">
        <p class="logo-text">Lanka Travel Bee</p>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="{{ url_for('main.home') }}">Home</a>
          </li>
          
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownTours" role="button" 
               data-bs-toggle="dropdown" aria-expanded="false">Our Tours</a>
            <ul class="dropdown-menu" aria-labelledby="navbarDropdownTours">
              {% for parent_category in parent_categories %}
                <li>
                  <a class="dropdown-item" 
                     href="{{ url_for('main.tour_packages', category_slug=parent_category.slug) }}">
                    {{ parent_category.name }}
                  </a>
                </li>
              {% endfor %}
              <li><a class="dropdown-item" href="{{ url_for('main.tour_packages') }}">All Tours</a></li>
            </ul>
          </li>
          
          <li class="nav-item">
            <a class="nav-link" href="{{ url_for('main.special_tours') }}">Special Tours</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ url_for('main.car_rentals') }}">Rent a Car With Driver</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ url_for('main.blog_list') }}">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ url_for('main.about') }}">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ url_for('main.contact') }}">Contact</a>
          </li>
        </ul>

        <a href="{{ url_for('main.request_quote') }}" class="btn rounded-pill primary_btn ms-lg-3">
          Request a Quote
        </a>
      </div>
    </div>
  </nav>
</header>

<!-- Main Content Area -->
<main id="content">
  <!-- Flash Messages -->
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  <!-- Hero Section -->
  {% block hero %}
    {% if use_main_hero %}
      <!-- Main Hero Slider -->
      <div class="full-screen-slider" id="fullScreenSlider">
        <div class="slide active" 
             style="background-image: url('/static/images/Srilankan-elephants.avif');">
        </div>
      </div>

      <!-- Hero Overlay Content -->
      <div class="overlay">
        <div class="overlay-content container">
          <h3 class="main-titles">
            <span class="title_sub">Looking for</span><br>
            Custom Sri Lanka Tours <span class="title_sub">with</span><br>
            a Private Driver?
          </h3>
          <div class="row">
            <div class="col-md-6">
              <!-- Desktop Toolbar -->
              <div class="toolbar shadow rounded-pill mb-3">
                <div class="d-flex justify-content-center align-items-center">
                  <a href="{{ url_for('main.request_quote') }}" 
                     class="btn primary_btn rounded-pill px-3 ml-2">Request a Quote</a>
                  <div class="dot-nav" id="dotNav"></div>
                </div>
              </div>

              <!-- Mobile Toolbar -->
              <div class="toolbar-mobile shadow rounded-pill mb-3 py-1 px-2">
                <div class="d-flex align-items-center">
                  <!-- <button class="rounded-pill filter_btn" id="searchButton" 
                          data-bs-toggle="modal" data-bs-target="#filterModal">
                    Search Tour
                    <span class="filter-icon"><i class="fa-solid fa-sliders"></i></span>
                  </button> -->
                  <a href="{{ url_for('main.request_quote') }}" 
                     class="btn primary_btn rounded-pill px-3 ml-2 me-2">Request a Quote</a>
                  <div class="rounded-pill mobile_menu menu-trigger">Menu</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Tour Filter Modal -->
      <div class="modal fade" id="filterModal" tabindex="-1" 
           aria-labelledby="filterModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="filterModalLabel">Filter Your Tours</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <form id="tourFilterForm" action="{{ url_for('main.filtered_tours') }}" method="GET">
                <!-- Parent Category Selection -->
                <!--<div class="mb-3">
                  <h5>Show me</h5>
                  <div class="d-flex">
                    <select class="form-select" id="parentCategory" name="parentCategory">
                      <option value="">All</option>
                      {% for category in parent_categories %}
                        <option value="{{ category.slug }}">{{ category.name }}</option>
                      {% endfor %}
                    </select>
                    <label for="parentCategory" class="form-label">Type of Tours</label>
                  </div>
                </div>-->

                <!-- Subcategory Selection -->
                <div class="mb-3">
                  <div class="d-flex">
                    <label for="subCategory" class="form-label">In a category</label>
                    <select class="form-select" id="subCategory" name="subCategory">
                      <option value="">All</option>
                      {% for subcategory in subcategories %}
                        <option value="{{ subcategory.slug }}">{{ subcategory.name }}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>

                <!-- Duration Selection -->
                <!-- <div class="mb-3">
                  <div class="d-flex">
                    <label for="duration" class="form-label">I would like to stay for</label>
                    <select class="form-select" id="duration" name="duration">
                      <option value="">Any Duration</option>
                      <option value="1">1 Day</option>
                      <option value="1-3">1-3 Days</option>
                      <option value="4-7">4-7 Days</option>
                      <option value="8-14">8-14 Days</option>
                      <option value="15+">15+ Days</option>
                    </select>
                  </div>
                </div> -->

                <!-- Location Selection -->
                <!-- <div class="mb-3">
                  <div class="d-flex">
                    <label for="location" class="form-label">at</label>
                    <select class="form-select" id="location" name="location">
                      <option value="">Any Location</option>
                      {% for location in locations %}
                        <option value="{{ location }}">{{ location }}</option>
                      {% endfor %}
                    </select>
                  </div>
                </div>-->

                <!-- Search Input -->
                <div class="mb-3">
                  <div class="d-flex">
                    <label for="search" class="form-label">Search</label>
                    <input type="text" class="form-control" id="search" 
                           name="search" placeholder="Search tours...">
                  </div>
                </div>

                <!-- Sort Option -->
                <!-- <div class="mb-3">
                  <div class="form-check">
                    <input type="checkbox" class="form-check-input" 
                           id="sortByPopularity" name="sort_by_popularity" value="1">
                    <label class="form-check-label" for="sortByPopularity">Sort by popularity</label>
                  </div>
                </div> -->
                
                <button type="submit" class="btn primary_btn rounded-pill">Search Tours</button>
              </form>
            </div>
          </div>
        </div>
      </div>

    {% else %}
      <!-- Inner Page Hero -->
      <section class="hero-inner text-white pb-5" 
               style="background-image: url('{% block inner_hero_background %}{% endblock %}'); 
                      background-size: cover; background-position: center;">
         <!-- <div class="overlay position-absolute top-0 start-0 w-100" 
         style="background-color: rgba(0, 0, 0, 0.5); "></div>-->
         
         <div class="">
        <div class="container">
          <!-- Breadcrumb Navigation -->
          <div class="row">
            <div class="col-lg-12">
              <nav aria-label="breadcrumb" class="mt-3 breadcrumb">
                <ol class="breadcrumb bg-dark bg-opacity-50 py-2 px-3 rounded-pill">
                  {% for breadcrumb in generate_breadcrumbs() %}
                    {% if loop.last %}
                      <li class="breadcrumb-item active text-white" aria-current="page">
                        {% if breadcrumb.text|length > 30 %}
                          {{ breadcrumb.text[:30] }}...
                        {% else %}
                          {{ breadcrumb.text }}
                        {% endif %}
                      </li>
                    {% else %}
                      <li class="breadcrumb-item">
                        <a href="{{ breadcrumb.url }}" class="text-white">
                          {% if breadcrumb.text|length > 30 %}
                            {{ breadcrumb.text[:30] }}...
                          {% else %}
                            {{ breadcrumb.text }}
                          {% endif %}
                        </a>
                      </li>
                    {% endif %}
                  {% endfor %}
                </ol>
              </nav>
            </div>
          </div>

          <!-- Mobile Toolbar for Inner Pages -->
          <div class="row">
            <div class="col-md-12">
              <div class="toolbar-mobile-inner shadow rounded-pill mb-3 py-1 px-2">
                <div class="d-flex align-items-center ">
                 <!-- <button class="rounded-pill filter_btn mobilesearchbtn" id="searchButton" 
                          data-bs-toggle="modal" data-bs-target="#filterModal">
                    Search Tour
                    <span class="filter-icon"><i class="fa-solid fa-sliders"></i></span>
                  </button> -->
                  <a href="{{ url_for('main.request_quote') }}" 
                     class="btn primary_btn rounded-pill px-3 ml-2 me-2">Request a Quote</a>
                  <div class="rounded-pill mobile_menu menu-trigger">Menu</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        </div>
      </section>

      <!-- Inner Page Title Section -->
      <div class="container inner-hero-container">
        <h1 class="fs-3 inner-title" title="{{ self.inner_hero_title() }}">
          {% set title = self.inner_hero_title() %}
          
          {{ title }}
         
         
        </h1>
        <p class="fs-6 col-md-8 inner-subtitle">
          {% block inner_hero_subtitle %}
            Discover more about our services and offerings
          {% endblock %}
        </p>
      </div>
    {% endif %}
  {% endblock %}

  <!-- Main Content Block -->
 <!-- Main Content Block -->
 {% block content %}{% endblock %}
</main>

<!-- Footer Section -->
{% block footer %}
<footer class="bg-dark text-light py-5 mt-5">
  <div class="container-fluid footer">
    <div class="row mx-3">
      <!-- Company Info Section -->
      <div class="col-md-3 footer-section font-12">
        <h3 class="footer-title fs-5">Lanka Travel Bee</h3>
        <p class="footer-description">
          Lanka Travel Bee offers custom-made tours in Sri Lanka, merging luxury, 
          authenticity, and local expertise to craft cherished travel experiences. 
          With our dedicated team of professionals, we ensure that every aspect 
          of your journey is tailored to perfection, leaving you with unforgettable 
          memories of your precious time in Sri Lanka.
        </p>
        <h4 class="footer-subtitle fs-5">Useful Links</h4>
        <ul class="footer-links" style="list-style: initial">
          <li style="margin-bottom: 0px">
            <a href="/terms-and-conditions" class="text-light">Terms and Conditions</a>
          </li>
          <li style="margin-bottom: 0px">
            <a href="/privacy-policy" class="text-light">Privacy Policy</a>
          </li>
          <li style="margin-bottom: 0px">
            <a href="/sitemap" class="text-light">Sitemap</a>
          </li>
        </ul>
      </div>

      <!-- Quote Box Section -->
      <div class="col-md-5 footer-section font-12">
        <div class="quote-box">
          <h4 class="quote-title fs-5">Visit Sri Lanka with Lanka Travel Bee</h4>
          <p class="footer-description">
            Get Your Tailored Travel Solution Today from Lanka Travel Bee! – Request a Quote
          </p>
          <a href="{{ url_for('main.contact') }}" class="quote-button btn primary_btn">
            Request A Quote
          </a>
        </div>
      </div>

      <!-- Contact Info Section -->
      <div class="col-md-2 footer-section font-12">
        <h4 class="fs-5">How to Reach Us</h4>
        <p class="footer-description">
          Contact our welcoming customer support team for inquiries, itinerary 
          customization, and booking assistance. For instant support during your 
          trip or emergencies, call us directly at +94 774087251
        </p>
        <h4 class="fs-5">Connect With Us Online:</h4>
        <p class="footer-description">
          Website: <a href="https://lankatravelbee.com" class="text-light">lankatravelbee.com</a>
        </p>
      </div>

      <!-- Address & Social Media Section -->
      <div class="col-md-2 footer-section font-12">
        <address>
          Lanka Travel Bee<br>
          No. 68/A, St. Mary's Road, Pallansena North,<br>
          Kochchikade, Negombo (11540)<br>
          Sri Lanka<br><br>
          Phone: <a href="tel:+94774087251" class="text-light">+94 77 408 7251</a><br><br>
          Email: <a href="mailto:info@lankatravelbee.com" class="text-light">info@lankatravelbee.com</a>
        </address>
        <!-- Social Media Links -->
        <div class="social-icons">
          <a href="https://www.facebook.com/profile.php?id=61558004032520&mibextid=LQQJ4d" 
             target="_blank" class="text-light me-3">
            <i class="fab fa-facebook-f"></i>
          </a>
          <a href="https://www.instagram.com/lankatravelbee/?igsh=MWtyejY4dDR1cGthcw%3D%3D&utm_source=qr" 
             target="_blank" class="text-light me-3">
            <i class="fab fa-instagram"></i>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- Copyright Section -->
  <div class="container">
    <hr class="mt-4 mb-3 bg-light">
    <div class="row">
      <div class="col-md-6 text-md-start">
        <p>&copy; 2024 Lanka Travel Bee. All rights reserved.</p>
      </div>
    </div>
  </div>
</footer>
{% endblock %}

    <script src="{{ url_for('static', filename='js/main.js') }}"></script>

   <script>
    // App Configuration and Utils
const APP = {
  config: {
    toursPerPage: 12,
    slideInterval: 5000,
    apiEndpoints: {
      tours: '/api/tours',
      categories: '/api/parent-categories',
      subcategories: '/api/subcategories'
    }
  },

  utils: {
    loadScript: (src) => {
      return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.async = true;
        script.onload = resolve;
        script.onerror = reject;
        document.body.appendChild(script);
      });
    },

    loadDependencies: async () => {
      const dependencies = {
        jquery: 'https://code.jquery.com/jquery-3.6.0.min.js',
        jqueryUI: 'https://code.jquery.com/ui/1.13.1/jquery-ui.min.js',
        bootstrap: 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js',
        owlCarousel: 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js',
        flatpickr: 'https://cdn.jsdelivr.net/npm/flatpickr',
        jqueryValidate: 'https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js',
        particles: 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'
      };

      for (const [key, url] of Object.entries(dependencies)) {
        try {
          await APP.utils.loadScript(url);
          console.log(`Loaded ${key} successfully`);
        } catch (error) {
          console.error(`Failed to load ${key}:`, error);
        }
      }
    }
  },

  // Core Functionality
  core: {
    init: async () => {
      await APP.utils.loadDependencies();
      APP.features.initializeAll();
    }
  },

  // Feature Modules
  features: {
    initializeAll: () => {
      APP.features.menu.init();
      APP.features.slider.init();
      APP.features.forms.init();
      APP.features.tours.init();
      APP.features.carousel.init();
    },

    menu: {
      state: { isDragging: false },
      
      init: () => {
        const elements = {
          popup: document.getElementById('menu-popup'),
          overlay: document.querySelector('.menu-overlay'),
          mobileBtn: document.querySelector('.mobile_menu'),
          closeBtn: document.getElementById('close-menu'),
          iconWrapper: document.querySelector('.menu-icon-wrapper'),
          dragHandle: document.getElementById('drag-handle')
        };

        if (!elements.popup) return;

        APP.features.menu.bindEvents(elements);
        APP.features.menu.initializeDrag(elements);
      },

      bindEvents: (elements) => {
        const { popup, overlay, mobileBtn, closeBtn } = elements;
        
        const toggleMenu = (show) => {
          popup.style.display = show ? 'block' : 'none';
          overlay.style.display = show ? 'block' : 'none';
          document.body.style.overflow = show ? 'hidden' : 'auto';
        };

        mobileBtn?.addEventListener('click', () => toggleMenu(true));
        closeBtn?.addEventListener('click', () => toggleMenu(false));
        overlay?.addEventListener('click', () => toggleMenu(false));
      },

      initializeDrag: (elements) => {
        const { dragHandle, iconWrapper } = elements;
        if (!dragHandle || !iconWrapper) return;

        let startY, startTop;

        const dragHandlers = {
          start: (e) => {
            e.preventDefault();
            APP.features.menu.state.isDragging = false;
            startY = e.clientY || e.touches[0].clientY;
            startTop = iconWrapper.offsetTop;
            
            document.addEventListener('mousemove', dragHandlers.move);
            document.addEventListener('touchmove', dragHandlers.move);
            document.addEventListener('mouseup', dragHandlers.stop);
            document.addEventListener('touchend', dragHandlers.stop);
          },

          move: (e) => {
            APP.features.menu.state.isDragging = true;
            const currentY = e.clientY || e.touches[0].clientY;
            const newTop = Math.min(
              Math.max(0, startTop + (currentY - startY)),
              window.innerHeight - iconWrapper.offsetHeight
            );
            iconWrapper.style.top = `${newTop}px`;
          },

          stop: () => {
            document.removeEventListener('mousemove', dragHandlers.move);
            document.removeEventListener('touchmove', dragHandlers.move);
            document.removeEventListener('mouseup', dragHandlers.stop);
            document.removeEventListener('touchend', dragHandlers.stop);
          }
        };

        dragHandle.addEventListener('mousedown', dragHandlers.start);
        dragHandle.addEventListener('touchstart', dragHandlers.start);
      }
    },

    slider: {
      state: { currentSlide: 0 },
      
      init: () => {
        const slider = document.getElementById('fullScreenSlider');
        if (!slider) return;

        const slides = slider.querySelectorAll('.slide');
        const dotNav = document.getElementById('dotNav');
        
        APP.features.slider.createDotNav(slides, dotNav);
        APP.features.slider.startAutoSlide(slides, dotNav);
      },

      createDotNav: (slides, dotNav) => {
        slides.forEach((_, index) => {
          const dot = document.createElement('div');
          dot.classList.add('dot');
          if (index === 0) dot.classList.add('active');
          dot.addEventListener('click', () => APP.features.slider.showSlide(index, slides, dotNav));
          dotNav.appendChild(dot);
        });
      },

      showSlide: (index, slides, dotNav) => {
        slides[APP.features.slider.state.currentSlide].classList.remove('active');
        dotNav.children[APP.features.slider.state.currentSlide].classList.remove('active');
        slides[index].classList.add('active');
        dotNav.children[index].classList.add('active');
        APP.features.slider.state.currentSlide = index;
      },

      startAutoSlide: (slides, dotNav) => {
        setInterval(() => {
          const nextSlide = (APP.features.slider.state.currentSlide + 1) % slides.length;
          APP.features.slider.showSlide(nextSlide, slides, dotNav);
        }, APP.config.slideInterval);
      }
    },

    forms: {
      init: () => {
        const form = document.getElementById('quoteForm');
        if (!form) return;

        flatpickr("#date_from, #date_to", {
          minDate: "today",
          dateFormat: "Y-m-d"
        });

        $(form).validate({
          rules: {
            first_name: "required",
            last_name: "required",
            country: "required",
            email: { required: true, email: true },
            phone: "required",
            num_adults: { required: true, min: 1 },
            date_from: "required",
            date_to: "required"
          },
          errorElement: "small",
          errorClass: "text-danger",
          validClass: "is-valid"
        });
      }
    },

    tours: {
      state: { currentPage: 1 },
      
      init: () => {
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        if (!loadMoreBtn) return;

        loadMoreBtn.addEventListener('click', APP.features.tours.loadMore);
      },

      loadMore: async () => {
        try {
          const response = await fetch(
            `${APP.config.apiEndpoints.tours}?page=${++APP.features.tours.state.currentPage}&per_page=${APP.config.toursPerPage}`
          );
          const data = await response.json();
          
          const container = document.getElementById('tourContainer');
          data.tours.forEach(tour => {
            container.appendChild(APP.features.tours.createTourCard(tour));
          });

          if (!data.has_next) {
            document.getElementById('loadMoreBtn').style.display = 'none';
          }
        } catch (error) {
          console.error('Error loading more tours:', error);
        }
      },

      createTourCard: (tour) => {
        const col = document.createElement('div');
        col.className = 'col-md-3';
        col.innerHTML = `
          <div class="card tour-card">
            <img src="${tour.image || '/static/uploads/spotting-the-sri-lankan-leopard-slider-11.avif'}" 
                 class="card-img-top" alt="${tour.title}">
            <div class="card-body">
              <h5 class="card-title">${tour.title}</h5>
              <div class="d-flex justify-content-between align-items-center">
                <a href="/request-quote" class="btn rounded-pill primary_btn">Request a Quote</a>
                <a href="${tour.url}" class="btn btn-link btn-sm">Read More</a>
              </div>
            </div>
          </div>
        `;
        return col;
      }
    },

    carousel: {
    init: () => {
        // Initialize both carousels with the same confi guration
        $('.bbb_slider, .subcategory-carousel').each(function() {
            $(this).owlCarousel({
                loop: true,
                margin: 10,
                nav: false,
                dots: false,
                autoplay: false,
                autoplayTimeout: 5000,
                autoplayHoverPause: true,
                responsive: {
                    0: { items: 1 },
                    600: { items: 2 },
                    1000: { items: 4 }
                }
            });
        });

        // Navigation for both carousels
        $('.bbb_prev').click(function() {
            $(this).closest('.bbb_slider_container').find('.owl-carousel').trigger('prev.owl.carousel');
        });
        
        $('.bbb_next').click(function() {
            $(this).closest('.bbb_slider_container').find('.owl-carousel').trigger('next.owl.carousel');
        });
    }
}
  }

  
};

// Initialize everything when DOM is ready
document.addEventListener('DOMContentLoaded', APP.core.init);
   </script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
      const menuTrigger = document.querySelector('.menu-trigger');
      const menuPopup = document.getElementById('menu-popup');
      const overlay = document.querySelector('.menu-overlay');
      const closeButton = document.querySelector('.close-button');
      const submenuItems = document.querySelectorAll('.has-submenu');
  
      // Toggle menu
      function toggleMenu() {
          menuPopup.classList.toggle('active');
          overlay.classList.toggle('active');
          document.body.style.overflow = menuPopup.classList.contains('active') ? 'hidden' : '';
      }
  
      // Open menu
      menuTrigger?.addEventListener('click', toggleMenu);
  
      // Close menu
      closeButton.addEventListener('click', toggleMenu);
      overlay.addEventListener('click', toggleMenu);
  
      // Handle submenus
      submenuItems.forEach(item => {
          const link = item.querySelector('.nav-link');
          const submenu = item.querySelector('.submenu');
  
          link.addEventListener('click', (e) => {
              e.preventDefault();
              item.classList.toggle('active');
              submenu.classList.toggle('active');
          });
      });
  
      // Close menu on escape key
      document.addEventListener('keydown', (e) => {
          if (e.key === 'Escape' && menuPopup.classList.contains('active')) {
              toggleMenu();
          }
      });
  });
  </script>

  <script>
  document.addEventListener('DOMContentLoaded', function() {
    // Get elements
    const durationSelect = document.getElementById('durationFilter');
    const tourContainer = document.getElementById('tourContainer');
    const loadMoreBtn = document.getElementById('loadMoreBtn');

    // Add loading indicator
    function showLoading() {
        tourContainer.innerHTML = `
            <div class="col-12 text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
        `;
    }

    // Create tour card HTML
    function createTourCard(tour) {
        const badgeClass = getBadgeClass(tour.subcategory?.parent_category?.name);
        const badgeTextClass = getBadgeTextClass(tour.subcategory?.parent_category?.name);
        
        return `
            <div class="col-md-3">
                <div class="card mx-0 tour-card position-relative">
                    ${tour.subcategory?.parent_category ? `
                        <span class="badge position-absolute top-0 end-0 m-2 rounded-pill px-3 py-2 z-10 
                            ${badgeClass} ${badgeTextClass}">
                            ${tour.subcategory.parent_category.name}
                        </span>
                    ` : ''}
                    
                    <img src="${tour.image}" 
                         class="card-img-top" 
                         alt="${tour.title}"
                         onerror="this.src='/static/uploads/spotting-the-sri-lankan-leopard-slider-11.avif'">
                    
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-1">
                            <h5 class="card-title mb-0">${tour.title}</h5>
                            <div class="views-count" alt="Views">
                                <i class="fa-regular fa-eye me-1"></i>
                                <span>${tour.views || 0}</span>
                            </div>
                        </div>
                        
                        ${tour.subcategory ? `
                            <p class="tour-subcategory mb-3">${tour.subcategory.name}</p>
                        ` : ''}
                        
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="/request-quote?tour_id=${tour.id}" class="btn rounded-pill primary_btn">Request a Quote</a>
                            <a href="/tour/${tour.slug}" class="btn btn-link btn-sm">Read More</a>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    // Helper functions for badges
    function getBadgeClass(categoryName) {
        switch(categoryName) {
            case 'Economy': return 'badge-economy';
            case 'Value': return 'badge-value';
            case 'Luxury': return 'badge-luxury';
            default: return 'badge-value';
        }
    }

    function getBadgeTextClass(categoryName) {
        switch(categoryName) {
            case 'Economy': return 'text-black';
            case 'Value': return 'text-dark';
            case 'Luxury': return 'text-white';
            default: return 'text-dark';
        }
    }

    // Handle filter change
    if (durationSelect) {
        durationSelect.addEventListener('change', function() {
            const url = new URL(window.location);
            if (this.value) {
                url.searchParams.set('duration', this.value);
            } else {
                url.searchParams.delete('duration');
            }

            // Show loading state
            showLoading();

            // Hide load more button while filtering
            if (loadMoreBtn) loadMoreBtn.style.display = 'none';

            // Fetch filtered results
            fetch(`/filtered-tours?${url.searchParams.toString()}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.tours.length === 0) {
                    tourContainer.innerHTML = `
                        <div class="col-12 text-center">
                            <p>No tours found for the selected duration.</p>
                        </div>
                    `;
                } else {
                    tourContainer.innerHTML = data.tours.map(tour => createTourCard(tour)).join('');
                }

                // Update URL without page reload
                history.pushState({}, '', `${url.pathname}?${url.searchParams.toString()}`);
            })
            .catch(error => {
                console.error('Error:', error);
                tourContainer.innerHTML = `
                    <div class="col-12 text-center">
                        <p class="text-danger">Error loading tours. Please try again.</p>
                    </div>
                `;
            });
        });
    }

    // Handle load more functionality
    if (loadMoreBtn) {
        let currentPage = 1;
        loadMoreBtn.addEventListener('click', function() {
            currentPage++;
            const url = new URL(window.location);
            url.searchParams.set('page', currentPage);

            fetch(`/filtered-tours?${url.searchParams.toString()}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.tours.length > 0) {
                    const newTours = data.tours.map(tour => createTourCard(tour)).join('');
                    tourContainer.insertAdjacentHTML('beforeend', newTours);
                }
                
                if (!data.has_next) {
                    loadMoreBtn.style.display = 'none';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                loadMoreBtn.style.display = 'none';
            });
        });
    }

    // Add pagination support
    function updatePaginationState() {
        const url = new URL(window.location);
        const page = parseInt(url.searchParams.get('page')) || 1;
        currentPage = page;
    }

    // Initialize pagination state
    updatePaginationState();

    // Handle browser back/forward buttons
    window.addEventListener('popstate', function() {
        updatePaginationState();
        const url = new URL(window.location);
        
        // Re-fetch results with current URL parameters
        fetch(`/filtered-tours?${url.searchParams.toString()}`, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(response => response.json())
        .then(data => {
            tourContainer.innerHTML = data.tours.map(tour => createTourCard(tour)).join('');
            if (loadMoreBtn) {
                loadMoreBtn.style.display = data.has_next ? 'block' : 'none';
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    });
});
  </script>

  </body>
</html>