<?php
$sku = isset($sku) ? $sku : '';
$configurator_contactButton = esc_attr(get_option("configurator_enable_contact_form"));
$configurator_contactText = esc_attr(get_option("configurator_contact_text_setting"));	
$configurator_redirectUrl = esc_attr(get_option("configurator_contact_redirect_setting"));	
$configurator_use_recaptcha = esc_attr(get_option("configurator_use_recaptcha_setting"));
$recaptcha_site_key = esc_attr(get_option("configurator_recaptcha_sitekey_setting"));
$enable_gdpr_checkbox = esc_attr(get_option("configurator_contact_enable_gdpr_setting"));
$gdpr_checkbox_label = esc_attr(get_option("configurator_gdpr_label_setting"));
$gdpr_checkbox_message = get_option("configurator_contact_gdpr_message_setting");
?>


<div class="fcf-body">
	<div class="close-contact">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
			<path d="m48.82,43.1l-5.72,5.72c-.76.76-1.81,1.18-2.86,1.18s-2.1-.42-2.86-1.18l-12.37-12.37-12.37,12.37c-.76.76-1.81,1.18-2.86,1.18s-2.1-.42-2.86-1.18l-5.72-5.72c-.76-.76-1.18-1.81-1.18-2.86s.42-2.1,1.18-2.86l12.37-12.37L1.18,12.63c-.76-.76-1.18-1.81-1.18-2.86s.42-2.1,1.18-2.86L6.9,1.18c.76-.76,1.81-1.18,2.86-1.18s2.1.42,2.86,1.18l12.37,12.37L37.37,1.18c.76-.76,1.81-1.18,2.86-1.18s2.1.42,2.86,1.18l5.72,5.72c.76.76,1.18,1.81,1.18,2.86s-.42,2.1-1.18,2.86l-12.37,12.37,12.37,12.37c.76.76,1.18,1.81,1.18,2.86s-.42,2.1-1.18,2.86Z"/>
		</svg>
	</div>
	<div id="fcf-form">
		<div class="contact-header">
			<h3 class="fcf-h3">Contact us about:</h3>
			<div class="contact-image test<?php echo esc_textarea($sku); ?>"><img id="cart_image" src=""/></div>
		</div>
		<div id="contact_form">	
			<form id="fcf-form-id" name="contact_form" method="POST" class="fcf-form-class" action="" enctype="multipart/form-data" autocomplete="off" accept-charset="utf-8">
				<div class="fcf-form-group">
					<label for="Name" class="fcf-label">Your name</label>
					<div class="fcf-input-group">
						<input type="text" id="Name" name="contact_full_name" class="fcf-form-control" required>
					</div>
				</div>
				<div class="fcf-form-group">
					<label for="Email" class="fcf-label">Your email address</label>
					<div class="fcf-input-group">
						<input type="email" id="Email" name="contact_email" class="fcf-form-control" required>
					</div>
				</div>
				<div class="fcf-form-group">
					<label for="Message" class="fcf-label">Your message</label>
					<div class="fcf-input-group">
						<textarea id="Message" name="contact_message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>
					</div>
				</div>
				<?php if($enable_gdpr_checkbox): ?>
					<div class="fcf-form-group">
						<div class="gdpr-wrapper">
							<div class="gdpr-message">
								<?php echo $gdpr_checkbox_message ?>
							</div>
							<div class="gdpr-checkbox">
								<input type="checkbox" id="Gdpr" name="contact_gdpr" required>
								<label for="Gdpr" class="fcf-label"><?php echo $gdpr_checkbox_label ?></label>
							</div>
						</div>
					</div>
				<?php endif; ?>
				<div class="fcf-form-group" style="display: none;">
					<label for="Configuration" class="fcf-label">Your configuration</label>
					<div class="fcf-input-group">
						<textarea id="Configuration" name="contact_configuration" class="fcf-form-control" rows="6" maxlength="8000" style="pointer-event:none; opacity:0.8;"></textarea>
					</div>
				</div>
				<?php if($configurator_use_recaptcha): ?>
					<div class="g-recaptcha" data-sitekey="<?php echo $recaptcha_site_key ?>"></div>								
					<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response" />
				<?php endif; ?>
				<input type="hidden" id="Image" name="product_image" value=""/>
				<input type="hidden" id="ProductName" name="product_name" value=""/>
				<input type="hidden" id="ProductPrice" name="product_price" value=""/>
				<input type="hidden" id="ProductSku" name="product_sku" value="<?php echo esc_textarea($sku); ?>"/>
				<input type="hidden" name="action" value="contact_form">
				<?php if ($configurator_redirectUrl && $configurator_redirectUrl !== ''): ?>
					<input type="hidden" name="base_page" value="<?php echo home_url($configurator_redirectUrl); ?>">
				<?php endif; ?>
				<div class="fcf-form-group fta-buttons">
					<button type="submit" name="submit_btn" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Contact us</button>
					<span id="error_message">
				</div>								
			</form>
		</div>							
	</div>
</div>



<script>
	document.addEventListener('DOMContentLoaded', function(){
		jQuery("#quote_btn").click(function() {
			jQuery('.fcf-body').addClass('active');
			var src = jQuery("#cart_image").attr('src');
			var name = jQuery("#title_wrapper").text();
			var price = jQuery(".sum .price").text();
			jQuery(".contact-image img").attr('src', src);
			jQuery("#ProductName").val(name);
			jQuery("#ProductPrice").val(price);
			jQuery("#Image").val(src);
		});
		jQuery(".close-contact").click(function() {
			jQuery('.fcf-body').removeClass('active');
		});			
	});
	// Handle form submission
	jQuery('#fcf-form-id').submit(function(e) {
		
		e.preventDefault(); // Prevent the default form submission
		<?php if($configurator_use_recaptcha): ?>
			// ReCaptcha
			
			var recaptchaResponse = grecaptcha.getResponse();
			if (recaptchaResponse.length === 0) {
				e.preventDefault();
				alert('Please complete the reCAPTCHA.');
			}
		<?php endif; ?>
		// Get the form data
		var formData = jQuery(this).serialize();
		console.log(formData);
		var ajaxUrl = '<?php echo admin_url('admin-ajax.php'); ?>';
		// Send an AJAX request
		jQuery.ajax({
			type: 'POST',
			url: ajaxUrl, // 'ajaxurl' is a global variable in WordPress that contains the URL for the AJAX request
			data: {
				action: 'custom_form_submit', // Create a WordPress AJAX action hook for form submission
				<?php if($configurator_use_recaptcha): ?>
					recaptcha_response: recaptchaResponse,
				<?php endif; ?>
				formData: formData
				
			},
			success: function(response) {
				// Handle the success response
				if (response.success) {
					<?php if ($configurator_redirectUrl && $configurator_redirectUrl !== ''): ?>
						window.location.href = '<?php echo $configurator_redirectUrl ?>';
					<?php else: ?>
						// Display the success message on the same page
						jQuery("#contact_form").html("<div id='message'></div>");
						jQuery("#message")
						  .html("<h2>Contact Form Submitted!</h2>")
						  .append("<p>We will be in touch soon.</p>");

						// Clear the form fields if needed
						jQuery('#fcf-form-id').trigger('reset');
					<?php endif; ?>
				} else {
					// Display an error message on the same page
					jQuery('#error_message').text('Failed to submit the form.');
				}
			},
			error: function(xhr, status, error) {
				// Display an error message on the same page
				jQuery('#error_message').text('Failed to submit the form. Error: ' + error);
			}
		});
	});
</script>