<!-- <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"  defer>
</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');
        }, 30);
    });
</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();
        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>

<!-- testimionial carousle -->
<script>
    $(document).ready(function() {
        $('.testimonial-carousel')
            .on('initialized.owl.carousel', function() {
                $('.testimonial-carousel .owl-dot').each(function(index) {
                    $(this).attr({
                        'title': 'View customer testimonial ' + (index + 1),
                        'aria-label': 'View customer testimonial ' + (index + 1)
                    });
                });
            })
            .owlCarousel({
                items: 1,
                loop: true,
                autoplay: true,
                autoplayTimeout: 10000,
                autoplayHoverPause: true,
                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>
<script>
    // Initialize carousel
    $('.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>'
        ]
    });

    // Add SEO-friendly & accessible labels to dots
    $('.package-carousle .owl-dots .owl-dot').each(function(index) {
        const label = "Go to slide " + (index + 1);
        $(this).attr('aria-label', label);
        $(this).attr('title', label);
    });
</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>
<!-- click disable -->
<!-- <script>
    document.addEventListener("contextmenu", e => e.preventDefault());
    document.addEventListener("dragstart", e => e.preventDefault());
    ["copy", "cut", "paste"].forEach(e => document.addEventListener(e, t => t.preventDefault()));

    document.addEventListener("keydown", e => {
        if (
            e.key === "F12" ||
            (e.ctrlKey && ["u", "s", "p"].includes(e.key.toLowerCase())) ||
            (e.ctrlKey && e.shiftKey && ["i", "j", "c"].includes(e.key.toLowerCase()))
        ) e.preventDefault();
    });

    setInterval(() => {
        if (window.outerWidth - window.innerWidth > 160 || window.outerHeight - window.innerHeight > 160) {
            document.body.innerHTML = "<h2 style='text-align:center;margin-top:20%'>DevTools Detected</h2>";
        }
    }, 1000);
</script> -->



 
    <!-- form validation -->
    <script>
        document.getElementById('booking-form').addEventListener('submit', function(e) {
            e.preventDefault();
            document.querySelectorAll('.error-message').forEach(el => el.textContent = '');
            let isValid = true;

            const name = document.getElementById('name').value.trim();
            const phone = document.getElementById('phone').value.trim();
            const destination = document.getElementById('destination').value;
            const packageType = document.getElementById('package').value;
            const tripDate = document.getElementById('trip-date').value;
            const persons = document.getElementById('persons').value.trim();
            const message = document.getElementById('message').value.trim();
            if (name === '') {
                document.getElementById('name-error').textContent = 'Please enter your name';
                isValid = false;
            }

            if (!/^\d{10,15}$/.test(phone)) {
                document.getElementById('phone-error').textContent = 'Enter a valid phone number';
                isValid = false;
            }

            if (destination === '') {
                document.getElementById('destination-error').textContent = 'Select a destination';
                isValid = false;
            }

            if (packageType === '') {
                document.getElementById('package-error').textContent = 'Select a package';
                isValid = false;
            }

            if (tripDate === '') {
                document.getElementById('trip-date-error').textContent = 'Select your trip date';
                isValid = false;
            }

            if (persons === '' || persons <= 0) {
                document.getElementById('persons-error').textContent = 'Enter a valid number of persons';
                isValid = false;
            }
            if (message === '') {
                document.getElementById('message-error').textContent = 'Please write a message';
                isValid = false;
            }
            if (!isValid) return;
            const formData = new FormData();
            formData.append('name', name);
            formData.append('phone', phone);
            formData.append('destination', destination);
            formData.append('package', packageType);
            formData.append('trip_date', tripDate);
            formData.append('persons', persons);
            formData.append('message', message);

            fetch('mail.php', {
                    method: 'POST',
                    body: formData
                })
                .then(res => res.json())
                .then(data => {
                    Toastify({
                        text: data.message || 'Form submitted successfully!',
                        duration: 3000,
                        backgroundColor: data.status === 'success' ? 'green' : 'red'
                    }).showToast();

                    if (data.status === 'success') document.getElementById('booking-form').reset();
                })
                .catch(() => {
                    Toastify({
                        text: 'Something went wrong. Please try again!',
                        duration: 3000,
                        backgroundColor: 'red'
                    }).showToast();
                });
        });
    </script>