private function get_wvas_editor_tab_content($product_id, $attributes)
    {
        if (is_array($attributes) && !empty($attributes)) {
            if ($product_id) {
                $product = get_product($product_id);
                $visual_attr = $product ? get_post_meta($product->id, 'visual_attr', true) : array();
            } else {
                $visual_attr = get_option('visual_attr');
            }
            $skins_obj = new WVAS_Skin(false);
            $skins = $skins_obj->get_all();
            $wvas_templates_list = array_keys($skins);
            $skins_configurations = $this->get_skins_configurations();
            ?>
            <table class="wp-list-table widefat fixed wvas_table">
                <thead>
                    <tr>
                        <?php 
            if (!$product_id) {
                ?>
                        <th scope="col" id="cb" class="manage-column column-cb check-column" style=""><label class="screen-reader-text" for="cb-select-all-1">Select All</label><input id="cb-select-all-1" type="checkbox"></th>
                            <?php 
            }
            ?>
                        <th><?php 
            _e('Names', 'wvas');
            ?>
</th>
                        <th style="width: 50%;"><?php 
            _e('Attributes', 'wvas');
            ?>
</th>
                        <th><?php 
            _e('Skin', 'wvas');
            ?>
</th>
                    </tr>
                </thead>
            <?php 
            foreach ($attributes as $attribute_name => $attribute_values) {
                if (!empty($attribute_values)) {
                    $visual_attr_type = '';
                    $attribute_name_sanitized = sanitize_title($attribute_name);
                    if ($visual_attr && isset($visual_attr[$attribute_name_sanitized]['visual_attr_tpl'])) {
                        $skin_file = explode("|", $visual_attr[$attribute_name_sanitized]['visual_attr_tpl']);
                        if (!empty($skin_file[0]) && file_exists(WVA_SKINS_DIR . "/" . $skin_file[0])) {
                            $skin = new WVAS_Skin($visual_attr[$attribute_name_sanitized]['visual_attr_tpl']);
                            $visual_attr_type = $skin->data["Type"];
                        }
                    }
                    ?>
                    <tr>
                        <?php 
                    if (!$product_id) {
                        ?>
                            <th scope="row" class="check-column">
                                <input type="checkbox" name="<?php 
                        echo 'wvas-selections[' . $attribute_name_sanitized . '][active]';
                        ?>
" value="1">
                            </th>
                            <?php 
                    }
                    ?>
                        
                        <td> <strong><?php 
                    echo $key = wc_attribute_label($attribute_name);
                    //ucfirst(str_replace('pa_', '', $attribute_name));
                    ?>
</strong></td>
                        <td class="wvas_editor column-format">
                            <table>
                                <?php 
                    if (is_array($attribute_values) && !empty($attribute_values[0])) {
                        foreach ($attribute_values as $value) {
                            $sanitize_value = $value['val_slug'];
                            //esc_attr( sanitize_title( $value ) );
                            echo '<tr data-field_name = "visual_attr[' . $attribute_name_sanitized . '][' . $sanitize_value . ']" > <td> <strong>' . $value['val_label'] . ': </strong></td> <td class = "visual_attr_selector">';
                            if ($visual_attr_type == "Color") {
                                if (isset($visual_attr[$attribute_name_sanitized][$sanitize_value])) {
                                    echo '<input type="text" class="wvas-color-picker" name = "visual_attr[' . $attribute_name_sanitized . '][' . $sanitize_value . ']" value ="' . $visual_attr[$attribute_name_sanitized][$sanitize_value] . '" />';
                                } else {
                                    echo '<input type="text" class="wvas-color-picker" name = "visual_attr[' . $attribute_name_sanitized . '][' . $sanitize_value . ']" value ="#ffffff" />';
                                }
                            } elseif ($visual_attr_type == "Image") {
                                if (isset($visual_attr[$attribute_name_sanitized][$sanitize_value]) && wp_get_attachment_url($visual_attr[$attribute_name_sanitized][$sanitize_value])) {
                                    echo '<input type="hidden" name="visual_attr[' . $attribute_name_sanitized . '][' . $sanitize_value . ']" value="' . $visual_attr[$attribute_name_sanitized][$sanitize_value] . '"><input type="button" class="button wvas_set_icon" value="' . __('Set', 'wvas') . '" style="display: none;"><span><img class = "wvas_icon" width = "90px" src="' . wp_get_attachment_url($visual_attr[$attribute_name_sanitized][$sanitize_value]) . '" alt="icon" /><input type="button" class="button wvas_remove_icon" value="' . __('Remove', 'wvas') . '"></span>';
                                } else {
                                    echo '<input type="hidden" name="visual_attr[' . $attribute_name_sanitized . '][' . $sanitize_value . ']" ><input type="button" class="button wvas_set_icon" value="' . __('Set', 'wvas') . '"><br />';
                                }
                            } else {
                                //                                            echo'none';
                                //                                            echo '<input type="hidden" name="visual_attr['.$attribute_name_sanitized.']['.$sanitize_value.']" value = "default">';
                            }
                            echo '</td></tr>';
                        }
                    } else {
                        echo '<tr><td>' . __('No attribute values found.', 'wvas') . ' </td></tr>';
                    }
                    ?>
                            </table>
                        </td>
                        <td>
                            <select name="visual_attr[<?php 
                    echo $attribute_name_sanitized;
                    ?>
][visual_attr_tpl]" class="wvas-tpl-selector" >
                                <?php 
                    foreach ($wvas_templates_list as $tpl) {
                        $value = $tpl;
                        $label = $skins[$value]["Name"];
                        $selected_config = isset($visual_attr[$attribute_name_sanitized]['visual_attr_tpl']) && !empty($visual_attr[$attribute_name_sanitized]['visual_attr_tpl']) ? $visual_attr[$attribute_name_sanitized]['visual_attr_tpl'] : '';
                        $default_selected = $selected_config == $value . '|default' ? 'selected = "selected"' : '';
                        echo '<optgroup label = "' . $label . '">';
                        echo '<option value="' . $value . '|default" ' . $default_selected . '>Default</option>';
                        if (isset($skins_configurations[$value]) && !empty($skins_configurations[$value])) {
                            foreach ($skins_configurations[$value] as $config_id => $config_label) {
                                $selected = $selected_config == $value . '|' . $config_id ? 'selected = "selected"' : '';
                                echo '<option value="' . $value . '|' . $config_id . '" ' . $selected . ' .>' . $config_label . '</option>';
                            }
                        }
                        echo '</optgroup>';
                    }
                    ?>
                            </select>
                        </td>
                    </tr>                
                <?php 
                }
            }
            ?>
            </table>
            <?php 
            $img_span = '<span><img class = "wvas_icon" src="img_url" alt="photo" /><input type="button" class="button wvas_remove_icon" value="' . __('Remove', 'wvas') . '"></span>';
            $img_selector = '<input type="button" class="button wvas_set_icon" value="' . __('Set', 'wvas') . '">';
            $table_data = array('color_selector' => "<input type='text' class='wvas-color-picker' name ='field_name' value='#ffffff' />", "img_span" => $img_span, "img_selector" => $img_selector);
            ?>
            <script type="text/javascript">
            var table_data = <?php 
            echo json_encode($table_data);
            ?>
;
            var wvas_templates=<?php 
            echo json_encode($skins);
            ?>
;
            </script> 
            <?php 
        }
    }
 function display_visual_attr()
 {
     $product_id = get_the_ID();
     $is_active = get_post_meta($product_id, "wvas-activate", true);
     if (!$is_active) {
         return;
     }
     wp_enqueue_script('wc-add-to-cart-variation');
     $product = wc_get_product($product_id);
     //        $default_attributes = $product->get_variation_default_attributes();
     //            var_dump($default_attributes);
     //        $available_variations = $product->get_available_variations();
     //            var_dump($attributes);
     $usable_attributes = $this->extract_usable_attributes($product);
     $visual_attributes_meta = get_post_meta($product->id, "visual_attr", true);
     foreach ($usable_attributes as $attribute_name => $attribute_data) {
         $visual_attributes_meta = get_post_meta($product->id, "visual_attr", true);
         $serialized_attribute_name = sanitize_title(strtolower($attribute_name));
         $attribute_metas = $visual_attributes_meta[$serialized_attribute_name];
         $skin = $attribute_metas["visual_attr_tpl"];
         $skin_file = explode("|", $skin);
         if (!empty($skin_file[0]) && file_exists(WVA_SKINS_DIR . "/" . $skin_file[0])) {
             $skin_object = new WVAS_Skin($skin);
             //var_dump($skin_object);
             $html_code = $skin_object->get_skinned_attributes($product, $attribute_name, $attribute_data);
             $html_code .= ' <style type="text/css"> .single-product table.variations{  display: none !important; } </style>';
             $skin_configuration_styles = $skin_object->get_skin_configuration_styles();
             echo $skin_configuration_styles;
             echo $html_code;
         }
     }
     return;
 }
    /**
     * Builds the config design metabox content on the config edition page
     * @return type
     */
    public function get_config_metabox_content()
    {
        //            $tmp_id=  get_the_ID();
        //            if(isset($_GET["base-product"]))
        //                $base_product=$_GET["base-product"];
        //            else
        //                $base_product=  get_post_meta ($tmp_id,"base-product", true);
        //            if(empty($base_product))
        //            {
        //                echo __("No base product found.","wpd");
        //                return;
        //            }
        $skin_configuration_id = get_the_ID();
        $skin_configuration = get_post_meta($skin_configuration_id, 'wvas', TRUE);
        if (empty($skin_configuration)) {
            $skin_configuration = array();
        }
        //var_dump($skin_configuration);
        ob_start();
        ?>
            <div class="wrap">
                <div id="wvas-config-container">
                    <div class="configuration-container ">
                        <div>
                            <label>Skin</label>
                            <?php 
        $skins_obj = new WVAS_Skin(false);
        $skins = $skins_obj->get_all();
        $wvas_templates_list = array_keys($skins);
        $skins_select_array = array();
        foreach ($skins as $key => $value) {
            $skins_select_array[$key] = $value['Name'];
        }
        echo $this->build_html_dropdown('WVAS[skin]', '', '', $skins_select_array, isset($skin_configuration['skin']) ? $skin_configuration['skin'] : '');
        ?>

                        </div>
                    <div >
                    <div id="TabbedPanels1" class="TabbedPanels">

                        <ul class="TabbedPanelsTabGroup">
                            <li class="TabbedPanelsTab " tabindex="0"><?php 
        _e('Container', 'wvas');
        ?>
</li>
                            <li class="TabbedPanelsTab" tabindex="1"><?php 
        _e('Attribute', 'wvas');
        ?>
</li>
                        </ul>
                    <div class="TabbedPanelsContentGroup ">
                        <div class="TabbedPanelsContent">
                            <div id="TabbedPanels2" class="TabbedPanels">

                                <ul class="TabbedPanelsTabGroup">
                                    <li class="TabbedPanelsTab " tabindex="0"><?php 
        _e('Normal', 'wvas');
        ?>
</li>
                                    <li class="TabbedPanelsTab" tabindex="1"><?php 
        _e('Hover', 'wvas');
        ?>
</li>
                                </ul>
                                <div class="TabbedPanelsContentGroup ">
                                            <?php 
        $normal_style = array();
        if (isset($skin_configuration['styles']['container']['normal']) && !empty($skin_configuration['styles']['container']['normal'])) {
            $normal_style = $skin_configuration['styles']['container']['normal'];
        }
        $this->get_skin_configuration_form('container', 'normal', $normal_style);
        $hover_style = array();
        if (isset($skin_configuration['styles']['container']['on-hover']) && !empty($skin_configuration['styles']['container']['on-hover'])) {
            $hover_style = $skin_configuration['styles']['container']['on-hover'];
        }
        $this->get_skin_configuration_form('container', 'on-hover', $hover_style);
        ?>
                                </div>
                            </div>
                        </div>

                        <div class="TabbedPanelsContent">
                            <div id="TabbedPanels3" class="TabbedPanels">

                                <ul class="TabbedPanelsTabGroup">
                                    <li class="TabbedPanelsTab " tabindex="2"><?php 
        _e('Normal', 'wvas');
        ?>
</li>
                                    <li class="TabbedPanelsTab" tabindex="3"><?php 
        _e('Hover', 'wvas');
        ?>
</li>
                                    <li class="TabbedPanelsTab " tabindex="4"><?php 
        _e('Selected', 'wvas');
        ?>
</li>
                                </ul>
                                <div class="TabbedPanelsContentGroup ">
                                        <?php 
        $normal_style2 = array();
        if (isset($skin_configuration['styles']['attribute']['normal']) && !empty($skin_configuration['styles']['attribute']['normal'])) {
            $normal_style2 = $skin_configuration['styles']['attribute']['normal'];
        }
        $this->get_skin_configuration_form('attribute', 'normal', $normal_style2);
        $hover_style_2 = array();
        if (isset($skin_configuration['styles']['attribute']['on-hover']) && !empty($skin_configuration['styles']['attribute']['on-hover'])) {
            $hover_style_2 = $skin_configuration['styles']['attribute']['on-hover'];
        }
        $this->get_skin_configuration_form('attribute', 'on-hover', $hover_style_2);
        $selected_style = array();
        if (isset($skin_configuration['styles']['attribute']['selected']) && !empty($skin_configuration['styles']['attribute']['selected'])) {
            $selected_style = $skin_configuration['styles']['attribute']['selected'];
        }
        $this->get_skin_configuration_form('attribute', 'selected', $selected_style);
        ?>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>  
            
            </div>

        </div>
                </div>
            </div>

            <?php 
        $output = ob_get_contents();
        ob_end_clean();
        echo $output;
    }