<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>
      {% block title %}Lanka Travel Bee - Explore Sri Lanka{% endblock %}
      
      
    </title>
    <meta
      name="description"
      content="{% block description %}Discover Sri Lanka with Lanka Travel Bee. Enjoy personalized car rentals with expert drivers, tailored tours, and local insights for a hassle-free experience.{% endblock %}"
    />

    <!-- Favicon -->
    <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="manifest"
      href="{{ url_for('static', filename='favicon/site.webmanifest') }}"
    />

    <!-- Apple Touch Icons -->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="{{ url_for('static', filename='favicon/logo.avif') }}"
    />
    <link
      rel="mask-icon"
      href="{{ url_for('static', filename='favicon/logo.avif') }}"
    />

    <!-- Microsoft Tile Color -->
    <meta name="msapplication-TileColor" content="#da532c" />
    <meta name="theme-color" content="#ffffff" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{ request.url }}" />
    <meta
      property="og:title"
      content="{% block og_title %}Lanka Travel Bee - Car Hire with Driver in Sri Lanka | Explore Sri Lanka{% endblock %}"
    />
    <meta
      property="og:description"
      content="{% block og_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.{% endblock %}"
    />
    <meta
      property="og:image"
      content="{{ url_for('static', filename='images/Hot_air.avif', _external=True) }}"
    />

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="{{ request.url }}" />
    <meta
      property="twitter:title"
      content="{% block twitter_title %}Lanka Travel Bee - Car Hire with Driver in Sri Lanka | Explore Sri Lanka{% endblock %}"
    />
    <meta
      property="twitter:description"
      content="{% block twitter_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.{% endblock %}"
    />
    <meta
      property="twitter:image"
      content="{{ url_for('static', filename='images/blog-inner.avif', _external=True) }}"
    />

    <link
      rel="preload"
      href="https://fonts.googleapis.com/css2?family=Marcellus&family=Roboto:wght@300;400;700&display=swap"
      as="style"
      onload="this.onload=null;this.rel='stylesheet'"
    />
    <noscript
      ><link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Marcellus&family=Roboto:wght@300;400;700&display=swap"
    />
    
    <link href="https://fonts.googleapis.com/css2?family=Pathway+Extreme:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=SUSE:wght@100..800&family=Teachers:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">

<link href="https://fonts.googleapis.com/css2?family=Carme&display=swap" rel="stylesheet">
    
    </noscript>
    
    

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Canonical URL -->
    <link rel="canonical" href="{{ request.url }}" />

    <!-- Bootstrap 5 CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />

    <!-- In the head section -->
    <!-- <link
      rel="preload"
      as="style"
      href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
      onload="this.onload=null;this.rel='stylesheet'"
    /> -->
    <!-- <link
      rel="preload"
      as="style"
      href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"
      onload="this.onload=null;this.rel='stylesheet'"
    /> -->

    <link
      rel="stylesheet"
      href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css"
    />

    <!-- Custom CSS -->
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/style.css', v=2.0) }}"
    />
    <!-- Font Awesome -->
    <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"
    />

    <!-- 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>

   <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;
    }
   </style>

    <!-- Google Tag Manager -->
    <!-- <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-TR93RLSC');</script> -->
    <!-- End Google Tag Manager -->

    <!-- Google tag (gtag.js) -->
    <!-- <script async src="https://www.googletagmanager.com/gtag/js?id=AW-16590132568"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-16590132568');
</script> -->
  </head>
  
{% block content %}
<div class="container text-center py-5">
    <h1 class="display-4">Site Under Maintenance</h1>
    <p class="lead">We're currently performing some scheduled maintenance. We'll be back online shortly!</p>
    <hr class="my-4">
    <p>We apologize for any inconvenience. Please check back soon.</p>
</div>
{% endblock %}

   <script src="https://cdn.jsdelivr.net/npm/flatpickr" defer></script>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"
      defer
    ></script>
    <script
      src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"
      defer
    ></script>

    <script>
      $(document).ready(function () {
        $("#menu-icon").draggable({
          axis: "y",
          containment: "window",
          scroll: false,
          // start: function(event, ui) {
          //   // Prevent default touch actions on mobile
          //   event.preventDefault();
          // },
          drag: function(event, ui) {
            // Ensure the icon stays within the viewport
            var maxTop = $(window).height() - $(this).height();
            ui.position.top = Math.min(Math.max(0, ui.position.top), maxTop);
          }
        });

        $("#menu-icon").on("click", function (e) {
          e.stopPropagation();
          $("#menu-popup, .menu-overlay").toggle();
        });

        $(".menu-overlay, #menu-popup").on("click", function () {
          $("#menu-popup, .menu-overlay").hide();
        });

        $("#menu-popup").on("click", function (e) {
          e.stopPropagation();
        });
      });
    </script>

    <script>
      $(document).ready(function () {
        var $menuIconWrapper = $('.menu-icon-wrapper');
        var $menuIcon = $('#menu-icon');
        var $dragHandle = $('#drag-handle');
        var $menuPopup = $('#menu-popup');
        var $menuOverlay = $('.menu-overlay');
        var isDragging = false;
      
        $dragHandle.on('mousedown touchstart', function(e) {
          e.preventDefault();
          isDragging = false;
          var startY = e.clientY || e.originalEvent.touches[0].clientY;
          var startTop = $menuIconWrapper.offset().top;
      
          $(document).on('mousemove touchmove', function(e) {
            isDragging = true;
            var currentY = e.clientY || e.originalEvent.touches[0].clientY;
            var newTop = startTop + (currentY - startY);
            
            // Constrain movement within the window
            var maxTop = $(window).height() - $menuIconWrapper.outerHeight();
            newTop = Math.min(Math.max(0, newTop), maxTop);
            
            $menuIconWrapper.css('top', newTop);
          });
      
          $(document).on('mouseup touchend', function() {
            $(document).off('mousemove touchmove mouseup touchend');
          });
        });
      
        $menuIcon.on('click', function(e) {
          if (!isDragging) {
            e.stopPropagation();
            $menuPopup.toggleClass('show');
            $menuOverlay.toggleClass('show');
          }
          isDragging = false;
        });
      
        $menuOverlay.on('click', function() {
          $menuPopup.removeClass('show');
          $menuOverlay.removeClass('show');
        });
      
        $menuPopup.on('click', function(e) {
          e.stopPropagation();
        });
      });
      </script>

    <script>
      $(document).ready(function () {
        console.log("Document loaded and ready.");

        // Car category tabs functionality
        $("#car-category-tabs .nav-link").click(function (event) {
          event.preventDefault();
          console.log("Tab clicked: ", $(this).data("category"));
          $("#car-category-tabs .nav-link").removeClass("active");
          $(this).addClass("active");
          var category = $(this).data("category");
          $(".car-card").each(function () {
            if (category === "all" || $(this).data("category") === category) {
              $(this).show();
            } else {
              $(this).hide();
            }
          });
        });

        // Show all cars on page load
        console.log("Attempting to click active car category tab");
        var activeTab = $("#car-category-tabs .nav-link.active");
        if (activeTab.length) {
          activeTab.click();
          console.log("Active tab clicked");
        } else {
          console.log("No active tab found");
        }

        // Initialize Owl Carousel
        console.log("Checking for bbb_slider");
        if ($(".bbb_slider").length) {
          console.log("bbb_slider found, initializing Owl Carousel");
          var trendsSlider = $(".bbb_slider");
          trendsSlider.owlCarousel({
            loop: false,
            margin: 30,
            nav: false,
            dots: false,
            autoplayHoverPause: true,
            autoplay: false,
            responsive: {
              0: { items: 1 },
              575: { items: 2 },
              991: { items: 3 },
            },
          });

          console.log("Owl Carousel initialized");

          // Navigation for Owl Carousel
          $(".bbb_prev").click(function () {
            console.log("Previous button clicked");
            trendsSlider.trigger("prev.owl.carousel");
          });

          $(".bbb_next").click(function () {
            console.log("Next button clicked");
            trendsSlider.trigger("next.owl.carousel");
          });
        } else {
          console.error("bbb_slider not found");
        }

        // Check if Owl Carousel plugin is available
        if (typeof $.fn.owlCarousel === "undefined") {
          console.error("Owl Carousel plugin is not loaded");
        } else {
          console.log("Owl Carousel plugin is available");
        }

        // Log the number of items in the carousel
        console.log(
          "Number of items in bbb_slider:",
          $(".bbb_slider .item").length
        );
      });
    </script>

    <script>
      $(document).ready(function () {
        // Initialize date pickers
        flatpickr("#date_from", {
          minDate: "today",
          dateFormat: "Y-m-d",
        });
        flatpickr("#date_to", {
          minDate: "today",
          dateFormat: "Y-m-d",
        });

        // Initialize form validation
        $("#quoteForm").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",
          },
          messages: {
            first_name: "Please enter your first name",
            last_name: "Please enter your last name",
            country: "Please select your country",
            email: "Please enter a valid email address",
            phone: "Please enter your phone number",
            num_adults: "Please enter at least 1 adult",
            date_from: "Please select a start date",
            date_to: "Please select an end date",
          },
          errorElement: "small",
          errorPlacement: function (error, element) {
            error.addClass("text-danger");
            error.insertAfter(element);
          },
          highlight: function (element, errorClass, validClass) {
            $(element).addClass("is-invalid").removeClass("is-valid");
          },
          unhighlight: function (element, errorClass, validClass) {
            $(element).addClass("is-valid").removeClass("is-invalid");
          },
        });
      });

      document.addEventListener("DOMContentLoaded", function () {
        particlesJS("particles-js", {
          particles: {
            number: {
              value: 80,
              density: {
                enable: true,
                value_area: 800,
              },
            },
            color: {
              value: "#ffffff",
            },
            shape: {
              type: "circle",
              stroke: {
                width: 0,
                color: "#000000",
              },
            },
            opacity: {
              value: 0.5,
              random: false,
            },
            size: {
              value: 3,
              random: true,
            },
            line_linked: {
              enable: true,
              distance: 150,
              color: "#ffffff",
              opacity: 0.4,
              width: 1,
            },
            move: {
              enable: true,
              speed: 2,
              direction: "none",
              random: false,
              straight: false,
              out_mode: "out",
              bounce: false,
            },
          },
          interactivity: {
            detect_on: "canvas",
            events: {
              onhover: {
                enable: true,
                mode: "repulse",
              },
              onclick: {
                enable: true,
                mode: "push",
              },
              resize: true,
            },
          },
          retina_detect: true,
        });
      });
    </script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const slider = document.getElementById("fullScreenSlider");
        const slides = slider.querySelectorAll(".slide");
        const dotNav = document.getElementById("dotNav");
        let currentSlide = 0;

        // Create dot navigation
        slides.forEach((_, index) => {
          const dot = document.createElement("div");
          dot.classList.add("dot");
          if (index === 0) dot.classList.add("active");
          dot.addEventListener("click", () => showSlide(index));
          dotNav.appendChild(dot);
        });

        function showSlide(index) {
          slides[currentSlide].classList.remove("active");
          dotNav.children[currentSlide].classList.remove("active");
          slides[index].classList.add("active");
          dotNav.children[index].classList.add("active");
          currentSlide = index;
        }

        function nextSlide() {
          let next = (currentSlide + 1) % slides.length;
          showSlide(next);
        }

        setInterval(nextSlide, 5000); // Change slide every 5 seconds

        document.querySelectorAll(".scroll-down").forEach((button) => {
          button.addEventListener("click", () => {
            window.scrollTo({
              top: window.innerHeight,
              behavior: "smooth",
            });
          });
        });
      });
    </script>
  </body>
</html>
