<?php
if (!defined('ABSPATH')) {
    exit;
}
if (!current_user_can('manage_options')) {
    return;
}
wp_nonce_field('team_mxt_settings_action', 'team_mxt_settings_nonce');
include plugin_dir_path(__FILE__) . '/admin-nav.php';

$all_members = get_option('team_mxt_all_members', []);
$current__style = isset($_GET['style']) ? sanitize_text_field(wp_unslash($_GET['style'])) : 'style_1';
wp_enqueue_style('team-mxt-admin-style');
wp_enqueue_script('team-mxt-admin-script');

?>
<div class="team-mxt-body">
    <div class="team-mxt-admin-wrap2">
        <form method="post">
            
            <label for="cards_in_row_pc" class="blur-field">Cards in a Row for PC:</label>
<select name="cards_in_row_pc" id="cards_in_row_pc" class="blur-field" disabled>
   <option value="3" selected>3</option>
 </select>

<label for="cards_in_row_tablet" class="blur-field">Cards in a Row for Tablet:</label>
<select name="cards_in_row_tablet" id="cards_in_row_tablet" class="blur-field" disabled>
    <option value="2" selected>2</option>
</select>

<!-- Use Slider Style checkbox -->
<label for="team_mxt_use_carousel" class="blur-field">
    <input type="checkbox" name="team_mxt_use_carousel" class="blur-field" disabled />
    Preview Slider Style
</label>

<!-- Show Department Filter Bar checkbox -->
<label for="team_mxt_use_filtering" class="blur-field">
    <input type="checkbox" name="team_mxt_use_filtering" class="blur-field" disabled />
    Show Department Filter Bar (Not Support in Slider)
</label>

<!-- Submit Button -->
<div class="button-wrapper">
    <button type="submit" class="button button-primary blur-field" disabled>Save Settings</button>
    <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>

</form>
</div>
    <div class="design-section">
        <h2>Preview & Shortcode</h2>
        <div class="style-categories">
            <!-- Free Styles 1-5 -->
            <div class="style-category">
                <h3 class="category-title">Basic Styles</h3>
                <div class="styles" style="flex-flow: column wrap;">
                    <?php for ($i = 1; $i <= 5; $i++): ?>
                    <label class="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-30 -->
            <?php for ($category = 6; $category <= 30; $category += 5): ?>
            <div class="style-category">
            <h3 class="category-title">Premium Styles <?php echo esc_html($category); ?>-<?php echo esc_html($category + 4); ?></h3>
                <div class="styles" style="flex-flow: column wrap;">
                    <?php for ($i = $category; $i < $category + 5; $i++): ?>
                    <label class="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>
                        <i class="fas fa-crown" style=" color: gold; "></i>
                    </label>
                    <?php endfor;?>
                </div>
            </div>
            <?php endfor;?>
        </div>
    </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 style="display:flex">
            <div class="team-mxt-shortcode-display">
            <input id="team_mxt_shortcode" value="[team_mxt style='<?php echo esc_attr($current__style); ?>']" readonly />
                <button id="team_mxt_copy_shortcode" type="button">Copy Shortcode with slider</button>
            </div>
            <div class="team-mxt-shortcode-display">
                <input id="team_mxt_members_without_slider_shortcode"
                value="[team_mxt_without_slider style='<?php echo esc_attr($current__style); ?>']" readonly />
                <button id="team_mxt_copy_without_slider_shortcode" type="button">Copy Shortcode without slider</button>
            </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">Select a style then copy the <a style="color:green;">shortcode</a>.</div>
            <div class="message">Paste the shortcode into your desired webpage position.</div>
            <div class="message">Facing problems? Contact <a style="color:green;" href="https://www.webmxt.com/product/team-mxt-plugin" target="_blank">our live chat</a></div>
        </div>
    </div>


</div>
<div class="team-mxt-live-preview" id="team-mxt-live-preview">
</div>
</div>