<?php if ( !defined( 'ABSPATH' ) ) exit;//PHPの宣言と直接アクセスの拒否
/* セクションID haumenu_define_section_id_01_addcontent() */
/* タブのスラグ haumenu_define_tab_slug_01_addcontent() */
/* $option_name 設定名 haumenu_define_option_name_01_addcontent() */
/* get_option GetOP01_addcontent() */

/***** 親設定の有効／無効に合わせて子設定の表示方法を変更する *****/
/* 関数名・設定名は画面ごとに変えること（関数重複を防ぐ） */
/* add_action('admin_notices', 'current_pagehook');を追加してページ名を取得し、$page_fooksuffixの値を変える */
/* 連動マップ（ID => セレクター）の項目を編集する */

function haup_child_setting_view_control_01_addcontent( $hook_suffix ) {
	//ページフックにより出力を判断
	$page_fooksuffix = 'ha-utilitiy_page_haumenu_page_addcontent';

	if ( $page_fooksuffix !== $hook_suffix ) {
		return;
	}

	//メインスクリプトのハンドル
	$handle = 'haup-child-setting-control-js';

	// メインスクリプトが登録されていなければ終了(スクリプトの読み込みはmain-menu.phpで記述)
	if ( ! wp_script_is( $handle, 'registered' ) ) {
		return;
	}

	//設定名
	$set_name = haumenu_define_option_name_01_addcontent();

	// 連動マップ（ID => セレクター）
	// 1つのIDに対して複数のCSSクラスを指定する（1つなら1行）
	$dependency_map = array(
		$set_name . 'pattern-tab-switch' => array(
			'.tab-switch-text-color-wrapper', // タブの文字色
			'.tab-switch-bg-color-wrapper', // タブの背景色
			'.tab-switch-border-color-wrapper', // タブとコンテンツの枠線色
			'.tab-switch-selected-text-color-wrapper', // 選択時の文字色
			'.tab-switch-selected-bg-color-wrapper', // 選択時の背景色
			'.tab-switch-equal-width-wrapper', // タブをコンテンツ全体に広げ、各タブを等幅にする
		),

	);

	$inner_js = "";
	foreach ( $dependency_map as $id => $selectors ) {
		foreach ( (array) $selectors as $selector ) {
			// translators: %s stands for the CSS Class & ID.
			$inner_js .= sprintf(
				"haup_apply_dependency('%s', '%s');\n",
				esc_js( $id ),
				esc_js( $selector )
			);
		}
	}

	if ( $inner_js ) {
		$js_code = "if (window.haup_apply_dependency) {\n" . $inner_js . "}";
		// 第3引数を 'after' にすることで、本体JSの直後に出力
		wp_add_inline_script( $handle, $js_code, 'after' );
	}
}
add_action( 'admin_enqueue_scripts', 'haup_child_setting_view_control_01_addcontent', 20 );

/***** タブ切り替えコンテンツブロック *****/
/*** タブ切り替えパターンを使う ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_pattern_tab_switch(){
//項目の追加
	add_settings_field(
		'pattern-tab-switch', // 設定名
		__('Use Tab Switch Pattern','hima-art-utility'), // 設定タイトル
		'haumenu_pattern_tab_switch', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_01_addcontent(), //表示させるタブのスラグ
		haumenu_define_section_id_01_addcontent(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

}
add_action( 'admin_init', 'haumenu_init_field_pattern_tab_switch' );

/* 入力フォーム */
function haumenu_pattern_tab_switch() {
	$set_name = haumenu_define_option_name_01_addcontent(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'pattern-tab-switch'; //個別配列名

	//テーブルに値がなかった場合の措置（PHP8.x以降への対応）
	if(isset($options[$option_name])){
		$checked = $options[$option_name];
	}else{
		$checked = '';
	}
?>
<label>
	<input type="checkbox" id="<?php echo esc_html($set_name . $option_name ); ?>" name="<?php echo esc_html($set_name . '[' .$option_name. ']'); ?>" class="wppd-ui-toggle" <?php checked( $checked , 1 ); ?> value="1">
	<p><?php esc_html_e('Enable the tab switching pattern and add it to the pattern inserter','hima-art-utility'); ?></p>
</label>
<?php
}

/*** タブの文字色 ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_tab_switch_text_color(){
//項目の追加
	add_settings_field(
		'tab-switch-text-color', // 設定名
		__('Tab Text Color','hima-art-utility'), // 設定タイトル
		'haumenu_tab_switch_text_color', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_01_addcontent(), //表示させるタブのスラグ
		haumenu_define_section_id_01_addcontent(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-convine' )
	);

}
add_action( 'admin_init', 'haumenu_init_field_tab_switch_text_color' );

/* 入力フォーム */
function haumenu_tab_switch_text_color() {
	$set_name = haumenu_define_option_name_01_addcontent(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'tab-switch-text-color'; //個別配列名
?>
<div class="tab-switch-text-color-wrapper">
<label>
	<input name="<?php echo esc_html($set_name . '[' .$option_name. ']'); ?>" class="color-picker-hex" type="text" id="<?php echo esc_html($set_name . $option_name); ?>" maxlength="7" value="<?php echo esc_attr($options[ $option_name ] ?? ''); ?>" placeholder="#333" data-default-color="#333">
</label>
</div>
<?php
}

/*** タブの背景色 ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_tab_switch_bg_color(){
//項目の追加
	add_settings_field(
		'tab-switch-bg-color', // 設定名
		__('Tab Background Color','hima-art-utility'), // 設定タイトル
		'haumenu_tab_switch_bg_color', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_01_addcontent(), //表示させるタブのスラグ
		haumenu_define_section_id_01_addcontent(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-convine' )
	);

}
add_action( 'admin_init', 'haumenu_init_field_tab_switch_bg_color' );

/* 入力フォーム */
function haumenu_tab_switch_bg_color() {
	$set_name = haumenu_define_option_name_01_addcontent(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'tab-switch-bg-color'; //個別配列名
?>
<div class="tab-switch-bg-color-wrapper">
<label>
	<input name="<?php echo esc_html($set_name . '[' .$option_name. ']'); ?>" class="color-picker-hex" type="text" id="<?php echo esc_html($set_name . $option_name); ?>" maxlength="7" value="<?php echo esc_attr($options[ $option_name ] ?? ''); ?>" placeholder="#fff" data-default-color="#fff">
</label>
</div>
<?php
}


/*** タブとコンテンツの枠線色 ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_tab_switch_border_color(){
//項目の追加
	add_settings_field(
		'tab-switch-border-color', // 設定名
		__('Tab & Contents Border Color','hima-art-utility'), // 設定タイトル
		'haumenu_tab_switch_border_color', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_01_addcontent(), //表示させるタブのスラグ
		haumenu_define_section_id_01_addcontent(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-convine' )
	);

}
add_action( 'admin_init', 'haumenu_init_field_tab_switch_border_color' );

/* 入力フォーム */
function haumenu_tab_switch_border_color() {
	$set_name = haumenu_define_option_name_01_addcontent(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'tab-switch-border-color'; //個別配列名
?>
<div class="tab-switch-border-color-wrapper">
<label>
	<input name="<?php echo esc_html($set_name . '[' .$option_name. ']'); ?>" class="color-picker-hex" type="text" id="<?php echo esc_html($set_name . $option_name); ?>" maxlength="7" value="<?php echo esc_attr($options[ $option_name ] ?? ''); ?>" placeholder="#ccc" data-default-color="#ccc">
</label>
</div>
<?php
}

/*** 選択時の文字色 ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_tab_switch_selected_text_color(){
//項目の追加
	add_settings_field(
		'tab-switch-selected-text-color', // 設定名
		__('Selected Tab Text Color','hima-art-utility'), // 設定タイトル
		'haumenu_tab_switch_selected_text_color', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_01_addcontent(), //表示させるタブのスラグ
		haumenu_define_section_id_01_addcontent(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-convine' )
	);

}
add_action( 'admin_init', 'haumenu_init_field_tab_switch_selected_text_color' );

/* 入力フォーム */
function haumenu_tab_switch_selected_text_color() {
	$set_name = haumenu_define_option_name_01_addcontent(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'tab-switch-selected-text-color'; //個別配列名
?>
<div class="tab-switch-selected-text-color-wrapper">
<label>
	<input name="<?php echo esc_html($set_name . '[' .$option_name. ']'); ?>" class="color-picker-hex" type="text" id="<?php echo esc_html($set_name . $option_name); ?>" maxlength="7" value="<?php echo esc_attr($options[ $option_name ] ?? ''); ?>" placeholder="#fff" data-default-color="#fff">
</label>
</div>
<?php
}

/*** 選択時の背景色 ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_tab_switch_selected_bg_color(){
//項目の追加
	add_settings_field(
		'tab-switch-selected-bg-color', // 設定名
		__('Selected Tab Background Color','hima-art-utility'), // 設定タイトル
		'haumenu_tab_switch_selected_bg_color', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_01_addcontent(), //表示させるタブのスラグ
		haumenu_define_section_id_01_addcontent(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-convine' )
	);

}
add_action( 'admin_init', 'haumenu_init_field_tab_switch_selected_bg_color' );

/* 入力フォーム */
function haumenu_tab_switch_selected_bg_color() {
	$set_name = haumenu_define_option_name_01_addcontent(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'tab-switch-selected-bg-color'; //個別配列名
?>
<div class="tab-switch-selected-bg-color-wrapper">
<label>
	<input name="<?php echo esc_html($set_name . '[' .$option_name. ']'); ?>" class="color-picker-hex" type="text" id="<?php echo esc_html($set_name . $option_name); ?>" maxlength="7" value="<?php echo esc_attr($options[ $option_name ] ?? ''); ?>" placeholder="#000" data-default-color="#000">
</label>
</div>
<?php
}


/*** タブをコンテンツ全体に広げ、各タブを等幅にする ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_tab_switch_tabs_equal_width(){
//項目の追加
	add_settings_field(
		'tab-switch-equal-width', // 設定名
		__('Make tabs equal width','hima-art-utility'), // 設定タイトル
		'haumenu_tab_switch_tabs_equal_width', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_01_addcontent(), //表示させるタブのスラグ
		haumenu_define_section_id_01_addcontent(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-convine' )
	);

}
add_action( 'admin_init', 'haumenu_init_field_tab_switch_tabs_equal_width' );

/* 入力フォーム */
function haumenu_tab_switch_tabs_equal_width() {
	$set_name = haumenu_define_option_name_01_addcontent(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'tab-switch-equal-width'; //個別配列名

	//テーブルに値がなかった場合の措置（PHP8.x以降への対応）
	if(isset($options[$option_name])){
		$checked = $options[$option_name];
	}else{
		$checked = '';
	}
?>
<div class="tab-switch-equal-width-wrapper">
<label>
	<input type="checkbox" id="<?php echo esc_html($set_name . $option_name ); ?>" name="<?php echo esc_html($set_name . '[' .$option_name. ']'); ?>" class="wppd-ui-toggle" <?php checked( $checked , 1 ); ?> value="1">
	<p><?php esc_html_e('Spread the tabs across the content and make each tab equal width','hima-art-utility'); ?></p>
</label>
<div style="text-align:right;margin-top:1rem;"><a href="<?php echo esc_url(HAUP_MANUAL_DIR); ?>/hotouse-tab-content-pattern" target="_blank"><?php echo esc_html(haup_manual_text()); ?></a></div>
</div>
<?php
}