webuy

<style>
	/* CSS variables for our form */
	#fluentform_1 {
		--yellow-plate: #FFFF00; /* Yellow background on field */
		--message-area-background: #f9f9f9;
		--message-area-border: #CED4DA;
	}

	/* Import a number plate-like font */
	@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@800&display=swap');

	/* By default hide the Fluentform container class */
	#fluentform_1 .dvla_deets {
		display:none;
		background: var(--message-area-background);
		padding: 20px 20px 20px 34px;
		border: 1px solid var(--message-area-border);
		border-radius: 3px;
	}
	#fluentform_1 input[name="reg_input"] {
		text-transform: uppercase; /* Make the text uppercase in the  */
		font-weight:bold; /* Embolden the text */
		background:var(--yellow-plate);
		font-family: 'Inconsolata', monospace;
		font-size: 30px;
	}
	#fluentform_1 .hidden { /* The hidden RAW data form field */
		visibility:hidden; /* Hide, but allow it to be updated programatically like it's a text area field still */
		position:absolute; /* Remove its dimensions */
	}
</style>

<script>
	// Javascript variables
	$keyWaitTimeMiliSeconds = 1000; // How long to wait after the input field changes before actioning (ms)
	$interpretDVLAKeys = {

		/* Car data values listed here will be printed on frontend using the translation value provided */
		// The front end will print out in the order of the below values
		// Commented out lines won't show on the frontend

		//registrationNumber: "Car Registration Number",
		colour: "Colour",
		make: "Make",
		yearOfManufacture: "Year of Manufacture",
		engineCapacity: "Engine Capacity",
		fuelType: "Fuel Type",
		motStatus: "MOT Status",
		//motExpiryDate: "MOT Expiry Date",
		//monthOfFirstRegistration: "First Registration Date",
		//dateOfLastV5CIssued: "Last V5 Issued Date",
		//taxDueDate: "Road Tax Due Date",
		//taxStatus: "Road Tax Status",
		//co2Emissions: "CO2 Emissions (g/km)"

	}; // https://stackoverflow.com/a/1168814/1625909

	// Import our PHP variables to the client side
	var fluentform_id = "1";
	var input_box_name = "reg_input";
	var message_container_class = "dvla_deets";
	var hidden_field = "hidden";
	var DVLA_api_key = "oGvaZPoDZm5h3qg04Rhfn7H0hvoCSMZe3kAA8giH";

	jQuery(document).ready(function( $ ) {

		//console.log('Script running');

		var input_field = $('#fluentform_'+fluentform_id+' input[name="'+input_box_name+'"]');
		var message_space = $('#fluentform_'+fluentform_id+' .'+message_container_class);

		// Wait for the user to finish typing https://schier.co/blog/wait-for-user-to-stop-typing-using-javascript
		let timeout = null;
		let reg = "";
		$(input_field).on("change paste keyup", function (e) {
			clearTimeout(timeout);
			timeout = setTimeout(function () {

				//console.log('Input Value:', $(input_field).val());

				$reg_sanitize = $(input_field).val(); // Clean up the input text
				$reg_sanitize = $reg_sanitize.replace(/ /g,''); // Remove spaces https://stackoverflow.com/a/6623263/1625909
				$reg_sanitize = $reg_sanitize.replace(/[^a-zA-Z0-9 _]/g, ''); // Keep only A-Z/0-9 https://stackoverflow.com/a/45960810/1625909
				$reg_sanitize = $reg_sanitize.toUpperCase(); // Make uppercase

				// To minimize requests, we'll check if we've already just had this reg before proceeding
				if (reg === $reg_sanitize) {
					// Old value
					//console.log('Old value');
				} else {
					// New value to poll for
					//console.log('New value');
					if ($reg_sanitize.trim()) {

						//console.log('Sanitized Input Value:', $reg_sanitize);

						// Set it, if not blank ^
						reg = $reg_sanitize;

						// Reset the message area and hidden field
						$(message_space).empty();
						$('input[name="'+hidden_field+'"]').val('');

						// Begin our AJAX work
						//var settings =

						$.ajax({
						  "async": true,
						  //"url": "https://cors-anywhere.herokuapp.com/https://driver-vehicle-licensing.api.gov.uk/vehicle-enquiry/v1/vehicles",
						  "url": "https://www.wepayyoumore.co.uk/proxy.php",
						  "method": "POST",
						  "headers": {
							  "X-Proxy-URL": "https://driver-vehicle-licensing.api.gov.uk/vehicle-enquiry/v1/vehicles",
							  "x-api-key": DVLA_api_key,
							"Content-Type": "application/json",
						  },
						  "processData": false,
						  "data": "{\"registrationNumber\": \"" + $reg_sanitize + "\"}", // https://stackoverflow.com/a/51915181/1625909
							success: function (result) {
								window.lookup_result = result;
								//console.table(lookup_result);

								$.each(lookup_result, function(key, value){
									// Print verbose to hidden field
									$('textarea[name="'+hidden_field+'"]')
										.val( $('textarea[name="'+hidden_field+'"]').val() + key + ": " + value + "\n\r");

								}); // End each loop
								//alert( $('textarea[name="'+hidden_field+'"]').val() );

								$.each($interpretDVLAKeys, function(key, value){
									$(message_space).append(
										"<b>"
										+ value
										+ "</b>: "
										+ lookup_result[key]
										+ '<br>'
									);
								});

								$(message_space).slideDown();
							},
							error: function (response) {
								//alert( "Request failed: " + response );
							}
						});

					}
				}

			}, $keyWaitTimeMiliSeconds);
		});

	});
</script>


<style>
	/* CSS variables for our form */
	form.homepage_form_mod {
		--yellow-plate: #FFFF00;  /* Yellow background on field */
		--message-area-background: #f9f9f9;
		--message-area-border: #CED4DA;
	}

	form.homepage_form_mod input[type="text"] {
		text-transform: uppercase; /* Make the text uppercase in the  */
		font-weight:bold; /* Embolden the text */
		background:var(--yellow-plate);
		font-family: 'Inconsolata', monospace;
		font-size: 30px;
		border: none;
		border-radius: 13px;
		padding: 10px 25px 13px 25px;
		max-width: 100%;
	}

	form.homepage_form_mod input[type="text"]::placeholder {
		font-size: 24px;
	}

	form.homepage_form_mod input[type="submit"] {
		color: #ffffff!important;
		border-color: rgba(0,0,0,0);
		border-radius: 15px;
		font-size: 24px;
		background-color: #632984;
		display: block;
		margin: 16px auto 0px;
		padding: 15px 26px;
	}
</style>

<script>
	// Import our PHP variables to the client side
	var form_destination = "/get-a-valuation/";
	var form_class_name = "." + "homepage_form_mod";
	var fluentform_id = "1";
	var input_box_name = "reg_input";

	jQuery(document).ready(function( $ ) {

		var input_field = $('#fluentform_'+fluentform_id+' input[name="'+input_box_name+'"]');

		$.extend({
		  getUrlVars: function(){
			var vars = [], hash;
			var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
			for(var i = 0; i < hashes.length; i++)
			{
			  hash = hashes[i].split('=');
			  vars.push(hash[0]);
			  vars[hash[0]] = hash[1];
			}
			return vars;
		  },
		  getUrlVar: function(name){
			return $.getUrlVars()[name];
		  }
		});

		if ( $(form_class_name) ) {
			$(form_class_name).attr('action',form_destination);
			console.log('Updated homepage form destination');
		}

		if ($.getUrlVar( input_box_name ) != null) {
			console.log('URL param present');
			$(input_field).trigger("change");
		}

	});
</script>