/**
     * metabox content for skin selector
     * @param object $contact_form  current wcpf7 object
     */
    public function _wpcf7_skin_meta_box($contact_form)
    {
        //$contact_form = WPCF7_ContactForm::get_instance( $post );    //or call: wpcf7_contact_form($post_id);
        //form enctypes list
        $form_enctypes = array('application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain');
        $properties = $contact_form->get_properties();
        $active_theme = $contact_form->prop('hw_wpcf7_skin');
        //get active skin
        $skin_config = $contact_form->prop('hw_wpcf7skin_setting');
        //skin settings
        if ($active_theme) {
            $skin_config['hash_skin'] = $active_theme;
        }
        //save hash skin
        //get current form template
        $temp = $contact_form->prop('hw_form_template');
        //_print($active_theme);
        //get current storage hook
        $active_hook = $contact_form->prop('hwcf_data_hook');
        //active private skin for wpcf7
        $enable_skin = $contact_form->prop('hw_wpcf7_use_skin');
        //form attributes
        $form_class = $contact_form->prop('hw_form_class_attr');
        $form_id = $contact_form->prop('hw_form_id_attr');
        $form_name = $contact_form->prop('hw_form_name_attr');
        $form_enctype = $contact_form->prop('hw_form_enctype_attr');
        //form enctype
        /**
         * form events
         */
        //redirect page option on submit success
        $page_sent_ok = $contact_form->prop('hw_sent_ok_redirect_page');
        $on_sent_ok_js_event = $contact_form->prop('hw_on_sent_ok_js_event');
        $on_submit_js_event = $contact_form->prop('hw_on_submit_js_event');
        //begin localize script
        wp_enqueue_script('hw-wpcf7-js');
        wp_localize_script('hw-wpcf7-js', 'HW_WPCF7', $this->hwcf7_localize_obj);
        ?>
        <div class="hw-wpcf7-settings">
            <div><strong>Yêu cầu:</strong><br/>
                <ul>
                    <li><strong>Shortcode tạo trường</strong>: sử dụng placeholder làm tiêu đề của trường. vd: [text* your-name placeholder "Field title"]</li>
                    <li><strong>Trường đặc biệt</strong>: Bạn nên tạo thêm 3 trường đặc biệt trong google form:
                        <ul>
                            <?php 
        foreach (self::$special_gfields as $name => $desc) {
            echo '<li><u>' . $name . '</u>:' . $desc . '</li>';
        }
        ?>
                        </ul>
                    </li>
                </ul>
            </div><hr/>
            <!-- #contact form skin -->
            <div>
                <table data-width="" width="100%" cellspacing="5px" cellpadding="5px;">
                    <tr>
                    <td valign="top">
            <h2><?php 
        _e('Giao diện');
        ?>
</h2>
            <?php 
        if (class_exists('HW_SKIN')) {
            ?>
                <p>
                    <label for="use_skin"><strong><?php 
            _e('Kích hoạt giao diện riêng:');
            echo $enable_skin;
            ?>
</strong></label><br/>
                    <input type="checkbox" name="hw_wpcf7_use_skin" id="hw_wpcf7_use_skin" <?php 
            checked($enable_skin == 'on' ? 1 : 0);
            ?>
/>
                </p>
                <!-- skin selector -->
                <p>
                    <label for="hw_wpcf7_skin"><strong><?php 
            _e('Giao diện :');
            ?>
</strong></label><br/>
                    <?php 
            //$this->skin->get_skins_select_tag('hw_wpcf7_skin',$active_theme)
            ?>
                    <select name="hw_wpcf7_skin" id="hw_wpcf7_skin" onchange="">
                        <?php 
            $options = $this->skin->generate_skin_options_tag($active_theme);
            echo $options['options'];
            ?>

                    </select>

                </p>
                <p>
                    <?php 
            //skin condition, skin options
            echo $this->skin->create_total_skin_selector('hw_wpcf7skin_setting', $skin_config, array(), array('show_main_skin' => 0, 'show_config_field' => 1, 'show_condition_field' => 1, 'show_skin_options' => 1));
            ?>
                </p>
            <?php 
        }
        ?>
            <p><!-- list forms template -->
                <label for="hw_form_template"><strong><?php 
        _e('Mẫu form');
        ?>
</strong></label><br/>
                <select name="hw_form_template" id="hw_form_template">
                    <option value="">----Mặc định----</option>
                    <?php 
        foreach (self::$form_templates as $name => $text) {
            ?>
                        <option <?php 
            selected($temp == $name ? 1 : 0);
            ?>
 value="<?php 
            echo $name;
            ?>
"><?php 
            echo $text;
            ?>
</option>
                    <?php 
        }
        ?>
                </select><br/>
                <!-- <a class="button" href="#"><?php 
        _e('Dùng mẫu này');
        ?>
</a><br/> -->
                <span>Chú ý:<em>Các trường form bạn nhập ở trên sẽ bị xóa và thay thế bởi template bạn chọn. Backup trường form & các thộc tính của bạn ở trên, để sửa lại sau khi thay đổi form template mới.</em></span>
            </p>
            <p>
                <label for="hw_form_class_attr"><strong><?php 
        _e('HTML Form class');
        ?>
</strong></label><br/>
                <input type="text" name="hw_form_class_attr" id="hw_form_class_attr" value="<?php 
        echo $form_class;
        ?>
"/>
            </p>
            <p>
                <label for="hw_form_id_attr"><strong><?php 
        _e('HTML Form ID');
        ?>
</strong></label><br/>
                <input type="text" name="hw_form_id_attr" id="hw_form_id_attr" value="<?php 
        echo $form_id;
        ?>
"/>
            </p>
            <p>
                <label for="hw_form_name_attr"><strong><?php 
        _e('HTML Form Name');
        ?>
</strong></label><br/>
                <input type="text" name="hw_form_name_attr" id="hw_form_name_attr" value="<?php 
        echo $form_name;
        ?>
"/>
            </p>
            <p>
                <label for="hw_form_enctype_attr"><strong><?php 
        _e('HTML Form enctype');
        ?>
</strong></label><br/>
                <select name="hw_form_enctype_attr" id="hw_form_enctype_attr">
                    <option value="">---- Chọn ----</option>
                    <?php 
        foreach ($form_enctypes as $enctype) {
            $selected = selected($enctype, $form_enctype, false);
            printf('<option %s value="%s">%s</option>', $selected, $enctype, $enctype);
        }
        ?>

                </select>
            </p>

                    </td>
                        <td valign="top">
                            <!-- skin preview -->
                            <div id="preview_skin">
                                <?php 
        if ($active_theme) {
            //display active skin
            $data = $this->skin->get_skin_data($active_theme);
            ?>
                                    <img src="<?php 
            echo $data['screenshot'];
            ?>
" onError="this.onerror=null;this.src='<?php 
            echo HW_SKIN::get_image('error.jpg');
            ?>
';"/>
                                <?php 
        }
        ?>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- #contact form event -->
            <hr/>
            <div >
                <h2>Sự kiện contact form</h2>
                <p>
                    <label for="hw_sent_ok_redirect_page"><strong><?php 
        _e('Trang thành công');
        ?>
</strong></label><br/>
                    <select name="hw_sent_ok_redirect_page" id="hw_sent_ok_redirect_page">
                        <option value="-1">Trang hiện tại</option>
                        <?php 
        $pages = get_pages();
        $options = array();
        foreach ($pages as $page) {
            //$options[$page->ID] = $page->post_title;
            $selected = $page_sent_ok == $page->ID ? 'selected="selected"' : '';
            printf('<option value="%s" %s>%s</option>', $page->ID, $selected, $page->post_title);
        }
        ?>
                    </select>
                </p>
                <p>
                    <label for="hw_on_sent_ok_js_event"><strong><?php 
        _e('on_sent_ok');
        ?>
</strong></label><br/>
                    <textarea name="hw_on_sent_ok_js_event" id="hw_on_sent_ok_js_event"><?php 
        echo $on_sent_ok_js_event;
        ?>
</textarea><br/>
                    <em>Gọi Javascript khi form submit thành công</em>
                </p>
                <p>
                    <label for="hw_on_submit_js_event"><strong><?php 
        _e('on_submit');
        ?>
</strong></label><br/>
                    <textarea name="hw_on_submit_js_event" id="hw_on_submit_js_event"><?php 
        echo $on_submit_js_event;
        ?>
</textarea><br/>
                    <em>Gọi Javascript sau khi form submit chu dù thất bại.</em>
                </p>

            </div>
            <!-- # contact form DB -->
            <hr/>
            <div>
                <h2><?php 
        _e("Lưu dữ liệu form");
        ?>
</h2>
                <p>
                    <!-- enable send email via google app -->
                    <input type="checkbox" name="enable_email_by_gapp" id="enable_email_by_gapp" <?php 
        checked($contact_form->prop('enable_email_by_gapp') == 'on' ? 1 : 0);
        ?>
/>
                    <label for="enable_email_by_gapp"><?php 
        _e('Kích hoạt gửi email bằng google app');
        ?>
</label><br/>
                    <span><em>Tùy chọn này sẽ tắt chế độ gửi mail mặc định trong Contact Form.</em></span>
                </p>
                <p>
                    <label for="hwcf_data_hook"><strong><?php 
        _e('Web hook');
        ?>
</strong></label><br/>
                    <select name="hwcf_data_hook" id="hwcf_data_hook" onchange="HW_WPCF7.wpcf_hookdata_change_event(this)">
                        <?php 
        foreach ($this->external_storages_hook as $hook => $display) {
            ?>
                            <option <?php 
            selected($hook == $active_hook ? 1 : 0);
            ?>
 value="<?php 
            echo $hook;
            ?>
"><?php 
            echo $display;
            ?>
</option>
                        <?php 
        }
        ?>
                    </select>
                </p>
                <div id="hook_google_form" class="hwcf-hidden"><!-- google form ID -->
                    <p>
                        <label for="hw_gformID"><strong><?php 
        _e('Google form ID/URL');
        ?>
</strong></label><br/>
                        <input type="text" name="hw_gformID" id="hw_gformID" value="<?php 
        echo $contact_form->prop('hw_gformID');
        ?>
"/><br/>
                        <em>Chú ý:
                            <ul>
                                <li>Điền đầy đủ URL nếu có dạng: https://docs.google.com/a/{account}/forms/d/{ID}/viewform</li>
                                <li>Để theme classic mặc định của form để hoạt động đúng.</li>
                            </ul> </em>
                    </p>
                    <p>
                        <label for="hw_default_gform">
                        <input type="checkbox" title="Chú ý: Tùy chọn này được reset sau khi kích hoạt." class="tooltip" name="hw_default_gform" id="hw_default_gform" <?php 
        checked($contact_form->prop('hw_default_gform'), 'on');
        ?>
/><strong><?php 
        _e('Kích hoạt mặc định');
        ?>
</strong>
                        </label><br/>
                        <em>Chú ý: Tùy chọn này được reset sau khi kích hoạt.</em>
                    </p>
                    <div>
                        <a class="button" id="grab_gform_fields"><?php 
        _e('Lấy fields');
        ?>
</a>|
                        <!--
          <a class="button" target="_blank" href="<?php 
        echo self::get_gform_response_link($contact_form->prop('hw_gformID'));
        ?>
" id="gform_response"><?php 
        _e('Xem kết quả');
        ?>
</a>|
           -->
                    </div>
                    <br/>
                    <span><em>Dùng để lưu trữ dữ liệu gửi đi từ người dùng trên website. Chú ý: mỗi shortcode tạo trường contact form khai báo thêm thuộc tính để gán vào mỗi field của google form. VD: <strong>[text* your-name gfield:489yiertrfg]</strong></em></span>
                    <p  class="" id="hw_parse_gform_result"></p>
                </div>
                <div id="hook_url" class="hwcf-hidden">
                    <label for="hook_url"><strong><?php 
        _e('Hook URL');
        ?>
</strong></label>
                    <input type="text"  id="hook_url" name="hook_url" value="<?php 
        echo $contact_form->prop('hook_url');
        ?>
"/>
                </div>

            </div>
            <hr/>
            <div >
                <h2><?php 
        _e("Cài đặt khác");
        ?>
</h2>
                <!-- custom css -->
                <p>
                    <label for="hw_custom_css"><strong><?php 
        _e('Tùy chỉnh CSS');
        ?>
</strong></label><br/>
                    <textarea id="hw_custom_css" name="hw_custom_css" cols="100" rows="8"><?php 
        echo esc_textarea($contact_form->prop('hw_custom_css'));
        ?>
</textarea><br/>
                    <span><strong>Lưu ý</strong>: biến <em>{form_css}</em> đại diện cho truy cập class từ form này. Nên dùng để tránh xung đột CSS với contact form 7 khác.</span>
                </p>
                <p>
                    <label><strong>Gửi dữ liệu Form vào SMS</strong></label><br/>
                    Xem <a href="#" target="_blank">hướng dẫn gửi SMS từ form</a> sau khi người dùng nhấn nút gửi nội dung trên Contact Form.
                </p>
            </div>
        </div>
        <script>

        </script>
        <br class="clear" />
    <?php 
    }