<?php /* Template Name: Woodvendors Price Template */ ?>

<?php get_header(); ?>

<?php
// $id = isset($_GET['id']) ? intval($_GET['id']) : 0;
$id = get_query_var('slab_id');

if (empty($id)) {
	echo '<div class="container" style="padding:60px 0; text-align:center;">';
	echo '<h2 class="maliti_slab">No product selected.</h2>';
	echo '</div>';
	get_footer();
	exit;
}

$sql_image = "select * from wp_woodlister_slab_images where wp_woodlister_slab_images.slider_title = '" . woodvendors_slug_decode($id) . "' order by slider_sortId";
$results = $wpdb->get_results($sql_image);

// echo "<pre>";
// print_r($results);
// echo "</pre>";

if (count($results) != 1) {

	echo '<div class="container" style="padding:60px 0; text-align:center;">';

	if (count($results) == 0) {
		echo '<h2 class="maliti_slab">No matching product found.</h2>';
	} else {
		echo '<h2 class="maliti_slab">Multiple product found with same slug.</h2>';
	}

	echo '</div>';

	get_footer();
	exit;
}

$result_image = $results[0];

$image = $result_image->image;
$images = explode(',', $image);

// echo "<pre>";
// print_r($result_image);
// echo "</pre>";
?>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">

<style>
	.wood_price_main {
		width: 100%;
		padding: 60px 0;
		background: #fff;
	}
	

	.wood_price_box_wrap {
		border: 1px solid #d9b47d;
		border-radius: 3px;
		padding: 35px;
	}


	.wood_price_top {
		display: grid;
		grid-template-columns: 340px 1fr;
		gap: 45px;
		align-items: start;

	}

	.wood_price_top:not(:first-of-type) {
		border-top: 1px solid #ddd;
		margin-top: 30px;
		padding-top: 30px;
	}


	.wood_price_card {
		width: 340px;
		border: 6px solid #dfa95e;
		background: #fff;
		box-sizing: border-box;
	}

	.wood_price_card_img {
		width: 100%;
		height: 200px;
		object-fit: cover;
		display: block;
	}

	.wood_price_card_caption {
		background: #7a421f;
		color: #fff;
		text-align: center;
		font-size: 13px;
		font-weight: 700;
		line-height: 1.35;
		padding: 13px 10px;
	}

	.wood_price_title {
		margin: 0 0 40px;
		color: #000;
		font-size: 27px;
		font-weight: 700;
		line-height: 1.1;
		text-transform: uppercase;
		position: relative;
		padding-bottom: 16px;
	}

	.wood_price_title:before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		border-bottom: 2px solid #ddd;
	}

	.wood_price_title:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -1px;
		width: 78px;
		height: 4px;
		background: #c69453;
	}

	.wood_price_sub_title {
		margin: 0 0 15px;
		color: #6c3b22;
		font-size: 23px;
		font-weight: 700;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.wood_price_description {
		margin: 0 0 35px;
		color: #3f4854;
		font-size: 18px;
		font-weight: 700;
		line-height: 1.5;
	}

	.wood_price_checks {
		display: flex;
		align-items: center;
		gap: 150px;
		margin-bottom: 35px;
	}

	.wood_price_check_item {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 10px;
		cursor: pointer;
		user-select: none;
		white-space: nowrap;
		color: #3f4854;
		font-size: 18px;
		font-weight: 700;
	}
	
		.maliti_slab {
    margin: 0 !important;
    padding: 40px 0px;
}

	.wood_price_check_item input {
		position: absolute;
		opacity: 0;
		width: 1px;
		height: 1px;
	}

	.wood_price_fake_check {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: #9bbb25;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 11px;
		flex: 0 0 22px;
	}

	.wood_price_btn {
		border: 2px solid #efbd66;
		background: #fff1d9;
		color: #7a4b29;
		height: 54px;
		border-radius: 30px;
		padding: 0 5px 0 24px;
		min-width: 218px;
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: 18px;
		font-size: 18px;
		font-weight: 700;
		line-height: 1;
		cursor: pointer;
		box-shadow: none;
		text-transform: uppercase;
	}

	.wood_price_btn_circle {
		width: 43px;
		height: 43px;
		border-radius: 50%;
		background: linear-gradient(135deg, #fac46b 0%, #f39a25 100%);
		color: #fff;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 18px;
		flex: 0 0 43px;
	}

	@media(max-width:991px) {

		.wood_price_top {
			grid-template-columns: 1fr;
		}

		.wood_price_card {
			width: 100%;
			max-width: 100%;
		}

		.wood_price_top {
			gap: 35px;
		}

		.wood_price_checks {
			gap: 25px;
			flex-wrap: wrap;
		}

		.wood_price_card_img {
			height: auto;
		}

	}

	@media(max-width:767px) {

		.wood_price_box_wrap {
			padding: 15px;
		}

		.wood_price_title {
			font-size: 24px;
		}

		.wood_price_sub_title {
			font-size: 22px;
		}

		.wood_price_description {
			font-size: 15px;
		}

	}
</style>

<section class="wood_price_main">

	<div class="container">

		<div class="wood_price_box_wrap">

			<?php
			for ($j = 0; $j < count($images); $j++) {

				$url =  wp_get_attachment_image_src($images[$j], 'large');
				$src = $url[0];
				$attachment = get_post($images[$j]);
				$image_id = $attachment->ID;
				$image_title = $attachment->post_title;
				$description = $attachment->post_content;
				// echo "<pre>";
				// print_r($image_id);
				// echo "</pre>";
				if ($src != '') {
			?>
					<div class="wood_price_top">

						<div class="wood_price_card">

							<img class="wood_price_card_img" src="<?php echo $src; ?>" alt="walnut slab">

							<div class="wood_price_card_caption">
								<?php echo $description; ?>
							</div>

						</div>

						<div class="wood_price_content">

							<h1 class="wood_price_title">
								<?php echo $image_title; ?>
							</h1>

							<h4 class="wood_price_sub_title">
								<?php echo $description; ?>
							</h4>

							<p class="wood_price_description">
								<?php echo $description; ?>
							</p>
							<a href="<?php echo site_url('/') . woodvendors_slug_encode($result_image->slider_title) . '/' . woodvendors_slug_encode($image_title) . '/millwork-calculator'; ?>" class="wood_price_btn">
								<span>Millwork Price Options</span>

								<span class="wood_price_btn_circle">
									<i class="fa-solid fa-chevron-right"></i>
								</span>
							</a>

						</div>

					</div>
			<?php }
			} ?>
		</div>

	</div>

</section>

<?php get_footer(); ?>