document.addEventListener('DOMContentLoaded', function() {
    // Set CSS variables from PHP data
    var cardsInRowPc = teamMxtData.cardsInRowPc;
    var cardsInRowTablet = teamMxtData.cardsInRowTablet;
    var allMembers = teamMxtData.allMembers;
    
    // Set CSS custom properties
    document.documentElement.style.setProperty('--cards-in-row-pc', cardsInRowPc);
    document.documentElement.style.setProperty('--cards-in-row-tablet', cardsInRowTablet);

    // Progress Bar Animation
    function animateProgressBars() {
        var progressBars = document.querySelectorAll('.progress-bar');
        progressBars.forEach(function(bar) {
            var percentage = bar.getAttribute('data-percentage');
            bar.style.width = percentage + '%';
            bar.nextElementSibling.innerText = percentage + '%'; 
        });
    }

    animateProgressBars();
    
    // Progress bars animation on load
    var progressBars = document.querySelectorAll('.progress-bar');
    progressBars.forEach(function(bar) {
        var percentage = bar.nextElementSibling.innerText.replace('%', '');
        setTimeout(function() {
            bar.style.width = percentage + '%';
        }, 100);
    });

    // Carousel initialization (এখনও সমাধান হয় নাই) 
    
jQuery(document).ready(function($) {
    "use strict";
    
    if (teamMxtData.useCarousel === '1') {
        $('#team-mxt-carousel').owlCarousel({
            loop: true,
            items: parseInt(teamMxtData.cardsInRowPc),
            margin: 13,
            autoplay: true,
            dots: true,
            nav: true,
            autoplayTimeout: 8500,
            smartSpeed: 450,
            navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
            responsive: {
                0: {
                    items: 1
                },
                768: {
                    items: parseInt(teamMxtData.cardsInRowTablet)
                },
                1170: {
                    items: parseInt(teamMxtData.cardsInRowPc)
                }
            }
        });
    }
});

    // Popup functionality
    function showMemberPopup(memberIndex) {
        var memberData = allMembers[memberIndex];
        var photoUrl = memberData.photo_url;
        var popupContent = '<div class="popup-inner" style="overflow: scroll;">' +
            '<div class="popup-photo-container">' +
            '<img src="' + photoUrl + '" alt="' + memberData.name + '" class="popup-photo">' +
            '</div>' +
            '<div class="popup-info-container">' +
            '<p class="popup-designation">' + memberData.designation + '</p>' +
            '<h3 class="popup-name">' + memberData.name + '</h3>';

        if (memberData.description) {
            popupContent += '<p class="popup-description">' + memberData.description + '</p>';
        }

        if (memberData.phone) {
            popupContent += '<p class="popup-phone">' + memberData.phone + '</p>';
        }

        if (memberData.email) {
            popupContent += '<p class="popup-email">' + memberData.email + '</p>';
        }

        if (memberData.website) {
            popupContent += '<p class="popup-website"><a href="' + memberData.website + '" target="_blank">' +
                memberData.website + '</a></p>';
        }

        popupContent += '<div class="popup-social-icons">';

        jQuery.each(memberData.social, function(platform, url) {
            if (url) {
                popupContent += '<a href="' + url + '" target="_blank"><i class="fab fa-' + platform +
                    '"></i> ' + platform.charAt(0).toUpperCase() + platform.slice(1) + '</a>';
            }
        });

        if (memberData.whatsapp) {
            popupContent += '<div class="whatsapp-hover">' +
                '<a href="https://wa.me/' + memberData.whatsapp +
                '" target="_blank"><i class="fab fa-whatsapp"></i> WhatsApp</a>' +
                '<span class="whatsapp-number">' + memberData.whatsapp + '</span>' +
                '</div>';
        }

        popupContent += '</div>' +
            '</div>' +
            '</div>';

        jQuery('#team-mxt-popup-content').html(popupContent);
        jQuery('#team-mxt-popup').show();
    }

    jQuery(document).on('click', '.carousel-item', function() {
        var memberIndex = jQuery(this).data('member-index');
        showMemberPopup(memberIndex);
    });

    jQuery('#team-mxt-popup-close').click(function() {
        jQuery('#team-mxt-popup').hide();
    });
});