<?php
/*
Template Name: Contacts
*/

$page = get_page(get_the_ID());
$currentlang = pll_current_language();?>
<?php get_header(); ?>
<div class="con">
	<div class="col side-row">
		<div class="round-block" style="background-image:url(img/cont.png)">
			<span class="middle"><?=$page->post_title?></span>
		</div>
	</div>

	<div class="col middle-row">
		<div class="top-block">
			<h2><?=$page->post_title?></h2>
			<?=apply_filters('the_content', $page->post_content)?>
		</div>
		<div class="mid-con">
			<?the_field("lower_text");?>
		</div>
		<div id="googleMap"></div>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCWG5ef6NBuMoWtc0Q5gwBDhPdUG9D-0Ys"></script>
        <script type="text/javascript">
            // When the window has finished loading create our google map below
            google.maps.event.addDomListener(window, 'load', init);

            function init() {
                var myLatlng = new google.maps.LatLng(59.433100, 24.759490);
                // Basic options for a simple Google Map
                // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
                var mapOptions = {
                    disableDefaultUI: true,

                    // How zoomed in you want the map to start at (always required)
                    zoom: 16,

                    // The latitude and longitude to center the map (always required)
                    center: myLatlng,
                    // How you would like to style the map.
                    // This is where you would paste any style found on Snazzy Maps.

                };


                // Get the HTML DOM element that will contain your map
                // We are using a div with id="map" seen below in the <body>
                var mapElement = document.getElementById('googleMap');

                // Create the Google Map using out element and options defined above
                var map = new google.maps.Map(mapElement, mapOptions);

                var image = 'img/marker.png';
                var marker2 = new google.maps.Marker({
                    position: new google.maps.LatLng(59.433100, 24.759490),
                    icon: image,
                    map: map
                });

            }

        </script>
		<div class="mid-con">
			<h3><?=($currentlang=='eng'?'Contact form':'Kontaktivorm')?></h3>
		</div>
		<form id="contactForm" method="post">
			<input name="Name, Surname" class="text-input formData formDataCheck" type="text" placeholder="<?=($currentlang=='eng'?'Name, Surname':'Eesnimi, Perekonnanimi')?> *"/>
			<input name="E-mail" class="text-input formData formDataCheck" type="text" placeholder="<?=($currentlang=='eng'?'E-mail address':'E-post')?> *"/>
			<input name="Company name" class="text-input formData formDataCheck" type="text" placeholder="<?=($currentlang=='eng'?'Company name':'Ettevõtte nimi')?> *"/>
			<input name="Position" class="text-input formData" type="text" placeholder="<?=($currentlang=='eng'?'Position':'Positsioon')?>"/>
			<input name="Phone" class="text-input formData" type="text" placeholder="<?=($currentlang=='eng'?'Phone':'Telefon')?>"/>
			<textarea name="Message" class="textarea formData" placeholder="<?=($currentlang=='eng'?'Message':'Sõnum')?> *"></textarea>
			<span><?=($currentlang=='eng'?'* required fields':'* nõutud väljad')?></span>
			<button class="bttn1 wider" id="formSubmitButton"><?=($currentlang=='eng'?'Submit':'Saada vorm')?></button>
		</form>
		<script>
			$("#contactForm .formDataCheck").keyup(function(){
				if($(this).val() != ''){
					$(this).css("border", "");
				}else{
					$(this).css("border", "1px solid red");
				}
			})
			$("#formSubmitButton").click(function(){
				var send = true;
				$("#contactForm .formDataCheck").each(function(){
					if($(this).val() == ""){
						send = false;
						$(this).css("border", "1px solid red");
					}
				})
				if(send === true){
					var formData = new FormData();
					$(".formData").each(function(){
						formData.append($(this).attr("name"), $(this).val());
					})
					$.ajax({
						url: 'contactsForm.php',
						type: 'POST',
						data: formData,
						success: function (data) {
							if(data == '1'){
								$("#contactForm").html("<p style='color:red; padding-left:30px;'><?=($currentlang=='eng'?'Thank you. Your message has been sent.':'Aitäh. Sinu sõnum on saadetud.')?></p>");
							}else{
								$("#contactForm").prepend("<p style='color:red; padding-left:30px;'><?=($currentlang=='eng'?'There was a problem sending your message. Please try later.':'Tekkis probleem saates sõnum. Palun proovige hiljem.')?></p>");
							}
						},
						cache: false,
						processData: false, 
						contentType: false
					});
				}
				return false
			})
		</script>
	</div>
	<?get_sidebar();?>
</div>
<?php get_footer(); ?>