if ( $( "#calculation-alert" ).length ) {

	var pricing = {};

	// Setup measurements

	var inch = 2.54;
	var vatrate = 1.2;

	// Setup fixed attributes

	if ( $( "#product-data" ).length ){
		var product_data = JSON.parse( $( "#product-data" ).html() );
	}

	var attributes = {
	    brandName : 			$( "#brand" ).html(),
	    collectionName : 		$( "#collection" ).html(),
		fabricName : 			$( "#fabric-name" ).html(),
	    fabricWidth : 			Number( $( "#fabric-width-cm" ).html() ),
	    patternRepeat : 		Number( $( "#pattern-repeat-cm" ).html() ),
	    fabricPrice : 			Number( $( "#price-per-metre" ).html() ),
	    supplierCode : 			$( "#supplier-code" ).html(),
		discount : 				Number( $( "#discount-percentage" ).html() ),
	};

	if ( !attributes.patternRepeat || attributes.patternRepeat < 10 ) {
		attributes.patternRepeat = 10;
	}

	// Setup Worksheet Data
	var worksheet = {};
	worksheet.brandName = attributes.brandName;
	worksheet.collectionName = attributes.collectionName;
	worksheet.fabricName = attributes.fabricName;
	worksheet.fabricWidth = attributes.fabricWidth;
	worksheet.patternRepeat = attributes.patternRepeat;
	worksheet.supplierCode = attributes.supplierCode;

	setupPage();

	// If any input changes hide the pricing 

	$( "#product-options input, #product-options select" ).change(function() {
		hidePricing();
	});
	$( "#product-options input" ).keypress(function (e) {
		if (e.which != 13) {
			hidePricing();
		}
	});

	function setupPage() {
		$( ".form-group-calculate" ).show();
		$( "#product-pricing" ).hide();
		$( "#premium-pricing" ).hide();
		// Preselect Radio / Checkbox
		$(".preselect .radio:first-of-type").each(function (e) {
			var self = $(this);
			self.find('input[type=radio]').click();
		});
		$(".preselect .checkbox:first-of-type").each(function (e) {
			var self = $(this);
			self.find('input[type=checkbox]').click();
		});
		// Clear Pricing
		pricing = {};
		
	}

	function hidePricing() {
		$( ".form-group-calculate" ).show();
		$( "#product-pricing" ).hide();
		$( "#premium-pricing" ).hide();
	}

	function resetPage() {
		$( ".form-group.show" ).removeClass('show');
		$( "input" ).prop( "checked", false );
		$( ".checkbox" ).removeClass('checked');
		$( ".checkbox.clone" ).remove();
		$( ".checkbox-controller" ).prop('selectedIndex',0);
		$( "#more-information textarea" ).val("");
		$( "#worksheet textarea" ).val("");
		$( "#input-quantity,#input-unit-quantity" ).val("1");
		$( ".visual-select-option-value" ).removeClass("selected");
		$( ".visual-select-option-value:first-of-type" ).addClass("selected");
		setupPage();
	}

	function fabricLengthPatternRepeat(fabricLength, patternRepeat) {
		var fabricLengthPatternRepeat = (Math.ceil(fabricLength / patternRepeat) * patternRepeat);
		return fabricLengthPatternRepeat;
	}

	// Added to basket reset button
	$('#calculate-reset').click(function() {
		$('#calculate-price').show();
		$('#calculate-reset').hide();
	});

}

// Visual Product Options

$('#product-options input[type=number]').on( 'input', function() {
	$(this).closest('.input-group').next('.text-danger').remove();
});

$( ".visual-select-option-value" ).click( function() {
	let self = $(this);
	loadOptionData( self.data() );
	$( "#visual-select-overlay-container" ).addClass( "show" );
	$( "body" ).addClass( "menu-open" );
});

function loadOptionData( data ) {
	let key = data['option_key'];
	let option_data = product_option_data[key];
	let target = $( "#visual-select-overlay-content>div" );
	html = '';
	html += '<h3><i class="fa fa-question-circle c-brand"></i> ' + option_data.title + '</h3>';
	html += '<p>' + option_data.description + '</p>';
	html += '<div class="row">';
	html += '<div class="col-xs-12 col-md-7">';
	html += '<div class="row">';

	$.each( option_data.option_values, function( index, option_value ) {
		let option_value_title = option_value.title.toLowerCase().replace(/ /g, '-').replace(/\(/g, '').replace(/\(/g, '').replace(/\)/g, '');
		let option_value_image = ''
		if ( typeof option_data.image_prefix !== 'undefined' ) {
			option_value_image = option_data.image_prefix + key.replace(/_/g, '-') + '-' + option_value_title;
		} else {
			option_value_image = key.replace(/_/g, '-') + '-' + option_value_title;
		}
		
		html += '<div class="col-6 col-sm-4 mt-4">';
		
		let stock_class = 'in-stock';
		if (option_value.out_of_stock && option_value.out_of_stock == true) {
			stock_class = 'out-of-stock';
		}
		if ( option_value_title == data['option_value'].replace(/_/g, '-') ) {
			html += '<div class="visual-option selected ' + stock_class + '" data-option_id="' + key.replace(/_/g, '-') + '" data-option_value_title="' + option_value_title + '">';
		}else{
			html += '<div class="visual-option ' + stock_class + '" data-option_id="' + key.replace(/_/g, '-') + '" data-option_value_title="' + option_value_title + '">';
		}
		html += '<img src="/image/catalog/local/options/' + option_value_image + '.svg" alt="' + option_value.title + '" width="160" height="160">';
		html += '<h5 class="text-center pt-3 pb-2 mb-0">' + option_value.title + '</h5>';
		html += '</div>';
		html += '</div>';
	});

	html += '</div>';
	html += '</div>';
	html += '<div class="col-xs-12 col-md-5 mt-4">';

	html += '<div id="visual-option-preview">';
	html += '<div class="card">';
	html += '<div class="card-header bg-brand">';
	html += '<h5>Make Your selection</h5>';
	html += '</div>';
	html += '<div class="card-body">';
	html += '<img class="mb-4 w-100" src="/image/catalog/local/options/placeholder.svg" alt="Placeholder" width="260" height="260">';
	html += '</div>';
	html += '</div>';
	html += '</div>';

	html += '</div>';
	html += '</div>';

	target.html(html);

	$('#visual-select-overlay-content').scrollTop(0);

	$('.visual-option.selected:first-of-type').each( function() {
		selectOption($(this));
	});
}

// Select Option
$(document.body).on('click', '.visual-option', function(){
	let self = $(this);
	selectOption(self, true);
});

function selectOption( self, scroll = false ) {
	$('.visual-option').removeClass('selected');
	self.addClass('selected');
	let data = self.data();
	let key = data.option_id.replace(/-/g, '_');
	let option_data = product_option_data[key];
	let selected_option_value = '';
	let html = '';
	$.each( option_data.option_values, function( index, option_value ) {
		let option_value_title = option_value.title.toLowerCase().replace(/ /g, '-').replace(/\(/g, '').replace(/\)/g, '');
		if ( option_value_title == data['option_value_title'] ) {
			selected_option_value = option_value;
			html += selectedOptionPreview(option_data, selected_option_value, option_value_title, key);
		}
	});
	$('#visual-option-preview').replaceWith(html);
	$('#' + data.option_id + ' .visual-select-option-value').removeClass('selected');
	$('#' + data.option_id + ' .option-value-' + data.option_value_title).addClass('selected');
	if ( data.option_id != 'handsewn') {
		// Set the hidden select value
		let hidden_select_option = $('#' + data.option_id + ' .checkbox-controller option:contains("' + selected_option_value.title + '")');
		if ( hidden_select_option.length > 1 ) {
			// If more than one option is selected, find the option with the name exactly
			hidden_select_options = [];
			hidden_select_option.each(
				(_,el) => hidden_select_options.push([el.id, el.innerHTML])
			);
			for (const option of hidden_select_options) {
				if ( option[1] == selected_option_value.title ) {
					if ( $('#' + option[0]).length ) {
						$('#' + option[0]).prop('selected', true).change()
					} else {
						$('#' + data.option_id + ' .checkbox-controller option[value="' + option[1] + '"]').prop('selected', true).change();
					}
				}
			}
		} else if ( hidden_select_option.length ) {
			$('#' + data.option_id + ' .checkbox-controller option:contains("' + selected_option_value.title + '")').prop('selected', true).change();
		}else{
			alert('Error: Option not found!');
		}
			
	}

	if ( data.option_id == 'handsewn' || data.option_id == 'product-style' ) {
		handleHandsewnOptions(selected_option_value.title);
	}

	if ( data.option_id == 'product-lining' && data.option_value_title == 'none') {
		$( "#product-interlining" ).removeClass('show');
	}

	// Temporarily Out Of Stock  the 50mm Matt Black eyelets
	if ( data.option_id == 'eyelet-size' ) {
		if ( data.option_value_title == '50mm-35mm-pole-diameter' ) {
			// Reset the eyelet colour option
			$('#eyelet-colour .visual-select-option-value').removeClass('selected');
			$('#eyelet-colour .option-value-please-select').addClass('selected');
			$('#eyelet-colour .checkbox-controller').prop('selectedIndex',0).change();
			// Hide the matt black option
			outOfStockOption('eyelet_colour', 'Matt Black', true);
		}else{
			outOfStockOption('eyelet_colour', 'Matt Black', false);
		}
	}
	
	// Scroll down on mobile
	if ( scroll && $('#visual-option-preview').length && $(window).width() < 768 ) {
		$('#visual-select-overlay-content').animate({
			scrollTop: $('#visual-option-preview').offset().top
		}, 500);
	}
}

function outOfStockOption(option, title, out_of_stock)  {
	var index = product_option_data[option].option_values.findIndex((obj => obj.title == title));
	var object = product_option_data[option].option_values[index];
	object.out_of_stock = out_of_stock;
	product_option_data[option].option_values[index] = object;
}

function handleHandsewnOptions( option_value ) {
	let product_style_value = $('#product-style .visual-select-option-value.selected').attr('data-option_value');

	if ( option_value != 'Yes' && option_value != 'No' ) {
		option_value = $('#handsewn .visual-select-option-value.selected').attr('data-option_value');
	} else {
		option_value = option_value.toLowerCase();
	}

	$('#handsewn .checkbox').each(function(){
		$(this).removeClass('checked');
	});

	$('#handsewn .checkbox input').each(function(){
		$(this).prop('checked', false);
	});

	if ( product_style_value != '' && option_value == 'yes' && $('#handsewn .checkbox.' + product_style_value).find('input').prop('checked') == false  ) {
		$('#handsewn .checkbox.' + product_style_value).children('label').click();
		$('#handsewn .checkbox.' + product_style_value).addClass('checked');
	}

	if ( option_value == 'no' ) {
		$('#handsewn .checkbox.no').children('label').click();
		$('#handsewn .checkbox.no').addClass('checked');
	}

	calculateProductPrice(pricing);
}

function selectedOptionPreview( option_data, option_value, option_value_title, key ) {
	let option_value_image = ''
	if ( typeof option_data.image_prefix !== 'undefined' ) {
		option_value_image = option_data.image_prefix + key.replace(/_/g, '-') + '-' + option_value_title;
	} else {
		option_value_image = key.replace(/_/g, '-') + '-' + option_value_title;
	}
	html = '';
	html += '<div id="visual-option-preview">';
	html += '<div class="card">';
	html += '<div class="card-header bg-brand">';
	html += '<h5><i class="fa fa-check-circle"></i> Your selection</h5>';
	html += '</div>';
	html += '<div class="card-body">';
	html += '<img src="/image/catalog/local/options/' + option_value_image + '.svg" alt="' + option_value.title + '" width="260" height="260" class="w-100">';
	html += '<h3 class="mt-4">' + option_value.title + '</h3>';
	html += '<p>' + option_value.description + '</p>';
	html += '<button id="visual-option-btn-confirm" class="btn btn-success btn-block mb-4">Confirm Selection</button>';
	html += '</div>';
	html += '</div>';

	if ( option_data.clear_selection ) {
		html += '<div class="text-center">';
		html += '<button id="visual-option-btn-clear" class="btn btn-link c-body-colour" data-key="' + key.replace(/_/g, '-') + '"><i class="fa fa-undo"></i> Clear Selection</button>';
		html += '</div>';
	}
	html += '</div>';

	return html;
}

$(document.body).on('click', '#visual-select-overlay-close, #visual-select-overlay-background, #visual-option-btn-confirm' , function(){
	$( "#visual-select-overlay-container" ).removeClass( "show" );
	$( "body" ).removeClass( "menu-open" );
});

$(document.body).on('click', '#visual-option-btn-clear' , function(){
	$('#' + $(this).data('key') + ' .visual-select-option-value').removeClass('selected');
	$('#' + $(this).data('key') + ' .option-value-please-select').addClass('selected');

	// Set the hidden select value
	$('#' + $(this).data('key') + ' .checkbox-controller').prop('selectedIndex',0).change();

	$( "#visual-select-overlay-container" ).removeClass( "show" );
	$( "body" ).removeClass( "menu-open" );
});