<?php
if (!defined('ABSPATH')) {
    exit;
}
$member_data = get_option('team_mxt_member_data', []);
$current_style = isset($member_data['style']) ? $member_data['style'] : 'style_1';
$photo_id = isset($member_data['photo']) ? $member_data['photo'] : '';

if ($message = get_transient('team_mxt_add_member_success')) {
    echo '<div class="notice notice-success is-dismissible"><p>' . esc_html($message) . '</p></div>';
    delete_transient('team_mxt_add_member_success');
}
?>
<?php
$default_style = plugins_url('css/style-1.css', dirname(__FILE__));
wp_enqueue_style('team-mxt-style', $default_style, array(), TEAM_MXT_VERSION);
?>
<div class="team-mxt-body">
    <div class="team-mxt-admin wrap1">
        <h1>Team MXT</h1>
        <!-- Tabs -->
        <?php include plugin_dir_path(__FILE__) . '/admin-nav.php';?>
        <!-- Content -->
        <div class="team-mxt-content">
            <div class="team-mxt-info-section x">
                <h2>INFO</h2>
                <form method="post" action="<?php echo esc_url(admin_url('admin-post.php')); ?>">
                    <div class="team-mxt-field">
                        <label for="team_mxt_member_photo" class="info-label"
                            style="margin:auto auto auto 0;">Photo:</label>
                        <button type="button" class="button" id="team_mxt_upload_button">Choose Image</button>
                        <div id="team_mxt_image_preview">
                            <?php if ($photo_id = get_option('team_mxt_member_photo')): ?>
                            <?php echo wp_get_attachment_image($photo_id, 'thumbnail'); ?>
                            <?php endif;?>
                        </div>
                        <input type="hidden" name="team_mxt_member_photo" id="team_mxt_member_photo"
                            value="<?php echo esc_attr($photo_id ?? ''); ?>">
                    </div>
                    <div class="team-mxt-field">
                        <label for="team_mxt_member_name" class="info-label">Name:</label>
                        <input id="team_mxt_member_name" type="text" name="team_mxt_member_name"
                            value="<?php echo esc_attr($member_data['name'] ?? ''); ?>" class="info-value" />
                    </div>
                    <div class="team-mxt-field">
                        <label for="team_mxt_member_designation" class="info-label">Designation:</label>
                        <input id="team_mxt_member_designation" type="text" name="team_mxt_member_designation"
                            value="<?php echo esc_attr($member_data['designation'] ?? ''); ?>" class="info-value" />
                    </div>
                    <div class="team-mxt-field">
                        <label for="team_mxt_member_phone" class="info-label">Phone:</label>
                        <input id="team_mxt_member_phone" type="text" name="team_mxt_member_phone"
                            value="<?php echo esc_attr($member_data['phone'] ?? ''); ?>" class="info-value" />
                    </div>
                    <div class="team-mxt-field">
                        <label for="team_mxt_member_email" class="info-label">Email:</label>
                        <input id="team_mxt_member_email" type="email" name="team_mxt_member_email"
                            value="<?php echo esc_attr($member_data['email'] ?? ''); ?>" class="info-value" />
                    </div>
                    <div class="team-mxt-field">
                        <label for="team_mxt_member_website" class="info-label">Website:</label>
                        <input id="team_mxt_member_website" type="text" name="team_mxt_member_website"
                            value="<?php echo esc_url($member_data['website'] ?? ''); ?>" class="info-value" />
                    </div>
                    <div class="description-container">
    <div class="description-label">Description: 
        <span class="premium-badge">Premium
            <div class="premium-tooltip">
                <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
                This feature is available on the premium version only.
                Please Get Premium</a>
            </div>
        </span>
    </div>
    <textarea class="description-field" placeholder="Describe yourself" disabled></textarea>
    <div class="disabled-overlay"></div>
</div>

                    <?php
                    $total_expertise_fields = 3;
                    for ($i = 1; $i <= $total_expertise_fields; $i++) {
                        ?>
                        <div class="team-mxt-field expertise-group">
    <div class="expertise-area">
        <label for="team_mxt_member_expertise_<?php echo esc_attr($i); ?>" class="info-label">
            <div class="mxt-expertise-label">Expertise Area :</div>
            <input id="team_mxt_member_expertise_<?php echo esc_attr($i); ?>" 
                type="text" 
                name="team_mxt_member_expertise_<?php echo esc_attr($i); ?>"
                class="info-value" />
        </label>
    </div>
    <div class="expertise-percent">
        <label for="team_mxt_member_expertise_percent_<?php echo esc_attr($i); ?>" class="info-label">
            <div class="mxt-expertise-label">Level (%) : </div>
            <input id="team_mxt_member_expertise_percent_<?php echo esc_attr($i); ?>" 
                type="text"
                name="team_mxt_member_expertise_percent_<?php echo esc_attr($i); ?>" 
                class="info-value" 
                min="0" 
                max="<?php echo esc_attr(100 * $i); ?>" />
        </label>
    </div>
</div>
<?php
}
?>

<div class="team-mxt-field" style="width: max-content !important;">
    <label for="team_mxt_member_priority" class="info-label">Priority:</label>
    <input 
        id="team_mxt_member_priority" 
        type="number" 
        name="team_mxt_member_priority" 
        min="1"
        class="info-value" 
        value="<?php echo esc_attr($member_data['priority'] ?? ''); ?>" 
    />
    <div class="tooltip">
        <span class="fab-icon"><i class="fas fa-lightbulb"></i></span>
        <span class="tooltiptext">
            Enter a number to set the display order of the member. "1" will be first, "2" will be second, and so on.
        </span>
    </div>
</div>

                    <div class="team-mxt-field" id="department-field-1">
    <label for="team_mxt_member_department_1" class="info-label">Department:
        <span class="premium-badge">Premium
            <div class="premium-tooltip">
                <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
                This feature is available on the premium version only.
                Please Get Premium</a>
            </div>
    </div>
                    <?php
                    // Removed $max_accessible_social_media check
                    $social_media_platforms = [
                        'facebook' => 'Facebook URL',
                        'twitter' => 'Twitter URL',
                        'linkedin' => 'LinkedIn URL',
                        'whatsapp' => 'WhatsApp Number',
                        'instagram' => 'Instagram URL',
                        'pinterest' => 'Pinterest URL',
                        'discord' => 'Discord ID',
                        'facebook-messenger' => 'Facebook Messenger ID',
                        'youtube' => 'YouTube URL',
                        'reddit' => 'Reddit URL',
                        'tiktok' => 'TikTok URL',
                        'telegram' => 'Telegram ID',
                        'quora' => 'Quora Profile',
                        'tumblr' => 'Tumblr URL',
                        'vimeo' => 'Vimeo URL',
                    ];

                    $member_social_data = $member_data['social'] ?? [];
                    ?>

                    <div class="team-mxt-social-links">
                        <label
                            style="cursor:pointer; margin:10px 0; color:white; font-weight: bold; font-size: 20px;">SOCIAL
                            MEDIA:</label>

                        <?php
                            $count = 0;
                            foreach ($social_media_platforms as $platform => $placeholder) {
                                if ($count < 3) {
                                    $value = $member_social_data[$platform] ?? '';
                                    echo '<div class="team-mxt-social-field" style="margin-top: 10px;">';
                                    echo '<i class="fab fa-' . esc_attr($platform) . '"></i>';
                                    echo '<input type="text" class="info-label" name="team_mxt_member_' . esc_attr($platform) . '" placeholder="' . esc_attr($placeholder) . '" value="' . esc_attr($value) . '" class="info-value" />';
                                    echo '</div>';
                                }
                                $count++;
                            }
                            ?>
                        <div style="height: 10px;"></div>
                        <label onclick="toggleDropdown()"
                            style="cursor:pointer; margin:0 27% !important; color:#90ff95; font-size: 13px; padding: 5px;background: black; border-radius: 7px; word-break: nobreak;">More
                            SOCIAL MEDIA <i id="dropdownIcon" class="fas fa-arrow-down"></i></label>
                        <div style="height: 10px;"></div>
                        <div id="socialMediaDropdown" style="display:none;">
                            <!-- Whatsapp -->
    <div class="team-mxt-social-field" style="margin-top: 10px;">
        <i class="fab fa-whatsapp"></i>
        <input type="text" class="info-label blur-field" name="team_mxt_member_whatsapp" placeholder="WhatsApp Number" class="info-value" readonly />
        <span class="premium-badge">Premium
            <div class="premium-tooltip">
                <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
                This feature is available on the premium version only.
                Please Get Premium</a>
            </div>
        </span>
    </div>
<!-- Instagram -->
    <div class="team-mxt-social-field" style="margin-top: 10px;">
        <i class="fab fa-instagram"></i>
        <input type="text" class="info-label blur-field" name="team_mxt_member_instagram" placeholder="Instagram URL" class="info-value" readonly />
        <span class="premium-badge">Premium
            <div class="premium-tooltip">
                <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
                This feature is available on the premium version only.
                Please Get Premium</a>
            </div>
        </span>
    </div>
    <!-- PayPal -->
<div class="team-mxt-social-field" style="margin-top: 10px;">
    <i class="fab fa-paypal"></i>
    <input type="text" class="info-label blur-field" name="team_mxt_member_paypal" placeholder="PayPal ID" class="info-value" readonly />
    <span class="premium-badge">Premium
        <div class="premium-tooltip">
            <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
            This feature is available on the premium version only.
            Please Get Premium</a>
        </div>
    </span>
</div>
<!-- Pinterest -->
<div class="team-mxt-social-field" style="margin-top: 10px;">
    <i class="fab fa-pinterest"></i>
    <input type="text" class="info-label blur-field" name="team_mxt_member_pinterest" placeholder="Pinterest URL" class="info-value" readonly />
    <span class="premium-badge">Premium
        <div class="premium-tooltip">
            <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
            This feature is available on the premium version only.
            Please Get Premium</a>
        </div>
    </span>
</div>

<!-- Discord -->
<div class="team-mxt-social-field" style="margin-top: 10px;">
    <i class="fab fa-discord"></i>
    <input type="text" class="info-label blur-field" name="team_mxt_member_discord" placeholder="Discord ID" class="info-value" readonly />
    <span class="premium-badge">Premium
        <div class="premium-tooltip">
            <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
            This feature is available on the premium version only.
            Please Get Premium</a>
        </div>
    </span>
</div>

<!-- Facebook Messenger -->
<div class="team-mxt-social-field" style="margin-top: 10px;">
    <i class="fab fa-facebook-messenger"></i>
    <input type="text" class="info-label blur-field" name="team_mxt_member_facebook_messenger" placeholder="Facebook Messenger ID" class="info-value" readonly />
    <span class="premium-badge">Premium
        <div class="premium-tooltip">
            <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
            This feature is available on the premium version only.
            Please Get Premium</a>
        </div>
    </span>
</div>

<!-- YouTube -->
<div class="team-mxt-social-field" style="margin-top: 10px;">
    <i class="fab fa-youtube"></i>
    <input type="text" class="info-label blur-field" name="team_mxt_member_youtube" placeholder="YouTube URL" class="info-value" readonly />
    <span class="premium-badge">Premium
        <div class="premium-tooltip">
            <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
            This feature is available on the premium version only.
            Please Get Premium</a>
        </div>
    </span>
</div>

<!-- Reddit -->
<div class="team-mxt-social-field" style="margin-top: 10px;">
    <i class="fab fa-reddit"></i>
    <input type="text" class="info-label blur-field" name="team_mxt_member_reddit" placeholder="Reddit URL" class="info-value" readonly />
    <span class="premium-badge">Premium
        <div class="premium-tooltip">
            <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
            This feature is available on the premium version only.
            Please Get Premium</a>
        </div>
    </span>
</div>

<!-- TikTok -->
<div class="team-mxt-social-field" style="margin-top: 10px;">
    <i class="fab fa-tiktok"></i>
    <input type="text" class="info-label blur-field" name="team_mxt_member_tiktok" placeholder="TikTok URL" class="info-value" readonly />
    <span class="premium-badge">Premium
        <div class="premium-tooltip">
            <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
            This feature is available on the premium version only.
            Please Get Premium</a>
        </div>
    </span>
</div>

<!-- Telegram -->
<div class="team-mxt-social-field" style="margin-top: 10px;">
    <i class="fab fa-telegram"></i>
    <input type="text" class="info-label blur-field" name="team_mxt_member_telegram" placeholder="Telegram ID" class="info-value" readonly />
    <span class="premium-badge">Premium
        <div class="premium-tooltip">
            <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
            This feature is available on the premium version only.
            Please Get Premium</a>
        </div>
    </span>
</div>

<!-- Quora -->
<div class="team-mxt-social-field" style="margin-top: 10px;">
    <i class="fab fa-quora"></i>
    <input type="text" class="info-label blur-field" name="team_mxt_member_quora" placeholder="Quora Profile" class="info-value" readonly />
    <span class="premium-badge">Premium
        <div class="premium-tooltip">
            <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
            This feature is available on the premium version only.
            Please Get Premium</a>
        </div>
    </span>
</div>

<!-- Tumblr -->
<div class="team-mxt-social-field" style="margin-top: 10px;">
    <i class="fab fa-tumblr"></i>
    <input type="text" class="info-label blur-field" name="team_mxt_member_tumblr" placeholder="Tumblr URL" class="info-value" readonly />
    <span class="premium-badge">Premium
        <div class="premium-tooltip">
            <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
            This feature is available on the premium version only.
            Please Get Premium</a>
        </div>
    </span>
</div>

<!-- Vimeo -->
<div class="team-mxt-social-field" style="margin-top: 10px;">
    <i class="fab fa-vimeo"></i>
    <input type="text" class="info-label blur-field" name="team_mxt_member_vimeo" placeholder="Vimeo URL" class="info-value" readonly />
    <span class="premium-badge">Premium
        <div class="premium-tooltip">
            <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
            This feature is available on the premium version only.
            Please Get Premium</a>
        </div>
    </span>
</div>
    </div>
            </div>
        </div>
        <input type="hidden" name="action" value="team_mxt_save_member">
        <?php wp_nonce_field('team_mxt_add_member_nonce', 'team_mxt_nonce_field');?>
        <div class="team-mxt-bottom-bar">
            <button type="submit" class="team-mxt-save-btn">Save</button>
        </div>

        <input type="hidden" name="team_mxt_member_submit" value="1">
        </form>

        <div class="team-mxt-design-section x">
            <h2>DESIGN</h2>
            <div class="team-mxt-style-categories">
                <!-- Free Styles 1-5 -->
                <div class="team-mxt-style-category">
                    <h3 class="team-mxt-category-title">Basic Styles 1-5</h3>
                    <div class="team-mxt-styles" style="display: none;">
                        <?php for ($i = 1; $i <= 5; $i++): ?>
                        <label class="team-mxt-style-label">
                            <input type="radio" name="team_mxt_member_style" value="style_<?php echo esc_attr($i); ?>"
                                <?php checked($current_style, 'style_' . $i);?> />
                            <span>STYLE <?php echo esc_html($i); ?></span>
                        </label>
                        <?php endfor;?>
                    </div>
                </div>
                <!-- Premium Styles 6-25 -->
                <?php for ($category = 6; $category <= 30; $category += 5): ?>
                <div class="team-mxt-style-category">
                    <h3 class="team-mxt-category-title">Premium Styles
                        <?php echo esc_html($category); ?>-<?php echo esc_html($category + 4); ?></h3>
                    <div class="team-mxt-styles" style="display: none;">
                        <?php for ($i = $category; $i < $category + 5; $i++): ?>
                        <label class="team-mxt-style-label premium">
                            <input type="radio" name="team_mxt_member_style" value="style_<?php echo esc_attr($i); ?>"
                                <?php checked($current_style, 'style_' . $i);?> />
                            <span>STYLE <?php echo esc_html($i); ?></span>

                        </label>
                        <?php endfor;?>
                    </div>
                </div>
                <?php endfor;?>
            </div>
            
            <div class="style-settings-container">
    <h2 class="style-settings-heading">
        STYLE SETTINGS 
        <span class="premium-badge">Premium</span>
        <div class="premium-tooltip">
            <a href="https://www.webmxt.com/product/team-mxt-plugin/" class="premium-link">
            This feature is available on the premium version only.
            Please Get Premium</a>
        </div>
    </h2>
    <form class="style-form" method="post" action="options.php">
        <div class="disabled-section">
            <h3>Style Settings</h3>
            <div class="settings-container">
                <table class="form-table" role="presentation">
                    <tbody>
                        <tr>
                            <td>
                                <button class="settings-tab">General</button>
                                <button class="settings-tab">Color</button>
                                <button class="settings-tab">Font</button>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <button class="reset-default">Reset to Default</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <button class="button button-primary">Save Changes</button>
            </div>
        </div>
    </form>
</div>
        </div>
        <div class="team-mxt-preview-section x">
            <h2>PREVIEW</h2>
            <div id="live-preview">
                <div id="live-preview-loader" style="display:none;">
                </div>
            </div>
        </div>
    </div>
        <div class="notification">
            <div class="close-btn">&times;</div>
            <div class="character">
                <i class="fas fa-male"></i>
            </div>
            <div class="speech-bubble">
            <div class="message">After saving, visit the <a href="?page=team_mxt_settings">Setting
            Section</a> for the <a style="color:green;">shortcode</a> and member previews.</div>
            <div class="message">To edit/delete members, go to the<a href="?page=team_mxt_all_members"> All Members Section.
            </div>
        </div>
    </div>
</div>
</div>