// use a script tag or an external JS file
document.addEventListener("DOMContentLoaded", (event) => {
    gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
    // gsap code here!
    ScrollSmoother.create({
        smooth: 1.5, // how long (in seconds) it takes to "catch up" to the native scroll position
        effects: true, // looks for data-speed and data-lag attributes on elements
        smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
    });
});

// custom cursor

document.addEventListener("DOMContentLoaded", (event) => {
    const customCursor = document.querySelector('.custom-cursor');
    const section = document.querySelector('.amenity_section');

    // Show custom cursor and move it with mouse
    section.addEventListener('mousemove', (e) => {
        customCursor.style.display = 'block'; // Show the cursor
        customCursor.style.left = `${e.pageX}px`;
        customCursor.style.top = `${e.pageY}px`;
    });

    // Hide custom cursor when mouse leaves the section
    section.addEventListener('mouseleave', () => {
        customCursor.style.display = 'none';
    });

    // Hide the cursor and the custom div during drag
    section.addEventListener('dragstart', () => {
        document.body.style.cursor = 'none'; // Hide default cursor
    });

    // Show the cursor and custom div after dragging ends
    section.addEventListener('dragend', () => {
        document.body.style.cursor = ''; // Restore default cursor behavior
    });

})

window.addEventListener('load', () => {
    const footer = document.querySelector('footer');
    const windowHeight = window.innerHeight;
    const documentHeight = document.body.offsetHeight;

    // If the document height is less than the window height, add extra space

    if (documentHeight < windowHeight) {
        footer.style.marginBottom = `${windowHeight - documentHeight + 50}px`;
    }
});


// end of amenities fixed slide



// $('.without-caption').magnificPopup({
//   type: 'image',
//   closeOnContentClick: true,
//   closeBtnInside: false,
//   mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
//   image: {
//       verticalFit: true
//   },
//   zoom: {
//       enabled: true,
//       duration: 300 // don't foget to change the duration also in CSS
//   }
// });

// $('.with-caption').magnificPopup({
//   type: 'image',
//   closeOnContentClick: true,
//   closeBtnInside: false,
//   mainClass: 'mfp-with-zoom mfp-img-mobile',
//   image: {
//       verticalFit: true,
//       titleSrc: function(item) {
//           return item.el.attr('title') + ' &middot; <a class="image-source-link" href="'+item.el.attr('data-source')+'" target="_blank"></a>';
//       }
//   },
//   zoom: {
//       enabled: true
//   }
// });

const overlay = "<div class='overlay'></div>"

$(document).ready(function() {

    // link-target

    // document.querySelectorAll('.nav-link-custom').forEach(link => {
    //   link.addEventListener('click', function(e) {
    //     e.preventDefault(); // Prevent default anchor click behavior

    //     const target = document.querySelector(this.getAttribute('href'));

    //     if (target) {
    //       gsap.to(window, {
    //         duration: 1, // Duration for the smooth scroll (in seconds)
    //         scrollTo: {
    //           y: target, // Target section to scroll to
    //           offsetY: 10 // Optional offset to account for any header or fixed element
    //         }
    //       });
    //     }
    //   });
    // });

    $(document).on('click', '.nav-link-custom', function(e) {
        e.preventDefault();
        const target = $(this).attr('href');
        const targetElement = document.querySelector(target);
        if (targetElement) {
            console.log('Target element found:', targetElement);
            gsap.to(window, {
                duration: 0.1,
                scrollTo: {
                    y: targetElement,
                    offsetY: 10
                }
            });
            history.pushState(null, null, target);
        } else {
            console.warn('Target element not found:', target);
        }
    });




    $('.pricing_tab_carousel .nav-link').on('click', function(e) {
        const targetId = $(e.target).attr('data-target').split('#')[1];
        console.log(targetId);

        $('.pricing_tab_carousel .nav-link').each((index, tab) => {
            if (!$(tab).attr('data-target').includes(targetId)) {
                console.log($(tab).removeClass('active'));
            }
        })


        // $('.pricing_section .tab-pane').each((index, item)=>{
        //   $(item).removeClass('active show');

        //   if($(item).attr('id') == targetId){
        //     $(item).addClass('active show');
        //   }
        // })
    })

    // pricing tab

    const pricing_tab_carousel = $('.pricing_tab_carousel').owlCarousel({
        margin: 10,
        mouseDrag: false,
        nav: true,
        // touchDrag:false,
        loop: false,
        items: 1,
        autoplay: false,
        // autoplayTimeout: 3000,
        // autoplaySpeed:1000,
        dots: false,
        responsive: {
            // breakpoint from 0 up
            0: {
                items: 3,
                margin: 10,
            },
            // breakpoint from 768 up
            992: {
                margin: 40,
                items: 4,
            }
        }
    });

    // amenity carousel

    $('.amenity_carousel').owlCarousel({
        loop: true,
        nav: false,
        autoplaySpeed: 1000,
        autoplay: true,
        smartSpeed: 700,
        responsive: {
            0: {
                margin: 15,
                items: 1
            },
            600: {
                margin: 25,
                items: 1
            },
            1000: {
                margin: 25,
                items: 1
            }
        }
    })

    // floorplan_carousel

    const fp_carousel = $('.floorplan_carousel').owlCarousel({
        margin: 0,
        // mouseDrag:false,
        nav: true,
        loop: false,
        items: 1,
        autoplay: false,
        // autoplayTimeout: 3000,
        // autoplaySpeed:1000,
        dots: false,
        responsive: {
            // breakpoint from 0 up
            0: {
                items: 1,
                margin: 10,
            },
            // breakpoint from 768 up
            992: {}
        }
    });

    // gallery_carousel

    const gallery_carousel = $('.gallery_carousel').owlCarousel({
        margin: 50,
        // mouseDrag:false,
        loop: true,
        items: 1,
        autoplay: true,
        // autoplayTimeout: 3000,
        // autoplaySpeed:1000,
        dots: false,
        responsive: {
            // breakpoint from 0 up
            0: {
                items: 1,
                margin: 10,
            },
            // breakpoint from 768 up
            992: {}
        }
    });

    $('.plan_btns .owl-next').click(() =>
        gallery_carousel.trigger('next.owl.carousel')
    )

    $('.plan_btns .owl-prev').click(() =>
        gallery_carousel.trigger('prev.owl.carousel')
    )

    // pricing carousel 

    const plan_carousel = $('.pricing_carousel').owlCarousel({
        margin: 0,
        // mouseDrag:false,
        loop: true,
        items: 1,
        autoplay: true,
        // animateIn: 'fadeIn',
        // animateOut: 'fadeOut',
        // autoplayTimeout: 3000,
        // autoplaySpeed:1000,
        dots: false,
        responsive: {
            // breakpoint from 0 up
            0: {
                items: 1,
                margin: 0,
            },
            // breakpoint from 768 up
            992: {},
        }
    });

    $('.plan_btns .owl-next').click(() =>
        plan_carousel.trigger('next.owl.carousel')
    )

    $('.plan_btns .owl-prev').click(() =>
        plan_carousel.trigger('prev.owl.carousel')
    )



    $(document).on('click', '.with-caption', function(e) {
        e.preventDefault();
        var imagepah = $(this).attr('href');
        $("#viewmodelimage").remove();
        var createmodel = `
    <div class="image_overlay" id="viewmodelimage">
      <img  src="${imagepah}" />
      <span class='close'>&times</span>
    </div>`;
        $('body').append(createmodel);
        $('body').append(overlay);
        $('body').addClass('overflow-hidden');
    })

    $(document).on('click', '.image_overlay', function() {
        $('#viewmodelimage').remove();
        $('.overlay').remove();
        $('body').removeClass('overflow-hidden');
    })


})