<?php
	/**
		* Template Name: Request Part
		*
		* This is the template that displays home page by default.
		*
	*/
	
	@session_start();
	
get_header(); ?>

<?php
	
	$siteKey	= '6LeskxcUAAAAAMz91lB5tERvXBTkfke1TwMy59Zh';
	
	if(!empty($siteKey)){
		
	?>
	<script>
		var captchaContainer = null;
		var captcha = "";
		var loadCaptcha = function() {
			captchaContainer = grecaptcha.render('captcha_container', {
				'sitekey' : '<?php echo $siteKey; ?>',
				'callback' : function(response) {
					captcha = response;
				}
			});
		};
	</script>
<?php } ?>


<div id="primary" class="content-area full-width">
	<main id="main" class="site-main" role="main">
		
		<?php if ( have_posts() ) { ?>
			
			
			<?php
				// Start the loop.
				while ( have_posts() ) { 
					the_post();
					
				?>
				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					
					<div class="entry-content cdx_row">
						
						<div class="special-title clear section-large">
							<h1>Request A Part - Used Car Parts For Sale</h1>
							<span>Car Wrecker | New Model Wreckers - Australia</span>
						</div>
						
						<?php
							if($_SESSION['success_send'] == true){
								$_SESSION['success_send'] = false;
								echo '<div class="request-notif"><h2 style="color:#5bbc2e;text-align:center;">Thanks, your request was sent successfully!</h2></div>';
							}
							
						?>
						
						<div class="request-part-content section-large">
							<form id="request-part-form" class="clear" method="post" action="">
								
								<div class="wrapper cdx_9">
									<span class="required-fill"><input name="name" type="text" placeholder="Name"/><label>*</label></span>
								</div>
								<div class="wrapper cdx_9">
									<span class="required-fill"><input name="email" type="text" placeholder="Email"/><label>*</label></span>
								</div>
								<div class="wrapper cdx_9">
									<span class="required-fill"><input name="phone" type="text" placeholder="Mob/Phone"/><label>*</label></span>
								</div>
								<div class="wrapper cdx_9">
									<input name="suburb" type="text" placeholder="Suburb/ State/ Postcode"/>
								</div>
								
								<div class="wrapper cdx_17">
									<textarea name="comment" placeholder="Comment (Year/ Make/ Model/ Part)"></textarea>
								</div>
								<div class="wrapper cdx_17">
									<input name="vin_number" type="text" placeholder="VIN Number/ Engine number (located on rego paper)"/>
								</div>
								
								<div class="wrapper cdx_9">
									<div id="filedrag" class="image-drop-file">
										<span>Attach image <br/>Drop files here</span>
									</div>
									<div id="image-file">
										<input id="image_file" type="hidden" name="image_file" value=""/>
										<input id="image_url" type="hidden" name="image_url" value=""/>
									</div>
									<div id="messages" class="clear">
									</div>
									<label style="font-size: 15px;">Accepted file type: jpg, png, gif</label>
								</div>
								
								<div class="wrapper cdx_9">
									<div class="captcha">
										<div id="captcha_container" data-sitekey="<?php echo $siteKey;?>"></div>
									</div>
									<!--<span style="margin-right: 20px; display: inline-block;">
										<input id="subscribe" name="subscribe" type="checkbox" value="1"/><label for="subscribe" style="font-size: 15px;">Subscribe Newsletter?</label>
									</span>-->
									<span style="margin-right: 20px; display: inline-block;">
										<input id="send_me" name="send_me" type="checkbox" value="1"/><label for="send_me" style="font-size: 15px;">Send me a copy</label>
									</span>
								</div>
								
								<div class="wrapper cdx_17" style="text-align: center;">
									<input type="hidden" name="action" value="request_part"/>
									<button type="submit" class="special-button"><span>Submit</span></button>
								</div>
								
							</form>
							
						</div>
						
					</div><!-- .entry-content -->
					
					
				</article><!-- #post-## -->
				<?php
					// End the loop.
				}
				
				}else{
				
				get_template_part( 'template-parts/content', 'none' );
				
			}
		?>
		
	</main><!-- .site-main -->
</div><!-- .content-area -->
<script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>


<script>
	
	
	
	
	
	var showRequest = function(formData, jqForm, options){
		var form = jqForm.get(0);
		var error = false;
		
		re = /^\w+$/;
		if (!re.test(form.name.value) || form.name.value == "") {
			form.name.style.border = '1px solid #f6846c';
			error = true;
			}else{
			form.name.removeAttribute("style");
		}
		
		re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
		if (!re.test(form.email.value)) {
			form.email.style.border = '1px solid #f6846c';
			error = true;
			}else{
			form.email.removeAttribute("style");
		}
		
		re = /^\w+$/;
		if (!re.test(form.phone.value) || form.phone.value == "") {
			form.phone.style.border = '1px solid #f6846c';
			error = true;
			}else{
			form.phone.removeAttribute("style");
		}
		
		if (!captcha) {
			jQuery('#captcha_container').css('border','1px solid #f6846c');
			error = true;
			}else{
			jQuery('#captcha_container').removeAttr("style");
		}
		
		if(!error){
			jqForm.find('button:submit').attr("disabled", "disabled");
			}else{
			return false;
		}
	}
	
	var showResponse = function(response, statusText, xhr, jqForm){
		if(response === 'success_send'){
			window.location.reload(false); 
		}
	}
	
	var options = {
		beforeSubmit	: showRequest,
		success			: showResponse, 
		url				: ajaxurl
	}; 
	
	
	jQuery(document).ready(function($){
		
		$('#request-part-form').ajaxForm(options);
		
		$("#filedrag").dropzone({
			url: ajaxurl,
			maxFilesize: 4,
			parallelUploads: 1,
			uploadMultiple: true,
			acceptedFiles: "image/jpeg,image/png,image/gif",
			previewTemplate: '<div id="preview-template" style="display: none;"></div>',
			sendingmultiple : function(file, xhr, formData) {
				//Add additional data to the upload
				formData.append('action', 'image_upload');       
			},
			sending : function(){
				$('#messages').append('<div class="preview-images waiting"></div>');
				$('.special-button').attr("disabled", "disabled");
			},
			success : function(file, response){
				
				var events = JSON.parse(response);
				
				var thumbnail  = $('#messages');
				var image_file = $('#image_file');
				var image_url = $('#image_url');
				
				
				if(events.dir_files){
					var update_files = image_file.val();
					$.each(events.dir_files, function( i, value ) {
						if(i == 0 && update_files == ''){
							update_files = value;
							}else{
							update_files += ','+value;
						}
					});
					image_file.val(update_files);
				}
				
				if(events.url_files){
					var update_url = image_url.val();
					thumbnail.children('.waiting').remove();
					$.each(events.url_files, function( i, value ) {
						thumbnail.append('<div class="preview-images" style="background-image: url('+value+');"></div>');
						if(i == 0 && update_url == ''){
							update_url = value;
							}else{
							update_url += ','+value;
						}
					});
					image_url.val(update_url);
				}
				
				$('.special-button').removeAttr("disabled");
				
			},			
		});
		
	});
	
</script>
<?php get_footer(); ?>
