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

<?php get_header(); ?>

<?php
$parent_slug = get_query_var('parent_slug');

if (empty($parent_slug)) {
	echo '<div class="container" style="padding:60px 0; text-align:center;">';
	echo '<h2>No image 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($parent_slug) . "' order by slider_sortId";
$slabResult = $wpdb->get_row($sql_image);

$id = get_query_var('image_id');

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

$sql = "SELECT * 
		FROM wp_posts 
		WHERE post_title = '" . woodvendors_slug_decode($id) . "'";

$results = $wpdb->get_results($sql);

// echo "<pre>";
// print_r($slabResult);
// 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 image found.</h2>';
	} else {
		echo '<h2 class="maliti_slab">Multiple images found with same slug.</h2>';
	}

	echo '</div>';

	get_footer();
	exit;
}

$attachment = $results[0];
$image_id = $attachment->ID;

$url =  wp_get_attachment_image_src($image_id, 'large');
$src = $url[0];

$image_title = $attachment->post_title;
$description = $attachment->post_content;

$slab_no   = get_post_meta($image_id, 'slab_no', true);
$price     = get_post_meta($image_id, 'price', true);
$min_width = get_post_meta($image_id, 'min_width', true);
$max_width = get_post_meta($image_id, 'max_width', true);
$length    = get_post_meta($image_id, 'length', true);
$area_sf   = get_post_meta($image_id, 'area_sf', true);
$margin    = get_post_meta($image_id, 'margin', true);

// echo "<pre>";
// print_r([
// 	'slab_no' => $slab_no,
// 	'price' => $price,
// 	'min_width' => $min_width,
// 	'max_width' => $max_width,
// 	'length' => $length,
// 	'area_sf' => $area_sf,
// 	'margin' => $margin,
// ]);
// echo "</pre>";
?>

<!-- Calculator Formula -->
<?php
// $length_inch = !empty($length) ? floatval($length) : 0;
// $min_width_inch = !empty($min_width) ? floatval($min_width) : 0;
// $max_width_inch = !empty($max_width) ? floatval($max_width) : 0;
$margin = ($margin === '' || $margin === null) ? '' : floatval($margin);
$area_sf = !empty($area_sf) ? floatval($area_sf) : 0;
$slab_price = !empty($price) ? floatval($price) : 0;

// if ($min_width_inch > 0 && $max_width_inch > 0) {

// 	$width_inch = ($min_width_inch + $max_width_inch) / 2;
// } elseif ($min_width_inch > 0) {

// 	$width_inch = $min_width_inch;
// } elseif ($max_width_inch > 0) {

// 	$width_inch = $max_width_inch;
// } else {

// 	$width_inch = 0;
// }

// if ($length_inch <= 0 || $width_inch <= 0 || $slab_price <= 0) {
if ($area_sf <= 0 || $slab_price <= 0) {
	echo '<div class="container" style="padding:60px 0;text-align:center;">';
	echo '<h2 class="maliti_slab">Calculator data missing.</h2>';
	// echo '<p>Please make sure Length, Width and Price are added.</p>';
	echo '<p>Please make sure Area (SF) and Price are added.</p>';
	echo '</div>';
	get_footer();
	exit;
}

// $square_feet = ($width_inch * $length_inch) / 144;
$square_feet = $area_sf;

$is_bookmatch = $slabResult->is_book_matched ?? false; // true = bookmatch

// Fetch Prices
$type = $is_bookmatch ? 'bookmatch' : 'single';

$sql = $wpdb->prepare(
	"SELECT * 
	FROM wp_millwork_calculator_price
	WHERE type = %s",
	$type
);

$price_row = $wpdb->get_row($sql);

if (empty($price_row)) {

	echo '<div class="container" style="padding:60px 0;text-align:center;">';
	echo '<h2 class="maliti_slab">Pricing data not found.</h2>';
	echo '</div>';

	get_footer();
	exit;
}
// print_r($price_row);

$options = [

	'single' => [

		[
			'id' => 'surface',
			'label' => 'Surface',
			'title' => 'Surface both faces flat to 100 grit',

			'sf_rate' => $price_row->surface_rate,
			'flat_rate' => $price_row->surface_flat,

			'default' => true,
			'force_enable' => false
		],

		[
			'id' => 'epoxy',
			'label' => 'Epoxy',
			'title' => 'Epoxy fill minor checks on top face',

			'sf_rate' => $price_row->epoxy_rate,
			'flat_rate' => $price_row->epoxy_flat,

			'default' => true,
			'force_enable' => false
		],

		[
			'id' => 'finish_sand',
			'label' => 'Finish Sand',
			'title' => 'Sand top face to 220 grit and reverse face to 150 grit',

			'sf_rate' => $price_row->finish_sand_rate,
			'flat_rate' => $price_row->finish_sand_flat,

			'default' => true,
			'force_enable' => false
		],

		[
			'id' => 'coating',
			'label' => 'Finished Tabletop',
			'title' => 'Finish with 3 coats conversion varnish or hand rubbed oil',

			'sf_rate' => $price_row->coating_rate,
			'flat_rate' => $price_row->coating_flat,

			'default' => true,
			'force_enable' => false
		],

		// [
		// 	'id' => 'table_base',
		// 	'label' => 'Table Base',
		// 	'title' => 'Add standard Table Base',

		// 	'sf_rate' => $price_row->table_base_rate,
		// 	'flat_rate' => $price_row->table_base_flat,

		// 	'default' => true,
		// 	'force_enable' => false
		// ]

	],

	'bookmatch' => [

		[
			'id' => 'surface',
			'label' => 'Surface',
			'title' => 'Surface both slabs, both faces flat to 100 grit',

			'sf_rate' => $price_row->surface_rate,
			'flat_rate' => $price_row->surface_flat,

			'default' => true,
			'force_enable' => false
		],

		[
			'id' => 'join_slabs',
			'label' => 'Join Slabs',
			'title' => 'Join slabs as book-match using Festool dominos',

			'sf_rate' => $price_row->join_slabs_rate,
			'flat_rate' => $price_row->join_slabs_flat,

			'default' => true,
			'force_enable' => false
		],

		[
			'id' => 'epoxy',
			'label' => 'Epoxy',
			'title' => 'Fill minor checks with epoxy',

			'sf_rate' => $price_row->epoxy_rate,
			'flat_rate' => $price_row->epoxy_flat,

			'default' => true,
			'force_enable' => false
		],


		[
			'id' => 'finish_sand',
			'label' => 'Finish Sand',
			'title' => 'Sand book-matched top to 220 grit',

			'sf_rate' => $price_row->finish_sand_rate,
			'flat_rate' => $price_row->finish_sand_flat,

			'default' => true,
			'force_enable' => false
		],

		[
			'id' => 'coating',
			'label' => 'Finished Tabletop',
			'title' => 'Finish with 3 coats conversion varnish or hand rubbed oil',

			'sf_rate' => $price_row->coating_rate,
			'flat_rate' => $price_row->coating_flat,

			'default' => true,
			'force_enable' => false
		],

		// [
		// 	'id' => 'table_base',
		// 	'label' => 'Table Base',
		// 	'title' => 'Add standard Table Base',

		// 	'sf_rate' => $price_row->table_base_rate,
		// 	'flat_rate' => $price_row->table_base_flat,

		// 	'default' => true,
		// 	'force_enable' => false
		// ]

	]

];

$current_options = $is_bookmatch
	? $options['bookmatch']
	: $options['single'];

$calculated_options = [];

// margin
$margin = ($margin !== '' && $margin !== null)
	? floatval($margin)
	: floatval($price_row->default_margin_percentage);

foreach ($current_options as $option) {

	$sf_rate = !empty($option['sf_rate'])
		? floatval($option['sf_rate'])
		: 0;

	$flat_rate = !empty($option['flat_rate'])
		? floatval($option['flat_rate'])
		: 0;

	/*
	| IMPORTANT
	|
	| Margin ONLY on SF RATE
	| Flat rate added AFTER margin calculation
	*/

	$sf_rate_with_margin =
		$sf_rate + (($sf_rate * $margin) / 100);

	// SF calculation
	$sf_total =
		$sf_rate_with_margin * $square_feet;

	// Final total
	$total =
		$sf_total + $flat_rate;

	$total = round($total, 2);

	$option['sf_rate_with_margin'] = $sf_rate_with_margin;
	$option['sf_total'] = round($sf_total, 2);
	$option['flat_total'] = round($flat_rate, 2);
	$option['total'] = $total;

	$calculated_options[] = $option;
}
?>

<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: 70px 0px;
	}

	.wood_price_layout {
		display: grid;
		grid-template-columns: minmax(0, 860px) 300px;
		column-gap: 60px;
		align-items: start;
	}

	.wood_price_main_contamt {
		width: 100%;
		border: 1px solid #c6945378;
		padding: 40px;
		border-radius: 3px;
		box-sizing: border-box;
	}

	.wood_price_title {
		margin: 0 0 18px;
		color: #000;
		font-size: 26px;
		font-weight: 700;
		line-height: 1.05;
		padding-bottom: 13px;
		position: relative;
	}

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

	.maliti_slab {
		margin: 0 !important;
		padding: 40px 0px;
	}

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

	.wood_price_checks {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 15px 30px;
		margin: 0 0 24px 0;
	}

	.wood_price_check_item {
		position: relative;
		display: flex;
		align-items: center;
		gap: 10px;
		color: #8a8a8a;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.4;
		cursor: pointer;
		user-select: none;
		width: 100%;
	}

	@media(max-width:767px) {
		.wood_price_checks {
			grid-template-columns: 1fr;
		}
	}

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

	.wood_price_fake_check {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #d8d8d8;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 10px;
		line-height: 1;
		flex: 0 0 20px;
	}

	.wood_price_check_item input:checked+.wood_price_fake_check {
		background: #9bbb25;
	}

	.wood_price_btn {
		border: 2px solid #efbd66;
		background: #fff1d9;
		color: #7a4b29;
		height: 48px;
		border-radius: 26px;
		padding: 0 4px 0 21px;
		min-width: 202px;
		display: inline-flex;
		align-items: center;
		justify-content: space-between;
		gap: 15px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		cursor: pointer;
		box-shadow: none;
	}

	.wood_price_btn_circle {
		width: 39px;
		height: 39px;
		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 39px;
	}

	.wood_price_form_main {
		padding: 20px 20px 0px 20px;
		box-sizing: border-box;
	}

	.wood_price_hidden_content {
		max-height: auto;
		overflow: hidden;
		opacity: 0;
		transform: translateY(15px);
		transition: max-height .6s ease, opacity .35s ease, transform .35s ease;
	}

	.wood_price_hidden_content.wood_price_open {
		max-height: auto;
		opacity: 1;
		/* transform: translateY(0); */
		border-top: 1px solid #ddd;
		margin-top: 20px;
	}

	.wood_price_section {
		width: 100%;
		margin-top: 24px;
	}

	.wood_price_form_heding h3 {
		color: #000000;
		font-size: 21px;
		line-height: 1.3;
		margin-bottom: 30px;
	}

	.wood_price_form {
		margin-top: 50px;
		width: 100%;
		max-width: 100%;
		background: rgba(198, 148, 83, .08);
		text-align: center;
		padding: 20px;
		padding-top: 30px;
		box-sizing: border-box !important;
	}

	.wood_price_form p {
		font-size: 20px;
		font-weight: 700 !important;
		line-height: 34px;
		color: #161922;
		font-family: "Montserrat", Arial, Tahoma, sans-serif;
		letter-spacing: 0px;
		text-transform: uppercase !important;
	}

	.wood_price_form_grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 25px 30px;
	}

	.wood_price_field label {
		display: block;
		margin: 0 0 12px 3px;
		color: #4f2c19;
		font-size: 13px;
		font-weight: 700;
		line-height: 1;
		text-transform: none;
	}

	.wood_price_field label span {
		color: #d72929;
	}

	.wood_price_input,
	.wood_price_form input[type="text"],
	.wood_price_form input[type="email"],
	.wood_price_form input[type="tel"] {
		width: 100% !important;
		height: 43px !important;
		min-height: 43px !important;
		border: 0 !important;
		outline: 0 !important;
		box-shadow: none !important;
		border-radius: 24px !important;
		background: #ededed !important;
		color: #555 !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 43px !important;
		padding: 0 20px !important;
		margin: 0 !important;
		appearance: none;
		-webkit-appearance: none;

		background-color: #FFFFFFFF !important;
		color: #2c3345FF !important;
		border: 1px solid #C69453FF !important;
		border: 1px solid #C69453FF !important;
		border-radius: 50px !important;
		padding: 10px 15px 10px 15px !important;
		box-shadow: 0px 0px 0px 0px #FFFFFF;
		font-family: 'Lato';
		font-size: 14px;
		font-weight: 400;
		background-clip: inherit !important;
	}

	.wood_price_input input::placeholder {
		opacity: 0.6 !important;
	}

	.wood_price_submit_box {
		text-align: center;
		margin-top: 52px;
	}

	.wood_price_submit_btn {
		min-width: 218px;
		gap: 60px;
	}

	.wood_price_card {
		width: 300px;
		border: 7px solid #dfa95e;
		background: #fff;
		margin-top: 11px;
		box-sizing: border-box;
	}

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

	.wood_price_card_caption {
		background: #7a421f;
		color: #fff;
		text-align: center;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.35;
		padding: 11px 8px 12px;
		min-height: 51px;
	}

	.wood_price_sub_title {
		margin: 40px 0 8px;
		color: #6c3b22;
		font-size: 23px;
		font-weight: 700;
		line-height: 1.3;
	}

	.wood_price_description {
		margin: 26px 0 26px;
		color: #565656;
		font-size: 17px;
		font-weight: 600;
		line-height: 1.5;
	}

	.che_nanme {
		color: #565656;
		font-size: 16px;
		font-weight: 600;
		margin-left: 3px;
		margin-top: 0px;
	}

	@media(max-width:991px) {
		.wood_price_layout {
			grid-template-columns: 1fr;
			row-gap: 30px;
		}

		.wood_price_card {
			margin-top: 0;
			border: 5px solid #dfa95e;
			width: 100%;
		}

		.wood_price_card_img {
			height: auto;
		}

		aside.wood_price_right {
			order: -1;
		}
	}


	@media(max-width:767px) {
		.wood_price_title {
			font-size: 26px;
		}



		.wood_price_form_main {
			padding: 0px;
		}

		.wood_price_main_contamt {
			padding: 15px;
		}

		.wood_price_main {
			width: 100%;
			padding: 50px 0px;
		}

		.wood_price_checks {
			gap: 14px;
			align-items: flex-start;
			flex-direction: column;
			margin-left: 0;
		}

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

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

		.wood_price_line_text {
			white-space: normal;
		}
	}
</style>

<!-- Calculator Result -->
<style>
	.wood_price_quote_table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 0px;
		background: #fff;
	}

	.wood_price_quote_table td {
		padding: 6px 0;
		vertical-align: top;
		border: none;
		background: transparent !important;
	}

	.quote_heading {
		font-size: 18px;
		font-weight: 700;
		color: #6c3b22;
		text-transform: uppercase;
		padding-bottom: 30px !important;
		text-align: left;
		background: transparent !important;
		font-family: "Montserrat", Arial, Tahoma, sans-serif;
	}

	.main_slab_row td {
		padding-bottom: 28px;
		background: transparent !important;
	}

	.optional_heading {
		font-size: 22px;
		font-weight: 800;
		color: #000;
		padding-bottom: 20px !important;
		padding-top: 10px !important;
		text-align: left;
		background: transparent !important;
	}

	.left_col {
		width: 51%;
		text-align: left;
		background: transparent !important;
	}

	.middle_col {
		width: 29%;
		text-align: right;
		padding-right: 40px !important;
		white-space: nowrap;
		background: transparent !important;
	}

	.right_col {
		width: 20%;
		text-align: right;
		background: transparent !important;
	}

	.slab_name {
		font-size: 22px;
		font-weight: 700;
		color: #000;
		background: transparent !important;
	}

	.slab_price {
		font-size: 22px;
		font-weight: 500;
		color: #000;
		background: transparent !important;
	}

	.option_main_row td {
		padding-top: 18px;
		background: transparent !important;
	}

	.option_label {
		font-size: 18px;
		font-weight: 700;
		color: #000;
		text-transform: uppercase;
		background: transparent !important;
	}

	.option_price {
		font-size: 18px;
		font-weight: 500;
		color: #000;
		background: transparent !important;
	}

	.option_description {
		font-size: 16px;
		font-weight: 400;
		color: #555;
		line-height: 1.5;
		padding-bottom: 10px !important;
		background: transparent !important;
	}

	.running_total {
		font-size: 18px;
		font-weight: 500;
		color: #000;
		vertical-align: bottom;
		background: transparent !important;
	}

	.final_total_row td {
		padding-top: 22px;
		background: transparent !important;
	}

	.border_top_only {
		border-top: 2px solid #000 !important;
	}

	.final_total_text {
		font-size: 22px;
		font-weight: 700;
		color: #000;
		text-align: center;
		background: transparent !important;
	}

	.final_total_price {
		font-size: 24px;
		font-weight: 800;
		color: #000;
		background: transparent !important;
	}

	@media(max-width:767px) {

		.quote_heading {
			font-size: 15px;
		}

		.optional_heading {
			font-size: 18px;
		}

		.slab_name,
		.slab_price {
			font-size: 18px;
		}

		.option_label,
		.option_price,
		.running_total {
			font-size: 15px;
		}

		.option_description {
			font-size: 13px;
		}

		.final_total_text {
			font-size: 18px;
		}

		.final_total_price {
			font-size: 20px;
		}

		.middle_col {
			padding-right: 15px !important;
		}
	}
</style>
</head>

<body>

	<section class="wood_price_main">
		<div class="container">
			<div class="wood_price_main_contamt">
				<div class="wood_price_layout">
					<div class="wood_price_left">
						<h2 class="wood_price_title"><?php echo $image_title; ?></h2>

						<!-- <h4 class="wood_price_sub_title">
							<?php echo $image_title; ?>
						</h4> -->

						<p class="wood_price_description">
							<?php echo $description; ?>
						</p>

						<div class="wood_price_hidden_content wood_price_open" id="wood_price_content">
							<div class="wood_price_section">

								<table class="wood_price_quote_table">

									<!-- <tr>
										<td colspan="3" class="quote_heading">
											SINGLE SLAB MILLWORK QUOTE
										</td>
									</tr> -->

									<tr class="main_slab_row">

										<td class="left_col slab_name">
											<?php echo $image_title; ?>
										</td>

										<td class="middle_col"></td>

										<td class="right_col slab_price">
											$<?php echo number_format($price, 2); ?>

										</td>

									</tr>

									<tr>
										<td colspan="3" class="optional_heading">
											Optional Millwork Pricing
										</td>
									</tr>

									<?php
									$running_total = $price;

									foreach ($calculated_options as $option):

										$option_price = $option['total'];

										if ($option['default']) {
											$running_total += $option_price;
										}
									?>

										<tbody
											class="option_row_group"
											id="group_<?php echo $option['id']; ?>">

											<tr class="option_main_row">

												<td class="left_col option_label">
													<?php echo $option['label']; ?>
												</td>

												<td class="middle_col option_price">
													add $<?php echo number_format($option_price, 2); ?>
												</td>

												<td class="right_col"></td>

											</tr>

											<tr class="option_desc_row">

												<td class="left_col option_description">
													<?php echo $option['title']; ?>
												</td>

												<td class="middle_col"></td>

												<td
													class="right_col running_total"
													data-option="<?php echo $option['id']; ?>">
													Total $0
												</td>

											</tr>

										</tbody>

									<?php endforeach; ?>

									<tr class="final_total_row">

										<td class="left_col border_top_only"></td>

										<td class="middle_col final_total_text border_top_only">
											Total
										</td>

										<td
											class="right_col final_total_price border_top_only"
											id="final_total">
											$0
										</td>

									</tr>

								</table>

							</div>

							<div class="wood_price_form">
								<p>Request Freight Quote</p>
								<hr>
								<div class="wood_price_form_main">
									<iframe
										src="https://hlink.woodvendors.com/widget/form/xOyYPdp9BdAzMCtkeKyD"
										style="width:100%;height:100%;border:none;border-radius:0px"
										id="inline-xOyYPdp9BdAzMCtkeKyD"
										data-layout="{'id':'INLINE'}"
										data-trigger-type="alwaysShow"
										data-trigger-value=""
										data-activation-type="alwaysActivated"
										data-activation-value=""
										data-deactivation-type="neverDeactivate"
										data-deactivation-value=""
										data-form-name="Woodvendors Calculator Request"
										data-height="600"
										data-layout-iframe-id="inline-xOyYPdp9BdAzMCtkeKyD"
										data-form-id="xOyYPdp9BdAzMCtkeKyD"
										title="Woodvendors Calculator Request">
									</iframe>
									<script src="https://hlink.woodvendors.com/js/form_embed.js"></script>
								</div>


							</div>
						</div>
					</div>

					<aside class="wood_price_right">
						<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>
					</aside>
				</div>
			</div>

		</div>
	</section>

	<script>
		document.addEventListener('DOMContentLoaded', function() {

			var slabPrice = <?php echo floatval($price); ?>;

			var calculatedOptions = <?php echo json_encode($calculated_options); ?>;

			function updateTotals() {

				var runningTotal = slabPrice;

				calculatedOptions.forEach(function(option) {

					var rowGroup = document.getElementById(
						'group_' + option.id
					);

					rowGroup.style.display = '';

					var optionPrice = parseFloat(option.total);

					runningTotal += optionPrice;

					rowGroup.querySelector('.running_total').innerHTML =
						'Total $' + runningTotal.toFixed(2);

				});

				document.getElementById('final_total').innerHTML =
					'$' + runningTotal.toFixed(2);
			}

			updateTotals();
		});
	</script>



	<?php get_footer(); ?>