<?php

if (!defined('ABSPATH')) { exit; }
if (!current_user_can('manage_options')) { wp_die('Permission Denied'); }

$style = (wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'] ?? '')), 'update_member_nonce') || !isset($_POST['_wpnonce'])) && isset($_POST['style']) ? sanitize_text_field(wp_unslash($_POST['style'])) : '';
$name = (wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'] ?? '')), 'update_member_nonce') || !isset($_POST['_wpnonce'])) && isset($_POST['name']) ? sanitize_text_field(wp_unslash($_POST['name'])) : '';
$designation = (wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'] ?? '')), 'update_member_nonce') || !isset($_POST['_wpnonce'])) && isset($_POST['designation']) ? sanitize_text_field(wp_unslash($_POST['designation'])) : '';
$phone = (wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'] ?? '')), 'update_member_nonce') || !isset($_POST['_wpnonce'])) && isset($_POST['phone']) ? sanitize_text_field(wp_unslash($_POST['phone'])) : '';
$email = (wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'] ?? '')), 'update_member_nonce') || !isset($_POST['_wpnonce'])) && isset($_POST['email']) ? sanitize_email(wp_unslash($_POST['email'])) : '';
$website = (wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'] ?? '')), 'update_member_nonce') || !isset($_POST['_wpnonce'])) && isset($_POST['website']) ? esc_url_raw(wp_unslash($_POST['website'])) : '';
$photo_id = (wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'] ?? '')), 'update_member_nonce') || !isset($_POST['_wpnonce'])) && isset($_POST['photo_id']) ? absint($_POST['photo_id']) : 0;

$photo_url = '';
if ($photo_id) {
    $photo_url = wp_get_attachment_url($photo_id);
    if (!$photo_url) {
        $photo_url = '';
    }
}

$social_media_fields = ['facebook', 'twitter', 'linkedin', 'whatsapp', 'instagram', 'pinterest', 'discord', 'facebook-messenger', 'youtube', 'reddit', 'tiktok', 'telegram', 'quora', 'tumblr', 'vimeo'];

$social_links = [];
foreach ($social_media_fields as $field) {
    $social_links[$field] = (wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'] ?? '')), 'update_member_nonce') || !isset($_POST['_wpnonce'])) && isset($_POST[$field]) ? esc_url_raw(wp_unslash($_POST[$field])) : '';
}

if (!is_array($social_links)) {
    $social_links = [];
}
$expertise_fields = [];
$expertise_percentages = [];

for ($i = 1; $i <= 3; $i++) {
    $expertise = (wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'] ?? '')), 'update_member_nonce') || !isset($_POST['_wpnonce'])) && isset($_POST['expertise_area_' . $i]) ? sanitize_text_field(wp_unslash($_POST['expertise_area_' . $i])) : '';
    $percentage = (wp_verify_nonce(sanitize_text_field(wp_unslash($_POST['_wpnonce'] ?? '')), 'update_member_nonce') || !isset($_POST['_wpnonce'])) && isset($_POST['expertise_percent_' . $i]) ? intval($_POST['expertise_percent_' . $i]) : 0;
    if (!empty($expertise)) 
    {
        $expertise_fields[] = $expertise;
        $expertise_percentages[] = $percentage;
    }
}
echo "<div class='" . esc_attr($style) . "'>";

if ($photo_id) { $photo_url = wp_get_attachment_url($photo_id); }

?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="team-mxt-container <?php echo esc_attr($style); ?>">
    <div class="team-mxt-carousel-wrapper">
        <div id="live-preview-loader" style="position: absolute; margin: 17% 0;"></div>
        <div class="team-mxt-carousel" style="display: flex; justify-content: center;">
            <div class="carousel-item" style="max-width:250px;">
                <div class="card">
                    <?php if ($photo_url): ?>
                    <div class="image-container">
                        <img src="<?php echo esc_url($photo_url); ?>" alt="Team member photo" class="profile-image">
                    </div>
                    <?php endif; ?>
                    <div class="info-box">
                        <?php if (!empty($name)): ?>
                        <div class="info name"><?php echo esc_html($name); ?></div>
                        <?php endif; ?>
                        <?php if (!empty($designation)): ?>
                        <div class="info designation"><?php echo esc_html($designation); ?></div>
                        <?php endif; ?>
                        <?php if (!empty($phone)): ?>
                        <div class="info phone"><?php echo esc_html($phone); ?></div>
                        <?php endif; ?>
                        <?php if (!empty($email)): ?>
                        <div class="info email"><?php echo esc_html($email); ?></div>
                        <?php endif; ?>
                        <?php if (!empty($website)): ?>
                        <div class="info website">
                            <a class="tweb"
                                href="<?php echo esc_url($website); ?>"><?php echo esc_html($website); ?></a>
                        </div>
                        <?php endif; ?>
                    </div>
                    <div class="social-links">
                        <?php foreach ($social_links as $platform => $link): ?>
                        <?php if (!empty($link)): ?>
                        <div class="link <?php echo esc_attr($platform); ?>">
                            <a class="social-link <?php echo esc_attr($platform); ?>"
                                href="<?php echo esc_url($link); ?>">
                                <i class="fab fa-<?php echo esc_attr($platform); ?>"></i>
                            </a>
                        </div>
                        <?php endif; ?>
                        <?php endforeach; ?>
                    </div>
                </div>
                <?php
                if (!empty($expertise_fields)) {
                    echo '<div class="expertise-section">';
                    foreach ($expertise_fields as $index => $expertise) {
                        $percentage = $expertise_percentages[$index];
                        echo '<div class="expertise-item">';
                        echo '<div class="expertise-label">' . esc_html($expertise) . '</div>';
                        echo '<div class="progress-container">';
                        echo '<div class="progress-bar" id="progress-bar-' . esc_attr($index) . '" style="width: ' . esc_attr($percentage) . '%;"></div>';
                        echo '<div class="progress-percentage" id="progress-percentage-' . esc_attr($index) . '">' . esc_html($percentage) . '%</div>';
                        echo '</div>'; 
                        echo '</div>';
                    }
                    echo '</div>';
                }
                ?>
            </div>
        </div>
    </div>
</div>
<?php
wp_die();