<?php
$_query = new WP_Query(array(
	'post_type' => 'post',
	'posts_per_page' => 4,
	'cat' => 4,
	"no_found_rows" => true,

	'order' => 'DESC',
	'orderby' => 'date',
	'orderby' => 'meta_value',
	
	//'meta_key' => 'case_order', 
	'meta_query' => array(
		array(
			'key' => 'case_order',
			'value' => 1,
			'type' => 'numeric',
			'compare'=>'>='
		),
	),
) );
if (! $_query->have_posts())
	return;

$list = [];
while($_query->have_posts()) {
	$_query->the_post();
	
	$_tab_text_pc = nl2br(get_field("case_tab_text_pc"));
	$_tab_text_sp = nl2br(get_field("case_tab_text_sp"));
	
	$_title = get_field("case_title");
	$_desc = get_field("case_description");
	
	if (empty($_title)) {
		$_title = strip_tags(get_the_title());
	}
	if (empty($_desc)) {
		$_desc = strip_tags(get_the_content());
		if (mb_strlen($_desc,"utf-8") > 200) {
			$_desc = mb_substr($_desc, 0,200,"utf-8")."…";
		}
	}
	if ((bool)get_field("case_detail_link") === true) {
		$_desc .= sprintf('<a href="%s">続きを見る</a>', get_the_permalink());
	}
		
	if (empty($_tab_text_pc)) {
		$_tab_text_pc = $_title;
		if (mb_strlen($_tab_text_pc,"utf-8") > 8) {
			$_tab_text_pc = mb_substr($_tab_text_pc, 0,7,"utf-8")."…";
		}
	}
	if (empty($_tab_text_sp)) {
		$_tab_text_sp = $_title;
		if (mb_strlen($_tab_text_sp,"utf-8") > 8) {
			$_tab_text_sp = mb_substr($_tab_text_sp, 0,7,"utf-8")."…";
		}
	}
	
	$image = null;
	$image_alt = null;
	if ($image_id = get_post_thumbnail_id())  {
		if ($_image = wp_get_attachment_image_src( $image_id, "full" )) {
			$image = $_image[0];
			
			$image_alt = get_post_meta($image_id, '_wp_attachment_image_alt', true );
		}
	}
	
	$list[] = [
		"tab_text_pc" => $_tab_text_pc,
		"tab_text_sp" => $_tab_text_sp,
		"title" => $_title, 
		"desc" => $_desc,
		"image" => $image, 
		"image_alt" => $image_alt, 
	];
}
wp_reset_query();

?>
<div class="nav06" id="nav06">
	<h2>
		<img src="<?php echo get_stylesheet_directory_uri(); ?>/lp/images/lp01/nav06_title.png" alt="リースバックの活用事例" class="visible-pc" />
		<img src="<?php echo get_stylesheet_directory_uri(); ?>/lp/images_sp/lp01/nav06_title.png" alt="リースバックの活用事例" class="visible-sp" />
	</h2>
	
	<div class="tab"><ul class="cl">
	<?php foreach($list as $_idx => $_data) : ?>
		<li><a href="javascript: void(0);"<?php if($_idx == 0) echo ' class="active"'; ?>><?php
			printf('<span class="visible-pc">%s</span>', $_data["tab_text_pc"]);
			printf('<span class="visible-sp">%s</span>', $_data["tab_text_sp"]);
		?></a></li>
	<?php endforeach; ?>
	</ul></div>
	<div class="contents"><ul class="cl">
		<!-- タブ1 -->
		<?php foreach($list as $_idx => $_data) : ?>
		<li class="cl<?php if($_idx == 0) echo ' active'; ?>">
			<div class="image"><img src="<?php
				echo htmlspecialchars($_data["image"]);
			?>" alt="<?php echo htmlspecialchars($_data["image_alt"]); ?>" /></div>
			<div class="in">
				<h3><?php echo $_data["title"]; ?></h3>
				<div class="text">
					<p><?php echo $_data["desc"]; ?></p>
				</div>
			</div>
		</li>
		<?php endforeach; ?>
	</ul></div>
</div>