

jQuery(function() {
    "use strict";
    var wind = jQuery(window);

    jQuery(document).ready(function($) {
        // Close the menu when the close button is clicked
        $(".close-menu").on('click', function() {
            $("#navbarSupportedContent").collapse('hide'); // Bootstrap's method to hide the menu
        });
    });

    // MAGNIFIC POPUP 
    jQuery('.elloto-photos').magnificPopup({
        delegate: 'a.elloto-photo-item', // the selector for gallery item
        type: 'image',
        gallery: {
            enabled: true
        }
    });
    /* ==============================================
    MAGNIFIC POPUP Gallery
    =============================================== */

    jQuery('.portfolio-grid').magnificPopup({
            delegate: 'a.info', // the selector for gallery item
            type: 'image',
            gallery: {
                enabled: true
            }
        });

    /* ==============================================
    OWL CAROUSEL
    =============================================== */

    jQuery('.portfolio-grid').owlCarousel({
        loop: true,
        margin: 0,
        slideSpeed: 500,
        nav: false,
        responsive: {
            0: {
                autoplay: true,
                autoplayTimeout: 3000,
                autoplayHoverPause: true,
                items: 2
            },
            380: {
                items: 2
            },
            450: {
                items: 3
            },
            600: {
                items: 3.5
            },
            1000: {
                items: 5.5
            },
            1200: {
                items: 5.5
            },
            1400: {
                items: 5.5
            },
            1500: {
                items: 5.5
            }
        }
    });

    // Preloader 
    jQuery("#preloader").fadeOut(800);
    jQuery(".preloader-bg").delay(600).fadeOut(800);

    // Main footer 
    var footer = jQuery("footer").outerHeight();
    jQuery("main").css("marginBottom", footer);

    // ScrollIt
    jQuery.scrollIt({
      upKey: 38,                // key code to navigate to the next section
      downKey: 40,              // key code to navigate to the previous section
      easing: 'swing',          // the easing function for animation
      scrollTime: 600,          // how long (in ms) the animation takes
      activeClass: 'active',    // class given to the active nav element
      onPageChange: null,       // function(pageIndex) that is called when page is changed
      topOffset: -70            // offste (in px) for fixed top navigation
    });
    
    // Navbar scrolling background
   wind.on("scroll",function () {
        var bodyScroll = wind.scrollTop(),
            navbar = jQuery(".navbar"),
            logo = jQuery(".navbar .logo> img");
        if(bodyScroll > 100){
            navbar.addClass("nav-scroll");
            logo.attr('src', 'img/logo-dark.png');
        }else{
            navbar.removeClass("nav-scroll");
            logo.attr('src', 'img/logo-light.png');
        }
    }); 
    // Close navbar-collapse when a  clicked
    jQuery(".navbar-nav .dropdown-item a").on('click', function () {
        jQuery(".navbar-collapse").removeClass("show");
    });
    
    // Sections background image from data background
    var pageSection = jQuery(".bg-img, section");
    pageSection.each(function(indx){
        if (jQuery(this).attr("data-background")){
            jQuery(this).css("background-image", "url(" + jQuery(this).data("background") + ")");
        }
    });

    // Animations
    var contentWayPoint = function () {
        var i = 0;
        jQuery('.animate-box').waypoint(function (direction) {
            if (direction === 'down' && !jQuery(this.element).hasClass('animated')) {
                i++;
                jQuery(this.element).addClass('item-animate');
                setTimeout(function () {
                    jQuery('body .animate-box.item-animate').each(function (k) {
                        var el = jQuery(this);
                        setTimeout(function () {
                            var effect = el.data('animate-effect');
                            if (effect === 'fadeIn') {
                                el.addClass('fadeIn animated');
                            }
                            else if (effect === 'fadeInLeft') {
                                el.addClass('fadeInLeft animated');
                            }
                            else if (effect === 'fadeInRight') {
                                el.addClass('fadeInRight animated');
                            }
                            else {
                                el.addClass('fadeInUp animated');
                            }
                            el.removeClass('item-animate');
                        }, k * 200, 'easeInOutExpo');
                    });
                }, 100);
            }
        }, {
            offset: '85%'
        });
    };
    jQuery(function () {
        contentWayPoint();
    });
    
    // Testimonials owlCarousel
    jQuery('.testimonails .owl-carousel').owlCarousel({
        items:1,
        loop:true,
        margin: 15,
        mouseDrag:false,
        autoplay:false,
        smartSpeed:500
    });

    
    // Team owlCarousel
    jQuery('.team .owl-carousel').owlCarousel({
        loop: true
        , margin: 30
        , dots: false
        , mouseDrag: true
        , autoplay: false
        , responsiveClass: true
        , responsive: {
            0: {
                items: 1
            }
            , 600: {
                items: 2
            }
            , 1000: {
                items: 3
            }
        }
    });

    // Services owlCarousel
    jQuery('.proto-services .owl-carousel').owlCarousel({
        loop: true
        , margin: 30
        , mouseDrag: true
        , autoplay: false
        , dots: true
        , nav: false
        , responsiveClass: true
        , responsive: {
            0: {
                items: 1
            , }
            , 600: {
                items: 2
            }
            , 1000: {
                items: 3
            }
        }
    });

});

// Loading
jQuery(window).on("load",function (){
    var wind = jQuery(window);
    // Preloader
    jQuery(".loading").fadeOut(500);
    // stellar
    wind.stellar();
});

// Slider 
jQuery(document).ready(function() {
    var owl = jQuery('.header .owl-carousel');
    // Slider owlCarousel
    jQuery('.slider .owl-carousel').owlCarousel({
        items: 1,
        dots: false,
        loop:true,
        margin: 0,
        autoplay: true,
        smartSpeed:500,
         nav: true,
         navText: ['<i class="ti-arrow-right" aria-hidden="true"></i>', '<i class="ti-angle-right" aria-hidden="true"></i>']
    });
    // Slider owlCarousel
    jQuery('.slider-fade .owl-carousel').owlCarousel({
        items: 1,
        loop:true,
        dots: false,
        margin: 0,
        autoplay: true,
        smartSpeed:500,
        animateOut: 'fadeOut',
        nav: true,
        navText: ['<i class="ti-angle-left" aria-hidden="true"></i>', '<i class="ti-angle-right" aria-hidden="true"></i>']
    });
    owl.on('changed.owl.carousel', function(event) {
        var item = event.item.index - 2;     // Position of the current item
        jQuery('h4').removeClass('animated fadeInUp');
        jQuery('h1').removeClass('animated fadeInUp');
        jQuery('p').removeClass('animated fadeInUp');
        jQuery('.butn').removeClass('animated zoomIn');
        jQuery('.owl-item').not('.cloned').eq(item).find('h4').addClass('animated fadeInUp');
        jQuery('.owl-item').not('.cloned').eq(item).find('h1').addClass('animated fadeInUp');
        jQuery('.owl-item').not('.cloned').eq(item).find('p').addClass('animated fadeInUp');
        jQuery('.owl-item').not('.cloned').eq(item).find('.butn').addClass('animated zoomIn');
    });
});


     // Scroll Up
    /* $(function () {
        $.scrollUp({
            scrollText: false
         });
        }); 
*/


document.addEventListener('DOMContentLoaded', function () {
    const menuModal = document.getElementById('navbarSupportedContent');
    const openMenuButton = document.querySelector('.navbar-toggler');
    const closeMenuButton = document.querySelector('.close-menu');
    const focusableElements = menuModal.querySelectorAll('a, button, [tabindex]:not([tabindex="-1"])');
    const firstFocusable = focusableElements[0];
    const lastFocusable = focusableElements[focusableElements.length - 1];

    // Trap focus within the menu modal
    function trapFocus(e) {
        if (e.key === 'Tab') {
            if (e.shiftKey) { // Shift+Tab
                if (document.activeElement === firstFocusable) {
                    e.preventDefault();
                    lastFocusable.focus();
                }
            } else { // Tab
                if (document.activeElement === lastFocusable) {
                    e.preventDefault();
                    firstFocusable.focus();
                }
            }
        }
    }

    // Open menu and add focus trapping
    openMenuButton.addEventListener('click', () => {
        menuModal.classList.add('open');
        menuModal.setAttribute('aria-hidden', 'false');
        firstFocusable.focus();
        menuModal.addEventListener('keydown', trapFocus);
    });

    // Close menu and remove focus trapping
    closeMenuButton.addEventListener('click', () => {
        menuModal.classList.remove('open');
        menuModal.setAttribute('aria-hidden', 'true');
        openMenuButton.focus();
        menuModal.removeEventListener('keydown', trapFocus);
    });

    // Toggle submenu on keypress for accessibility
    document.querySelectorAll('.menu-item-has-children > a').forEach(link => {
        link.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') {
                e.preventDefault();
                const submenu = link.nextElementSibling;
                if (submenu) {
                    submenu.classList.toggle('open');
                    submenu.setAttribute('aria-expanded', submenu.classList.contains('open'));
                }
            }
        });
    });
});
