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

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

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

	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_03_blockoption();

	// 連動マップ（ID => セレクター）
	// 1つのIDに対して複数のCSSクラスを指定する（1つなら1行）
	$dependency_map = array(
		//$set_name . 'use-resizing-latest-posts-block-image' => array(
			//'.latest-posts-block-image-height-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_03_blockoption', 20 );

/*** カードのレイアウトを統一 ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_card_size_unity(){
//項目の追加
	add_settings_field(
		'card-size-unity', // 設定名
		__('Standardize Link Card Size','hima-art-utility'), // 設定タイトル
		'haumenu_card_size_unity', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力フォーム */
function haumenu_card_size_unity() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'card-size-unity'; //個別配列名

	//テーブルに値がなかった場合の措置（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('Unify the large and small size cards that are automatically switched according to the size of the featured image of the link source content as follows.','hima-art-utility'); ?></p>
</label>
<ul style="list-style: disc;margin-left: 30px;">
<li><?php esc_html_e('Disable the large card when displaying on a personal computer, and display all small images on the card.','hima-art-utility'); ?></li>
<li><?php esc_html_e('Disable small cards when viewing on mobile and display all cards with large images','hima-art-utility'); ?></li>
</ul>
<?php
}

/*** 出力する画像サイズを「中」に統一 ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_image_size_unity(){
//項目の追加
	add_settings_field(
		'image-size-unity', // 設定名
		__('Standardize Link Image Size','hima-art-utility'), // 設定タイトル
		'haumenu_image_size_unity', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力フォーム */
function haumenu_image_size_unity() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'image-size-unity'; //個別配列名

	//テーブルに値がなかった場合の措置（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('Standardize the size of the featured image to be output to the card to "medium" to prevent the use of excessively large images.','hima-art-utility'); ?></p>
</label>
<?php
}

/*** ホーバー時に拡大する（出力する画像サイズを「中」に統一した場合のみ） ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_image_expand_on_hover(){
//項目の追加
	add_settings_field(
		'image-expand-on-hover', // 設定名
		'', // 設定タイトル
		'haumenu_image_expand_on_hover', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-convine' )
	);

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

/* 入力フォーム */
function haumenu_image_expand_on_hover() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'image-expand-on-hover'; //個別配列名

	//テーブルに値がなかった場合の措置（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('Enlarge featured image in card on hover','hima-art-utility'); ?></p>
</label>
<p><?php esc_html_e('Enlarges the featured image in the card on hover. It is valid only when using a computer and only when "Standardize Link Image Size" is enabled.','hima-art-utility'); ?></p>
<?php
}

/*** カードの横幅を親コンテンツいっぱいにする ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_fit_card_content_width(){
//項目の追加
	add_settings_field(
		'fit-card-content-width', // 設定名
		__('Fit card width to parent element','hima-art-utility'), // 設定タイトル
		'haumenu_fit_card_content_width', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力フォーム */
function haumenu_fit_card_content_width() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'fit-card-content-width'; //個別配列名

	//テーブルに値がなかった場合の措置（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('Expands the width of the card so that it fills the parent element','hima-art-utility'); ?></p>
</label>
<?php
}

/*** フッターを非表示にする ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_hide_card_footer_content(){
//項目の追加
	add_settings_field(
		'hide-card-footer-content', // 設定名
		__('Hide Footer Content','hima-art-utility'), // 設定タイトル
		'haumenu_hide_card_footer_content', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力フォーム */
function haumenu_hide_card_footer_content() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'hide-card-footer-content'; //個別配列名

	//テーブルに値がなかった場合の措置（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('Hide "site name link", "number of comments", "share link", etc. under the link card','hima-art-utility'); ?></p>
</label>
<p style="color:red;"><?php esc_html_e('Since it is hidden using "display:none", it is output on HTML','hima-art-utility'); ?></p>
<?php
}

/*** 文字種を本体と共通にする ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_card_text_type_inherit(){
//項目の追加
	add_settings_field(
		'card-text-type-inherit', // 設定名
		__('Inherit font style','hima-art-utility'), // 設定タイトル
		'haumenu_card_text_type_inherit', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力フォーム */
function haumenu_card_text_type_inherit() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'card-text-type-inherit'; //個別配列名

	//テーブルに値がなかった場合の措置（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('Make the font in the card common with the global style','hima-art-utility'); ?></p>
</label>
<p style="color:green;"><?php esc_html_e('Does not apply to themes that do not have a "system-font" slug for standard fonts in theme.json','hima-art-utility'); ?></p>
<?php
}

/*** 文字サイズを本体と共通にする ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_card_text_size_inherit(){
//項目の追加
	add_settings_field(
		'card-text-size-inherit', // 設定名
		__('Inherit font size','hima-art-utility'), // 設定タイトル
		'haumenu_card_text_size_inherit', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

}

add_action( 'admin_init', 'haumenu_init_field_card_text_size_inherit' );

/* 入力フォーム */
function haumenu_card_text_size_inherit() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'card-text-size-inherit'; //個別配列名

	//テーブルに値がなかった場合の措置（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('Make the font size in the card common with the global style','hima-art-utility'); ?></p>
</label>
<p style="color:green;"><?php esc_html_e('Does not apply to themes that do not have a "medium" slug for standard fonts size in theme.json','hima-art-utility'); ?></p>
<?php
}

/*** 公開日・最終更新日を表示する ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_add_embed_card_pubmod_date(){
//項目の追加
	add_settings_field(
		'add-embed-card-pubmod-date', // 設定名
		__('Displaying the date','hima-art-utility'), // 設定タイトル
		'haumenu_add_embed_card_pubmod_date', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

}

add_action( 'admin_init', 'haumenu_init_field_add_embed_card_pubmod_date' );

/* 入力フォーム */
function haumenu_add_embed_card_pubmod_date() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'add-embed-card-pubmod-date'; //個別配列名

	//テーブルに値がなかった場合の措置（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('The publication date and last update date (if they are the same, only the publication date) are displayed below the excerpt.','hima-art-utility'); ?></p>
</label>
<?php
}


/*** 抜粋の長さを変更する ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_link_card_change_excerpt_length(){
//項目の追加
	add_settings_field(
		'link-card-change-excerpt-length', // 設定名
		__('Change Excerpt Text Length','hima-art-utility'), // 設定タイトル
		'haumenu_link_card_change_excerpt_length', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力フォーム */
function haumenu_link_card_change_excerpt_length() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'link-card-change-excerpt-length'; //個別配列名
?>
<label>
	<input class="transform" name="<?php echo esc_html($set_name . '['.$option_name.']'); ?>" type="text" id="<?php echo esc_html($set_name . $option_name ); ?>" value="<?php echo esc_attr($options[ $option_name ] ?? ''); ?>">
	<p><?php esc_html_e('Change the length of the excerpt in the link card','hima-art-utility'); ?></p>
</label>
<p style="color:green;"><?php esc_html_e('For multi-byte characters such as Japanese, the number of characters will be less than the set value, so adjustments are necessary (if left blank, the WordPress standard 55 alphanumeric characters will be used)','hima-art-utility'); ?></p>
<p style="color:red;"><?php esc_html_e('If you enter an excerpt in the excerpt field on the editing screen and the excerpt is less than this number of characters, only the excerpt you entered will be displayed.','hima-art-utility'); ?></p>
<p style="color:red;"><?php esc_html_e('The setting affects the entire embed, so please check how it affects embedded content other than link cards.','hima-art-utility'); ?></p>
<?php
}






/*** タイトルの文字色 ***/
function haumenu_init_field_link_card_title_color(){
//項目の追加
	add_settings_field(
		'link-card-title-color', // 設定名
		__('Title Color','hima-art-utility'), // 設定タイトル
		'haumenu_link_card_title_color', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力項目 */
function haumenu_link_card_title_color() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'link-card-title-color'; //個別配列名
?>
<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="#2c3338" data-default-color="#2c3338">
</label>
<p><?php esc_html_e('Specifies the card post title color (default is #2c3338)','hima-art-utility'); ?></p>
<?php
}

/*** コンテンツの文字の色 ***/
function haumenu_init_field_link_card_content_color(){
//項目の追加
	add_settings_field(
		'link-card-content-color', // 設定名
		__('Content Text Color','hima-art-utility'), // 設定タイトル
		'haumenu_link_card_content_color', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力項目 */
function haumenu_link_card_content_color() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'link-card-content-color'; //個別配列名
?>
<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="#8c8f94" data-default-color="#8c8f94">
</label>
<p><?php esc_html_e('Specifies the card post content text color (default is #8c8f94)','hima-art-utility'); ?></p>
<?php
}

/*** 続きを読むの色 ***/
function haumenu_init_field_link_card_readmore_color(){
//項目の追加
	add_settings_field(
		'link-card-readmore-color', // 設定名
		__('Content Readmore Text Color','hima-art-utility'), // 設定タイトル
		'haumenu_link_card_readmore_color', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力項目 */
function haumenu_link_card_readmore_color() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'link-card-readmore-color'; //個別配列名
?>
<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="#c3c4c7" data-default-color="#c3c4c7">
</label>
<p><?php esc_html_e('Specifies the card post readmore text color (default is #c3c4c7)','hima-art-utility'); ?></p>
<?php
}

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

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

/* 入力項目 */
function haumenu_link_card_bg_color() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'link-card-bg-color'; //個別配列名
?>
<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="#ffffff" data-default-color="#ffffff">
</label>
<p><?php esc_html_e('Specifies the card background color (default is #ffffff)','hima-art-utility'); ?></p>
<?php
}

/*** 背景画像のアップロード ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_link_card_background_image(){
//項目の追加
	add_settings_field(
		'link-card-background-image', // 設定名
		__('Background image setting','hima-art-utility'), // 設定タイトル
		'haumenu_link_card_background_image', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力フォーム */
function haumenu_link_card_background_image() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'link-card-background-image'; //個別配列名

	if(isset($options[ $option_name ])){
		$data = $options[ $option_name ];
	}else{
		$data = '';
	}

	//現在の画像があれば表示
	if(!empty($options[ $option_name ])){
		$message_before = __('Currently registered images(','hima-art-utility');
		$message_after = __(')','hima-art-utility');
		$set_img = '<p>';
		$set_img .= $message_before;
		$set_img .= $options[ $option_name ];
		$set_img .= $message_after;
		$set_img .= '<p>';
		$set_img .= '<img src="'.$options[ $option_name ].'" style="max-width:300px;">';
	}else{
		$set_img = '';
	}

	//ボタン文字列
		$custom_uploader_text = __('Choose Image','hima-art-utility');
	//選択後（保存前）の画像上のテキスト
		$new_image_message = __('Newly selected image','hima-art-utility');
?>
<label>
	<p><?php esc_html_e('You can use an image as the card background by uploading or specifying an image','hima-art-utility'); ?></p>
<p><?php esc_html_e('The image is automatically scaled to fit the card size with the center as the base point.','hima-art-utility'); ?></p>
<p class="haup-admin-font-red"><?php esc_html_e('If you do not want to use a background image, please save the settings after clicking "Clear Image"','hima-art-utility'); ?></p>
</label>
<input id="<?php echo 'upload_'.esc_html($set_name).esc_html($option_name); ?>" type="text" size="36" name="<?php echo esc_html($set_name) . '[' .esc_html($option_name). ']'; ?>" value="<?php echo esc_attr($data); ?>" /> 
<input id="<?php echo 'upload_image_button_'.esc_html($set_name).esc_html($option_name); ?>" class="button" type="button" value="<?php echo esc_html($custom_uploader_text); ?>" />
<div style="margin-top:20px">
<?php echo wp_kses_post($set_img); ?>
<div id="<?php echo 'image_preview_' .esc_html($set_name).esc_html($option_name); ?>"></div>
</div>
<?php
	// JavaScriptの呼び出し
	haumenu_enqueue_image_uploader_script_url($set_name, $option_name, $custom_uploader_text, $new_image_message);
}

/* 背景画像の効果 */
/* 項目の追加とデータの更新 */
function haumenu_init_field_link_card_background_image_blend(){
//項目の追加
	add_settings_field(
		'link-card-background-image-blend', // 設定名
		__('Background Image Effect','hima-art-utility'), // 設定タイトル
		'haumenu_link_card_background_image_blend', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-convine' )
	);

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

/* 入力フォーム */
function haumenu_link_card_background_image_blend() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'link-card-background-image-blend'; //個別配列名

	if(isset($options[$option_name])){
		$selected = $options[$option_name];
	}else{
		$selected = '';
	}
?>
<select name= '<?php echo esc_html($set_name . '[' .$option_name. ']'); ?>' >
<option value='1' <?php selected($selected , 1 ); ?> selected ><?php esc_html_e('Normal','hima-art-utility'); ?></option>
<option value='2' <?php selected($selected , 2 ); ?>><?php esc_html_e('Light','hima-art-utility'); ?></option>
<option value='3' <?php selected($selected , 3 ); ?>><?php esc_html_e('Dark','hima-art-utility'); ?></option>
</select>
<p><?php esc_html_e('If the content is difficult to see when the background image is specified, you can mask "light" and "dark" here.','hima-art-utility'); ?></p>
<?php
}

/*** カードの枠線色 ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_link_card_border_color(){
//項目の追加
	add_settings_field(
		'link-card-border-color', // 設定名
		__('Border Color','hima-art-utility'), // 設定タイトル
		'haumenu_link_card_border_color', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力項目 */
function haumenu_link_card_border_color() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'link-card-border-color'; //個別配列名
?>
<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="#dcdcde" data-default-color="#dcdcde">
</label>
<p><?php esc_html_e('Specifies the card border color (default is #dcdcde)','hima-art-utility'); ?></p>
<?php
}

/*** 枠線の影の色 ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_link_card_border_shadow_color(){
//項目の追加
	add_settings_field(
		'link-card-border-shadow-color', // 設定名
		__('Border Shadow Color','hima-art-utility'), // 設定タイトル
		'haumenu_link_card_border_shadow_color', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力項目 */
function haumenu_link_card_border_shadow_color() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'link-card-border-shadow-color'; //個別配列名
?>
<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="#000000" data-default-color="#000000">
</label>
<p><?php esc_html_e('Specifies the card border shadow color (default is #000000)','hima-art-utility'); ?></p>
<?php
}

/*** 枠線の影の透明度 ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_link_card_border_shadow_trans(){
//項目の追加
	add_settings_field(
		'link-card-border-shadow-trans', // 設定名
		__('Border Shadow Transparency','hima-art-utility'), // 設定タイトル
		'haumenu_link_card_border_shadow_trans', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-convine' )
	);

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

/* 入力フォーム */
function haumenu_link_card_border_shadow_trans() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'link-card-border-shadow-trans'; //個別配列名
?>
<label>
	<input class="transform" name="<?php echo esc_html($set_name . '['.$option_name.']'); ?>" type="text" id="<?php echo esc_html($set_name . $option_name ); ?>" value="<?php echo esc_attr($options[ $option_name ] ?? ''); ?>">
	<p><?php esc_html_e('Specifies the transparency percentage of the border shadow as a real number. Default is 50 (50%)','hima-art-utility'); ?></p>
</label>
<?php
}

/*** フッター文字とアイコンの色 ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_link_card_icon_color(){
//項目の追加
	add_settings_field(
		'link-card-icon-color', // 設定名
		__('Color of footer text and icons','hima-art-utility'), // 設定タイトル
		'haumenu_link_card_icon_color', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力項目 */
function haumenu_link_card_icon_color() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'link-card-icon-color'; //個別配列名
?>
<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="#82878c" data-default-color="#82878c">
</label>
<p><?php esc_html_e('Specifies the card footer text & icon color (default is #82878c)','hima-art-utility'); ?></p>
<?php
}

/*** ホーバー時のフッター文字とアイコンの色 ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_link_card_icon_hover_color(){
//項目の追加
	add_settings_field(
		'link-card-icon-hover-color', // 設定名
		__('Color of footer text and icons on hover','hima-art-utility'), // 設定タイトル
		'haumenu_link_card_icon_hover_color', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力項目 */
function haumenu_link_card_icon_hover_color() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option($set_name);
	$option_name = 'link-card-icon-hover-color'; //個別配列名
?>
<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="#0073aa" data-default-color="#0073aa">
</label>
<p><?php esc_html_e('Specifies the card footer text & icon color on hover (default is #0073aa)','hima-art-utility'); ?></p>
<?php
}

/*** iframeに適用するその他のスタイル ***/
/* 項目の追加とデータの更新 */
function haumenu_init_field_add_link_card_custom_css(){
//項目の追加
	add_settings_field(
		'add-link-card-custom-css', // 設定名
		__('Custom CSS','hima-art-utility'), // 設定タイトル
		'haumenu_add_link_card_custom_css', // 設定項目のHTMLを出力する関数名
		haumenu_define_tab_slug_03_blockoption(), //表示させるタブのスラグ
		haumenu_define_section_id_03_blockoption(),// $section 表示させるセクションのID
		array( 'class' => 'ha-settings-separate' )
	);

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

/* 入力フォーム */
function haumenu_add_link_card_custom_css() {
	$set_name = haumenu_define_option_name_03_blockoption(); //  $option_name 設定名
	$options = get_option( $set_name );
	$option_name = 'add-link-card-custom-css'; //個別配列名
?>
<label>
	<textarea class="ha-css-input" name="<?php echo esc_html($set_name . '[' .$option_name. ']'); ?>" id="<?php echo esc_html($set_name . $option_name ); ?>" cols="100" rows="20" ><?php echo esc_attr( $options[ $option_name ] ?? '' ); ?></textarea>
	<p><?php esc_html_e('Enter custom CSS for your link card','hima-art-utility'); ?></p>
</label>
	<p class="haup-admin-font-red"><?php esc_html_e('The style code written here only applies inside the link card iframe','hima-art-utility'); ?></p>
<?php
}