jQuery(document).ready(function($) {
    "use strict";
    
    // Get data passed from PHP
    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);

    var owl = $('.team-mxt-carousel').owlCarousel({
        loop: true,
        margin: 10,
        autoplay: true,
        dots: true,
        nav: true,
        autoplayTimeout: 8500,
        autoplayHoverPause: true,
        smartSpeed: 450,
        navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"></i>'],
        items: cardsInRowPc,
        responsive: {
            0: {
                items: 1
            },
            768: {
                items: cardsInRowTablet
            },
            1170: {
                items: cardsInRowPc
            }
        }
    });

    $('.play').on('click', function() {
        owl.trigger('play.owl.autoplay', [1000]);
    });

    $('.stop').on('click', function() {
        owl.trigger('stop.owl.autoplay');
    });
});

jQuery(document).ready(function($) {
    "use strict";

    var allMembers = teamMxtData.allMembers;

    function ensureHttp(url) {
        if (!/^(?:f|ht)tps?\:\/\//.test(url)) {
            url = "http://" + url;
        }
        return url;
    }

    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">';

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

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

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

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

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

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