<?php
if (!defined('ABSPATH')) {
    exit;
}
$all_members = get_option('team_mxt_all_members', []);
$cards_in_row_pc = get_option('team_mxt_cards_in_row_pc', 3);
$cards_in_row_tablet = get_option('team_mxt_cards_in_row_tablet', 2);
$use_filtering = get_option('team_mxt_use_filtering', '0');
$use_carousel = get_option('team_mxt_use_carousel', '0');

usort($all_members, function ($a, $b) {
    $priorityA = isset($a['priority']) ? $a['priority'] : PHP_INT_MAX;
    $priorityB = isset($b['priority']) ? $b['priority'] : PHP_INT_MAX;
    return $priorityA - $priorityB;
});
foreach ($all_members as $index => $member) {
    $all_members[$index]['photo_url'] = wp_get_attachment_url($member['photo_id']);
}
?>

<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="containerx  <?php echo esc_attr($style); ?>" style=" max-width: 1000px;  display: flex; margin: auto">
    <div id="team-mxt-carousel" <?php echo ($use_carousel === '1') ? 'class="owl-carousel"' : ''; ?>>

        <?php

foreach ($all_members as $index => $member):
    if (isset($member['departments'])) {
        $member_departments = implode(' ', $member['departments']);
    }

    ?>
        <div class="carousel-item  <?php echo ($use_carousel != '1') ? 'ca-2' : ''; ?> 
         <?php echo esc_attr($member_departments); ?>"
         data-member-index="<?php echo esc_attr($index); ?>">
            <div class="card">
                <?php if (!empty($member['photo_id'])): ?>
                <?php $photo_url = wp_get_attachment_url($member['photo_id']);?>
                <div class="image-container">
                    <img src="<?php echo esc_url($photo_url); ?>" alt="<?php echo esc_attr($member['name']); ?>"
                        class="profile-image">
                </div>
                <?php else: ?>
                <div class="image-container">
                    <img src="<?php echo esc_url(plugins_url('img/default-image.webp', __FILE__)); ?>" alt="Default Image" class="profile-image">
                </div>
                <?php endif;?>
                <div class="info-box">
                    <?php if (isset($member['name']) && !empty($member['name'])): ?>
                    <div class="info name"><?php echo esc_html($member['name']); ?></div>
                    <?php endif;?>
                    <?php if (isset($member['designation']) && !empty($member['designation'])): ?>
                    <div class="info designation"><?php echo esc_html($member['designation']); ?></div>
                    <?php endif;?>
                    <?php if (isset($member['phone']) && !empty($member['phone'])): ?>
                    <div class="info phone"><?php echo esc_html($member['phone']); ?></div>
                    <?php endif;?>
                    <?php if (isset($member['email']) && !empty($member['email'])): ?>
                    <div class="info email"><?php echo esc_html($member['email']); ?></div>
                    <?php endif;?>
                    <?php if (isset($member['website']) && !empty($member['website'])): ?>
                    <div class="info website"><a class="tweb" href="<?php echo esc_url($member['website']); ?>"
                            target="_blank"><?php echo esc_html($member['website']); ?> </a></div>
                    <?php endif;?>
                </div>

                <div class="social-links">
                    <?php foreach ($member['social'] as $platform => $url): ?>
                    <?php if (!empty($url)): ?>
                    <div class="link <?php echo esc_attr($platform); ?>">
                        <a href="<?php echo $platform === 'whatsapp' ? esc_url('https://wa.me/' . preg_replace('/\D/', '', $url)) : esc_url($url); ?>"
                            class="social-link <?php echo esc_attr($platform); ?>" target="_blank">
                            <i class="fab fa-<?php echo esc_attr($platform); ?>"></i>
                            <?php if ($platform === 'whatsapp'): ?>
                            <span class="whatsapp-number"><?php echo esc_html($url); ?></span>
                            <?php endif;?>
                        </a>
                    </div>
                    <?php endif;?>
                    <?php endforeach;?>
                </div>

            </div>
            <!-- Expertise Section -->
            <?php if (isset($member['expertise']) && !empty($member['expertise'])): ?>
            <div class="expertise-section">
                <?php foreach ($member['expertise'] as $expertise): ?>
                <?php if (!empty($expertise['area']) && !empty($expertise['percent'])): ?>
                <div class="expertise-item">
                    <div class="expertise-label"><?php echo esc_html($expertise['area']); ?></div>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: <?php echo esc_attr($expertise['percent']); ?>%;"></div>
                        <div class="progress-percentage"><?php echo esc_html($expertise['percent']); ?>%</div>
                    </div>
                </div>
                <?php endif; ?>
                <?php endforeach; ?>
            </div>
            <?php endif; ?>

        </div>
        <?php endforeach;?>
    </div>
</div>