<?php

/**
 * Yt_EVL_Settings_Api_Keys
 * 
 * Supporting for managing 3rd party API keys
 * 
 * @package Yt_Evolution
 * @subpackage Classes
 * @author  Chris Derenberger <https://www.ytevolution.com>
 * @copyright Copyright 2020, YTEVOLUTION®
 * @link https://www.ytevolution.com
 * @since 1.0.0
 */

class Yt_EVL_Settings_Api_Keys
{

    public static $instance;

    public static function init()
    {
        if (is_null(self::$instance))
            self::$instance = new Yt_EVL_Settings_Api_Keys();
        return self::$instance;
    }


    // Constructor    
    function __construct()
    {

        // Register YouTube API Key Settings
        add_action('admin_init', array($this, 'register_youtube_api_key_settings'));

        // Register Vimeo API Key Settings
        add_action('admin_init', array($this, 'register_vimeo_api_key_settings'));

        // Register Twitch API Key Settings
        add_action('admin_init', array($this, 'register_twitch_api_key_settings'));
        add_action('wp_ajax_update_api_keys', array($this, 'yt_update_api_keys'));
        add_action('wp_ajax_nopriv_update_api_keys', array($this, 'yt_update_api_keys'));
    }

    function yt_update_api_keys()
    {


        global $wpdb;
        $keytable = $wpdb->prefix . 'yt_apikeys';

        $keylist = filter_var($_POST['key-list'], FILTER_SANITIZE_STRING);
        $keylist = explode(',', $keylist);
        $today = current_time('Y-m-d');
        $response = ['error' => ''];
        //      $credentialsPath = YT_EVOLUTION_DIR. '/token/yt.json';
        //      $response['tube_vc_youtube_import_transcript'] = $_POST['tube_vc_youtube_import_transcript'];
        //      
        //      
        //      if($_POST['tube_vc_youtube_import_transcript'] == 1){
        //        if (! file_exists($credentialsPath)) {
        //           $response['error'] = 'To import transcript Please connect with Youtube API First';
        //        echo json_encode($response);
        //      wp_die();
        //           
        //        }
        //      }
        $wpdb->query("TRUNCATE TABLE `$keytable`");
        if (!empty($keylist)) {
            $active = ( isset($_POST['ytactive'] )? filter_var($_POST['ytactive'], FILTER_SANITIZE_STRING): '0' ) ;


            if (!$active) $active = 0;

            foreach ($keylist as $key) {
                $used = 0;
                $ytapikey = filter_var($_POST['ytapikey' . $key], FILTER_SANITIZE_STRING);
                if ($active == $key) {
                    $used = 1;
                    update_option('tube_vc_youtube_api_key', $ytapikey);
                }
                $data = array('today' => $today, 'used' => $used, 'apikey' => $ytapikey, 'status' => 1);
                $format = array('%s', '%d', '%s', '%d');


                $wpdb->insert($keytable, $data, $format);
            }
        }
        $it = get_option('tube_vc_youtube_import_transcript');
        $tube_vc_youtube_import_transcript = (isset($_POST['tube_vc_youtube_import_transcript'])? filter_var($_POST['tube_vc_youtube_import_transcript'], FILTER_SANITIZE_STRING): '' ) ;
        if ($it !== FALSE) {
            $response['value'] = $it;
            update_option('tube_vc_youtube_import_transcript', $tube_vc_youtube_import_transcript);
        } else {
            add_option('tube_vc_youtube_import_transcript', $tube_vc_youtube_import_transcript);
            $response['value'] = $it;
        }

        echo json_encode($response);
        wp_die();
    }


    // Show the API Key Settings page
    function render_options_page_api_settings()
    {

        // get active tab, or default to youtube-api    
        $active_tab = isset($_GET['tab']) ? sanitize_text_field($_GET['tab']) : 'youtube-api';

        $url = remove_query_arg('settings-updated'); ?>

        <div class="wrap">

            <div class="header_section"><h1>Your Youtube <span>API KEY</span></h1></div>
            <?php settings_errors(); ?>

            <form id="ytapiform" action='options.php' method='post' class="section-divider">

                <?php

                //            global $tube_video_curator; 
                //            $youtubevideos =  $tube_video_curator::$tube_youtube_videos;
                //           $youtube = $tube_video_curator::$tube_youtube_videos -> getClient();
                //        
                //if($youtube){
                //////             
                //            $captions = $youtube->captions->listCaptions("snippet", 'JQVKPy7Qg78');
                //echo '<pre>';
                //print_r($captions);
                //echo '</pre>';

                //  $htmlBody = "<h3>Video Caption Tracks</h3><ul>";
                //  foreach ($captions->items as $caption) {
                //  
                //try{
                //      $captionResouce = $youtube->captions->download($caption->id, array(
                //        'tfmt' => "srt",
                //        'alt' => "media"
                //    ));
                //      
                //      
                //      
                //      
                //      
                //      
                //      
                //
                //    $htmlBody .= "";
                //    $htmlBody .= sprintf('<li>%s</li>',
                //      $captionResouce->getBody()->getContents());
                //} catch (Google_Service_Exception $e) {
                //   $em = json_decode($e->getMessage()) ;
                //    echo '<pre>';
                //print_r($e->getCode());
                //print_r($em->error->errors);
                //$limiterror = FALSE;
                //foreach($em->error->errors as $error){
                //    if($error->reason == 'quotaExceeded'){
                //        $limiterror = TRUE;
                //    }
                //}
                //echo '</pre>';
                //      $htmlBody .= sprintf('<p>A service error occurred: <code>%s</code></p>',
                //          htmlspecialchars($e->getMessage()));
                //    }
                //  }
                //  $htmlBody .= '</ul>';
                //}
                //  print $htmlBody;

                settings_fields('tube_vc_youtube_api_settings');
                do_settings_sections('tube_vc_youtube_api_settings');
                //submit_button(__('Save API Key', 'yt-revolution'));
                $this->show_youtube_api_help();
                ?>
                <input type="hidden" name="action" value="update_api_keys" />
            </form>

        </div>
    <?php

    }


    // Register YouTube API Key Settings        
    function register_youtube_api_key_settings()
    {

        register_setting(
            'tube_vc_youtube_api_settings',
            'tube_vc_youtube_api_key'
        );

        register_setting(
            'tube_vc_youtube_api_settings',
            'tube_vc_youtube_import_transcript'
        );



        add_settings_section(
            'tube_vc_youtube_api_settings_section',
            '<br>', // blank title 
            array($this, 'show_youtube_api_section'),
            'tube_vc_youtube_api_settings'
        );


        add_settings_field(
            'tube_vc_youtube_api_key',
            __('API Key', 'yt-revolution'),
            array($this, 'render_youtube_api_key_setting'),
            'tube_vc_youtube_api_settings',
            'tube_vc_youtube_api_settings_section'
        );

        //  add_settings_field( 
        //   'tube_vc_youtube_import_transcript', 
        //   __( 'Import Transcript', 'yt-revolution' ), 
        //   array( $this, 'render_youtube_import_transcript_setting'), 
        //   'tube_vc_youtube_api_settings', 
        //   'tube_vc_youtube_api_settings_section' 
        // );

    }


    function render_youtube_import_transcript_setting()
    {
        $player_option = 'tube_vc_youtube_import_transcript';
        $player_option_setting = get_option($player_option);
        $player_option_name = __('<strong>Import Transcript :</strong> Import Transcript/Subtitles ', 'yt-revolution');
    ?>
        <label for="<?php echo esc_attr($player_option); ?>">
            <input type="checkbox" id="<?php echo esc_attr($player_option); ?>" name="<?php echo esc_attr($player_option); ?>" value="1" <?php checked($player_option_setting, true); ?> /> <?php echo esc_html($player_option_name); ?>
        </label>
    <?php
    }


    // Show the heading for the YouTube API section (Not used)
    function show_youtube_api_section()
    {
        echo '<div style="justify-content: space-between;" class="criteria-row clearfix">
        <div class="inline">
            <h2><b>Enter your YouTube API keys below.</b></h2>
        </div>
        <div class="inline">
            <div id="optionContainer">
                <div class="criteria-option-top clearfull inline">
                    <a class="add" href="javascript:void(0);" onclick="jsAdvanceSearch.action.addCriteria();">
                        <span class="icon-plus icon-white">+ &nbsp;Add</span></a>
                </div>
            </div>
        </div>
        </div>';
    }


    // Display the YouTube API Help
    function show_youtube_api_help()
    { ?>
        <!--
        <hr />
        <p>
          <button class="settings-help-toggle api-help-toggle"><i class="dashicons dashicons-editor-help"></i> <?php //_e('How to get an API Key', 'yt-revolution') ?></button> 
        </p>
        -->

        <div class="card settings-help hidden333" style="margin-top:0; padding:1em;">

            <h1 style="margin-top:0; padding-top:0;">
                <?php _e('Help &amp; FAQs'); ?>
            </h1>

            <hr />

            <h2>
                <?php _e('What&rsquo;s a YouTube API Key?'); ?>
            </h2>
            <p>
                <?php _e('A YouTube API Key is a unique code or &#8220;key&#8221; that you get from Google. This is required to get data directly from YouTube, so you quickly search for channels &amp; playlists, and create YouTube content for your site.'); ?>
            </p>


            <h2>
                <?php _e('How to get your YouTube API Key?'); ?>
            </h2>
            <!-- https://developers.google.com/youtube/v3/getting-started -->
            <?php
            $this->show_youtube_api_howto();
            ?>

        </div>
    <?php
    }



    // Display the How To content for the YouTube API   
    function show_youtube_api_howto()
    { ?>
        <ul class="api-help-counter clearfix">
            <li>

                <div class="help-step">

                    <p style=" font-size:1.125em;">
                        <strong><?php _e('Get a Google Account', 'yt-revolution'); ?></strong><br />
                        <?php // _e('You&rsquo;ll need a Google Account to request a YouTube API key.', 'yt-revolution'); 
                        ?>


                    </p>

                    <ul style="list-style: disc; padding-left:1.75em;">
                        <li>
                            <?php _e('Already have a Google Account? Go on to step 2.', 'yt-revolution'); ?>
                        </li>
                        <li>
                            <?php _e('Don&rsquo;t have a Google Account?', 'yt-revolution'); ?>
                            <a target="_blank" href="https://www.google.com/accounts/NewAccount"><?php _e('Create a new Google account', 'yt-revolution'); ?></a>.
                        </li>
                    </ul>

                </div>
            </li>

            <li>
                <div class="help-step">
                    <p style=" font-size:1.125em;">
                        <strong><?php _e('Create a Project in the Google Developers Console', 'yt-revolution'); ?></strong><br />
                        <?php // _e('Next you&rsquo;ll need to create a &#8220;project&#8221; in the Google Developers Console. Here&rsquo;s how&hellip;', 'yt-revolution') 
                        ?>
                    </p>
                    <ul style="list-style: disc; padding-left:1.75em;">

                        <li>
                            <a target="_blank" href="https://console.developers.google.com/projectselector/apis/api/youtube/overview"><?php _e('Click here to create your project', 'yt-revolution') ?></a>.

                        </li>
                        <li>
                            <?php _e('You&rsquo;ll need to log in to your Google account if you&rsquo;re not already logged in.', 'yt-revolution'); ?>
                        </li>
                        <li>
                            <?php _e('Give your project a name, and optionally a custom ID.', 'yt-revolution'); ?>
                        </li>
                        <li>
                            <?php _e('Choose your email opt-in settings, then review the terms.', 'yt-revolution'); ?>
                        </li>
                        <li>
                            <?php _e('Click the &#8220;Create&#8221; button.', 'yt-revolution'); ?>
                        </li>
                    </ul>
                </div>


            </li>

            <li>
                <div class="help-step">
                    <p style=" font-size:1.125em;">
                        <strong><?php _e('Enable the YouTube API for Your Project', 'yt-revolution'); ?></strong><br />
                        <?php //_e('Now, you are ready to &#8220;enable&#8221; the YouTube API&hellip; for your project', 'yt-revolution') 
                        ?>
                    </p>

                    <ul style="list-style: disc; padding-left:1.75em;">

                        <li>
                            <?php _e('First, click the &#8220;Enable&#8221; button.', 'yt-revolution') ?>
                        </li>

                        <li>
                            <?php _e('Next, click the &#8220;Go to Credentials&#8221; button.', 'yt-revolution') ?>
                        </li>
                    </ul>

                </div>
            </li>


            <li>
                <div class="help-step">
                    <p style=" font-size:1.125em;">
                        <strong><?php _e('Add Credentials / Get Your API Key', 'yt-revolution'); ?></strong><br />
                        <?php // _e('Almost there! Here&rsquo;s how to add credentials to your project:', 'yt-revolution') 
                        ?>
                    </p>

                    <ul style="list-style: disc; padding-left:1.75em;">

                        <li>
                            <?php _e('First, make sure &#8220;YouTube Data API v3&#8221; is selected in the &#8220;Which API are you using?&#8221; dropdown.', 'yt-revolution') ?>
                        </li>

                        <li>
                            <?php _e('Next, choose &#8220;Web Server&#8221; in the &#8220;Where will you be calling the API from?&#8221; dropdown.', 'yt-revolution') ?>
                        </li>

                        <li>
                            <?php _e('Now, choose &#8220;Public data&#8221; for the &#8220;What data will you be accessing?&#8221; question.', 'yt-revolution') ?>
                        </li>

                        <li>
                            <?php _e('Click the &#8220;What credentials do I need&#8221; button.', 'yt-revolution') ?>
                        </li>

                        <li>
                            <?php _e('Optionally, give your API key a name and add any specific IP addresses to allow.', 'yt-revolution') ?>
                        </li>

                        <li>
                            <?php _e('Finally, click the &#8220;Create API key&#8221; button.', 'yt-revolution') ?>
                        </li>


                </div>
            </li>




            <li>
                <div class="help-step">
                    <p style=" font-size:1.125em;">
                        <strong><?php _e('Save Your Key Here', 'yt-revolution'); ?></strong><br />
                        <?php // _e('Almost there! Here&rsquo;s how to add credentials to your project:', 'yt-revolution') 
                        ?>
                    </p>

                    <ul style="list-style: disc; padding-left:1.75em;">

                        <li>
                            <?php _e('Copy your new API Key from Google.', 'yt-revolution') ?>
                        </li>

                        <li>
                            <?php _e('Come back to this page and paste the API key into the form field here.', 'yt-revolution') ?>
                        </li>

                        <li>
                            <?php _e('Finally, click &#8220;Save API Key&#8221; button.', 'yt-revolution') ?>
                        </li>

                    </ul>

                </div>
            </li>

            </ol>
        <?php
    }


    // Show theh YouTube API Key Setting
    function render_youtube_api_key_setting2()
    {

        $youtube_api_key = get_option('tube_vc_youtube_api_key');
        ?>
            <input type="text" name="tube_vc_youtube_api_key" value="<?php echo esc_attr($youtube_api_key); ?>" class="regular-text ltr">
        <?php

    }

    function render_youtube_api_key_setting()
    {

        global $wpdb;

        $apikeys = $wpdb->get_results("SELECT * FROM  {$wpdb->prefix}yt_apikeys ");


        $apikeysjson = json_encode($apikeys);
        $default_key = get_option('tube_vc_youtube_api_key');

        if ($apikeysjson == '{') $apikeysjson = '';
        ?>

            <div class="form-inline" id="criteriaContainer">
            </div>

            <div id="divContactFrm"></div>
            <script>
                js = jQuery.noConflict();
                jsAdvanceSearch = {
                    action: {
                        keynum: 0,
                        knum: 0,
                        addCriteria: function() {
                            var criteria = "";
                            var keynum = jsAdvanceSearch.action.keynum;
                            criteria += '<div id="criteria' + keynum + '" class="criteria-row clearfix">';

                            criteria += '<div class="inline" id="dtfield' + keynum + '">';


                            criteria += '<div class="input-group">';

                            criteria += '<input name="ytapikey' + keynum + '" type="text" class="form-control yvlinkinput" id="ytapikey' + keynum + '" placeholder="Youtube API Key">';

                            criteria += '</div>';

                            criteria += '</div>';

                            // criteria +='<div class="inline" id="urlfield'+keynum+'">';


                            //                                        criteria +=  '<div class="input-group">';
                            //                                          criteria +=  '<label for="ytactive'+keynum+'">';

                            //                                           criteria += '<input name="ytactive" type="radio" value="'+keynum+'" class="form-control yvlinkinput" id="ytactive'+keynum+'" >';
                            //                                        criteria += 'Active</label>';
                            //                                        criteria += '</div>';

                            // criteria +='</div>';

                            criteria += '<div class="inline" id="removelink' + keynum + '" class="delete-row">';
                            criteria += '<a class="remove" href="javascript:void(0);" onclick="jsAdvanceSearch.action.removeCriteria(\'' + keynum + '\');">';

                            criteria += '<span class="icon-minus icon-white">Remove</span>';
                            criteria += '</a>';
                            criteria += '</div>';

                            criteria += '<div style="clear:both"></div>';
                            criteria += '</div>';

                            var comma = '';
                            if (js('#key-list').val() != "") {
                                var comma = ',';
                            }
                            js('#key-list').val(js('#key-list').val() + comma + keynum);
                            js('#criteriaContainer').append(criteria);
                            js('#ytapikey' + keynum).focus();


                            jsAdvanceSearch.action.keynum++;
                            js('.yvlinkinput').on('input', function(e) {
                                //   jsAdvanceSearch.action.setLinks();
                            });
                        },

                        removeCriteria: function(id) {
                            var inputs = [];
                            var _id, _id2;
                            _id = js('#key-list').val();
                            _id2 = _id.split(',');

                            js(_id2).each(function() {
                                if (this != id && this != "") {
                                    // re-populate
                                    inputs.push(this);
                                }
                            });

                            js("#criteria" + id).remove();
                            js('#key-list').val(inputs.join(','));
                            //     jsAdvanceSearch.action.setLinks();
                        },

                        setLinks: function() {
                            var _id, _id2;
                            var yvdt = [];
                            var yvurl = [];
                            var links = {};
                            _id = js('#key-list').val();
                            _id2 = _id.split(',');
                            if (_id2) {}
                            js(_id2).each(function() {

                                // re-populate
                                yvdt.push(js('#yvdt' + this).val());
                                yvurl.push(js('#yvurl' + this).val());
                            });

                            links.dt = yvdt;
                            links.url = yvurl;
                            var myObj = JSON.stringify(links);
                            js('#tube_vc_default_links').val(myObj);
                        }

                    }
                }


                js(document).ready(function() {
                    var searchHistory;

                    var default_key = '<?php echo esc_html($default_key); ?>';

                    <?php if (!empty($apikeysjson)) { ?>
                        searchHistory = <?php echo filter_var($apikeysjson); ?>;
                    <?php } else { ?>
                        searchHistory = '';
                    <?php } ?>


                    if (searchHistory != '') {

                        var num;
                        searchHistory.forEach(function(item, index) {
                            num = jsAdvanceSearch.action.keynum;
                            jsAdvanceSearch.action.addCriteria();
                            js('#ytapikey' + index).val(item.apikey);
                            if (default_key == item.apikey) {
                                js('#ytactive' + index).prop('checked', true);

                            }


                        })


                    } else {
                        num = jsAdvanceSearch.action.keynum;
                        jsAdvanceSearch.action.addCriteria();

                    }

                });
            </script>
            <input type="hidden" id="key-list" name="key-list" value="" />
            <input type="submit" name="submit" id="submit" class="button button-primary" value="Save API Key">
        <?php
    }



    // Register the Vimeo API Key Settings
    function register_vimeo_api_key_settings()
    { //register our settings


        register_setting(
            'tube_vc_vimeo_api_settings',
            'tube_vc_vimeo_client_id'
        );

        register_setting(
            'tube_vc_vimeo_api_settings',
            'tube_vc_vimeo_client_secret'
        );

        register_setting(
            'tube_vc_vimeo_api_settings',
            'tube_vc_vimeo_access_token'
        );




        add_settings_section(
            'tube_vc_vimeo_api_settings_section',
            'Enter your Vimeo Client ID and Client Secret below.',
            array($this, 'show_vimeo_api_section'),
            'tube_vc_vimeo_api_settings'
        );


        add_settings_field(
            'tube_vc_vimeo_client_id',
            __('Client ID', 'yt-revolution'),
            array($this, 'render_vimeo_client_id_setting'),
            'tube_vc_vimeo_api_settings',
            'tube_vc_vimeo_api_settings_section'
        );

        add_settings_field(
            'tube_vc_vimeo_client_secret',
            __('Client Secret', 'yt-revolution'),
            array($this, 'render_vimeo_client_secret_setting'),
            'tube_vc_vimeo_api_settings',
            'tube_vc_vimeo_api_settings_section'
        );


        $vimeo_access_token = get_option('tube_vc_vimeo_access_token');


        if ($vimeo_access_token) :
            add_settings_field(
                'tube_vc_vimeo_access_token',
                __('Access Token', 'yt-revolution'),
                array($this, 'render_vimeo_access_token_setting'),
                'tube_vc_vimeo_api_settings',
                'tube_vc_vimeo_api_settings_section'
            );
        endif;
    }

    // Show the heading for the Vimeo API section (Not used)
    function show_vimeo_api_section()
    {
    }


    // Show the Vimeo Client ID Setting
    function render_vimeo_client_id_setting()
    {

        $vimeo_client_id = get_option('tube_vc_vimeo_client_id');

        ?>
            <input type="text" name="tube_vc_vimeo_client_id" value="<?php echo esc_attr($vimeo_client_id); ?>" class="regular-text ltr">
        <?php

    }


    // Show the Vimeo Client Secret Setting
    function render_vimeo_client_secret_setting()
    {

        $vimeo_client_secret = get_option('tube_vc_vimeo_client_secret');

        ?>
            <input type="text" name="tube_vc_vimeo_client_secret" value="<?php echo esc_attr($vimeo_client_secret); ?>" class="regular-text ltr">
        <?php

    }

    // Show the Vimeo Access Token Setting
    function render_vimeo_access_token_setting()
    {

        $vimeo_access_token = get_option('tube_vc_vimeo_access_token');
        ?>
            <input type="text" name="tube_vc_vimeo_access_token" value="<?php echo esc_attr($vimeo_access_token); ?>" class="regular-text ltr" disabled="disabled">
            <p class="description">Your access token is set automatically.</p>
        <?php
    }


    // Display the Vimeo API Help
    function show_vimeo_api_help()
    { ?>
        <!-- 
        <hr />
        <p>
          <button class="settings-help-toggle api-help-toggle">
            <i class="dashicons dashicons-editor-help"></i> <?php _e('How to get an API Key', 'yt-revolution') ?>
          </button> 
        </p>
        -->

        <div class="card settings-help hidden333" style="margin-top:0; padding:1em;">

            <h1 style="margin-top:0; padding-top:0;">
                <?php _e('Help &amp; FAQs'); ?>
            </h1>

            <hr />

            <h2>
                <?php _e('What&rsquo;s a Vimeo Client ID and Secret?'); ?>
            </h2>

            <p>
                <?php _e('The Client ID and Secret are a set of unique codes or &#8220;keys&#8221; that you get from Vimeo. These are required to get data directly from Vimeo, so you quickly search for users &amp; channels, and create Vimeo content for your site.'); ?>
            </p>


            <h2>
                <?php _e('How to get your Vimeo Client ID and Secret?'); ?>
            </h2>
            <!-- https://developers.google.com/youtube/v3/getting-started -->

            <?php
            $this->show_vimeo_api_howto();
            ?>

        </div>
        <?php
    }

    // Display the How To content for the Vimeo API   
    function show_vimeo_api_howto()
    { ?>

      <ul class="api-help-counter clearfix">
          <li>

              <div class="help-step">

                  <p style=" font-size:1.125em;">
                      <strong><?php _e('Get a Vimeo Account', 'yt-revolution'); ?></strong>
                  </p>

                  <ul style="list-style: disc; padding-left:1.75em;">
                      <li>
                          <?php _e('Already have a Vimeo Account? Go on to step 2.', 'yt-revolution'); ?>
                      </li>
                      <li>
                          <?php _e('Don&rsquo;t have a Vimeo Account?', 'yt-revolution'); ?>
                          <a href="https://vimeo.com/join" target="_blank"><?php _e('Create a new Vimeo account', 'yt-revolution'); ?></a>.
                      </li>
                  </ul>

              </div>
          </li>

          <li>
              <div class="help-step">
                  <p style=" font-size:1.125em;">
                      <strong><?php _e('Create an Application in the Vimeo Developers Area', 'yt-revolution'); ?></strong>
                  </p>
                  <ul style="list-style: disc; padding-left:1.75em;">

                      <li>
                          <a href="https://developer.vimeo.com/apps/new" target="_blank"><?php _e('Click here to create your application', 'yt-revolution') ?></a>.
                      </li>
                      <li>
                          <?php _e('You&rsquo;ll need to log in to your Vimeo account if you&rsquo;re not already logged in.', 'yt-revolution'); ?>
                      </li>
                      <li>
                          <?php _e('Give your application a name and description, enter your website URL, and optionally a logo. You do NOT need to enter an App Callback URL.', 'yt-revolution'); ?>
                      </li>
                      <li>
                          <?php _e('Review the terms.', 'yt-revolution'); ?>
                      </li>
                      <li>
                          <?php _e('Click the &#8220;Create app&#8221; button.', 'yt-revolution'); ?>
                      </li>
                  </ul>
              </div>


          </li>


          <li>
              <div class="help-step">
                  <p style=" font-size:1.125em;">
                      <strong><?php _e('Get Your API Key', 'yt-revolution'); ?></strong>
                  </p>

                  <ul style="list-style: disc; padding-left:1.75em;">

                      <li>
                          <?php _e('From the Details page for your App, click the &#8220;Authentication&#8221; tab.', 'yt-revolution') ?>
                      </li>

                      <li>
                          <?php _e('There you will see your Client Identifier and Client Secret.', 'yt-revolution') ?>
                      </li>


              </div>
          </li>




          <li>
              <div class="help-step">
                  <p style=" font-size:1.125em;">
                      <strong><?php _e('Save Your Keys Here', 'yt-revolution'); ?></strong>
                  </p>

                  <ul style="list-style: disc; padding-left:1.75em;">

                      <li>
                          <?php _e('Copy your new Client Identifier and Client Secret from Vimeo.', 'yt-revolution') ?>
                      </li>

                      <li>
                          <?php _e('Come back to this page and paste the values into the corresponding form fields here.', 'yt-revolution') ?>
                      </li>

                      <li>
                          <?php _e('Finally, click the &#8220;Save ID &amp; Secret&#8221; button', 'yt-revolution') ?>
                      </li>

                  </ul>

              </div>
          </li>

      </ul>
      <?php
    }


    // Register the Twitch API Key Settings
    function register_twitch_api_key_settings()
    { //register our settings


        register_setting(
            'tube_vc_twitch_api_settings',
            'tube_vc_twitch_client_id'
        );

        register_setting(
            'tube_vc_twitch_api_settings',
            'tube_vc_twitch_client_secret'
        );



        add_settings_section(
            'tube_vc_twitch_api_settings_section',
            'Enter your Twitch Client ID and Client Secret below.',
            array($this, 'show_twitch_api_section'),
            'tube_vc_twitch_api_settings'
        );


        add_settings_field(
            'tube_vc_twitch_client_id',
            __('Client ID', 'yt-revolution'),
            array($this, 'render_twitch_client_id_setting'),
            'tube_vc_twitch_api_settings',
            'tube_vc_twitch_api_settings_section'
        );

        add_settings_field(
            'tube_vc_twitch_client_secret',
            __('Client Secret', 'yt-revolution'),
            array($this, 'render_twitch_client_secret_setting'),
            'tube_vc_twitch_api_settings',
            'tube_vc_twitch_api_settings_section'
        );
    }

    // Show the heading for the Twitch API section (Not used)
    function show_twitch_api_section()
    {
    }


    // Show the Twitch Client ID Setting
    function render_twitch_client_id_setting()
    {

        $twitch_client_id = get_option('tube_vc_twitch_client_id');

        ?>
            <input type="text" name="tube_vc_twitch_client_id" value="<?php echo esc_attr($twitch_client_id); ?>" class="regular-text ltr">
        <?php

    }


    // Show the Twitch Client Secret Setting
    function render_twitch_client_secret_setting()
    {

        $twitch_client_secret = get_option('tube_vc_twitch_client_secret');

        ?>
            <input type="text" name="tube_vc_twitch_client_secret" value="<?php echo esc_attr($twitch_client_secret); ?>" class="regular-text ltr">
        <?php

    }

    // Display the Twitch API Help
    function show_twitch_api_help()
    { ?>
      <!--
      <hr />
      <p>
        <button class="settings-help-toggle api-help-toggle">
          <i class="dashicons dashicons-editor-help"></i> <?php //_e('How to get an API Key', 'yt-revolution') ?>
        </button> 
      </p>
      -->

            <div class="card settings-help hidden333" style="margin-top:0; padding:1em;">

                <h1 style="margin-top:0; padding-top:0;">
                    <?php _e('Help &amp; FAQs'); ?>
                </h1>

                <hr />

                <h2>
                    <?php _e('What&rsquo;s a Twitch Client ID and Secret?'); ?>
                </h2>

                <p>
                    <?php _e('The Client ID and Secret are a set of unique codes or &#8220;keys&#8221; that you get from Twitch. These are required to get data directly from Twitch, so you quickly search for channels &amp; videos, and create Twitch content for your site.'); ?> <a target="_blank" href="http://dev.twitch.tv/"><?php _e('Learn more at the Twitch Developers site', 'yt-revolution'); ?></a>.
                </p>


                <h2>
                    <?php _e('How to get a Twitch Client ID and Secret?'); ?>
                </h2>

                <?php
                $this->show_twitch_api_howto();
                ?>

            </div>
        <?php
    }

    // Display the How To content for the Twitch API   
    function show_twitch_api_howto()
    { ?>
        <ul class="api-help-counter clearfix">
            <li>
              <div class="help-step">
                  <p style=" font-size:1.125em;">
                      <strong><?php _e('Get a Twitch Account', 'yt-revolution'); ?></strong><br />


                  </p>

                  <ul style="list-style: disc; padding-left:1.75em;">
                      <li>
                          <?php _e('Already have a Twitch Account? Go on to step 2.', 'yt-revolution'); ?>
                      </li>
                      <li>
                          <?php _e('Don&rsquo;t have a Twitch Account?', 'yt-revolution'); ?>
                          <a target="_blank" href="https://www.twitch.tv/signup"><?php _e('Create a new Twitch account', 'yt-revolution'); ?></a>.
                      </li>
                      <li>
                          <?php _e('Be sure to verify your email address.', 'yt-revolution'); ?>
                      </li>
                  </ul>

              </div>
            </li>


            <li>

                <div class="help-step">
                    <p style=" font-size:1.125em;">
                        <strong><?php _e('Create an Application in Your Twitch Account', 'yt-revolution'); ?></strong>
                    </p>
                    <ul style="list-style: disc; padding-left:1.75em;">

                        <li>
                            <a href="https://www.twitch.tv/kraken/oauth2/clients/new" target="_blank"><?php _e('Click here to create your application', 'yt-revolution') ?></a>.
                        </li>
                        <li>
                            <?php _e('You&rsquo;ll need to log in to your Twitch account if you&rsquo;re not already logged in.', 'yt-revolution'); ?>
                        </li>
                        <li>
                            <?php _e('Give your application a name, enter your homepage URL for the redirect URI, and choose Website Integration for the category.', 'yt-revolution'); ?>
                        </li>
                        <li>
                            <?php _e('Review the terms.', 'yt-revolution'); ?>
                        </li>
                        <li>
                            <?php _e('Click the &#8220;Register&#8221; button.', 'yt-revolution'); ?>
                        </li>
                    </ul>
                </div>

            </li>


            <li>
                <div class="help-step">
                    <p style=" font-size:1.125em;">
                        <strong><?php _e('Get Your API Key', 'yt-revolution'); ?></strong>
                    </p>

                    <ul style="list-style: disc; padding-left:1.75em;">

                        <li>
                            <?php _e('On the next page you will see your Client ID and Client Secret.', 'yt-revolution') ?>
                        </li>

                        <li>
                            <?php _e('You can also find them later in your Twitch account settings, under the &#8220;Connections&#8221; tab.', 'yt-revolution') ?>
                        </li>

                        <li>
                            <?php _e('If you do not see a Client Secret, click the &#8220;New Secret&#8221; button.', 'yt-revolution') ?>
                        </li>


                </div>
            </li>


            <li>
              <div class="help-step">
                  <p style=" font-size:1.125em;">
                      <strong><?php _e('Save Your Keys Here', 'yt-revolution'); ?></strong>
                  </p>

                  <ul style="list-style: disc; padding-left:1.75em;">

                      <li>
                          <?php _e('Copy your new Client ID and Client Secret from Twitch.', 'yt-revolution') ?>
                      </li>

                      <li>
                          <?php _e('Come back to this page and paste the values into the corresponding form fields here.', 'yt-revolution') ?>
                      </li>

                      <li>
                          <?php _e('Finally, click the &#8220;Save ID &amp; Secret&#8221; button', 'yt-revolution') ?>
                      </li>

                  </ul>
              </div>
            </li>
        </ul>
        <?php
    }
}
