<script src="./assets/js/bootstrap.min.js"></script>

<!-- Fancybox JS -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/toastify-js"></script><!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<!-- Bootstrap Bundle with Popper -->
<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous">
</script>

<!-- Owl Carousel JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<!-- AOS JS -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>

<!-- Navbar Active Class Script -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const navLinks = document.querySelectorAll(".navbar-nav .nav-link");
        const currentPage = window.location.pathname.split("/").pop(); 

        navLinks.forEach(link => {
            let linkHref = link.getAttribute("href");

            if (!currentPage && linkHref === "index.php") {
                link.classList.add("active");
            }
            else if (linkHref === currentPage) {
                link.classList.add("active");
            }
        });
    });
</script>


<!-- loading -->
<script>
    document.body.classList.add('loading');

    window.addEventListener('load', function() {
        const preloader = document.getElementById('preloader');

        preloader.style.transition = 'opacity 0.5s ease';
        preloader.style.opacity = '0';

        setTimeout(() => {
            preloader.style.display = 'none';
            document.body.classList.remove('loading');
        }, 500);
    });
</script>

<!-- fantacy box -->
<script>
    Fancybox.bind("[data-fancybox='gallery']", {
        Thumbs: {
            autoStart: true,
        },
        Toolbar: {
            display: ["close", "zoom", "fullscreen", "download", "slideShow"],
        },
        dragToClose: true,
        animated: true,
        SlideShow: {
            autoStart: true,
            speed: 3000
        }
    });
</script>



<!-- navbar dropdown -->
<script>
    document.querySelectorAll('.offcanvas-menu .dropdown-custom > .nav-link').forEach(link => {
        link.addEventListener('click', e => {
            e.preventDefault();
            const parent = link.parentElement;
            parent.classList.toggle('active');
            const submenu = parent.querySelector('.sub-menu');
            submenu.style.display = parent.classList.contains('active') ? 'block' : 'none';
        });
    });
</script>
<!-- aos -->
<script>
    AOS.init({
        duration: 1500,
        easing: 'ease-out-back',
        once: false,
        mirror: true,
        offset: 20
    });
</script>



<!-- navigation active link -->
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const currentPage = window.location.pathname.split("/").pop(); // Get current file name
        const menuLinks = document.querySelectorAll("#mobilemenu a");

        menuLinks.forEach(link => {
            const linkPage = link.getAttribute("href");
            if (linkPage === currentPage || (linkPage === "index.php" && currentPage === "")) {
                link.classList.add("active");
            } else {
                link.classList.remove("active");
            }
        });
    });
</script>

<!-- testimonial carousel -->
<script>
    $('.testimonial-carousel').owlCarousel({
        items: 1,
        loop: true,
        autoplay: true,
        autoplayTimeout: 10000,
        dots: true,
        nav: false,
        smartSpeed: 700,
    });
</script>

<!-- banner carousle -->
<script>
    $(document).ready(function() {
        var owl = $(".hero-carousel");
        owl.owlCarousel({
            items: 1,
            loop: true,
            dots: false,
            autoplay: true,
            autoplayTimeout: 5000,
            autoplayHoverPause: false,
            animateOut: 'fadeOut',
            smartSpeed: 1000
        });

        $(".hero-next").click(function() {
            owl.trigger("next.owl.carousel");
        });
        $(".hero-prev").click(function() {
            owl.trigger("prev.owl.carousel");
        });
    });
</script>

<!-- packages -->
<script>
    $('.package-carousle').owlCarousel({
        loop: true,
        margin: 20,
        nav: false,
        dots: true,
        autoplay: true,
        autoplayTimeout: 3000,
        stagePadding: 50,
        responsive: {
            0: {
                items: 1,
                stagePadding: 30
            },
            576: {
                items: 2,
                stagePadding: 30
            },
            992: {
                items: 3,
                stagePadding: 50
            },
            1200: {
                items: 4,
                stagePadding: 60
            }
        },
        navText: [
            '<i class="bi bi-chevron-left"></i>',
            '<i class="bi bi-chevron-right"></i>'
        ]
    });
</script>

<!-- car rental -->
<script>
    $('.car-rental-carousel').owlCarousel({
        loop: true,
        margin: 20,
        nav: true,
        dots: false,
        autoplay: true,
        autoplayTimeout: 6500,
        responsive: {
            0: {
                items: 1
            },
            576: {
                items: 2
            },
            991: {
                item: 3
            },
            1500: {
                items: 4
            }
        }
    });
</script>

<!-- back to top btn -->
<script>
    const topBtn = document.getElementById("topBtn");

    window.onscroll = function() {
        if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
            topBtn.style.display = "block";
        } else {
            topBtn.style.display = "none";
        }
    };

    topBtn.addEventListener("click", () => {
        window.scrollTo({
            top: 0,
            behavior: "smooth"
        });
    });
</script>

<!-- navbar scrole -->
<script>
    window.addEventListener("scroll", function() {
        const header = document.querySelector(".navbar-area");
        if (window.scrollY > 50) {
            header.classList.add("navbar-scrolled");
        } else {
            header.classList.remove("navbar-scrolled");
        }
    });
</script>
<script>
    window.addEventListener("scroll", function() {
        const navbar = document.querySelector(".main-navbar");

        if (window.scrollY > 0) {
            navbar.classList.add("navbar-scrolled");
        } else {
            navbar.classList.remove("navbar-scrolled");
        }
    });
</script>