<?php
/**
 * 
 *
 * @package qa_heatmap
 */

$qahm_admin_page_dataportal = new QAHM_Admin_Page_Dataportal();

class QAHM_Admin_Page_Dataportal extends QAHM_Admin_Page_Base {

	// スラッグ
	const SLUG = QAHM_NAME . '-dataportal';

	// nonce
	const NONCE_ACTION = self::SLUG . '-nonce-action';
	const NONCE_NAME   = self::SLUG . '-nonce-name';

	/**
	 * コンストラクタ
	 */
	public function __construct() {
		parent::__construct();
	}
	
	/**
	 * 初期化
	 */
	public function enqueue_scripts( $hook_suffix ) {
		if( $this->hook_suffix !== $hook_suffix ||
			! $this->is_enqueue_jquery()
		) {
			return;
		}

		$css_dir_url = $this->get_css_dir_url();

		// enqueue_style
		$this->common_enqueue_style();

		// enqueue script
		$this->common_enqueue_script();
	
		// inline script
		$scripts = $this->get_common_inline_script();
		wp_add_inline_script( QAHM_NAME . '-common', 'var ' . QAHM_NAME . ' = ' . QAHM_NAME . ' || {}; let ' . QAHM_NAME . 'Obj = ' . wp_json_encode( $scripts ) . '; ' . QAHM_NAME . ' = Object.assign( ' . QAHM_NAME . ', ' . QAHM_NAME . 'Obj );', 'before' );

		// localize
		$localize = $this->get_common_localize_script();
		wp_localize_script( QAHM_NAME . '-common', QAHM_NAME . 'l10n', $localize );
	}

	/**
	 * ページの表示
	 */
	public function create_html() {
		$img_dir_url = plugin_dir_url(__FILE__) . 'img/';
		$lang_set = get_bloginfo('language');
		?>

		<div id="<?php esc_attr_e( basename( __FILE__, '.php' ) ); ?>" class="qahm-admin-page">
			<div class="wrap">
				<h1><?php esc_html_e( 'QA Connector to Google Data Studio', 'qa-zero' ); ?></h1>
                <div class="bl_whitediv">
                    <h2><?php esc_html_e( 'How to get the Connector option', 'qa-zero' ); ?></h2>
                    <p><?php
                        $msg =  sprintf(esc_html__( 'Connector to Google Data Studio is one of %1$s QA upgrade options %2$s.', 'qa-zero' ), '<span class="el_bold">', '</span>');
                        $msg .=  sprintf(esc_html__( 'If you would like to have and use it, buy at %1$s QA Upgrade Options %2$s.', 'qa-zero' ), '<a href="https://quarka.org/dataplan-upgrade/" target="_blank" rel="noopener noreferrer" >', '</a>');
                        echo $msg;
                        ?>
                    </p>
                    <h2 class="el_underlineTitle"><?php esc_html_e( 'What you can do by connecting to Google Data Studio', 'qa-zero' ); ?></h2>
                    <p><?php esc_html_e( 'QA has the ability to download all PVs; 31 days of data can be linked to the Google Data Studio.', 'qa-zero'); ?><?php esc_html_e( 'All PV data will be imported into the Google Data Studio, allowing you to create your own kind of user explorer, periodic reports, and many other things.', 'qa-zero'); ?></p>
                    <p><?php esc_html_e( 'If you would like to connect to Google Data Studio, choose this option', 'qa-zero' ); ?></p>
                    <h2 class="el_underlineTitle"><?php esc_html_e( 'How to get ready for Google Data Studio', 'qa-zero' ); ?></h2>
                    <p><?php esc_html_e( 'To connect QA to Google Data Studio, follow the steps below.', 'qa-zero' ); ?></p>
                    <ol>
                        <li><?php esc_html_e( 'Import and approve QA Connector.', 'qa-zero' ); ?></li>
                        <li><?php esc_html_e( 'Fill the connector infomation.', 'qa-zero' ); ?></li>
                        <li><?php esc_html_e( 'Create reports in Google Data Studio.', 'qa-zero' ); ?></li>
                    </ol>
                    <h3><?php esc_html_e( '1. Import and approve QA Connector.', 'qa-zero' ); ?></h3>
                    <?php esc_html_e( 'Click the link below to import the QA Connector.', 'qa-zero' ); ?>
                    <p><a href="https://datastudio.google.com/u/0/datasources/create?connectorId=AKfycbyQ5eG88bt5mLDXDGs6BpQTA2CdYUJR3lQ3S902n4jZ5Gcl1k6-QiTZjtn3JFU-BpGo">https://datastudio.google.com/u/0/datasources/create?connectorId=AKfycbyQ5eG88bt5mLDXDGs6BpQTA2CdYUJR3lQ3S902n4jZ5Gcl1k6-QiTZjtn3JFU-BpGo</a></p>
                    <?php esc_html_e( 'Follow steps and approve.', 'qa-zero' ); ?>
                    <p><img class="el_manualimg" src="<?php echo $img_dir_url ?>dataportal2.png" /></p>
                    <p><img class="el_manualimg" width="400px" src="<?php echo $img_dir_url ?>dataportal3.png" /></p>
                    <p><img class="el_manualimg" width="400px" src="<?php echo $img_dir_url ?>dataportal4.png" /></p>
                    <h3><?php esc_html_e( '2. Fill the connector infomation.', 'qa-zero' ); ?></h3>
                    <p><?php esc_html_e( 'Enter your WP account and information of QA as shown in below, and connect to Google Data Studio.', 'qa-zero' ); ?></p>
                    <p><img class="el_manualimg" src="<?php echo $img_dir_url ?>dataportal5.png" /></p>
                    <table class="el_tableSimple" style="width: 800px">
                        <thead>
                        <th><?php esc_html_e( 'entry', 'qa-zero' ); ?></th>
                        <th><?php esc_html_e( 'input contents', 'qa-zero' ); ?></th>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1 User Name</td>
                            <td><?php esc_html_e( 'Login ID with administrative rights to this WordPress', 'qa-zero' ); ?></td>
                        </tr>
                        <tr>
                            <td>2 Password</td>
                            <td><?php esc_html_e( 'Password for the above user', 'qa-zero' ); ?></td>
                        </tr>
                        <tr>
                            <td>3 ajax url</td>
                            <td><p><?php echo admin_url( 'admin-ajax.php' ); ?></p></td>
                        </tr>
                        </tbody>
                    </table>
                    <h3><?php esc_html_e( '3.Create reports in Google Data Studio.', 'qa-zero' ); ?></h3>
                    <p><?php esc_html_e( 'Create a new report.', 'qa-zero' ); ?></p>
                    <p><img class="el_manualimg" src="<?php echo $img_dir_url ?>dataportal6.png" /></p>
                    <p><img class="el_manualimg" width="400px" src="<?php echo $img_dir_url ?>dataportal7.png" /></p>
                    <p><img class="el_manualimg" src="<?php echo $img_dir_url ?>dataportal8.png" /></p>
                    <h2 class="el_underlineTitle"><?php esc_html_e( 'In case of errors / Notes on Google Data Studio linkage.', 'qa-zero' ); ?></h2>
                    <p><?php esc_html_e( 'The following error may occur and you may not be able to connect properly.', 'qa-zero' ); ?></p>
                    <p><img class="el_manualimg" width="400px" src="<?php echo $img_dir_url ?>dataportal-error.png" /></p>
                    <p><?php esc_html_e( 'With QA Connector, your WordPress will be connected from Google Data Studio in the U.S. The mechanism may cause errors mainly for the following security and server performance reasons.', 'qa-zero' ); ?></p>
                    <ol>
                        <li><?php esc_html_e( 'Your rental server is configured to not allow connections from the U.S.', 'qa-zero' ); ?></li>
                        <li><?php esc_html_e( 'Security plugins such as Wordfence restrict login with reCAPTCHA, etc.', 'qa-zero' ); ?></li>
                        <li><?php esc_html_e( 'WAFs, firewalls, and other mechanisms are in operation to prevent external communications', 'qa-zero' ); ?></li>
                        <li><?php esc_html_e( 'Trying to get too huge data', 'qa-zero' ); ?></li>
                        <li><?php esc_html_e( 'Server performance is consistently poor and unresponsive to Google Data Studio', 'qa-zero' ); ?></li>
                    </ol>
                    <p><?php esc_html_e( 'We are unable to answer questions regarding plugins you are using, rental server, or other environment or Google Data Studio, so please check with Google official information or your server company before trying this data connector.', 'qa-zero' ); ?></p>
                    <p><?php $msg = sprintf( esc_html__( 'Basically, the concept is similar to that of the MySQL connector, so information on Google Studio Help "%1$s Connect to MySQL %2$s" will be a good reference.', 'qa-zero' ), '<a href="https://support.google.com/datastudio/answer/7088031">', '</a>'); echo $msg; ?></p>
                    <p><?php $msg = sprintf( esc_html__( 'If you noticed something about the connection, such as "this plugin may not work together" or "you should do this, then it will work", please share the information with us at %1$s WordPress official forums %2$s. It would be very helpfull, and we will use it to improve the system or create a manual.', 'qa-zero' ),'<a href="https://wordpress.org/support/plugin/qa-heatmap-analytics/">','</a>'); echo $msg;  ?></p>
				</div>
			</div>
		</div>
		<?php
	}
} // end of class
