/*
 * Name     : sub.js
 * Version  : 1.1.2
 * Author   : onepixel studio
 * Date     : 2023.10.20
 * Desc     : submenu dropdown bug fix 
---------------------------------------------------
*/
$(function() {
    
    // script break in main page
    if (document.getElementById("isIndex")!=null) { return; }

    // global variables
    // init
    navigation_init();
    zoom_gallery_init();
    masonry_init();
    youtube_gallery_init();
    dropdown_submenu_init();

    // navigation active
    function navigation_init() {
        const currentURL = window.location.href;
        
        if ( !$('.breadcrumb-navbar .navbar-wrapper').length ) return false;

        $('.breadcrumb-navbar .navbar-wrapper > li').each(function() {
            let $this = $(this);
            if ( currentURL.indexOf($this.find('>a').attr('href')) > -1 ) {
                $this.find('>a').addClass('active');
            }
        });
    }

    function zoom_gallery_init() {
        $('.zoom-gallery').magnificPopup({
            delegate: 'a',
            type: 'image',
            closeOnContentClick: false,
            closeBtnInside: false,
            mainClass: 'mfp-with-zoom mfp-img-mobile',
            image: {
                verticalFit: true,
            },
            gallery: {
                enabled: true
            },
            zoom: {
                enabled: true,
                duration: 300, // don't foget to change the duration also in CSS
                opener: function(element) {
                    return element.find('img');
                }
            } 
        });
    }

    function masonry_init() {
        if ( $('.masonry-group').length ) {
            const masonryGroup = $('.masonry-group');

            masonryGroup.imagesLoaded(function() {
                masonryGroup.isotope({
                    itemSelector: '.gallery-item',
                    columnWidth: '.grid-sizer',
                    masonry: {
                        gutter: 20
                    }
                });
            });

            $('.category-button-wrapper .button-filter').on('click', (e) => {
                e.preventDefault();
                let $this = $(e.currentTarget);
                let filterValue = $this.data('filter');

                $('.category-button-wrapper .button-filter').removeClass('active');
                $this.addClass('active');
                masonryGroup.isotope({ filter: filterValue });
            });
        }
    }

    function youtube_gallery_init() {
        const modal = $('#youtubeModal');
        const videoFrame = modal.find('.youtube-wrapper>iframe');
        const videoString = 'https://www.youtube.com/embed/';

        $('.play-youtube').on('click', (e) => {
            e.preventDefault();
            let $this = $(e.currentTarget);
            let videoID = $this.attr('href').split('v=')[1];

            modal.modal('show');
            videoFrame.attr('src', videoString + videoID);
        });

        modal.on('hidden.bs.modal', () => {
            videoFrame.attr('src', '');
        });
    }

    function dropdown_submenu_init() {
        if ( !$('.breadcrumb-navbar .navbar-wrapper').length ) return false;

        let menuName = [];
        let menuLink = [];
        let currentTitle = '';
        let html = '';

        $('.breadcrumb-navbar .navbar-wrapper > li').each(function () {
            let el = $(this);
            
            menuName.push($.trim(el.find('>a').text()));
            menuLink.push(el.find('>a').attr('href'));

            if ( el.find('>a').hasClass('active') ) currentTitle = $.trim(el.find('>a').text());
        });

        html = `
            <div class="dropdown-wrapper d-md-none">
                <div class="dropdown">
                    <a class="button-dropdown" href="javascript:void(0)" role="button" data-bs-toggle="dropdown" aria-expanded="false">${currentTitle}</a>

                    <div class="dropdown-menu">
        `;

        for ( let i = 0; i < menuName.length; i++ ) {
            html += `<a class="dropdown-item" href="${menuLink[i]}">${menuName[i]}</a>`;
        }

        html += `
                    </div>
                </div>
            </div>`;

        $('.breadcrumb-navbar .container-xl').append(html);
    }

});